@cntrl-site/sdk-nextjs 1.9.136-alpha.0 → 1.9.136

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/sdk-nextjs.iml" filepath="$PROJECT_DIR$/.idea/sdk-nextjs.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/sdk-nextjs.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

package/lib/components/Article.js

@@ -14,8 +14,7 @@ const ArticleWrapper_1 = require("./ArticleWrapper");
 const InteractionsContext_1 = require("../provider/InteractionsContext");
 const WebGLContextManagerContext_1 = require("../provider/WebGLContextManagerContext");
 const effects_1 = require("@cntrl-site/effects");
-const Navigation_1 = require("./Navigation/Navigation");
-const Article = ({ article, sectionData, navigation, pages = [] }) => {
+const Article = ({ article, sectionData }) => {
     const articleRef = (0, react_1.useRef)(null);
     const articleRectObserver = (0, useArticleRectObserver_1.useArticleRectObserver)(articleRef.current);
     const id = (0, react_1.useId)();
@@ -29,10 +28,10 @@ const Article = ({ article, sectionData, navigation, pages = [] }) => {
     }, [articleRectObserver]);
     const webglContextManager = (0, react_1.useMemo)(() => new effects_1.WebGLContextManager(), []);
     const sectionsLength = article.sections.length;
-    return ((0, jsx_runtime_1.jsx)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: (0, jsx_runtime_1.jsxs)(InteractionsContext_1.InteractionsProvider, { article: article, children: [(0, jsx_runtime_1.jsxs)(ArticleWrapper_1.ArticleWrapper, { children: [navigation && ((0, jsx_runtime_1.jsx)(Navigation_1.Navigation, { navigation: navigation, pages: pages, hidden: article.navigationHidden })), (0, jsx_runtime_1.jsxs)("div", { className: "article", ref: articleRef, children: [(0, jsx_runtime_1.jsx)(WebGLContextManagerContext_1.WebglContextManagerContext.Provider, { value: webglContextManager, children: article.sections.map((section, i) => {
-                                        const data = section.name ? sectionData[section.name] : {};
-                                        return ((0, jsx_runtime_1.jsx)(Section_1.Section, { articleHeight: articleHeight, section: section, data: data, zIndex: sectionsLength - i }, section.id));
-                                    }) }), (0, jsx_runtime_1.jsx)("div", { id: "component-portal" }), (0, jsx_runtime_1.jsx)("div", { id: "grid-component-lightbox-portal" })] })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsx)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: (0, jsx_runtime_1.jsxs)(InteractionsContext_1.InteractionsProvider, { article: article, children: [(0, jsx_runtime_1.jsx)(ArticleWrapper_1.ArticleWrapper, { children: (0, jsx_runtime_1.jsxs)("div", { className: "article", ref: articleRef, children: [(0, jsx_runtime_1.jsx)(WebGLContextManagerContext_1.WebglContextManagerContext.Provider, { value: webglContextManager, children: article.sections.map((section, i) => {
+                                    const data = section.name ? sectionData[section.name] : {};
+                                    return ((0, jsx_runtime_1.jsx)(Section_1.Section, { articleHeight: articleHeight, section: section, data: data, zIndex: sectionsLength - i }, section.id));
+                                }) }), (0, jsx_runtime_1.jsx)("div", { id: "component-portal" }), (0, jsx_runtime_1.jsx)("div", { id: "grid-component-lightbox-portal" })] }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
        .article {
          position: relative;
          overflow: clip;

package/lib/components/ArticleWrapper.js

@@ -6,10 +6,7 @@ const useCurrentLayout_1 = require("../common/useCurrentLayout");
 const LayoutContext_1 = require("../provider/LayoutContext");
 const ArticleWrapper = ({ children }) => {
     const { layoutId, layoutDeviation } = (0, useCurrentLayout_1.useCurrentLayout)();
-    const layoutDeviationStyle = {
-        '--layout-deviation': layoutDeviation,
-        position: 'relative'
-    };
+    const layoutDeviationStyle = { '--layout-deviation': layoutDeviation };
     return ((0, jsx_runtime_1.jsx)(LayoutContext_1.LayoutContext.Provider, { value: layoutId, children: (0, jsx_runtime_1.jsx)("div", { className: "article-wrapper", style: Object.assign({}, layoutDeviationStyle), children: children }) }));
 };
 exports.ArticleWrapper = ArticleWrapper;

package/lib/components/Page.js

@@ -13,13 +13,13 @@ const Head_1 = require("./Head");
 const Keyframes_1 = require("../provider/Keyframes");
 const ItemGeometryContext_1 = require("../ItemGeometry/ItemGeometryContext");
 const ItemGeometryService_1 = require("../ItemGeometry/ItemGeometryService");
-const Page = ({ article, project, meta, keyframes, navigation, sectionData, siteUrl, fontsVault }) => {
+const Page = ({ article, project, meta, keyframes, sectionData, siteUrl, fontsVault }) => {
     var _a;
     const afterBodyOpen = (0, html_react_parser_1.default)(project.html.afterBodyOpen);
     const beforeBodyClose = (0, html_react_parser_1.default)(project.html.beforeBodyClose);
     const keyframesRepo = (0, react_1.useMemo)(() => new Keyframes_1.Keyframes(keyframes), [keyframes]);
     const itemGeometryService = (0, react_1.useMemo)(() => new ItemGeometryService_1.ItemGeometryService(), []);
     const currentSlug = (_a = project.pages.find(p => p.articleId === article.id)) === null || _a === void 0 ? void 0 : _a.slug;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project, meta: meta, slug: currentSlug, siteUrl: siteUrl, fontsVault: fontsVault }), afterBodyOpen, (0, jsx_runtime_1.jsx)(ItemGeometryContext_1.ItemGeometryContext.Provider, { value: itemGeometryService, children: (0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(Article_1.Article, { article: article, sectionData: sectionData, navigation: navigation, pages: project.pages }) }) }), beforeBodyClose] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project, meta: meta, slug: currentSlug, siteUrl: siteUrl, fontsVault: fontsVault }), afterBodyOpen, (0, jsx_runtime_1.jsx)(ItemGeometryContext_1.ItemGeometryContext.Provider, { value: itemGeometryService, children: (0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(Article_1.Article, { article: article, sectionData: sectionData }) }) }), beforeBodyClose] }));
 };
 exports.Page = Page;

package/lib/components/StructuredBlockItem/StructuredComponent/StructuredComponent.js

@@ -11,7 +11,6 @@ const react_1 = require("react");
 const useCntrlContext_1 = require("../../../provider/useCntrlContext");
 const useLayoutContext_1 = require("../../useLayoutContext");
 const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
-const mergeComponentSettings_1 = require("../../../utils/mergeComponentSettings");
 const StructuredComponent = ({ block }) => {
     var _a, _b;
     const sdk = (0, useCntrlContext_1.useCntrlContext)();
@@ -26,7 +25,7 @@ const StructuredComponent = ({ block }) => {
     const Element = component ? component.element : undefined;
     const layoutParameters = effectiveLayout ? (_b = block.layoutParams[effectiveLayout]) === null || _b === void 0 ? void 0 : _b.parameters : undefined;
     const commonParameters = block.commonParams.parameters;
-    const parameters = layoutParameters ? Object.assign(Object.assign({}, layoutParameters), { settings: (0, mergeComponentSettings_1.mergeComponentSettings)(layoutParameters.settings, commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.settings) }) : undefined;
+    const parameters = layoutParameters ? Object.assign(Object.assign({}, layoutParameters), { settings: Object.assign(Object.assign({}, layoutParameters.settings), commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.settings) }) : undefined;
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${block.id}`, ref: setRef, 
                 // preventing layout shift while supporting SSG for proper SEO
                 style: { opacity: layout == null ? 0 : undefined }, children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ metadata: {

package/lib/components/items/ComponentItem/ComponentItem.js

@@ -16,7 +16,6 @@ const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromIte
 const useLayoutContext_1 = require("../../useLayoutContext");
 const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const LinkWrapper_1 = require("../LinkWrapper");
-const mergeComponentSettings_1 = require("../../../utils/mergeComponentSettings");
 const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const sdk = (0, useCntrlContext_1.useCntrlContext)();
@@ -38,7 +37,7 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
     const Element = component ? component.element : undefined;
     const layoutParameters = effectiveLayout ? (_e = item.layoutParams[effectiveLayout]) === null || _e === void 0 ? void 0 : _e.parameters : undefined;
     const commonParameters = item.commonParams.parameters;
-    const parameters = layoutParameters ? Object.assign(Object.assign({}, layoutParameters), { settings: (0, mergeComponentSettings_1.mergeComponentSettings)(layoutParameters.settings, commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.settings) }) : undefined;
+    const parameters = layoutParameters ? Object.assign(Object.assign({}, layoutParameters), { settings: Object.assign(Object.assign({}, layoutParameters.settings), commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.settings) }) : undefined;
     const hasLink = Boolean((_f = item.link) === null || _f === void 0 ? void 0 : _f.url);
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_g = item.link) === null || _g === void 0 ? void 0 : _g.url, target: (_h = item.link) === null || _h === void 0 ? void 0 : _h.target, 
         // Let the component define its own hit area (e.g. rounded button),

package/lib/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cntrlSdkContext = exports.customSections = exports.customItems = exports.resolveCustomComponents = exports.evaluateComponentBundle = exports.useCntrlContext = exports.CntrlProvider = exports.YoutubeEmbedItem = exports.VimeoEmbedItem = exports.LayoutStyle = exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Navigation = exports.Article = exports.Head = exports.Page = exports.RichTextConverter = void 0;
+exports.cntrlSdkContext = exports.customSections = exports.customItems = exports.resolveCustomComponents = exports.evaluateComponentBundle = exports.useCntrlContext = exports.CntrlProvider = exports.YoutubeEmbedItem = exports.VimeoEmbedItem = exports.LayoutStyle = exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.Head = exports.Page = exports.RichTextConverter = void 0;
 const defaultContext_1 = require("./provider/defaultContext");
 __exportStar(require("@cntrl-site/sdk"), exports);
 var RichTextConverter_1 = require("./utils/RichTextConverter/RichTextConverter");
@@ -25,8 +25,6 @@ var Head_1 = require("./components/Head");
 Object.defineProperty(exports, "Head", { enumerable: true, get: function () { return Head_1.CNTRLHead; } });
 var Article_1 = require("./components/Article");
 Object.defineProperty(exports, "Article", { enumerable: true, get: function () { return Article_1.Article; } });
-var Navigation_1 = require("./components/Navigation/Navigation");
-Object.defineProperty(exports, "Navigation", { enumerable: true, get: function () { return Navigation_1.Navigation; } });
 var Section_1 = require("./components/Section/Section");
 Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return Section_1.Section; } });
 var Item_1 = require("./components/items/Item");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.136-alpha.0",
+  "version": "1.9.136",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -31,9 +31,9 @@
   "dependencies": {
     "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
-    "@cntrl-site/components": "^1.0.79-alpha.5",
+    "@cntrl-site/components": "^1.0.81",
     "@cntrl-site/effects": "^1.4.2",
-    "@cntrl-site/sdk": "^1.28.9-alpha.2",
+    "@cntrl-site/sdk": "^1.28.7",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/components/Article.tsx

@@ -1,23 +1,22 @@
 import { FC, useEffect, useId, useMemo, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
-import { Article as TArticle, ProjectNavigation } from '@cntrl-site/sdk';
+import { Article as TArticle } from '@cntrl-site/sdk';
 import { Section } from './Section/Section';
+import { Item } from './items/Item';
 import { useArticleRectObserver } from '../utils/ArticleRectManager/useArticleRectObserver';
 import { ArticleRectContext } from '../provider/ArticleRectContext';
 import { ArticleWrapper } from './ArticleWrapper';
 import { InteractionsProvider } from '../provider/InteractionsContext';
 import { WebglContextManagerContext } from '../provider/WebGLContextManagerContext';
 import { WebGLContextManager } from '@cntrl-site/effects';
-import { Navigation } from './Navigation/Navigation';
+import { StructuredContent } from './StructuredContent/StructuredContent';
 
 interface Props {
   article: TArticle;
   sectionData: Record<SectionName, any>;
-  navigation?: ProjectNavigation | null;
-  pages?: Array<{ id: string; slug: string }>;
 }
 
-export const Article: FC<Props> = ({ article, sectionData, navigation, pages = [] }) => {
+export const Article: FC<Props> = ({ article, sectionData }) => {
   const articleRef = useRef<HTMLDivElement | null>(null);
   const articleRectObserver = useArticleRectObserver(articleRef.current);
   const id = useId();
@@ -37,13 +36,6 @@ export const Article: FC<Props> = ({ article, sectionData, navigation, pages = [
     <ArticleRectContext.Provider value={articleRectObserver}>
       <InteractionsProvider article={article}>
         <ArticleWrapper>
-          {navigation && (
-            <Navigation
-              navigation={navigation}
-              pages={pages}
-              hidden={article.navigationHidden}
-            />
-          )}
           <div className="article" ref={articleRef}>
             <WebglContextManagerContext.Provider value={webglContextManager}>
               {article.sections.map((section, i) => {

package/src/components/ArticleWrapper.tsx

@@ -4,10 +4,7 @@ import { LayoutContext } from '../provider/LayoutContext';
 
 export const ArticleWrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
   const { layoutId, layoutDeviation } = useCurrentLayout();
-  const layoutDeviationStyle = {
-    '--layout-deviation': layoutDeviation,
-    position: 'relative'
-  } as CSSProperties;
+  const layoutDeviationStyle = { '--layout-deviation': layoutDeviation } as CSSProperties;
 
   return (
     <LayoutContext.Provider value={layoutId}>

package/src/components/Page.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useMemo } from 'react';
 import HTMLReactParser from 'html-react-parser';
-import { Article as TArticle, Project, Meta, KeyframeAny, FontVault, ProjectNavigation } from '@cntrl-site/sdk';
+import { Article as TArticle, Project, Meta, KeyframeAny, FontVault } from '@cntrl-site/sdk';
 import { Article } from './Article';
 import { KeyframesContext } from '../provider/KeyframesContext';
 import { CNTRLHead } from './Head';
@@ -19,14 +19,13 @@ export interface PageProps {
   meta: Meta;
   fontsVault: FontVault[];
   keyframes: KeyframeAny[];
-  navigation?: ProjectNavigation | null;
   sectionData: Record<SectionName, any>;
   publicApiBase?: string;
   customComponentBundles?: CustomComponentBundlesData;
   siteUrl?: string;
 }
 
-export const Page: FC<PageProps> = ({ article, project, meta, keyframes, navigation, sectionData, siteUrl, fontsVault }) => {
+export const Page: FC<PageProps> = ({ article, project, meta, keyframes, sectionData, siteUrl, fontsVault }) => {
   const afterBodyOpen = HTMLReactParser(project.html.afterBodyOpen);
   const beforeBodyClose = HTMLReactParser(project.html.beforeBodyClose);
   const keyframesRepo = useMemo(() => new Keyframes(keyframes), [keyframes]);
@@ -38,7 +37,7 @@ export const Page: FC<PageProps> = ({ article, project, meta, keyframes, navigat
       {afterBodyOpen}
       <ItemGeometryContext.Provider value={itemGeometryService}>
         <KeyframesContext.Provider value={keyframesRepo}>
-          <Article article={article} sectionData={sectionData} navigation={navigation} pages={project.pages} />
+          <Article article={article} sectionData={sectionData} />
         </KeyframesContext.Provider>
       </ItemGeometryContext.Provider>
       {beforeBodyClose}

package/src/components/StructuredBlockItem/StructuredComponent/StructuredComponent.tsx

@@ -4,7 +4,6 @@ import { FC, useState } from 'react';
 import { useCntrlContext } from '../../../provider/useCntrlContext';
 import { useLayoutContext } from '../../useLayoutContext';
 import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
-import { mergeComponentSettings } from '../../../utils/mergeComponentSettings';
 
 interface Props {
   block: StructuredBlock<StructuredBlockType.Component>;
@@ -25,7 +24,7 @@ export const StructuredComponent: FC<Props> = ({ block }) => {
   const commonParameters = block.commonParams.parameters;
   const parameters = layoutParameters ? {
     ...layoutParameters,
-    settings: mergeComponentSettings(layoutParameters.settings, commonParameters?.settings)
+    settings: { ...layoutParameters.settings, ...commonParameters?.settings }
   } : undefined;
 
   return (

package/src/components/items/ComponentItem/ComponentItem.tsx

@@ -10,7 +10,6 @@ import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemS
 import { useLayoutContext } from '../../useLayoutContext';
 import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 import { LinkWrapper } from '../LinkWrapper';
-import { mergeComponentSettings } from '../../../utils/mergeComponentSettings';
 
 export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId, onResize, interactionCtrl }) => {
   const sdk = useCntrlContext();
@@ -34,7 +33,7 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
   const commonParameters = item.commonParams.parameters;
   const parameters = layoutParameters ? {
     ...layoutParameters,
-    settings: mergeComponentSettings(layoutParameters.settings, commonParameters?.settings)
+    settings: { ...layoutParameters.settings, ...commonParameters?.settings }
   } : undefined;
 
   const hasLink = Boolean(item.link?.url);

package/src/index.ts

@@ -6,7 +6,6 @@ export { Page } from './components/Page';
 export type { PageProps, CustomComponentBundlesData } from './components/Page';
 export { CNTRLHead as Head } from './components/Head';
 export { Article } from './components/Article';
-export { Navigation } from './components/Navigation/Navigation';
 export { Section } from './components/Section/Section';
 export { Item } from './components/items/Item';
 export { ImageItem } from './components/items/FileItem/ImageItem';

package/lib/components/Navigation/Navigation.js

@@ -1,75 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Navigation = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const style_1 = __importDefault(require("styled-jsx/style"));
-const sdk_1 = require("@cntrl-site/sdk");
-const useCntrlContext_1 = require("../../provider/useCntrlContext");
-const useLayoutContext_1 = require("../useLayoutContext");
-const NavigationComponent_1 = require("./NavigationComponent");
-const useNavigationSwitch_1 = require("./useNavigationSwitch");
-const DEFAULT_POSITION = 'default';
-const Navigation = ({ navigation, pages, hidden }) => {
-    var _a, _b, _c, _d;
-    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const layout = (0, useLayoutContext_1.useLayoutContext)();
-    const [wrapperRef, setWrapperRef] = (0, react_1.useState)(null);
-    const reactId = (0, react_1.useId)();
-    const id = `${reactId}-navigation-${navigation.id}`;
-    const position = (_c = (layout && ((_b = (_a = navigation.settings) === null || _a === void 0 ? void 0 : _a[layout]) === null || _b === void 0 ? void 0 : _b.position))) !== null && _c !== void 0 ? _c : DEFAULT_POSITION;
-    const isSwitch = position === 'switch';
-    const isSwitchOnScroll = (0, useNavigationSwitch_1.useNavigationSwitch)(isSwitch, wrapperRef);
-    const layoutValues = [(_d = navigation.settings) !== null && _d !== void 0 ? _d : {}, hidden !== null && hidden !== void 0 ? hidden : {}];
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { id: navigation.component.id, ref: setWrapperRef, className: `navigation-${navigation.id}${isSwitch && isSwitchOnScroll ? ` navigation-${navigation.id}-switch-inactive` : ''}`, children: (0, jsx_runtime_1.jsx)(NavigationComponent_1.NavigationComponent, { component: navigation.component, pages: pages, currentState: isSwitch ? 'default' : undefined }) }), isSwitch && ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": !isSwitchOnScroll, className: `navigation-switch-clone-${navigation.id}${isSwitchOnScroll ? ` navigation-switch-clone-${navigation.id}-visible` : ''}`, children: (0, jsx_runtime_1.jsx)(NavigationComponent_1.NavigationComponent, { component: navigation.component, pages: pages, currentState: "compact", isSwitchClone: true }) })), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        .navigation-${navigation.id} {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          z-index: 10000;
-        }
-        .navigation-${navigation.id}-switch-inactive {
-          visibility: hidden;
-          pointer-events: none;
-        }
-        .navigation-switch-clone-${navigation.id} {
-          position: fixed;
-          top: var(--cntrl-article-top, 0px);
-          left: var(--cntrl-article-left, 0px);
-          width: var(--cntrl-article-width, 100%);
-          z-index: 10001;
-          pointer-events: none;
-          visibility: hidden;
-          transition: visibility 0s linear 320ms;
-          --cntrl-nav-slide: -100%;
-        }
-        .navigation-switch-clone-${navigation.id}-visible {
-          pointer-events: auto;
-          visibility: visible;
-          transition: visibility 0s;
-          --cntrl-nav-slide: 0%;
-        }
-        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([settings, isHidden]) => {
-                    var _a;
-                    const layoutPosition = (_a = settings === null || settings === void 0 ? void 0 : settings.position) !== null && _a !== void 0 ? _a : DEFAULT_POSITION;
-                    const isSticky = layoutPosition === 'stickyTop' || layoutPosition === 'switch';
-                    return (`
-            .navigation-${navigation.id} {
-              position: ${layoutPosition === 'stickyTop' ? 'fixed' : 'absolute'};
-              top: ${isSticky ? 'var(--cntrl-article-top, 0px)' : '0'};
-              left: ${isSticky ? 'var(--cntrl-article-left, 0px)' : '0'};
-              width: ${isSticky ? 'var(--cntrl-article-width, 100%)' : '100%'};
-              display: ${isHidden ? 'none' : 'block'};
-            }
-            .navigation-switch-clone-${navigation.id} {
-              display: ${isHidden || layoutPosition !== 'switch' ? 'none' : 'block'};
-            }
-          `);
-                })}
-      ` })] }));
-};
-exports.Navigation = Navigation;

