apex-ui-kit 2.6.0 → 2.8.0

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

@@ -0,0 +1,88 @@
+import React, { Children, useLayoutEffect, useRef } from "react";
+
+/*
+ * Scroll Stack: cards pin one after another as you scroll and pile up. A
+ * 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).
+ */
+
+export const ScrollStackItem = ({ children, className = "", style }) => (
+    <div className={`relative h-[18rem] w-full origin-top overflow-hidden rounded-[1.75rem] p-8 shadow-[0_24px_48px_-24px_rgba(0,0,0,0.45)] will-change-transform ${className}`} style={style}>
+        {children}
+        <span data-stack-shade="" aria-hidden="true" className="pointer-events-none absolute inset-0 rounded-[inherit] bg-black opacity-0" />
+    </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 root = useRef(null);
+    const slots = useRef([]);
+    const items = Children.toArray(children);
+
+    useLayoutEffect(() => {
+        const box = root.current;
+        const scroller = useWindowScroll ? window : box;
+        let raf = 0;
+        const update = () => {
+            raf = 0;
+            const els = slots.current.filter(Boolean);
+            const viewTop = useWindowScroll ? 0 : box.getBoundingClientRect().top;
+            const rects = els.map((e) => e.getBoundingClientRect());
+            // How much each later card covers the one before it (0 to 1).
+            const depth = els.map(() => 0);
+            for (let j = 1; j < els.length; j++) {
+                const pinPrev = viewTop + top + (j - 1) * offset;
+                const startCover = pinPrev + rects[j - 1].height;
+                const span = Math.max(1, rects[j - 1].height - offset);
+                const cover = Math.min(1, Math.max(0, (startCover - rects[j].top) / span));
+                for (let i = 0; i < j; i++) depth[i] += cover;
+            }
+            els.forEach((slot, i) => {
+                const card = slot.firstElementChild;
+                if (!card) return;
+                const d = depth[i];
+                const scale = Math.max(minScale, 1 - d * scaleStep);
+                const lean = Math.min(1, d) * tilt;
+                card.style.transform = d > 0.001 ? `perspective(1000px) rotateX(${-lean}deg) scale(${scale.toFixed(4)})` : "";
+                card.style.filter = blur && d > 0.01 ? `blur(${(d * blur).toFixed(2)}px)` : "";
+                const shade = card.querySelector("[data-stack-shade]");
+                if (shade) shade.style.opacity = (1 - Math.pow(1 - dim, d)).toFixed(3);
+            });
+        };
+        const schedule = () => {
+            if (!raf) raf = requestAnimationFrame(update);
+        };
+        scroller.addEventListener("scroll", schedule, { passive: true });
+        window.addEventListener("resize", schedule);
+        const ro = new ResizeObserver(schedule);
+        ro.observe(box);
+        update();
+        return () => {
+            cancelAnimationFrame(raf);
+            scroller.removeEventListener("scroll", schedule);
+            window.removeEventListener("resize", schedule);
+            ro.disconnect();
+        };
+    }, [useWindowScroll, top, offset, scaleStep, minScale, dim, blur, tilt, items.length]);
+
+    return (
+        <div ref={root} className={`relative w-full ${useWindowScroll ? "" : "overflow-y-auto overscroll-contain"} ${className}`} style={useWindowScroll ? undefined : { height }}>
+            <div className="px-[clamp(1rem,6%,4rem)]" style={{ paddingTop: useWindowScroll ? 0 : top, paddingBottom: endSpace }}>
+                {items.map((child, i) => (
+                    <div
+                        key={i}
+                        ref={(e) => (slots.current[i] = e)}
+                        className="sticky"
+                        style={{ top: top + i * offset, marginTop: i ? gap : 0, zIndex: i + 1 }}
+                    >
+                        {child}
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default ScrollStack;

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

@@ -1,4 +1,4 @@
-import React, { useId, useRef, useState } from "react";
+import React, { useEffect, useId, useRef, useState } from "react";
 import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
 import { BarChart3, Bell, ChevronDown, FolderKanban, Home, Inbox, LifeBuoy, PanelLeftClose, PanelLeftOpen, Settings, Users } from "lucide-react";
 
@@ -61,6 +61,7 @@ const SidebarNav = ({
     user = { name: "Mohan Dalei", email: "mohan@apex-ui.in", avatar: "https://ik.imagekit.io/ny6yinyut/apexui/assets/captainamerica.png?tr=f-auto,q-80,w-96" },
     defaultActive = "home",
     defaultCollapsed = false,
+    autoCollapse = true,
     accentColor = "#a3e635",
     theme = "dark",
     onSelect,
@@ -73,6 +74,25 @@ const SidebarNav = ({
     const [open, setOpen] = useState(() => new Set(["projects"]));
     const [tip, setTip] = useState(null);
     const asideRef = useRef(null);
+    const userToggled = useRef(false);
+
+    // On narrow screens the full sidebar would squeeze the page, so it becomes
+    // an icon rail there and opens again when there is room, until the user
+    // picks a state with the toggle.
+    useEffect(() => {
+        const host = asideRef.current?.parentElement;
+        if (!autoCollapse || !host) return undefined;
+        let narrow = null;
+        const ro = new ResizeObserver(([entry]) => {
+            const now = entry.contentRect.width < 560;
+            if (now !== narrow) {
+                if (!userToggled.current && (now || narrow !== null)) setCollapsed(now || defaultCollapsed);
+                narrow = now;
+            }
+        });
+        ro.observe(host);
+        return () => ro.disconnect();
+    }, [autoCollapse, defaultCollapsed]);
 
     const select = (item) => {
         setActive(item.id);
@@ -159,6 +179,7 @@ const SidebarNav = ({
                     type="button"
                     aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
                     onClick={() => {
+                        userToggled.current = true;
                         setCollapsed((c) => !c);
                         setTip(null);
                     }}

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

@@ -0,0 +1,290 @@
+import React, { useEffect, useRef } from "react";
+import { Color, Mesh, OrthographicCamera, PlaneGeometry, Scene, ShaderMaterial, Vector2, WebGLRenderer } from "three";
+
+/*
+ * Sunrise Background: a sun rising out of the valley between two mountain
+ * ranges, drawn in one WebGL shader. The sky warms from night to dawn as it
+ * climbs, light rays fan out, the ridges catch a rim of light, mist glows in
+ * the valley and the stars fade. The mountains drift a little with the
+ * pointer. Put your hero content on top as children.
+ */
+
+const PRESETS = {
+    dawn: { sunColor: "#ffb15c", skyTop: "#1d2350", skyHorizon: "#ff7a59", mountainColor: "#140f24" },
+    golden: { sunColor: "#ffd36e", skyTop: "#2b3a67", skyHorizon: "#ffa94d", mountainColor: "#1b1420" },
+    dusk: { sunColor: "#ff8fb1", skyTop: "#1a1033", skyHorizon: "#c86dd7", mountainColor: "#100a1c" },
+    arctic: { sunColor: "#b8f3ff", skyTop: "#0c1f33", skyHorizon: "#5fd4e6", mountainColor: "#08141f" },
+};
+
+const VERT = `void main(){ gl_Position = vec4(position.xy, 0.0, 1.0); }`;
+
+const FRAG = `
+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;
+
+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); }
+float n1(float x){ float i = floor(x); float f = fract(x); return mix(h1(i), h1(i + 1.0), f * f * (3.0 - 2.0 * f)); }
+float n2(vec2 p){
+  vec2 i = floor(p); vec2 f = fract(p); vec2 u = f * f * (3.0 - 2.0 * f);
+  return mix(mix(h2(i), h2(i + vec2(1, 0)), u.x), mix(h2(i + vec2(0, 1)), h2(i + vec2(1, 1)), u.x), u.y);
+}
+// Craggy ridge detail: a few octaves of folded noise.
+float crag(float x){
+  float v = 0.0; float a = 0.5;
+  for (int i = 0; i < 5; i++) { v += a * (1.0 - abs(n1(x) * 2.0 - 1.0)); x *= 2.03; a *= 0.5; }
+  return v;
+}
+// Two peaks with a valley between them, plus detail.
+float range(float x, float c, float w, float peak, float base, float amp, float freq, float seed){
+  float tl = clamp(1.0 - abs(x + c) / w, 0.0, 1.0);
+  float tr = clamp(1.0 - abs(x - c) / w, 0.0, 1.0);
+  float sl = mix(tl, tl * tl * (3.0 - 2.0 * tl), 0.45);
+  float sr = mix(tr, tr * tr * (3.0 - 2.0 * tr), 0.45);
+  float s = max(sl, sr);
+  return base + s * peak + (crag(x * freq + seed) - 0.45) * amp * (0.35 + s);
+}
+
+void main(){
+  vec2 uv = gl_FragCoord.xy / uRes;
+  float asp = uRes.x / uRes.y;
+  // x normalised to the half width (clamped so phones still show both slopes).
+  float xn = (uv.x - 0.5) * asp / (0.5 * clamp(asp, 0.7, 2.2));
+  float y = uv.y;
+  float rise = uRise;
+
+  vec2 sp = vec2(0.0, mix(-0.16, uSunHeight, rise));
+  vec2 q = vec2((uv.x - 0.5) * asp, y);
+  float d = length(q - sp);
+
+  // Sky: night blue warming toward the horizon as the sun climbs.
+  vec3 top = mix(uSkyTop * 0.28, uSkyTop, smoothstep(0.0, 0.8, rise));
+  vec3 low = mix(uSkyTop * 0.5, uSkyLow, smoothstep(0.05, 0.9, rise));
+  vec3 col = mix(low, top, smoothstep(0.0, 0.9, y + 0.15 * (1.0 - rise)));
+  float warm = exp(-max(y - sp.y * 0.6, 0.0) * 3.2) * exp(-abs(q.x) * 0.9);
+  col += uSun * warm * (0.15 + 0.75 * rise);
+
+  // Stars fade out with the dawn.
+  vec2 cell = floor(gl_FragCoord.xy / 3.0);
+  float star = step(0.9965, h2(cell)) * (0.6 + 0.4 * sin(uTime * 2.0 + h2(cell + 7.0) * 30.0));
+  col += star * uStars * (1.0 - smoothstep(0.1, 0.75, rise)) * smoothstep(0.35, 0.9, y);
+
+  // Sun disc, halo and rays.
+  float r = uSunSize;
+  float disc = smoothstep(r + 0.003, r - 0.003, d);
+  vec3 sunCore = mix(uSun, vec3(1.0, 0.98, 0.92), 0.65);
+  col = mix(col, sunCore, disc);
+  col += uSun * (exp(-d * 9.0 / (r * 10.0)) * 0.55 + exp(-d * 2.2) * 0.35) * (0.4 + 0.6 * rise);
+  float ang = atan(q.x - sp.x, q.y - sp.y);
+  float beam = n2(vec2(ang * 7.0, uTime * 0.12)) * 0.7 + n2(vec2(ang * 17.0, -uTime * 0.07)) * 0.3;
+  float rays = smoothstep(0.45, 0.95, beam) * exp(-d * 1.6) * smoothstep(r, r * 2.5, d);
+  col += uSun * rays * uRays * 0.55 * rise;
+
+  // Mountains, far to near. Each layer drifts with the pointer by depth.
+  float mx = uMouse.x; float my = uMouse.y;
+  float hf = range(xn + mx * 0.012, 0.6, 0.85, 0.36, 0.16, 0.06, 2.6, 3.0) + my * 0.004;
+  float hm = range(xn + mx * 0.028, 0.42, 0.78, 0.33, 0.08, 0.07, 3.8, 11.0) + my * 0.008;
+  float hn = range(xn + mx * 0.05, 0.66, 0.86, 0.30, -0.02, 0.06, 5.2, 27.0) + my * 0.014;
+
+  float toSun = exp(-abs(xn) * 1.4) * rise;
+  vec3 haze = mix(low, uSun, 0.35 + 0.3 * rise);
+
+  // Far range: soft and hazy.
+  float mf = smoothstep(hf + 0.0025, hf - 0.0025, y);
+  vec3 cf = mix(uMount, haze, 0.62 * uHaze + 0.1);
+  cf += uSun * exp(-max(hf - y, 0.0) * 40.0) * toSun * 0.5;
+  col = mix(col, cf, mf);
+
+  // Valley mist lit by the sun.
+  float mist = exp(-abs(y - (hm - 0.03)) * 9.0) * exp(-abs(xn) * 1.1) * uHaze;
+  col += uSun * mist * 0.35 * rise;
+
+  // Middle range.
+  float mm = smoothstep(hm + 0.002, hm - 0.002, y);
+  vec3 cm = mix(uMount, haze, 0.32 * uHaze + 0.04);
+  cm *= 0.75 + 0.35 * smoothstep(hm - 0.35, hm, y);
+  cm += uSun * exp(-max(hm - y, 0.0) * 70.0) * toSun * 0.7;
+  col = mix(col, cm, mm);
+
+  // Near range: darkest, with a sharp rim of light on the ridge.
+  float mn = smoothstep(hn + 0.0018, hn - 0.0018, y);
+  vec3 cn = uMount * (0.65 + 0.35 * smoothstep(hn - 0.3, hn, y));
+  cn += uSun * exp(-max(hn - y, 0.0) * 120.0) * toSun * 0.9;
+  col = mix(col, cn, mn);
+
+  // 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;
+
+  // Gentle tone curve and dither (no banding in the gradients).
+  col = col / (1.0 + col * 0.35);
+  col += (h2(gl_FragCoord.xy + fract(uTime) * 61.0) - 0.5) / 255.0;
+  gl_FragColor = vec4(col, 1.0);
+}`;
+
+const SunriseBackground = ({
+    preset = "dawn",
+    sunColor,
+    skyTop,
+    skyHorizon,
+    mountainColor,
+    duration = 6,
+    autoRise = true,
+    sunHeight = 0.36,
+    sunSize = 0.075,
+    rays = 1,
+    stars = 1,
+    haze = 1,
+    speed = 1,
+    interactive = true,
+    replay = 0,
+    className = "",
+    children,
+}) => {
+    const wrap = useRef(null);
+    const live = useRef({});
+    const p = PRESETS[preset] ?? PRESETS.dawn;
+    live.current = {
+        sun: sunColor ?? p.sunColor,
+        top: skyTop ?? p.skyTop,
+        low: skyHorizon ?? p.skyHorizon,
+        mount: mountainColor ?? p.mountainColor,
+        duration,
+        autoRise,
+        sunHeight,
+        sunSize,
+        rays,
+        stars,
+        haze,
+        speed,
+        interactive,
+    };
+    const rise = useRef({ start: 0 });
+
+    // Replaying (or turning autoRise back on) starts the climb again.
+    useEffect(() => {
+        rise.current.start = performance.now();
+    }, [replay, autoRise]);
+
+    useEffect(() => {
+        const el = wrap.current;
+        const renderer = new WebGLRenderer({ antialias: false, alpha: false, powerPreference: "high-performance" });
+        renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.75));
+        Object.assign(renderer.domElement.style, { position: "absolute", inset: "0", width: "100%", height: "100%", display: "block" });
+        el.prepend(renderer.domElement);
+        const scene = new Scene();
+        const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+        const u = {
+            uRes: { value: new Vector2(1, 1) },
+            uTime: { value: 0 },
+            uRise: { value: 0 },
+            uMouse: { value: new Vector2() },
+            uSun: { value: new Color() },
+            uSkyTop: { value: new Color() },
+            uSkyLow: { value: new Color() },
+            uMount: { value: new Color() },
+            uRays: { value: 1 },
+            uStars: { value: 1 },
+            uHaze: { value: 1 },
+            uSunSize: { value: 0.075 },
+            uSunHeight: { value: 0.3 },
+        };
+        const material = new ShaderMaterial({ vertexShader: VERT, fragmentShader: FRAG, uniforms: u, depthTest: false, depthWrite: false });
+        const geometry = new PlaneGeometry(2, 2);
+        scene.add(new Mesh(geometry, material));
+
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        const mouse = { x: 0, y: 0, tx: 0, ty: 0 };
+        let raf = 0;
+        let last = 0;
+        let time = 0;
+        let visible = true;
+
+        const fit = () => {
+            const { width, height } = el.getBoundingClientRect();
+            if (!width || !height) return;
+            renderer.setSize(width, height, false);
+            renderer.getDrawingBufferSize(u.uRes.value);
+            if (!raf) draw(performance.now());
+        };
+        const draw = (now) => {
+            const o = live.current;
+            const dt = last ? Math.min(0.05, (now - last) / 1000) : 1 / 60;
+            last = now;
+            time += dt * o.speed;
+            const t = o.autoRise && !reduced ? Math.min(1, (now - rise.current.start) / (Math.max(0.1, o.duration) * 1000)) : 1;
+            // Ease out: quick at first, then a slow settle at the top.
+            u.uRise.value = 1 - Math.pow(1 - t, 3);
+            const k = 1 - Math.exp(-dt / 0.35);
+            mouse.x += ((o.interactive ? mouse.tx : 0) - mouse.x) * k;
+            mouse.y += ((o.interactive ? mouse.ty : 0) - mouse.y) * k;
+            u.uMouse.value.set(mouse.x, mouse.y);
+            u.uTime.value = time;
+            u.uSun.value.set(o.sun);
+            u.uSkyTop.value.set(o.top);
+            u.uSkyLow.value.set(o.low);
+            u.uMount.value.set(o.mount);
+            u.uRays.value = o.rays;
+            u.uStars.value = o.stars;
+            u.uHaze.value = o.haze;
+            u.uSunSize.value = o.sunSize;
+            u.uSunHeight.value = o.sunHeight;
+            renderer.render(scene, camera);
+        };
+        const loop = (now) => {
+            raf = 0;
+            draw(now);
+            if (visible && !reduced) raf = requestAnimationFrame(loop);
+        };
+        const start = () => {
+            if (!raf && visible && !reduced) {
+                last = 0;
+                raf = requestAnimationFrame(loop);
+            }
+        };
+
+        const onMove = (e) => {
+            const r = el.getBoundingClientRect();
+            mouse.tx = ((e.clientX - r.left) / r.width) * 2 - 1;
+            mouse.ty = ((e.clientY - r.top) / r.height) * 2 - 1;
+        };
+        const onLeave = () => {
+            mouse.tx = 0;
+            mouse.ty = 0;
+        };
+        el.addEventListener("pointermove", onMove);
+        el.addEventListener("pointerleave", onLeave);
+        const ro = new ResizeObserver(fit);
+        ro.observe(el);
+        const io = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            if (visible) start();
+        });
+        io.observe(el);
+        fit();
+        start();
+
+        return () => {
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            io.disconnect();
+            el.removeEventListener("pointermove", onMove);
+            el.removeEventListener("pointerleave", onLeave);
+            geometry.dispose();
+            material.dispose();
+            renderer.dispose();
+            renderer.forceContextLoss();
+            renderer.domElement.remove();
+        };
+    }, []);
+
+    return (
+        <div ref={wrap} className={`relative h-full w-full overflow-hidden bg-[#0b0b18] ${className}`}>
+            {children && <div className="relative z-10 h-full w-full">{children}</div>}
+        </div>
+    );
+};
+
+export default SunriseBackground;

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) => {