apex-ui-kit 2.7.0 → 2.9.0

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

@@ -5,8 +5,8 @@ import React, { Children, useLayoutEffect, useRef } from "react";
  * card that gets covered shrinks a little, darkens and (optionally) blurs or
  * leans back, so the pile reads as depth. It rides on native scrolling
  * (position: sticky + one rAF update per scroll), so it stays smooth with
- * mouse, trackpad, touch and keyboard. Scrolls inside its own box, or with
- * the page (useWindowScroll).
+ * mouse, trackpad, touch and keyboard. By default it stacks with the page
+ * scroll; set useWindowScroll={false} to stack inside its own scroll box.
  */
 
 export const ScrollStackItem = ({ children, className = "", style }) => (
@@ -16,7 +16,7 @@ export const ScrollStackItem = ({ children, className = "", style }) => (
     </div>
 );
 
-const ScrollStack = ({ children, gap = 90, offset = 22, top = 64, scaleStep = 0.05, minScale = 0.82, dim = 0.22, blur = 0, tilt = 0, endSpace = 180, useWindowScroll = false, height = "100%", className = "" }) => {
+const ScrollStack = ({ children, gap = 90, offset = 22, top = 64, scaleStep = 0.05, minScale = 0.82, dim = 0.22, blur = 0, tilt = 0, endSpace = 180, useWindowScroll = true, height = "100%", className = "" }) => {
     const root = useRef(null);
     const slots = useRef([]);
     const items = Children.toArray(children);

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

@@ -23,6 +23,7 @@ precision highp float;
 uniform vec2 uRes; uniform float uTime; uniform float uRise; uniform vec2 uMouse;
 uniform vec3 uSun; uniform vec3 uSkyTop; uniform vec3 uSkyLow; uniform vec3 uMount;
 uniform float uRays; uniform float uStars; uniform float uHaze; uniform float uSunSize; uniform float uSunHeight;
+uniform float uTrees; uniform float uBirds;
 
 float h1(float x){ return fract(sin(x * 127.1) * 43758.5453); }
 float h2(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
@@ -47,6 +48,23 @@ float range(float x, float c, float w, float peak, float base, float amp, float
   return base + s * peak + (crag(x * freq + seed) - 0.45) * amp * (0.35 + s);
 }
 
+// A pine silhouette: three stacked tiers, each wider at its base, on a short trunk.
+// dx / dy are measured from the foot of the tree, h is its height (all in screen units).
+float pine(float dx, float dy, float h){
+  if (h <= 0.0) return 0.0;
+  float t = dy / h;
+  if (t < 0.0 || t > 1.0) return 0.0;
+  float aa = 0.0015;
+  float trunk = smoothstep(h * 0.035 + aa, h * 0.035 - aa, abs(dx)) * step(t, 0.14);
+  float tiers = 3.0;
+  float k = floor(min((t - 0.1) / 0.9, 0.999) * tiers);
+  float local = fract(min((t - 0.1) / 0.9, 0.999) * tiers);
+  float base = 0.36 * h * (1.0 - k / tiers * 0.62);
+  float w = base * (1.0 - local * 0.78);
+  float crown = smoothstep(w + aa, w - aa, abs(dx)) * step(0.1, t);
+  return max(trunk, crown);
+}
+
 void main(){
   vec2 uv = gl_FragCoord.xy / uRes;
   float asp = uRes.x / uRes.y;
@@ -114,6 +132,46 @@ void main(){
   cn += uSun * exp(-max(hn - y, 0.0) * 120.0) * toSun * 0.9;
   col = mix(col, cn, mn);
 
+  // Pines along the near ridge, thinning out toward the valley so the sun stays clear.
+  // Sizes are in screen-height units so a tree keeps its shape on any screen.
+  float unit = 0.5 * clamp(asp, 0.7, 2.2);       // one xn unit in height units
+  float tx = (xn + mx * 0.05) * 26.0;
+  float tcell = floor(tx);
+  float cellW = unit / 26.0;
+  float jitter = (h1(tcell + 1.9) - 0.5) * 0.3;
+  float dx = (fract(tx) - 0.5 - jitter) * cellW;
+  float pres = step(0.3, h1(tcell + 3.1)) * smoothstep(0.1, 0.42, abs(xn));
+  float ht = min(0.022 + 0.04 * h1(tcell + 7.7), cellW * 1.25) * pres * uTrees;
+  float trees = pine(dx, y - hn + 0.004, ht);
+  col = mix(col, uMount * 0.6 + uSun * toSun * 0.05, trees * (1.0 - mn));
+
+  // A few big pines framing the bottom corners.
+  float tx2 = (xn + mx * 0.08) * 6.0;
+  float cell2 = floor(tx2);
+  float cellW2 = unit / 6.0;
+  float dx2 = (fract(tx2) - 0.5) * cellW2;
+  float ht2 = min(0.16 + 0.1 * h1(cell2 + 1.3), cellW2 * 1.3) * step(0.35, h1(cell2 + 4.4)) * smoothstep(0.62, 0.78, abs(xn)) * uTrees;
+  col = mix(col, uMount * 0.38, pine(dx2, y + 0.015, ht2));
+
+  // A small flock crossing the sky, wings flapping out of step.
+  if (uBirds > 0.0) {
+    float lap = fract(uTime * 0.03 + 0.38);
+    vec2 flock = vec2(mix(-asp * 0.5 - 0.25, asp * 0.5 + 0.25, lap), 0.66 + 0.035 * sin(uTime * 0.31));
+    for (int i = 0; i < 7; i++) {
+      float fi = float(i);
+      if (fi >= uBirds * 7.0) break;
+      float side = mod(fi, 2.0) * 2.0 - 1.0;
+      float rank = floor((fi + 1.0) / 2.0);
+      vec2 bpos = flock + vec2(-rank * 0.045, -rank * 0.022 * side) + vec2(0.006 * sin(uTime * 1.3 + fi), 0.008 * sin(uTime * 0.9 + fi * 1.7));
+      float size = 0.016 * (1.0 - rank * 0.08);
+      vec2 r = q - bpos;
+      float flap = 0.15 + 0.75 * (0.5 + 0.5 * sin(uTime * 9.0 + fi * 1.9));
+      float dist = abs(r.y - abs(r.x) * flap + size * 0.15) - 0.0006;
+      float bird = smoothstep(0.0024, 0.0008, dist) * step(abs(r.x), size);
+      col = mix(col, uMount * 0.45, bird * smoothstep(0.2, 0.5, rise));
+    }
+  }
+
   // Low fog over everything and light bleeding over the ridges.
   col += haze * exp(-y * 7.0) * 0.12 * uHaze * rise;
   col += uSun * exp(-d * 3.0) * 0.18 * rise;
@@ -132,7 +190,9 @@ const SunriseBackground = ({
     mountainColor,
     duration = 6,
     autoRise = true,
-    sunHeight = 0.36,
+    sunHeight = 0.28,
+    trees = true,
+    birds = 1,
     sunSize = 0.075,
     rays = 1,
     stars = 1,
@@ -158,6 +218,8 @@ const SunriseBackground = ({
         rays,
         stars,
         haze,
+        trees,
+        birds,
         speed,
         interactive,
     };
@@ -189,7 +251,9 @@ const SunriseBackground = ({
             uStars: { value: 1 },
             uHaze: { value: 1 },
             uSunSize: { value: 0.075 },
-            uSunHeight: { value: 0.3 },
+            uSunHeight: { value: 0.28 },
+            uTrees: { value: 1 },
+            uBirds: { value: 1 },
         };
         const material = new ShaderMaterial({ vertexShader: VERT, fragmentShader: FRAG, uniforms: u, depthTest: false, depthWrite: false });
         const geometry = new PlaneGeometry(2, 2);
@@ -229,6 +293,8 @@ const SunriseBackground = ({
             u.uRays.value = o.rays;
             u.uStars.value = o.stars;
             u.uHaze.value = o.haze;
+            u.uTrees.value = o.trees ? 1 : 0;
+            u.uBirds.value = reduced ? 0 : Math.max(0, Math.min(1, o.birds));
             u.uSunSize.value = o.sunSize;
             u.uSunHeight.value = o.sunHeight;
             renderer.render(scene, camera);

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

@@ -1,15 +1,18 @@
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { useAnimationFrame, useReducedMotion } from "framer-motion";
 
 /*
  * 3D Text Ring: letters stand on a ring in real 3D space and the ring
  * turns, so text sweeps around the back and comes forward again. Letters
- * fade and soften as they pass behind. Drag to spin it yourself.
+ * fade and soften as they pass behind. Drag to spin it yourself. On narrow
+ * screens the whole ring scales down to fit its container.
  */
 
 const TextRing3D = ({ text = "APEX UI · 3D TYPE · ", radius = 9, speed = 30, tilt = -14, fontSize = 2, color = "currentColor", accentColor = "#a3e635", className = "" }) => {
     const reduced = useReducedMotion();
+    const box = useRef(null);
     const ring = useRef(null);
+    const fit = useRef(1);
     const letters = useRef([]);
     const angle = useRef(0);
     const vel = useRef(0);
@@ -17,13 +20,24 @@ const TextRing3D = ({ text = "APEX UI · 3D TYPE · ", radius = 9, speed = 30, t
     const chars = Array.from(text);
     const step = 360 / chars.length;
 
+    useEffect(() => {
+        const el = box.current;
+        const ro = new ResizeObserver(() => {
+            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            const want = radius * 2.4 * rem;
+            fit.current = Math.min(1, el.getBoundingClientRect().width / want);
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [radius]);
+
     useAnimationFrame((_, delta) => {
         const dt = Math.min(0.05, delta / 1000);
         if (!drag.current) {
             vel.current *= 0.95;
             angle.current += (reduced ? 0 : speed) * dt + vel.current * dt;
         }
-        if (ring.current) ring.current.style.transform = `rotateX(${tilt}deg) rotateY(${-angle.current}deg)`;
+        if (ring.current) ring.current.style.transform = `scale(${fit.current}) rotateX(${tilt}deg) rotateY(${-angle.current}deg)`;
         letters.current.forEach((el, i) => {
             if (!el) return;
             // How much this letter faces the viewer (1 front, -1 back).
@@ -35,6 +49,7 @@ const TextRing3D = ({ text = "APEX UI · 3D TYPE · ", radius = 9, speed = 30, t
 
     return (
         <div
+            ref={box}
             className={`grid cursor-grab touch-none select-none place-items-center active:cursor-grabbing [perspective:900px] ${className}`}
             style={{ width: `${radius * 2.4}rem`, maxWidth: "100%", height: `${fontSize * 3.2 + 4}rem`, color }}
             onPointerDown={(e) => {

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

@@ -0,0 +1,215 @@
+/* eslint-disable react-refresh/only-export-components -- the hook and helpers ship with the component on purpose */
+import React, { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { flushSync } from "react-dom";
+import { AnimatePresence, motion } from "framer-motion";
+import { applyTheme, defaultThemes } from "./themes.js";
+
+/*
+ * Theme Switcher: a palette button that opens a grid of colour themes. Picking
+ * one reveals it with a soft circle growing from the swatch you clicked (View
+ * Transitions API), and every component calling useTheme stays in sync.
+ *
+ * Props: themes = defaultThemes, placement = "down" | "up", align = "right" |
+ * "left", label (text on the trigger; without it the trigger is a round icon
+ * button), storageKey = "theme", target (element or ref to theme instead of
+ * <html>, e.g. one preview box), className, buttonClassName.
+ *
+ * Hook: const [themeId, setTheme] = useTheme(themes, { storageKey, defaultTheme });
+ *       setTheme("grape", event.currentTarget) reveals from that element.
+ */
+
+export { defaultThemes, applyTheme, themeScript } from "./themes.js";
+
+const REVEAL_CSS = `@property --reveal { syntax: '<length>'; inherits: false; initial-value: 0px; }
+@keyframes theme-reveal { from { --reveal: -10vmax; } to { --reveal: 160vmax; } }
+html[data-theme-switching]::view-transition-old(root) { animation: none; }
+html[data-theme-switching]::view-transition-new(root) {
+  mix-blend-mode: normal;
+  mask-image: radial-gradient(circle at var(--reveal-x, 100%) var(--reveal-y, 0px), #000 var(--reveal), transparent calc(var(--reveal) + 10vmax));
+  animation: theme-reveal 0.9s cubic-bezier(0.65, 0, 0.35, 1) both;
+}`;
+
+const injectCss = () => {
+    if (typeof document === "undefined" || document.getElementById("apex-theme-reveal")) return;
+    const style = document.createElement("style");
+    style.id = "apex-theme-reveal";
+    style.textContent = REVEAL_CSS;
+    document.head.appendChild(style);
+};
+
+const read = (key) => {
+    try {
+        return localStorage.getItem(key);
+    } catch {
+        return null;
+    }
+};
+const write = (key, value) => {
+    try {
+        localStorage.setItem(key, value);
+    } catch {
+        /* storage blocked: the theme still applies for this visit */
+    }
+};
+
+// One small store per storage key, so every useTheme with that key shares state.
+const stores = new Map();
+function storeFor(key, themes, defaultTheme) {
+    if (stores.has(key)) return stores.get(key);
+    const prefersDark = typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches;
+    const saved = read(key);
+    const initial = (themes.find((x) => x.id === saved) ?? themes.find((x) => x.id === defaultTheme) ?? themes.find((x) => x.scheme === (prefersDark ? "dark" : "light")) ?? themes[0])?.id;
+    const subs = new Set();
+    const store = {
+        id: initial,
+        get: () => store.id,
+        subscribe: (fn) => {
+            subs.add(fn);
+            return () => subs.delete(fn);
+        },
+        set: (id) => {
+            store.id = id;
+            subs.forEach((fn) => fn());
+        },
+    };
+    stores.set(key, store);
+    return store;
+}
+
+export function useTheme(themes = defaultThemes, { storageKey = "theme", defaultTheme, target } = {}) {
+    const store = storeFor(storageKey, themes, defaultTheme);
+    const id = useSyncExternalStore(store.subscribe, store.get, store.get);
+    const rootEl = () => target?.current ?? (target instanceof Element ? target : null) ?? document.documentElement;
+
+    useEffect(() => {
+        injectCss();
+        applyTheme(themes.find((x) => x.id === store.get()), rootEl());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [themes, store, id]);
+
+    const setTheme = (next, origin) => {
+        const theme = themes.find((x) => x.id === next);
+        if (!theme || next === store.get()) return;
+        write(storageKey, next);
+        const commit = () => {
+            applyTheme(theme, rootEl());
+            flushSync(() => store.set(next));
+        };
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        if (!document.startViewTransition || reduced) {
+            commit();
+            return;
+        }
+        const root = document.documentElement;
+        if (origin?.getBoundingClientRect) {
+            const r = origin.getBoundingClientRect();
+            root.style.setProperty("--reveal-x", `${r.left + r.width / 2}px`);
+            root.style.setProperty("--reveal-y", `${r.top + r.height / 2}px`);
+        } else {
+            root.style.setProperty("--reveal-x", "100%");
+            root.style.setProperty("--reveal-y", "0px");
+        }
+        root.setAttribute("data-theme-switching", "");
+        const transition = document.startViewTransition(commit);
+        transition.ready.catch(() => {});
+        transition.finished.catch(() => {}).finally(() => root.removeAttribute("data-theme-switching"));
+    };
+
+    return [id, setTheme];
+}
+
+const Palette = () => (
+    <svg viewBox="0 0 24 24" className="h-[18px] w-[18px]" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+        <path d="M12 22a10 10 0 1 1 10-10c0 2.8-2.2 4-4 4h-1.8a2 2 0 0 0-1.5 3.3A1.6 1.6 0 0 1 12 22z" />
+        <circle cx="7.5" cy="10.5" r="1" fill="currentColor" />
+        <circle cx="10.5" cy="6.5" r="1" fill="currentColor" />
+        <circle cx="15.5" cy="7.5" r="1" fill="currentColor" />
+    </svg>
+);
+
+const ThemeSwitcher = ({ themes = defaultThemes, placement = "down", align = "right", label, storageKey = "theme", target, className = "", buttonClassName = "" }) => {
+    const [id, setTheme] = useTheme(themes, { storageKey, target });
+    const [open, setOpen] = useState(false);
+    const root = useRef(null);
+    const current = themes.find((x) => x.id === id) ?? themes[0];
+    const up = placement === "up";
+
+    useEffect(() => {
+        if (!open) return undefined;
+        const down = (e) => !root.current?.contains(e.target) && setOpen(false);
+        const key = (e) => e.key === "Escape" && setOpen(false);
+        document.addEventListener("pointerdown", down);
+        document.addEventListener("keydown", key);
+        return () => {
+            document.removeEventListener("pointerdown", down);
+            document.removeEventListener("keydown", key);
+        };
+    }, [open]);
+
+    return (
+        <div ref={root} className={`relative inline-block ${className}`}>
+            <button
+                type="button"
+                aria-label="Choose colour theme"
+                aria-haspopup="true"
+                aria-expanded={open}
+                onClick={() => setOpen((o) => !o)}
+                className={`relative inline-flex items-center justify-center gap-2 border border-[var(--line)] bg-[var(--surface)] text-[var(--ink)] transition-colors hover:border-[var(--accent)] ${label ? "h-9 rounded-full px-3.5 text-sm font-medium" : "h-9 w-9 rounded-full"} ${buttonClassName}`}
+            >
+                <Palette />
+                {label && <span>{label}</span>}
+                <span aria-hidden="true" className="absolute right-0.5 top-0.5 h-2 w-2 rounded-full ring-2 ring-[var(--surface)]" style={{ background: current?.vars["--accent"] }} />
+            </button>
+            <AnimatePresence>
+                {open && (
+                    <motion.div
+                        role="dialog"
+                        aria-label="Colour themes"
+                        initial={{ opacity: 0, y: up ? 8 : -8, scale: 0.96 }}
+                        animate={{ opacity: 1, y: 0, scale: 1 }}
+                        exit={{ opacity: 0, y: up ? 8 : -8, scale: 0.96 }}
+                        transition={{ type: "spring", stiffness: 380, damping: 28 }}
+                        className={`absolute z-50 w-[17.5rem] max-w-[calc(100vw-2rem)] rounded-2xl border border-[var(--line)] bg-[var(--surface)] p-3 text-[var(--ink)] shadow-[0_24px_60px_-16px_rgba(0,0,0,0.35)] ${up ? "bottom-full mb-2" : "top-full mt-2"} ${align === "left" ? "left-0" : "right-0"}`}
+                        style={{ transformOrigin: `${up ? "bottom" : "top"} ${align === "left" ? "left" : "right"}` }}
+                    >
+                        <p className="mb-2.5 px-1 font-mono text-[0.65rem] uppercase tracking-[0.16em] text-[var(--muted)]">Pick a colour vibe</p>
+                        <div className="grid grid-cols-2 gap-1.5">
+                            {themes.map((theme, i) => {
+                                const active = theme.id === id;
+                                return (
+                                    <motion.button
+                                        key={theme.id}
+                                        type="button"
+                                        aria-pressed={active}
+                                        initial={{ y: 6 }}
+                                        animate={{ y: 0 }}
+                                        transition={{ delay: 0.03 * i, type: "spring", stiffness: 380, damping: 28 }}
+                                        onClick={(e) => {
+                                            setTheme(theme.id, e.currentTarget.querySelector("[data-swatch]"));
+                                            setOpen(false);
+                                        }}
+                                        className={`relative flex items-center gap-2.5 rounded-xl py-2 pl-2 pr-5 text-left text-[0.82rem] font-medium transition-colors hover:bg-[var(--bg)] ${active ? "bg-[var(--bg)]" : ""}`}
+                                        style={{ animation: `apex-theme-in 240ms ease-out ${30 * i}ms backwards` }}
+                                    >
+                                        <span data-swatch="" className="grid h-7 w-7 shrink-0 place-items-center rounded-full border border-[var(--line)]" style={{ background: theme.vars["--bg"] }}>
+                                            <span className="h-3 w-3 rounded-full" style={{ background: theme.vars["--accent"] }} />
+                                        </span>
+                                        <span className="flex-1 truncate">{theme.name}</span>
+                                        {active && (
+                                            <svg viewBox="0 0 24 24" className="absolute right-1.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-[var(--accent)]" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                                                <path d="M5 12l5 5L20 7" />
+                                            </svg>
+                                        )}
+                                    </motion.button>
+                                );
+                            })}
+                        </div>
+                        <style>{"@keyframes apex-theme-in{from{opacity:0}to{opacity:1}}"}</style>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+};
+
+export default ThemeSwitcher;

package/dist/ApexUI-Kit/templates/ThemeSwitcher/themes.js

@@ -0,0 +1,38 @@
+/*
+ * Default themes for ThemeSwitcher, plus helpers to apply one and to inline
+ * a no-flash script in index.html. Each theme sets seven CSS variables on
+ * <html>: --bg, --surface, --ink, --muted, --line, --accent, --accent-ink.
+ */
+
+const t = (id, name, scheme, bg, surface, ink, muted, line, accent, accentInk) => ({
+    id,
+    name,
+    scheme,
+    vars: { "--bg": bg, "--surface": surface, "--ink": ink, "--muted": muted, "--line": line, "--accent": accent, "--accent-ink": accentInk },
+});
+
+export const defaultThemes = [
+    t("sunrise", "Sunrise", "light", "#f4f2ed", "#ffffff", "#121110", "#6f6b64", "rgb(18 17 16 / .12)", "#ff5b1f", "#ffffff"),
+    t("ember", "Ember", "dark", "#0e0d0c", "#171615", "#f1efe9", "#9a958c", "rgb(241 239 233 / .12)", "#ff7a3d", "#120a05"),
+    t("paper", "Paper", "light", "#fafaf7", "#ffffff", "#111111", "#6b6b66", "rgb(17 17 17 / .12)", "#111111", "#fafaf7"),
+    t("noir", "Noir", "dark", "#0c0c0c", "#161616", "#f5f5f2", "#8f8f8a", "rgb(245 245 242 / .12)", "#f5f5f2", "#0c0c0c"),
+    t("meadow", "Meadow", "light", "#f2f7ef", "#ffffff", "#10200f", "#5d6f5a", "rgb(16 32 15 / .12)", "#2fb562", "#ffffff"),
+    t("matrix", "Matrix", "dark", "#07110a", "#0d1a11", "#d7f5dd", "#6f9a78", "rgb(215 245 221 / .12)", "#4ade80", "#04130a"),
+    t("ocean", "Ocean", "light", "#eef3fa", "#ffffff", "#0c1a2b", "#5b6b80", "rgb(12 26 43 / .12)", "#2563eb", "#ffffff"),
+    t("grape", "Grape", "dark", "#0f0b1a", "#181229", "#ece8f7", "#9890b0", "rgb(236 232 247 / .12)", "#a78bfa", "#140d24"),
+];
+
+export function applyTheme(theme, root = typeof document !== "undefined" ? document.documentElement : null) {
+    if (!theme || !root) return;
+    Object.entries(theme.vars).forEach(([k, v]) => root.style.setProperty(k, v));
+    root.setAttribute("data-theme", theme.id);
+    root.setAttribute("data-scheme", theme.scheme);
+    root.style.colorScheme = theme.scheme;
+}
+
+// A string to inline in <head> (before your app script) so the saved theme
+// is applied before React loads: no flash of the wrong colours.
+export function themeScript(storageKey = "theme", themes = defaultThemes) {
+    const data = JSON.stringify(themes.map(({ id, scheme, vars }) => ({ id, scheme, vars })));
+    return `(function(){try{var T=${data};var id=localStorage.getItem(${JSON.stringify(storageKey)});var t=T.find(function(x){return x.id===id});if(!t)return;var r=document.documentElement;for(var k in t.vars)r.style.setProperty(k,t.vars[k]);r.setAttribute("data-theme",t.id);r.setAttribute("data-scheme",t.scheme);r.style.colorScheme=t.scheme;}catch(e){}})();`;
+}

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

@@ -66,6 +66,7 @@ const ToastStack = forwardRef(function ToastStack({ position = "bottom-right", d
             onPointerLeave={() => setHovered(false)}
             className={`${contained ? "absolute" : "fixed"} z-[200] flex w-[min(22rem,calc(100%-2rem))] flex-col ${place} ${className}`}
         >
+            <style>{"@keyframes apex-toast-in{from{opacity:0}to{opacity:1}}"}</style>
             <AnimatePresence initial={false}>
                 {toasts.map((t, i) => {
                     const fromEnd = toasts.length - 1 - i;
@@ -75,27 +76,34 @@ const ToastStack = forwardRef(function ToastStack({ position = "bottom-right", d
                     return (
                         <motion.li
                             key={t.id}
-                            layout
                             drag="x"
                             dragConstraints={{ left: 0, right: 0 }}
                             dragElastic={0.6}
                             onDragEnd={(_, info) => Math.abs(info.offset.x) > 90 && dismiss(t.id)}
-                            initial={{ opacity: 0, y: top ? -30 : 30, scale: 0.94 }}
-                            animate={{ opacity: fromEnd > 2 && !hovered ? 0 : 1, y: top ? offset : -offset, scale: hovered ? 1 : 1 - fromEnd * 0.05 }}
-                            exit={{ opacity: 0, scale: 0.9, transition: { duration: 0.18 } }}
+                            initial={{ y: top ? -30 : 30, scale: 0.94 }}
+                            animate={{ y: top ? offset : -offset, scale: hovered ? 1 : 1 - fromEnd * 0.05 }}
+                            exit={{ scale: 0.9, transition: { duration: 0.18 } }}
                             transition={{ type: "spring", stiffness: 380, damping: 32 }}
                             className={`absolute w-full cursor-grab touch-pan-y list-none active:cursor-grabbing ${top ? "top-0" : "bottom-0"}`}
                             style={{ zIndex: i }}
                         >
-                            <div className={`flex items-start gap-3 rounded-2xl border p-3.5 pr-9 shadow-[0_18px_40px_-18px_rgba(0,0,0,0.5)] backdrop-blur ${dark ? "border-white/10 bg-neutral-900/95 text-white" : "border-black/10 bg-white/95 text-neutral-900"}`}>
-                                <Icon className="mt-0.5 h-5 w-5 shrink-0" style={{ color }} />
-                                <div className="min-w-0">
-                                    <p className="text-[0.88rem] font-semibold">{t.title}</p>
-                                    {t.description && <p className={`mt-0.5 text-[0.8rem] ${dark ? "text-white/60" : "text-neutral-500"}`}>{t.description}</p>}
-                                </div>
-                                <button type="button" aria-label="Dismiss" onClick={() => dismiss(t.id)} className={`absolute right-2.5 top-2.5 grid h-6 w-6 place-items-center rounded-full ${dark ? "text-white/50 hover:bg-white/10 hover:text-white" : "text-neutral-400 hover:bg-black/5 hover:text-neutral-900"}`}>
-                                    <X className="h-3.5 w-3.5" />
-                                </button>
+                            {/* Cards deeper than three fade out of the collapsed stack. */}
+                            <div className="transition-opacity duration-300" style={{ opacity: fromEnd > 2 && !hovered ? 0 : 1 }}>
+                                {/* The fade-in is a CSS animation: framer hands opacity to the browser
+                                    and, when that finishes, can show the start value for one frame. */}
+                                <motion.div
+                                    exit={{ opacity: 0, transition: { duration: 0.18 } }}
+                                    style={{ animation: "apex-toast-in 0.22s ease-out backwards" }}
+                                    className={`relative flex items-start gap-3 rounded-2xl border p-3.5 pr-9 shadow-[0_18px_40px_-18px_rgba(0,0,0,0.5)] backdrop-blur ${dark ? "border-white/10 bg-neutral-900/95 text-white" : "border-black/10 bg-white/95 text-neutral-900"}`}>
+                                    <Icon className="mt-0.5 h-5 w-5 shrink-0" style={{ color }} />
+                                    <div className="min-w-0">
+                                        <p className="text-[0.88rem] font-semibold">{t.title}</p>
+                                        {t.description && <p className={`mt-0.5 text-[0.8rem] ${dark ? "text-white/60" : "text-neutral-500"}`}>{t.description}</p>}
+                                    </div>
+                                    <button type="button" aria-label="Dismiss" onClick={() => dismiss(t.id)} className={`absolute right-2.5 top-2.5 grid h-6 w-6 place-items-center rounded-full ${dark ? "text-white/50 hover:bg-white/10 hover:text-white" : "text-neutral-400 hover:bg-black/5 hover:text-neutral-900"}`}>
+                                        <X className="h-3.5 w-3.5" />
+                                    </button>
+                                </motion.div>
                             </div>
                         </motion.li>
                     );

package/dist/cli/index.js

@@ -131,6 +131,15 @@ const componentMap = {
     "scroll-stack": "ScrollStack",
     "sunrise-background": "SunriseBackground",
     "horizon-glow": "HorizonGlow",
+    "glass-lens": "GlassLens",
+    "dither-waves": "DitherWaves",
+    "infinite-canvas": "InfiniteCanvas",
+    "image-accordion": "ImageAccordion",
+    "orbit-icons": "OrbitIcons",
+    "command-palette": "CommandPalette",
+    "crossed-marquee": "CrossedMarquee",
+    "theme-switcher": "ThemeSwitcher",
+    "liquid-glass": "LiquidGlass",
     "water-drop-reveal": "MaskView",
 };
 // Packages only some components need, installed on top of the shared ones.
@@ -140,6 +149,7 @@ const extraDeps = {
     SmokeBackground: ["ogl"],
     LiquidGradient: ["ogl"],
     WebGLCarousel: ["ogl"],
+    CrossedMarquee: ["simple-icons"],
 };
 async function main() {
     const args = process.argv.slice(2);

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "apex-ui-kit",
-  "version": "2.7.0",
+  "version": "2.9.0",
   "license": "MIT",
-  "description": "107 free, animated UI components for React, styled with Tailwind CSS. Add any of them with one CLI command.",
+  "description": "116 free, animated UI components for React, styled with Tailwind CSS. Add any of them with one CLI command.",
   "homepage": "https://apex-ui.in",
   "repository": {
     "type": "git",