package/lib/components/Navigation/NavigationComponent.js

@@ -1,48 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavigationComponent = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const style_1 = __importDefault(require("styled-jsx/style"));
-const sdk_1 = require("@cntrl-site/sdk");
-const react_1 = require("react");
-const useCntrlContext_1 = require("../../provider/useCntrlContext");
-const useLayoutContext_1 = require("../useLayoutContext");
-const mergeComponentSettings_1 = require("../../utils/mergeComponentSettings");
-const NavigationComponent = ({ component: block, pages, currentState, isSwitchClone }) => {
-    var _a, _b;
-    const sdk = (0, useCntrlContext_1.useCntrlContext)();
-    const { layouts } = sdk;
-    const layout = (0, useLayoutContext_1.useLayoutContext)();
-    const fallbackLayout = (_a = layouts[0]) === null || _a === void 0 ? void 0 : _a.id;
-    const effectiveLayout = layout !== null && layout !== void 0 ? layout : fallbackLayout;
-    const layoutValues = [block.layoutParams];
-    const component = sdk.getComponent(block.commonParams.componentId);
-    const Element = component ? component.element : undefined;
-    const layoutParameters = effectiveLayout ? (_b = block.layoutParams[effectiveLayout]) === null || _b === void 0 ? void 0 : _b.parameters : undefined;
-    const commonParameters = block.commonParams.parameters;
-    const parameters = layoutParameters ? Object.assign(Object.assign({}, layoutParameters), { settings: (0, mergeComponentSettings_1.mergeComponentSettings)(layoutParameters.settings, commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.settings) }) : undefined;
-    const reactId = (0, react_1.useId)();
-    const id = `${reactId}-custom-component-${block.id}`;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${block.id}`, style: { opacity: layout == null ? 0 : undefined }, children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ metadata: {
-                        itemId: block.id,
-                        submitUrl: sdk.getSubmitUrl(commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.pluginConfigId)
-                    }, portalId: "component-portal", content: block.commonParams.content }, parameters, { layoutId: effectiveLayout, pages: pages, currentState: currentState, isSwitchClone: isSwitchClone }))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-      .custom-component-${block.id} {
-        width: 100%;
-        height: 100%;
-        pointer-events: auto;
-      }
-      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([layoutParams]) => {
-                    return (`
-          .custom-component-${block.id} {
-            opacity: ${layoutParams.opacity};
-            ${layoutParams.blur !== 0 ? `filter: blur(${layoutParams.blur}vw);` : ''}
-            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
-          }
-        `);
-                })}` })] }));
-};
-exports.NavigationComponent = NavigationComponent;

