apex-ui-kit 2.6.0 → 2.8.0

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

@@ -0,0 +1,230 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+
+/*
+ * Infinite Canvas: an endless wall of image cards you can drag, flick or
+ * scroll in any direction. It glides to a stop with momentum, cards lean
+ * with the speed of the move and settle flat again, and the wall drifts on
+ * its own while nobody touches it. Only enough cards to cover the view are
+ * rendered; they are recycled as they leave an edge, so it stays light.
+ */
+
+const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets/componentsimage";
+const shot = (n, t) => ({ image: `${IK}/${n}.png?tr=f-auto,q-75,w-520`, title: t });
+const DEFAULT_ITEMS = [
+    shot("galaxy-3d", "Galaxy 3D"),
+    shot("warp-tunnel", "Warp Tunnel"),
+    shot("liquid-blob-3d", "Liquid Blob 3D"),
+    shot("particle-text", "Particle Text"),
+    shot("retro-grid-3d", "Retro Grid 3D"),
+    shot("marquee-3d", "Marquee 3D"),
+    shot("sunrise-background", "Sunrise Background"),
+    shot("circular-carousel", "Circular Carousel"),
+    shot("wireframe-knot-3d", "Wireframe Knot 3D"),
+    shot("arc-gallery", "Arc Gallery"),
+    shot("particle-morph", "Particle Morph"),
+    shot("scroll-stack", "Scroll Stack"),
+];
+
+const InfiniteCanvas = ({ items = DEFAULT_ITEMS, cardWidth = 14, aspectRatio = 0.8, gap = 1.25, drift = 18, tilt = 1, friction = 0.93, showTitles = true, height = "34rem", onItemClick, className = "" }) => {
+    const wrap = useRef(null);
+    const tiles = useRef([]);
+    const [pool, setPool] = useState(0);
+    const live = useRef({});
+    live.current = { drift, tilt, friction, showTitles, onItemClick };
+    const list = items.length ? items : DEFAULT_ITEMS;
+    const listRef = useRef(list);
+    listRef.current = list;
+    const geo = useRef({ cw: 1, ch: 1, cols: 0, rows: 0 });
+
+    // Size the pool to cover the view (plus a ring of spares) whenever it resizes.
+    useLayoutEffect(() => {
+        const el = wrap.current;
+        const fit = () => {
+            const { width, height: hh } = el.getBoundingClientRect();
+            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            // Cards shrink a little on small screens so a few always fit.
+            const w = Math.min(cardWidth * rem, Math.max(width * 0.42, 120));
+            const cw = w + gap * rem;
+            const ch = w / aspectRatio + gap * rem;
+            const cols = Math.ceil(width / cw) + 2;
+            const rows = Math.ceil(hh / ch) + 3;
+            geo.current = { cw, ch, w, h: w / aspectRatio, cols, rows };
+            setPool(cols * rows);
+        };
+        fit();
+        const ro = new ResizeObserver(fit);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [cardWidth, aspectRatio, gap]);
+
+    useEffect(() => {
+        const el = wrap.current;
+        if (!pool) return undefined;
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        const s = { ox: 0, oy: 0, vx: 0, vy: 0, lean: { x: 0, y: 0 }, drag: null, hover: false };
+        const slots = tiles.current.slice(0, pool).map(() => ({ key: "" }));
+        let raf = 0;
+        let last = 0;
+        let visible = true;
+
+        const paint = () => {
+            const { cw, ch, cols } = geo.current;
+            const items = listRef.current;
+            const n = items.length;
+            const c0 = Math.floor(-s.ox / cw) - 1;
+            const r0 = Math.floor(-s.oy / ch) - 2;
+            const rx = Math.max(-10, Math.min(10, -s.lean.y * 0.012 * live.current.tilt));
+            const ry = Math.max(-10, Math.min(10, s.lean.x * 0.012 * live.current.tilt));
+            const sc = 1 - Math.min(0.06, Math.hypot(s.lean.x, s.lean.y) / 30000);
+            for (let k = 0; k < slots.length; k++) {
+                const el = tiles.current[k];
+                if (!el) continue;
+                const i = c0 + (k % cols);
+                const j = r0 + Math.floor(k / cols);
+                // Odd columns sit half a card lower, like a masonry wall.
+                const x = i * cw + s.ox;
+                const y = j * ch + s.oy + (((i % 2) + 2) % 2) * ch * 0.5;
+                el.style.transform = `translate3d(${x.toFixed(2)}px, ${y.toFixed(2)}px, 0) rotateX(${rx.toFixed(2)}deg) rotateY(${ry.toFixed(2)}deg) scale(${sc.toFixed(4)})`;
+                const key = `${i},${j}`;
+                if (slots[k].key !== key) {
+                    slots[k].key = key;
+                    const idx = ((((i * 5 + j * 3) % n) + n) % n);
+                    el.dataset.index = String(idx);
+                    const img = el.querySelector("img");
+                    if (img && img.getAttribute("src") !== items[idx].image) img.setAttribute("src", items[idx].image);
+                    const label = el.querySelector("[data-title]");
+                    if (label) label.textContent = items[idx].title ?? "";
+                }
+            }
+        };
+
+        const frame = (now) => {
+            raf = 0;
+            const o = live.current;
+            const dt = last ? Math.min(0.05, (now - last) / 1000) : 1 / 60;
+            last = now;
+            if (!s.drag) {
+                const k = Math.pow(o.friction, dt * 60);
+                s.vx *= k;
+                s.vy *= k;
+                // Ease back into the idle drift once the throw has died down.
+                if (!s.hover && !reduced && o.drift) {
+                    s.vx += (-o.drift * 0.6 - s.vx) * (1 - Math.exp(-dt / 1.6)) * (Math.abs(s.vx) < 120 ? 1 : 0);
+                    s.vy += (-o.drift - s.vy) * (1 - Math.exp(-dt / 1.6)) * (Math.abs(s.vy) < 120 ? 1 : 0);
+                }
+                s.ox += s.vx * dt;
+                s.oy += s.vy * dt;
+            }
+            const lx = s.drag ? s.drag.vx : s.vx;
+            const ly = s.drag ? s.drag.vy : s.vy;
+            s.lean.x += (lx - s.lean.x) * (1 - Math.exp(-dt / 0.12));
+            s.lean.y += (ly - s.lean.y) * (1 - Math.exp(-dt / 0.12));
+            paint();
+            const moving = s.drag || Math.abs(s.vx) + Math.abs(s.vy) > 1 || Math.abs(s.lean.x) + Math.abs(s.lean.y) > 1;
+            if (visible && (moving || (o.drift && !s.hover && !reduced))) raf = requestAnimationFrame(frame);
+            else last = 0;
+        };
+        const start = () => {
+            if (!raf && visible) raf = requestAnimationFrame(frame);
+        };
+
+        const onDown = (e) => {
+            if (e.button !== 0) return;
+            e.preventDefault();
+            s.drag = { x: e.clientX, y: e.clientY, ox: s.ox, oy: s.oy, t: performance.now(), vx: 0, vy: 0, moved: false, target: e.target.closest("[data-index]") };
+            el.setPointerCapture(e.pointerId);
+            s.vx = s.vy = 0;
+            start();
+        };
+        const onMove = (e) => {
+            const g = s.drag;
+            if (!g) return;
+            const now = performance.now();
+            const dx = e.clientX - g.x;
+            const dy = e.clientY - g.y;
+            if (Math.hypot(dx, dy) > 5) g.moved = true;
+            const nx = g.ox + dx;
+            const ny = g.oy + dy;
+            const span = Math.max(8, now - g.t) / 1000;
+            g.vx += ((nx - s.ox) / span - g.vx) * 0.4;
+            g.vy += ((ny - s.oy) / span - g.vy) * 0.4;
+            g.t = now;
+            s.ox = nx;
+            s.oy = ny;
+            start();
+        };
+        const onUp = (e) => {
+            const g = s.drag;
+            if (!g) return;
+            s.drag = null;
+            if (g.moved) {
+                // Fling: keep the release speed (capped) and let friction take it.
+                s.vx = Math.max(-3000, Math.min(3000, g.vx));
+                s.vy = Math.max(-3000, Math.min(3000, g.vy));
+            } else if (g.target && e.type === "pointerup") {
+                const idx = Number(g.target.dataset.index);
+                live.current.onItemClick?.(listRef.current[idx], idx);
+            }
+            start();
+        };
+        const onWheel = (e) => {
+            e.preventDefault();
+            s.vx = -e.deltaX * 6;
+            s.vy = -e.deltaY * 6;
+            start();
+        };
+        const onEnter = () => {
+            s.hover = true;
+        };
+        const onLeave = () => {
+            s.hover = false;
+            start();
+        };
+        el.addEventListener("pointerdown", onDown);
+        el.addEventListener("pointermove", onMove);
+        el.addEventListener("pointerup", onUp);
+        el.addEventListener("pointercancel", onUp);
+        el.addEventListener("pointerenter", onEnter);
+        el.addEventListener("pointerleave", onLeave);
+        el.addEventListener("wheel", onWheel, { passive: false });
+        const io = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            if (visible) start();
+        });
+        io.observe(el);
+        paint();
+        start();
+
+        return () => {
+            cancelAnimationFrame(raf);
+            io.disconnect();
+            el.removeEventListener("pointerdown", onDown);
+            el.removeEventListener("pointermove", onMove);
+            el.removeEventListener("pointerup", onUp);
+            el.removeEventListener("pointercancel", onUp);
+            el.removeEventListener("pointerenter", onEnter);
+            el.removeEventListener("pointerleave", onLeave);
+            el.removeEventListener("wheel", onWheel);
+        };
+    }, [pool]);
+
+    const { w, h } = geo.current;
+    return (
+        <div
+            ref={wrap}
+            className={`relative w-full cursor-grab touch-none select-none overflow-hidden active:cursor-grabbing ${className}`}
+            style={{ height, perspective: "1200px", maskImage: "radial-gradient(ellipse 75% 75% at 50% 50%, #000 55%, transparent 100%)", WebkitMaskImage: "radial-gradient(ellipse 75% 75% at 50% 50%, #000 55%, transparent 100%)" }}
+        >
+            {Array.from({ length: pool }, (_, k) => (
+                <div key={k} ref={(e) => (tiles.current[k] = e)} className="group absolute left-0 top-0 will-change-transform" style={{ width: w, height: h }}>
+                    <div className="h-full w-full overflow-hidden rounded-2xl bg-white/5 shadow-[0_18px_40px_-22px_rgba(0,0,0,0.7)] ring-1 ring-white/10">
+                        <img alt="" draggable={false} loading="lazy" decoding="async" className="h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-[1.06]" />
+                    </div>
+                    {showTitles && <p data-title="" className="pointer-events-none absolute inset-x-3 bottom-3 truncate rounded-full bg-black/45 px-3 py-1 text-xs font-semibold text-white opacity-0 backdrop-blur transition-opacity duration-300 group-hover:opacity-100" />}
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default InfiniteCanvas;

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

@@ -0,0 +1,69 @@
+import React, { useRef } from "react";
+import { motion, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion";
+
+/*
+ * Magnetic Button: when the pointer comes near, the button leans toward it
+ * like a magnet, and its label follows a little further for a layered
+ * parallax. A soft glow tracks the pointer across the surface. Springs back
+ * when the pointer leaves. Renders a <button>, or a link with `as="a"`.
+ */
+
+const MagneticButton = ({ as = "button", children = "Get started", strength = 0.35, radius = 1.6, accentColor = "#a3e635", theme = "dark", className = "", ...rest }) => {
+    const reduced = useReducedMotion();
+    const ref = useRef(null);
+    const mx = useMotionValue(0);
+    const my = useMotionValue(0);
+    const gx = useMotionValue(50);
+    const gy = useMotionValue(50);
+    const spring = { stiffness: 220, damping: 18, mass: 0.6 };
+    const x = useSpring(mx, spring);
+    const y = useSpring(my, spring);
+    // The label travels a bit further than the button: layered parallax.
+    const lx = useTransform(x, (v) => v * 0.45);
+    const ly = useTransform(y, (v) => v * 0.45);
+    const glow = useTransform([gx, gy], ([a, b]) => `radial-gradient(120px circle at ${a}% ${b}%, ${accentColor}55, transparent 70%)`);
+    const Tag = motion[as] ?? motion.button;
+    const dark = theme !== "light";
+
+    const onMove = (e) => {
+        const el = ref.current;
+        if (!el || reduced) return;
+        const r = el.getBoundingClientRect();
+        const cx = r.left + r.width / 2;
+        const cy = r.top + r.height / 2;
+        const dx = e.clientX - cx;
+        const dy = e.clientY - cy;
+        // Only pull while the pointer is within `radius` × the button size.
+        const reach = Math.max(r.width, r.height) * radius;
+        const pull = Math.max(0, 1 - Math.hypot(dx, dy) / reach);
+        mx.set(dx * strength * pull * 1.6);
+        my.set(dy * strength * pull * 1.6);
+        gx.set(((e.clientX - r.left) / r.width) * 100);
+        gy.set(((e.clientY - r.top) / r.height) * 100);
+    };
+    const reset = () => {
+        mx.set(0);
+        my.set(0);
+    };
+
+    return (
+        // The wrapper is larger than the button so the pull starts before you touch it.
+        <span className="inline-block p-6" onPointerMove={onMove} onPointerLeave={reset}>
+            <Tag
+                ref={ref}
+                {...(as === "button" ? { type: "button" } : {})}
+                {...rest}
+                style={{ x, y }}
+                whileTap={{ scale: 0.96 }}
+                className={`group relative inline-flex select-none items-center justify-center overflow-hidden rounded-full px-8 py-4 text-[0.95rem] font-semibold outline-none ring-1 transition-shadow focus-visible:ring-2 ${dark ? "bg-neutral-950 text-white ring-white/15 focus-visible:ring-white/40" : "bg-white text-neutral-900 ring-black/10 focus-visible:ring-black/30"} ${className}`}
+            >
+                <motion.span aria-hidden="true" className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100" style={{ background: glow }} />
+                <motion.span className="relative inline-flex items-center gap-2" style={{ x: lx, y: ly }}>
+                    {children}
+                </motion.span>
+            </Tag>
+        </span>
+    );
+};
+
+export default MagneticButton;

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

@@ -0,0 +1,68 @@
+import React from "react";
+import { motion, useAnimationFrame, useMotionValue, useReducedMotion, useTransform } from "framer-motion";
+
+/*
+ * Marquee 3D: a wall of cards tilted back in 3D, with columns that scroll in
+ * opposite directions forever. Great for showing off screenshots, logos or
+ * testimonials. Each column repeats its items twice and moves exactly one
+ * copy, so the loop has no seam. Hover pauses; edges fade out.
+ */
+
+const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets/componentsimage";
+const shot = (f) => `${IK}/${f}?tr=f-auto,q-75,w-420`;
+const DEFAULT_IMAGES = [
+    "gooey-nav-v3.png", "liquid-blob-3d.png", "galaxy-3d.png", "warp-tunnel.png", "retro-grid-3d.png", "particle-morph.png",
+    "distortion-image.png", "cube-gallery-v2.png", "coverflow-3d.png", "ai-voice-orb.png", "flip-book-v2.png", "holo-card.png",
+    "dot-globe.png", "3d-carousel.png", "pricing-cards.png", "stepper.png",
+].map(shot);
+
+function Column({ images, duration, reverse, paused }) {
+    const reduced = useReducedMotion();
+    const list = [...images, ...images];
+    // Progress through one copy (0 to 50%), advanced every frame. Pausing just
+    // stops advancing, so hover-out continues from the same spot (no jump).
+    const offset = useMotionValue(0);
+    useAnimationFrame((_, delta) => {
+        if (paused || reduced) return;
+        offset.set((offset.get() + (Math.min(delta, 50) / 1000 / duration) * 50) % 50);
+    });
+    const y = useTransform(offset, (v) => `${reverse ? v - 50 : -v}%`);
+    return (
+        <div className="relative h-full overflow-hidden">
+            <motion.div className="flex flex-col gap-4" style={{ y }}>
+                {list.map((src, i) => (
+                    <img key={i} src={src} alt="" draggable="false" loading="lazy" className="aspect-[4/3] w-full rounded-xl bg-neutral-900 object-cover shadow-[0_10px_30px_-12px_rgba(0,0,0,0.6)] ring-1 ring-white/10" />
+                ))}
+            </motion.div>
+        </div>
+    );
+}
+
+const Marquee3D = ({ images = DEFAULT_IMAGES, columns = 4, speed = 1, tilt = 1, pauseOnHover = true, height = "100%", className = "" }) => {
+    const [hover, setHover] = React.useState(false);
+    const cols = Array.from({ length: columns }, (_, c) => images.filter((_, i) => i % columns === c));
+    return (
+        <div
+            className={`relative w-full overflow-hidden [perspective:1000px] ${className}`}
+            style={{ height, maskImage: "linear-gradient(to bottom, transparent, black 18%, black 82%, transparent)", WebkitMaskImage: "linear-gradient(to bottom, transparent, black 18%, black 82%, transparent)" }}
+            onPointerEnter={() => pauseOnHover && setHover(true)}
+            onPointerLeave={() => setHover(false)}
+            aria-hidden="true"
+        >
+            <div
+                className="absolute left-1/2 top-1/2 grid h-[170%] w-[115%] gap-4"
+                style={{
+                    gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+                    transform: `translate(-50%, -50%) rotateX(${32 * tilt}deg) rotateZ(${-22 * tilt}deg) rotateY(${8 * tilt}deg)`,
+                    transformStyle: "preserve-3d",
+                }}
+            >
+                {cols.map((imgs, c) => (
+                    <Column key={c} images={imgs.length ? imgs : images} duration={(28 + c * 6) / speed} reverse={c % 2 === 1} paused={hover} />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default Marquee3D;

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
 import { AnimatePresence, LayoutGroup, MotionConfig, motion } from 'framer-motion';
-import { ArrowRight, ArrowUpRight, ChevronDown } from 'lucide-react';
+import { ArrowRight, ArrowUpRight, ChevronDown, Menu, X } from 'lucide-react';
 
 const ease = [0.22, 1, 0.36, 1];
 const CLOSE_DELAY = 140;
@@ -70,7 +70,129 @@ const PanelContent = ({ item }) => {
     return <Services items={item.submenu} />;
 };
 
+/*
+ * Phones: a Menu button opens one full-width sheet; each section expands in
+ * place (accordion) instead of a hover panel that would not fit.
+ */
+const MobileNav = ({ navData }) => {
+    const [open, setOpen] = useState(false);
+    const [section, setSection] = useState(null);
+    const root = useRef(null);
+    useEffect(() => {
+        if (!open) return undefined;
+        const down = (e) => !root.current?.contains(e.target) && setOpen(false);
+        const key = (e) => e.key === 'Escape' && setOpen(false);
+        window.addEventListener('pointerdown', down);
+        window.addEventListener('keydown', key);
+        return () => {
+            window.removeEventListener('pointerdown', down);
+            window.removeEventListener('keydown', key);
+        };
+    }, [open]);
+    return (
+        <div ref={root} className="relative w-full max-w-sm">
+            <button
+                type="button"
+                aria-expanded={open}
+                onClick={() => setOpen((o) => !o)}
+                className="flex w-full items-center justify-between rounded-full border border-white/10 bg-zinc-950/85 px-5 py-3 text-sm font-medium text-zinc-200 shadow-[0_10px_40px_-12px_rgba(0,0,0,0.7)] outline-none backdrop-blur-xl focus-visible:ring-2 focus-visible:ring-lime-400/60"
+            >
+                Menu
+                {open ? <X size={18} /> : <Menu size={18} />}
+            </button>
+            <AnimatePresence>
+                {open && (
+                    <motion.nav
+                        aria-label="Main"
+                        initial={{ opacity: 0, y: -8, scale: 0.98 }}
+                        animate={{ opacity: 1, y: 0, scale: 1 }}
+                        exit={{ opacity: 0, y: -6, scale: 0.98, transition: { duration: 0.15 } }}
+                        transition={{ duration: 0.22, ease }}
+                        className="absolute left-0 right-0 top-full z-10 mt-2 max-h-[70vh] origin-top overflow-y-auto rounded-2xl border border-white/10 bg-zinc-950/95 p-2 shadow-[0_24px_60px_-20px_rgba(0,0,0,0.8)] backdrop-blur-xl"
+                    >
+                        {navData.map((item, i) => {
+                            const hasMenu = Boolean(item.submenu?.length);
+                            const isOpen = section === i;
+                            if (!hasMenu) {
+                                return (
+                                    <a key={i} href={item.href || '#'} className="block rounded-xl px-3 py-3 text-sm font-medium text-zinc-200 outline-none hover:bg-white/[0.05] focus-visible:bg-white/[0.07]">
+                                        {item.label}
+                                    </a>
+                                );
+                            }
+                            return (
+                                <div key={i}>
+                                    <button
+                                        type="button"
+                                        aria-expanded={isOpen}
+                                        onClick={() => setSection(isOpen ? null : i)}
+                                        className={`flex w-full items-center justify-between rounded-xl px-3 py-3 text-sm font-medium outline-none hover:bg-white/[0.05] focus-visible:bg-white/[0.07] ${isOpen ? 'text-lime-300' : 'text-zinc-200'}`}
+                                    >
+                                        {item.label}
+                                        <ChevronDown size={16} className={`transition-transform duration-300 ${isOpen ? 'rotate-180' : ''}`} />
+                                    </button>
+                                    <AnimatePresence initial={false}>
+                                        {isOpen && (
+                                            <motion.ul
+                                                initial={{ height: 0, opacity: 0 }}
+                                                animate={{ height: 'auto', opacity: 1 }}
+                                                exit={{ height: 0, opacity: 0 }}
+                                                transition={{ duration: 0.25, ease }}
+                                                className="overflow-hidden pl-2"
+                                            >
+                                                {item.submenu.map((sub, j) => (
+                                                    <li key={j}>
+                                                        <a href={sub.href} className="flex items-center gap-3 rounded-lg px-3 py-2 outline-none hover:bg-white/[0.05] focus-visible:bg-white/[0.07]">
+                                                            {sub.image ? (
+                                                                <img src={sub.image} alt="" className="h-9 w-9 shrink-0 rounded-md object-cover ring-1 ring-white/10" />
+                                                            ) : (
+                                                                <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-lime-400/20 bg-lime-400/10 text-xs font-semibold text-lime-300">
+                                                                    {sub.icon ? <sub.icon size={14} /> : sub.label.charAt(0)}
+                                                                </span>
+                                                            )}
+                                                            <span className="min-w-0">
+                                                                <span className="block truncate text-sm text-zinc-100">{sub.label}</span>
+                                                                {sub.subtitle && <span className="block truncate text-xs text-zinc-500">{sub.subtitle}</span>}
+                                                            </span>
+                                                        </a>
+                                                    </li>
+                                                ))}
+                                            </motion.ul>
+                                        )}
+                                    </AnimatePresence>
+                                </div>
+                            );
+                        })}
+                    </motion.nav>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+};
+
+// Below this much room the desktop bar would not fit, so the phone menu shows.
+const COMPACT_BELOW = 640;
+
 const NavDropDown = ({ navData = [], className = '' }) => {
+    const hostRef = useRef(null);
+    const [compact, setCompact] = useState(false);
+    useLayoutEffect(() => {
+        const host = hostRef.current?.parentElement;
+        if (!host) return undefined;
+        const check = () => setCompact(host.clientWidth < COMPACT_BELOW);
+        check();
+        const ro = new ResizeObserver(check);
+        ro.observe(host);
+        return () => ro.disconnect();
+    }, []);
+    return (
+        <div ref={hostRef} className={`flex w-full justify-center ${className}`}>
+            {compact ? <MobileNav navData={navData} /> : <DesktopNav navData={navData} />}
+        </div>
+    );
+};
+
+const DesktopNav = ({ navData = [], className = '' }) => {
     const uid = useId();
     const rootRef = useRef(null);
     const barRef = useRef(null);