aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
927 lines (924 loc) • 32.1 kB
JavaScript
'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';
import { useRef, useState, useEffect, useCallback, useContext, createContext } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { cn } from '../../lib/utilsComprehensive.js';
// EEG signal processing using digital signal processing techniques
class EEGProcessor {
constructor(sampleRate = 256) {
this.metricHistory = new Map();
this.sampleRate = sampleRate;
this.bufferSize = sampleRate * 4; // 4 seconds of data
this.signalBuffer = [];
this.filteredBuffer = new Map();
this.bandpassFilters = new Map();
this.initializeFilters();
}
initializeFilters() {
// Bandpass filters for different brainwave frequencies
this.bandpassFilters.set("delta", new ButterworthFilter(0.5, 4, this.sampleRate, "bandpass"));
this.bandpassFilters.set("theta", new ButterworthFilter(4, 8, this.sampleRate, "bandpass"));
this.bandpassFilters.set("alpha", new ButterworthFilter(8, 13, this.sampleRate, "bandpass"));
this.bandpassFilters.set("beta", new ButterworthFilter(13, 30, this.sampleRate, "bandpass"));
this.bandpassFilters.set("gamma", new ButterworthFilter(30, 100, this.sampleRate, "bandpass"));
// Initialize filtered buffers
Object.keys(this.bandpassFilters).forEach(band => {
this.filteredBuffer.set(band, []);
});
}
processSignal(signal) {
this.signalBuffer.push(signal);
// Maintain buffer size
if (this.signalBuffer.length > this.bufferSize) {
this.signalBuffer.shift();
}
// Apply filters and extract brainwave patterns
const brainwaves = this.extractBrainwavePatterns(signal);
// Calculate neural metrics
const metrics = this.calculateNeuroMetrics(brainwaves, signal);
return metrics;
}
extractBrainwavePatterns(signal) {
const patterns = {
delta: 0,
theta: 0,
alpha: 0,
beta: 0,
gamma: 0
};
// Average across all channels for simplicity
const channels = Object.values(signal.channels);
const avgSignal = channels.reduce((sum, val) => sum + val, 0) / channels.length;
// Apply bandpass filters
this.bandpassFilters.forEach((filter, band) => {
const filtered = filter.process(avgSignal);
const buffer = this.filteredBuffer.get(band);
buffer.push(filtered);
// Maintain buffer size
if (buffer.length > 256) {
// 1 second of data
buffer.shift();
}
// Calculate power spectral density (simplified)
if (buffer.length >= 128) {
const power = this.calculatePowerSpectralDensity(buffer);
patterns[band] = power;
}
});
return patterns;
}
calculatePowerSpectralDensity(signal) {
// Simplified PSD calculation using RMS
const mean = signal.reduce((sum, val) => sum + val, 0) / signal.length;
const rms = Math.sqrt(signal.reduce((sum, val) => sum + Math.pow(val - mean, 2), 0) / signal.length);
return rms;
}
calculateNeuroMetrics(brainwaves, signal) {
// Advanced algorithms based on neuroscience research
// Attention (beta/theta ratio)
const attention = Math.min(1, Math.max(0, brainwaves.beta / (brainwaves.theta + 0.001)));
// Relaxation (alpha prominence)
const relaxation = Math.min(1, brainwaves.alpha / (brainwaves.beta + brainwaves.gamma + 0.001));
// Meditation (theta/beta ratio with alpha component)
const meditation = Math.min(1, (brainwaves.theta + brainwaves.alpha) / (brainwaves.beta + 0.001));
// Engagement (beta + gamma activity)
const engagement = Math.min(1, (brainwaves.beta + brainwaves.gamma) / 2);
// Cognitive load (gamma activity with beta support)
const cognitiveLoad = Math.min(1, brainwaves.gamma + brainwaves.beta * 0.5);
// Fatigue (delta prominence during wake)
const fatigue = Math.min(1, brainwaves.delta / (brainwaves.alpha + brainwaves.beta + 0.001));
// Stress (high beta with low alpha)
const stress = Math.min(1, Math.max(0, brainwaves.beta - brainwaves.alpha));
// Flow state (balanced alpha/theta with moderate beta)
const alphaTheta = (brainwaves.alpha + brainwaves.theta) / 2;
const flow = Math.min(1, alphaTheta * (1 - Math.abs(brainwaves.beta - 0.3)));
return {
attention: this.smoothMetric("attention", attention),
relaxation: this.smoothMetric("relaxation", relaxation),
meditation: this.smoothMetric("meditation", meditation),
engagement: this.smoothMetric("engagement", engagement),
cognitiveLoad: this.smoothMetric("cognitiveLoad", cognitiveLoad),
fatigue: this.smoothMetric("fatigue", fatigue),
stress: this.smoothMetric("stress", stress),
flow: this.smoothMetric("flow", flow)
};
}
smoothMetric(metricName, newValue) {
if (!this.metricHistory.has(metricName)) {
this.metricHistory.set(metricName, []);
}
const history = this.metricHistory.get(metricName);
history.push(newValue);
// Keep only recent history
if (history.length > 10) {
history.shift();
}
// Apply exponential moving average
const weights = history.map((_, i) => Math.pow(0.8, history.length - 1 - i));
const weightSum = weights.reduce((sum, w) => sum + w, 0);
const smoothed = history.reduce((sum, val, i) => sum + val * weights[i], 0) / weightSum;
return Math.min(1, Math.max(0, smoothed));
}
}
// Butterworth filter implementation for EEG signal filtering
class ButterworthFilter {
constructor(lowFreq, highFreq, sampleRate, type) {
this.a = [];
this.b = [];
this.x = [];
this.y = [];
this.x = [0, 0, 0];
this.y = [0, 0, 0];
// Calculate filter coefficients (simplified 2nd order)
const nyquist = sampleRate / 2;
const low = lowFreq / nyquist;
const high = highFreq / nyquist;
switch (type) {
case "lowpass":
this.calculateLowpassCoefficients(low);
break;
case "highpass":
this.calculateHighpassCoefficients(high);
break;
case "bandpass":
this.calculateBandpassCoefficients(low, high);
break;
}
}
calculateLowpassCoefficients(cutoff) {
const ita = 1.0 / Math.tan(Math.PI * cutoff);
const q = Math.SQRT2;
this.b = [1.0 / (1.0 + q * ita + ita * ita), 2.0 / (1.0 + q * ita + ita * ita), 1.0 / (1.0 + q * ita + ita * ita)];
this.a = [1.0, -(2.0 * (ita * ita - 1.0)) / (1.0 + q * ita + ita * ita), -(1.0 - q * ita + ita * ita) / (1.0 + q * ita + ita * ita)];
}
calculateHighpassCoefficients(cutoff) {
const ita = Math.tan(Math.PI * cutoff);
const q = Math.SQRT2;
this.b = [1.0 / (1.0 + q * ita + ita * ita), -2.0 / (1.0 + q * ita + ita * ita), 1.0 / (1.0 + q * ita + ita * ita)];
this.a = [1.0, -(2.0 * (ita * ita - 1.0)) / (1.0 + q * ita + ita * ita), -(1.0 - q * ita + ita * ita) / (1.0 + q * ita + ita * ita)];
}
calculateBandpassCoefficients(lowCutoff, highCutoff) {
// Simplified bandpass as cascade of highpass and lowpass
const center = Math.sqrt(lowCutoff * highCutoff);
const bandwidth = highCutoff - lowCutoff;
this.b = [bandwidth, 0, -bandwidth];
this.a = [1, -2 * Math.cos(2 * Math.PI * center), Math.pow(1 - bandwidth, 2)];
}
process(input) {
// Shift input buffer
this.x[2] = this.x[1];
this.x[1] = this.x[0];
this.x[0] = input;
// Calculate output
const output = this.b[0] * this.x[0] + this.b[1] * this.x[1] + this.b[2] * this.x[2] - this.a[1] * this.y[0] - this.a[2] * this.y[1];
// Shift output buffer
this.y[2] = this.y[1];
this.y[1] = this.y[0];
this.y[0] = output;
return output;
}
}
// Neural adaptation engine
class NeuroAdaptationEngine {
constructor() {
this.adaptations = [];
this.currentMetrics = this.getDefaultMetrics();
this.adaptationHistory = [];
this.learningRate = 0.1;
this.initializeBaseAdaptations();
}
getDefaultMetrics() {
return {
attention: 0.5,
relaxation: 0.5,
meditation: 0.5,
engagement: 0.5,
cognitiveLoad: 0.5,
fatigue: 0.5,
stress: 0.5,
flow: 0.5
};
}
initializeBaseAdaptations() {
// High cognitive load adaptation
this.adaptations.push({
id: "high-cognitive-load",
trigger: {
...this.getDefaultMetrics(),
cognitiveLoad: 0.8,
stress: 0.7
},
adaptation: {
uiComplexity: "minimal",
colorScheme: "high-contrast",
animationIntensity: "none",
interactionStyle: "passive",
contentDensity: "sparse",
cognitiveSupport: "high"
},
confidence: 0.9
});
// Flow state adaptation
this.adaptations.push({
id: "flow-state",
trigger: {
...this.getDefaultMetrics(),
flow: 0.8,
attention: 0.7,
engagement: 0.8
},
adaptation: {
uiComplexity: "minimal",
colorScheme: "normal",
animationIntensity: "subtle",
interactionStyle: "passive",
contentDensity: "normal",
cognitiveSupport: "low"
},
confidence: 0.85
});
// Low attention adaptation
this.adaptations.push({
id: "low-attention",
trigger: {
...this.getDefaultMetrics(),
attention: 0.3,
engagement: 0.4
},
adaptation: {
uiComplexity: "standard",
colorScheme: "high-contrast",
animationIntensity: "enhanced",
interactionStyle: "proactive",
contentDensity: "sparse",
cognitiveSupport: "high"
},
confidence: 0.8
});
// Fatigue adaptation
this.adaptations.push({
id: "fatigue",
trigger: {
...this.getDefaultMetrics(),
fatigue: 0.7,
cognitiveLoad: 0.6
},
adaptation: {
uiComplexity: "minimal",
colorScheme: "low-contrast",
animationIntensity: "none",
interactionStyle: "passive",
contentDensity: "sparse",
cognitiveSupport: "high"
},
confidence: 0.75
});
// Relaxed state adaptation
this.adaptations.push({
id: "relaxed",
trigger: {
...this.getDefaultMetrics(),
relaxation: 0.8,
meditation: 0.6
},
adaptation: {
uiComplexity: "detailed",
colorScheme: "normal",
animationIntensity: "subtle",
interactionStyle: "standard",
contentDensity: "normal",
cognitiveSupport: "medium"
},
confidence: 0.7
});
}
analyzeAndAdapt(metrics) {
this.currentMetrics = metrics;
// Find best matching adaptation
let bestAdaptation = null;
let bestScore = 0;
for (const adaptation of this.adaptations) {
const score = this.calculateAdaptationScore(metrics, adaptation.trigger);
if (score > bestScore && score > 0.6) {
// Threshold for activation
bestScore = score;
bestAdaptation = {
...adaptation,
confidence: score
};
}
}
if (bestAdaptation) {
bestAdaptation.appliedAt = Date.now();
// Record in history for learning
this.adaptationHistory.push({
metrics: {
...metrics
},
adaptation: bestAdaptation,
timestamp: Date.now()
});
// Limit history
if (this.adaptationHistory.length > 100) {
this.adaptationHistory.shift();
}
}
return bestAdaptation;
}
calculateAdaptationScore(current, trigger) {
const weights = {
attention: 1.2,
relaxation: 1.0,
meditation: 0.8,
engagement: 1.1,
cognitiveLoad: 1.3,
fatigue: 1.1,
stress: 1.2,
flow: 1.4
};
let totalScore = 0;
let totalWeight = 0;
Object.keys(trigger).forEach(key => {
const metricKey = key;
const currentValue = current[metricKey];
const triggerValue = trigger[metricKey];
const weight = weights[metricKey];
// Calculate similarity (inverse of difference)
const similarity = 1 - Math.abs(currentValue - triggerValue);
const score = similarity * weight;
totalScore += score;
totalWeight += weight;
});
return totalScore / totalWeight;
}
learnFromFeedback(adaptationId, effectiveness) {
const adaptation = this.adaptations.find(a => a.id === adaptationId);
if (adaptation) {
// Adjust confidence based on effectiveness
const adjustment = (effectiveness - 0.5) * this.learningRate;
adaptation.confidence = Math.max(0.1, Math.min(0.95, adaptation.confidence + adjustment));
}
}
getCurrentAdaptation() {
const recent = this.adaptationHistory[this.adaptationHistory.length - 1];
return recent ? recent.adaptation : null;
}
getAdaptationHistory() {
return [...this.adaptationHistory];
}
}
// Main NeuroSync system
class NeuroSyncSystem {
constructor() {
this.eegProcessor = new EEGProcessor();
this.adaptationEngine = new NeuroAdaptationEngine();
this.currentMetrics = this.getDefaultMetrics();
this.isConnected = false;
this.deviceInfo = null;
this.calibrationData = new Map();
}
getDefaultMetrics() {
return {
attention: 0.5,
relaxation: 0.5,
meditation: 0.5,
engagement: 0.5,
cognitiveLoad: 0.5,
fatigue: 0.5,
stress: 0.5,
flow: 0.5
};
}
async connectDevice(deviceType = "simulator") {
try {
if (deviceType === "simulator") {
// Simulator mode for development
this.isConnected = true;
this.deviceInfo = {
name: "NeuroSync Simulator",
type: "simulator",
channels: 10
};
this.startSimulation();
return true;
}
// Real device connection would go here
// For now, we'll use Web Bluetooth API simulation
if ("bluetooth" in navigator) {
// Attempt to connect to BCI device
console.log(`Attempting to connect to ${deviceType} device...`);
// This would be replaced with actual device-specific connection code
this.isConnected = true;
this.deviceInfo = {
name: `${deviceType} Headset`,
type: deviceType,
channels: deviceType === "emotiv" ? 14 : deviceType === "muse" ? 4 : 1
};
return true;
}
throw new Error("Web Bluetooth not supported");
} catch (error) {
console.error("Failed to connect to EEG device:", error);
return false;
}
}
startSimulation() {
// Simulate realistic EEG data for development
const simulateEEG = () => {
if (!this.isConnected) return;
const baseNoise = () => (Math.random() - 0.5) * 0.1;
const time = Date.now() / 1000;
// Simulate different brainwave patterns
const alpha = Math.sin(time * 10) * 0.3 + baseNoise(); // 10 Hz alpha
const beta = Math.sin(time * 20) * 0.2 + baseNoise(); // 20 Hz beta
const theta = Math.sin(time * 6) * 0.4 + baseNoise(); // 6 Hz theta
const signal = {
timestamp: Date.now(),
channels: {
fp1: alpha + beta * 0.5 + baseNoise(),
fp2: alpha + beta * 0.5 + baseNoise(),
f3: beta + theta * 0.3 + baseNoise(),
f4: beta + theta * 0.3 + baseNoise(),
c3: alpha + baseNoise(),
c4: alpha + baseNoise(),
p3: theta + alpha * 0.2 + baseNoise(),
p4: theta + alpha * 0.2 + baseNoise(),
o1: alpha * 0.8 + baseNoise(),
o2: alpha * 0.8 + baseNoise()
},
quality: 0.8 + Math.random() * 0.2
};
this.processSignal(signal);
};
// Run simulation at ~256 Hz (realistic EEG sampling rate)
setInterval(simulateEEG, 1000 / 256);
}
processSignal(signal) {
if (!this.isConnected) return this.currentMetrics;
// Process the signal through the EEG processor
const metrics = this.eegProcessor.processSignal(signal);
this.currentMetrics = metrics;
// Generate adaptation recommendations
this.adaptationEngine.analyzeAndAdapt(metrics);
return metrics;
}
getCurrentMetrics() {
return {
...this.currentMetrics
};
}
getCurrentAdaptation() {
return this.adaptationEngine.getCurrentAdaptation();
}
calibrateBaseline(duration = 30000) {
return new Promise(resolve => {
const startTime = Date.now();
const calibrationMetrics = [];
const collectBaseline = () => {
if (Date.now() - startTime >= duration) {
// Calculate baseline averages
const avgMetrics = this.calculateAverageMetrics(calibrationMetrics);
Object.entries(avgMetrics).forEach(([key, value]) => {
this.calibrationData.set(`baseline_${key}`, value);
});
resolve();
return;
}
calibrationMetrics.push({
...this.currentMetrics
});
setTimeout(collectBaseline, 100);
};
collectBaseline();
});
}
calculateAverageMetrics(metrics) {
const keys = Object.keys(metrics[0]);
const averages = {};
keys.forEach(key => {
const sum = metrics.reduce((total, metric) => total + metric[key], 0);
averages[key] = sum / metrics.length;
});
return averages;
}
getDeviceInfo() {
return this.deviceInfo;
}
isDeviceConnected() {
return this.isConnected;
}
disconnect() {
this.isConnected = false;
this.deviceInfo = null;
}
provideFeedback(adaptationId, effectiveness) {
this.adaptationEngine.learnFromFeedback(adaptationId, effectiveness);
}
}
// React Context for NeuroSync
const NeuroSyncContext = /*#__PURE__*/createContext({
system: null,
metrics: {},
adaptation: null,
isConnected: false,
deviceInfo: null,
connectDevice: async () => false,
calibrateBaseline: async () => {},
provideFeedback: () => {}
});
// Provider component
function GlassNeuroSyncProvider({
children,
onMetricsUpdate,
onAdaptationChange,
autoConnect = false
}) {
useReducedMotion();
const systemRef = useRef();
const [metrics, setMetrics] = useState({});
const [adaptation, setAdaptation] = useState(null);
const [isConnected, setIsConnected] = useState(false);
const [deviceInfo, setDeviceInfo] = useState(null);
// Initialize system
useEffect(() => {
systemRef.current = new NeuroSyncSystem();
if (autoConnect) {
systemRef.current.connectDevice("simulator").then(connected => {
setIsConnected(connected);
if (connected) {
setDeviceInfo(systemRef.current.getDeviceInfo());
}
});
}
// Update metrics periodically
const updateInterval = setInterval(() => {
if (systemRef.current && systemRef.current.isDeviceConnected()) {
const currentMetrics = systemRef.current.getCurrentMetrics();
const currentAdaptation = systemRef.current.getCurrentAdaptation();
setMetrics(currentMetrics);
setAdaptation(currentAdaptation);
onMetricsUpdate?.(currentMetrics);
onAdaptationChange?.(currentAdaptation);
}
}, 100); // 10Hz update rate
return () => clearInterval(updateInterval);
}, [autoConnect, onMetricsUpdate, onAdaptationChange]);
const connectDevice = useCallback(async (type = "simulator") => {
if (!systemRef.current) return false;
const connected = await systemRef.current.connectDevice(type);
setIsConnected(connected);
if (connected) {
setDeviceInfo(systemRef.current.getDeviceInfo());
}
return connected;
}, []);
const calibrateBaseline = useCallback(async () => {
if (systemRef.current) {
await systemRef.current.calibrateBaseline();
}
}, []);
const provideFeedback = useCallback((adaptationId, effectiveness) => {
systemRef.current?.provideFeedback(adaptationId, effectiveness);
}, []);
const value = {
system: systemRef.current || null,
metrics,
adaptation,
isConnected,
deviceInfo,
connectDevice,
calibrateBaseline,
provideFeedback
};
return jsx(NeuroSyncContext.Provider, {
value: value,
children: children
});
}
// Hook to use NeuroSync
function useNeuroSync() {
const context = useContext(NeuroSyncContext);
if (!context) {
throw new Error("useNeuroSync must be used within GlassNeuroSyncProvider");
}
return context;
}
// Neural metrics dashboard
function GlassNeuroMetricsDashboard({
className,
showBrainwaves = true
}) {
const prefersReducedMotion = useReducedMotion();
const {
metrics,
adaptation,
isConnected,
deviceInfo
} = useNeuroSync();
const [showDashboard, setShowDashboard] = useState(false);
const metricsArray = Object.entries(metrics).map(([name, value]) => ({
name: name.charAt(0).toUpperCase() + name.slice(1),
value: value || 0,
color: {
attention: "var(--glass-color-primary)",
relaxation: "var(--glass-color-success)",
meditation: "#8b5cf6",
engagement: "var(--glass-color-warning)",
cognitiveLoad: "var(--glass-color-danger)",
fatigue: "var(--glass-gray-500)",
stress: "var(--glass-color-danger-dark)",
flow: "#06b6d4"
}[name] || "var(--glass-gray-500)"
}));
return jsxs("div", {
className: cn("glass-fixed glass-bottom-4 glass-left-4 glass-z-50", className),
children: [jsxs(motion.button, {
className: cn("w-14 h-14 glass-radius-full glass-surface-primary glass-elev-4", "flex items-center justify-center glass-text-primary", "transition-all duration-300 hover:scale-105", isConnected ? "animate-pulse" : ""),
onClick: () => setShowDashboard(!showDashboard),
whileHover: {
scale: 1.05
},
whileTap: {
scale: 0.95
},
children: ["\uD83E\uDDE0", jsx("div", {
className: cn("glass-absolute glass--top-1 glass-right-1 glass-w-4 glass-h-4 glass-radius-full", isConnected ? "glass-surface-success" : "glass-surface-danger"),
style: {
opacity: 0.8
}
})]
}), jsx(AnimatePresence, {
children: showDashboard && jsxs(motion.div, {
className: cn("absolute bottom-16 left-0 w-96 max-h-[80vh] overflow-y-auto", "glass-surface-primary glass-elev-5 glass-radius-lg glass-p-6 glass-gap-4"),
initial: {
opacity: 0,
y: 10,
scale: 0.95
},
animate: prefersReducedMotion ? {} : {
opacity: 1,
y: 0,
scale: 1
},
exit: {
opacity: 0,
y: 10,
scale: 0.95
},
children: [jsxs("div", {
className: "glass-flex glass-items-center glass-justify-between",
children: [jsx("h3", {
className: 'glass-text-lg font-semibold text-primary',
children: "NeuroSync Dashboard"
}), jsx("button", {
onClick: () => setShowDashboard(false),
className: 'glass-text-sm glass-text-secondary hover:text-primary glass-focus glass-touch-target glass-contrast-guard',
children: "\u2715"
})]
}), jsxs("div", {
className: "glass-gap-2",
children: [jsx("h4", {
className: 'glass-text-sm font-medium glass-text-secondary uppercase tracking-wide',
children: "Device Status"
}), jsxs("div", {
className: "glass-p-3 glass-surface-secondary glass-radius-md",
children: [jsxs("div", {
className: "glass-flex glass-items-center glass-justify-between",
children: [jsx("span", {
className: 'glass-text-sm text-primary',
children: deviceInfo?.name || "No Device"
}), jsxs("div", {
className: "glass-flex glass-items-center glass-gap-2",
children: [jsx("div", {
className: cn("glass-w-2 glass-h-2 glass-radius-full", isConnected ? "glass-surface-success" : "glass-surface-danger")
}), jsx("span", {
className: "glass-text-xs glass-text-secondary",
children: isConnected ? "Connected" : "Disconnected"
})]
})]
}), deviceInfo && jsxs("div", {
className: "glass-mt-1 glass-text-xs glass-text-tertiary",
children: [deviceInfo.channels, " channels \u2022 ", deviceInfo.type]
})]
})]
}), jsxs("div", {
className: "glass-gap-2",
children: [jsx("h4", {
className: 'glass-text-sm font-medium glass-text-secondary uppercase tracking-wide',
children: "Neural Metrics"
}), jsx("div", {
className: "glass-grid glass-grid-cols-2 glass-gap-2",
children: metricsArray.map(metric => jsxs("div", {
className: "glass-p-3 glass-surface-secondary glass-radius-md",
children: [jsx("div", {
className: 'glass-text-xs font-medium text-primary',
children: metric.name
}), jsxs("div", {
className: "glass-mt-2 glass-flex glass-items-center glass-gap-2",
children: [jsx("div", {
className: 'glass-flex-1 glass-surface-subtle glass-radius-full h-2',
children: jsx(motion.div, {
className: 'h-2 glass-radius-full',
ref: el => {
if (el) el.style.backgroundColor = metric.color;
},
initial: {
width: 0
},
animate: {
width: `${metric.value * 100}%`
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: 0.3
}
})
}), jsxs("span", {
className: 'glass-text-xs glass-text-secondary w-8 text-right',
children: [(metric.value * 100).toFixed(0), "%"]
})]
})]
}, metric.name))
})]
}), adaptation && jsxs("div", {
className: "glass-gap-2",
children: [jsx("h4", {
className: 'glass-text-sm font-medium glass-text-secondary uppercase tracking-wide',
children: "Active Adaptation"
}), jsxs("div", {
className: "glass-p-3 glass-surface-secondary glass-radius-md",
children: [jsx("div", {
className: 'glass-text-sm text-primary font-medium mb-2',
children: adaptation.id.replace("-", " ").replace(/\b\w/g, l => l.toUpperCase())
}), jsxs("div", {
className: "glass-text-xs glass-text-tertiary glass-gap-1",
children: [jsxs("div", {
children: ["UI: ", adaptation.adaptation.uiComplexity]
}), jsxs("div", {
children: ["Colors: ", adaptation.adaptation.colorScheme]
}), jsxs("div", {
children: ["Animation: ", adaptation.adaptation.animationIntensity]
})]
}), jsx("div", {
className: "glass-mt-2 glass-flex glass-items-center glass-justify-between",
children: jsxs("span", {
className: "glass-text-xs glass-text-secondary",
children: ["Confidence: ", (adaptation.confidence * 100).toFixed(0), "%"]
})
})]
})]
}), !isConnected && jsx("div", {
className: 'text-center glass-text-sm glass-text-secondary glass-py-4',
children: "Connect an EEG device to start neural monitoring"
})]
})
})]
});
}
// Neural feedback component
function GlassNeuroFeedback({
type,
target = 0.8,
className
}) {
const prefersReducedMotion = useReducedMotion();
const {
metrics
} = useNeuroSync();
const currentValue = metrics[type] || 0;
const difference = currentValue - target;
const isOnTarget = Math.abs(difference) < 0.1;
return jsxs("div", {
className: cn("glass-flex glass-items-center glass-gap-3", className),
children: [jsx("div", {
className: 'glass-text-sm text-primary capitalize font-medium',
children: type
}), jsx("div", {
className: 'glass-flex-1 relative',
children: jsxs("div", {
className: 'glass-w-full h-4 glass-surface-subtle glass-radius-full glass-overflow-hidden',
children: [jsx(motion.div, {
className: "glass-h-full glass-radius-full",
ref: el => {
if (!el) return;
el.style.backgroundColor = isOnTarget ? "var(--glass-color-success)" : difference > 0 ? "var(--glass-color-primary)" : "var(--glass-color-warning)";
},
animate: {
width: `${currentValue * 100}%`
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: 0.3
}
}), jsx("div", {
className: 'absolute top-0 w-1 glass-h-full glass-surface-subtle opacity-60',
ref: el => {
if (el) el.style.left = `${target * 100}%`;
}
})]
})
}), jsxs("div", {
className: 'glass-text-sm glass-text-secondary w-12 text-right',
children: [(currentValue * 100).toFixed(0), "%"]
})]
});
}
// Hook for neuro-adaptive components
function useNeuroAdaptive() {
const {
metrics,
adaptation
} = useNeuroSync();
const getAdaptiveStyle = useCallback((baseStyle = {}) => {
if (!adaptation) return baseStyle;
const adaptiveStyle = {
...baseStyle
};
// Apply color scheme adaptations
switch (adaptation.adaptation.colorScheme) {
case "high-contrast":
adaptiveStyle.filter = "contrast(1.5)";
break;
case "low-contrast":
adaptiveStyle.filter = "contrast(0.7)";
break;
}
// Apply animation adaptations
switch (adaptation.adaptation.animationIntensity) {
case "none":
adaptiveStyle.animation = "none";
adaptiveStyle.transition = "none";
break;
case "subtle":
adaptiveStyle.animationDuration = "0.8s";
break;
case "enhanced":
adaptiveStyle.animationDuration = "0.3s";
break;
}
return adaptiveStyle;
}, [adaptation]);
const getAdaptiveClassName = useCallback((baseClassName = "") => {
if (!adaptation) return baseClassName;
const classes = [baseClassName];
// Add complexity classes
classes.push(`neuro-complexity-${adaptation.adaptation.uiComplexity}`);
classes.push(`neuro-density-${adaptation.adaptation.contentDensity}`);
classes.push(`neuro-support-${adaptation.adaptation.cognitiveSupport}`);
return classes.filter(Boolean).join(" ");
}, [adaptation]);
return {
metrics,
adaptation,
getAdaptiveStyle,
getAdaptiveClassName,
isHighCognitiveLoad: metrics.cognitiveLoad > 0.7,
isInFlowState: metrics.flow > 0.7,
needsAttentionSupport: metrics.attention < 0.4,
isFatigued: metrics.fatigue > 0.6
};
}
// Presets for different BCI devices and configurations
const neuroSyncPresets = {
muse: {
sampleRate: 256,
channels: ["TP9", "AF7", "AF8", "TP10"],
filterSettings: {
highpass: 1.0,
lowpass: 50.0,
notch: 60.0
}
},
emotiv: {
sampleRate: 256,
channels: ["AF3", "F7", "F3", "FC5", "T7", "P7", "O1", "O2", "P8", "T8", "FC6", "F4", "F8", "AF4"],
filterSettings: {
highpass: 0.5,
lowpass: 45.0,
notch: 60.0
}
},
neurosky: {
sampleRate: 512,
channels: ["FP1"],
filterSettings: {
highpass: 3.0,
lowpass: 100.0,
notch: 60.0
}
},
simulator: {
sampleRate: 256,
channels: ["FP1", "FP2", "F3", "F4", "C3", "C4", "P3", "P4", "O1", "O2"],
filterSettings: {
highpass: 0.5,
lowpass: 50.0,
notch: 60.0
}
}
};
export { GlassNeuroFeedback, GlassNeuroMetricsDashboard, GlassNeuroSyncProvider, neuroSyncPresets, useNeuroAdaptive, useNeuroSync };
//# sourceMappingURL=GlassNeuroSync.js.map