package/lib/components/Navigation/useNavigationSwitch.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useNavigationSwitch = void 0;
-const react_1 = require("react");
-const COMPACT_SWITCH_SCROLL_OFFSET_PX = 20;
-function getArticleTop(element) {
-    const raw = getComputedStyle(element).getPropertyValue('--cntrl-article-top');
-    const parsed = parseFloat(raw);
-    return Number.isFinite(parsed) ? parsed : 0;
-}
-function useNavigationSwitch(isEnabled, element) {
-    const [isPinned, setIsPinned] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        if (!isEnabled || !element) {
-            setIsPinned(false);
-            return;
-        }
-        const sync = () => {
-            const next = element.getBoundingClientRect().bottom
-                <= getArticleTop(element) - COMPACT_SWITCH_SCROLL_OFFSET_PX + 0.5;
-            setIsPinned(prev => (prev === next ? prev : next));
-        };
-        const observer = new ResizeObserver(sync);
-        observer.observe(element);
-        sync();
-        window.addEventListener('scroll', sync, { passive: true });
-        return () => {
-            observer.disconnect();
-            window.removeEventListener('scroll', sync);
-        };
-    }, [isEnabled, element]);
-    return isPinned;
-}
-exports.useNavigationSwitch = useNavigationSwitch;

package/lib/utils/mergeComponentSettings.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.mergeComponentSettings = void 0;
-function mergeComponentSettings(layoutSettings, commonSettings) {
-    return Object.assign(Object.assign({}, (layoutSettings !== null && layoutSettings !== void 0 ? layoutSettings : {})), (commonSettings !== null && commonSettings !== void 0 ? commonSettings : {}));
-}
-exports.mergeComponentSettings = mergeComponentSettings;

