apex-ui-kit 2.2.0 → 2.3.1

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

@@ -0,0 +1,312 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+
+/*
+ * Gooey Nav: the active pill is drawn in WebGL as a metaball. A fragment
+ * shader smooth-unions a capsule (the pill) with a handful of droplets, so
+ * they genuinely melt into each other. When you switch links the pill's
+ * leading edge races ahead and the trailing edge catches up (it stretches,
+ * thins, then snaps back) and droplets burst out and get pulled back in.
+ * Labels are plain HTML on top, so they stay crisp and accessible. Falls
+ * back to a CSS pill without WebGL.
+ */
+
+const DEFAULT_ITEMS = [
+    { label: "Home", href: "#" },
+    { label: "Components", href: "#" },
+    { label: "Templates", href: "#" },
+    { label: "Docs", href: "#" },
+];
+
+const MAX_DROPS = 14;
+const PAD = 22; // canvas bleed around the bar, for drops and glow (px)
+
+const VERT = `
+attribute vec2 aPos;
+void main() { gl_Position = vec4(aPos, 0.0, 1.0); }
+`;
+
+const FRAG = `
+precision highp float;
+uniform vec2 uRes;
+uniform float uDpr;
+uniform vec4 uPill;
+uniform vec4 uDrops[${MAX_DROPS}];
+uniform vec3 uColor;
+uniform float uGoo;
+uniform float uGlow;
+
+float sdCapsule(vec2 p, vec2 halfSize) {
+    float r = min(halfSize.x, halfSize.y);
+    vec2 q = abs(p) - halfSize + r;
+    return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r;
+}
+
+float smin(float a, float b, float k) {
+    float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
+    return mix(b, a, h) - k * h * (1.0 - h);
+}
+
+void main() {
+    // Pixel position in CSS px, origin top-left.
+    vec2 p = vec2(gl_FragCoord.x, uRes.y - gl_FragCoord.y) / uDpr;
+    vec2 c = uPill.xy + uPill.zw * 0.5;
+    float d = sdCapsule(p - c, uPill.zw * 0.5);
+    for (int i = 0; i < ${MAX_DROPS}; i++) {
+        vec4 dr = uDrops[i];
+        if (dr.z > 0.01) d = smin(d, length(p - dr.xy) - dr.z, uGoo);
+    }
+    float aa = 0.8;
+    float body = 1.0 - smoothstep(-aa, aa, d);
+    // Soft top highlight and darker bottom for a bit of volume.
+    float v = clamp((p.y - uPill.y) / max(uPill.w, 1.0), 0.0, 1.0);
+    vec3 col = uColor * (1.08 - 0.18 * v);
+    float rim = smoothstep(-3.0, 0.0, d) * body * 0.12;
+    col += rim;
+    float glow = exp(-max(d, 0.0) / 5.0) * uGlow * (1.0 - body);
+    float a = body + glow;
+    gl_FragColor = vec4(col * a, a);
+}
+`;
+
+const hexToRgb = (hex) => {
+    let h = String(hex).replace("#", "");
+    if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+    const n = parseInt(h.slice(0, 6), 16);
+    if (Number.isNaN(n)) return [0.64, 0.9, 0.21];
+    return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];
+};
+
+function createGL(canvas) {
+    const gl = canvas.getContext("webgl", { premultipliedAlpha: true, antialias: false, alpha: true });
+    if (!gl) return null;
+    const compile = (type, src) => {
+        const s = gl.createShader(type);
+        gl.shaderSource(s, src);
+        gl.compileShader(s);
+        return gl.getShaderParameter(s, gl.COMPILE_STATUS) ? s : null;
+    };
+    const vs = compile(gl.VERTEX_SHADER, VERT);
+    const fs = compile(gl.FRAGMENT_SHADER, FRAG);
+    if (!vs || !fs) return null;
+    const prog = gl.createProgram();
+    gl.attachShader(prog, vs);
+    gl.attachShader(prog, fs);
+    gl.linkProgram(prog);
+    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) return null;
+    gl.useProgram(prog);
+    const buf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+    const loc = gl.getAttribLocation(prog, "aPos");
+    gl.enableVertexAttribArray(loc);
+    gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+    const u = (n) => gl.getUniformLocation(prog, n);
+    return { gl, uRes: u("uRes"), uDpr: u("uDpr"), uPill: u("uPill"), uDrops: u("uDrops"), uColor: u("uColor"), uGoo: u("uGoo"), uGlow: u("uGlow") };
+}
+
+// One spring integration step.
+const step = (s, target, k, c, dt) => {
+    const a = k * (target - s.x) - c * s.v;
+    s.v += a * dt;
+    s.x += s.v * dt;
+};
+
+const GooeyNav = ({ items = DEFAULT_ITEMS, initialActive = 0, onChange, accentColor = "#a3e635", particleCount = 8, goo = 12, theme = "dark", className = "" }) => {
+    const [active, setActive] = useState(initialActive);
+    const [fallback, setFallback] = useState(false);
+    const bar = useRef(null);
+    const canvas = useRef(null);
+    const fallbackPill = useRef(null);
+    const links = useRef([]);
+    const sim = useRef(null);
+    const color = useRef(hexToRgb(accentColor));
+    const gooRef = useRef(goo);
+    const glowRef = useRef(theme === "light" ? 0 : 0.22);
+    const dark = theme !== "light";
+
+    useEffect(() => {
+        color.current = hexToRgb(accentColor);
+        gooRef.current = goo;
+        glowRef.current = theme === "light" ? 0 : 0.22;
+        if (sim.current) sim.current.dirty = true;
+    }, [accentColor, goo, theme]);
+
+    const measure = (i) => {
+        const el = links.current[i];
+        const b = bar.current;
+        if (!el || !b) return null;
+        const a = el.getBoundingClientRect();
+        const p = b.getBoundingClientRect();
+        return { l: a.left - p.left + PAD, r: a.right - p.left + PAD, t: a.top - p.top + PAD, h: a.height };
+    };
+
+    // Set up GL + simulation once.
+    useLayoutEffect(() => {
+        const cv = canvas.current;
+        const ctx = createGL(cv);
+        if (!ctx) setFallback(true);
+        const m = measure(active) ?? { l: 0, r: 0, t: 0, h: 0 };
+        const s = {
+            l: { x: m.l, v: 0 },
+            r: { x: m.r, v: 0 },
+            t: { x: m.t, v: 0 },
+            h: { x: m.h, v: 0 },
+            target: m,
+            activeIndex: active,
+            dir: 1,
+            drops: [],
+            dirty: true,
+            dpr: 1,
+        };
+        sim.current = s;
+
+        // Hold the element itself: the ref is cleared on unmount before cleanup runs.
+        const barEl = bar.current;
+        const resize = () => {
+            const r = barEl.getBoundingClientRect();
+            s.dpr = Math.min(window.devicePixelRatio || 1, 2);
+            const w = r.width + PAD * 2;
+            const h = r.height + PAD * 2;
+            cv.width = Math.round(w * s.dpr);
+            cv.height = Math.round(h * s.dpr);
+            cv.style.width = `${w}px`;
+            cv.style.height = `${h}px`;
+            const t = measure(s.activeIndex);
+            if (t) {
+                s.target = t;
+                s.l.x = t.l;
+                s.r.x = t.r;
+                s.t.x = t.t;
+                s.h.x = t.h;
+                s.l.v = s.r.v = s.t.v = s.h.v = 0;
+            }
+            s.dirty = true;
+        };
+        resize();
+        const ro = new ResizeObserver(resize);
+        ro.observe(barEl);
+
+        const dropData = new Float32Array(MAX_DROPS * 4);
+        let raf = 0;
+        let last = performance.now();
+        const frame = (now) => {
+            const dt = Math.min(0.033, (now - last) / 1000);
+            last = now;
+            const T = s.target;
+            // Leading edge is stiff, trailing edge is loose → stretch.
+            const lead = [520, 30];
+            const trail = [170, 17];
+            const [kl, cl] = s.dir > 0 ? trail : lead;
+            const [kr, cr] = s.dir > 0 ? lead : trail;
+            step(s.l, T.l, kl, cl, dt);
+            step(s.r, T.r, kr, cr, dt);
+            step(s.t, T.t, 400, 32, dt);
+            step(s.h, T.h, 400, 32, dt);
+
+            // Thin the pill while it is stretched (keeps the "volume").
+            const w = s.r.x - s.l.x;
+            const restW = T.r - T.l || 1;
+            const stretch = Math.max(0, w / restW - 1);
+            const h = s.h.x * (1 - Math.min(0.32, stretch * 0.35));
+            const top = s.t.x + (s.h.x - h) / 2;
+
+            // Droplets fly out, then a spring pulls them back to the pill centre.
+            const cx = (s.l.x + s.r.x) / 2;
+            const cy = top + h / 2;
+            s.drops = s.drops.filter((d) => (d.life -= dt) > 0);
+            for (const d of s.drops) {
+                d.vx += ((cx - d.x) * d.k - d.vx * 5) * dt;
+                d.vy += ((cy - d.y) * d.k - d.vy * 5) * dt;
+                d.x += d.vx * dt;
+                d.y += d.vy * dt;
+            }
+
+            const moving = s.drops.length > 0 || [s.l, s.r, s.t, s.h].some((q) => Math.abs(q.v) > 0.5) || Math.abs(s.l.x - T.l) > 0.3 || Math.abs(s.r.x - T.r) > 0.3;
+            if (moving || s.dirty) {
+                s.dirty = false;
+                if (ctx) {
+                    const { gl } = ctx;
+                    gl.viewport(0, 0, cv.width, cv.height);
+                    gl.clearColor(0, 0, 0, 0);
+                    gl.clear(gl.COLOR_BUFFER_BIT);
+                    gl.uniform2f(ctx.uRes, cv.width, cv.height);
+                    gl.uniform1f(ctx.uDpr, s.dpr);
+                    gl.uniform4f(ctx.uPill, s.l.x, top, Math.max(1, w), Math.max(1, h));
+                    dropData.fill(0);
+                    s.drops.slice(0, MAX_DROPS).forEach((d, i) => {
+                        const life = Math.max(0, d.life / d.max);
+                        dropData.set([d.x, d.y, d.r * Math.min(1, life * 1.6), 1], i * 4);
+                    });
+                    gl.uniform4fv(ctx.uDrops, dropData);
+                    gl.uniform3fv(ctx.uColor, color.current);
+                    gl.uniform1f(ctx.uGoo, gooRef.current);
+                    gl.uniform1f(ctx.uGlow, glowRef.current);
+                    gl.drawArrays(gl.TRIANGLES, 0, 3);
+                } else if (fallbackPill.current) {
+                    Object.assign(fallbackPill.current.style, { left: `${s.l.x - PAD}px`, top: `${top - PAD}px`, width: `${w}px`, height: `${h}px` });
+                }
+            }
+            raf = requestAnimationFrame(frame);
+        };
+        raf = requestAnimationFrame(frame);
+        return () => {
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            ctx?.gl.getExtension("WEBGL_lose_context")?.loseContext();
+        };
+        // Built once per item count; later selections go through sim.current.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [items.length]);
+
+    const select = (i, e) => {
+        e?.preventDefault();
+        const s = sim.current;
+        if (i === active || !s) return;
+        const t = measure(i);
+        if (!t) return;
+        s.dir = i > active ? 1 : -1;
+        s.target = t;
+        s.activeIndex = i;
+        setActive(i);
+        onChange?.(i, items[i]);
+        if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+            s.l.x = t.l;
+            s.r.x = t.r;
+            s.dirty = true;
+            return;
+        }
+        const cx = (t.l + t.r) / 2;
+        const cy = t.t + t.h / 2;
+        // Burst at the destination; the droplets get pulled back into the pill.
+        for (let k = 0; k < particleCount; k++) {
+            const a = (Math.PI * 2 * k) / particleCount + (Math.random() - 0.5) * 0.6;
+            const sp = 120 + Math.random() * 110;
+            const max = 0.75 + Math.random() * 0.3;
+            s.drops.push({ x: cx, y: cy, vx: Math.cos(a) * sp * 1.5, vy: Math.sin(a) * sp * 0.55, r: 4 + Math.random() * 4, k: 55, life: max, max });
+        }
+        if (s.drops.length > MAX_DROPS) s.drops.splice(0, s.drops.length - MAX_DROPS);
+    };
+
+    return (
+        <nav className={`relative inline-flex max-w-full ${className}`} aria-label="Main">
+            <div ref={bar} className={`relative flex items-center gap-0.5 rounded-full p-1.5 ${dark ? "bg-neutral-950 ring-1 ring-white/10" : "bg-white shadow-sm ring-1 ring-black/10"}`}>
+                <canvas ref={canvas} aria-hidden="true" className="pointer-events-none absolute" style={{ left: -PAD, top: -PAD, display: fallback ? "none" : "block" }} />
+                {fallback && <span ref={fallbackPill} aria-hidden="true" className="pointer-events-none absolute rounded-full" style={{ background: accentColor }} />}
+                {items.map((item, i) => (
+                    <a
+                        key={i}
+                        ref={(el) => (links.current[i] = el)}
+                        href={item.href}
+                        onClick={(e) => select(i, e)}
+                        aria-current={i === active ? "page" : undefined}
+                        className={`relative z-[1] shrink-0 rounded-full px-3.5 py-2.5 text-[0.95rem] font-medium outline-none transition-colors duration-300 focus-visible:ring-2 focus-visible:ring-current/30 sm:px-5 ${i === active ? "text-neutral-950" : dark ? "text-white/65 hover:text-white" : "text-neutral-500 hover:text-neutral-900"}`}
+                    >
+                        {item.label}
+                    </a>
+                ))}
+            </div>
+        </nav>
+    );
+};
+
+export default GooeyNav;

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

@@ -0,0 +1,169 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useReducedMotion } from "framer-motion";
+import { Check } from "lucide-react";
+
+/*
+ * Hold to Confirm: for actions you don't want to trigger by accident. Press
+ * and hold (pointer, Enter or Space) and a solid copy of the button wipes
+ * in from the left; let go, slide off the button or lose focus and it snaps
+ * back. Once the wipe finishes it confirms and resets after `resetAfter`.
+ */
+
+const HoldToConfirm = ({ children = "Hold to confirm", className = "", confirmedContent, disabled, duration = 1600, onConfirm, resetAfter = 1800, ...buttonProps }) => {
+    const buttonRef = useRef(null);
+    const confirmTimerRef = useRef(null);
+    const resetTimerRef = useRef(null);
+    const activePointerIdRef = useRef(null);
+    const inputModeRef = useRef("pointer");
+    const isHoldingRef = useRef(false);
+    const [inputMode, setInputMode] = useState(null);
+    const [status, setStatus] = useState("idle"); // idle | holding | confirmed
+    const shouldReduceMotion = useReducedMotion();
+
+    const clearConfirmTimer = useCallback(() => {
+        if (confirmTimerRef.current === null) return;
+        window.clearTimeout(confirmTimerRef.current);
+        confirmTimerRef.current = null;
+    }, []);
+
+    const completeHold = useCallback(() => {
+        if (!isHoldingRef.current) return;
+        isHoldingRef.current = false;
+        activePointerIdRef.current = null;
+        clearConfirmTimer();
+        setStatus("confirmed");
+        onConfirm?.(inputModeRef.current);
+        if (resetAfter > 0) {
+            resetTimerRef.current = window.setTimeout(() => {
+                setStatus("idle");
+                resetTimerRef.current = null;
+            }, resetAfter);
+        }
+    }, [clearConfirmTimer, onConfirm, resetAfter]);
+
+    const cancelHold = useCallback(() => {
+        if (!isHoldingRef.current) return;
+        isHoldingRef.current = false;
+        activePointerIdRef.current = null;
+        clearConfirmTimer();
+        setStatus("idle");
+    }, [clearConfirmTimer]);
+
+    const startHold = useCallback(
+        (input) => {
+            if (disabled || status === "confirmed" || isHoldingRef.current) return;
+            if (resetTimerRef.current !== null) {
+                window.clearTimeout(resetTimerRef.current);
+                resetTimerRef.current = null;
+            }
+            inputModeRef.current = input;
+            setInputMode(input);
+            isHoldingRef.current = true;
+            setStatus("holding");
+            confirmTimerRef.current = window.setTimeout(completeHold, duration);
+        },
+        [completeHold, disabled, duration, status],
+    );
+
+    useEffect(
+        () => () => {
+            clearConfirmTimer();
+            if (resetTimerRef.current !== null) window.clearTimeout(resetTimerRef.current);
+        },
+        [clearConfirmTimer],
+    );
+
+    useEffect(() => {
+        if (disabled) cancelHold();
+    }, [cancelHold, disabled]);
+
+    const releasePointerCapture = (pointerId) => {
+        const button = buttonRef.current;
+        if (button?.hasPointerCapture(pointerId)) button.releasePointerCapture(pointerId);
+    };
+
+    const handlePointerDown = (event) => {
+        if (!event.isPrimary || event.button !== 0 || disabled) return;
+        activePointerIdRef.current = event.pointerId;
+        event.currentTarget.setPointerCapture(event.pointerId);
+        startHold("pointer");
+    };
+
+    const handlePointerMove = (event) => {
+        if (!isHoldingRef.current || activePointerIdRef.current !== event.pointerId) return;
+        const rect = event.currentTarget.getBoundingClientRect();
+        const boundaryPadding = 8;
+        const isOutside = event.clientX < rect.left - boundaryPadding || event.clientX > rect.right + boundaryPadding || event.clientY < rect.top - boundaryPadding || event.clientY > rect.bottom + boundaryPadding;
+        if (isOutside) {
+            cancelHold();
+            releasePointerCapture(event.pointerId);
+        }
+    };
+
+    const handlePointerEnd = (event) => {
+        if (activePointerIdRef.current !== event.pointerId) return;
+        cancelHold();
+        releasePointerCapture(event.pointerId);
+    };
+
+    const handleKeyDown = (event) => {
+        if (event.repeat || (event.key !== "Enter" && event.key !== " ")) return;
+        event.preventDefault();
+        startHold("keyboard");
+    };
+
+    const handleKeyUp = (event) => {
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        cancelHold();
+    };
+
+    const isConfirmed = status === "confirmed";
+    const isHolding = status === "holding";
+    const overlayStyle = {
+        clipPath: isHolding ? "inset(0 0 0 0)" : "inset(0 100% 0 0)",
+        transitionDuration: shouldReduceMotion || inputMode === "keyboard" ? "0ms" : isHolding ? `${duration}ms` : "180ms",
+        transitionProperty: "clip-path",
+        transitionTimingFunction: isHolding ? "linear" : "cubic-bezier(0.23, 1, 0.32, 1)",
+    };
+
+    return (
+        <button
+            {...buttonProps}
+            aria-busy={isHolding}
+            className={`relative isolate inline-flex h-9 min-w-40 cursor-pointer touch-none select-none items-center justify-center overflow-hidden rounded-lg border border-red-500 px-3 text-sm font-medium outline-none transition-[transform,border-color,background-color,color] duration-150 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)] focus-visible:ring-2 focus-visible:ring-red-400 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent data-[input=pointer]:active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50 ${isConfirmed ? "bg-red-500 text-white" : "bg-red-500/10 text-red-500"} ${className}`}
+            data-input={inputMode ?? undefined}
+            disabled={disabled}
+            onBlur={cancelHold}
+            onKeyDown={handleKeyDown}
+            onKeyUp={handleKeyUp}
+            onLostPointerCapture={cancelHold}
+            onPointerCancel={handlePointerEnd}
+            onPointerDown={handlePointerDown}
+            onPointerMove={handlePointerMove}
+            onPointerUp={handlePointerEnd}
+            ref={buttonRef}
+            type="button"
+        >
+            {isConfirmed ? (
+                <span className="relative flex items-center justify-center gap-1.5">
+                    {confirmedContent ?? (
+                        <>
+                            <Check aria-hidden="true" className="h-[15px] w-[15px]" strokeWidth={3} />
+                            Confirmed
+                        </>
+                    )}
+                </span>
+            ) : (
+                <>
+                    <span className="relative flex items-center justify-center gap-1.5">{children}</span>
+                    <span aria-hidden="true" className="absolute inset-0 flex items-center justify-center gap-1.5 bg-red-500 px-3 text-white" style={overlayStyle}>
+                        {children}
+                    </span>
+                </>
+            )}
+        </button>
+    );
+};
+
+export default HoldToConfirm;

