@cntrl-site/sdk-nextjs 0.11.1 → 0.12.0

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,15 +1,10 @@
 <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 class="DuplicatedCode" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <Languages>
+        <language minSize="304" name="TypeScript" />
+      </Languages>
     </inspection_tool>
   </profile>
 </component>

package/.idea/workspace.xml

@@ -0,0 +1,427 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AutoImportSettings">
+    <option name="autoReloadType" value="SELECTIVE" />
+  </component>
+  <component name="ChangeListManager">
+    <list default="true" id="daade3cc-2214-4d1b-a6ad-012b8ae407bf" name="Changes" comment="CNTRL-1039: code fix" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_BRANCH_BY_REPOSITORY">
+      <map>
+        <entry key="$PROJECT_DIR$" value="main" />
+      </map>
+    </option>
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="MarkdownSettingsMigration">
+    <option name="stateVersion" value="1" />
+  </component>
+  <component name="ProjectId" id="2H4nx2LrD2TTrbJMopYKifu02PK" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
+    &quot;last_opened_file_path&quot;: &quot;/Users/admin/Documents/CNTRL/sdk-nextjs&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;/Users/admin/Documents/CNTRL/sdk-nextjs/node_modules/typescript/lib&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+  }
+}</component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="daade3cc-2214-4d1b-a6ad-012b8ae407bf" name="Changes" comment="" />
+      <created>1667553465933</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1667553465933</updated>
+      <workItem from="1667553467855" duration="59000" />
+      <workItem from="1667577252000" duration="8061000" />
+      <workItem from="1667926766782" duration="2182000" />
+      <workItem from="1668162212487" duration="28710000" />
+      <workItem from="1669397663981" duration="8121000" />
+      <workItem from="1669630429786" duration="5568000" />
+      <workItem from="1669712625667" duration="100000" />
+      <workItem from="1670846885306" duration="14667000" />
+      <workItem from="1670922174491" duration="24668000" />
+      <workItem from="1683273070032" duration="33669000" />
+      <workItem from="1685023468162" duration="174000" />
+      <workItem from="1685024252092" duration="9689000" />
+      <workItem from="1685346557713" duration="1029000" />
+      <workItem from="1685951123113" duration="73662000" />
+    </task>
+    <task id="LOCAL-00001" summary="CNTRL-484 - added embed vimeo video">
+      <created>1667586762678</created>
+      <option name="number" value="00001" />
+      <option name="presentableId" value="LOCAL-00001" />
+      <option name="project" value="LOCAL" />
+      <updated>1667586762678</updated>
+    </task>
+    <task id="LOCAL-00002" summary="CNTRL-484 - problem fix">
+      <created>1667587045426</created>
+      <option name="number" value="00002" />
+      <option name="presentableId" value="LOCAL-00002" />
+      <option name="project" value="LOCAL" />
+      <updated>1667587045426</updated>
+    </task>
+    <task id="LOCAL-00003" summary="CNTRL-484 - version bump">
+      <created>1667587257510</created>
+      <option name="number" value="00003" />
+      <option name="presentableId" value="LOCAL-00003" />
+      <option name="project" value="LOCAL" />
+      <updated>1667587257510</updated>
+    </task>
+    <task id="LOCAL-00004" summary="CNTRL-486 - added youtube item">
+      <created>1668184730139</created>
+      <option name="number" value="00004" />
+      <option name="presentableId" value="LOCAL-00004" />
+      <option name="project" value="LOCAL" />
+      <updated>1668184730139</updated>
+    </task>
+    <task id="LOCAL-00005" summary="CNTRL-486 - added youtube type">
+      <created>1668185842201</created>
+      <option name="number" value="00005" />
+      <option name="presentableId" value="LOCAL-00005" />
+      <option name="project" value="LOCAL" />
+      <updated>1668185842201</updated>
+    </task>
+    <task id="LOCAL-00006" summary="CNTRL-486 - youtube fixes">
+      <created>1668193338566</created>
+      <option name="number" value="00006" />
+      <option name="presentableId" value="LOCAL-00006" />
+      <option name="project" value="LOCAL" />
+      <updated>1668193338566</updated>
+    </task>
+    <task id="LOCAL-00007" summary="CNTRL-486 - added mute to video when autoplay On">
+      <created>1668504184323</created>
+      <option name="number" value="00007" />
+      <option name="presentableId" value="LOCAL-00007" />
+      <option name="project" value="LOCAL" />
+      <updated>1668504184323</updated>
+    </task>
+    <task id="LOCAL-00008" summary="CNTRL-486 - added search params to Url">
+      <created>1668506131079</created>
+      <option name="number" value="00008" />
+      <option name="presentableId" value="LOCAL-00008" />
+      <option name="project" value="LOCAL" />
+      <updated>1668506131079</updated>
+    </task>
+    <task id="LOCAL-00009" summary="CNTRL-486 - version update">
+      <created>1668508864371</created>
+      <option name="number" value="00009" />
+      <option name="presentableId" value="LOCAL-00009" />
+      <option name="project" value="LOCAL" />
+      <updated>1668508864371</updated>
+    </task>
+    <task id="LOCAL-00010" summary="CNTRL-486 - version bump">
+      <created>1668509275485</created>
+      <option name="number" value="00010" />
+      <option name="presentableId" value="LOCAL-00010" />
+      <option name="project" value="LOCAL" />
+      <updated>1668509275485</updated>
+    </task>
+    <task id="LOCAL-00011" summary="CNTRL-486 - version bump">
+      <created>1668509525445</created>
+      <option name="number" value="00011" />
+      <option name="presentableId" value="LOCAL-00011" />
+      <option name="project" value="LOCAL" />
+      <updated>1668509525445</updated>
+    </task>
+    <task id="LOCAL-00012" summary="CNTRL-486 - fixes">
+      <created>1669397733023</created>
+      <option name="number" value="00012" />
+      <option name="presentableId" value="LOCAL-00012" />
+      <option name="project" value="LOCAL" />
+      <updated>1669397733023</updated>
+    </task>
+    <task id="LOCAL-00013" summary="CNTRL-486 - fixes">
+      <created>1669402876183</created>
+      <option name="number" value="00013" />
+      <option name="presentableId" value="LOCAL-00013" />
+      <option name="project" value="LOCAL" />
+      <updated>1669402876183</updated>
+    </task>
+    <task id="LOCAL-00014" summary="CNTRL-486 - fixes">
+      <created>1669402893251</created>
+      <option name="number" value="00014" />
+      <option name="presentableId" value="LOCAL-00014" />
+      <option name="project" value="LOCAL" />
+      <updated>1669402893251</updated>
+    </task>
+    <task id="LOCAL-00015" summary="CNTRL-486 - fixes">
+      <created>1669405389296</created>
+      <option name="number" value="00015" />
+      <option name="presentableId" value="LOCAL-00015" />
+      <option name="project" value="LOCAL" />
+      <updated>1669405389296</updated>
+    </task>
+    <task id="LOCAL-00016" summary="CNTRL-486 - fixes">
+      <created>1669405966077</created>
+      <option name="number" value="00016" />
+      <option name="presentableId" value="LOCAL-00016" />
+      <option name="project" value="LOCAL" />
+      <updated>1669405966077</updated>
+    </task>
+    <task id="LOCAL-00017" summary="CNTRL-486 - version bump">
+      <created>1669408571358</created>
+      <option name="number" value="00017" />
+      <option name="presentableId" value="LOCAL-00017" />
+      <option name="project" value="LOCAL" />
+      <updated>1669408571358</updated>
+    </task>
+    <task id="LOCAL-00018" summary="CNTRL-617 Youtube anf vimeo videos Url update">
+      <created>1669635492235</created>
+      <option name="number" value="00018" />
+      <option name="presentableId" value="LOCAL-00018" />
+      <option name="project" value="LOCAL" />
+      <updated>1669635492235</updated>
+    </task>
+    <task id="LOCAL-00019" summary="CNTRL-617 Version bump">
+      <created>1669635593460</created>
+      <option name="number" value="00019" />
+      <option name="presentableId" value="LOCAL-00019" />
+      <option name="project" value="LOCAL" />
+      <updated>1669635593460</updated>
+    </task>
+    <task id="LOCAL-00020" summary="CNTRL-694 added valid url builder">
+      <created>1670861002829</created>
+      <option name="number" value="00020" />
+      <option name="presentableId" value="LOCAL-00020" />
+      <option name="project" value="LOCAL" />
+      <updated>1670861002829</updated>
+    </task>
+    <task id="LOCAL-00021" summary="CNTRL-694 added code styling and version bump">
+      <created>1670862883753</created>
+      <option name="number" value="00021" />
+      <option name="presentableId" value="LOCAL-00021" />
+      <option name="project" value="LOCAL" />
+      <updated>1670862883753</updated>
+    </task>
+    <task id="LOCAL-00022" summary="CNTRL-694 comments fix">
+      <created>1670864771128</created>
+      <option name="number" value="00022" />
+      <option name="presentableId" value="LOCAL-00022" />
+      <option name="project" value="LOCAL" />
+      <updated>1670864771128</updated>
+    </task>
+    <task id="LOCAL-00023" summary="CNTRL-694 undefined url fix">
+      <created>1670947749514</created>
+      <option name="number" value="00023" />
+      <option name="presentableId" value="LOCAL-00023" />
+      <option name="project" value="LOCAL" />
+      <updated>1670947749514</updated>
+    </task>
+    <task id="LOCAL-00024" summary="CNTRL-694 version bump">
+      <created>1670948708761</created>
+      <option name="number" value="00024" />
+      <option name="presentableId" value="LOCAL-00024" />
+      <option name="project" value="LOCAL" />
+      <updated>1670948708762</updated>
+    </task>
+    <task id="LOCAL-00025" summary="CNTRL-427: changed Item w and h params">
+      <created>1670952164829</created>
+      <option name="number" value="00025" />
+      <option name="presentableId" value="LOCAL-00025" />
+      <option name="project" value="LOCAL" />
+      <updated>1670952164829</updated>
+    </task>
+    <task id="LOCAL-00026" summary="CNTRL-427: changed white-space prop to normal for all text aligns">
+      <created>1671017859114</created>
+      <option name="number" value="00026" />
+      <option name="presentableId" value="LOCAL-00026" />
+      <option name="project" value="LOCAL" />
+      <updated>1671017859114</updated>
+    </task>
+    <task id="LOCAL-00027" summary="CNTRL-427: deleted unused import">
+      <created>1671017914825</created>
+      <option name="number" value="00027" />
+      <option name="presentableId" value="LOCAL-00027" />
+      <option name="project" value="LOCAL" />
+      <updated>1671017914825</updated>
+    </task>
+    <task id="LOCAL-00028" summary="CNTRL-427: version bump">
+      <created>1671097766100</created>
+      <option name="number" value="00028" />
+      <option name="presentableId" value="LOCAL-00028" />
+      <option name="project" value="LOCAL" />
+      <updated>1671097766100</updated>
+    </task>
+    <task id="LOCAL-00029" summary="CNTRL-861: added scale for item">
+      <created>1683462977817</created>
+      <option name="number" value="00029" />
+      <option name="presentableId" value="LOCAL-00029" />
+      <option name="project" value="LOCAL" />
+      <updated>1683462977817</updated>
+    </task>
+    <task id="LOCAL-00030" summary="CNTRL-861: added scale to cover div">
+      <created>1683464547773</created>
+      <option name="number" value="00030" />
+      <option name="presentableId" value="LOCAL-00030" />
+      <option name="project" value="LOCAL" />
+      <updated>1683464547774</updated>
+    </task>
+    <task id="LOCAL-00031" summary="CNTRL-861: fixes">
+      <created>1683464779856</created>
+      <option name="number" value="00031" />
+      <option name="presentableId" value="LOCAL-00031" />
+      <option name="project" value="LOCAL" />
+      <updated>1683464779856</updated>
+    </task>
+    <task id="LOCAL-00032" summary="CNTRL-861: added rotate to items">
+      <created>1683474659610</created>
+      <option name="number" value="00032" />
+      <option name="presentableId" value="LOCAL-00032" />
+      <option name="project" value="LOCAL" />
+      <updated>1683474659610</updated>
+    </task>
+    <task id="LOCAL-00033" summary="CNTRL-861: fixes">
+      <created>1683474875208</created>
+      <option name="number" value="00033" />
+      <option name="presentableId" value="LOCAL-00033" />
+      <option name="project" value="LOCAL" />
+      <updated>1683474875208</updated>
+    </task>
+    <task id="LOCAL-00034" summary="CNTRL-861: fixes">
+      <created>1683474899380</created>
+      <option name="number" value="00034" />
+      <option name="presentableId" value="LOCAL-00034" />
+      <option name="project" value="LOCAL" />
+      <updated>1683474899380</updated>
+    </task>
+    <task id="LOCAL-00035" summary="CNTRL-861: fixe">
+      <created>1683476057882</created>
+      <option name="number" value="00035" />
+      <option name="presentableId" value="LOCAL-00035" />
+      <option name="project" value="LOCAL" />
+      <updated>1683476057882</updated>
+    </task>
+    <task id="LOCAL-00036" summary="CNTRL-861: comment fix">
+      <created>1683477122292</created>
+      <option name="number" value="00036" />
+      <option name="presentableId" value="LOCAL-00036" />
+      <option name="project" value="LOCAL" />
+      <updated>1683477122292</updated>
+    </task>
+    <task id="LOCAL-00037" summary="CNTRL-1039: sdk version bump">
+      <created>1685957591389</created>
+      <option name="number" value="00037" />
+      <option name="presentableId" value="LOCAL-00037" />
+      <option name="project" value="LOCAL" />
+      <updated>1685957591389</updated>
+    </task>
+    <task id="LOCAL-00038" summary="CNTRL-1039: WIP: added section registry class and changed article rect observer">
+      <created>1686058816825</created>
+      <option name="number" value="00038" />
+      <option name="presentableId" value="LOCAL-00038" />
+      <option name="project" value="LOCAL" />
+      <updated>1686058816826</updated>
+    </task>
+    <task id="LOCAL-00039" summary="CNTRL-1039: added section base animations and sticky">
+      <created>1686240635490</created>
+      <option name="number" value="00039" />
+      <option name="presentableId" value="LOCAL-00039" />
+      <option name="project" value="LOCAL" />
+      <updated>1686240635490</updated>
+    </task>
+    <task id="LOCAL-00040" summary="CNTRL-1039: code fix">
+      <created>1686240730070</created>
+      <option name="number" value="00040" />
+      <option name="presentableId" value="LOCAL-00040" />
+      <option name="project" value="LOCAL" />
+      <updated>1686240730070</updated>
+    </task>
+    <task id="LOCAL-00041" summary="CNTRL-1039: code fix">
+      <created>1686298003197</created>
+      <option name="number" value="00041" />
+      <option name="presentableId" value="LOCAL-00041" />
+      <option name="project" value="LOCAL" />
+      <updated>1686298003197</updated>
+    </task>
+    <task id="LOCAL-00042" summary="CNTRL-1039: sdk version bump">
+      <created>1686299892024</created>
+      <option name="number" value="00042" />
+      <option name="presentableId" value="LOCAL-00042" />
+      <option name="project" value="LOCAL" />
+      <updated>1686299892024</updated>
+    </task>
+    <task id="LOCAL-00043" summary="CNTRL-1039: sdk version bump">
+      <created>1686301611042</created>
+      <option name="number" value="00043" />
+      <option name="presentableId" value="LOCAL-00043" />
+      <option name="project" value="LOCAL" />
+      <updated>1686301611042</updated>
+    </task>
+    <task id="LOCAL-00044" summary="CNTRL-1039: removed section geometry service">
+      <created>1686302079828</created>
+      <option name="number" value="00044" />
+      <option name="presentableId" value="LOCAL-00044" />
+      <option name="project" value="LOCAL" />
+      <updated>1686302079828</updated>
+    </task>
+    <task id="LOCAL-00045" summary="CNTRL-1039: code fix">
+      <created>1686302624003</created>
+      <option name="number" value="00045" />
+      <option name="presentableId" value="LOCAL-00045" />
+      <option name="project" value="LOCAL" />
+      <updated>1686302624004</updated>
+    </task>
+    <option name="localTasksCounter" value="46" />
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+  <component name="Vcs.Log.Tabs.Properties">
+    <option name="TAB_STATES">
+      <map>
+        <entry key="MAIN">
+          <value>
+            <State />
+          </value>
+        </entry>
+      </map>
+    </option>
+  </component>
+  <component name="VcsManagerConfiguration">
+    <MESSAGE value="CNTRL-486 - version update" />
+    <MESSAGE value="CNTRL-486 - fixes" />
+    <MESSAGE value="CNTRL-486 - version bump" />
+    <MESSAGE value="CNTRL-617 Youtube anf vimeo videos Url update" />
+    <MESSAGE value="CNTRL-617 Version bump" />
+    <MESSAGE value="CNTRL-694 added valid url builder" />
+    <MESSAGE value="CNTRL-694 added code styling and version bump" />
+    <MESSAGE value="CNTRL-694 comments fix" />
+    <MESSAGE value="CNTRL-694 undefined url fix" />
+    <MESSAGE value="CNTRL-694 version bump" />
+    <MESSAGE value="CNTRL-427: changed Item w and h params" />
+    <MESSAGE value="CNTRL-427: changed white-space prop to normal for all text aligns" />
+    <MESSAGE value="CNTRL-427: deleted unused import" />
+    <MESSAGE value="CNTRL-427: version bump" />
+    <MESSAGE value="CNTRL-861: added scale for item" />
+    <MESSAGE value="CNTRL-861: added scale to cover div" />
+    <MESSAGE value="CNTRL-861: added rotate to items" />
+    <MESSAGE value="CNTRL-861: fixes" />
+    <MESSAGE value="CNTRL-861: fixe" />
+    <MESSAGE value="CNTRL-861: comment fix" />
+    <MESSAGE value="CNTRL-1039: WIP: added section registry class and changed article rect observer" />
+    <MESSAGE value="CNTRL-1039: added section base animations and sticky" />
+    <MESSAGE value="CNTRL-1039: sdk version bump" />
+    <MESSAGE value="CNTRL-1039: removed section geometry service" />
+    <MESSAGE value="CNTRL-1039: code fix" />
+    <option name="LAST_COMMIT_MESSAGE" value="CNTRL-1039: code fix" />
+  </component>
+</project>