package/src/components/Navigation/Navigation.tsx

@@ -1,107 +0,0 @@
-import { FC, useId, useState } from 'react';
-import JSXStyle from 'styled-jsx/style';
-import {
-  getLayoutStyles,
-  Project,
-  ProjectNavigation,
-  ProjectNavigationPosition
-} from '@cntrl-site/sdk';
-import { useCntrlContext } from '../../provider/useCntrlContext';
-import { useLayoutContext } from '../useLayoutContext';
-import { NavigationComponent } from './NavigationComponent';
-import { useNavigationSwitch } from './useNavigationSwitch';
-
-interface Props {
-  navigation: ProjectNavigation;
-  pages: Array<{ id: string; slug: string }>;
-  hidden?: Record<string, boolean>;
-}
-
-const DEFAULT_POSITION: ProjectNavigationPosition = 'default';
-
-export const Navigation: FC<Props> = ({ navigation, pages, hidden }) => {
-  const { layouts } = useCntrlContext();
-  const layout = useLayoutContext();
-  const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
-  const reactId = useId();
-  const id = `${reactId}-navigation-${navigation.id}`;
-  const position = (layout && navigation.settings?.[layout]?.position) ?? DEFAULT_POSITION;
-  const isSwitch = position === 'switch';
-  const isSwitchOnScroll = useNavigationSwitch(isSwitch, wrapperRef);
-  const layoutValues: Record<string, any>[] = [navigation.settings ?? {}, hidden ?? {}];
-
-  return (
-    <>
-      <div
-        id={navigation.component.id}
-        ref={setWrapperRef}
-        className={`navigation-${navigation.id}${isSwitch && isSwitchOnScroll ? ` navigation-${navigation.id}-switch-inactive` : ''}`}
-      >
-        <NavigationComponent
-          component={navigation.component}
-          pages={pages}
-          currentState={isSwitch ? 'default' : undefined}
-        />
-      </div>
-      {isSwitch && (
-        <div
-          aria-hidden={!isSwitchOnScroll}
-          className={`navigation-switch-clone-${navigation.id}${isSwitchOnScroll ? ` navigation-switch-clone-${navigation.id}-visible` : ''}`}
-        >
-          <NavigationComponent
-            component={navigation.component}
-            pages={pages}
-            currentState="compact"
-            isSwitchClone
-          />
-        </div>
-      )}
-      <JSXStyle id={id}>{`
-        .navigation-${navigation.id} {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          z-index: 10000;
-        }
-        .navigation-${navigation.id}-switch-inactive {
-          visibility: hidden;
-          pointer-events: none;
-        }
-        .navigation-switch-clone-${navigation.id} {
-          position: fixed;
-          top: var(--cntrl-article-top, 0px);
-          left: var(--cntrl-article-left, 0px);
-          width: var(--cntrl-article-width, 100%);
-          z-index: 10001;
-          pointer-events: none;
-          visibility: hidden;
-          transition: visibility 0s linear 320ms;
-          --cntrl-nav-slide: -100%;
-        }
-        .navigation-switch-clone-${navigation.id}-visible {
-          pointer-events: auto;
-          visibility: visible;
-          transition: visibility 0s;
-          --cntrl-nav-slide: 0%;
-        }
-        ${getLayoutStyles(layouts, layoutValues, ([settings, isHidden]) => {
-          const layoutPosition = settings?.position ?? DEFAULT_POSITION;
-          const isSticky = layoutPosition === 'stickyTop' || layoutPosition === 'switch';
-          return (`
-            .navigation-${navigation.id} {
-              position: ${layoutPosition === 'stickyTop' ? 'fixed' : 'absolute'};
-              top: ${isSticky ? 'var(--cntrl-article-top, 0px)' : '0'};
-              left: ${isSticky ? 'var(--cntrl-article-left, 0px)' : '0'};
-              width: ${isSticky ? 'var(--cntrl-article-width, 100%)' : '100%'};
-              display: ${isHidden ? 'none' : 'block'};
-            }
-            .navigation-switch-clone-${navigation.id} {
-              display: ${isHidden || layoutPosition !== 'switch' ? 'none' : 'block'};
-            }
-          `);
-        })}
-      `}</JSXStyle>
-    </>
-  );
-};

