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

package/dist/components/data-display/Timeline/TimelineMarker.js

@@ -28,9 +28,9 @@ const TimelineMarker = React__default.forwardRef(({ icon, className, ...props },
     const variants = shouldReduceMotion ? undefined : timelineMarkerVariants;
     // Filter out conflicting motion props
     const { onDrag, onDragEnd, onDragStart, onAnimationStart, onAnimationEnd, ...safeProps } = props;
-    return (jsxs("div", { className: cn("relative flex flex-col items-center", isHorizontal && "flex-row"), children: [jsx(motion.div, { ref: ref, className: cn(theme.markerStyle, theme.markerStatuses[status], className), "data-status": status, "aria-label": `${status} step`, initial: variants ? "hidden" : undefined, animate: variants ? "visible" : undefined, variants: variants, ...safeProps, children: renderIcon() }), !isLast && !isHorizontal && (jsx("div", { className: cn("w-0.5 flex-1 min-h-4", status === "completed"
+    return (jsxs("div", { className: cn("relative flex flex-col items-center", isHorizontal && "w-full"), children: [jsx(motion.div, { ref: ref, className: cn(theme.markerStyle, theme.markerStatuses[status], className), "data-status": status, "aria-label": `${status} step`, initial: variants ? "hidden" : undefined, animate: variants ? "visible" : undefined, variants: variants, ...safeProps, children: renderIcon() }), !isLast && !isHorizontal && (jsx("div", { className: cn("w-0.5 flex-1 min-h-4", status === "completed"
                     ? "bg-[var(--color-success)]"
-                    : "bg-[var(--color-border)]"), "aria-hidden": "true" })), !isLast && isHorizontal && (jsx("div", { className: cn("h-0.5 flex-1 min-w-4", status === "completed"
+                    : "bg-[var(--color-border)]"), "aria-hidden": "true" })), !isLast && isHorizontal && (jsx("div", { className: cn("absolute top-1/2 -translate-y-1/2 left-1/2 h-0.5 w-full", status === "completed"
                     ? "bg-[var(--color-success)]"
                     : "bg-[var(--color-border)]"), "aria-hidden": "true" }))] }));
 });

package/dist/components/effects/3d/index.d.ts

@@ -1,5 +1,5 @@
 export { AIOrb } from "../AIOrb";
-export type { AIOrbProps, DotSphereProps, LiquidProps } from "../AIOrb";
+export type { AIOrbProps, OrbState, DotSphereProps, LiquidProps, AuraProps } from "../AIOrb";
 export { Particles } from "../Particles";
 export type { ParticlesProps } from "../Particles";
 export { SpotlightBorder } from "../SpotlightBorder";

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

@@ -3,4 +3,5 @@ import type { AIOrbProps } from "./AIOrb.types";
 export declare const AIOrb: React.FC<AIOrbProps> & {
     DotSphere: React.FC<import("./variants").DotSphereProps>;
     Liquid: React.FC<import("./variants").LiquidProps>;
+    Aura: React.FC<import("./variants").AuraProps>;
 };

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

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import { DotSphere } from './variants/DotSphere/DotSphere.js';
 import { Liquid } from './variants/Liquid/Liquid.js';
+import { Aura } from './variants/Aura/Aura.js';
 
 const AIOrbRoot = ({ size, backgroundColor = "#000", className, style, children, ...props }) => {
     const containerStyle = {
@@ -9,8 +10,8 @@ const AIOrbRoot = ({ size, backgroundColor = "#000", className, style, children,
         ...(size ? { width: size, height: size } : {}),
         ...style,
     };
-    return (jsx("div", { className: cn("relative overflow-hidden", !size && "w-full h-full", className), style: containerStyle, ...props, children: children }));
+    return (jsx("div", { className: cn("relative overflow-visible", !size && "w-full h-full", className), style: containerStyle, ...props, children: children }));
 };
-const AIOrb = Object.assign(AIOrbRoot, { DotSphere, Liquid });
+const AIOrb = Object.assign(AIOrbRoot, { DotSphere, Liquid, Aura });
 
 export { AIOrb };

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

@@ -1,4 +1,5 @@
 import React from "react";
+export type OrbState = "idle" | "listening" | "thinking" | "speaking";
 export interface AIOrbProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
     /**
      * Fixed size in pixels. If omitted the orb fills its parent.

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

@@ -0,0 +1,2 @@
+export { useOrbState } from "./useOrbState";
+export type { StateParamConfig } from "./useOrbState";

package/dist/components/effects/AIOrb/hooks/useOrbState.d.ts

@@ -0,0 +1,20 @@
+import type { OrbState } from "../AIOrb.types";
+/**
+ * State-to-parameter configuration. Maps each OrbState to a set of numeric
+ * target values that will be smoothly interpolated.
+ */
+export type StateParamConfig<T extends Record<string, number>> = Record<OrbState, T>;
+/**
+ * Generic ref-based interpolation hook for orb state-driven animation.
+ *
+ * - When `state` is defined, target values come from the config map.
+ * - When `state` is undefined, target values come from the `propValues` fallback
+ *   (backwards-compatible — orb behaves exactly as if no state was set).
+ * - Returns a mutable `valuesRef` read inside animation loops, and a `tick(dt)`
+ *   function that advances the interpolation by `dt` seconds.
+ * - Zero React re-renders — all mutation is ref-based.
+ */
+export declare function useOrbState<T extends Record<string, number>>(state: OrbState | undefined, config: StateParamConfig<T>, propValues: T, damping?: number): {
+    readonly valuesRef: import("react").RefObject<T>;
+    readonly tick: (dt: number) => void;
+};

package/dist/components/effects/AIOrb/hooks/useOrbState.js

@@ -0,0 +1,27 @@
+import { useRef, useCallback } from 'react';
+
+/**
+ * Generic ref-based interpolation hook for orb state-driven animation.
+ *
+ * - When `state` is defined, target values come from the config map.
+ * - When `state` is undefined, target values come from the `propValues` fallback
+ *   (backwards-compatible — orb behaves exactly as if no state was set).
+ * - Returns a mutable `valuesRef` read inside animation loops, and a `tick(dt)`
+ *   function that advances the interpolation by `dt` seconds.
+ * - Zero React re-renders — all mutation is ref-based.
+ */
+function useOrbState(state, config, propValues, damping = 4) {
+    const valuesRef = useRef({ ...propValues });
+    const tick = useCallback((dt) => {
+        const target = state ? config[state] : propValues;
+        const current = valuesRef.current;
+        const factor = 1 - Math.exp(-damping * dt);
+        for (const key in target) {
+            current[key] = (current[key] +
+                (target[key] - current[key]) * factor);
+        }
+    }, [state, config, propValues, damping]);
+    return { valuesRef, tick };
+}
+
+export { useOrbState };

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

@@ -1,3 +1,3 @@
 export { AIOrb } from "./AIOrb";
-export type { AIOrbProps } from "./AIOrb.types";
-export type { DotSphereProps, LiquidProps } from "./variants";
+export type { AIOrbProps, OrbState } from "./AIOrb.types";
+export type { DotSphereProps, LiquidProps, AuraProps } from "./variants";

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

@@ -0,0 +1,3 @@
+import React from "react";
+import type { AuraProps } from "./Aura.types";
+export declare const Aura: React.FC<AuraProps>;

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

@@ -0,0 +1,75 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { useOrbState } from '../../hooks/useOrbState.js';
+import { ShaderCanvas } from './ShaderCanvas.js';
+import { auraFragmentShader } from './Aura.shaders.js';
+
+const STATE_CONFIG = {
+    idle: { speed: 10, amplitude: 1.2, frequency: 0.4, brightness: 1.0, scale: 0.2 },
+    listening: { speed: 20, amplitude: 1.0, frequency: 0.7, brightness: 1.75, scale: 0.3 },
+    thinking: { speed: 30, amplitude: 0.5, frequency: 1.0, brightness: 1.5, scale: 0.3 },
+    speaking: { speed: 70, amplitude: 0.75, frequency: 1.25, brightness: 1.5, scale: 0.3 },
+};
+// ── Hex → RGB helper ─────────────────────────────────────────────────────────
+function hexToRgb(hex) {
+    const h = hex.replace("#", "");
+    const num = parseInt(h.length === 3 ? h.split("").map((c) => c + c).join("") : h, 16);
+    return [(num >> 16) / 255, ((num >> 8) & 0xff) / 255, (num & 0xff) / 255];
+}
+// ── Aura component ───────────────────────────────────────────────────────────
+const Aura = ({ color = "#1FD5F9", colorShift = 0.3, speed = 10, amplitude = 2.0, frequency = 0.5, scale = 0.2, blur = 1.0, brightness = 1.5, themeMode = "dark", state, }) => {
+    const rgb = useMemo(() => hexToRgb(color), [color]);
+    const propValues = useMemo(() => ({ speed, amplitude, frequency, brightness, scale }), [speed, amplitude, frequency, brightness, scale]);
+    const { valuesRef, tick } = useOrbState(state, STATE_CONFIG, propValues);
+    // Stable uniform object — mutated in-place each frame via the getter ref
+    const uniforms = useMemo(() => ({
+        u_color: rgb,
+        u_colorShift: colorShift,
+        u_speed: speed,
+        u_amplitude: amplitude,
+        u_frequency: frequency,
+        u_scale: scale,
+        u_blur: blur,
+        u_brightness: brightness,
+        u_bloom: 0.4,
+        u_spacing: 0.5,
+        u_variance: 0.1,
+        u_smoothing: 1.0,
+        u_lightMode: themeMode === "light" ? 1.0 : 0.0,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    // Sync non-interpolated props every render
+    uniforms.u_color = rgb;
+    uniforms.u_colorShift = colorShift;
+    uniforms.u_blur = blur;
+    uniforms.u_lightMode = themeMode === "light" ? 1.0 : 0.0;
+    // Custom ref whose getter ticks interpolation + writes interpolated values
+    // into the uniform object right before ShaderCanvas reads it each frame.
+    const tickingRef = useMemo(() => {
+        let lastT = 0;
+        return {
+            get current() {
+                const now = performance.now() / 1000;
+                if (lastT > 0) {
+                    tick(Math.min(now - lastT, 0.1));
+                }
+                lastT = now;
+                const v = valuesRef.current;
+                uniforms.u_speed = v.speed;
+                uniforms.u_amplitude = v.amplitude;
+                uniforms.u_frequency = v.frequency;
+                uniforms.u_brightness = v.brightness;
+                uniforms.u_scale = v.scale;
+                return uniforms;
+            },
+            set current(_v) {
+                // no-op — ShaderCanvas never writes to this ref
+            },
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tick]);
+    return (jsx("div", { className: "absolute inset-0", children: jsx(ShaderCanvas, { fragmentShader: auraFragmentShader, uniformsRef: tickingRef }) }));
+};
+
+export { Aura };

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

@@ -0,0 +1,28 @@
+/**
+ * Aura fragment shader — faithful port of LiveKit's AgentAudioVisualizerAura.
+ *
+ * Uses 36 iterations of turbulence-warped SDF evaluation to produce a
+ * luminous ring through accumulation. The ring shape emerges naturally
+ * from the turbulence + circle SDF interaction — not from drawing a
+ * ring directly.
+ *
+ * Uniforms (all from Aura component):
+ *   u_color       vec3  Base RGB colour (0-1)
+ *   u_colorShift  float HSV hue shift range across iterations (0-1)
+ *   u_speed       float Animation speed multiplier
+ *   u_amplitude   float Turbulence displacement strength
+ *   u_frequency   float Wave complexity (remapped to 2.0-15.0)
+ *   u_scale       float Circle SDF radius
+ *   u_blur        float Edge softness
+ *   u_brightness  float Overall brightness/opacity
+ *   u_bloom       float Glow intensity (dark mode only)
+ *   u_spacing     float Iteration spacing (remapped to 1.0-TAU)
+ *   u_variance    float Amplitude variance per turbulence layer
+ *   u_smoothing   float Dynamic blur smoothing factor
+ *   u_lightMode   float 0.0 = dark mode, 1.0 = light mode
+ *
+ * Built-in from ShaderCanvas:
+ *   iTime          float Elapsed seconds
+ *   iResolution    vec2  Viewport pixel dimensions
+ */
+export declare const auraFragmentShader = "#version 300 es\nprecision highp float;\n\nuniform float iTime;\nuniform vec2  iResolution;\n\nuniform vec3  u_color;\nuniform float u_colorShift;\nuniform float u_speed;\nuniform float u_amplitude;\nuniform float u_frequency;\nuniform float u_scale;\nuniform float u_blur;\nuniform float u_brightness;\nuniform float u_bloom;\nuniform float u_spacing;\nuniform float u_variance;\nuniform float u_smoothing;\nuniform float u_lightMode;\n\nout vec4 fragColor;\n\n/* \u2500\u2500 Constants \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\nconst float TAU = 6.283185;\n\n/* \u2500\u2500 Utilities \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\nvec2 randFibo(vec2 p) {\n  p = fract(p * vec2(443.897, 441.423));\n  p += dot(p, p.yx + 19.19);\n  return fract((p.xx + p.yx) * p.xy);\n}\n\nvec3 Tonemap(vec3 x) {\n  x *= 4.0;\n  return x / (1.0 + x);\n}\n\nfloat luma(vec3 color) {\n  return dot(color, vec3(0.299, 0.587, 0.114));\n}\n\nvec3 rgb2hsv(vec3 c) {\n  vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);\n  vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));\n  vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));\n  float d = q.x - min(q.w, q.y);\n  float e = 1.0e-10;\n  return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);\n}\n\nvec3 hsv2rgb(vec3 c) {\n  vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);\n  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\n  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\n}\n\n/* \u2500\u2500 SDF \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\nfloat sdCircle(vec2 st, float r) {\n  return length(st) - r;\n}\n\n/* \u2500\u2500 Turbulence \u2014 4 layers of sinusoidal displacement with rotation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\nvec2 turb(vec2 pos, float t, float it) {\n  mat2 rotation = mat2(0.6, -0.25, 0.25, 0.9);\n  mat2 layerRotation = mat2(0.6, -0.8, 0.8, 0.6);\n\n  float frequency = mix(2.0, 15.0, u_frequency);\n  float amplitude = u_amplitude;\n  float frequencyGrowth = 1.4;\n  float animTime = t * 0.1 * u_speed;\n\n  const int LAYERS = 4;\n  for (int i = 0; i < LAYERS; i++) {\n    vec2 rotatedPos = pos * rotation;\n    vec2 wave = sin(frequency * rotatedPos + float(i) * animTime + it);\n\n    pos += (amplitude / frequency) * rotation[0] * wave;\n\n    rotation *= layerRotation;\n    amplitude *= mix(1.0, max(wave.x, wave.y), u_variance);\n    frequency *= frequencyGrowth;\n  }\n\n  return pos;\n}\n\n/* \u2500\u2500 Main \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\nconst float ITERATIONS = 36.0;\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / iResolution.xy;\n\n  vec3 pp = vec3(0.0);\n  vec3 bloom = vec3(0.0);\n  float t = iTime * 0.5;\n  vec2 pos = uv - 0.5;\n\n  vec2 prevPos = turb(pos, t, 0.0 - 1.0 / ITERATIONS);\n  float spacing = mix(1.0, TAU, u_spacing);\n\n  for (float i = 1.0; i < ITERATIONS + 1.0; i++) {\n    float iter = i / ITERATIONS;\n    vec2 st = turb(pos, t, iter * spacing);\n    float d = abs(sdCircle(st, u_scale));\n    float pd = distance(st, prevPos);\n    prevPos = st;\n    float dynamicBlur = exp2(pd * 2.0 * 1.4426950408889634) - 1.0;\n    float ds = smoothstep(0.0, u_blur * 0.05 + max(dynamicBlur * u_smoothing, 0.001), d);\n\n    vec3 col = u_color;\n    if (u_colorShift > 0.01) {\n      vec3 hsv = rgb2hsv(col);\n      hsv.x = fract(hsv.x + (1.0 - iter) * u_colorShift * 0.3);\n      col = hsv2rgb(hsv);\n    }\n\n    float invd = 1.0 / max(d + dynamicBlur, 0.001);\n    pp += (ds - 1.0) * col;\n    bloom += clamp(invd, 0.0, 250.0) * col;\n  }\n\n  pp *= 1.0 / ITERATIONS;\n\n  vec3 color;\n\n  // Dark mode (default)\n  if (u_lightMode < 0.5) {\n    bloom = bloom / (bloom + 2e4);\n    color = (-pp + bloom * 3.0 * u_bloom) * 1.2;\n    color += (randFibo(gl_FragCoord.xy).x - 0.5) / 255.0;\n    color = Tonemap(color);\n    float alpha = luma(color) * u_brightness;\n    fragColor = vec4(color * u_brightness, alpha);\n  }\n  // Light mode\n  else {\n    color = -pp;\n    color += (randFibo(gl_FragCoord.xy).x - 0.5) / 255.0;\n\n    float brightness = length(color);\n    vec3 direction = brightness > 0.0 ? color / brightness : color;\n\n    float factor = 2.0;\n    float mappedBrightness = (brightness * factor) / (1.0 + brightness * factor);\n    color = direction * mappedBrightness;\n\n    float gray = dot(color, vec3(0.2, 0.5, 0.1));\n    float saturationBoost = 3.0;\n    color = mix(vec3(gray), color, saturationBoost);\n\n    color = clamp(color, 0.0, 1.0);\n\n    float alpha = mappedBrightness * clamp(u_brightness, 1.0, 2.0);\n    fragColor = vec4(color, alpha);\n  }\n}\n";

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

@@ -0,0 +1,191 @@
+/**
+ * Aura fragment shader — faithful port of LiveKit's AgentAudioVisualizerAura.
+ *
+ * Uses 36 iterations of turbulence-warped SDF evaluation to produce a
+ * luminous ring through accumulation. The ring shape emerges naturally
+ * from the turbulence + circle SDF interaction — not from drawing a
+ * ring directly.
+ *
+ * Uniforms (all from Aura component):
+ *   u_color       vec3  Base RGB colour (0-1)
+ *   u_colorShift  float HSV hue shift range across iterations (0-1)
+ *   u_speed       float Animation speed multiplier
+ *   u_amplitude   float Turbulence displacement strength
+ *   u_frequency   float Wave complexity (remapped to 2.0-15.0)
+ *   u_scale       float Circle SDF radius
+ *   u_blur        float Edge softness
+ *   u_brightness  float Overall brightness/opacity
+ *   u_bloom       float Glow intensity (dark mode only)
+ *   u_spacing     float Iteration spacing (remapped to 1.0-TAU)
+ *   u_variance    float Amplitude variance per turbulence layer
+ *   u_smoothing   float Dynamic blur smoothing factor
+ *   u_lightMode   float 0.0 = dark mode, 1.0 = light mode
+ *
+ * Built-in from ShaderCanvas:
+ *   iTime          float Elapsed seconds
+ *   iResolution    vec2  Viewport pixel dimensions
+ */
+const auraFragmentShader = `#version 300 es
+precision highp float;
+
+uniform float iTime;
+uniform vec2  iResolution;
+
+uniform vec3  u_color;
+uniform float u_colorShift;
+uniform float u_speed;
+uniform float u_amplitude;
+uniform float u_frequency;
+uniform float u_scale;
+uniform float u_blur;
+uniform float u_brightness;
+uniform float u_bloom;
+uniform float u_spacing;
+uniform float u_variance;
+uniform float u_smoothing;
+uniform float u_lightMode;
+
+out vec4 fragColor;
+
+/* ── Constants ─────────────────────────────────────────────────────────────── */
+
+const float TAU = 6.283185;
+
+/* ── Utilities ─────────────────────────────────────────────────────────────── */
+
+vec2 randFibo(vec2 p) {
+  p = fract(p * vec2(443.897, 441.423));
+  p += dot(p, p.yx + 19.19);
+  return fract((p.xx + p.yx) * p.xy);
+}
+
+vec3 Tonemap(vec3 x) {
+  x *= 4.0;
+  return x / (1.0 + x);
+}
+
+float luma(vec3 color) {
+  return dot(color, vec3(0.299, 0.587, 0.114));
+}
+
+vec3 rgb2hsv(vec3 c) {
+  vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
+  vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
+  vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
+  float d = q.x - min(q.w, q.y);
+  float e = 1.0e-10;
+  return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
+}
+
+vec3 hsv2rgb(vec3 c) {
+  vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}
+
+/* ── SDF ───────────────────────────────────────────────────────────────────── */
+
+float sdCircle(vec2 st, float r) {
+  return length(st) - r;
+}
+
+/* ── Turbulence — 4 layers of sinusoidal displacement with rotation ────────── */
+
+vec2 turb(vec2 pos, float t, float it) {
+  mat2 rotation = mat2(0.6, -0.25, 0.25, 0.9);
+  mat2 layerRotation = mat2(0.6, -0.8, 0.8, 0.6);
+
+  float frequency = mix(2.0, 15.0, u_frequency);
+  float amplitude = u_amplitude;
+  float frequencyGrowth = 1.4;
+  float animTime = t * 0.1 * u_speed;
+
+  const int LAYERS = 4;
+  for (int i = 0; i < LAYERS; i++) {
+    vec2 rotatedPos = pos * rotation;
+    vec2 wave = sin(frequency * rotatedPos + float(i) * animTime + it);
+
+    pos += (amplitude / frequency) * rotation[0] * wave;
+
+    rotation *= layerRotation;
+    amplitude *= mix(1.0, max(wave.x, wave.y), u_variance);
+    frequency *= frequencyGrowth;
+  }
+
+  return pos;
+}
+
+/* ── Main ──────────────────────────────────────────────────────────────────── */
+
+const float ITERATIONS = 36.0;
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / iResolution.xy;
+
+  vec3 pp = vec3(0.0);
+  vec3 bloom = vec3(0.0);
+  float t = iTime * 0.5;
+  vec2 pos = uv - 0.5;
+
+  vec2 prevPos = turb(pos, t, 0.0 - 1.0 / ITERATIONS);
+  float spacing = mix(1.0, TAU, u_spacing);
+
+  for (float i = 1.0; i < ITERATIONS + 1.0; i++) {
+    float iter = i / ITERATIONS;
+    vec2 st = turb(pos, t, iter * spacing);
+    float d = abs(sdCircle(st, u_scale));
+    float pd = distance(st, prevPos);
+    prevPos = st;
+    float dynamicBlur = exp2(pd * 2.0 * 1.4426950408889634) - 1.0;
+    float ds = smoothstep(0.0, u_blur * 0.05 + max(dynamicBlur * u_smoothing, 0.001), d);
+
+    vec3 col = u_color;
+    if (u_colorShift > 0.01) {
+      vec3 hsv = rgb2hsv(col);
+      hsv.x = fract(hsv.x + (1.0 - iter) * u_colorShift * 0.3);
+      col = hsv2rgb(hsv);
+    }
+
+    float invd = 1.0 / max(d + dynamicBlur, 0.001);
+    pp += (ds - 1.0) * col;
+    bloom += clamp(invd, 0.0, 250.0) * col;
+  }
+
+  pp *= 1.0 / ITERATIONS;
+
+  vec3 color;
+
+  // Dark mode (default)
+  if (u_lightMode < 0.5) {
+    bloom = bloom / (bloom + 2e4);
+    color = (-pp + bloom * 3.0 * u_bloom) * 1.2;
+    color += (randFibo(gl_FragCoord.xy).x - 0.5) / 255.0;
+    color = Tonemap(color);
+    float alpha = luma(color) * u_brightness;
+    fragColor = vec4(color * u_brightness, alpha);
+  }
+  // Light mode
+  else {
+    color = -pp;
+    color += (randFibo(gl_FragCoord.xy).x - 0.5) / 255.0;
+
+    float brightness = length(color);
+    vec3 direction = brightness > 0.0 ? color / brightness : color;
+
+    float factor = 2.0;
+    float mappedBrightness = (brightness * factor) / (1.0 + brightness * factor);
+    color = direction * mappedBrightness;
+
+    float gray = dot(color, vec3(0.2, 0.5, 0.1));
+    float saturationBoost = 3.0;
+    color = mix(vec3(gray), color, saturationBoost);
+
+    color = clamp(color, 0.0, 1.0);
+
+    float alpha = mappedBrightness * clamp(u_brightness, 1.0, 2.0);
+    fragColor = vec4(color, alpha);
+  }
+}
+`;
+
+export { auraFragmentShader };

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

@@ -0,0 +1,53 @@
+import type { OrbState } from "../../AIOrb.types";
+export interface AuraProps {
+    /**
+     * Base colour as a hex string.
+     * @default '#1FD5F9'
+     */
+    color?: string;
+    /**
+     * HSV hue shift for iridescence (0-1).
+     * @default 0.3
+     */
+    colorShift?: number;
+    /**
+     * Animation speed multiplier.
+     * @default 10
+     */
+    speed?: number;
+    /**
+     * Wave displacement strength.
+     * @default 2.0
+     */
+    amplitude?: number;
+    /**
+     * Wave complexity.
+     * @default 0.5
+     */
+    frequency?: number;
+    /**
+     * Circle SDF radius in normalized coordinates.
+     * @default 0.2
+     */
+    scale?: number;
+    /**
+     * Edge softness.
+     * @default 1.0
+     */
+    blur?: number;
+    /**
+     * Overall brightness/opacity.
+     * @default 1.5
+     */
+    brightness?: number;
+    /**
+     * Rendering mode — affects colour inversion for light backgrounds.
+     * @default 'dark'
+     */
+    themeMode?: "dark" | "light";
+    /**
+     * State-driven animation. When set, overrides speed/amplitude/frequency/
+     * brightness/scale with smooth interpolation towards state targets.
+     */
+    state?: OrbState;
+}

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

@@ -0,0 +1,17 @@
+import React from "react";
+export interface ShaderCanvasProps {
+    fragmentShader: string;
+    uniformsRef: React.MutableRefObject<Record<string, number | number[]>>;
+    maxDpr?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * 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
+ */
+export declare const ShaderCanvas: React.FC<ShaderCanvasProps>;

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";