@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260714124630 → 0.8.1-dev.20260715061446

package/dist/index.js

@@ -1,3 +1,5 @@
+"use client";
+
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -5340,6 +5342,17 @@ init_AssetUtility();
 init_ServiceClient();
 
 // 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 {
@@ -5359,6 +5372,7 @@ var AnimationUtility = class {
       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;`;
@@ -5436,14 +5450,14 @@ background-color: ${backgroundColor};
     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} } 
     `;
     }
   }
@@ -6575,6 +6589,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) {
@@ -6584,7 +6599,7 @@ var DivContainer = async (props) => {
         mode: "enter",
         ...enterAnimation.properties
       },
-      `#${guid}`
+      animationSelector
     );
   }
   if (hoverAnimation?.name) {
@@ -6594,7 +6609,7 @@ var DivContainer = async (props) => {
         mode: "hover",
         ...hoverAnimation.properties
       },
-      `#${guid}`
+      animationSelector
     );
   }
   const isHidden = !shouldRenderContainer(

package/dist/index.mjs

@@ -1206,6 +1206,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 {
@@ -1225,6 +1236,7 @@ var AnimationUtility = class {
       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;`;
@@ -1302,14 +1314,14 @@ background-color: ${backgroundColor};
     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} } 
     `;
     }
   }
@@ -2436,6 +2448,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) {
@@ -2445,7 +2458,7 @@ var DivContainer = async (props) => {
         mode: "enter",
         ...enterAnimation.properties
       },
-      `#${guid}`
+      animationSelector
     );
   }
   if (hoverAnimation?.name) {
@@ -2455,7 +2468,7 @@ var DivContainer = async (props) => {
         mode: "hover",
         ...hoverAnimation.properties
       },
-      `#${guid}`
+      animationSelector
     );
   }
   const isHidden = !shouldRenderContainer(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acoustte-digital-services/digitalstore-controls-dev",
-  "version": "0.8.1-dev.20260714124630",
+  "version": "0.8.1-dev.20260715061446",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",