package/src/components/Navigation/NavigationComponent.tsx

@@ -1,78 +0,0 @@
-import JSXStyle from 'styled-jsx/style';
-import { NavigationComponent as TNavigationComponent, getLayoutStyles, Project } from '@cntrl-site/sdk';
-import { FC, useId } from 'react';
-import { useCntrlContext } from '../../provider/useCntrlContext';
-import { useLayoutContext } from '../useLayoutContext';
-import { mergeComponentSettings } from '../../utils/mergeComponentSettings';
-
-interface Props {
-  component: TNavigationComponent;
-  pages: Array<{ id: string; slug: string }>;
-  currentState?: string;
-  isSwitchClone?: boolean;
-}
-
-export const NavigationComponent: FC<Props> = ({
-  component: block,
-  pages,
-  currentState,
-  isSwitchClone
-}) => {
-  const sdk = useCntrlContext();
-  const { layouts } = sdk;
-  const layout = useLayoutContext();
-  const fallbackLayout = layouts[0]?.id;
-  const effectiveLayout = layout ?? fallbackLayout;
-  const layoutValues: Record<string, any>[] = [block.layoutParams];
-  const component = sdk.getComponent(block.commonParams.componentId);
-  const Element = component ? component.element : undefined;
-  const layoutParameters = effectiveLayout ? block.layoutParams[effectiveLayout]?.parameters : undefined;
-  const commonParameters = block.commonParams.parameters;
-  const parameters = layoutParameters ? {
-    ...layoutParameters,
-    settings: mergeComponentSettings(layoutParameters.settings, commonParameters?.settings)
-  } : undefined;
-  const reactId = useId();
-  const id = `${reactId}-custom-component-${block.id}`;
-
-  return (
-    <>
-      <div
-        className={`custom-component-${block.id}`}
-        style={{ opacity: layout == null ? 0 : undefined }}
-      >
-        {parameters && Element && (
-          <Element
-            metadata={{
-              itemId: block.id,
-              submitUrl: sdk.getSubmitUrl(commonParameters?.pluginConfigId)
-            }}
-            portalId="component-portal"
-            content={block.commonParams.content}
-            {...parameters}
-            layoutId={effectiveLayout}
-            pages={pages}
-            currentState={currentState}
-            isSwitchClone={isSwitchClone}
-          />
-        )}
-      </div>
-      <JSXStyle id={id}>{`
-      .custom-component-${block.id} {
-        width: 100%;
-        height: 100%;
-        pointer-events: auto;
-      }
-      ${getLayoutStyles(layouts, layoutValues, ([layoutParams]) => {
-      return (`
-          .custom-component-${block.id} {
-            opacity: ${layoutParams.opacity};
-            ${layoutParams.blur !== 0 ? `filter: blur(${layoutParams.blur}vw);` : ''}
-            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
-          }
-        `);
-    })}`}
-      </JSXStyle>
-    </>
-  );
-};