package/lib/common/useKeyframeValue.js

@@ -11,7 +11,7 @@ const useCurrentLayout_1 = require("./useCurrentLayout");
 const KeyframesContext_1 = require("../provider/KeyframesContext");
 const Animator_1 = require("../utils/Animator/Animator");
 const emptyDeps = [];
-const useKeyframeValue = (item, itemParamsGetter, animatorGetter, deps = emptyDeps) => {
+const useKeyframeValue = (item, itemParamsGetter, animatorGetter, sectionId, deps = emptyDeps) => {
     const animatorGetterRef = (0, react_1.useRef)(animatorGetter);
     const itemParamsGetterRef = (0, react_1.useRef)(itemParamsGetter);
     animatorGetterRef.current = animatorGetter;
@@ -50,27 +50,27 @@ const useKeyframeValue = (item, itemParamsGetter, animatorGetter, deps = emptyDe
         setAdjustedValue(paramValue);
     }, [paramValue]);
     (0, react_1.useEffect)(() => {
-        if (!articleRectObserver)
+        if (!articleRectObserver || !animator)
             return;
-        const scroll = articleRectObserver.scroll;
+        const scroll = articleRectObserver.getSectionScroll(sectionId);
         handleKeyframeValue(scroll);
-    }, [articleRectObserver, handleKeyframeValue]);
+    }, [articleRectObserver, handleKeyframeValue, animator]);
     (0, react_1.useEffect)(() => {
-        if (!articleRectObserver)
+        if (!articleRectObserver || !animator)
             return;
         return articleRectObserver.on('resize', () => {
-            const scroll = articleRectObserver.scroll;
+            const scroll = articleRectObserver.getSectionScroll(sectionId);
             handleKeyframeValue(scroll);
         });
-    }, [handleKeyframeValue, articleRectObserver]);
+    }, [handleKeyframeValue, articleRectObserver, animator]);
     (0, react_1.useEffect)(() => {
-        if (!articleRectObserver)
+        if (!articleRectObserver || !animator)
             return;
         return articleRectObserver.on('scroll', () => {
-            const scroll = articleRectObserver.scroll;
+            const scroll = articleRectObserver.getSectionScroll(sectionId);
             handleKeyframeValue(scroll);
         });
-    }, [handleKeyframeValue, articleRectObserver]);
+    }, [handleKeyframeValue, articleRectObserver, animator]);
     return adjustedValue;
 };
 exports.useKeyframeValue = useKeyframeValue;

