@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260722105036 → 0.8.1-dev.20260723122345

package/dist/server.mjs

@@ -305,7 +305,7 @@ var ImageNode_default = ImageNode;
 // src/components/pageRenderingEngine/nodes/LinkNode.tsx
 import dynamic3 from "next/dynamic";
 import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-var LinkNodeButton = dynamic3(() => import("./LinkNodeButton-U7T2NP22.mjs"), {
+var LinkNodeButton = dynamic3(() => import("./LinkNodeButton-KZRNRJRI.mjs"), {
   ssr: false
 });
 function getNestedValue2(obj, path) {
@@ -513,7 +513,7 @@ var NumberView_default = NumberView;
 
 // src/components/controls/view/DateView.tsx
 import dynamic4 from "next/dynamic";
-var DateView = dynamic4(() => import("./DateViewClient-ELEHLGWS.mjs"), {
+var DateView = dynamic4(() => import("./DateViewClient-4CTEMOMJ.mjs"), {
   ssr: false
 });
 var DateView_default = DateView;
@@ -725,7 +725,7 @@ var AiGeneratedSummary_default = AiGeneratedSummary;
 
 // src/components/controls/view/DateTimeVew.tsx
 import dynamic5 from "next/dynamic";
-var DateTimeView = dynamic5(() => import("./DateTimeViewClient-22GW4AD7.mjs"), {
+var DateTimeView = dynamic5(() => import("./DateTimeViewClient-K5FE5VSN.mjs"), {
   ssr: false
 });
 var DateTimeVew_default = DateTimeView;
@@ -1193,6 +1193,17 @@ var EmbedNode = (props) => {
 var EmbedNode_default = EmbedNode;
 
 // src/components/utilities/AnimationUtility.tsx
+var normalizeSelector = (guid) => {
+  const trimmedGuid = guid?.trim();
+  if (!trimmedGuid) {
+    return ".animation-fallback";
+  }
+  const baseValue = trimmedGuid.replace(/^#/, "").replace(/^\./, "");
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+    return `#${CSS.escape(baseValue)}`;
+  }
+  return `#${baseValue}`;
+};
 var AnimationUtility = class {
   static generateAnimationCSS(config, guid) {
     const {
@@ -1207,10 +1218,12 @@ var AnimationUtility = class {
       speedPerChar = 100,
       cursor = true,
       mode = "enter",
-      direction = "left"
-      // Default direction
+      direction = "left",
+      backgroundColor,
+      borderColor
     } = config;
     let base = "", visible = "", keyframes = "";
+    const selector = normalizeSelector(guid);
     switch (config.animation) {
       case "Fade":
         base = `opacity:0; transition:opacity ${duration}ms ${easing} ${delay}ms;`;
@@ -1244,12 +1257,20 @@ var AnimationUtility = class {
       `;
         if (mode === "enter") {
           base = `opacity:0;`;
-          visible = `opacity:1; animation:bounce ${duration}ms ${easing} ${delay}ms ${repeat};`;
+          visible = `opacity:1; animation: bounce ${duration}ms ${easing} ${delay}ms ${repeat};`;
         } else {
           base = ``;
-          visible = `animation:bounce ${duration / 1e3}s ${easing} ${delay / 1e3}s ${repeat};`;
+          visible = `animation: bounce ${duration / 1e3}s ${easing} ${delay / 1e3}s ${repeat};`;
         }
         break;
+      case "Background":
+        base = `transition: background-color ${duration}ms ${easing} ${delay}ms;`;
+        visible = `background-color: ${backgroundColor};`;
+        break;
+      case "Border":
+        base = `transition: border-color ${duration}ms ${easing} ${delay}ms;`;
+        visible = `border-color: ${borderColor};`;
+        break;
       case "Typewriter":
         keyframes = ` 
         @keyframes typewriter { from { width: 0 } to { width: 100% } } 
@@ -1271,14 +1292,14 @@ var AnimationUtility = class {
     if (mode === "hover") {
       return `
       ${keyframes} 
-      ${guid} { ${base} } 
-      ${guid}:hover { ${visible} } 
+      ${selector} { ${base} } 
+      ${selector}:hover { ${visible} } 
     `;
     } else {
       return `
       ${keyframes} 
-      ${guid} { ${base} } 
-      ${guid}.visible { ${visible} } 
+      ${selector} { ${base} } 
+      ${selector}.visible { ${visible} } 
     `;
     }
   }
@@ -2405,6 +2426,7 @@ var DivContainer = async (props) => {
   }
   const updatedStyle = { ...updatedStyles };
   const guid = "css" + crypto.randomUUID().toLocaleLowerCase();
+  const animationSelector = `#${guid}`;
   const { enterAnimation, exitAnimation, hoverAnimation } = props.node;
   let animationCSS = "";
   if (enterAnimation?.name) {
@@ -2414,7 +2436,7 @@ var DivContainer = async (props) => {
         mode: "enter",
         ...enterAnimation.properties
       },
-      `#${guid}`
+      animationSelector
     );
   }
   if (hoverAnimation?.name) {
@@ -2424,7 +2446,7 @@ var DivContainer = async (props) => {
         mode: "hover",
         ...hoverAnimation.properties
       },
-      `#${guid}`
+      animationSelector
     );
   }
   const isHidden = !shouldRenderContainer(
@@ -2650,7 +2672,7 @@ var DivContainer = async (props) => {
 var DivContainer_default = DivContainer;
 
 // src/components/pageRenderingEngine/PageBodyRenderer.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
 var NodeTypes = {
   ["paragraph"]: ParagraphNode_default,
   ["heading"]: HeadingNode_default,
@@ -2687,46 +2709,49 @@ var PageBodyRenderer = (props) => {
     }
     return true;
   };
-  return /* @__PURE__ */ jsx35(React23.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
-    {
-    }
-    const SelectedNode = NodeTypes[node.type];
-    if (!shouldRenderNode(node)) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx35(React23.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx35(React23.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ jsx35(React23.Fragment, { children: /* @__PURE__ */ jsx35(
-      SelectedNode,
+  return /* @__PURE__ */ jsxs14(React23.Fragment, { children: [
+    /* @__PURE__ */ jsx35("div", { children: "Thuis isadiasdia testaststtstst" }),
+    rootNode && rootNode?.children?.map((node, index) => {
       {
-        node,
-        firstNode: true,
-        routeParameters: props.routeParameters,
-        query: props.query,
-        session: props.session,
-        host: props.host,
-        path: props.path,
-        apiBaseUrl: props.apiBaseUrl,
-        serviceClient: props.serviceClient,
-        assetBaseUrl: props.assetBaseUrl,
-        device: props.device,
-        widgetRenderer: props.widgetRenderer
       }
-    ) }) : /* @__PURE__ */ jsx35(React23.Fragment, { children: /* @__PURE__ */ jsx35(
-      SelectedNode,
-      {
-        node,
-        routeParameters: props.routeParameters,
-        query: props.query,
-        session: props.session,
-        host: props.host,
-        path: props.path,
-        apiBaseUrl: props.apiBaseUrl,
-        serviceClient: props.serviceClient,
-        assetBaseUrl: props.assetBaseUrl,
-        device: props.device,
-        widgetRenderer: props.widgetRenderer
+      const SelectedNode = NodeTypes[node.type];
+      if (!shouldRenderNode(node)) {
+        return null;
       }
-    ) }) }) }, index);
-  }) });
+      return /* @__PURE__ */ jsx35(React23.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx35(React23.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ jsx35(React23.Fragment, { children: /* @__PURE__ */ jsx35(
+        SelectedNode,
+        {
+          node,
+          firstNode: true,
+          routeParameters: props.routeParameters,
+          query: props.query,
+          session: props.session,
+          host: props.host,
+          path: props.path,
+          apiBaseUrl: props.apiBaseUrl,
+          serviceClient: props.serviceClient,
+          assetBaseUrl: props.assetBaseUrl,
+          device: props.device,
+          widgetRenderer: props.widgetRenderer
+        }
+      ) }) : /* @__PURE__ */ jsx35(React23.Fragment, { children: /* @__PURE__ */ jsx35(
+        SelectedNode,
+        {
+          node,
+          routeParameters: props.routeParameters,
+          query: props.query,
+          session: props.session,
+          host: props.host,
+          path: props.path,
+          apiBaseUrl: props.apiBaseUrl,
+          serviceClient: props.serviceClient,
+          assetBaseUrl: props.assetBaseUrl,
+          device: props.device,
+          widgetRenderer: props.widgetRenderer
+        }
+      ) }) }) }, index);
+    })
+  ] });
 };
 var PageBodyRenderer_default = PageBodyRenderer;
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clyrex-digital/clyrex-controls-dev",
-  "version": "0.8.1-dev.20260722105036",
+  "version": "0.8.1-dev.20260723122345",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -23,10 +23,12 @@
   "scripts": {
     "build": "tsup",
     "build:clean": "node -e \"require('fs').rmSync('dist',{ recursive:true, force:true })\" && tsup",
-    "dev": "tsup --watch"
+    "dev": "tsup --watch",
+    "prepack": "npm run build:clean"
   },
   "peerDependencies": {
     "katex": "^0.16.0",
+    "next": "^14 || ^15 || ^16",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
@@ -36,9 +38,10 @@
     }
   },
   "devDependencies": {
-    "@types/node": "^26.1.1",
+    "@types/node": "^20.19.43",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
+    "next": "^15.5.21",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
   },
@@ -63,10 +66,8 @@
     "load-tsconfig": "^0.2.5",
     "magic-string": "^0.30.21",
     "mlly": "^1.8.0",
-    "moment-timezone": "^0.6.3",
     "ms": "^2.1.3",
     "mz": "^2.7.0",
-    "next": "^15.5.21",
     "object-assign": "^4.1.1",
     "pathe": "^2.0.3",
     "picocolors": "^1.1.1",

package/dist/DateTimeViewClient-22GW4AD7.mjs

@@ -1,14 +0,0 @@
-"use client";
-import {
-  DateViewClient_default
-} from "./chunk-XG6SXZWP.mjs";
-
-// src/components/controls/view/DateTimeViewClient.tsx
-import { jsx } from "react/jsx-runtime";
-var DateTimeViewClient = (props) => {
-  return /* @__PURE__ */ jsx(DateViewClient_default, { ...props, controlType: "datetime" });
-};
-var DateTimeViewClient_default = DateTimeViewClient;
-export {
-  DateTimeViewClient_default as default
-};

package/dist/DateTimeViewClient-R3M6ISVK.mjs

@@ -1,16 +0,0 @@
-"use client";
-
-"use client";
-import {
-  DateViewClient_default
-} from "./chunk-SPRVN5IM.mjs";
-
-// src/components/controls/view/DateTimeViewClient.tsx
-import { jsx } from "react/jsx-runtime";
-var DateTimeViewClient = (props) => {
-  return /* @__PURE__ */ jsx(DateViewClient_default, { ...props, controlType: "datetime" });
-};
-var DateTimeViewClient_default = DateTimeViewClient;
-export {
-  DateTimeViewClient_default as default
-};

package/dist/DateViewClient-ELEHLGWS.mjs

@@ -1,7 +0,0 @@
-"use client";
-import {
-  DateViewClient_default
-} from "./chunk-XG6SXZWP.mjs";
-export {
-  DateViewClient_default as default
-};

package/dist/DateViewClient-VLTRN47D.mjs

@@ -1,9 +0,0 @@
-"use client";
-
-"use client";
-import {
-  DateViewClient_default
-} from "./chunk-SPRVN5IM.mjs";
-export {
-  DateViewClient_default as default
-};

package/dist/EnterAnimationClient-4OKXLKSA.mjs

@@ -1,45 +0,0 @@
-"use client";
-
-// src/components/pageRenderingEngine/nodes/EnterAnimationClient.tsx
-import React, { useEffect, useRef } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-function EnterAnimationClient({ hasEnterAnimation, children }) {
-  const ref = useRef(null);
-  console.log("render");
-  useEffect(() => {
-    console.log("effect");
-    console.log("ref", ref.current);
-    if (!hasEnterAnimation) {
-      console.log("no animation");
-      return;
-    }
-    if (!ref.current) {
-      console.log("no ref");
-      return;
-    }
-    console.log("observer started");
-  }, []);
-  useEffect(() => {
-    if (!hasEnterAnimation || !ref.current) return;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            entry.target.classList.add("visible");
-            observer.unobserve(entry.target);
-          }
-        });
-      },
-      { threshold: 0.1 }
-    );
-    observer.observe(ref.current);
-    return () => observer.disconnect();
-  }, [hasEnterAnimation]);
-  if (!children) return null;
-  return /* @__PURE__ */ jsx(Fragment, { children: children && // enforce passing the ref to Wrapper
-  //@ts-ignore
-  React.cloneElement(children, { ref }) });
-}
-export {
-  EnterAnimationClient as default
-};

