apex-ui-kit 2.2.0 → 2.3.1

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

@@ -0,0 +1,172 @@
+import React, { useEffect, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Bot, Check, Copy, Globe, RefreshCw, ThumbsDown, ThumbsUp } from "lucide-react";
+
+/*
+ * AI Response: an assistant answer that streams in, with paragraphs, a code
+ * block (with its own copy button), source chips and an action bar — copy,
+ * regenerate, thumbs up / down. Blocks are plain objects, so it is easy to
+ * feed from your own model.
+ */
+
+const DEFAULT_BLOCKS = [
+    { type: "text", text: "To make a card lift smoothly on hover, animate only transform and box-shadow. Here's a tiny Tailwind version:" },
+    { type: "code", lang: "jsx", text: '<div className="transition duration-300 hover:-translate-y-1 hover:shadow-xl">\n  Card\n</div>' },
+    { type: "text", text: "Transforms run on the GPU, so the motion stays smooth even on low-end phones." },
+];
+const DEFAULT_SOURCES = [
+    { title: "MDN: CSS transitions", href: "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions" },
+    { title: "web.dev: Animations", href: "https://web.dev/articles/animations-guide" },
+];
+
+function CodeBlock({ lang, text, dark }) {
+    const [copied, setCopied] = useState(false);
+    return (
+        <div className={`overflow-hidden rounded-xl border ${dark ? "border-white/10 bg-black/40" : "border-black/10 bg-neutral-50"}`}>
+            <div className={`flex items-center justify-between px-3 py-1.5 text-[0.7rem] ${dark ? "bg-white/[0.04] text-white/50" : "bg-black/[0.03] text-neutral-500"}`}>
+                <span className="font-mono">{lang}</span>
+                <button
+                    type="button"
+                    onClick={async () => {
+                        try {
+                            await navigator.clipboard.writeText(text);
+                            setCopied(true);
+                            setTimeout(() => setCopied(false), 1400);
+                        } catch {
+                            /* clipboard blocked */
+                        }
+                    }}
+                    className="inline-flex items-center gap-1 hover:opacity-100"
+                >
+                    {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />} {copied ? "Copied" : "Copy"}
+                </button>
+            </div>
+            <pre className="overflow-x-auto p-3 font-mono text-[0.78rem] leading-relaxed">{text}</pre>
+        </div>
+    );
+}
+
+const AiResponse = ({ blocks = DEFAULT_BLOCKS, sources = DEFAULT_SOURCES, speed = 18, assistant = "Apex AI", accentColor = "#a3e635", theme = "dark", onRegenerate, onFeedback, className = "" }) => {
+    const [run, setRun] = useState(0);
+    const [chars, setChars] = useState(0);
+    const [vote, setVote] = useState(null);
+    const [copied, setCopied] = useState(false);
+    const total = blocks.reduce((n, b) => n + b.text.length, 0);
+    const done = chars >= total;
+    const dark = theme !== "light";
+
+    useEffect(() => {
+        setChars(0);
+        const id = setInterval(() => setChars((c) => (c >= total ? (clearInterval(id), c) : c + 3)), speed);
+        return () => clearInterval(id);
+    }, [run, total, speed]);
+
+    // Cut the blocks at the current character count.
+    let left = chars;
+    const visible = [];
+    for (const b of blocks) {
+        if (left <= 0) break;
+        visible.push({ ...b, text: b.text.slice(0, left), partial: left < b.text.length });
+        left -= b.text.length;
+    }
+
+    const copyAll = async () => {
+        try {
+            await navigator.clipboard.writeText(blocks.map((b) => b.text).join("\n\n"));
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1400);
+        } catch {
+            /* clipboard blocked */
+        }
+    };
+
+    const muted = dark ? "text-white/55" : "text-neutral-500";
+    const iconBtn = `grid h-8 w-8 place-items-center rounded-lg transition ${dark ? "hover:bg-white/10" : "hover:bg-black/5"}`;
+
+    return (
+        <div className={`w-full max-w-xl rounded-3xl border p-5 ${dark ? "border-white/10 bg-neutral-950 text-white" : "border-black/10 bg-white text-neutral-900"} ${className}`}>
+            <div className="mb-3 flex items-center gap-2.5">
+                <span className="grid h-8 w-8 place-items-center rounded-xl text-black" style={{ background: accentColor }}>
+                    <Bot className="h-4 w-4" />
+                </span>
+                <span className="text-[0.88rem] font-semibold">{assistant}</span>
+                {!done && <span className={`text-[0.72rem] ${muted}`}>writing…</span>}
+            </div>
+
+            <div className="space-y-3 text-[0.92rem] leading-relaxed" aria-live="polite">
+                {visible.map((b, i) =>
+                    b.type === "code" ? (
+                        <CodeBlock key={i} lang={b.lang} text={b.text} dark={dark} />
+                    ) : (
+                        <p key={i} className={dark ? "text-white/85" : "text-neutral-700"}>
+                            {b.text}
+                            {b.partial && <span className="ml-0.5 inline-block h-4 w-1.5 animate-pulse rounded-sm align-middle" style={{ background: accentColor }} />}
+                        </p>
+                    )
+                )}
+            </div>
+
+            <AnimatePresence>
+                {done && (
+                    <motion.div initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }}>
+                        {sources.length > 0 && (
+                            <div className="mt-4 flex flex-wrap gap-2">
+                                {sources.map((s, i) => (
+                                    <a key={s.href} href={s.href} target="_blank" rel="noreferrer" className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[0.72rem] transition ${dark ? "border-white/10 hover:border-white/25" : "border-black/10 hover:border-black/20"}`}>
+                                        <span className="grid h-4 w-4 place-items-center rounded-full text-[0.6rem] font-bold text-black" style={{ background: accentColor }}>
+                                            {i + 1}
+                                        </span>
+                                        <Globe className="h-3 w-3 opacity-60" />
+                                        {s.title}
+                                    </a>
+                                ))}
+                            </div>
+                        )}
+                        <div className={`mt-4 flex items-center gap-1 border-t pt-3 ${dark ? "border-white/10" : "border-black/10"}`}>
+                            <button type="button" aria-label="Copy answer" onClick={copyAll} className={iconBtn}>
+                                {copied ? <Check className="h-4 w-4" style={{ color: accentColor }} /> : <Copy className="h-4 w-4" />}
+                            </button>
+                            <button
+                                type="button"
+                                aria-label="Regenerate"
+                                onClick={() => {
+                                    setVote(null);
+                                    setRun((r) => r + 1);
+                                    onRegenerate?.();
+                                }}
+                                className={iconBtn}
+                            >
+                                <RefreshCw className="h-4 w-4" />
+                            </button>
+                            <span className={`mx-1 h-4 w-px ${dark ? "bg-white/10" : "bg-black/10"}`} />
+                            {[
+                                ["up", ThumbsUp, "Good answer"],
+                                ["down", ThumbsDown, "Bad answer"],
+                            ].map(([key, Icon, label]) => (
+                                <motion.button
+                                    key={key}
+                                    type="button"
+                                    aria-label={label}
+                                    aria-pressed={vote === key}
+                                    whileTap={{ scale: 0.8 }}
+                                    onClick={() => {
+                                        const v = vote === key ? null : key;
+                                        setVote(v);
+                                        onFeedback?.(v);
+                                    }}
+                                    className={iconBtn}
+                                    style={vote === key ? { color: accentColor } : undefined}
+                                >
+                                    <Icon className="h-4 w-4" fill={vote === key ? "currentColor" : "none"} />
+                                </motion.button>
+                            ))}
+                            <span className={`ml-auto text-[0.7rem] ${muted}`}>{vote === "up" ? "Thanks for the feedback!" : vote === "down" ? "We'll do better." : ""}</span>
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+};
+
+export default AiResponse;

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

@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Brain, Check, ChevronDown, Loader2 } from "lucide-react";
+
+/*
+ * AI Thinking: shows an assistant working through its steps. A shimmering
+ * "Thinking" label with a live timer, steps that tick off one by one, and a
+ * collapsible panel for the reasoning. Drive `step` yourself, or let it play.
+ */
+
+const DEFAULT_STEPS = [
+    { label: "Understanding the question", detail: "Looking for the goal and the constraints." },
+    { label: "Searching 12 sources", detail: "Docs, changelogs and two blog posts look relevant." },
+    { label: "Comparing approaches", detail: "CSS transforms win: no layout, GPU friendly." },
+    { label: "Writing the answer", detail: "Short summary first, then the code." },
+];
+
+const AiThinking = ({ steps = DEFAULT_STEPS, step: stepProp, stepDuration = 1400, loop = true, accentColor = "#a3e635", theme = "dark", defaultOpen = true, className = "" }) => {
+    const [auto, setAuto] = useState(0);
+    const [seconds, setSeconds] = useState(0);
+    const [open, setOpen] = useState(defaultOpen);
+    const controlled = typeof stepProp === "number";
+    const current = controlled ? stepProp : auto;
+    const done = current >= steps.length;
+    const dark = theme !== "light";
+
+    useEffect(() => {
+        if (controlled) return undefined;
+        const id = setTimeout(() => setAuto((s) => (s >= steps.length ? (loop ? 0 : s) : s + 1)), current >= steps.length ? 2400 : stepDuration);
+        return () => clearTimeout(id);
+    }, [controlled, current, steps.length, stepDuration, loop]);
+
+    useEffect(() => {
+        if (current === 0) setSeconds(0);
+        if (done) return undefined;
+        const id = setInterval(() => setSeconds((s) => s + 0.1), 100);
+        return () => clearInterval(id);
+    }, [done, current]);
+
+    const muted = dark ? "text-white/50" : "text-neutral-500";
+
+    return (
+        <div className={`w-full max-w-md rounded-3xl border p-4 ${dark ? "border-white/10 bg-neutral-950 text-white" : "border-black/10 bg-white text-neutral-900"} ${className}`}>
+            <style>{"@keyframes apex-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}"}</style>
+            <button type="button" onClick={() => setOpen((o) => !o)} aria-expanded={open} className="flex w-full items-center gap-3 text-left">
+                <span className="relative grid h-9 w-9 place-items-center rounded-xl" style={{ background: `color-mix(in srgb, ${accentColor} 18%, transparent)`, color: accentColor }}>
+                    {!done && <motion.span className="absolute inset-0 rounded-xl border-2" style={{ borderColor: accentColor }} animate={{ opacity: [0.6, 0, 0.6], scale: [1, 1.25, 1] }} transition={{ duration: 1.6, repeat: Infinity }} />}
+                    {done ? <Check className="h-5 w-5" /> : <Brain className="h-5 w-5" />}
+                </span>
+                <span className="flex-1">
+                    <span
+                        className="block text-[0.95rem] font-semibold"
+                        style={
+                            done
+                                ? undefined
+                                : {
+                                      backgroundImage: `linear-gradient(90deg, ${dark ? "#fff6" : "#0006"} 0%, ${dark ? "#fff" : "#000"} 50%, ${dark ? "#fff6" : "#0006"} 100%)`,
+                                      backgroundSize: "200% 100%",
+                                      WebkitBackgroundClip: "text",
+                                      backgroundClip: "text",
+                                      color: "transparent",
+                                      animation: "apex-shimmer 1.6s linear infinite",
+                                  }
+                        }
+                    >
+                        {done ? "Thought it through" : "Thinking"}
+                    </span>
+                    <span className={`text-[0.75rem] tabular-nums ${muted}`}>{done ? `Done in ${seconds.toFixed(1)}s` : `${seconds.toFixed(1)}s · step ${Math.min(current + 1, steps.length)} of ${steps.length}`}</span>
+                </span>
+                <ChevronDown className={`h-4 w-4 transition-transform ${open ? "rotate-180" : ""} ${muted}`} />
+            </button>
+
+            <AnimatePresence initial={false}>
+                {open && (
+                    <motion.ol initial={{ height: 0, opacity: 0 }} animate={{ height: "auto", opacity: 1 }} exit={{ height: 0, opacity: 0 }} transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }} className="relative mt-4 overflow-hidden pl-3">
+                        {/* Through the circle centres: list padding (0.75rem) + half a circle (0.575rem). */}
+                        <span aria-hidden="true" className={`absolute bottom-3 left-[calc(1.325rem-0.5px)] top-3 w-px ${dark ? "bg-white/10" : "bg-black/10"}`} />
+                        {steps.map((s, i) => {
+                            const state = i < current ? "done" : i === current && !done ? "active" : "todo";
+                            return (
+                                <motion.li key={s.label} initial={{ opacity: 0, x: -6 }} animate={{ opacity: state === "todo" ? 0.4 : 1, x: 0 }} transition={{ delay: i * 0.05 }} className="relative flex gap-3 pb-3.5 last:pb-0">
+                                    <span className="relative z-10 mt-0.5 grid h-[1.15rem] w-[1.15rem] shrink-0 place-items-center rounded-full" style={{ background: state === "done" ? accentColor : dark ? "#262626" : "#e5e5e5", color: "#0a0a0a" }}>
+                                        {state === "done" && <Check className="h-3 w-3" strokeWidth={3} />}
+                                        {state === "active" && <Loader2 className="h-3 w-3 animate-spin" style={{ color: accentColor }} />}
+                                    </span>
+                                    <span>
+                                        <span className="block text-[0.85rem] font-medium">{s.label}</span>
+                                        <AnimatePresence>
+                                            {state !== "todo" && s.detail && (
+                                                <motion.span initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: "auto" }} className={`block text-[0.78rem] ${muted}`}>
+                                                    {s.detail}
+                                                </motion.span>
+                                            )}
+                                        </AnimatePresence>
+                                    </span>
+                                </motion.li>
+                            );
+                        })}
+                    </motion.ol>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+};
+
+export default AiThinking;

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

@@ -0,0 +1,78 @@
+import React, { useEffect, useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Mic, MicOff } from "lucide-react";
+
+/*
+ * AI Voice Bars: a pill of rounded equalizer bars, mirrored from the middle.
+ * Short dots when idle, lively while listening, a travelling ripple while
+ * thinking and tall bursts while speaking. Tap to cycle, or set `state`.
+ */
+
+const LABELS = { idle: "Tap to talk", listening: "Listening…", thinking: "Thinking…", speaking: "Speaking…" };
+const ORDER = ["idle", "listening", "thinking", "speaking"];
+
+const AiVoiceBars = ({ state: stateProp, onStateChange, count = 7, color = "#a3e635", theme = "dark", showLabel = true, className = "" }) => {
+    const [inner, setInner] = useState("idle");
+    const state = stateProp ?? inner;
+    const stateRef = useRef(state);
+    stateRef.current = state;
+    const bars = useRef([]);
+    const dark = theme !== "light";
+
+    // Bar heights are written straight to the DOM each frame (no re-renders).
+    useEffect(() => {
+        let raf = 0;
+        const heights = Array(count).fill(0.15);
+        const tick = (now) => {
+            const t = now / 1000;
+            const s = stateRef.current;
+            for (let i = 0; i < count; i++) {
+                const centre = 1 - Math.abs(i - (count - 1) / 2) / ((count - 1) / 2 + 0.5);
+                let target = 0.14;
+                if (s === "listening") target = 0.25 + 0.6 * centre * Math.abs(Math.sin(t * 6 + i * 1.3) * Math.cos(t * 2.2 + i));
+                if (s === "thinking") target = 0.2 + 0.35 * Math.max(0, Math.sin(t * 4 - i * 0.9));
+                if (s === "speaking") target = 0.3 + 0.7 * centre * Math.abs(Math.sin(t * 9 + i * 2.1) * Math.sin(t * 2.7 + i * 0.6));
+                heights[i] += (target - heights[i]) * 0.25;
+                const el = bars.current[i];
+                if (el) el.style.transform = `scaleY(${Math.max(0.12, heights[i])})`;
+            }
+            raf = requestAnimationFrame(tick);
+        };
+        raf = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(raf);
+    }, [count]);
+
+    const next = () => {
+        const n = ORDER[(ORDER.indexOf(state) + 1) % ORDER.length];
+        if (stateProp === undefined) setInner(n);
+        onStateChange?.(n);
+    };
+
+    return (
+        <div className={`flex flex-col items-center gap-5 ${className}`}>
+            <button
+                type="button"
+                onClick={next}
+                aria-label={`Voice assistant: ${LABELS[state]}`}
+                className={`flex h-28 items-center gap-2.5 rounded-full px-8 outline-none transition-shadow duration-500 focus-visible:ring-2 focus-visible:ring-white/30 ${dark ? "bg-neutral-950 ring-1 ring-white/10" : "bg-white ring-1 ring-black/10"}`}
+                style={{ boxShadow: state === "idle" ? "none" : `0 0 50px -12px ${color}` }}
+            >
+                {Array.from({ length: count }, (_, i) => (
+                    <span key={i} ref={(el) => (bars.current[i] = el)} className="block h-16 w-3 rounded-full will-change-transform" style={{ background: color, transform: "scaleY(0.15)" }} />
+                ))}
+            </button>
+            {showLabel && (
+                <div className="flex items-center gap-2 text-sm font-medium">
+                    {state === "idle" ? <MicOff className="h-4 w-4 opacity-60" /> : <Mic className="h-4 w-4" style={{ color }} />}
+                    <AnimatePresence mode="wait">
+                        <motion.span key={state} initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -6 }} transition={{ duration: 0.18 }}>
+                            {LABELS[state]}
+                        </motion.span>
+                    </AnimatePresence>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default AiVoiceBars;

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

@@ -0,0 +1,105 @@
+import React, { useEffect, useId, useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Mic, MicOff } from "lucide-react";
+
+/*
+ * AI Voice Blob: a soft gradient blob whose outline wobbles with the voice.
+ * Nearly round when idle, rippling while listening, slowly morphing while
+ * thinking and bouncing while speaking. Drawn as one smooth SVG path that
+ * updates each frame. Tap to cycle, or set `state`.
+ */
+
+const LABELS = { idle: "Tap to talk", listening: "Listening…", thinking: "Thinking…", speaking: "Speaking…" };
+const ORDER = ["idle", "listening", "thinking", "speaking"];
+const POINTS = 10;
+
+// Closed smooth curve through the points (Catmull-Rom → Bézier).
+const smoothPath = (pts) => {
+    const n = pts.length;
+    let d = `M${pts[0][0]},${pts[0][1]}`;
+    for (let i = 0; i < n; i++) {
+        const p0 = pts[(i - 1 + n) % n];
+        const p1 = pts[i];
+        const p2 = pts[(i + 1) % n];
+        const p3 = pts[(i + 2) % n];
+        d += ` C${p1[0] + (p2[0] - p0[0]) / 6},${p1[1] + (p2[1] - p0[1]) / 6} ${p2[0] - (p3[0] - p1[0]) / 6},${p2[1] - (p3[1] - p1[1]) / 6} ${p2[0]},${p2[1]}`;
+    }
+    return `${d}Z`;
+};
+
+const AiVoiceBlob = ({ state: stateProp, onStateChange, colors = ["#a3e635", "#22d3ee", "#a78bfa"], size = 13, showLabel = true, className = "" }) => {
+    const gid = useId().replace(/[^a-zA-Z0-9]/g, "");
+    const pathRef = useRef(null);
+    const glowRef = useRef(null);
+    const [inner, setInner] = useState("idle");
+    const state = stateProp ?? inner;
+    const stateRef = useRef(state);
+    stateRef.current = state;
+
+    useEffect(() => {
+        let raf = 0;
+        let energy = 0.05;
+        const tick = (now) => {
+            const t = now / 1000;
+            const s = stateRef.current;
+            const target = s === "speaking" ? 0.16 + 0.12 * Math.abs(Math.sin(t * 7)) : s === "listening" ? 0.12 + 0.06 * Math.abs(Math.sin(t * 4.3)) : s === "thinking" ? 0.1 : 0.035;
+            energy += (target - energy) * 0.08;
+            const speed = s === "thinking" ? 0.8 : s === "idle" ? 0.6 : 2.4;
+            const pts = [];
+            for (let i = 0; i < POINTS; i++) {
+                const a = (i / POINTS) * Math.PI * 2;
+                const wob = Math.sin(t * speed + i * 1.7) * 0.6 + Math.sin(t * speed * 1.7 + i * 2.9) * 0.4;
+                const r = 40 * (1 + energy * wob);
+                pts.push([50 + Math.cos(a) * r, 50 + Math.sin(a) * r]);
+            }
+            const d = smoothPath(pts);
+            pathRef.current?.setAttribute("d", d);
+            glowRef.current?.setAttribute("d", d);
+            raf = requestAnimationFrame(tick);
+        };
+        raf = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(raf);
+    }, []);
+
+    const next = () => {
+        const n = ORDER[(ORDER.indexOf(state) + 1) % ORDER.length];
+        if (stateProp === undefined) setInner(n);
+        onStateChange?.(n);
+    };
+
+    return (
+        <div className={`flex flex-col items-center gap-4 ${className}`}>
+            <button type="button" onClick={next} aria-label={`Voice assistant: ${LABELS[state]}`} className="rounded-full outline-none focus-visible:ring-2 focus-visible:ring-white/30" style={{ width: `min(${size}rem, 76vw)`, aspectRatio: "1" }}>
+                <svg viewBox="0 0 100 100" className="h-full w-full overflow-visible" aria-hidden="true">
+                    <defs>
+                        <linearGradient id={`g${gid}`} x1="0" y1="0" x2="1" y2="1">
+                            {colors.map((c, i) => (
+                                <stop key={c} offset={`${(i / Math.max(1, colors.length - 1)) * 100}%`} stopColor={c} />
+                            ))}
+                        </linearGradient>
+                        <radialGradient id={`h${gid}`} cx="0.35" cy="0.3" r="0.6">
+                            <stop offset="0%" stopColor="#fff" stopOpacity="0.55" />
+                            <stop offset="100%" stopColor="#fff" stopOpacity="0" />
+                        </radialGradient>
+                    </defs>
+                    {/* A wider, faint copy works as the glow without a blur filter. */}
+                    <path ref={glowRef} fill={`url(#g${gid})`} opacity="0.25" transform="translate(50 50) scale(1.14) translate(-50 -50)" />
+                    <path ref={pathRef} fill={`url(#g${gid})`} />
+                    <circle cx="40" cy="38" r="22" fill={`url(#h${gid})`} />
+                </svg>
+            </button>
+            {showLabel && (
+                <div className="flex items-center gap-2 text-sm font-medium">
+                    {state === "idle" ? <MicOff className="h-4 w-4 opacity-60" /> : <Mic className="h-4 w-4" style={{ color: colors[0] }} />}
+                    <AnimatePresence mode="wait">
+                        <motion.span key={state} initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -6 }} transition={{ duration: 0.18 }}>
+                            {LABELS[state]}
+                        </motion.span>
+                    </AnimatePresence>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default AiVoiceBlob;

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

@@ -0,0 +1,74 @@
+import React, { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Mic, MicOff } from "lucide-react";
+
+/*
+ * AI Voice Orb: the "face" of a voice assistant. Soft colour blobs swirl
+ * inside a glass sphere and the whole orb reacts to its state — calm when
+ * idle, pulsing while listening, spinning while thinking and rippling while
+ * speaking. Tap it (or control `state`) to switch between them.
+ */
+
+const STATES = {
+    idle: { label: "Tap to talk", scale: [1, 1.02, 1], spin: 14, speed: 3.2 },
+    listening: { label: "Listening…", scale: [1, 1.1, 0.97, 1.08, 1], spin: 8, speed: 1.1 },
+    thinking: { label: "Thinking…", scale: [0.96, 1, 0.96], spin: 2.2, speed: 1.4 },
+    speaking: { label: "Speaking…", scale: [1, 1.06, 1, 1.12, 1, 1.04, 1], spin: 5, speed: 1.3 },
+};
+const ORDER = ["idle", "listening", "thinking", "speaking"];
+
+const AiVoiceOrb = ({ state: stateProp, onStateChange, colors = ["#a3e635", "#22d3ee", "#a78bfa", "#f472b6"], size = 12, showLabel = true, className = "" }) => {
+    const [inner, setInner] = useState("idle");
+    const state = stateProp ?? inner;
+    const s = STATES[state] ?? STATES.idle;
+
+    const next = () => {
+        const n = ORDER[(ORDER.indexOf(state) + 1) % ORDER.length];
+        if (stateProp === undefined) setInner(n);
+        onStateChange?.(n);
+    };
+
+    return (
+        <div className={`flex flex-col items-center gap-6 ${className}`}>
+            <button type="button" onClick={next} aria-label={`Voice assistant: ${s.label}`} className="relative grid place-items-center rounded-full outline-none focus-visible:ring-4 focus-visible:ring-white/30" style={{ width: `${size}rem`, height: `${size}rem` }}>
+                {/* Ripples while speaking or listening */}
+                {(state === "speaking" || state === "listening") &&
+                    [0, 1, 2].map((i) => (
+                        <motion.span key={`${state}-${i}`} className="absolute inset-0 rounded-full border" style={{ borderColor: colors[i % colors.length] }} initial={{ scale: 1, opacity: 0.5 }} animate={{ scale: 1.6, opacity: 0 }} transition={{ duration: 2, repeat: Infinity, delay: i * 0.6, ease: "easeOut" }} />
+                    ))}
+                {/* Outer glow: a soft gradient that only pulses (no blur filter, so it stays cheap). */}
+                <motion.span className="absolute inset-[-22%] rounded-full" style={{ background: `radial-gradient(circle, ${colors[0]}55 0%, ${colors[2 % colors.length]}33 35%, transparent 68%)` }} animate={{ opacity: [0.6, 1, 0.6], scale: [0.96, 1.04, 0.96] }} transition={{ duration: s.speed * 1.4, repeat: Infinity, ease: "easeInOut" }} />
+                {/* The sphere */}
+                <motion.span className="relative block h-full w-full overflow-hidden rounded-full bg-neutral-950 shadow-[inset_0_0_40px_rgba(255,255,255,0.08)]" animate={{ scale: s.scale }} transition={{ duration: s.speed, repeat: Infinity, ease: "easeInOut" }}>
+                    <motion.span className="absolute inset-0 will-change-transform" animate={{ rotate: 360 }} transition={{ duration: s.spin, repeat: Infinity, ease: "linear" }}>
+                        {colors.map((c, i) => (
+                            <motion.span
+                                key={c}
+                                className="absolute h-3/4 w-3/4 rounded-full will-change-transform"
+                                // Soft-edged blobs from gradients instead of a blur filter.
+                                style={{ background: `radial-gradient(circle, ${c} 0%, ${c}aa 30%, transparent 68%)`, mixBlendMode: "screen", left: `${[0, 30, 10, 35][i % 4]}%`, top: `${[5, 0, 35, 30][i % 4]}%` }}
+                                animate={{ x: ["0%", `${(i % 2 ? -1 : 1) * 12}%`, "0%"], y: ["0%", `${(i % 3 ? 1 : -1) * 14}%`, "0%"] }}
+                                transition={{ duration: s.speed * (2 + i * 0.4), repeat: Infinity, ease: "easeInOut" }}
+                            />
+                        ))}
+                    </motion.span>
+                    {/* Glass highlight */}
+                    <span className="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_30%_25%,rgba(255,255,255,0.45),transparent_35%)]" />
+                    <span className="absolute inset-0 rounded-full ring-1 ring-inset ring-white/15" />
+                </motion.span>
+            </button>
+            {showLabel && (
+                <div className="flex items-center gap-2 text-sm font-medium">
+                    {state === "idle" ? <MicOff className="h-4 w-4 opacity-60" /> : <Mic className="h-4 w-4" style={{ color: colors[0] }} />}
+                    <AnimatePresence mode="wait">
+                        <motion.span key={state} initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -6 }} transition={{ duration: 0.18 }}>
+                            {s.label}
+                        </motion.span>
+                    </AnimatePresence>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default AiVoiceOrb;

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

@@ -0,0 +1,120 @@
+import React, { useEffect, useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Mic, MicOff } from "lucide-react";
+
+/*
+ * AI Voice Ring: radial bars around a glowing core, like a circular audio
+ * visualiser. The ring breathes when idle, flickers while listening, spins
+ * while thinking and blooms while speaking. Tap to cycle, or set `state`.
+ */
+
+const LABELS = { idle: "Tap to talk", listening: "Listening…", thinking: "Thinking…", speaking: "Speaking…" };
+const ORDER = ["idle", "listening", "thinking", "speaking"];
+
+const AiVoiceRing = ({ state: stateProp, onStateChange, colors = ["#a3e635", "#22d3ee"], bars = 72, size = 14, showLabel = true, className = "" }) => {
+    const canvasRef = useRef(null);
+    const [inner, setInner] = useState("idle");
+    const state = stateProp ?? inner;
+    const stateRef = useRef(state);
+    stateRef.current = state;
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const ctx = canvas.getContext("2d");
+        let raf = 0;
+        let spin = 0;
+        let last = performance.now();
+        const lens = Array(bars).fill(0.05);
+        const resize = () => {
+            const r = canvas.getBoundingClientRect();
+            const dpr = Math.min(window.devicePixelRatio || 1, 2);
+            canvas.width = Math.round(r.width * dpr);
+            canvas.height = Math.round(r.height * dpr);
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        };
+        const ro = new ResizeObserver(resize);
+        ro.observe(canvas);
+        resize();
+
+        const draw = (now) => {
+            const dt = Math.min(0.05, (now - last) / 1000);
+            last = now;
+            const t = now / 1000;
+            const s = stateRef.current;
+            const { width: w, height: h } = canvas.getBoundingClientRect();
+            const cx = w / 2;
+            const cy = h / 2;
+            const inner = Math.min(w, h) * 0.24;
+            const maxLen = Math.min(w, h) * 0.22;
+            spin += dt * (s === "thinking" ? 1.6 : 0.15);
+
+            ctx.clearRect(0, 0, w, h);
+            const core = ctx.createRadialGradient(cx, cy, 0, cx, cy, inner * 1.1);
+            core.addColorStop(0, `${colors[0]}66`);
+            core.addColorStop(1, `${colors[0]}00`);
+            ctx.fillStyle = core;
+            ctx.beginPath();
+            ctx.arc(cx, cy, inner * 1.1, 0, Math.PI * 2);
+            ctx.fill();
+
+            ctx.lineCap = "round";
+            ctx.lineWidth = Math.max(2, (Math.PI * 2 * inner) / bars * 0.45);
+            for (let i = 0; i < bars; i++) {
+                const a = (i / bars) * Math.PI * 2 + spin;
+                let target = 0.05 + 0.03 * Math.sin(t * 2 + i * 0.3);
+                if (s === "listening") target = 0.15 + 0.45 * Math.abs(Math.sin(t * 7 + i * 0.7) * Math.cos(t * 2.3 + i * 0.21));
+                if (s === "thinking") target = 0.12 + 0.3 * Math.max(0, Math.sin(i * 0.26 - t * 5));
+                if (s === "speaking") target = 0.2 + 0.8 * Math.abs(Math.sin(t * 8 + i * 0.45) * Math.sin(t * 2.6 + i * 0.13));
+                lens[i] += (target - lens[i]) * 0.2;
+                const len = lens[i] * maxLen;
+                const k = i / bars;
+                ctx.strokeStyle = k < 0.5 ? colors[0] : colors[1] ?? colors[0];
+                ctx.globalAlpha = 0.55 + lens[i] * 0.45;
+                ctx.beginPath();
+                ctx.moveTo(cx + Math.cos(a) * inner, cy + Math.sin(a) * inner);
+                ctx.lineTo(cx + Math.cos(a) * (inner + len), cy + Math.sin(a) * (inner + len));
+                ctx.stroke();
+            }
+            ctx.globalAlpha = 1;
+            ctx.fillStyle = colors[0];
+            ctx.shadowColor = colors[0];
+            ctx.shadowBlur = 20;
+            ctx.beginPath();
+            ctx.arc(cx, cy, inner * (0.32 + 0.06 * Math.sin(t * 3)), 0, Math.PI * 2);
+            ctx.fill();
+            ctx.shadowBlur = 0;
+            raf = requestAnimationFrame(draw);
+        };
+        raf = requestAnimationFrame(draw);
+        return () => {
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+        };
+    }, [colors, bars]);
+
+    const next = () => {
+        const n = ORDER[(ORDER.indexOf(state) + 1) % ORDER.length];
+        if (stateProp === undefined) setInner(n);
+        onStateChange?.(n);
+    };
+
+    return (
+        <div className={`flex flex-col items-center gap-4 ${className}`}>
+            <button type="button" onClick={next} aria-label={`Voice assistant: ${LABELS[state]}`} className="rounded-full outline-none focus-visible:ring-2 focus-visible:ring-white/30" style={{ width: `min(${size}rem, 80vw)`, aspectRatio: "1" }}>
+                <canvas ref={canvasRef} aria-hidden="true" className="block h-full w-full" />
+            </button>
+            {showLabel && (
+                <div className="flex items-center gap-2 text-sm font-medium">
+                    {state === "idle" ? <MicOff className="h-4 w-4 opacity-60" /> : <Mic className="h-4 w-4" style={{ color: colors[0] }} />}
+                    <AnimatePresence mode="wait">
+                        <motion.span key={state} initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -6 }} transition={{ duration: 0.18 }}>
+                            {LABELS[state]}
+                        </motion.span>
+                    </AnimatePresence>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default AiVoiceRing;