@flikk/ui 1.0.0-beta.11 → 1.0.0-beta.13

package/dist/components/effects/AIOrb/variants/Aura/ShaderCanvas.js

@@ -0,0 +1,149 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+
+const VERTEX_SHADER = `#version 300 es
+in vec2 a_position;
+void main() {
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}`;
+/**
+ * Minimal raw WebGL2 canvas renderer for fullscreen fragment shaders.
+ * - Built-in uniforms: iTime (float), iResolution (vec2)
+ * - Custom uniforms read from `uniformsRef` each frame (no stale closures)
+ * - ResizeObserver for responsive canvas sizing
+ * - rAF animation loop with cleanup on unmount
+ * - Graceful degradation: renders nothing if WebGL2 unavailable
+ */
+const ShaderCanvas = ({ fragmentShader, uniformsRef, maxDpr = 2, className, style, }) => {
+    const canvasRef = useRef(null);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const gl = canvas.getContext("webgl2", {
+            alpha: true,
+            premultipliedAlpha: false,
+            antialias: false,
+        });
+        if (!gl)
+            return;
+        // ── Compile shaders ────────────────────────────────────────────────
+        const compileShader = (type, src) => {
+            const shader = gl.createShader(type);
+            if (!shader)
+                return null;
+            gl.shaderSource(shader, src);
+            gl.compileShader(shader);
+            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+                if (process.env.NODE_ENV !== "production") {
+                    console.error("[ShaderCanvas]", gl.getShaderInfoLog(shader));
+                }
+                gl.deleteShader(shader);
+                return null;
+            }
+            return shader;
+        };
+        const vs = compileShader(gl.VERTEX_SHADER, VERTEX_SHADER);
+        const fs = compileShader(gl.FRAGMENT_SHADER, fragmentShader);
+        if (!vs || !fs)
+            return;
+        const program = gl.createProgram();
+        gl.attachShader(program, vs);
+        gl.attachShader(program, fs);
+        gl.linkProgram(program);
+        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            if (process.env.NODE_ENV !== "production") {
+                console.error("[ShaderCanvas]", gl.getProgramInfoLog(program));
+            }
+            return;
+        }
+        gl.useProgram(program);
+        // ── Fullscreen quad ────────────────────────────────────────────────
+        const positions = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
+        const vao = gl.createVertexArray();
+        gl.bindVertexArray(vao);
+        const buf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+        gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+        const aPos = gl.getAttribLocation(program, "a_position");
+        gl.enableVertexAttribArray(aPos);
+        gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+        // ── Uniform locations ──────────────────────────────────────────────
+        const uTime = gl.getUniformLocation(program, "iTime");
+        const uRes = gl.getUniformLocation(program, "iResolution");
+        // Cache custom uniform locations
+        const customLocs = new Map();
+        const getCustomLoc = (name) => {
+            var _a;
+            if (!customLocs.has(name)) {
+                customLocs.set(name, gl.getUniformLocation(program, name));
+            }
+            return (_a = customLocs.get(name)) !== null && _a !== void 0 ? _a : null;
+        };
+        // ── Resize handling ────────────────────────────────────────────────
+        const dpr = Math.min(window.devicePixelRatio || 1, maxDpr);
+        let width = 0;
+        let height = 0;
+        const resize = () => {
+            const rect = canvas.getBoundingClientRect();
+            const w = Math.round(rect.width * dpr);
+            const h = Math.round(rect.height * dpr);
+            if (w !== width || h !== height) {
+                width = w;
+                height = h;
+                canvas.width = w;
+                canvas.height = h;
+                gl.viewport(0, 0, w, h);
+            }
+        };
+        const observer = new ResizeObserver(resize);
+        observer.observe(canvas);
+        resize();
+        // ── Animation loop ─────────────────────────────────────────────────
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        let rafId = 0;
+        const startTime = performance.now();
+        const frame = () => {
+            rafId = requestAnimationFrame(frame);
+            const t = (performance.now() - startTime) / 1000;
+            gl.uniform1f(uTime, t);
+            gl.uniform2f(uRes, width, height);
+            // Set custom uniforms from ref
+            const uniforms = uniformsRef.current;
+            for (const name in uniforms) {
+                const loc = getCustomLoc(name);
+                if (!loc)
+                    continue;
+                const val = uniforms[name];
+                if (typeof val === "number") {
+                    gl.uniform1f(loc, val);
+                }
+                else if (Array.isArray(val)) {
+                    if (val.length === 2)
+                        gl.uniform2f(loc, val[0], val[1]);
+                    else if (val.length === 3)
+                        gl.uniform3f(loc, val[0], val[1], val[2]);
+                    else if (val.length === 4)
+                        gl.uniform4f(loc, val[0], val[1], val[2], val[3]);
+                }
+            }
+            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        };
+        rafId = requestAnimationFrame(frame);
+        return () => {
+            cancelAnimationFrame(rafId);
+            observer.disconnect();
+            gl.deleteProgram(program);
+            gl.deleteShader(vs);
+            gl.deleteShader(fs);
+            gl.deleteBuffer(buf);
+            gl.deleteVertexArray(vao);
+        };
+        // Fragment shader is static — only set up once
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (jsx("canvas", { ref: canvasRef, className: className, style: { display: "block", width: "100%", height: "100%", ...style } }));
+};
+
+export { ShaderCanvas };