package/dist/EnterAnimationClient-ZN3NLFNO.mjs

@@ -1,47 +0,0 @@
-"use client";
-
-"use client";
-
-// src/components/pageRenderingEngine/nodes/EnterAnimationClient.tsx
-import React, { useEffect, useRef } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-function EnterAnimationClient({ hasEnterAnimation, children }) {
-  const ref = useRef(null);
-  console.log("render");
-  useEffect(() => {
-    console.log("effect");
-    console.log("ref", ref.current);
-    if (!hasEnterAnimation) {
-      console.log("no animation");
-      return;
-    }
-    if (!ref.current) {
-      console.log("no ref");
-      return;
-    }
-    console.log("observer started");
-  }, []);
-  useEffect(() => {
-    if (!hasEnterAnimation || !ref.current) return;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            entry.target.classList.add("visible");
-            observer.unobserve(entry.target);
-          }
-        });
-      },
-      { threshold: 0.1 }
-    );
-    observer.observe(ref.current);
-    return () => observer.disconnect();
-  }, [hasEnterAnimation]);
-  if (!children) return null;
-  return /* @__PURE__ */ jsx(Fragment, { children: children && // enforce passing the ref to Wrapper
-  //@ts-ignore
-  React.cloneElement(children, { ref }) });
-}
-export {
-  EnterAnimationClient as default
-};