package/src/components/Navigation/useNavigationSwitch.ts

@@ -1,38 +0,0 @@
-import { useEffect, useState } from 'react';
-
-const COMPACT_SWITCH_SCROLL_OFFSET_PX = 20;
-
-function getArticleTop(element: HTMLElement): number {
-  const raw = getComputedStyle(element).getPropertyValue('--cntrl-article-top');
-  const parsed = parseFloat(raw);
-  return Number.isFinite(parsed) ? parsed : 0;
-}
-
-export function useNavigationSwitch(isEnabled: boolean, element: HTMLElement | null): boolean {
-  const [isPinned, setIsPinned] = useState(false);
-
-  useEffect(() => {
-    if (!isEnabled || !element) {
-      setIsPinned(false);
-      return;
-    }
-
-    const sync = () => {
-      const next = element.getBoundingClientRect().bottom
-        <= getArticleTop(element) - COMPACT_SWITCH_SCROLL_OFFSET_PX + 0.5;
-      setIsPinned(prev => (prev === next ? prev : next));
-    };
-
-    const observer = new ResizeObserver(sync);
-    observer.observe(element);
-    sync();
-    window.addEventListener('scroll', sync, { passive: true });
-
-    return () => {
-      observer.disconnect();
-      window.removeEventListener('scroll', sync);
-    };
-  }, [isEnabled, element]);
-
-  return isPinned;
-}

package/src/utils/mergeComponentSettings.ts

@@ -1,9 +0,0 @@
-export function mergeComponentSettings<T extends Record<string, any>>(
-  layoutSettings?: T,
-  commonSettings?: T,
-): T {
-  return {
-    ...(layoutSettings ?? {} as T),
-    ...(commonSettings ?? {} as T)
-  };
-}