aura-glass/dist/esm/components/quantum/QuantumEntanglementVisualizer.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { cn } from '../../lib/utilsComprehensive.js';
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';

const DEFAULT_PAIRS = [{
  id: "alpha",
  nodes: ["Q1", "Q8"],
  fidelity: 0.93,
  phaseCorrelation: 0.84,
  state: "entangled",
  latency: 4.2
}, {
  id: "beta",
  nodes: ["Q3", "Q11"],
  fidelity: 0.68,
  phaseCorrelation: 0.49,
  state: "decohering",
  latency: 7.8
}, {
  id: "gamma",
  nodes: ["Q2", "Q5"],
  fidelity: 0.81,
  phaseCorrelation: 0.73,
  state: "entangled",
  latency: 5.4
}, {
  id: "delta",
  nodes: ["Q7", "Q12"],
  fidelity: 0.39,
  phaseCorrelation: 0.31,
  state: "collapsed",
  latency: 9.1
}];
const stateStyles = {
  entangled: "border-emerald-400/60 bg-emerald-500/10 text-emerald-200",
  decohering: "border-amber-400/60 bg-amber-400/10 text-amber-100",
  collapsed: "border-rose-400/60 bg-rose-500/10 text-rose-100"
};
function QuantumEntanglementVisualizer({
  className,
  pairs = DEFAULT_PAIRS,
  highlightThreshold = 0.7
}) {
  const normalizedPairs = pairs.length > 0 ? pairs : DEFAULT_PAIRS;
  return jsxs(OptimizedGlassCore, {
    role: "table",
    "aria-label": "Quantum entanglement visualizer",
    className: cn("glass-radius-3xl glass-border glass-border-soft glass-p-6 space-y-6", "bg-gradient-to-br from-slate-950/80 via-purple-950/40 to-slate-900/40", className),
    children: [jsxs("header", {
      children: [jsx("h2", {
        className: 'glass-text-xl font-semibold text-primary',
        children: "Quantum Entanglement Visualizer"
      }), jsx("p", {
        className: 'glass-text-sm text-primary/70',
        children: "Monitor fidelity, phase correlation, and decoherence risk for entangled qubit pairs."
      })]
    }), jsx("div", {
      className: 'glass-grid glass-gap-4 lg:grid-cols-2',
      children: normalizedPairs.map(pair => {
        const state = pair.state ?? (pair.fidelity >= highlightThreshold ? "entangled" : pair.fidelity >= 0.5 ? "decohering" : "collapsed");
        return jsxs("div", {
          className: cn("rounded-2xl border bg-white/5 p-4 text-primary/85 backdrop-blur transition", "border-white/10 hover:border-white/30", stateStyles[state]),
          children: [jsxs("div", {
            className: "glass-flex glass-items-start glass-justify-between",
            children: [jsxs("div", {
              children: [jsx("div", {
                className: 'glass-text-xs uppercase tracking-wide text-primary/60',
                children: "Pair"
              }), jsxs("div", {
                className: 'glass-text-lg font-semibold text-primary',
                children: [pair.nodes[0], " \u2194 ", pair.nodes[1]]
              })]
            }), jsx("span", {
              className: 'glass-radius-full glass-px-3 glass-py-1 glass-text-xs font-semibold uppercase tracking-wide',
              children: state
            })]
          }), jsxs("dl", {
            className: 'mt-4 glass-grid glass-gap-3 glass-text-xs text-primary/70',
            children: [jsxs("div", {
              className: "glass-flex glass-items-center glass-justify-between",
              children: [jsx("dt", {
                children: "Fidelity"
              }), jsxs("dd", {
                className: 'font-semibold text-primary/90',
                children: [(pair.fidelity * 100).toFixed(1), "%"]
              })]
            }), jsxs("div", {
              className: "glass-flex glass-items-center glass-justify-between",
              children: [jsx("dt", {
                children: "Phase correlation"
              }), jsxs("dd", {
                className: 'font-semibold text-primary/90',
                children: [(pair.phaseCorrelation * 100).toFixed(1), "%"]
              })]
            }), typeof pair.latency === "number" && jsxs("div", {
              className: "glass-flex glass-items-center glass-justify-between",
              children: [jsx("dt", {
                children: "Latency"
              }), jsxs("dd", {
                className: 'font-semibold text-primary/80',
                children: [pair.latency.toFixed(1), " \u03BCs"]
              })]
            })]
          }), jsx("div", {
            className: 'mt-4 h-2 glass-w-full overflow-hidden glass-radius-full glass-surface-subtle/10',
            children: jsx("div", {
              className: 'glass-h-full glass-radius-full bg-gradient-to-r from-sky-400/70 to-cyan-500/80',
              style: {
                width: `${pair.fidelity * 100}%`
              }
            })
          })]
        }, pair.id);
      })
    })]
  });
}

export { QuantumEntanglementVisualizer, QuantumEntanglementVisualizer as default };
//# sourceMappingURL=QuantumEntanglementVisualizer.js.map