apex-ui-kit 2.0.7 → 2.1.0

package/dist/ApexUI-Kit/templates/ParallaxProfile/ParallaxProfile.jsx

@@ -7,7 +7,7 @@ const LinkedInIcon = () => (<svg width="24" height="24" fill="none" stroke="curr
 const TwitterIcon = () => (<BsTwitterX size={24} />);
 const InstagramIcon = () => (<svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="5" ry="5" /><path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z" /><line x1="17.5" y1="6.5" x2="17.5" y2="6.5" /></svg>);
 const defaultProfile = {
-    avatarUrl: "/assets/spiderman.png",
+    avatarUrl: "https://ik.imagekit.io/ny6yinyut/apexui/assets/spiderman.png?tr=f-auto,q-80,w-480",
     name: "Spider Man",
     username: "spider_man",
     dob: "10-08-2001",
@@ -44,7 +44,7 @@ const ParallaxProfileCard = ({ profile }) => {
             gsap.to(card, { duration: 1, rotationX: 0, rotationY: 0, scale: 1, ease: "elastic.out(1, 0.3)" });
         };
         gsap.set(card, { transformPerspective: 1000 });
-        card.addEventListener("mousemove", handleMouseMove);
+        card.addEventListener("mousemove", handleMouseMove, { passive: true });
         card.addEventListener("mouseleave", handleMouseLeave);
         return () => {
             card.removeEventListener("mousemove", handleMouseMove);
@@ -52,51 +52,54 @@ const ParallaxProfileCard = ({ profile }) => {
         };
     }, []);
 
+    const iconBtn = "flex h-9 w-9 items-center justify-center rounded-full border border-cyan-400/20 bg-cyan-400/5 text-cyan-300 transition-colors duration-200 hover:border-cyan-300/60 hover:text-white [&_svg]:h-[18px] [&_svg]:w-[18px]";
+
     return (
         <div
             ref={cardRef}
-            className="relative w-[300px] h-[440px] bg-[#1D2B3A] rounded-3xl p-6 border border-cyan-400/30 shadow-2xl shadow-cyan-900/40 flex flex-col"
+            className="relative w-[300px] max-w-full bg-[#1D2B3A] rounded-3xl p-6 border border-cyan-400/30 shadow-2xl shadow-cyan-900/40"
             style={{ transformStyle: "preserve-3d" }}
         >
-            <div className="absolute inset-0 bg-gradient-to-br from-[#1D2B3A] to-[#111827] rounded-3xl"></div>
-            <div className="absolute top-0 left-0 w-full h-full" style={{ background: "radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.08), transparent 70%)", transform: "translateZ(20px)" }}></div>
+            <div className="absolute inset-0 bg-gradient-to-br from-[#1D2B3A] to-[#0b1220] rounded-3xl"></div>
+            <div className="absolute inset-x-0 top-0 h-28 rounded-t-3xl" style={{ background: "radial-gradient(120% 100% at 50% 0%, rgba(34, 211, 238, 0.22), transparent 70%)", transform: "translateZ(20px)" }}></div>
 
-            <div className="relative z-10 flex flex-col items-center justify-between h-full" style={{ transform: "translateZ(50px)" }}>
-                {/* Top Part */}
-                <div className="text-center">
-                    <img src={avatarUrl} alt="Profile" className="w-28 h-28 rounded-full mx-auto mb-3 border-4 border-cyan-400 shadow-lg object-cover" onError={(e) => { e.target.onerror = null; e.target.src = "https://placehold.co/128x128/1D2B3A/A5F3FC?text=ERR"; }} />
-                    <h2 className="text-2xl font-bold text-cyan-300 tracking-wide">{name}</h2>
-                    <div className="flex flex-col items-center mt-1">
-                        <span className="text-xs font-semibold text-slate-300 bg-slate-700 px-2 py-0.5 rounded-full mb-1">@{username}</span>
-                        <span className="text-xs font-medium text-cyan-400 bg-slate-700 px-2 py-0.5 rounded-full">DOB: {dob}</span>
-                    </div>
+            <div className="relative z-10 flex flex-col items-center text-center" style={{ transform: "translateZ(50px)" }}>
+                {/* Avatar with status dot */}
+                <div className="relative">
+                    <img src={avatarUrl} alt="Profile" className="w-24 h-24 rounded-full border-[3px] border-cyan-400 shadow-lg shadow-cyan-500/30 object-cover" onError={(e) => { e.target.onerror = null; e.target.src = "https://placehold.co/128x128/1D2B3A/A5F3FC?text=ERR"; }} />
+                    {status && <span className="absolute bottom-1 right-1 h-4 w-4 rounded-full border-[3px] border-[#1D2B3A] bg-green-500" />}
+                </div>
+                <h2 className="mt-3 text-2xl font-bold text-cyan-300 tracking-wide">{name}</h2>
+                <p className="text-sm text-slate-400">{title}</p>
+                <div className="mt-3 flex flex-wrap items-center justify-center gap-1.5">
+                    <span className="text-[11px] font-semibold text-slate-300 bg-slate-700/70 px-2.5 py-1 rounded-full">@{username}</span>
+                    <span className="text-[11px] font-medium text-cyan-300 bg-slate-700/70 px-2.5 py-1 rounded-full">DOB: {dob}</span>
                 </div>
 
-                {/* Bottom Part */}
-                <div className="w-full text-center">
-                    <p className="text-slate-400 text-lg">{title}</p>
-                    {status && (
-                        <div className="flex items-center justify-center gap-2 mt-2">
-                            <span className="relative flex h-3 w-3"><span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span><span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span></span>
-                            <span className="text-green-300 text-sm">{status}</span>
-                        </div>
-                    )}
-                    <div className="flex justify-center gap-4 my-4">
-                        {socialLinks?.github && (<a href={socialLinks.github} target="_blank" rel="noopener noreferrer" title="GitHub" className="text-cyan-400 hover:text-white transition-colors duration-200"><GitHubIcon /></a>)}
-                        {socialLinks?.linkedin && (<a href={socialLinks.linkedin} target="_blank" rel="noopener noreferrer" title="LinkedIn" className="text-cyan-400 hover:text-white transition-colors duration-200"><LinkedInIcon /></a>)}
-                        {socialLinks?.twitter && (<a href={socialLinks.twitter} target="_blank" rel="noopener noreferrer" title="Twitter" className="text-cyan-400 hover:text-white transition-colors duration-200"><TwitterIcon /></a>)}
-                        {socialLinks?.instagram && (<a href={socialLinks.instagram} target="_blank" rel="noopener noreferrer" title="Instagram" className="text-cyan-400 hover:text-white transition-colors duration-200"><InstagramIcon /></a>)}
+                {status && (
+                    <div className="mt-4 inline-flex items-center gap-2 rounded-full border border-green-400/20 bg-green-400/5 px-3 py-1">
+                        <span className="relative flex h-2 w-2"><span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span><span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span></span>
+                        <span className="text-green-300 text-xs font-medium">{status}</span>
                     </div>
+                )}
 
-                    {/* Buttons Section */}
-                    <div className="flex justify-center gap-3">
-                        <button onClick={onHireClick} className="w-1/2 bg-cyan-500 text-slate-900 font-bold py-2 px-4 rounded-lg hover:bg-cyan-400 transition-colors duration-300">
-                            Hire Me
-                        </button>
-                        <button onClick={onCvClick} className="w-1/2 bg-slate-700 text-cyan-300 font-bold py-2 px-4 rounded-lg hover:bg-slate-600 transition-colors duration-300">
-                            CV
-                        </button>
-                    </div>
+                <div className="my-5 h-px w-full bg-gradient-to-r from-transparent via-cyan-400/25 to-transparent" />
+
+                <div className="flex justify-center gap-2.5">
+                    {socialLinks?.github && (<a href={socialLinks.github} target="_blank" rel="noopener noreferrer" title="GitHub" className={iconBtn}><GitHubIcon /></a>)}
+                    {socialLinks?.linkedin && (<a href={socialLinks.linkedin} target="_blank" rel="noopener noreferrer" title="LinkedIn" className={iconBtn}><LinkedInIcon /></a>)}
+                    {socialLinks?.twitter && (<a href={socialLinks.twitter} target="_blank" rel="noopener noreferrer" title="Twitter" className={iconBtn}><TwitterIcon /></a>)}
+                    {socialLinks?.instagram && (<a href={socialLinks.instagram} target="_blank" rel="noopener noreferrer" title="Instagram" className={iconBtn}><InstagramIcon /></a>)}
+                </div>
+
+                {/* Buttons Section */}
+                <div className="mt-5 flex w-full gap-3">
+                    <button onClick={onHireClick} className="flex-1 whitespace-nowrap bg-cyan-500 text-slate-900 text-sm font-bold py-2.5 px-3 rounded-xl hover:bg-cyan-400 transition-colors duration-300">
+                        Hire Me
+                    </button>
+                    <button onClick={onCvClick} className="flex-1 whitespace-nowrap bg-slate-700/80 text-cyan-300 text-sm font-bold py-2.5 px-3 rounded-xl hover:bg-slate-600 transition-colors duration-300">
+                        Download CV
+                    </button>
                 </div>
             </div>
         </div>
@@ -106,7 +109,7 @@ const ParallaxProfileCard = ({ profile }) => {
 const ParallaxProfile = ({ profiles = [defaultProfile], className = '' }) => {
     const safe = Array.isArray(profiles) && profiles.length > 0 ? profiles : [defaultProfile];
     return (
-        <div className={`flex flex-wrap gap-6 justify-center ${className}`}>
+        <div className={`flex w-full flex-wrap gap-6 justify-center ${className}`}>
             {safe.map((p, i) => (
                 <ParallaxProfileCard key={p.id || p.username || i} profile={p} />
             ))}

package/dist/ApexUI-Kit/templates/PointerFollower/PointerFollower.jsx

@@ -1,12 +1,12 @@
 import React, { useRef, useEffect, useState } from "react";
 
 const defaultPeople = [
-    { id: 1, name: "Captain America", job: "Leader of the Avengers", img: "/assets/captainamerica.png" },
-    { id: 2, name: "Doctor Strange", job: "Sorcerer Supreme", img: "/assets/doctorStrange.png" },
-    { id: 3, name: "Iron Man", job: "Leader Of Stark Industries", img: "/assets/ironman.png" },
-    { id: 4, name: "HULK", job: "Scientist", img: "/assets/hulk.png" },
-    { id: 5, name: "Spider-Man", job: "Friendly Neighborhood Spider-Man", img: "/assets/spiderman.png" },
-    { id: 6, name: "Thanos", job: "The Mad Titan", img: "/assets/thanos.png" },
+    { id: 1, name: "Captain America", job: "Leader of the Avengers", img: "https://ik.imagekit.io/ny6yinyut/apexui/assets/captainamerica.png?tr=f-auto,q-80,w-480" },
+    { id: 2, name: "Doctor Strange", job: "Sorcerer Supreme", img: "https://ik.imagekit.io/ny6yinyut/apexui/assets/doctorStrange.png?tr=f-auto,q-80,w-480" },
+    { id: 3, name: "Iron Man", job: "Leader Of Stark Industries", img: "https://ik.imagekit.io/ny6yinyut/apexui/assets/ironman.png?tr=f-auto,q-80,w-480" },
+    { id: 4, name: "HULK", job: "Scientist", img: "https://ik.imagekit.io/ny6yinyut/apexui/assets/hulk.png?tr=f-auto,q-80,w-480" },
+    { id: 5, name: "Spider-Man", job: "Friendly Neighborhood Spider-Man", img: "https://ik.imagekit.io/ny6yinyut/apexui/assets/spiderman.png?tr=f-auto,q-80,w-480" },
+    { id: 6, name: "Thanos", job: "The Mad Titan", img: "https://ik.imagekit.io/ny6yinyut/apexui/assets/thanos.png?tr=f-auto,q-80,w-480" },
 ];
 
 const PointerFollower = ({
@@ -53,7 +53,7 @@ const PointerFollower = ({
             setHovered(false);
         };
 
-        container.addEventListener("pointermove", handleMove);
+        container.addEventListener("pointermove", handleMove, { passive: true });
         container.addEventListener("pointerleave", handleLeave);
 
         return () => {

package/dist/ApexUI-Kit/templates/SmartGridCard/SmartGridCard.jsx

@@ -123,10 +123,11 @@ const SmartGridCard = ({
         <div
             className={`grid gap-2 justify-center p-4 w-full ${screenWidth >= 1024 ? 'grid-cols-3' : screenWidth >= 768 ? 'grid-cols-2' : 'grid-cols-1'}`}
             style={screenWidth >= 1024 ? {
-                gridTemplateColumns: "repeat(3, minmax(300px, 1fr))",
+                // minmax(0, …): columns share the container's width instead of overflowing it.
+                gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
                 gridTemplateRows: `repeat(2, ${CARD_HEIGHT}px)`
             } : screenWidth >= 768 ? {
-                gridTemplateColumns: "repeat(2, minmax(300px, 1fr))",
+                gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
                 gridTemplateRows: `repeat(3, ${CARD_HEIGHT}px)`
             } : {}}
         >
@@ -164,7 +165,7 @@ const SmartGridCard = ({
                             </div>
                             <button
                                 type="button"
-                                className="mt-auto relative overflow-hidden px-5 py-3 rounded-lg border border-purple-400/60 text-white transition hover:text-white bg-black/20 group flex items-center gap-2 text-xs md:text-base"
+                                className="mt-auto relative overflow-hidden whitespace-nowrap px-4 py-3 rounded-lg border border-purple-400/60 text-white transition hover:text-white bg-black/20 group flex items-center gap-2 text-xs md:text-base"
                             >
                                 <span className="relative z-10 flex items-center gap-2">
                                     {card.buttonText}

package/dist/ApexUI-Kit/templates/SmokeBackground/SmokeBackground.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from "react";
-import { Renderer, Program, Mesh, Triangle } from "https://unpkg.com/ogl";
+import { Renderer, Program, Mesh, Triangle } from "ogl";
 
 const hexToRgb = (hex) => {
     const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
@@ -158,7 +158,7 @@ export const SmokeBackground = ({
             mouseNeedsUpdate = true;
         };
         if (mouseInteractive) {
-            mountNode.addEventListener("mousemove", handleMouseMove);
+            mountNode.addEventListener("mousemove", handleMouseMove, { passive: true });
         }
 
         const setSize = () => {
@@ -178,8 +178,12 @@ export const SmokeBackground = ({
         setSize();
 
         let raf = 0;
+        // Only render while the background is on screen.
+        let visible = true;
         const t0 = performance.now();
         const loop = (t) => {
+            raf = 0;
+            if (!visible) return;
             let timeValue = (t - t0) * 0.001;
 
             if (direction === "funny") {
@@ -199,9 +203,15 @@ export const SmokeBackground = ({
             raf = requestAnimationFrame(loop);
         };
         raf = requestAnimationFrame(loop);
+        const visibilityObserver = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            if (visible && !raf) raf = requestAnimationFrame(loop);
+        });
+        visibilityObserver.observe(mountNode);
 
         return () => {
             cancelAnimationFrame(raf);
+            visibilityObserver.disconnect();
             ro.disconnect();
             if (mouseInteractive && mountNode) {
                 mountNode.removeEventListener("mousemove", handleMouseMove);
@@ -209,6 +219,7 @@ export const SmokeBackground = ({
             try {
                 mountNode.removeChild(canvas);
             } catch (error) { console.error("Error removing canvas:", error); }
+            gl.getExtension("WEBGL_lose_context")?.loseContext();
         };
     }, [color, speed, direction, scale, opacity, mouseInteractive, className]);
 

package/dist/ApexUI-Kit/templates/Testimonials/Testimonials.jsx

@@ -24,12 +24,12 @@ const Testimonials = ({ testimonials }) => {
     };
 
     return (
-        <div className="w-full max-w-4xl mx-auto bg-slate-950 rounded-2xl p-8 md:p-12 border border-slate-800 grid md:grid-cols-2 gap-12 items-center overflow-hidden">
+        <div className="w-full max-w-4xl mx-auto bg-slate-950 rounded-2xl p-6 sm:p-8 md:p-12 border border-slate-800 grid md:grid-cols-2 gap-8 md:gap-12 items-center overflow-hidden">
 
             {/* Left Part: Text Content and Navigation */}
             <div className="flex flex-col justify-center h-full text-center md:text-left order-2 md:order-1">
-                {/* Title and Subtitle with Animation */}
-                <div className="relative h-32">
+                {/* Title, subtitle and quote with animation; the min height keeps the buttons from jumping. */}
+                <div className="relative min-h-[13rem] sm:min-h-[12rem]">
                     <AnimatePresence initial={false} mode="wait">
                         <motion.div
                             key={activeIndex}
@@ -38,11 +38,11 @@ const Testimonials = ({ testimonials }) => {
                             animate="center"
                             exit="exit"
                             transition={{ duration: 0.4, ease: "easeInOut" }}
-                            className="absolute w-full"
+                            className="w-full"
                         >
-                            <h2 className="text-3xl font-bold text-white tracking-tight">{testimonials[activeIndex].author}</h2>
+                            <h2 className="text-2xl sm:text-3xl font-bold text-white tracking-tight">{testimonials[activeIndex].author}</h2>
                             <p className="mt-2 text-lime-400 font-medium">{testimonials[activeIndex].title}</p>
-                            <p className="mt-4 text-slate-400 text-sm leading-relaxed hidden md:block">"{testimonials[activeIndex].text}"</p>
+                            <p className="mt-4 text-slate-400 text-sm leading-relaxed">"{testimonials[activeIndex].text}"</p>
                         </motion.div>
                     </AnimatePresence>
                 </div>
@@ -71,7 +71,9 @@ const Testimonials = ({ testimonials }) => {
             </div>
 
             {/* Right Part: Stacked Images */}
-            <div className="relative h-80 w-full flex items-center justify-center order-1 md:order-2">
+            <div className="flex w-full items-center justify-center order-1 md:order-2">
+                {/* Sized to the card plus the fan, so the stack stays centred and inside the panel. */}
+                <div className="relative h-[calc(16rem+30px)] w-[calc(12rem+60px)] sm:h-[calc(20rem+30px)] sm:w-[calc(16rem+60px)]">
                 {testimonials.map((testimonial, index) => {
                     // Determine the position of the card in the stack
                     const position = (index - activeIndex + testimonials.length) % testimonials.length;
@@ -82,7 +84,7 @@ const Testimonials = ({ testimonials }) => {
                     return (
                         <motion.div
                             key={testimonial.id || index}
-                            className="absolute w-64 h-80 bg-slate-800 rounded-xl shadow-2xl overflow-hidden border-2 border-slate-700"
+                            className="absolute w-48 h-64 sm:w-64 sm:h-80 bg-slate-800 rounded-xl shadow-2xl overflow-hidden border-2 border-slate-700"
                             initial={false}
                             animate={{
                                 scale: 1 - position * 0.08,
@@ -107,6 +109,7 @@ const Testimonials = ({ testimonials }) => {
                         </motion.div>
                     );
                 })}
+                </div>
             </div>
         </div>
     );

package/dist/ApexUI-Kit/templates/ThemeToggle/ThemeAnimation.js

@@ -1,14 +1,42 @@
 // config/animations.js
 
-// Small utility to escape quotes in data-URIs
-const esc = (s = "") => s.replace(/#/g, "%23").replace(/\n/g, "");
+// Soft-edged circle that grows from `at` until it covers the screen. It animates
+// a radial-gradient mask through a registered property, which stays smooth;
+// scaling a blurred SVG mask to screen size re-rasterises every frame and flickers.
+const circleReveal = (at) => `
+  @property --vt-r { syntax: '<length>'; inherits: false; initial-value: 0px; }
+  ::view-transition-new(root) {
+    -webkit-mask-image: radial-gradient(circle at ${at}, #000 var(--vt-r), transparent calc(var(--vt-r) + 12vmax));
+    mask-image: radial-gradient(circle at ${at}, #000 var(--vt-r), transparent calc(var(--vt-r) + 12vmax));
+    animation: vt-circle var(--vt-duration) var(--vt-ease);
+  }
+  ::view-transition-old(root) { animation: none; }
+  @keyframes vt-circle {
+    from { --vt-r: -12vmax; }
+    to   { --vt-r: 150vmax; }
+  }
+`;
+
+// Holds the last frame until the transition ends (no flash of the old theme)
+// and keeps the browser's default plus-lighter blending out of the reveal.
+const footer = `
+  ::view-transition-old(root), ::view-transition-new(root) {
+    animation-fill-mode: both;
+    mix-blend-mode: normal;
+  }
+`;
 
 export function buildAnimationCSS(animation, opts = {}) {
+  return presetCSS(animation, opts) + footer;
+}
+
+function presetCSS(animation, opts = {}) {
   const duration = opts.duration || "1.5s";
   const ease = opts.ease || "var(--vt-ease)";
 
+  // `var(--vt-ease)` would refer to itself here, so only set a real easing.
   const header = `
-    :root { --vt-duration: ${duration}; --vt-ease: ${ease}; }
+    :root { --vt-duration: ${duration};${ease === "var(--vt-ease)" ? "" : ` --vt-ease: ${ease};`} }
     ::view-transition-group(root){ animation-timing-function: var(--vt-ease); }
   `;
 
@@ -37,72 +65,15 @@ export function buildAnimationCSS(animation, opts = {}) {
   const preset = typeof animation === "string" ? animation : animation?.type;
 
   switch (preset) {
-    case "circle": {
-      const circleSVG = esc(
-        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="white"/></svg>`
-      );
-      return header + `
-        ::view-transition-new(root) {
-          mask: url('data:image/svg+xml,${circleSVG}') center / 0 no-repeat;
-          -webkit-mask: url('data:image/svg+xml,${circleSVG}') center / 0 no-repeat;
-          animation: vt-scale var(--vt-duration);
-        }
-        ::view-transition-old(root), .dark::view-transition-old(root) {
-          animation: vt-scale var(--vt-duration);
-        }
-        @keyframes vt-scale {
-          to { mask-size: 200vmax; -webkit-mask-size: 200vmax; }
-        }
-      `;
-    }
+    case "circle":
+      // Grows from the clicked button (ThemeToggle sets --cx / --cy).
+      return header + circleReveal("var(--cx, 50%) var(--cy, 50%)");
 
-    case "circle-left": {
-      const svg = esc(
-        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><filter id="b"><feGaussianBlur stdDeviation="2"/></filter></defs><circle cx="0" cy="0" r="18" fill="white" filter="url(%23b)"/></svg>`
-      );
-      return header + `
-        ::view-transition-new(root) {
-          mask: url('data:image/svg+xml,${svg}') top left / 0 no-repeat;
-          -webkit-mask: url('data:image/svg+xml,${svg}') top left / 0 no-repeat;
-          transform-origin: top left;
-          animation: vt-scale-tl var(--vt-duration);
-        }
-        ::view-transition-old(root), .dark::view-transition-old(root) {
-          transform-origin: top left;
-          animation: vt-scale-tl var(--vt-duration);
-        }
-        @keyframes vt-scale-tl { to { mask-size: 350vmax; -webkit-mask-size: 350vmax; } }
-      `;
-    }
-    case "circle-right": {
-      const svg = esc(
-        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
-       <defs><filter id="b"><feGaussianBlur stdDeviation="2"/></filter></defs>
-       <circle cx="40" cy="0" r="18" fill="white" filter="url(%23b)"/>
-     </svg>`
-      );
-
-      return header + `
-    ::view-transition-new(root) {
-      mask: url('data:image/svg+xml,${svg}') top right / 0 no-repeat;
-      -webkit-mask: url('data:image/svg+xml,${svg}') top right / 0 no-repeat;
-      transform-origin: top right;
-      animation: vt-scale-tr 0.9s;
-    }
+    case "circle-left":
+      return header + circleReveal("0 0");
 
-    ::view-transition-old(root), .dark::view-transition-old(root) {
-      transform-origin: top right;
-      animation: vt-scale-tr 0.9s;
-    }
-
-    @keyframes vt-scale-tr {
-      to {
-        mask-size: 350vmax;
-        -webkit-mask-size: 350vmax;
-      }
-    }
-  `;
-    }
+    case "circle-right":
+      return header + circleReveal("100% 0");
     case "split-reveal-horizontal": {
       return header + `
     ::view-transition-new(root) {
@@ -241,7 +212,7 @@ export function buildAnimationCSS(animation, opts = {}) {
     }
   `;
     }
-   // Add more animation 
+    // Add more animation 
 
 
 
@@ -249,4 +220,4 @@ export function buildAnimationCSS(animation, opts = {}) {
     default:
       return header; // no-op if unknown
   }
-}
+}

package/dist/ApexUI-Kit/templates/ThemeToggle/ThemeToggle.css

@@ -71,7 +71,7 @@
   --color-aside-beam: #fff;
 
   /* animation defaults (can be overridden) */
-  --vt-duration: 1s;
+  --vt-duration: 1.7s;
   --vt-ease: ease-in-out;
 }
 

package/dist/ApexUI-Kit/templates/ThemeToggle/ThemeToggle.jsx

@@ -1,7 +1,15 @@
 import { useState, useEffect, useRef, useId } from "react";
+import { flushSync } from "react-dom";
 import { FiSun, FiMoon } from "react-icons/fi";
 import { buildAnimationCSS } from "./ThemeAnimation.js";
 
+// Swaps the theme-* class on <html>.
+function applyThemeClass(theme) {
+    const html = document.documentElement;
+    [...html.classList].forEach((c) => c.startsWith("theme-") && html.classList.remove(c));
+    html.classList.add(`theme-${theme}`);
+}
+
 export default function ThemeToggle({
     animation = "circle",
     duration = "1.5s",
@@ -29,12 +37,19 @@ export default function ThemeToggle({
     // ------------------------------
     useEffect(() => {
         const rawCSS = buildAnimationCSS(animation, { duration, ease });
+        const suffix = uid.replace(/[^\w-]/g, "");
 
-        // ✅ Scope selectors with html[vt-owner]
+        // ✅ Scope selectors with html[vt-owner]; :root variables and keyframe names
+        // too, so several toggles on one page don't override each other's settings.
         const scopedCSS = rawCSS
+            .replace(/(?<![-\w])vt-(?=[a-z])/g, `vt-${suffix}-`)
+            .replace(/:root\b/g, `html[vt-owner="${uid}"]`)
             .replaceAll("::view-transition-new", `html[vt-owner="${uid}"]::view-transition-new`)
             .replaceAll("::view-transition-old", `html[vt-owner="${uid}"]::view-transition-old`)
-            .replaceAll("::view-transition-group", `html[vt-owner="${uid}"]::view-transition-group`);
+            .replaceAll("::view-transition-group", `html[vt-owner="${uid}"]::view-transition-group`)
+            // No CSS transitions while the view transition runs, otherwise elements are
+            // captured mid-fade in the old colours and snap to the new ones afterwards.
+            + `html[vt-owner="${uid}"] *, html[vt-owner="${uid}"] *::before, html[vt-owner="${uid}"] *::after { transition: none !important; }`;
 
         let styleEl = document.getElementById(`vt-style-${uid}`);
         if (!styleEl) {
@@ -49,9 +64,7 @@ export default function ThemeToggle({
     // Apply theme globally + notify
     // ------------------------------
     useEffect(() => {
-        const html = document.documentElement;
-        html.classList.forEach((c) => c.startsWith("theme-") && html.classList.remove(c));
-        html.classList.add(`theme-${theme}`);
+        applyThemeClass(theme);
 
         try {
             localStorage.setItem("apexui-theme", theme);
@@ -88,7 +101,12 @@ export default function ThemeToggle({
         // ✅ Use html instead of body
         document.documentElement.setAttribute("vt-owner", uid);
 
-        const run = () => setTheme(nextTheme);
+        // Apply the theme synchronously: the browser takes the transition's "new"
+        // snapshot as soon as this returns, before a normal React update would land.
+        const run = () => {
+            applyThemeClass(nextTheme);
+            flushSync(() => setTheme(nextTheme));
+        };
 
         if (document.startViewTransition) {
             const vt = document.startViewTransition(run);
@@ -115,4 +133,4 @@ export default function ThemeToggle({
             {isLight ? <FiMoon /> : <FiSun />}
         </button>
     );
-}
+}