apex-ui-kit 2.6.0 → 2.8.0

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

@@ -0,0 +1,381 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Color, DoubleSide, Group, Mesh, PerspectiveCamera, PlaneGeometry, Scene, ShaderMaterial, SRGBColorSpace, TextureLoader, Vector2, Vector3, WebGLRenderer } from "three";
+
+/*
+ * Circular Carousel: image cards bent around a cylinder and drawn in WebGL.
+ * The ring drifts on its own; drag or flick to throw it, and it glides,
+ * then settles on a card. Hover pauses, a click brings that card to the
+ * front, arrows / keys step through. Cards turning away fade into the
+ * background and you can see their backs through the ring.
+ */
+
+const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets";
+const img = (n) => `${IK}/${n}.png?tr=f-auto,q-80,w-640`;
+const DEFAULT_ITEMS = [
+    { src: img("spiderman"), title: "Spider-Man" },
+    { src: img("black-panther"), title: "Black Panther" },
+    { src: img("hulk"), title: "Hulk" },
+    { src: img("thanos"), title: "Thanos" },
+    { src: img("captainamerica"), title: "Captain America" },
+    { src: img("doctorStrange"), title: "Doctor Strange" },
+    { src: img("ironman"), title: "Iron Man" },
+    { src: img("spiderman"), title: "Spider-Man" },
+    { src: img("hulk"), title: "Hulk" },
+];
+
+const VERT = `
+uniform float uRadius; uniform float uBase;
+varying vec2 vUv; varying float vFacing;
+void main(){
+  vUv = uv;
+  // Bend the flat card onto the cylinder.
+  float a = uBase + position.x / uRadius;
+  vec3 p = vec3(sin(a) * uRadius, position.y, cos(a) * uRadius);
+  vec3 n = vec3(sin(a), 0.0, cos(a));
+  vFacing = (modelViewMatrix * vec4(n, 0.0)).z;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0);
+}`;
+
+const FRAG = `
+uniform sampler2D uTex; uniform float uReady; uniform vec2 uCover; uniform float uCorner;
+uniform vec3 uFade; uniform float uDepth; uniform float uAspect; uniform float uInner;
+varying vec2 vUv; varying float vFacing;
+void main(){
+  vec2 uv = gl_FrontFacing ? vUv : vec2(1.0 - vUv.x, vUv.y);
+  // Rounded corners.
+  vec2 q = abs(uv - 0.5) * vec2(uAspect, 1.0);
+  vec2 b = vec2(uAspect, 1.0) * 0.5 - uCorner;
+  float d = length(max(q - b, 0.0)) - uCorner;
+  float edge = 1.0 - smoothstep(-0.004, 0.004, d);
+  if (edge <= 0.0) discard;
+  vec3 col = texture2D(uTex, (uv - 0.5) * uCover + 0.5).rgb;
+  // Backs of far cards melt into the background, so it works on light and dark.
+  if (!gl_FrontFacing) col = mix(col, uFade, uInner);
+  float away = clamp((1.0 - vFacing) * 0.5, 0.0, 1.0);
+  col = mix(col, uFade, uDepth * pow(away, 1.2));
+  gl_FragColor = vec4(col, edge * uReady);
+}`;
+
+const CircularCarousel = ({
+    items = DEFAULT_ITEMS,
+    cardWidth = 1,
+    aspectRatio = 0.8,
+    gap = 0.12,
+    speed = 12,
+    autoplay = true,
+    pauseOnHover = true,
+    snap = true,
+    tilt = -6,
+    depthFade = 0.6,
+    fadeColor = "#0a0a0a",
+    cornerRadius = 0.06,
+    captions = true,
+    height = "28rem",
+    onChange,
+    className = "",
+}) => {
+    const wrap = useRef(null);
+    const api = useRef(null);
+    const [active, setActive] = useState(0);
+    const live = useRef({});
+    live.current = { speed, autoplay, pauseOnHover, snap, tilt, depthFade, fadeColor, onChange };
+    const list = items.length ? items : DEFAULT_ITEMS;
+    const key = list.map((i) => i.src).join("|");
+
+    useEffect(() => {
+        const el = wrap.current;
+        const n = list.length;
+        const step = (Math.PI * 2) / n;
+        const w = cardWidth;
+        const h = w / aspectRatio;
+        // Radius so the cards (plus gap) wrap the ring exactly.
+        const R = (n * w * (1 + gap)) / (Math.PI * 2);
+
+        const renderer = new WebGLRenderer({ antialias: true, alpha: true, powerPreference: "high-performance" });
+        renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+        renderer.outputColorSpace = SRGBColorSpace;
+        Object.assign(renderer.domElement.style, { display: "block", width: "100%", height: "100%", touchAction: "pan-y" });
+        el.prepend(renderer.domElement);
+        const scene = new Scene();
+        const camera = new PerspectiveCamera(32, 1, 0.1, 200);
+        const ring = new Group();
+        scene.add(ring);
+
+        const geometry = new PlaneGeometry(w, h, 32, 1);
+        const loader = new TextureLoader().setCrossOrigin("anonymous");
+        const fade = new Color(live.current.fadeColor);
+        const materials = list.map((item, i) => {
+            const m = new ShaderMaterial({
+                vertexShader: VERT,
+                fragmentShader: FRAG,
+                transparent: true,
+                side: DoubleSide,
+                uniforms: {
+                    uRadius: { value: R },
+                    uBase: { value: i * step },
+                    uTex: { value: null },
+                    uReady: { value: 0 },
+                    uCover: { value: new Vector2(1, 1) },
+                    uCorner: { value: cornerRadius },
+                    uFade: { value: fade },
+                    uDepth: { value: depthFade },
+                    uAspect: { value: aspectRatio },
+                    uInner: { value: 0.72 },
+                },
+            });
+            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.
+                m.uniforms.uCover.value.set(ia > aspectRatio ? aspectRatio / ia : 1, ia > aspectRatio ? 1 : ia / aspectRatio);
+                m.userData.loadedAt = performance.now();
+                wake();
+            });
+            const mesh = new Mesh(geometry, m);
+            mesh.renderOrder = 0;
+            ring.add(mesh);
+            return m;
+        });
+
+        const fit = () => {
+            const { width, height: hh } = el.getBoundingClientRect();
+            if (!width || !hh) return;
+            renderer.setSize(width, hh, false);
+            camera.aspect = width / hh;
+            const vfov = (camera.fov * Math.PI) / 180;
+            const hfov = 2 * Math.atan(Math.tan(vfov / 2) * camera.aspect);
+            // Distance so the whole ring fits the width and the cards fit the height.
+            const dW = (R * 0.98) / Math.tan(hfov / 2);
+            const dH = (h * 0.75) / Math.tan(vfov / 2);
+            // On narrow screens let the sides crop rather than shrink the front card below half the width.
+            const dCard = R + w / (2 * 0.5 * Math.tan(hfov / 2));
+            camera.userData.dist = Math.max(Math.min(R + dW, dCard), R + dH);
+            camera.updateProjectionMatrix();
+            wake();
+        };
+        const ro = new ResizeObserver(fit);
+        ro.observe(el);
+
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        const s = { angle: 0, vel: 0, target: null, hover: false, drag: null, px: 0, py: 0, yaw: 0, pitch: 0, dir: -1, hold: 0 };
+        let raf = 0;
+        let last = 0;
+        let visible = true;
+        let shown = -1;
+
+        const nearest = (a) => Math.round(a / step) * step;
+        const frontIndex = () => ((Math.round(-s.angle / step) % n) + n) % n;
+
+        const frame = (now) => {
+            raf = 0;
+            const o = live.current;
+            const dt = last ? Math.min(0.05, (now - last) / 1000) : 1 / 60;
+            last = now;
+            const paused = (o.pauseOnHover && s.hover) || s.drag || now < s.hold || reduced;
+            const cruise = o.autoplay && !paused ? ((o.speed * Math.PI) / 180) * s.dir : 0;
+            let busy = !!s.drag || cruise !== 0;
+            if (!s.drag) {
+                if (s.target !== null) {
+                    // Critically damped spring onto the target card.
+                    const k = 90;
+                    const c = 2 * Math.sqrt(k);
+                    s.vel += (k * (s.target - s.angle) - c * s.vel) * dt;
+                    s.angle += s.vel * dt;
+                    if (Math.abs(s.target - s.angle) < 0.0005 && Math.abs(s.vel) < 0.001) {
+                        s.angle = s.target;
+                        s.vel = 0;
+                        s.target = null;
+                    }
+                    busy = true;
+                } else {
+                    s.vel += (cruise - s.vel) * (1 - Math.exp(-dt / 0.6));
+                    s.angle += s.vel * dt;
+                    if (!cruise && o.snap && Math.abs(s.vel) < 0.25) s.target = nearest(s.angle);
+                    if (Math.abs(s.vel) > 0.0005 || s.target !== null) busy = true;
+                }
+            }
+            s.yaw += (s.px * 0.08 - s.yaw) * (1 - Math.exp(-dt / 0.3));
+            s.pitch += (s.py * 0.05 - s.pitch) * (1 - Math.exp(-dt / 0.3));
+            if (Math.abs(s.px * 0.08 - s.yaw) > 0.0005) busy = true;
+
+            ring.rotation.y = s.angle;
+            const d = camera.userData.dist || R * 3;
+            const t = ((o.tilt * Math.PI) / 180) + s.pitch;
+            camera.position.set(Math.sin(s.yaw) * d, -Math.sin(t) * d, Math.cos(s.yaw) * Math.cos(t) * d);
+            camera.lookAt(0, 0, 0);
+            fade.set(o.fadeColor);
+            materials.forEach((m) => {
+                m.uniforms.uDepth.value = o.depthFade;
+                const at = m.userData.loadedAt;
+                if (at) {
+                    m.uniforms.uReady.value = Math.min(1, (now - at) / 400);
+                    if (m.uniforms.uReady.value < 1) busy = true;
+                }
+            });
+            renderer.render(scene, camera);
+
+            const idx = frontIndex();
+            if (idx !== shown) {
+                shown = idx;
+                setActive(idx);
+                o.onChange?.(idx);
+            }
+            if (busy && visible) raf = requestAnimationFrame(frame);
+            else last = 0;
+        };
+        function wake() {
+            if (!raf && visible) raf = requestAnimationFrame(frame);
+        }
+
+        const goTo = (i) => {
+            let target = -i * step;
+            target += Math.PI * 2 * Math.round((s.angle - target) / (Math.PI * 2));
+            s.target = target;
+            s.hold = performance.now() + 2500;
+            wake();
+        };
+        api.current = {
+            next: () => goTo(frontIndex() + 1),
+            prev: () => goTo(frontIndex() - 1),
+            goTo,
+        };
+
+        const canvas = renderer.domElement;
+        const onDown = (e) => {
+            if (e.button !== 0) return;
+            s.drag = { x: e.clientX, y: e.clientY, a: s.angle, moved: false, samples: [{ t: performance.now(), a: s.angle }] };
+            s.target = null;
+            wake();
+        };
+        const onMove = (e) => {
+            const r = canvas.getBoundingClientRect();
+            s.px = ((e.clientX - r.left) / r.width) * 2 - 1;
+            s.py = ((e.clientY - r.top) / r.height) * 2 - 1;
+            const g = s.drag;
+            if (g) {
+                const dx = e.clientX - g.x;
+                if (!g.moved && Math.abs(dx) > 5) {
+                    g.moved = true;
+                    canvas.setPointerCapture(e.pointerId);
+                }
+                if (g.moved) {
+                    // Drag speed follows the ring's on-screen size.
+                    s.angle = g.a + (dx / r.width) * 2.4;
+                    const now = performance.now();
+                    g.samples.push({ t: now, a: s.angle });
+                    while (g.samples.length > 2 && now - g.samples[0].t > 100) g.samples.shift();
+                    s.vel = 0;
+                }
+            }
+            wake();
+        };
+        const onUp = (e) => {
+            const g = s.drag;
+            if (!g) return;
+            s.drag = null;
+            if (g.moved) {
+                const a = g.samples[0];
+                const b = g.samples[g.samples.length - 1];
+                const span = (b.t - a.t) / 1000;
+                s.vel = span > 0.01 ? Math.max(-12, Math.min(12, (b.a - a.a) / span)) : 0;
+                if (Math.abs(s.vel) > 0.6) s.dir = Math.sign(s.vel);
+                s.hold = performance.now() + 1200;
+            } else {
+                // A click: the front-facing card whose center lands nearest the pointer.
+                const r = canvas.getBoundingClientRect();
+                const x = ((e.clientX - r.left) / r.width - 0.5) * 2;
+                const p = new Vector3();
+                let best = -1;
+                let bestDx = Infinity;
+                for (let i = 0; i < n; i++) {
+                    const a = i * step + s.angle;
+                    if (Math.cos(a) < 0.15) continue;
+                    const dx = Math.abs(p.set(Math.sin(a) * R, 0, Math.cos(a) * R).project(camera).x - x);
+                    if (dx < bestDx) {
+                        bestDx = dx;
+                        best = i;
+                    }
+                }
+                if (best >= 0) goTo(best);
+            }
+            wake();
+        };
+        const onEnter = () => {
+            s.hover = true;
+            wake();
+        };
+        const onLeave = () => {
+            s.hover = false;
+            s.px = 0;
+            s.py = 0;
+            if (s.drag) onUp({ clientX: 0, clientY: 0 });
+            wake();
+        };
+        canvas.addEventListener("pointerdown", onDown);
+        canvas.addEventListener("pointermove", onMove);
+        canvas.addEventListener("pointerup", onUp);
+        canvas.addEventListener("pointercancel", onUp);
+        canvas.addEventListener("pointerenter", onEnter);
+        canvas.addEventListener("pointerleave", onLeave);
+        const io = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            wake();
+        });
+        io.observe(el);
+        fit();
+
+        return () => {
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            io.disconnect();
+            canvas.removeEventListener("pointerdown", onDown);
+            canvas.removeEventListener("pointermove", onMove);
+            canvas.removeEventListener("pointerup", onUp);
+            canvas.removeEventListener("pointercancel", onUp);
+            canvas.removeEventListener("pointerenter", onEnter);
+            canvas.removeEventListener("pointerleave", onLeave);
+            materials.forEach((m) => {
+                m.uniforms.uTex.value?.dispose();
+                m.dispose();
+            });
+            geometry.dispose();
+            renderer.dispose();
+            renderer.forceContextLoss();
+            canvas.remove();
+            api.current = null;
+        };
+        // Rebuild when the cards or their shape change; motion settings are live.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [key, cardWidth, aspectRatio, gap, cornerRadius]);
+
+    const current = list[active] ?? list[0];
+    return (
+        <div
+            ref={wrap}
+            role="region"
+            aria-roledescription="carousel"
+            aria-label="Image carousel"
+            tabIndex={0}
+            onKeyDown={(e) => {
+                if (e.key === "ArrowRight") api.current?.next();
+                else if (e.key === "ArrowLeft") api.current?.prev();
+                else return;
+                e.preventDefault();
+            }}
+            className={`relative w-full cursor-grab select-none outline-none active:cursor-grabbing focus-visible:ring-2 focus-visible:ring-white/30 ${className}`}
+            style={{ height }}
+        >
+            {captions && current && (
+                <div className="pointer-events-none absolute inset-x-0 bottom-3 text-center" aria-live="polite">
+                    <p className="text-sm font-semibold">{current.title}</p>
+                    <p className="font-mono text-[0.7rem] tabular-nums opacity-50">
+                        {String(active + 1).padStart(2, "0")} / {String(list.length).padStart(2, "0")}
+                    </p>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default CircularCarousel;

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;