package/lib/components/Article.js

@@ -17,7 +17,7 @@ const Article = ({ article, sectionData }) => {
     const id = (0, react_1.useId)();
     return ((0, jsx_runtime_1.jsxs)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: [(0, jsx_runtime_1.jsx)("div", { className: "article", ref: articleRef, children: article.sections.map((section, i) => {
                     const data = section.name ? sectionData[section.name] : {};
-                    return ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, data: data, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item }, item.id))) }, section.id));
+                    return ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, data: data, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: section.id }, item.id))) }, section.id));
                 }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
        .article {
             position: relative;

package/lib/components/Item.js

@@ -19,7 +19,6 @@ const useCntrlContext_1 = require("../provider/useCntrlContext");
 const useItemPosition_1 = require("./useItemPosition");
 const useItemDimensions_1 = require("./useItemDimensions");
 const useItemSticky_1 = require("./items/useItemSticky");
-const castObject_1 = require("../utils/castObject");
 const useCurrentLayout_1 = require("../common/useCurrentLayout");
 const useItemScale_1 = require("./useItemScale");
 const ScaleAnchorMap_1 = require("../utils/ScaleAnchorMap");
@@ -33,16 +32,14 @@ const itemsMap = {
     [sdk_1.ArticleItemType.Custom]: CustomItem_1.CustomItem
 };
 const noop = () => null;
-const Item = ({ item }) => {
+const Item = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const { scale, scaleAnchor } = (0, useItemScale_1.useItemScale)(item);
-    const position = (0, useItemPosition_1.useItemPosition)(item);
+    const { scale, scaleAnchor } = (0, useItemScale_1.useItemScale)(item, sectionId);
+    const position = (0, useItemPosition_1.useItemPosition)(item, sectionId);
     const layout = (0, useCurrentLayout_1.useCurrentLayout)();
-    const [ref, setRef] = (0, react_1.useState)(null);
-    const [parentOffsetTop, setParentOffsetTop] = (0, react_1.useState)(0);
-    const { top, isFixed } = (0, useItemSticky_1.useItemSticky)(position.top, parentOffsetTop, item);
-    const { width, height } = (0, useItemDimensions_1.useItemDimensions)(item);
+    const { top, isFixed } = (0, useItemSticky_1.useItemSticky)(position.top, item, sectionId);
+    const { width, height } = (0, useItemDimensions_1.useItemDimensions)(item, sectionId);
     const layoutValues = [item.area];
     const isInitialRef = (0, react_1.useRef)(true);
     if (item.layoutParams) {
@@ -56,12 +53,6 @@ const Item = ({ item }) => {
     (0, react_1.useEffect)(() => {
         isInitialRef.current = false;
     }, []);
-    (0, react_1.useEffect)(() => {
-        if (!ref)
-            return;
-        const offsetParent = (0, castObject_1.castObject)(ref.offsetParent, HTMLElement);
-        setParentOffsetTop(offsetParent.offsetTop / window.innerWidth);
-    }, [ref]);
     const styles = {
         transform: `scale(${scale})`,
         transformOrigin: ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor],
@@ -70,7 +61,7 @@ const Item = ({ item }) => {
         height: `${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${height * 100}vw` : 'unset'}`,
         top
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, ref: setRef, style: isInitialRef.current ? {} : { ...styles, position: isFixed ? 'fixed' : 'absolute' }, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { item: item }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsxs)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : { ...styles, position: isFixed ? 'fixed' : 'absolute' }, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
                     const sizingAxis = parseSizing(layoutParams.sizing);
                     return (`

package/lib/components/Section.js

@@ -10,11 +10,14 @@ const style_1 = __importDefault(require("styled-jsx/style"));
 const sdk_1 = require("@cntrl-site/sdk");
 const useCntrlContext_1 = require("../provider/useCntrlContext");
 const useSectionColor_1 = require("./useSectionColor");
+const useSectionRegistry_1 = require("../utils/ArticleRectManager/useSectionRegistry");
 const Section = ({ section, data, children }) => {
     const id = (0, react_1.useId)();
+    const sectionRef = (0, react_1.useRef)(null);
     const { layouts, customSections } = (0, useCntrlContext_1.useCntrlContext)();
     const backgroundColor = (0, useSectionColor_1.useSectionColor)(section.color);
     const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
+    (0, useSectionRegistry_1.useSectionRegistry)(section.id, sectionRef.current);
     const getSectionVisibilityStyles = () => {
         return layouts
             .sort((a, b) => a.startsWith - b.startsWith)
@@ -33,7 +36,7 @@ const Section = ({ section, data, children }) => {
         return (0, jsx_runtime_1.jsx)(SectionComponent, { data: data, children: children });
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `section-${section.id}`, id: section.name, style: {
                     backgroundColor: backgroundColor
-                }, children: children }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                }, ref: sectionRef, children: children }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       ${(0, sdk_1.getLayoutStyles)(layouts, [section.height], ([height]) => (`
          .section-${section.id} {
             height: ${getSectionHeight(height)};

package/lib/components/items/ImageItem.js

@@ -11,10 +11,10 @@ const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useFileItem_1 = require("./useFileItem");
 const useItemAngle_1 = require("../useItemAngle");
-const ImageItem = ({ item }) => {
+const ImageItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
-    const { radius, strokeWidth, opacity, strokeColor } = (0, useFileItem_1.useFileItem)(item);
-    const angle = (0, useItemAngle_1.useItemAngle)(item);
+    const { radius, strokeWidth, opacity, strokeColor } = (0, useFileItem_1.useFileItem)(item, sectionId);
+    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, style: {
                         borderRadius: `${radius * 100}vw`,

package/lib/components/items/RectangleItem.js

@@ -11,10 +11,10 @@ const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useRectangleItem_1 = require("./useRectangleItem");
 const useItemAngle_1 = require("../useItemAngle");
-const RectangleItem = ({ item }) => {
+const RectangleItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
-    const { fillColor, radius, strokeWidth, strokeColor } = (0, useRectangleItem_1.useRectangleItem)(item);
-    const angle = (0, useItemAngle_1.useItemAngle)(item);
+    const { fillColor, radius, strokeWidth, strokeColor } = (0, useRectangleItem_1.useRectangleItem)(item, sectionId);
+    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const backgroundColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(fillColor).toCss(), [fillColor]);
     const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, style: {

package/lib/components/items/RichTextItem.js

@@ -8,9 +8,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const useRichTextItem_1 = require("./useRichTextItem");
 const useItemAngle_1 = require("../useItemAngle");
-const RichTextItem = ({ item }) => {
+const RichTextItem = ({ item, sectionId }) => {
     const [content, styles, preset] = (0, useRichTextItem_1.useRichTextItem)(item);
-    const angle = (0, useItemAngle_1.useItemAngle)(item);
+    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const className = preset ? `cntrl-preset-${preset.id}` : undefined;
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: className, style: {
                     transform: `rotate(${angle}deg)`