reactqbit/dist/index.js

Quantum computing circuits with React JSX

// src/components/Qubit.tsx
import { jsxs } from "react/jsx-runtime";
var Qubit = ({
  id,
  value = "0",
  className = "",
  children
}) => {
  return /* @__PURE__ */ jsxs("div", { id, className: `qubit animate-quantum-pulse ${className}`, "data-value": value, children: [
    value,
    children
  ] });
};

// src/components/QuantumGate.tsx
import { jsx } from "react/jsx-runtime";
var QuantumGate = ({
  type,
  targets,
  controls = [],
  className = "",
  onClick
}) => {
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: `quantum-gate ${className}`,
      "data-gate-type": type,
      "data-targets": targets.join(","),
      "data-controls": controls.join(","),
      onClick,
      children: type
    }
  );
};

// src/components/QuantumCircuit.tsx
import { useState } from "react";
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
var QuantumCircuit = ({
  qubits,
  className = "",
  children
}) => {
  const [simulating, setSimulating] = useState(false);
  const [results, setResults] = useState(null);
  const runSimulation = () => {
    setSimulating(true);
    setTimeout(() => {
      const possibleStates = generatePossibleStates(qubits);
      const probabilities = generateProbabilities(possibleStates.length);
      setResults({
        states: possibleStates,
        probabilities
      });
      setSimulating(false);
    }, 1500);
  };
  const generatePossibleStates = (numQubits) => {
    const states = [];
    const totalStates = Math.pow(2, numQubits);
    for (let i = 0; i < totalStates; i++) {
      const binaryString = i.toString(2).padStart(numQubits, "0");
      const ketNotation = `|${binaryString}\u27E9`;
      states.push(ketNotation);
    }
    return states;
  };
  const generateProbabilities = (numStates) => {
    const rawValues = [];
    let sum = 0;
    for (let i = 0; i < numStates; i++) {
      const val = Math.random();
      rawValues.push(val);
      sum += val;
    }
    return rawValues.map((val) => Number((val / sum).toFixed(4)));
  };
  return /* @__PURE__ */ jsxs2("div", { className: `p-4 border-2 border-[#4C1D95] rounded-lg ${className}`, children: [
    /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-center mb-4", children: [
      /* @__PURE__ */ jsxs2("h3", { className: "text-lg font-bold text-[#6D28D9]", children: [
        "Quantum Circuit (",
        qubits,
        " qubits)"
      ] }),
      /* @__PURE__ */ jsx2(
        "button",
        {
          className: "px-4 py-2 bg-[#6D28D9] text-white rounded-md hover:bg-[#4C1D95] transition-colors",
          onClick: runSimulation,
          disabled: simulating,
          children: simulating ? "Simulating..." : "Simulate"
        }
      )
    ] }),
    /* @__PURE__ */ jsx2("div", { className: "space-y-4 mb-4", children }),
    results && /* @__PURE__ */ jsxs2("div", { className: "mt-6 p-4 bg-[#F3F4F6] rounded-lg border border-[#C4B5FD]", children: [
      /* @__PURE__ */ jsx2("h4", { className: "text-md font-semibold text-[#6D28D9] mb-2", children: "Quantum Superposition Result" }),
      /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-2 gap-2", children: results.states.map((state, index) => /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-center", children: [
        /* @__PURE__ */ jsx2("span", { className: "font-mono", children: state }),
        /* @__PURE__ */ jsxs2("div", { className: "flex items-center", children: [
          /* @__PURE__ */ jsx2(
            "div",
            {
              className: "h-4 bg-[#6D28D9]",
              style: { width: `${results.probabilities[index] * 100}px` }
            }
          ),
          /* @__PURE__ */ jsxs2("span", { className: "ml-2 text-sm", children: [
            (results.probabilities[index] * 100).toFixed(1),
            "%"
          ] })
        ] })
      ] }, index)) }),
      /* @__PURE__ */ jsx2("p", { className: "mt-4 text-xs text-gray-500 italic", children: "Probability amplitude for each possible basis state" })
    ] })
  ] });
};

// src/components/QuantumWire.tsx
import { jsx as jsx3 } from "react/jsx-runtime";
var QuantumWire = ({ qubitId, className = "" }) => {
  return /* @__PURE__ */ jsx3("div", { className: `quantum-wire w-full ${className}`, "data-qubit-id": qubitId });
};

// src/index.ts
var calculateQuantumState = (gates, initialState) => {
  const numQubits = initialState.length;
  const possibleStates = Math.pow(2, numQubits);
  const probabilities = [];
  let remainingProb = 1;
  for (let i = 0; i < possibleStates - 1; i++) {
    const variance = 0.5 + gates.length * 0.1;
    const prob = Math.random() * variance * remainingProb;
    probabilities.push(prob);
    remainingProb -= prob;
  }
  probabilities.push(remainingProb);
  return {
    states: Array(possibleStates).fill(0).map((_, i) => {
      const binaryString = i.toString(2).padStart(numQubits, "0");
      return `|${binaryString}\u27E9`;
    }),
    probabilities: probabilities.map((p) => Number(p.toFixed(4)))
  };
};
var applyGate = (gate, qubitValues) => {
  return qubitValues.map((v) => {
    if (gate === "X") return v === "0" ? "1" : v === "1" ? "0" : v;
    if (gate === "H") return v === "0" || v === "1" ? "+" : "0";
    if (gate === "Z") return v === "+" ? "-" : v === "-" ? "+" : v;
    return v;
  });
};
var calculateEntanglement = (state1, state2) => {
  if (state1 === "+" && state2 === "+" || state1 === "1" && state2 === "1") {
    return 1;
  } else if (state1 === "0" && state2 === "0" || state1 === "-" && state2 === "-") {
    return 0.8;
  } else {
    return 0.2;
  }
};
export {
  QuantumCircuit,
  QuantumGate,
  QuantumWire,
  Qubit,
  applyGate,
  calculateEntanglement,
  calculateQuantumState
};
//# sourceMappingURL=index.js.map