apex-ui-kit 2.7.0 → 2.9.0

package/ReadMe.md

@@ -4,7 +4,7 @@
 [![npm downloads](https://img.shields.io/npm/dm/apex-ui-kit?color=a3e635)](https://www.npmjs.com/package/apex-ui-kit)
 [![license](https://img.shields.io/npm/l/apex-ui-kit?color=a3e635)](./Licence.md)
 
-**107 free, animated UI components for React.** Pick one, add it with a single command, and the source lands in your project so you can read it and change anything.
+**116 free, animated UI components for React.** Pick one, add it with a single command, and the source lands in your project so you can read it and change anything.
 
 Built with React, Tailwind CSS and Framer Motion, plus GSAP, Canvas and WebGL where a component needs them.
 
@@ -15,7 +15,7 @@ Built with React, Tailwind CSS and Framer Motion, plus GSAP, Canvas and WebGL wh
 
 ## Why ApexUI
 
-- **107 components** across backgrounds, cards, text effects, navigation, buttons, interactive UI, AI interfaces, loaders and maps.
+- **116 components** across backgrounds, cards, text effects, navigation, buttons, interactive UI, AI interfaces, loaders and maps.
 - **You own the code.** The CLI copies plain `.jsx` files into your project, no runtime package to keep in sync.
 - **Every docs page has** a live preview, a playground to tweak props, a Desktop / Tablet / Mobile preview, the full props table and a ready prompt you can paste into ChatGPT or Claude.
 - **Smooth on real devices.** Animations stick to transform and opacity, respect reduced motion, and work with mouse, touch and keyboard.
@@ -99,12 +99,13 @@ Every component's props, variants and copy-ready code are on its docs page.
 
 ## Components
 
-### Backgrounds (16)
+### Backgrounds (17)
 
 | Component | CLI name |
 | --- | --- |
 | [Aurora Background](https://apex-ui.in/components/aurora-background) | `aurora-background` |
 | [BluePrint Background](https://apex-ui.in/components/blueprint-background) | `blueprint-background` |
+| [Dither Waves](https://apex-ui.in/components/dither-waves) | `dither-waves` |
 | [Dot Wave Background](https://apex-ui.in/components/dot-wave-background) | `dot-wave-background` |
 | [Galaxy 3D](https://apex-ui.in/components/galaxy-3d) | `galaxy-3d` |
 | [Horizon Glow](https://apex-ui.in/components/horizon-glow) | `horizon-glow` |
@@ -120,7 +121,7 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Sunrise Background](https://apex-ui.in/components/sunrise-background) | `sunrise-background` |
 | [Warp Tunnel](https://apex-ui.in/components/warp-tunnel) | `warp-tunnel` |
 
-### Cards (19)
+### Cards (20)
 
 | Component | CLI name |
 | --- | --- |
@@ -133,6 +134,7 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Glare Card](https://apex-ui.in/components/glare-card) | `glare-card` |
 | [Holo Card](https://apex-ui.in/components/holo-card) | `holo-card` |
 | [Hyper Card](https://apex-ui.in/components/hyper-card) | `hyper-card` |
+| [Image Accordion](https://apex-ui.in/components/image-accordion) | `image-accordion` |
 | [Iso Stack](https://apex-ui.in/components/iso-stack) | `iso-stack` |
 | [Parallax Card](https://apex-ui.in/components/parallax-card) | `parallax-card` |
 | [Pixel Transition](https://apex-ui.in/components/pixel-transition) | `pixel-transition` |
@@ -144,7 +146,7 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Swipe Cards](https://apex-ui.in/components/swipe-cards) | `swipe-cards` |
 | [Testimonials](https://apex-ui.in/components/testimonials) | `testimonials` |
 
-### Text & Motion (19)
+### Text & Motion (20)
 
 | Component | CLI name |
 | --- | --- |
@@ -153,6 +155,7 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Beam Bar](https://apex-ui.in/components/beam-bar) | `beam-bar` |
 | [Blur Reveal Text](https://apex-ui.in/components/blur-reveal-text) | `blur-reveal-text` |
 | [Circular Text](https://apex-ui.in/components/circular-text) | `circular-text` |
+| [Crossed Marquee](https://apex-ui.in/components/crossed-marquee) | `crossed-marquee` |
 | [Extruded Text](https://apex-ui.in/components/extruded-text) | `extruded-text` |
 | [Flip Clock](https://apex-ui.in/components/flip-clock) | `flip-clock` |
 | [Glitch Text](https://apex-ui.in/components/glitch-text) | `glitch-text` |
@@ -168,11 +171,12 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [True Focus](https://apex-ui.in/components/true-focus) | `true-focus` |
 | [Typewriter Text](https://apex-ui.in/components/typewriter-text) | `typewriter-text` |
 
-### Navigation (9)
+### Navigation (11)
 
 | Component | CLI name |
 | --- | --- |
 | [Animated Tabs](https://apex-ui.in/components/animated-tabs) | `animated-tabs` |
+| [Command Palette](https://apex-ui.in/components/command-palette) | `command-palette` |
 | [Floating Navbar](https://apex-ui.in/components/floating-navbar) | `floating-navbar` |
 | [Gooey Nav](https://apex-ui.in/components/gooey-nav) | `gooey-nav` |
 | [Magnify Dock](https://apex-ui.in/components/magnify-dock) | `magnify-dock` |
@@ -180,6 +184,7 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Nav Menu](https://apex-ui.in/components/nav-menu) | `nav-menu` |
 | [Radial Menu](https://apex-ui.in/components/radial-menu) | `radial-menu` |
 | [Sidebar Nav](https://apex-ui.in/components/sidebar-nav) | `sidebar-nav` |
+| [Theme Switcher](https://apex-ui.in/components/theme-switcher) | `theme-switcher` |
 | [Theme Toggle](https://apex-ui.in/components/theme-toggle) | `theme-toggle` |
 
 ### Buttons (4)
@@ -191,7 +196,7 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Magnetic Button](https://apex-ui.in/components/magnetic-button) | `magnetic-button` |
 | [Star Border](https://apex-ui.in/components/star-border) | `star-border` |
 
-### Interactive (27)
+### Interactive (31)
 
 | Component | CLI name |
 | --- | --- |
@@ -210,11 +215,15 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Elastic Slider](https://apex-ui.in/components/elastic-slider) | `elastic-slider` |
 | [FAQ Accordion](https://apex-ui.in/components/faq-accordion) | `faq-accordion` |
 | [Flip Book](https://apex-ui.in/components/flip-book) | `flip-book` |
+| [Glass Lens](https://apex-ui.in/components/glass-lens) | `glass-lens` |
 | [Image Compare](https://apex-ui.in/components/image-compare) | `image-compare` |
+| [Infinite Canvas](https://apex-ui.in/components/infinite-canvas) | `infinite-canvas` |
 | [Liquid Blob 3D](https://apex-ui.in/components/liquid-blob-3d) | `liquid-blob-3d` |
+| [Liquid Glass](https://apex-ui.in/components/liquid-glass) | `liquid-glass` |
 | [Magnet Lines](https://apex-ui.in/components/magnet-lines) | `magnet-lines` |
 | [Magnetic Cursor](https://apex-ui.in/components/magnetic-cursor) | `magnetic-cursor` |
 | [Marquee 3D](https://apex-ui.in/components/marquee-3d) | `marquee-3d` |
+| [Orbit Icons](https://apex-ui.in/components/orbit-icons) | `orbit-icons` |
 | [Particle Morph](https://apex-ui.in/components/particle-morph) | `particle-morph` |
 | [Pointer Follower](https://apex-ui.in/components/pointer-follower) | `pointer-follower` |
 | [Receipt Printer](https://apex-ui.in/components/receipt-printer) | `receipt-printer` |
@@ -251,9 +260,12 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Dot Globe](https://apex-ui.in/components/dot-globe) | `dot-globe` |
 | [World Map](https://apex-ui.in/components/world-map) | `world-map` |
 
-## What's new in 2.7
+## What's new in 2.9
 
-- 38 new components, including WebGL and three.js (Sunrise Background, Horizon Glow, Circular Carousel, Arc Gallery, Galaxy 3D, Warp Tunnel, Wireframe Knot 3D, Marquee 3D, Distortion Image, Liquid Blob 3D, Particle Morph, Retro Grid 3D), Scroll Stack, Particle Text, Edge Blur, Magnetic Button, Radial Menu, the AI voice family (Wave, Bars, Ring, Blob), Gooey Nav (WebGL metaball pill), Coverflow 3D, Card Swap 3D, 3D Text Ring, Elastic Slider, Stepper and Pixel Transition.
+- New in 2.9: Liquid Glass (iOS style WebGL glass), 10 live page templates on the site, Arc Gallery auto scroll, Scroll Stack on the page scroll, Sunrise trees and birds.
+- New in 2.8: Glass Lens (WebGL liquid glass), Dither Waves (WebGL 1-bit background), Infinite Canvas, Image Accordion, Orbit Icons, Command Palette, Crossed Marquee (tech-stack bands with simple-icons) and Theme Switcher (8 themes with a circle reveal).
+- Toast Stack and Radial Menu no longer blink in production builds; Radial Menu, 3D Text Ring, Animated Tabs and Gooey Nav now fit 320px phones.
+- 38 new components since 2.6, including WebGL and three.js (Sunrise Background, Horizon Glow, Circular Carousel, Arc Gallery, Galaxy 3D, Warp Tunnel, Wireframe Knot 3D, Marquee 3D, Distortion Image, Liquid Blob 3D, Particle Morph, Retro Grid 3D), Scroll Stack, Particle Text, Edge Blur, Magnetic Button, Radial Menu, the AI voice family (Wave, Bars, Ring, Blob), Gooey Nav (WebGL metaball pill), Coverflow 3D, Card Swap 3D, 3D Text Ring, Elastic Slider, Stepper and Pixel Transition.
 - Accordion Marquee is rebuilt: one liquid band glides between rows on springs, leans toward the pointer, and its marquee speeds up with sideways mouse moves. No GSAP needed any more.
 - AI Model Prompt now exports `DEFAULT_LLM_MODELS` and an index file, so you can import both from the folder.
 - Loading Screens follow the real page load by default: drop `<LoadingScreen fullScreen />` into your app and it covers the page while it loads, with a live bar and percentage, then hides itself. Pass `progress` to drive it yourself.

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

@@ -58,7 +58,7 @@ const AnimatedTabs = ({ tabs = DEFAULT_TABS, defaultTab, variant = "pill", accen
                             aria-controls={`${id}-panel`}
                             tabIndex={on ? 0 : -1}
                             onClick={() => select(i)}
-                            className={`relative flex-1 whitespace-nowrap px-3 py-2 text-[0.82rem] sm:px-4 sm:text-[0.88rem] font-medium outline-none transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-current/40 ${variant === "underline" ? "pb-3" : variant === "pill" ? "rounded-full" : "rounded-lg"} ${on ? (variant === "pill" ? "text-neutral-950" : "") : dark ? "text-white/55 hover:text-white" : "text-neutral-500 hover:text-neutral-900"}`}
+                            className={`relative flex-1 whitespace-nowrap px-3 py-2 text-[0.82rem] max-[380px]:px-2 max-[380px]:text-[0.76rem] sm:px-4 sm:text-[0.88rem] font-medium outline-none transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-current/40 ${variant === "underline" ? "pb-3" : variant === "pill" ? "rounded-full" : "rounded-lg"} ${on ? (variant === "pill" ? "text-neutral-950" : "") : dark ? "text-white/55 hover:text-white" : "text-neutral-500 hover:text-neutral-900"}`}
                         >
                             {on && (
                                 <motion.span

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

@@ -3,9 +3,10 @@ import { Mesh, OrthographicCamera, PlaneGeometry, Scene, ShaderMaterial, SRGBCol
 
 /*
  * Arc Gallery: an endless row of image cards laid along a gentle arc and
- * drawn in WebGL. Drag, flick or scroll the wheel to move it; it eases to a
- * stop and settles on a card. While it moves the cards ripple slightly,
- * the edges fade out, and a title sits under each card. Arrow keys step.
+ * drawn in WebGL. It drifts on its own (pausing on hover); drag, flick or
+ * swipe sideways to move it and it eases to a stop on a card. While it
+ * moves the cards ripple and bow, the edges fade out, and a title sits under
+ * each card. Arrow keys step. Vertical wheel scrolling is left to the page.
  */
 
 const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets";
@@ -54,13 +55,13 @@ void main(){
   gl_FragColor = vec4(col, edge * f * uReady);
 }`;
 
-const ArcGallery = ({ items = DEFAULT_ITEMS, bend = 1, cardHeight = 0.62, aspectRatio = 0.78, gap = 0.22, cornerRadius = 0.05, wave = 1, pull = 1, fadeEdges = 0.14, ease = 0.08, snap = true, showTitles = true, height = "26rem", onChange, className = "" }) => {
+const ArcGallery = ({ items = DEFAULT_ITEMS, bend = 1, cardHeight = 0.62, aspectRatio = 0.78, gap = 0.22, cornerRadius = 0.05, wave = 1, pull = 1, fadeEdges = 0.14, ease = 0.08, snap = true, autoScroll = 40, pauseOnHover = true, showTitles = true, height = "26rem", onChange, className = "" }) => {
     const wrap = useRef(null);
     const labels = useRef([]);
     const api = useRef(null);
     const [active, setActive] = useState(0);
     const live = useRef({});
-    live.current = { bend, wave, pull, fadeEdges, ease, snap, onChange };
+    live.current = { bend, wave, pull, fadeEdges, ease, snap, autoScroll, pauseOnHover, onChange };
     const list = items.length ? items : DEFAULT_ITEMS;
     const key = list.map((i) => i.image).join("|");
 
@@ -84,7 +85,6 @@ const ArcGallery = ({ items = DEFAULT_ITEMS, bend = 1, cardHeight = 0.62, aspect
         const textures = list.map((item) => {
             const entry = { tex: null, aspect: 1, at: 0 };
             loader.load(item.image, (t) => {
-                t.colorSpace = SRGBColorSpace;
                 entry.tex = t;
                 entry.aspect = t.image.width / t.image.height;
                 entry.at = performance.now();
@@ -116,7 +116,8 @@ const ArcGallery = ({ items = DEFAULT_ITEMS, bend = 1, cardHeight = 0.62, aspect
             return { mesh, m };
         };
 
-        const s = { scroll: 0, target: 0, vel: 0, pull: 0, drag: null, time: 0 };
+        const s = { scroll: 0, target: 0, vel: 0, pull: 0, drag: null, time: 0, hover: false, hold: 0 };
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
         let cardW = 1;
         let cardH = 1;
         let spacing = 1;
@@ -172,6 +173,10 @@ const ArcGallery = ({ items = DEFAULT_ITEMS, bend = 1, cardHeight = 0.62, aspect
             const o = live.current;
             const dt = last ? Math.min(0.05, (now - last) / 1000) : 1 / 60;
             last = now;
+            // Auto scroll drifts the row along, pausing while hovered, dragged or
+            // just after someone moved it by hand.
+            const auto = o.autoScroll && !reduced && !s.drag && !(o.pauseOnHover && s.hover) && now > s.hold;
+            if (auto) s.target += o.autoScroll * dt;
             const before = s.scroll;
             const follow = 1 - Math.pow(1 - Math.min(1, Math.max(0.01, o.ease)), dt * 60);
             s.scroll += (s.target - s.scroll) * follow;
@@ -185,7 +190,7 @@ const ArcGallery = ({ items = DEFAULT_ITEMS, bend = 1, cardHeight = 0.62, aspect
             const pullGoal = Math.max(-1, Math.min(1, s.vel / (spacing * 7))) * 0.32 * o.pull;
             s.pull += (pullGoal - s.pull) * (1 - Math.exp(-dt / 0.12));
             if (Math.abs(s.pull) < 0.0005 && !pullGoal) s.pull = 0;
-            let busy = s.pull !== 0 || s.scroll !== s.target || s.vel !== 0 || !!s.drag;
+            let busy = auto || s.pull !== 0 || s.scroll !== s.target || s.vel !== 0 || !!s.drag;
 
             const first = Math.floor((s.scroll - view.w / 2) / spacing) - 1;
             slots.forEach((slot, k) => {
@@ -251,6 +256,7 @@ const ArcGallery = ({ items = DEFAULT_ITEMS, bend = 1, cardHeight = 0.62, aspect
         const onDown = (e) => {
             if (e.button !== 0) return;
             s.drag = { x: e.clientX, start: s.target, moved: false, samples: [] };
+            wake();
         };
         const onMove = (e) => {
             const g = s.drag;
@@ -269,6 +275,7 @@ const ArcGallery = ({ items = DEFAULT_ITEMS, bend = 1, cardHeight = 0.62, aspect
         const onUp = (e) => {
             const g = s.drag;
             s.drag = null;
+            s.hold = performance.now() + 1800;
             if (!g) return;
             if (g.moved && g.samples.length > 1) {
                 const a = g.samples[0];
@@ -286,10 +293,12 @@ const ArcGallery = ({ items = DEFAULT_ITEMS, bend = 1, cardHeight = 0.62, aspect
             settle();
         };
         const onWheel = (e) => {
-            const d = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
-            if (!d) return;
+            // Only sideways wheel / trackpad swipes move the row; vertical
+            // scrolling belongs to the page.
+            if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return;
             e.preventDefault();
-            s.target += d * 1.2;
+            s.target += e.deltaX * 1.2;
+            s.hold = performance.now() + 1800;
             clearTimeout(snapTimer);
             snapTimer = setTimeout(settle, 140);
             wake();
@@ -299,6 +308,13 @@ const ArcGallery = ({ items = DEFAULT_ITEMS, bend = 1, cardHeight = 0.62, aspect
         canvas.addEventListener("pointerup", onUp);
         canvas.addEventListener("pointercancel", onUp);
         canvas.addEventListener("wheel", onWheel, { passive: false });
+        const onEnter = () => (s.hover = true);
+        const onLeave = () => {
+            s.hover = false;
+            wake();
+        };
+        canvas.addEventListener("pointerenter", onEnter);
+        canvas.addEventListener("pointerleave", onLeave);
         const io = new IntersectionObserver(([entry]) => {
             visible = entry.isIntersecting;
             wake();
@@ -316,6 +332,8 @@ const ArcGallery = ({ items = DEFAULT_ITEMS, bend = 1, cardHeight = 0.62, aspect
             canvas.removeEventListener("pointerup", onUp);
             canvas.removeEventListener("pointercancel", onUp);
             canvas.removeEventListener("wheel", onWheel);
+            canvas.removeEventListener("pointerenter", onEnter);
+            canvas.removeEventListener("pointerleave", onLeave);
             textures.forEach((t) => t.tex?.dispose());
             slots.forEach((slot) => slot.m.dispose());
             geometry.dispose();

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

@@ -124,7 +124,6 @@ const CircularCarousel = ({
                 },
             });
             loader.load(item.src, (t) => {
-                t.colorSpace = SRGBColorSpace;
                 m.uniforms.uTex.value = t;
                 const ia = t.image.width / t.image.height;
                 // Cover crop: show the middle of the image at the card's shape.

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

@@ -0,0 +1,250 @@
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { CornerDownLeft, FileText, Github, LayoutGrid, LogOut, Moon, Plus, Search, Settings, Sparkles, User } from "lucide-react";
+
+/*
+ * Command Palette: a ⌘K / Ctrl+K search box for jumping anywhere. Typing
+ * filters with a forgiving fuzzy match (letters in order, gaps allowed) and
+ * highlights the matched letters; arrow keys move a highlight that slides
+ * between rows, Enter runs the command, Escape closes. The panel eases in and
+ * out with CSS transitions only, so it never blinks.
+ */
+
+const DEFAULT_GROUPS = [
+    {
+        heading: "Suggestions",
+        items: [
+            { id: "new", label: "Create new project", icon: Plus, shortcut: "N" },
+            { id: "components", label: "Browse components", icon: LayoutGrid, hint: "107 ready to use" },
+            { id: "ai", label: "Ask AI to build a section", icon: Sparkles, keywords: "assistant generate" },
+        ],
+    },
+    {
+        heading: "Pages",
+        items: [
+            { id: "docs", label: "Documentation", icon: FileText },
+            { id: "github", label: "Open GitHub", icon: Github, keywords: "repo source" },
+        ],
+    },
+    {
+        heading: "Settings",
+        items: [
+            { id: "profile", label: "Profile", icon: User, shortcut: "P" },
+            { id: "theme", label: "Toggle dark mode", icon: Moon, keywords: "theme light" },
+            { id: "settings", label: "Preferences", icon: Settings, shortcut: "," },
+            { id: "logout", label: "Log out", icon: LogOut },
+        ],
+    },
+];
+
+// Letters in order, gaps allowed. Lower score is better; returns matched indexes.
+function fuzzy(text, query) {
+    if (!query) return { score: 0, hits: [] };
+    const t = text.toLowerCase();
+    const q = query.toLowerCase();
+    let ti = 0;
+    let score = 0;
+    let prev = -1;
+    const hits = [];
+    for (const ch of q) {
+        if (ch === " ") continue;
+        const at = t.indexOf(ch, ti);
+        if (at < 0) return null;
+        score += at - prev - 1 + (at === 0 || t[at - 1] === " " ? 0 : 0.5);
+        hits.push(at);
+        prev = at;
+        ti = at + 1;
+    }
+    return { score, hits };
+}
+
+const Highlight = ({ text, hits }) => {
+    if (!hits.length) return text;
+    const set = new Set(hits);
+    return [...text].map((ch, i) => (set.has(i) ? <mark key={i} className="bg-transparent font-semibold text-[var(--cp-accent)]">{ch}</mark> : ch));
+};
+
+const CommandPalette = ({ groups = DEFAULT_GROUPS, placeholder = "Type a command or search…", hotkey = "k", accentColor = "#a3e635", theme = "dark", contained = false, triggerLabel = "Search", defaultOpen = false, onSelect, className = "" }) => {
+    const [open, setOpen] = useState(defaultOpen);
+    const [mounted, setMounted] = useState(defaultOpen);
+    const [shown, setShown] = useState(defaultOpen);
+    const [query, setQuery] = useState("");
+    const [active, setActive] = useState(0);
+    const [done, setDone] = useState(null);
+    const input = useRef(null);
+    const listRef = useRef(null);
+    const bar = useRef(null);
+    const rows = useRef([]);
+    const dark = theme !== "light";
+
+    const results = useMemo(() => {
+        const out = [];
+        groups.forEach((g) => {
+            const items = g.items
+                .map((it) => {
+                    const m = fuzzy(it.label, query) ?? (it.keywords && fuzzy(it.keywords, query) ? { score: 50, hits: [] } : null);
+                    return m && { ...it, ...m };
+                })
+                .filter(Boolean)
+                .sort((a, b) => a.score - b.score);
+            if (items.length) out.push({ heading: g.heading, items });
+        });
+        return out;
+    }, [groups, query]);
+    const flat = useMemo(() => results.flatMap((g) => g.items), [results]);
+
+    // Mount, then show on the next frame so the enter transition runs; hide, then unmount.
+    useEffect(() => {
+        if (open) {
+            setMounted(true);
+            const id = requestAnimationFrame(() => requestAnimationFrame(() => setShown(true)));
+            return () => cancelAnimationFrame(id);
+        }
+        setShown(false);
+        const t = setTimeout(() => setMounted(false), 220);
+        return () => clearTimeout(t);
+    }, [open]);
+
+    useEffect(() => {
+        if (shown) input.current?.focus({ preventScroll: true });
+    }, [shown]);
+
+    useEffect(() => {
+        const onKey = (e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === hotkey) {
+                e.preventDefault();
+                setOpen((o) => !o);
+            }
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [hotkey]);
+
+    useEffect(() => setActive(0), [query]);
+
+    // Slide the highlight to the active row and keep it in view.
+    useLayoutEffect(() => {
+        const row = rows.current[active];
+        const b = bar.current;
+        if (!row || !b) {
+            if (b) b.style.opacity = "0";
+            return;
+        }
+        b.style.opacity = "1";
+        b.style.transform = `translateY(${row.offsetTop}px)`;
+        b.style.height = `${row.offsetHeight}px`;
+        row.scrollIntoView({ block: "nearest" });
+    }, [active, flat.length, mounted]);
+
+    const close = useCallback(() => {
+        setOpen(false);
+        setTimeout(() => setQuery(""), 220);
+    }, []);
+    const run = (item) => {
+        if (!item) return;
+        onSelect?.(item);
+        setDone(item.label);
+        setTimeout(() => setDone(null), 1600);
+        close();
+    };
+
+    const onKeyDown = (e) => {
+        if (e.key === "ArrowDown") setActive((a) => (flat.length ? (a + 1) % flat.length : 0));
+        else if (e.key === "ArrowUp") setActive((a) => (flat.length ? (a - 1 + flat.length) % flat.length : 0));
+        else if (e.key === "Home") setActive(0);
+        else if (e.key === "End") setActive(Math.max(0, flat.length - 1));
+        else if (e.key === "Enter") run(flat[active]);
+        else if (e.key === "Escape") close();
+        else return;
+        e.preventDefault();
+    };
+
+    const t = dark
+        ? { panel: "border-white/10 bg-neutral-950/90 text-white", muted: "text-white/45", line: "border-white/10", row: "text-white/85", hl: "bg-white/[0.07]", kbd: "border-white/15 bg-white/5 text-white/60", trigger: "border-white/10 bg-neutral-900 text-white/70 hover:text-white" }
+        : { panel: "border-black/10 bg-white/95 text-neutral-900", muted: "text-neutral-400", line: "border-black/10", row: "text-neutral-700", hl: "bg-black/[0.05]", kbd: "border-black/10 bg-black/[0.03] text-neutral-500", trigger: "border-black/10 bg-white text-neutral-500 hover:text-neutral-900" };
+    let n = -1;
+    const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+
+    return (
+        <div className={className} style={{ "--cp-accent": accentColor }}>
+            <button type="button" onClick={() => setOpen(true)} className={`inline-flex w-full max-w-xs items-center gap-2.5 rounded-xl border px-3.5 py-2.5 text-sm transition-colors ${t.trigger}`}>
+                <Search className="h-4 w-4" />
+                <span className="flex-1 text-left">{triggerLabel}</span>
+                <kbd className={`rounded-md border px-1.5 py-0.5 font-mono text-[0.68rem] ${t.kbd}`}>{isMac ? "⌘" : "Ctrl"} {hotkey.toUpperCase()}</kbd>
+            </button>
+            {done && <p className={`mt-3 text-center text-xs ${t.muted}`}>Ran “{done}”</p>}
+
+            {mounted && (
+                <div className={`${contained ? "absolute" : "fixed"} inset-0 z-[300] flex items-start justify-center px-3 pt-[12vh]`} onPointerDown={(e) => e.target === e.currentTarget && close()}>
+                    <div aria-hidden="true" className="absolute inset-0 bg-black/50 backdrop-blur-[2px] transition-opacity duration-200 ease-out" style={{ opacity: shown ? 1 : 0 }} onPointerDown={close} />
+                    <div
+                        role="dialog"
+                        aria-modal="true"
+                        aria-label="Command palette"
+                        className={`relative w-full max-w-lg overflow-hidden rounded-2xl border shadow-[0_30px_80px_-20px_rgba(0,0,0,0.6)] backdrop-blur-xl ${t.panel}`}
+                        style={{ opacity: shown ? 1 : 0, transform: shown ? "none" : "translateY(-10px) scale(0.97)", transition: "opacity 180ms ease-out, transform 260ms cubic-bezier(0.22, 1, 0.36, 1)" }}
+                    >
+                        <div className={`flex items-center gap-3 border-b px-4 ${t.line}`}>
+                            <Search className={`h-4 w-4 shrink-0 ${t.muted}`} />
+                            <input
+                                ref={input}
+                                value={query}
+                                onChange={(e) => setQuery(e.target.value)}
+                                onKeyDown={onKeyDown}
+                                placeholder={placeholder}
+                                role="combobox"
+                                aria-expanded="true"
+                                aria-controls="cp-list"
+                                aria-activedescendant={flat[active] ? `cp-${flat[active].id}` : undefined}
+                                className="h-12 w-full bg-transparent text-[0.95rem] outline-none placeholder:opacity-50"
+                            />
+                            <kbd className={`hidden rounded-md border px-1.5 py-0.5 font-mono text-[0.65rem] sm:block ${t.kbd}`}>ESC</kbd>
+                        </div>
+                        <div ref={listRef} id="cp-list" role="listbox" className="relative max-h-[min(22rem,55vh)] overflow-y-auto overscroll-contain p-2 [scrollbar-width:thin]">
+                            <div ref={bar} aria-hidden="true" className={`pointer-events-none absolute inset-x-2 top-0 rounded-xl ${t.hl}`} style={{ transition: "transform 180ms cubic-bezier(0.22, 1, 0.36, 1), height 180ms ease, opacity 120ms" }}>
+                                <span className="absolute left-0 top-1/2 h-4 w-[3px] -translate-y-1/2 rounded-full bg-[var(--cp-accent)]" />
+                            </div>
+                            {results.length === 0 && <p className={`px-3 py-10 text-center text-sm ${t.muted}`}>No results for “{query}”</p>}
+                            {results.map((g) => (
+                                <div key={g.heading} role="group" aria-label={g.heading}>
+                                    <p className={`px-3 pb-1 pt-2.5 text-[0.68rem] font-semibold uppercase tracking-[0.14em] ${t.muted}`}>{g.heading}</p>
+                                    {g.items.map((it) => {
+                                        n += 1;
+                                        const i = n;
+                                        const Icon = it.icon;
+                                        return (
+                                            <div
+                                                key={it.id}
+                                                id={`cp-${it.id}`}
+                                                ref={(e) => (rows.current[i] = e)}
+                                                role="option"
+                                                aria-selected={i === active}
+                                                onPointerMove={() => i !== active && setActive(i)}
+                                                onClick={() => run(it)}
+                                                className={`relative flex cursor-pointer items-center gap-3 rounded-xl px-3 py-2.5 text-sm ${t.row}`}
+                                            >
+                                                {Icon && <Icon className={`h-4 w-4 shrink-0 transition-colors ${i === active ? "text-[var(--cp-accent)]" : t.muted}`} />}
+                                                <span className="flex-1 truncate">
+                                                    <Highlight text={it.label} hits={it.hits} />
+                                                    {it.hint && <span className={`ml-2 text-xs ${t.muted}`}>{it.hint}</span>}
+                                                </span>
+                                                {it.shortcut && <kbd className={`rounded-md border px-1.5 py-0.5 font-mono text-[0.65rem] ${t.kbd}`}>{isMac ? "⌘" : "Ctrl"} {it.shortcut}</kbd>}
+                                                {i === active && <CornerDownLeft className={`h-3.5 w-3.5 ${t.muted}`} />}
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            ))}
+                        </div>
+                        <div className={`flex items-center gap-4 border-t px-4 py-2.5 text-[0.7rem] ${t.line} ${t.muted}`}>
+                            <span>↑↓ to move</span>
+                            <span>↵ to run</span>
+                            <span className="ml-auto">esc to close</span>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default CommandPalette;