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

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

package/dist/components/effects/GlassSurface/GlassSurface.js

@@ -23,7 +23,7 @@ const useDarkMode = () => {
  * Creates a realistic chromatic aberration glass effect using SVG filters.
  * Works as a wrapper for any content.
  */
-const GlassSurface = ({ children, width, height, borderRadius = 20, borderWidth = 0.07, brightness = 50, opacity = 0.93, blur = 11, displace = 0.7, backgroundOpacity = 0.1, backgroundColor, saturation = 1.8, distortionScale = -180, redOffset = 0, greenOffset = 10, blueOffset = 20, xChannel = "R", yChannel = "G", mixBlendMode = "difference", frosted = false, className = "", style = {}, }) => {
+const GlassSurface = ({ children, width, height, borderRadius = 20, borderWidth = 0.07, brightness: brightnessProp, opacity: opacityProp, blur: blurProp, displace: displaceProp, backgroundOpacity: backgroundOpacityProp, backgroundColor, saturation: saturationProp, distortionScale: distortionScaleProp, redOffset = 0, greenOffset = 10, blueOffset = 20, xChannel = "R", yChannel = "G", mixBlendMode: mixBlendModeProp, colorScheme = "auto", frosted = false, className = "", style = {}, }) => {
     const uniqueId = useId().replace(/:/g, "-");
     const filterId = `glass-filter-${uniqueId}`;
     const redGradId = `red-grad-${uniqueId}`;
@@ -37,6 +37,19 @@ const GlassSurface = ({ children, width, height, borderRadius = 20, borderWidth
     const blueChannelRef = useRef(null);
     const gaussianBlurRef = useRef(null);
     const isDarkMode = useDarkMode();
+    const resolvedDark = colorScheme === "auto" ? isDarkMode : colorScheme === "dark";
+    // Theme-aware defaults: user-provided props always win
+    // Note: brightness/opacity control the displacement map center fill, NOT visual brightness.
+    // brightness=50 + opacity=1 = neutral center (no displacement), only edges refract.
+    // On light backgrounds, high displacement pulls in black out-of-bounds pixels → gray artifacts.
+    const brightness = brightnessProp !== null && brightnessProp !== void 0 ? brightnessProp : 50;
+    const opacity = opacityProp !== null && opacityProp !== void 0 ? opacityProp : (resolvedDark ? 0.93 : 1);
+    const blur = blurProp !== null && blurProp !== void 0 ? blurProp : 11;
+    const displace = displaceProp !== null && displaceProp !== void 0 ? displaceProp : 0.7;
+    const backgroundOpacity = backgroundOpacityProp !== null && backgroundOpacityProp !== void 0 ? backgroundOpacityProp : (resolvedDark ? 0.1 : 0);
+    const saturation = saturationProp !== null && saturationProp !== void 0 ? saturationProp : (resolvedDark ? 1.8 : 1.4);
+    const distortionScale = distortionScaleProp !== null && distortionScaleProp !== void 0 ? distortionScaleProp : (resolvedDark ? -180 : -40);
+    const mixBlendMode = mixBlendModeProp !== null && mixBlendModeProp !== void 0 ? mixBlendModeProp : (resolvedDark ? "difference" : "multiply");
     /**
      * Generates the SVG displacement map as a Data URI
      */
@@ -157,7 +170,7 @@ const GlassSurface = ({ children, width, height, borderRadius = 20, borderWidth
         const frostedBlur = frosted ? "blur(12px)" : "";
         if (svgSupported) {
             // Determine background color: use prop if provided, otherwise auto-detect based on theme
-            const bgColor = backgroundColor || (isDarkMode ? "hsl(0 0% 0%)" : "hsl(0 0% 100%)");
+            const bgColor = backgroundColor || (resolvedDark ? "hsl(0 0% 0%)" : "hsl(0 0% 100%)");
             // Convert color to rgba if needed to apply opacity
             const getBackgroundWithOpacity = () => {
                 // If backgroundOpacity is 0, return transparent
@@ -175,19 +188,18 @@ const GlassSurface = ({ children, width, height, borderRadius = 20, borderWidth
                 background: getBackgroundWithOpacity(),
                 backdropFilter: `url(#${filterId}) ${frostedBlur} saturate(${saturation})`,
                 WebkitBackdropFilter: `url(#${filterId}) ${frostedBlur} saturate(${saturation})`,
+                ...(!resolvedDark && { border: "1px solid rgba(0, 0, 0, 0.06)" }),
                 ...(hasCustomShadow
                     ? {}
                     : {
-                        boxShadow: isDarkMode
+                        boxShadow: resolvedDark
                             ? `0 0 2px 1px color-mix(in oklch, white, transparent 65%) inset,
                0 0 10px 4px color-mix(in oklch, white, transparent 85%) inset,
                0px 4px 16px rgba(17, 17, 26, 0.05),
                0px 8px 24px rgba(17, 17, 26, 0.05),
                0px 16px 56px rgba(17, 17, 26, 0.05)`
-                            : `0 0 1px 1px color-mix(in oklch, white, transparent 40%) inset,
-               0 0 12px 1px color-mix(in oklch, white, transparent 70%) inset,
-               0 8px 24px -12px rgba(0, 0, 0, 0.08),
-               0 4px 12px -4px rgba(0, 0, 0, 0.03)`,
+                            : `0 8px 24px -12px rgba(0, 0, 0, 0.08),
+               0 4px 12px -4px rgba(0, 0, 0, 0.04)`,
                     }),
             };
         }
@@ -197,9 +209,9 @@ const GlassSurface = ({ children, width, height, borderRadius = 20, borderWidth
             // Increase blur significantly for frosted mode in fallback
             const effectiveBlur = frosted ? "20px" : baseBlur;
             const fallbackSaturate = "1.8";
-            const fallbackBrightness = isDarkMode ? "1.2" : "1.1";
+            const fallbackBrightness = resolvedDark ? "1.2" : "1.1";
             const filterStr = `blur(${effectiveBlur}) saturate(${fallbackSaturate}) brightness(${fallbackBrightness})`;
-            if (isDarkMode) {
+            if (resolvedDark) {
                 return {
                     ...baseStyles,
                     background: supportsBackdrop
@@ -234,11 +246,11 @@ const GlassSurface = ({ children, width, height, borderRadius = 20, borderWidth
                 };
             }
         }
-    }, [style, width, height, borderRadius, frosted, svgSupported, backgroundColor, isDarkMode, backgroundOpacity, filterId, saturation, hasCustomShadow, supportsBackdrop]);
-    const focusVisibleClasses = isDarkMode
+    }, [style, width, height, borderRadius, frosted, svgSupported, backgroundColor, resolvedDark, backgroundOpacity, filterId, saturation, hasCustomShadow, supportsBackdrop]);
+    const focusVisibleClasses = resolvedDark
         ? "focus-visible:outline-2 focus-visible:outline-[#0A84FF] focus-visible:outline-offset-2"
         : "focus-visible:outline-2 focus-visible:outline-[#007AFF] focus-visible:outline-offset-2";
-    return (jsxs("div", { ref: containerRef, className: cn("relative transition-opacity duration-[260ms] ease-out", focusVisibleClasses, className), style: containerStyles, children: [jsx("svg", { className: "w-full h-full pointer-events-none absolute inset-0 opacity-0 -z-10", xmlns: "http://www.w3.org/2000/svg", children: jsxs("defs", { children: [jsxs("filter", { id: filterId, colorInterpolationFilters: "sRGB", x: "0%", y: "0%", width: "100%", height: "100%", children: [jsx("feImage", { ref: feImageRef, x: "0", y: "0", width: "100%", height: "100%", preserveAspectRatio: "none", result: "map" }), jsx("feDisplacementMap", { ref: redChannelRef, in: "SourceGraphic", in2: "map", id: "redchannel", result: "dispRed" }), jsx("feColorMatrix", { in: "dispRed", type: "matrix", values: "1 0 0 0 0\n                      0 0 0 0 0\n                      0 0 0 0 0\n                      0 0 0 1 0", result: "red" }), jsx("feDisplacementMap", { ref: greenChannelRef, in: "SourceGraphic", in2: "map", id: "greenchannel", result: "dispGreen" }), jsx("feColorMatrix", { in: "dispGreen", type: "matrix", values: "0 0 0 0 0\n                      0 1 0 0 0\n                      0 0 0 0 0\n                      0 0 0 1 0", result: "green" }), jsx("feDisplacementMap", { ref: blueChannelRef, in: "SourceGraphic", in2: "map", id: "bluechannel", result: "dispBlue" }), jsx("feColorMatrix", { in: "dispBlue", type: "matrix", values: "0 0 0 0 0\n                      0 0 0 0 0\n                      0 0 1 0 0\n                      0 0 0 1 0", result: "blue" }), jsx("feBlend", { in: "red", in2: "green", mode: "screen", result: "rg" }), jsx("feBlend", { in: "rg", in2: "blue", mode: "screen", result: "output" }), jsx("feGaussianBlur", { ref: gaussianBlurRef, in: "output", stdDeviation: "0.7" })] }), jsx("filter", { id: noiseFilterId, x: "0%", y: "0%", width: "100%", height: "100%", children: jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.65", numOctaves: "3", stitchTiles: "stitch" }) })] }) }), jsx("div", { className: "relative z-10 rounded-[inherit]", children: children }), jsx("div", { className: "absolute inset-0 pointer-events-none rounded-[inherit] overflow-hidden z-20", children: frosted && (jsx("div", { className: "absolute inset-0 opacity-10 mix-blend-overlay", style: { filter: `url(#${noiseFilterId})` } })) })] }));
+    return (jsxs("div", { ref: containerRef, className: cn("relative transition-opacity duration-[260ms] ease-out", focusVisibleClasses, className), style: containerStyles, children: [jsx("svg", { className: "w-full h-full pointer-events-none absolute inset-0 opacity-0 -z-10", xmlns: "http://www.w3.org/2000/svg", children: jsxs("defs", { children: [jsxs("filter", { id: filterId, colorInterpolationFilters: "sRGB", x: "0%", y: "0%", width: "100%", height: "100%", children: [jsx("feImage", { ref: feImageRef, x: "0", y: "0", width: "100%", height: "100%", preserveAspectRatio: "none", result: "map" }), jsx("feDisplacementMap", { ref: redChannelRef, in: "SourceGraphic", in2: "map", id: "redchannel", result: "dispRed" }), jsx("feColorMatrix", { in: "dispRed", type: "matrix", values: "1 0 0 0 0\n                      0 0 0 0 0\n                      0 0 0 0 0\n                      0 0 0 1 0", result: "red" }), jsx("feDisplacementMap", { ref: greenChannelRef, in: "SourceGraphic", in2: "map", id: "greenchannel", result: "dispGreen" }), jsx("feColorMatrix", { in: "dispGreen", type: "matrix", values: "0 0 0 0 0\n                      0 1 0 0 0\n                      0 0 0 0 0\n                      0 0 0 1 0", result: "green" }), jsx("feDisplacementMap", { ref: blueChannelRef, in: "SourceGraphic", in2: "map", id: "bluechannel", result: "dispBlue" }), jsx("feColorMatrix", { in: "dispBlue", type: "matrix", values: "0 0 0 0 0\n                      0 0 0 0 0\n                      0 0 1 0 0\n                      0 0 0 1 0", result: "blue" }), jsx("feBlend", { in: "red", in2: "green", mode: "screen", result: "rg" }), jsx("feBlend", { in: "rg", in2: "blue", mode: "screen", result: "output" }), jsx("feGaussianBlur", { ref: gaussianBlurRef, in: "output", stdDeviation: "0.7" })] }), jsx("filter", { id: noiseFilterId, x: "0%", y: "0%", width: "100%", height: "100%", children: jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.65", numOctaves: "3", stitchTiles: "stitch" }) })] }) }), jsx("div", { className: "relative z-10 h-full rounded-[inherit]", children: children }), jsx("div", { className: "absolute inset-0 pointer-events-none rounded-[inherit] overflow-hidden z-20", children: frosted && (jsx("div", { className: "absolute inset-0 opacity-10 mix-blend-overlay", style: { filter: `url(#${noiseFilterId})` } })) })] }));
 };
 
 export { GlassSurface };

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

@@ -40,6 +40,14 @@ export interface GlassSurfaceProps {
     yChannel?: GlassChannel;
     /** Blend mode for the internal gradient layers */
     mixBlendMode?: GlassMixBlendMode;
+    /**
+     * Color scheme for the glass effect. Controls theme-aware defaults.
+     * - 'auto': detects system preference (default)
+     * - 'dark': force dark mode defaults
+     * - 'light': force light mode defaults
+     * @default 'auto'
+     */
+    colorScheme?: "auto" | "dark" | "light";
     /**
      * Enable frosted glass effect with noise texture
      * @default false

package/dist/components/forms/Mention/Mention.js

@@ -551,7 +551,7 @@ const Mention = React__default.forwardRef(({ triggers: triggersProp, suggestions
                 return (jsx("span", { "data-segment": "text", children: seg.text || (i === 0 ? "" : "") }, `text-${i}`));
             }
             return (jsx(Tag, { size: mentionTagSize, removable: false, avatar: seg.data.avatar
-                    ? { src: seg.data.avatar, alt: seg.data.label }
+                    ? { src: seg.data.avatar, name: seg.data.label }
                     : undefined, contentEditable: false, className: cn(theme.mentionTagStyle, i === selectedMentionIndex &&
                     "ring-2 ring-[var(--color-primary)] ring-offset-1", mentionTagClassName), [MENTION_ATTR]: seg.data.id,
                 "data-mention-label": seg.data.label,
@@ -579,7 +579,7 @@ const Mention = React__default.forwardRef(({ triggers: triggersProp, suggestions
         return (jsxs("div", { role: "option", "aria-selected": isHighlighted, "data-suggestion-index": index, className: cn(theme.suggestionStyle, isHighlighted && theme.suggestionHighlightedStyle), onMouseEnter: () => setHighlightedIndex(index), onMouseDown: (e) => {
                 e.preventDefault();
                 insertMention(suggestion);
-            }, children: [jsx(Avatar, { src: suggestion.avatar, alt: suggestion.label, size: "xs", className: "ring-0 border-0" }), jsxs("div", { className: "flex flex-col min-w-0", children: [jsx("span", { className: theme.suggestionLabelStyle, children: suggestion.label }), suggestion.description && (jsx("span", { className: theme.suggestionDescriptionStyle, children: suggestion.description }))] })] }, suggestion.id));
+            }, children: [jsx(Avatar, { src: suggestion.avatar, name: suggestion.label, size: "xs", className: "ring-0 border-0" }), jsxs("div", { className: "flex flex-col min-w-0", children: [jsx("span", { className: theme.suggestionLabelStyle, children: suggestion.label }), suggestion.description && (jsx("span", { className: theme.suggestionDescriptionStyle, children: suggestion.description }))] })] }, suggestion.id));
     };
     // -----------------------------------------------------------------------
     // Dropdown portal content

package/dist/index.js

@@ -84,6 +84,7 @@ export { DropdownSeparator } from './components/core/Dropdown/DropdownSeparator.
 export { DropdownTrigger } from './components/core/Dropdown/DropdownTrigger.js';
 export { Empty } from './components/core/Empty/Empty.js';
 export { Feed } from './components/data-display/Feed/Feed.js';
+export { FileTypeIcon } from './components/core/FileTypeIcon/FileTypeIcon.js';
 export { FileUpload } from './components/forms/FileUpload/FileUpload.js';
 export { FormLabel } from './components/forms/FormLabel/FormLabel.js';
 export { FunnelChart } from './components/charts/FunnelChart/FunnelChart.js';
@@ -105,7 +106,6 @@ export { Kbd } from './components/core/Kbd/Kbd.js';
 export { LINE_CHART_DEFAULTS } from './components/charts/LineChart/LineChart.types.js';
 export { LineChart } from './components/charts/LineChart/LineChart.js';
 export { Link } from './components/core/Link/Link.js';
-export { Loader } from './components/core/Loader/Loader.js';
 export { MagneticElement } from './components/effects/MagneticElement/MagneticElement.js';
 export { Masonry } from './components/core/Masonry/Masonry.js';
 export { Mention } from './components/forms/Mention/Mention.js';