package/dist/ApexUI-Kit/templates/HoldToConfirm/UndoNotice.jsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from "react";
+import { useReducedMotion } from "framer-motion";
+import { CheckCircle2, RotateCcw } from "lucide-react";
+
+/*
+ * Undo Notice: pairs with HoldToConfirm. Shows what just happened with an
+ * Undo button whose solid fill drains away over `duration`; when it runs
+ * out, onExpire fires. onUndo tells you if it came from a key or a pointer.
+ */
+
+const UndoNotice = ({ className = "", duration = 5000, message = "Project deleted", onExpire, onUndo }) => {
+    const [isCounting, setIsCounting] = useState(false);
+    const shouldReduceMotion = useReducedMotion();
+
+    useEffect(() => {
+        const frame = window.requestAnimationFrame(() => setIsCounting(true));
+        const timer = window.setTimeout(() => onExpire?.(), duration);
+        return () => {
+            window.cancelAnimationFrame(frame);
+            window.clearTimeout(timer);
+        };
+    }, [duration, onExpire]);
+
+    return (
+        <div aria-live="polite" role="status" className={`flex min-h-9 w-full max-w-xs items-center justify-between gap-3 rounded-xl bg-neutral-100 p-1 pl-3 dark:bg-neutral-800 ${className}`}>
+            <div className="flex min-w-0 items-center gap-2">
+                <CheckCircle2 aria-hidden="true" className="h-4 w-4 shrink-0 fill-green-500 text-white dark:text-neutral-800" />
+                <p className="truncate text-xs font-medium text-neutral-900 dark:text-neutral-100">{message}</p>
+            </div>
+
+            <button
+                type="button"
+                onClick={(event) => onUndo?.(event.detail === 0 ? "keyboard" : "pointer")}
+                className="relative isolate flex h-7 min-w-20 cursor-pointer items-center justify-center overflow-hidden rounded-lg border border-neutral-200 bg-white px-2.5 text-xs font-medium text-neutral-600 outline-none transition-transform duration-150 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)] focus-visible:ring-2 focus-visible:ring-neutral-400 active:scale-[0.97] dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300"
+            >
+                <span className="flex items-center gap-1.5">
+                    <RotateCcw aria-hidden="true" className="h-[13px] w-[13px]" strokeWidth={2.5} />
+                    Undo
+                </span>
+                <span
+                    aria-hidden="true"
+                    className="absolute inset-0 flex items-center justify-center gap-1.5 bg-neutral-900 px-2.5 text-white dark:bg-neutral-100 dark:text-neutral-900"
+                    style={{
+                        clipPath: isCounting ? "inset(0 100% 0 0)" : "inset(0 0 0 0)",
+                        transitionDuration: shouldReduceMotion ? "0ms" : `${duration}ms`,
+                        transitionProperty: "clip-path",
+                        transitionTimingFunction: "linear",
+                    }}
+                >
+                    <RotateCcw aria-hidden="true" className="h-[13px] w-[13px]" strokeWidth={2.5} />
+                    Undo
+                </span>
+            </button>
+        </div>
+    );
+};
+
+export default UndoNotice;

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

