aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
458 lines (455 loc) • 17.7 kB
JavaScript
'use client';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';
import { forwardRef, useState, useEffect, useMemo } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import '../../primitives/GlassCore.js';
import '../../primitives/glass/GlassAdvanced.js';
import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
import '../../primitives/glass/OptimizedGlassAdvanced.js';
import '../../primitives/MotionNative.js';
import '../../primitives/motion/MotionFramer.js';
import { useA11yId } from '../../utils/a11y.js';
import { useMotionPreference } from '../../hooks/useMotionPreference.js';
import { createGlassStyle } from '../../utils/createGlassStyle.js';
import { cn } from '../../lib/utilsComprehensive.js';
const quantumColors = {
superposition: '#4F46E5',
entangled: '#EC4899',
collapsed: 'var(--glass-color-success)',
decoherent: 'var(--glass-color-warning)',
interference: '#8B5CF6'
};
const wavePatterns = {
sine: (t, frequency) => Math.sin(t * frequency),
cosine: (t, frequency) => Math.cos(t * frequency),
complex: (t, frequency) => Math.sin(t * frequency) * Math.cos(t * frequency / 2),
damped: (t, frequency) => Math.sin(t * frequency) * Math.exp(-t * 0.1)
};
const GlassSuperpositionalMenu = /*#__PURE__*/forwardRef(({
menuStates,
isObserved = false,
measurementType = 'collapse',
coherenceDecay = 0.02,
entanglementStrength = 0.5,
visualizeWaveFunction = true,
showProbabilities = true,
showQuantumNoise = true,
maxSuperpositions = 8,
onStateCollapse,
onMeasurement,
onEntanglement,
className = '',
...props
}, ref) => {
const prefersReducedMotion = useReducedMotion();
const [currentStates, setCurrentStates] = useState(menuStates);
const [measurementTime, setMeasurementTime] = useState(null);
const [collapsedState, setCollapsedState] = useState(null);
const [quantumTime, setQuantumTime] = useState(0);
const [interactionHistory, setInteractionHistory] = useState([]);
useA11yId('glass-superposition-menu');
// Motion preference hook
const {
shouldAnimate
} = useMotionPreference();
// Helper function to respect motion preferences
const respectMotionPreference = config => shouldAnimate ? config : {
duration: 0
};
// Quantum time evolution
useEffect(() => {
const interval = setInterval(() => {
setQuantumTime(prev => prev + 0.1);
}, 16);
return () => clearInterval(interval);
}, []);
// Coherence decay simulation
useEffect(() => {
if (isObserved || collapsedState) return;
const interval = setInterval(() => {
setCurrentStates(prev => prev.map(state => ({
...state,
coherence: Math.max(0, state.coherence - coherenceDecay),
probability: state.coherence > 0.1 ? state.probability + (Math.random() - 0.5) * 0.02 : state.probability * 0.98
})).map(state => ({
...state,
probability: Math.max(0.01, Math.min(1, state.probability))
})));
}, 100);
return () => clearInterval(interval);
}, [isObserved, collapsedState, coherenceDecay]);
// Normalize probabilities to ensure they sum to 1
useEffect(() => {
const totalProb = currentStates.reduce((sum, state) => sum + state.probability, 0);
if (totalProb > 0) {
setCurrentStates(prev => prev.map(state => ({
...state,
probability: state.probability / totalProb
})));
}
}, [currentStates.length]);
const performMeasurement = targetStateId => {
setMeasurementTime(Date.now());
let selectedState;
if (targetStateId) {
selectedState = currentStates.find(s => s.id === targetStateId);
} else {
// Quantum measurement based on probability amplitudes
const random = Math.random();
let cumulativeProb = 0;
selectedState = currentStates.find(state => {
cumulativeProb += state.probability * state.probability; // |ψ|²
return random <= cumulativeProb;
}) || currentStates[0];
}
if (measurementType === 'collapse') {
setCollapsedState(selectedState.id);
setCurrentStates([{
...selectedState,
probability: 1,
coherence: 0
}]);
}
setInteractionHistory(prev => [...prev, {
type: 'measurement',
stateId: selectedState.id,
timestamp: Date.now(),
probability: selectedState.probability
}]);
onStateCollapse?.(selectedState.id);
onMeasurement?.(currentStates);
};
const createEntanglement = stateIds => {
setCurrentStates(prev => prev.map(state => {
if (stateIds.includes(state.id)) {
return {
...state,
entangled: stateIds.filter(id => id !== state.id),
coherence: Math.min(1, state.coherence + 0.2)
};
}
return state;
}));
onEntanglement?.(stateIds);
};
const getStateOpacity = state => {
if (collapsedState) {
return state.id === collapsedState ? 1 : 0.1;
}
return 0.3 + state.probability * 0.7;
};
const getStateScale = state => {
if (collapsedState && state.id !== collapsedState) return 0.5;
return 0.8 + state.probability * 0.4;
};
const getQuantumPhase = state => {
return quantumTime * (1 + state.energy * 0.5) + state.probability * Math.PI;
};
const WaveFunction = ({
state,
index
}) => {
const points = useMemo(() => {
const numPoints = 50;
const amplitude = state.probability * 20;
const frequency = 0.5 + state.energy * 0.3;
const phase = getQuantumPhase(state);
return Array.from({
length: numPoints
}, (_, i) => {
const t = i / numPoints * 4 * Math.PI;
const y = amplitude * wavePatterns.complex(t + phase, frequency);
return {
x: i / numPoints * 200,
y: y + 25
};
});
}, [state, quantumTime]);
return jsxs("svg", {
className: cn("glass-absolute glass-inset-0 glass-pointer-events-none"),
width: "200",
height: "50",
style: {
zIndex: -1
},
children: [jsx("path", {
d: `M ${points.map(p => `${p.x} ${p.y}`).join(' L ')}`,
stroke: state.entangled?.length ? quantumColors.entangled : quantumColors.superposition,
strokeWidth: "2",
fill: "none",
opacity: state.coherence * 0.6,
strokeDasharray: state.coherence < 0.5 ? "5,5" : "none"
}), jsx("path", {
d: `M ${points.map(p => `${p.x} ${25 + Math.abs(p.y - 25) * 0.3}`).join(' L ')}`,
fill: state.entangled?.length ? quantumColors.entangled : quantumColors.superposition,
opacity: state.probability * 0.2
})]
});
};
const QuantumNoise = () => jsx("div", {
className: cn("glass-absolute glass-inset-0 glass-pointer-events-none"),
children: [...Array(20)].map((_, i) => jsx(motion.div, {
className: cn("glass-absolute glass-w-1 glass-h-1 glass-surface-muted glass-radius-full"),
style: {
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`
},
animate: prefersReducedMotion ? {} : {
opacity: [0.1, 0.5, 0.1],
scale: [0.5, 1, 0.5]
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: 2 + Math.random() * 3,
repeat: Infinity,
delay: Math.random() * 2
}
}, i))
});
const EntanglementLines = () => jsx("svg", {
className: cn("glass-absolute glass-inset-0 glass-pointer-events-none"),
style: {
zIndex: 10
},
children: currentStates.map(state => state.entangled?.map(entangledId => {
const entangledState = currentStates.find(s => s.id === entangledId);
if (!entangledState) return null;
const startIndex = currentStates.indexOf(state);
const endIndex = currentStates.indexOf(entangledState);
const startY = startIndex * 80 + 40;
const endY = endIndex * 80 + 40;
return jsx(motion.line, {
x1: "50",
y1: startY,
x2: "150",
y2: endY,
stroke: quantumColors.entangled,
strokeWidth: "2",
opacity: entanglementStrength,
strokeDasharray: "10,5",
animate: prefersReducedMotion ? {} : {
strokeDashoffset: [0, 15]
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: 1,
repeat: Infinity,
ease: "linear"
}
}, `${state.id}-${entangledId}`);
})).filter(Boolean)
});
const QuantumState = ({
state,
index
}) => jsx(motion.div, {
className: cn("glass-relative"),
initial: {
opacity: 0,
scale: 0.5
},
animate: prefersReducedMotion ? {} : {
opacity: getStateOpacity(state),
scale: getStateScale(state),
y: isObserved ? 0 : Math.sin(getQuantumPhase(state)) * 5,
rotateY: visualizeWaveFunction ? Math.sin(getQuantumPhase(state)) * 10 : 0
},
transition: respectMotionPreference({
duration: 0.3,
type: collapsedState ? 'spring' : 'tween'
}),
whileHover: {
scale: getStateScale(state) * 1.05,
rotateY: 0
},
onClick: () => performMeasurement(state.id),
children: jsxs("div", {
className: cn("glass-relative glass-p-4 glass-radius-lg glass-cursor-pointer glass-border-2 glass-transition-all glass-duration-300", createGlassStyle({
variant: 'default',
opacity: state.coherence
}), collapsedState === state.id ? "glass-border-success glass-surface-success" : state.entangled?.length ? "glass-border-accent glass-surface-accent" : "glass-border-primary glass-surface-primary"),
style: {
// Use createGlassStyle() instead,
boxShadow: `0 0 ${state.probability * 20}px ${state.entangled?.length ? quantumColors.entangled : quantumColors.superposition}40`
},
children: [visualizeWaveFunction && !collapsedState && jsx(WaveFunction, {
state: state,
index: index
}), jsxs("div", {
className: cn("glass-relative glass-z-10"),
children: [jsxs("div", {
className: cn("glass-flex glass-items-center glass-space-x-3"),
children: [state.icon && jsx("span", {
className: cn("glass-text-2xl"),
children: state.icon
}), jsxs("div", {
className: cn("glass-flex-1"),
children: [jsx("h3", {
className: cn("glass-text-primary glass-font-medium"),
children: state.label
}), showProbabilities && jsxs("div", {
className: cn("glass-flex glass-items-center glass-space-x-2 glass-text-sm glass-text-secondary"),
children: [jsxs("span", {
children: ["P: ", (state.probability * 100).toFixed(1), "%"]
}), jsx("span", {
children: "\u2022"
}), jsxs("span", {
children: ["C: ", (state.coherence * 100).toFixed(0), "%"]
}), state.entangled?.length && jsxs(Fragment, {
children: [jsx("span", {
children: "\u2022"
}), jsxs("span", {
className: cn("glass-text-accent"),
children: ["\u269B ", state.entangled.length]
})]
})]
})]
})]
}), jsxs("div", {
className: cn("glass-mt-2 glass-flex glass-space-x-2"),
children: [jsx("div", {
className: cn("glass-h-1 glass-surface-primary glass-radius-full"),
style: {
width: `${state.probability * 100}%`
}
}), jsx("div", {
className: cn("glass-h-1 glass-surface-info glass-radius-full glass-opacity-60"),
style: {
width: `${state.coherence * 100}%`
}
})]
})]
}), !collapsedState && jsx(motion.div, {
className: cn("glass-absolute glass-inset-0 glass-radius-lg glass-pointer-events-none"),
animate: {
background: [`radial-gradient(circle at ${50 + Math.sin(quantumTime) * 20}% ${50 + Math.cos(quantumTime * 0.7) * 20}%,
${quantumColors.superposition}20 0%, transparent 50%)`, `radial-gradient(circle at ${50 + Math.sin(quantumTime + Math.PI) * 20}% ${50 + Math.cos(quantumTime * 0.7 + Math.PI) * 20}%,
${quantumColors.superposition}20 0%, transparent 50%)`]
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: 3,
repeat: Infinity,
ease: "linear"
}
})]
})
});
const superpositionStates = collapsedState ? currentStates.filter(s => s.id === collapsedState) : currentStates.slice(0, maxSuperpositions);
return jsxs(OptimizedGlassCore, {
ref: ref,
variant: "frosted",
className: cn("glass-relative glass-p-6 glass-space-y-4", className),
...props,
children: [showQuantumNoise && jsx(QuantumNoise, {}), visualizeWaveFunction && jsx(EntanglementLines, {}), jsxs("div", {
className: cn("glass-flex glass-items-center glass-justify-between"),
children: [jsxs("div", {
children: [jsx("h2", {
className: cn("glass-text-xl glass-font-semibold glass-text-primary"),
children: "Quantum Menu"
}), jsx("p", {
className: cn("glass-text-sm glass-text-secondary"),
children: collapsedState ? 'State Collapsed' : `${superpositionStates.length} superposition${superpositionStates.length !== 1 ? 's' : ''}`
})]
}), jsxs("div", {
className: cn("glass-flex glass-items-center glass-space-x-4"),
children: [!collapsedState && jsxs(Fragment, {
children: [jsx("button", {
onClick: () => performMeasurement(),
className: cn("glass-px-4 glass-py-2 glass-radius-lg glass-text-sm glass-font-medium glass-transition-colors glass-duration-200", createGlassStyle({
variant: 'default'
}), "glass-text-primary hover:glass-text-white glass-border glass-border-primary hover:glass-border-white"),
children: "\uD83D\uDD2C Measure"
}), jsx("button", {
onClick: () => {
const randomStates = currentStates.sort(() => Math.random() - 0.5).slice(0, 2).map(s => s.id);
createEntanglement(randomStates);
},
className: cn("glass-px-4 glass-py-2 glass-radius-lg glass-text-sm glass-font-medium glass-transition-colors glass-duration-200", createGlassStyle({
variant: 'default'
}), "glass-text-accent hover:glass-text-accent-light glass-border glass-border-accent hover:glass-border-accent-light"),
children: "\u269B Entangle"
})]
}), jsxs("div", {
className: cn("glass-text-sm glass-text-muted"),
children: ["t: ", quantumTime.toFixed(1)]
})]
})]
}), jsx("div", {
className: cn("glass-space-y-3"),
children: jsx(AnimatePresence, {
children: superpositionStates.map((state, index) => jsx(QuantumState, {
state: state,
index: index
}, state.id))
})
}), jsx("div", {
className: cn("glass-p-4 glass-radius-lg glass-border glass-border-subtle", createGlassStyle({
variant: 'default'
})),
children: jsxs("div", {
className: cn("glass-grid glass-grid-cols-2 glass-gap-4 glass-text-sm"),
children: [jsxs("div", {
children: [jsx("span", {
className: cn("glass-text-secondary"),
children: "Total Coherence:"
}), jsxs("span", {
className: cn("glass-ml-2 glass-text-primary"),
children: [(currentStates.reduce((sum, s) => sum + s.coherence, 0) / currentStates.length * 100).toFixed(1), "%"]
})]
}), jsxs("div", {
children: [jsx("span", {
className: cn("glass-text-secondary"),
children: "Entangled Pairs:"
}), jsx("span", {
className: cn("glass-ml-2 glass-text-primary"),
children: currentStates.filter(s => s.entangled?.length).length / 2
})]
}), jsxs("div", {
children: [jsx("span", {
className: cn("glass-text-secondary"),
children: "Measurements:"
}), jsx("span", {
className: cn("glass-ml-2 glass-text-primary"),
children: interactionHistory.filter(h => h.type === 'measurement').length
})]
}), jsxs("div", {
children: [jsx("span", {
className: cn("glass-text-secondary"),
children: "State:"
}), jsx("span", {
className: cn("glass-ml-2 glass-text-primary"),
children: collapsedState ? 'Collapsed' : 'Superposition'
})]
})]
})
}), collapsedState && jsx(motion.button, {
onClick: () => {
setCollapsedState(null);
setCurrentStates(menuStates);
setMeasurementTime(null);
},
className: cn("glass-w-full glass-p-3 glass-radius-lg glass-text-sm glass-font-medium glass-transition-colors glass-duration-200", createGlassStyle({
variant: 'default'
}), "glass-text-info hover:glass-text-info-light glass-border glass-border-info hover:glass-border-info-light"),
initial: {
opacity: 0,
y: 20
},
animate: {
opacity: 1,
y: 0
},
transition: respectMotionPreference({
delay: 0.5
}),
children: "\uD83D\uDD04 Reset Quantum State"
})]
});
});
export { GlassSuperpositionalMenu };
//# sourceMappingURL=GlassSuperpositionalMenu.js.map