package/dist/components/effects/AIOrb/variants/Aura/index.d.ts

@@ -0,0 +1,2 @@
+export { Aura } from "./Aura";
+export type { AuraProps } from "./Aura.types";

package/dist/components/effects/AIOrb/variants/DotSphere/DotSphere.js

@@ -1,10 +1,17 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useMemo, useEffect } from 'react';
 import { Canvas, useFrame } from '@react-three/fiber';
-import { Color, AdditiveBlending, BackSide } from 'three';
+import { Color, OneFactor, ZeroFactor, AddEquation, CustomBlending, BackSide } from 'three';
 import { waveFragment, waveVertex, dotSphereFragment, dotSphereVertex, glowFragment, glowVertex } from './DotSphere.shaders.js';
+import { useOrbState } from '../../hooks/useOrbState.js';
 
-const OrbScene = ({ colors, speed, gridDensity, dotSize, rimIntensity, glowIntensity, glowSize, }) => {
+const STATE_CONFIG = {
+    idle: { speed: 0.3, glowIntensity: 0.6, rimIntensity: 1.0 },
+    listening: { speed: 0.6, glowIntensity: 1.0, rimIntensity: 1.5 },
+    thinking: { speed: 1.2, glowIntensity: 1.4, rimIntensity: 2.0 },
+    speaking: { speed: 0.8, glowIntensity: 1.2, rimIntensity: 1.8 },
+};
+const OrbScene = ({ colors, speed, gridDensity, dotSize, rimIntensity, glowIntensity, glowSize, state, }) => {
     const groupRef = useRef(null);
     const dotMatRef = useRef(null);
     const innerGlowRef = useRef(null);
@@ -74,6 +81,9 @@ const OrbScene = ({ colors, speed, gridDensity, dotSize, rimIntensity, glowInten
     }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
+    // ── State-driven interpolation ─────────────────────────────────────────
+    const stateProps = useMemo(() => ({ speed, glowIntensity, rimIntensity }), [speed, glowIntensity, rimIntensity]);
+    const { valuesRef: stateRef, tick: stateTick } = useOrbState(state, STATE_CONFIG, stateProps);
     // ── Sync prop changes → uniforms ──────────────────────────────────────
     useEffect(() => {
         // Dot sphere
@@ -108,8 +118,21 @@ const OrbScene = ({ colors, speed, gridDensity, dotSize, rimIntensity, glowInten
         }
     }, [colorObjs, dotSize, gridDensity, rimIntensity, glowIntensity]);
     // ── Animation loop ────────────────────────────────────────────────────
-    useFrame(({ clock }) => {
-        const t = clock.getElapsedTime() * speed;
+    useFrame(({ clock }, delta) => {
+        // Tick state interpolation
+        stateTick(delta);
+        const sv = stateRef.current;
+        const t = clock.getElapsedTime() * sv.speed;
+        // Sync interpolated rimIntensity / glowIntensity into uniforms
+        if (dotMatRef.current) {
+            dotMatRef.current.uniforms.u_rimIntensity.value = sv.rimIntensity;
+        }
+        if (innerGlowRef.current) {
+            innerGlowRef.current.uniforms.u_intensity.value = sv.glowIntensity * 0.8;
+        }
+        if (outerGlowRef.current) {
+            outerGlowRef.current.uniforms.u_intensity.value = sv.glowIntensity * 0.55;
+        }
         // Update time uniform on every material
         for (const ref of [
             dotMatRef,
@@ -125,12 +148,20 @@ const OrbScene = ({ colors, speed, gridDensity, dotSize, rimIntensity, glowInten
             groupRef.current.rotation.y = clock.getElapsedTime() * 0.12;
         }
     });
-    return (jsxs("group", { ref: groupRef, children: [jsxs("mesh", { scale: 0.85, children: [jsx("sphereGeometry", { args: [1, 48, 48] }), jsx("shaderMaterial", { ref: waveDeepRef, vertexShader: waveVertex, fragmentShader: waveFragment, uniforms: waveDeepUniforms, transparent: true, blending: AdditiveBlending, depthWrite: false })] }), jsxs("mesh", { scale: 0.96, children: [jsx("sphereGeometry", { args: [1, 48, 48] }), jsx("shaderMaterial", { ref: waveSurfaceRef, vertexShader: waveVertex, fragmentShader: waveFragment, uniforms: waveSurfaceUniforms, transparent: true, blending: AdditiveBlending, depthWrite: false })] }), jsxs("mesh", { children: [jsx("sphereGeometry", { args: [1, 64, 64] }), jsx("shaderMaterial", { ref: dotMatRef, vertexShader: dotSphereVertex, fragmentShader: dotSphereFragment, uniforms: dotUniforms, transparent: true, depthWrite: false })] }), jsxs("mesh", { scale: 1.12, children: [jsx("sphereGeometry", { args: [1, 32, 32] }), jsx("shaderMaterial", { ref: innerGlowRef, vertexShader: glowVertex, fragmentShader: glowFragment, uniforms: innerGlowUniforms, transparent: true, side: BackSide, blending: AdditiveBlending, depthWrite: false })] }), jsxs("mesh", { scale: glowSize, children: [jsx("sphereGeometry", { args: [1, 32, 32] }), jsx("shaderMaterial", { ref: outerGlowRef, vertexShader: glowVertex, fragmentShader: glowFragment, uniforms: outerGlowUniforms, transparent: true, side: BackSide, blending: AdditiveBlending, depthWrite: false })] })] }));
+    return (jsxs("group", { ref: groupRef, children: [jsxs("mesh", { scale: 0.85, children: [jsx("sphereGeometry", { args: [1, 48, 48] }), jsx("shaderMaterial", { ref: waveDeepRef, vertexShader: waveVertex, fragmentShader: waveFragment, uniforms: waveDeepUniforms, transparent: true, depthWrite: false })] }), jsxs("mesh", { scale: 0.96, children: [jsx("sphereGeometry", { args: [1, 48, 48] }), jsx("shaderMaterial", { ref: waveSurfaceRef, vertexShader: waveVertex, fragmentShader: waveFragment, uniforms: waveSurfaceUniforms, transparent: true, depthWrite: false })] }), jsxs("mesh", { children: [jsx("sphereGeometry", { args: [1, 64, 64] }), jsx("shaderMaterial", { ref: dotMatRef, vertexShader: dotSphereVertex, fragmentShader: dotSphereFragment, uniforms: dotUniforms, transparent: true, depthWrite: false })] }), jsxs("mesh", { scale: 1.12, children: [jsx("sphereGeometry", { args: [1, 32, 32] }), jsx("shaderMaterial", { ref: innerGlowRef, vertexShader: glowVertex, fragmentShader: glowFragment, uniforms: innerGlowUniforms, transparent: true, side: BackSide, blending: CustomBlending, blendEquation: AddEquation, blendSrc: OneFactor, blendDst: OneFactor, blendSrcAlpha: ZeroFactor, blendDstAlpha: OneFactor, depthWrite: false })] }), jsxs("mesh", { scale: glowSize, children: [jsx("sphereGeometry", { args: [1, 32, 32] }), jsx("shaderMaterial", { ref: outerGlowRef, vertexShader: glowVertex, fragmentShader: glowFragment, uniforms: outerGlowUniforms, transparent: true, side: BackSide, blending: CustomBlending, blendEquation: AddEquation, blendSrc: OneFactor, blendDst: OneFactor, blendSrcAlpha: ZeroFactor, blendDstAlpha: OneFactor, depthWrite: false })] })] }));
 };
 // ── Public DotSphere variant ─────────────────────────────────────────────────
 const DEFAULT_COLORS = ["#00d2ff", "#a855f7", "#f97316"];
-const DotSphere = ({ colors = DEFAULT_COLORS, speed = 0.6, gridDensity = 40, dotSize = 0.055, rimIntensity = 1.5, glowIntensity = 1.0, glowSize = 1.5, }) => {
-    return (jsx(Canvas, { className: "!absolute inset-0 w-full h-full", dpr: [1, 2], camera: { position: [0, 0, 3], fov: 50 }, gl: { antialias: true, alpha: true }, children: jsx(OrbScene, { colors: colors, speed: speed, gridDensity: gridDensity, dotSize: dotSize, rimIntensity: rimIntensity, glowIntensity: glowIntensity, glowSize: glowSize }) }));
+const DotSphere = ({ colors = DEFAULT_COLORS, speed = 0.6, gridDensity = 40, dotSize = 0.055, rimIntensity = 1.5, glowIntensity = 1.0, glowSize = 1.5, state, }) => {
+    return (jsx(Canvas, { className: "!absolute inset-0 w-full h-full", style: {
+            filter: [
+                'drop-shadow(0 0 10px rgba(168, 85, 247, 0.7))',
+                'drop-shadow(0 0 25px rgba(147, 51, 234, 0.35))',
+                'drop-shadow(0 0 50px rgba(124, 58, 237, 0.15))',
+            ].join(' '),
+        }, dpr: [1, 2], camera: { position: [0, 0, 3], fov: 50 }, gl: { antialias: true, alpha: true, premultipliedAlpha: false }, onCreated: ({ gl }) => {
+            gl.setClearColor(0x000000, 0);
+        }, children: jsx(OrbScene, { colors: colors, speed: speed, gridDensity: gridDensity, dotSize: dotSize, rimIntensity: rimIntensity, glowIntensity: glowIntensity, glowSize: glowSize, state: state }) }));
 };
 
 export { DotSphere };

package/dist/components/effects/AIOrb/variants/DotSphere/DotSphere.types.d.ts

@@ -1,3 +1,4 @@
+import type { OrbState } from "../../AIOrb.types";
 export interface DotSphereProps {
     /**
      * Three gradient colours [top, middle, bottom] as hex strings.
@@ -34,4 +35,9 @@ export interface DotSphereProps {
      * @default 1.5
      */
     glowSize?: number;
+    /**
+     * State-driven animation. When set, smoothly interpolates speed,
+     * glowIntensity, and rimIntensity towards state targets.
+     */
+    state?: OrbState;
 }

package/dist/components/effects/AIOrb/variants/Liquid/Liquid.js

@@ -2,11 +2,18 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useRef, useMemo, useEffect } from 'react';
 import { Canvas, useFrame } from '@react-three/fiber';
 import { Environment } from '@react-three/drei';
-import { ACESFilmicToneMapping, Color, AdditiveBlending, BackSide } from 'three';
+import { ACESFilmicToneMapping, Color, OneFactor, ZeroFactor, AddEquation, CustomBlending, BackSide } from 'three';
 import { simplex3 } from './Liquid.noise.js';
 import { atmosphereFragment, glowVertex } from './Liquid.shaders.js';
+import { useOrbState } from '../../hooks/useOrbState.js';
 
-const LiquidScene = ({ colors, meshColor, speed, roughness, metalness, noiseScale, noiseAmplitude, glowIntensity, glowSize, }) => {
+const STATE_CONFIG = {
+    idle: { speed: 0.5, noiseAmplitude: 0.06, glowIntensity: 0.6 },
+    listening: { speed: 1.0, noiseAmplitude: 0.1, glowIntensity: 1.0 },
+    thinking: { speed: 1.8, noiseAmplitude: 0.15, glowIntensity: 1.4 },
+    speaking: { speed: 1.2, noiseAmplitude: 0.12, glowIntensity: 1.2 },
+};
+const LiquidScene = ({ colors, meshColor, speed, roughness, metalness, noiseScale, noiseAmplitude, glowIntensity, glowSize, state, }) => {
     const groupRef = useRef(null);
     const meshRef = useRef(null);
     const atmosphereRef = useRef(null);
@@ -15,6 +22,9 @@ const LiquidScene = ({ colors, meshColor, speed, roughness, metalness, noiseScal
     // Keep latest props in a ref so useFrame always reads current values
     const propsRef = useRef({ speed, noiseScale, noiseAmplitude });
     propsRef.current = { speed, noiseScale, noiseAmplitude };
+    // ── State-driven interpolation ─────────────────────────────────────────
+    const stateProps = useMemo(() => ({ speed, noiseAmplitude, glowIntensity }), [speed, noiseAmplitude, glowIntensity]);
+    const { valuesRef: stateRef, tick: stateTick } = useOrbState(state, STATE_CONFIG, stateProps);
     // Colour objects (rebuilt only when hex strings change)
     const [c1, c2, c3] = colors;
     const colorObjs = useMemo(() => ({
@@ -59,9 +69,18 @@ const LiquidScene = ({ colors, meshColor, speed, roughness, metalness, noiseScal
         }
     }, [colorObjs, meshColor, roughness, metalness, glowIntensity]);
     // ── Animation loop ──────────────────────────────────────────────────────
-    useFrame(({ clock }) => {
+    useFrame(({ clock }, delta) => {
+        // Tick state interpolation
+        stateTick(delta);
+        const sv = stateRef.current;
         const t = clock.getElapsedTime();
-        const { speed: spd, noiseScale: ns, noiseAmplitude: na } = propsRef.current;
+        const spd = sv.speed;
+        const na = sv.noiseAmplitude;
+        const ns = propsRef.current.noiseScale;
+        // Sync interpolated glowIntensity into atmosphere uniform
+        if (atmosphereRef.current) {
+            atmosphereRef.current.uniforms.u_intensity.value = sv.glowIntensity * 0.65;
+        }
         // Vertex deformation
         if (meshRef.current && origData.current) {
             const geo = meshRef.current.geometry;
@@ -92,14 +111,21 @@ const LiquidScene = ({ colors, meshColor, speed, roughness, metalness, noiseScal
             atmosphereRef.current.uniforms.u_time.value = t * spd;
         }
     });
-    return (jsxs("group", { ref: groupRef, children: [jsx(Environment, { preset: "sunset" }), jsx("ambientLight", { intensity: 2 }), jsx("pointLight", { color: colors[0], intensity: 18, distance: 50, position: [-3, 1, 2] }), jsx("pointLight", { color: colors[1], intensity: 18, distance: 50, position: [3, -1, 2] }), jsx("pointLight", { color: colors[2], intensity: 10, distance: 50, position: [0, 0, 4] }), jsx("pointLight", { color: "#6428b4", intensity: 12, distance: 50, position: [0, -3, 2] }), jsxs("mesh", { ref: meshRef, children: [jsx("sphereGeometry", { args: [1, 64, 64] }), jsx("meshStandardMaterial", { color: meshColor, roughness: roughness, metalness: metalness, envMapIntensity: 2.5, emissive: "#5A1878", emissiveIntensity: 0.8 })] }), jsxs("mesh", { scale: glowSize, children: [jsx("sphereGeometry", { args: [1, 32, 32] }), jsx("shaderMaterial", { ref: atmosphereRef, vertexShader: glowVertex, fragmentShader: atmosphereFragment, uniforms: atmosphereUniforms, transparent: true, side: BackSide, blending: AdditiveBlending, depthWrite: false })] })] }));
+    return (jsxs("group", { ref: groupRef, children: [jsx(Environment, { preset: "sunset" }), jsx("ambientLight", { intensity: 2 }), jsx("pointLight", { color: colors[0], intensity: 18, distance: 50, position: [-3, 1, 2] }), jsx("pointLight", { color: colors[1], intensity: 18, distance: 50, position: [3, -1, 2] }), jsx("pointLight", { color: colors[2], intensity: 10, distance: 50, position: [0, 0, 4] }), jsx("pointLight", { color: "#6428b4", intensity: 12, distance: 50, position: [0, -3, 2] }), jsxs("mesh", { ref: meshRef, children: [jsx("sphereGeometry", { args: [1, 64, 64] }), jsx("meshStandardMaterial", { color: meshColor, roughness: roughness, metalness: metalness, envMapIntensity: 2.5, emissive: "#5A1878", emissiveIntensity: 0.8 })] }), jsxs("mesh", { scale: glowSize, children: [jsx("sphereGeometry", { args: [1, 32, 32] }), jsx("shaderMaterial", { ref: atmosphereRef, vertexShader: glowVertex, fragmentShader: atmosphereFragment, uniforms: atmosphereUniforms, transparent: true, side: BackSide, blending: CustomBlending, blendEquation: AddEquation, blendSrc: OneFactor, blendDst: OneFactor, blendSrcAlpha: ZeroFactor, blendDstAlpha: OneFactor, depthWrite: false })] })] }));
 };
 // ── Public Liquid variant ────────────────────────────────────────────────────
 const DEFAULT_COLORS = ["#2C35B7", "#C9242F", "#9DD9EB"];
-const Liquid = ({ colors = DEFAULT_COLORS, meshColor = "#350F3F", speed = 1.0, roughness = 0.15, metalness = 0.95, noiseScale = 0.8, noiseAmplitude = 0.1, glowIntensity = 1.0, glowSize = 1.8, }) => {
-    return (jsxs(Fragment, { children: [jsx(Canvas, { className: "!absolute inset-0 w-full h-full", dpr: [1, 2], camera: { position: [0, 0, 3.2], fov: 50 }, gl: { antialias: true, alpha: true, toneMapping: ACESFilmicToneMapping }, onCreated: ({ gl }) => {
+const Liquid = ({ colors = DEFAULT_COLORS, meshColor = "#350F3F", speed = 1.0, roughness = 0.15, metalness = 0.95, noiseScale = 0.8, noiseAmplitude = 0.1, glowIntensity = 1.0, glowSize = 1.8, state, }) => {
+    return (jsxs(Fragment, { children: [jsx(Canvas, { className: "!absolute inset-0 w-full h-full", style: {
+                    filter: [
+                        'drop-shadow(0 0 10px rgba(192, 132, 252, 0.7))',
+                        'drop-shadow(0 0 25px rgba(147, 51, 234, 0.35))',
+                        'drop-shadow(0 0 50px rgba(124, 58, 237, 0.15))',
+                    ].join(' '),
+                }, dpr: [1, 2], camera: { position: [0, 0, 3.2], fov: 50 }, gl: { antialias: true, alpha: true, premultipliedAlpha: false, toneMapping: ACESFilmicToneMapping }, onCreated: ({ gl }) => {
                     gl.toneMappingExposure = 1.8;
-                }, children: jsx(LiquidScene, { colors: colors, meshColor: meshColor, speed: speed, roughness: roughness, metalness: metalness, noiseScale: noiseScale, noiseAmplitude: noiseAmplitude, glowIntensity: glowIntensity, glowSize: glowSize }) }), jsx("div", { className: "absolute inset-0 pointer-events-none", style: {
+                    gl.setClearColor(0x000000, 0);
+                }, children: jsx(LiquidScene, { colors: colors, meshColor: meshColor, speed: speed, roughness: roughness, metalness: metalness, noiseScale: noiseScale, noiseAmplitude: noiseAmplitude, glowIntensity: glowIntensity, glowSize: glowSize, state: state }) }), jsx("div", { className: "absolute inset-0 pointer-events-none", style: {
                     background: "radial-gradient(circle at center, rgba(255,255,255,0.35) 0%, rgba(180,120,255,0.2) 15%, rgba(100,40,180,0.08) 35%, transparent 55%)",
                     mixBlendMode: "screen",
                 } })] }));

package/dist/components/effects/AIOrb/variants/Liquid/Liquid.types.d.ts

@@ -1,3 +1,4 @@
+import type { OrbState } from "../../AIOrb.types";
 export interface LiquidProps {
     /**
      * Three light colours as hex strings.
@@ -44,4 +45,9 @@ export interface LiquidProps {
      * @default 1.8
      */
     glowSize?: number;
+    /**
+     * State-driven animation. When set, smoothly interpolates speed,
+     * noiseAmplitude, and glowIntensity towards state targets.
+     */
+    state?: OrbState;
 }

package/dist/components/effects/AIOrb/variants/index.d.ts

@@ -2,3 +2,5 @@ export { DotSphere } from "./DotSphere";
 export type { DotSphereProps } from "./DotSphere";
 export { Liquid } from "./Liquid";
 export type { LiquidProps } from "./Liquid";
+export { Aura } from "./Aura";
+export type { AuraProps } from "./Aura";

package/dist/components/effects/CustomCursor/CustomCursor.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import type { CustomCursorContextType, CustomCursorProviderProps, CustomCursorProps, CustomCursorFollowProps } from './CustomCursor.types';
+import * as React from "react";
+import type { CustomCursorContextType, CustomCursorProviderProps, CustomCursorProps, CustomCursorFollowProps } from "./CustomCursor.types";
 /**
  * Hook to access CustomCursor context
  * @throws Error if used outside CustomCursorProvider

package/dist/components/effects/CustomCursor/CustomCursor.js

@@ -18,7 +18,7 @@ const CustomCursorContext = React.createContext(undefined);
 const useCustomCursor = () => {
     const context = React.useContext(CustomCursorContext);
     if (!context) {
-        throw new Error('useCustomCursor must be used within a CustomCursorProvider');
+        throw new Error("useCustomCursor must be used within a CustomCursorProvider");
     }
     return context;
 };
@@ -36,7 +36,7 @@ const useCustomCursor = () => {
  * </CustomCursorProvider>
  * ```
  */
-const CustomCursorProvider = React.forwardRef(({ children, className, allowedPointerTypes = ['mouse'], ...props }, ref) => {
+const CustomCursorProvider = React.forwardRef(({ children, className, allowedPointerTypes = ["mouse"], ...props }, ref) => {
     const [cursorPos, setCursorPos] = React.useState({ x: 0, y: 0 });
     const [isActive, setIsActive] = React.useState(false);
     const containerRef = React.useRef(null);
@@ -52,12 +52,13 @@ const CustomCursorProvider = React.forwardRef(({ children, className, allowedPoi
         // Ensure parent has positioning context for absolute children
         const computedPosition = getComputedStyle(parent).position;
         const previousInlinePosition = parent.style.position;
-        const shouldOverridePosition = computedPosition === 'static';
+        const shouldOverridePosition = computedPosition === "static";
         if (shouldOverridePosition) {
-            parent.style.position = 'relative';
+            parent.style.position = "relative";
         }
         const handlePointerMove = (event) => {
-            const pointerType = (event.pointerType || 'mouse');
+            const pointerType = (event.pointerType ||
+                "mouse");
             if (!allowedPointerTypesSet.has(pointerType))
                 return;
             const rect = parent.getBoundingClientRect();
@@ -69,7 +70,8 @@ const CustomCursorProvider = React.forwardRef(({ children, className, allowedPoi
             setIsActive(true);
         };
         const handlePointerLeave = (event) => {
-            const pointerType = (event.pointerType || 'mouse');
+            const pointerType = (event.pointerType ||
+                "mouse");
             if (!allowedPointerTypesSet.has(pointerType))
                 return;
             setIsActive(false);
@@ -85,23 +87,23 @@ const CustomCursorProvider = React.forwardRef(({ children, className, allowedPoi
         const handleMouseLeave = () => {
             setIsActive(false);
         };
-        const supportsPointerEvents = typeof window !== 'undefined' && 'PointerEvent' in window;
+        const supportsPointerEvents = typeof window !== "undefined" && "PointerEvent" in window;
         if (supportsPointerEvents) {
-            parent.addEventListener('pointermove', handlePointerMove);
-            parent.addEventListener('pointerleave', handlePointerLeave);
+            parent.addEventListener("pointermove", handlePointerMove);
+            parent.addEventListener("pointerleave", handlePointerLeave);
         }
         else {
-            parent.addEventListener('mousemove', handleMouseMove);
-            parent.addEventListener('mouseleave', handleMouseLeave);
+            parent.addEventListener("mousemove", handleMouseMove);
+            parent.addEventListener("mouseleave", handleMouseLeave);
         }
         return () => {
             if (supportsPointerEvents) {
-                parent.removeEventListener('pointermove', handlePointerMove);
-                parent.removeEventListener('pointerleave', handlePointerLeave);
+                parent.removeEventListener("pointermove", handlePointerMove);
+                parent.removeEventListener("pointerleave", handlePointerLeave);
             }
             else {
-                parent.removeEventListener('mousemove', handleMouseMove);
-                parent.removeEventListener('mouseleave', handleMouseLeave);
+                parent.removeEventListener("mousemove", handleMouseMove);
+                parent.removeEventListener("mouseleave", handleMouseLeave);
             }
             if (shouldOverridePosition) {
                 parent.style.position = previousInlinePosition;
@@ -111,7 +113,7 @@ const CustomCursorProvider = React.forwardRef(({ children, className, allowedPoi
     const contextValue = React.useMemo(() => ({ cursorPos, isActive, containerRef, cursorRef }), [cursorPos, isActive]);
     return (jsx(CustomCursorContext.Provider, { value: contextValue, children: jsx("div", { ref: containerRef, "data-slot": "custom-cursor-provider", className: className, ...props, children: children }) }));
 });
-CustomCursorProvider.displayName = 'CustomCursorProvider';
+CustomCursorProvider.displayName = "CustomCursorProvider";
 /**
  * CustomCursor - Main cursor element component
  * Follows mouse position exactly with instant movement
@@ -123,7 +125,7 @@ CustomCursorProvider.displayName = 'CustomCursorProvider';
  * </CustomCursor>
  * ```
  */
-const CustomCursor = React.forwardRef(({ children, size = 'md', color = 'primary', variant = 'default', shape = 'arrow', className, style, ...props }, ref) => {
+const CustomCursor = React.forwardRef(({ children, size = "md", color = "primary", variant = "default", shape = "arrow", className, style, ...props }, ref) => {
     const { cursorPos, isActive, containerRef, cursorRef } = useCustomCursor();
     React.useImperativeHandle(ref, () => cursorRef.current);
     const x = useMotionValue(0);
@@ -136,7 +138,7 @@ const CustomCursor = React.forwardRef(({ children, size = 'md', color = 'primary
             return;
         }
         const previousInlineCursor = parentElement.style.cursor;
-        parentElement.style.cursor = 'none';
+        parentElement.style.cursor = "none";
         return () => {
             parentElement.style.cursor = previousInlineCursor;
         };
@@ -147,32 +149,32 @@ const CustomCursor = React.forwardRef(({ children, size = 'md', color = 'primary
         y.set(cursorPos.y);
     }, [cursorPos, x, y]);
     // Default content based on shape
-    const defaultContent = shape === 'arrow' ? (jsx(PaperAirplaneIcon, { className: "w-full h-full rotate-180" })) : (jsx("div", { className: "w-full h-full" }));
+    const defaultContent = shape === "arrow" ? (jsx(PaperAirplaneIcon, { className: "w-full h-full rotate-180" })) : (jsx("div", { className: "w-full h-full" }));
     return (jsx(AnimatePresence, { children: isActive && (jsx(motion.div, { ref: cursorRef, "data-slot": "custom-cursor", className: cn(customCursorTheme.baseStyle, customCursorTheme.cursorStyle, customCursorTheme.sizes[size], customCursorTheme.colors[color], customCursorTheme.variants[variant], customCursorTheme.shapes[shape], className), style: { top: y, left: x, ...style }, variants: customCursorVariants, initial: "initial", animate: "animate", exit: "exit", role: "presentation", "aria-hidden": "true", ...props, children: children || defaultContent })) }));
 });
-CustomCursor.displayName = 'CustomCursor';
+CustomCursor.displayName = "CustomCursor";
 /**
  * Calculate offset based on alignment and element dimensions
  */
 const calculateOffset = (align, sideOffset, width, height) => {
     switch (align) {
-        case 'center':
+        case "center":
             return { x: width / 2, y: height / 2 };
-        case 'top':
+        case "top":
             return { x: width / 2, y: height + sideOffset };
-        case 'top-left':
+        case "top-left":
             return { x: width + sideOffset, y: height + sideOffset };
-        case 'top-right':
+        case "top-right":
             return { x: -sideOffset, y: height + sideOffset };
-        case 'bottom':
+        case "bottom":
             return { x: width / 2, y: -sideOffset };
-        case 'bottom-left':
+        case "bottom-left":
             return { x: width + sideOffset, y: -sideOffset };
-        case 'bottom-right':
+        case "bottom-right":
             return { x: -sideOffset, y: -sideOffset };
-        case 'left':
+        case "left":
             return { x: width + sideOffset, y: height / 2 };
-        case 'right':
+        case "right":
             return { x: -sideOffset, y: height / 2 };
         default:
             return { x: 0, y: 0 };
@@ -193,12 +195,12 @@ const calculateOffset = (align, sideOffset, width, height) => {
  */
 /** Available colors for random selection in user variant */
 const userVariantColors = [
-    'primary',
-    'success',
-    'warning',
-    'danger',
+    "primary",
+    "success",
+    "warning",
+    "danger",
 ];
-const CustomCursorFollow = React.forwardRef(({ children, sideOffset = 15, align = 'bottom-right', transition, variant = 'default', avatar, name, color, className, style, ...props }, ref) => {
+const CustomCursorFollow = React.forwardRef(({ children, sideOffset = 15, align = "bottom-right", transition, variant = "default", avatar, name, color, className, style, ...props }, ref) => {
     const { cursorPos, isActive, cursorRef } = useCustomCursor();
     const cursorFollowRef = React.useRef(null);
     const shouldReduceMotion = useReducedMotion();
@@ -223,7 +225,7 @@ const CustomCursorFollow = React.forwardRef(({ children, sideOffset = 15, align
     // Apply spring physics for smooth following
     const springConfig = shouldReduceMotion
         ? reducedMotionSpringConfig
-        : transition !== null && transition !== void 0 ? transition : defaultSpringConfig;
+        : (transition !== null && transition !== void 0 ? transition : defaultSpringConfig);
     const springX = useSpring(x, springConfig);
     const springY = useSpring(y, springConfig);
     // Track size changes on the follow element
@@ -244,14 +246,14 @@ const CustomCursorFollow = React.forwardRef(({ children, sideOffset = 15, align
         };
         updateDimensions();
         const cleanupFns = [];
-        if (typeof ResizeObserver !== 'undefined') {
+        if (typeof ResizeObserver !== "undefined") {
             const observer = new ResizeObserver(updateDimensions);
             observer.observe(followElement);
             cleanupFns.push(() => observer.disconnect());
         }
-        if (typeof window !== 'undefined') {
-            window.addEventListener('resize', updateDimensions);
-            cleanupFns.push(() => window.removeEventListener('resize', updateDimensions));
+        if (typeof window !== "undefined") {
+            window.addEventListener("resize", updateDimensions);
+            cleanupFns.push(() => window.removeEventListener("resize", updateDimensions));
         }
         return () => {
             cleanupFns.forEach((cleanup) => cleanup());
@@ -275,14 +277,14 @@ const CustomCursorFollow = React.forwardRef(({ children, sideOffset = 15, align
         };
         updateCursorDimensions();
         const cleanupFns = [];
-        if (typeof ResizeObserver !== 'undefined') {
+        if (typeof ResizeObserver !== "undefined") {
             const observer = new ResizeObserver(updateCursorDimensions);
             observer.observe(cursorElement);
             cleanupFns.push(() => observer.disconnect());
         }
-        if (typeof window !== 'undefined') {
-            window.addEventListener('resize', updateCursorDimensions);
-            cleanupFns.push(() => window.removeEventListener('resize', updateCursorDimensions));
+        if (typeof window !== "undefined") {
+            window.addEventListener("resize", updateCursorDimensions);
+            cleanupFns.push(() => window.removeEventListener("resize", updateCursorDimensions));
         }
         return () => {
             cleanupFns.forEach((cleanup) => cleanup());
@@ -311,13 +313,14 @@ const CustomCursorFollow = React.forwardRef(({ children, sideOffset = 15, align
     ]);
     // Determine content based on variant
     const renderContent = () => {
-        if (variant === 'user') {
-            return (jsxs(Fragment, { children: [avatar && jsx(Avatar, { src: avatar, alt: name || 'User', size: "xs" }), name && (jsx("span", { className: "text-white text-sm font-medium whitespace-nowrap", children: name }))] }));
+        if (variant === "user") {
+            return (jsxs(Fragment, { children: [avatar && jsx(Avatar, { src: avatar, name: name || "User", size: "xs" }), name && (jsx("span", { className: "text-white text-sm font-medium whitespace-nowrap", children: name }))] }));
         }
         return children;
     };
-    return (jsx(AnimatePresence, { children: isActive && (jsx(motion.div, { ref: cursorFollowRef, "data-slot": "custom-cursor-follow", className: cn(customCursorTheme.baseStyle, customCursorTheme.cursorFollowVariants[variant], variant === 'user' && customCursorTheme.cursorFollowColors[resolvedColor], className), style: { top: springY, left: springX, ...style }, variants: customCursorVariants, initial: "initial", animate: "animate", exit: "exit", role: "presentation", "aria-hidden": "true", ...props, children: renderContent() })) }));
+    return (jsx(AnimatePresence, { children: isActive && (jsx(motion.div, { ref: cursorFollowRef, "data-slot": "custom-cursor-follow", className: cn(customCursorTheme.baseStyle, customCursorTheme.cursorFollowVariants[variant], variant === "user" &&
+                customCursorTheme.cursorFollowColors[resolvedColor], className), style: { top: springY, left: springX, ...style }, variants: customCursorVariants, initial: "initial", animate: "animate", exit: "exit", role: "presentation", "aria-hidden": "true", ...props, children: renderContent() })) }));
 });
-CustomCursorFollow.displayName = 'CustomCursorFollow';
+CustomCursorFollow.displayName = "CustomCursorFollow";
 
 export { CustomCursor, CustomCursorFollow, CustomCursorProvider, useCustomCursor };