@@ -0,0 +1,92 @@
+import React, { useRef } from "react";
+import { motion, useMotionTemplate, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion";
+
+/*
+ * Holo Card: a collectible-style card that tilts in 3D under the pointer.
+ * A rainbow foil and a glare follow the light, and the artwork, title and
+ * badge float at different depths so the card feels thick.
+ */
+
+const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets";
+
+const HoloCard = ({
+    image = `${IK}/doctorStrange.png?tr=f-auto,q-80,w-600`,
+    title = "Doctor Strange",
+    subtitle = "Sorcerer Supreme",
+    badge = "Legendary",
+    stat = "98",
+    accentColor = "#a3e635",
+    maxTilt = 16,
+    width = 17,
+    className = "",
+}) => {
+    const ref = useRef(null);
+    const reduced = useReducedMotion();
+    const px = useMotionValue(0.5);
+    const py = useMotionValue(0.5);
+    const spring = { stiffness: 180, damping: 18, mass: 0.6 };
+    const sx = useSpring(px, spring);
+    const sy = useSpring(py, spring);
+    const rotateY = useTransform(sx, [0, 1], [-maxTilt, maxTilt]);
+    const rotateX = useTransform(sy, [0, 1], [maxTilt, -maxTilt]);
+    const glareX = useTransform(sx, (v) => `${v * 100}%`);
+    const glareY = useTransform(sy, (v) => `${v * 100}%`);
+    const foilPos = useTransform([sx, sy], ([x, y]) => `${x * 100}% ${y * 100}%`);
+    const glare = useMotionTemplate`radial-gradient(circle at ${glareX} ${glareY}, rgba(255,255,255,0.55), rgba(255,255,255,0) 45%)`;
+    const shadow = useTransform([sx, sy], ([x, y]) => `${(0.5 - x) * 40}px ${(0.5 - y) * 40 + 30}px 60px -20px rgba(0,0,0,0.6)`);
+
+    const onMove = (e) => {
+        if (reduced) return;
+        const r = ref.current.getBoundingClientRect();
+        px.set((e.clientX - r.left) / r.width);
+        py.set((e.clientY - r.top) / r.height);
+    };
+    const onLeave = () => {
+        px.set(0.5);
+        py.set(0.5);
+    };
+
+    return (
+        <div className={`[perspective:1100px] ${className}`}>
+            <motion.article
+                ref={ref}
+                onPointerMove={onMove}
+                onPointerLeave={onLeave}
+                className="relative aspect-[5/7] cursor-pointer select-none rounded-[1.4rem] bg-neutral-900 [transform-style:preserve-3d]"
+                style={{ width: `min(${width}rem, 80vw)`, rotateX, rotateY, boxShadow: shadow }}
+                whileHover={{ scale: 1.03 }}
+                transition={{ type: "spring", stiffness: 260, damping: 20 }}
+            >
+                <div className="absolute inset-0 overflow-hidden rounded-[1.4rem] ring-1 ring-white/15">
+                    <img src={image} alt="" draggable="false" className="h-full w-full object-cover" />
+                    {/* Holographic foil: a rainbow that slides with the light. */}
+                    <motion.div
+                        aria-hidden="true"
+                        className="absolute inset-0 opacity-[0.22] mix-blend-color-dodge"
+                        style={{
+                            backgroundImage: "linear-gradient(115deg, transparent 20%, #ff7ad9 30%, #7afcff 40%, #fdff7a 50%, #7aff9b 60%, #b57aff 70%, transparent 80%)",
+                            backgroundSize: "260% 260%",
+                            backgroundPosition: foilPos,
+                        }}
+                    />
+                    <motion.div aria-hidden="true" className="absolute inset-0 mix-blend-overlay" style={{ background: glare }} />
+                    <div className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/85 to-transparent" />
+                </div>
+
+                {/* Layers that float above the card. */}
+                <div className="pointer-events-none absolute inset-x-4 top-4 flex items-center justify-between [transform:translateZ(40px)]">
+                    <span className="rounded-full px-2.5 py-1 text-[0.65rem] font-bold uppercase tracking-[0.18em] text-black shadow-lg" style={{ background: accentColor }}>
+                        {badge}
+                    </span>
+                    <span className="grid h-10 w-10 place-items-center rounded-full border border-white/30 bg-black/50 font-mono text-sm font-bold text-white backdrop-blur">{stat}</span>
+                </div>
+                <div className="pointer-events-none absolute inset-x-5 bottom-5 text-white [transform:translateZ(60px)]">
+                    <p className="text-[1.35rem] font-bold leading-tight drop-shadow-lg">{title}</p>
+                    <p className="text-[0.82rem] text-white/70">{subtitle}</p>
+                </div>
+            </motion.article>
+        </div>
+    );
+};
+
+export default HoloCard;