fix(cool-mode): replace innerHTML particle rendering with safe DOM creation

apps/www/public/llms-full.txt

@@ -5164,6 +5164,8 @@ export interface CoolParticleOptions extends BaseParticleOptions {
   speedUp?: number
 }
 
+const SVG_NS = "http://www.w3.org/2000/svg"
+
 const getContainer = () => {
   const id = "_coolMode_effect"
   const existingContainer = document.getElementById(id)
@@ -5204,6 +5206,61 @@ const applyParticleEffect = (
 
   const container = getContainer()
 
+  const appendCircleParticle = (particle: HTMLDivElement, size: number) => {
+    const circleSVG = document.createElementNS(SVG_NS, "svg")
+    const circle = document.createElementNS(SVG_NS, "circle")
+
+    circle.setAttributeNS(null, "cx", (size / 2).toString())
+    circle.setAttributeNS(null, "cy", (size / 2).toString())
+    circle.setAttributeNS(null, "r", (size / 2).toString())
+    circle.setAttributeNS(null, "fill", `hsl(${Math.random() * 360}, 70%, 50%)`)
+
+    circleSVG.appendChild(circle)
+    circleSVG.setAttribute("width", size.toString())
+    circleSVG.setAttribute("height", size.toString())
+
+    particle.appendChild(circleSVG)
+  }
+
+  const appendImageParticle = (
+    particle: HTMLDivElement,
+    imageSrc: string,
+    size: number
+  ) => {
+    const image = document.createElement("img")
+    image.src = imageSrc
+    image.width = size
+    image.height = size
+    image.alt = ""
+    image.style.borderRadius = "50%"
+
+    particle.appendChild(image)
+  }
+
+  const appendTextParticle = (
+    particle: HTMLDivElement,
+    particleContent: string,
+    size: number
+  ) => {
+    const fontSizeMultiplier = 3
+    const emojiSize = size * fontSizeMultiplier
+    const content = document.createElement("div")
+
+    content.textContent = particleContent
+    content.style.fontSize = `${emojiSize}px`
+    content.style.lineHeight = "1"
+    content.style.textAlign = "center"
+    content.style.width = `${size}px`
+    content.style.height = `${size}px`
+    content.style.display = "flex"
+    content.style.alignItems = "center"
+    content.style.justifyContent = "center"
+    content.style.transform = `scale(${fontSizeMultiplier})`
+    content.style.transformOrigin = "center"
+
+    particle.appendChild(content)
+  }
+
   function generateParticle() {
     const size =
       options?.size || sizes[Math.floor(Math.random() * sizes.length)]
@@ -5218,34 +5275,14 @@ const applyParticleEffect = (
     const particle = document.createElement("div")
 
     if (particleType === "circle") {
-      const svgNS = "http://www.w3.org/2000/svg"
-      const circleSVG = document.createElementNS(svgNS, "svg")
-      const circle = document.createElementNS(svgNS, "circle")
-      circle.setAttributeNS(null, "cx", (size / 2).toString())
-      circle.setAttributeNS(null, "cy", (size / 2).toString())
-      circle.setAttributeNS(null, "r", (size / 2).toString())
-      circle.setAttributeNS(
-        null,
-        "fill",
-        `hsl(${Math.random() * 360}, 70%, 50%)`
-      )
-
-      circleSVG.appendChild(circle)
-      circleSVG.setAttribute("width", size.toString())
-      circleSVG.setAttribute("height", size.toString())
-
-      particle.appendChild(circleSVG)
+      appendCircleParticle(particle, size)
     } else if (
       particleType.startsWith("http") ||
       particleType.startsWith("/")
     ) {
-      // Handle URL-based images
-      particle.innerHTML = `<img src="${particleType}" width="${size}" height="${size}" style="border-radius: 50%">`
+      appendImageParticle(particle, particleType, size)
     } else {
-      // Handle emoji or text characters
-      const fontSizeMultiplier = 3 // Make emojis 3x bigger
-      const emojiSize = size * fontSizeMultiplier
-      particle.innerHTML = `<div style="font-size: ${emojiSize}px; line-height: 1; text-align: center; width: ${size}px; height: ${size}px; display: flex; align-items: center; justify-content: center; transform: scale(${fontSizeMultiplier}); transform-origin: center;">${particleType}</div>`
+      appendTextParticle(particle, particleType, size)
     }
 
     particle.style.position = "absolute"
@@ -5424,8 +5461,7 @@ export default function CoolModeCustom() {
     <div className="relative justify-center">
       <CoolMode
         options={{
-          particle:
-            "https://pbs.twimg.com/profile_images/1782811051504885763/YR5-kWOI_400x400.jpg",
+          particle: "https://avatars.githubusercontent.com/u/81306489",
         }}
       >
         <Button>Click Me!</Button>

apps/www/public/r/cool-mode-custom.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/example/cool-mode-custom.tsx",
-      "content": "import { Button } from \"@/components/ui/button\"\nimport { CoolMode } from \"@/registry/magicui/cool-mode\"\n\nexport default function CoolModeCustom() {\n  return (\n    <div className=\"relative justify-center\">\n      <CoolMode\n        options={{\n          particle:\n            \"https://pbs.twimg.com/profile_images/1782811051504885763/YR5-kWOI_400x400.jpg\",\n        }}\n      >\n        <Button>Click Me!</Button>\n      </CoolMode>\n    </div>\n  )\n}\n",
+      "content": "import { Button } from \"@/components/ui/button\"\nimport { CoolMode } from \"@/registry/magicui/cool-mode\"\n\nexport default function CoolModeCustom() {\n  return (\n    <div className=\"relative justify-center\">\n      <CoolMode\n        options={{\n          particle: \"https://avatars.githubusercontent.com/u/81306489\",\n        }}\n      >\n        <Button>Click Me!</Button>\n      </CoolMode>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ]