@qamposer/react 0.1.0

package/dist/visualization.cjs

@@ -0,0 +1,3525 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var Plot = require('react-plotly.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Plot__default = /*#__PURE__*/_interopDefault(Plot);
+
+// src/context/QamposerProvider.tsx
+var QamposerContext = react.createContext(null);
+
+// src/utils/openqasm.ts
+var QASM_HEADER = 'OPENQASM 2.0;\ninclude "qelib1.inc";\n';
+var GATE_TO_QASM = {
+  H: "h",
+  X: "x",
+  Y: "y",
+  Z: "z",
+  CNOT: "cx",
+  RX: "rx",
+  RY: "ry",
+  RZ: "rz"
+};
+var QASM_TO_GATE = {
+  h: "H",
+  x: "X",
+  y: "Y",
+  z: "Z",
+  cx: "CNOT",
+  rx: "RX",
+  ry: "RY",
+  rz: "RZ"
+};
+function circuitToQasm(circuit) {
+  const { qubits, gates } = circuit;
+  const lines = [QASM_HEADER];
+  lines.push(`qreg q[${qubits}];`);
+  lines.push(`creg c[${qubits}];`);
+  if (gates.length === 0) {
+    return lines.join("\n") + "\n";
+  }
+  lines.push("");
+  const sortedGates = [...gates].sort((a, b) => a.position - b.position);
+  for (const gate of sortedGates) {
+    const instruction = gateToQasmInstruction(gate);
+    if (instruction) {
+      lines.push(instruction);
+    }
+  }
+  return lines.join("\n") + "\n";
+}
+function gateToQasmInstruction(gate) {
+  const qasmGate = GATE_TO_QASM[gate.type];
+  if (!qasmGate) return null;
+  if (gate.type === "CNOT") {
+    if (gate.control !== void 0 && gate.target !== void 0) {
+      return `cx q[${gate.control}], q[${gate.target}];`;
+    }
+    return null;
+  }
+  if (["RX", "RY", "RZ"].includes(gate.type)) {
+    const param = gate.parameter ?? 0;
+    return `${qasmGate}(${formatParameter(param)}) q[${gate.qubit}];`;
+  }
+  if (gate.qubit !== void 0) {
+    return `${qasmGate} q[${gate.qubit}];`;
+  }
+  return null;
+}
+function formatParameter(value) {
+  const pi = Math.PI;
+  const tolerance = 1e-4;
+  const fractions = [
+    { val: pi, str: "pi" },
+    { val: -pi, str: "-pi" },
+    { val: pi / 2, str: "pi/2" },
+    { val: -pi / 2, str: "-pi/2" },
+    { val: pi / 4, str: "pi/4" },
+    { val: -pi / 4, str: "-pi/4" },
+    { val: pi / 3, str: "pi/3" },
+    { val: -pi / 3, str: "-pi/3" },
+    { val: 2 * pi / 3, str: "2*pi/3" },
+    { val: -2 * pi / 3, str: "-2*pi/3" }
+  ];
+  for (const { val, str } of fractions) {
+    if (Math.abs(value - val) < tolerance) {
+      return str;
+    }
+  }
+  return value.toFixed(6).replace(/\.?0+$/, "");
+}
+function getGateQubits(gate) {
+  if (gate.type === "CNOT" && gate.control !== void 0 && gate.target !== void 0) {
+    const minQubit = Math.min(gate.control, gate.target);
+    const maxQubit = Math.max(gate.control, gate.target);
+    const qubits = [];
+    for (let q = minQubit; q <= maxQubit; q++) {
+      qubits.push(q);
+    }
+    return qubits;
+  }
+  return gate.qubit !== void 0 ? [gate.qubit] : [];
+}
+function compactGates(gatesToCompact) {
+  const qubitMinPositions = /* @__PURE__ */ new Map();
+  const sorted = [...gatesToCompact].sort((a, b) => a.position - b.position);
+  return sorted.map((gate) => {
+    const gateQubits = getGateQubits(gate);
+    let newPosition = 0;
+    gateQubits.forEach((q) => {
+      const minPos = qubitMinPositions.get(q) || 0;
+      newPosition = Math.max(newPosition, minPos);
+    });
+    gateQubits.forEach((q) => {
+      qubitMinPositions.set(q, newPosition + 1);
+    });
+    return { ...gate, position: newPosition };
+  });
+}
+function validateGateQubits(gate, qubits, lineNum) {
+  const gateQubits = getGateQubits(gate);
+  for (const qubitIndex of gateQubits) {
+    if (qubitIndex >= qubits) {
+      return `Line ${lineNum}: Qubit index q[${qubitIndex}] exceeds defined qubits (q[0]-q[${qubits - 1}])`;
+    }
+    if (qubitIndex < 0) {
+      return `Line ${lineNum}: Invalid qubit index q[${qubitIndex}]`;
+    }
+  }
+  return null;
+}
+function qasmToCircuit(qasm) {
+  const errors = [];
+  const gates = [];
+  let qubits = 2;
+  const lines = qasm.split("\n");
+  let position = 0;
+  for (const line of lines) {
+    const trimmed = line.trim();
+    const qregMatch = trimmed.match(/^qreg\s+q\[(\d+)\];?$/);
+    if (qregMatch) {
+      qubits = parseInt(qregMatch[1], 10);
+      break;
+    }
+  }
+  for (let lineNum = 0; lineNum < lines.length; lineNum++) {
+    const line = lines[lineNum].trim();
+    if (!line || line.startsWith("//") || line.startsWith("OPENQASM") || line.startsWith("include")) {
+      continue;
+    }
+    if (line.match(/^qreg\s+/) || line.match(/^creg\s+/)) {
+      continue;
+    }
+    const gate = parseGateInstruction(line, position, lineNum + 1, errors);
+    if (gate) {
+      const qubitError = validateGateQubits(gate, qubits, lineNum + 1);
+      if (qubitError) {
+        errors.push(qubitError);
+        continue;
+      }
+      gates.push(gate);
+      position++;
+    }
+  }
+  const compactedGates = compactGates(gates);
+  return {
+    success: errors.length === 0,
+    circuit: { qubits, gates: compactedGates },
+    errors
+  };
+}
+function parseGateInstruction(line, position, lineNum, errors) {
+  if (!line.endsWith(";")) {
+    errors.push(`Line ${lineNum}: Missing semicolon at end of statement`);
+    return null;
+  }
+  const instruction = line.replace(/;$/, "").trim();
+  const cxMatch = instruction.match(/^cx\s+q\[(\d+)\]\s*,\s*q\[(\d+)\]$/);
+  if (cxMatch) {
+    return {
+      id: generateGateId(),
+      type: "CNOT",
+      control: parseInt(cxMatch[1], 10),
+      target: parseInt(cxMatch[2], 10),
+      position
+    };
+  }
+  const rotMatch = instruction.match(/^(rx|ry|rz)\s*\(\s*([^)]+)\s*\)\s*q\[(\d+)\]$/);
+  if (rotMatch) {
+    const gateType = QASM_TO_GATE[rotMatch[1]];
+    const paramValue = parseParameter(rotMatch[2]);
+    if (gateType && paramValue !== null) {
+      return {
+        id: generateGateId(),
+        type: gateType,
+        qubit: parseInt(rotMatch[3], 10),
+        parameter: paramValue,
+        position
+      };
+    }
+  }
+  const singleMatch = instruction.match(/^(h|x|y|z)\s+q\[(\d+)\]$/);
+  if (singleMatch) {
+    const gateType = QASM_TO_GATE[singleMatch[1]];
+    if (gateType) {
+      return {
+        id: generateGateId(),
+        type: gateType,
+        qubit: parseInt(singleMatch[2], 10),
+        position
+      };
+    }
+  }
+  if (instruction && !instruction.match(/^(barrier|measure|reset)/)) {
+    errors.push(`Line ${lineNum}: Unknown instruction "${instruction}"`);
+  }
+  return null;
+}
+function parseParameter(str) {
+  const trimmed = str.trim();
+  const piPatterns = [
+    [/^-?pi$/, (m) => m[0].startsWith("-") ? -Math.PI : Math.PI],
+    [/^pi\/(\d+)$/, (m) => Math.PI / parseInt(m[1], 10)],
+    [/^-pi\/(\d+)$/, (m) => -Math.PI / parseInt(m[1], 10)],
+    [/^(-?\d+)\*?pi\/(\d+)$/, (m) => parseInt(m[1], 10) * Math.PI / parseInt(m[2], 10)]
+  ];
+  for (const [pattern, calc] of piPatterns) {
+    const match = trimmed.match(pattern);
+    if (match) {
+      return calc(match);
+    }
+  }
+  const num = parseFloat(trimmed);
+  return isNaN(num) ? null : num;
+}
+function generateGateId() {
+  return `gate-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+// src/adapters/noop.ts
+var noopAdapter = {
+  name: "Editor Only",
+  async simulate() {
+    throw new Error(
+      "Simulation is not available in editor-only mode. Provide a simulation adapter to enable this feature."
+    );
+  },
+  async isAvailable() {
+    return false;
+  }
+};
+var DEFAULT_CONFIG = {
+  maxQubits: 5,
+  maxGates: 500,
+  maxShots: 1e4
+};
+var DEFAULT_CIRCUIT = {
+  qubits: 2,
+  gates: []
+};
+function QamposerProvider({
+  circuit: controlledCircuit,
+  onCircuitChange,
+  defaultCircuit = DEFAULT_CIRCUIT,
+  adapter = noopAdapter,
+  onSimulationComplete,
+  config: userConfig,
+  children
+}) {
+  const config = react.useMemo(() => ({ ...DEFAULT_CONFIG, ...userConfig }), [userConfig]);
+  const isControlled = controlledCircuit !== void 0;
+  const [internalCircuit, setInternalCircuit] = react.useState(defaultCircuit);
+  const circuit = isControlled ? controlledCircuit : internalCircuit;
+  const updateCircuit = react.useCallback(
+    (newCircuit) => {
+      if (isControlled) {
+        onCircuitChange?.(newCircuit);
+      } else {
+        setInternalCircuit(newCircuit);
+        onCircuitChange?.(newCircuit);
+      }
+    },
+    [isControlled, onCircuitChange]
+  );
+  const [result, setResult] = react.useState(null);
+  const [status, setStatus] = react.useState("idle");
+  const [error, setError] = react.useState(null);
+  const [editingGate, setEditingGate] = react.useState(null);
+  const [qasmCode, setQasmCodeState] = react.useState(() => circuitToQasm(circuit));
+  const [parseError, setParseError] = react.useState(null);
+  const isUpdatingFromCode = react.useRef(false);
+  react.useEffect(() => {
+    if (isUpdatingFromCode.current) {
+      isUpdatingFromCode.current = false;
+      return;
+    }
+    setQasmCodeState(circuitToQasm(circuit));
+    setParseError(null);
+  }, [circuit]);
+  const setQasmCode = react.useCallback(
+    (code) => {
+      setQasmCodeState(code);
+      const parseResult = qasmToCircuit(code);
+      if (parseResult.errors.length > 0) {
+        setParseError(parseResult.errors[0]);
+      } else {
+        setParseError(null);
+      }
+      if (parseResult.circuit && (parseResult.success || parseResult.circuit.gates.length > 0)) {
+        isUpdatingFromCode.current = true;
+        updateCircuit(parseResult.circuit);
+      }
+    },
+    [updateCircuit]
+  );
+  const [canSimulate, setCanSimulate] = react.useState(false);
+  react.useEffect(() => {
+    adapter.isAvailable().then(setCanSimulate);
+  }, [adapter]);
+  const addGate = react.useCallback(
+    (gate) => {
+      if (circuit.gates.length >= config.maxGates) {
+        console.warn(`Maximum gate limit (${config.maxGates}) reached`);
+        return;
+      }
+      const newGate = {
+        ...gate,
+        id: generateGateId()
+      };
+      updateCircuit({
+        ...circuit,
+        gates: [...circuit.gates, newGate]
+      });
+    },
+    [circuit, config.maxGates, updateCircuit]
+  );
+  const removeGate = react.useCallback(
+    (id) => {
+      updateCircuit({
+        ...circuit,
+        gates: circuit.gates.filter((g) => g.id !== id)
+      });
+      if (editingGate?.id === id) {
+        setEditingGate(null);
+      }
+    },
+    [circuit, editingGate, updateCircuit]
+  );
+  const updateGate = react.useCallback(
+    (id, updates) => {
+      const targetGate = circuit.gates.find((g) => g.id === id);
+      if (!targetGate) return;
+      const updatedGate = { ...targetGate, ...updates };
+      const getGateQubits2 = (gate) => {
+        if (gate.type === "CNOT" && gate.control !== void 0 && gate.target !== void 0) {
+          const minQ = Math.min(gate.control, gate.target);
+          const maxQ = Math.max(gate.control, gate.target);
+          const qubits = [];
+          for (let q = minQ; q <= maxQ; q++) {
+            qubits.push(q);
+          }
+          return qubits;
+        }
+        return gate.qubit !== void 0 ? [gate.qubit] : [];
+      };
+      const isCnotUpdate = targetGate.type === "CNOT" && (updates.control !== void 0 || updates.target !== void 0);
+      let updatedGates;
+      if (isCnotUpdate) {
+        const newQubits = getGateQubits2(updatedGate);
+        const gatePosition = updatedGate.position;
+        updatedGates = circuit.gates.map((g) => {
+          if (g.id === id) {
+            return updatedGate;
+          }
+          if (g.position === gatePosition) {
+            const gateQubits = getGateQubits2(g);
+            const hasConflict = gateQubits.some((q) => newQubits.includes(q));
+            if (hasConflict) {
+              return { ...g, position: g.position + 1 };
+            }
+          }
+          return g;
+        });
+        updatedGates = compactGates(updatedGates);
+      } else {
+        updatedGates = circuit.gates.map((g) => g.id === id ? updatedGate : g);
+      }
+      updateCircuit({
+        ...circuit,
+        gates: updatedGates
+      });
+      if (editingGate?.id === id) {
+        setEditingGate({ ...editingGate, ...updates });
+      }
+    },
+    [circuit, editingGate, updateCircuit]
+  );
+  const updateGates = react.useCallback(
+    (gates) => {
+      updateCircuit({
+        ...circuit,
+        gates
+      });
+    },
+    [circuit, updateCircuit]
+  );
+  const setQubits = react.useCallback(
+    (count) => {
+      const newCount = Math.min(Math.max(1, count), config.maxQubits);
+      updateCircuit({
+        ...circuit,
+        qubits: newCount
+      });
+    },
+    [circuit, config.maxQubits, updateCircuit]
+  );
+  const addQubit = react.useCallback(() => {
+    if (circuit.qubits < config.maxQubits) {
+      updateCircuit({
+        ...circuit,
+        qubits: circuit.qubits + 1
+      });
+    }
+  }, [circuit, config.maxQubits, updateCircuit]);
+  const removeQubit = react.useCallback(
+    (qubitIndex) => {
+      if (circuit.qubits <= 1) {
+        return;
+      }
+      const removedIndex = qubitIndex ?? circuit.qubits - 1;
+      const updatedGates = circuit.gates.filter((gate) => {
+        if (gate.type === "CNOT") {
+          return gate.control !== removedIndex && gate.target !== removedIndex;
+        }
+        return gate.qubit !== removedIndex;
+      }).map((gate) => {
+        if (gate.type === "CNOT") {
+          return {
+            ...gate,
+            control: gate.control !== void 0 && gate.control > removedIndex ? gate.control - 1 : gate.control,
+            target: gate.target !== void 0 && gate.target > removedIndex ? gate.target - 1 : gate.target
+          };
+        }
+        return {
+          ...gate,
+          qubit: gate.qubit !== void 0 && gate.qubit > removedIndex ? gate.qubit - 1 : gate.qubit
+        };
+      });
+      const compactedGates = compactGates(updatedGates);
+      updateCircuit({
+        ...circuit,
+        qubits: circuit.qubits - 1,
+        gates: compactedGates
+      });
+      setResult(null);
+    },
+    [circuit, updateCircuit]
+  );
+  const clearCircuit = react.useCallback(() => {
+    updateCircuit({
+      qubits: circuit.qubits,
+      gates: []
+    });
+    setResult(null);
+    setEditingGate(null);
+  }, [circuit.qubits, updateCircuit]);
+  const importQasm = react.useCallback(
+    (code) => {
+      setQasmCodeState(code);
+      const parseResult = qasmToCircuit(code);
+      if (parseResult.errors.length > 0) {
+        setParseError(parseResult.errors[0]);
+      } else {
+        setParseError(null);
+      }
+      if (parseResult.circuit && (parseResult.success || parseResult.circuit.gates.length > 0)) {
+        isUpdatingFromCode.current = true;
+        updateCircuit(parseResult.circuit);
+      }
+      return parseResult;
+    },
+    [updateCircuit]
+  );
+  const exportQasm = react.useCallback(() => {
+    return circuitToQasm(circuit);
+  }, [circuit]);
+  const simulate = react.useCallback(
+    async (shots = 1024, profile) => {
+      if (!canSimulate) {
+        throw new Error("Simulation adapter is not available");
+      }
+      if (circuit.gates.length === 0) {
+        throw new Error("Circuit has no gates");
+      }
+      const validShots = Math.min(Math.max(1, shots), config.maxShots);
+      setStatus("simulating");
+      setError(null);
+      try {
+        const request = {
+          qubits: circuit.qubits,
+          gates: circuit.gates.map(({ id: _, ...gate }) => gate),
+          shots: validShots,
+          profile
+        };
+        const simulationResult = await adapter.simulate(request);
+        setResult(simulationResult);
+        setStatus("idle");
+        const event = {
+          result: simulationResult,
+          circuit: { ...circuit },
+          qasm: circuitToQasm(circuit)
+        };
+        onSimulationComplete?.(event);
+        return simulationResult;
+      } catch (err) {
+        const simulationError = err instanceof Error ? err : new Error(String(err));
+        setError(simulationError);
+        setStatus("error");
+        throw simulationError;
+      }
+    },
+    [adapter, canSimulate, circuit, config.maxShots, onSimulationComplete]
+  );
+  const contextValue = react.useMemo(
+    () => ({
+      // State
+      circuit,
+      result,
+      status,
+      error,
+      qasmCode,
+      parseError,
+      editingGate,
+      // Circuit Actions
+      addGate,
+      removeGate,
+      updateGate,
+      updateGates,
+      setQubits,
+      addQubit,
+      removeQubit,
+      clearCircuit,
+      // Gate Editing
+      setEditingGate,
+      // QASM
+      importQasm,
+      exportQasm,
+      setQasmCode,
+      // Simulation
+      simulate,
+      canSimulate,
+      // Adapter
+      adapter,
+      // Config
+      config
+    }),
+    [
+      circuit,
+      result,
+      status,
+      error,
+      qasmCode,
+      parseError,
+      editingGate,
+      addGate,
+      removeGate,
+      updateGate,
+      updateGates,
+      setQubits,
+      addQubit,
+      removeQubit,
+      clearCircuit,
+      importQasm,
+      exportQasm,
+      simulate,
+      canSimulate,
+      adapter,
+      config
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(QamposerContext.Provider, { value: contextValue, children });
+}
+var ThemeContext = react.createContext(null);
+var THEME_STORAGE_KEY = "qamposer-theme";
+var themes = {
+  dark: {
+    "--qamposer-bg-primary": "#161616",
+    "--qamposer-bg-secondary": "#262626",
+    "--qamposer-bg-tertiary": "#1a1a1a",
+    "--qamposer-text-primary": "#f4f4f4",
+    "--qamposer-text-secondary": "#a8a8a8",
+    "--qamposer-text-tertiary": "#6f6f6f",
+    "--qamposer-border": "#525252",
+    "--qamposer-border-strong": "#6f6f6f",
+    "--qamposer-accent": "#4285f4",
+    "--qamposer-accent-hover": "#3367d6",
+    "--qamposer-hover": "rgba(255, 255, 255, 0.1)",
+    "--qamposer-selected": "rgba(66, 133, 244, 0.2)",
+    "--qamposer-error": "#da1e28"
+  },
+  light: {
+    "--qamposer-bg-primary": "#ffffff",
+    "--qamposer-bg-secondary": "#f4f4f4",
+    "--qamposer-bg-tertiary": "#e8e8e8",
+    "--qamposer-text-primary": "#161616",
+    "--qamposer-text-secondary": "#525252",
+    "--qamposer-text-tertiary": "#8d8d8d",
+    "--qamposer-border": "#d1d1d1",
+    "--qamposer-border-strong": "#a8a8a8",
+    "--qamposer-accent": "#0f62fe",
+    "--qamposer-accent-hover": "#0043ce",
+    "--qamposer-hover": "rgba(0, 0, 0, 0.05)",
+    "--qamposer-selected": "rgba(15, 98, 254, 0.1)",
+    "--qamposer-error": "#da1e28"
+  }
+};
+function ThemeProvider({ children, defaultTheme = "dark" }) {
+  const [theme, setThemeState] = react.useState(() => {
+    if (typeof window !== "undefined") {
+      const stored = localStorage.getItem(THEME_STORAGE_KEY);
+      if (stored === "light" || stored === "dark") {
+        return stored;
+      }
+    }
+    return defaultTheme;
+  });
+  const applyTheme = react.useCallback((newTheme) => {
+    const themeVars = themes[newTheme];
+    Object.entries(themeVars).forEach(([key, value]) => {
+      document.documentElement.style.setProperty(key, value);
+    });
+  }, []);
+  react.useEffect(() => {
+    applyTheme(theme);
+    localStorage.setItem(THEME_STORAGE_KEY, theme);
+  }, [theme, applyTheme]);
+  const toggleTheme = react.useCallback(() => {
+    setThemeState((prev) => prev === "dark" ? "light" : "dark");
+  }, []);
+  const setTheme = react.useCallback((newTheme) => {
+    setThemeState(newTheme);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, toggleTheme, setTheme }, children });
+}
+function useTheme() {
+  const context = react.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+function useQamposer() {
+  const context = react.useContext(QamposerContext);
+  if (context === null) {
+    throw new Error(
+      "useQamposer must be used within a QamposerProvider. Wrap your component tree with <QamposerProvider>."
+    );
+  }
+  return context;
+}
+
+// src/components/Operations/Operations.scss
+var css = `.operations {
+  width: 100%;
+  height: 100%;
+  background: var(--qamposer-bg-secondary, #262626);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.operations__header {
+  padding: 1rem;
+  border-bottom: 1px solid var(--qamposer-border, #525252);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.operations__header h3 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--qamposer-text-primary, #f4f4f4);
+}
+.operations__close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  color: var(--qamposer-text-secondary, #a8a8a8);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.operations__close-btn:hover {
+  background: var(--qamposer-hover, rgba(255, 255, 255, 0.1));
+  color: var(--qamposer-text-primary, #f4f4f4);
+}
+.operations__sections {
+  flex: 1;
+  overflow-y: auto;
+}
+.operations__section {
+  border-bottom: 1px solid var(--qamposer-border, #525252);
+}
+.operations__section-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border: none;
+  background: transparent;
+  color: var(--qamposer-text-primary, #f4f4f4);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s;
+  text-align: left;
+}
+.operations__section-header:hover {
+  background: var(--qamposer-hover, rgba(255, 255, 255, 0.1));
+}
+.operations__grid {
+  display: grid;
+  grid-template-columns: repeat(3, 32px);
+  gap: 0.5rem;
+  padding: 0.75rem 1rem 1rem;
+  justify-content: start;
+}
+.operations__gate {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  cursor: grab;
+  transition: all 0.2s;
+  user-select: none;
+}
+.operations__gate:hover {
+  transform: scale(1.05);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+.operations__gate:active {
+  cursor: grabbing;
+  transform: scale(0.95);
+}
+.operations__gate--cnot {
+  background: transparent;
+  padding: 0;
+}
+.operations__gate--cnot svg {
+  display: block;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.operations__gate--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.operations__gate--disabled:hover {
+  transform: none;
+  box-shadow: none;
+}
+.operations__gate--disabled:active {
+  cursor: not-allowed;
+  transform: none;
+}
+.operations__gate-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  color: white;
+}
+.operations--editor .operations__header h3 {
+  font-size: 1.125rem;
+}
+.operations__content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+}
+.operations__field label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--qamposer-text-primary, #f4f4f4);
+}
+.operations__input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--qamposer-border, #525252);
+  border-radius: 4px;
+  background: var(--qamposer-bg-primary, #161616);
+  color: var(--qamposer-text-primary, #f4f4f4);
+  font-size: 0.875rem;
+  font-family: "IBM Plex Mono", "Menlo", "Monaco", monospace;
+  outline: none;
+  transition: border-color 0.15s;
+}
+.operations__input:focus {
+  border-color: var(--qamposer-accent, #4285f4);
+}
+.operations__input::placeholder {
+  color: var(--qamposer-text-secondary, #a8a8a8);
+}
+.operations__helper {
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--qamposer-text-secondary, #a8a8a8);
+  line-height: 1.4;
+}
+.operations__field + .operations__field {
+  margin-top: 1rem;
+}
+.operations__select {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--qamposer-border, #525252);
+  border-radius: 4px;
+  background: var(--qamposer-bg-primary, #161616);
+  color: var(--qamposer-text-primary, #f4f4f4);
+  font-size: 0.875rem;
+  font-family: "IBM Plex Mono", "Menlo", "Monaco", monospace;
+  outline: none;
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+.operations__select:focus {
+  border-color: var(--qamposer-accent, #4285f4);
+}
+.operations__apply-btn {
+  width: 100%;
+  margin-top: 1.5rem;
+  padding: 0.75rem 1rem;
+  border: none;
+  border-radius: 4px;
+  background: var(--qamposer-accent, #4285f4);
+  color: white;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.operations__apply-btn:hover:not(:disabled) {
+  background: var(--qamposer-accent-hover, #3367d6);
+}
+.operations__apply-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.operations__error {
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--qamposer-error, #da1e28);
+}`;
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
+var GATE_DEFINITIONS = [
+  { type: "H", label: "H", description: "Hadamard", category: "single", color: "#fa4d56" },
+  { type: "X", label: "X", description: "Pauli-X (NOT)", category: "single", color: "#002d9c" },
+  { type: "Y", label: "Y", description: "Pauli-Y", category: "single", color: "#9f1853" },
+  { type: "Z", label: "Z", description: "Pauli-Z", category: "single", color: "#33b1ff" },
+  { type: "RX", label: "RX", description: "Rotate X", category: "rotation", color: "#9f1853" },
+  { type: "RY", label: "RY", description: "Rotate Y", category: "rotation", color: "#9f1853" },
+  { type: "RZ", label: "RZ", description: "Rotate Z", category: "rotation", color: "#33b1ff" },
+  {
+    type: "CNOT",
+    label: "CNOT",
+    description: "Controlled-NOT",
+    category: "multi",
+    color: "#002d9c"
+  }
+];
+function Operations({ className = "" } = {}) {
+  const { editingGate, setEditingGate, updateGate } = useQamposer();
+  if (editingGate) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      GateEditor,
+      {
+        gate: editingGate,
+        onUpdate: updateGate,
+        onClose: () => setEditingGate(null),
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(GateLibrary, { className });
+}
+function GateLibrary({ className = "" }) {
+  const { circuit } = useQamposer();
+  const canUseCnot = circuit.qubits >= 2;
+  const [expandedSections, setExpandedSections] = react.useState({
+    single: true,
+    multi: false
+  });
+  const handleDragStart = (event, gateType) => {
+    if (gateType === "CNOT" && !canUseCnot) {
+      event.preventDefault();
+      return;
+    }
+    event.dataTransfer.setData("gateType", gateType);
+    event.dataTransfer.setData(`application/x-gate-${gateType.toLowerCase()}`, "");
+    event.dataTransfer.effectAllowed = "copy";
+  };
+  const toggleSection = (section) => {
+    setExpandedSections((prev) => ({
+      ...prev,
+      [section]: !prev[section]
+    }));
+  };
+  const renderGate = (gate) => {
+    if (gate.type === "CNOT") {
+      const isDisabled = !canUseCnot;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: `operations__gate operations__gate--cnot ${isDisabled ? "operations__gate--disabled" : ""}`,
+          draggable: !isDisabled,
+          onDragStart: (e) => handleDragStart(e, gate.type),
+          title: isDisabled ? "CNOT requires at least 2 qubits" : gate.description,
+          children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "0", width: "32", height: "32", fill: "#002d9c", rx: "4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "16", cy: "8", r: "2", fill: "white" }),
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "16", cy: "20.667", r: "5.333", stroke: "white", fill: "none", strokeWidth: "1.25" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "line",
+              {
+                x1: "10.667",
+                x2: "21.333",
+                y1: "20.667",
+                y2: "20.667",
+                stroke: "white",
+                strokeWidth: "1.25"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", x2: "16", y1: "6", y2: "26", stroke: "white", strokeWidth: "1.25" })
+          ] })
+        },
+        gate.type
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "operations__gate",
+        draggable: true,
+        onDragStart: (e) => handleDragStart(e, gate.type),
+        style: { backgroundColor: gate.color },
+        title: gate.description,
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "operations__gate-label", children: gate.label })
+      },
+      gate.type
+    );
+  };
+  const singleQubitGates = GATE_DEFINITIONS.filter(
+    (g) => g.category === "single" || g.category === "rotation"
+  );
+  const multiQubitGates = GATE_DEFINITIONS.filter((g) => g.category === "multi");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `operations ${className}`.trim(), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "operations__header", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Operations" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "operations__sections", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "operations__section", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "operations__section-header", onClick: () => toggleSection("single"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { expanded: expandedSections.single }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Single-Qubit Gates" })
+        ] }),
+        expandedSections.single && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "operations__grid", children: singleQubitGates.map(renderGate) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "operations__section", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "operations__section-header", onClick: () => toggleSection("multi"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { expanded: expandedSections.multi }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Multi-Qubit Gates" })
+        ] }),
+        expandedSections.multi && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "operations__grid", children: multiQubitGates.map(renderGate) })
+      ] })
+    ] })
+  ] });
+}
+function GateEditor({ gate, onUpdate, onClose, className = "" }) {
+  const { circuit } = useQamposer();
+  const numQubits = circuit.qubits;
+  const [parameterValue, setParameterValue] = react.useState("");
+  const [controlQubit, setControlQubit] = react.useState(gate.control ?? 0);
+  const [targetQubit, setTargetQubit] = react.useState(gate.target ?? 1);
+  react.useEffect(() => {
+    if (gate.parameter !== void 0) {
+      const value = gate.parameter;
+      const piRatio = value / Math.PI;
+      if (Math.abs(piRatio - Math.round(piRatio)) < 1e-4) {
+        setParameterValue(piRatio === 0 ? "0" : piRatio === 1 ? "pi" : `${Math.round(piRatio)}*pi`);
+      } else if (Math.abs(piRatio * 2 - Math.round(piRatio * 2)) < 1e-4) {
+        const ratio = Math.round(piRatio * 2);
+        setParameterValue(ratio === 1 ? "pi/2" : `${ratio}*pi/2`);
+      } else {
+        setParameterValue(value.toFixed(4));
+      }
+    } else {
+      setParameterValue("0");
+    }
+  }, [gate.parameter]);
+  react.useEffect(() => {
+    if (gate.type === "CNOT") {
+      setControlQubit(gate.control ?? 0);
+      setTargetQubit(gate.target ?? 1);
+    }
+  }, [gate.type, gate.control, gate.target]);
+  const isRotationGate = ["RX", "RY", "RZ"].includes(gate.type);
+  const isCnotGate = gate.type === "CNOT";
+  if (!isRotationGate && !isCnotGate) {
+    return null;
+  }
+  const handleRotationSave = () => {
+    let radians = 0;
+    try {
+      const normalized = parameterValue.toLowerCase().replace(/\s/g, "");
+      if (normalized.includes("pi")) {
+        const piValue = Math.PI;
+        let expr = normalized.replace(/pi/g, String(piValue));
+        expr = expr.replace(/\*/g, "*").replace(/\//g, "/");
+        radians = Function(`"use strict"; return (${expr})`)();
+      } else {
+        radians = parseFloat(normalized);
+      }
+      if (!isNaN(radians)) {
+        onUpdate(gate.id, { parameter: radians });
+      }
+    } catch (error) {
+      console.error("Invalid parameter expression:", error);
+    }
+  };
+  const handleCnotSave = () => {
+    if (controlQubit !== targetQubit) {
+      onUpdate(gate.id, { control: controlQubit, target: targetQubit });
+    }
+  };
+  const qubitOptions = Array.from({ length: numQubits }, (_, i) => i);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `operations operations--editor ${className}`.trim(), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "operations__header", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("h3", { children: [
+        "Edit ",
+        gate.type
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { className: "operations__close-btn", onClick: onClose, title: "Close", children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "operations__content", children: [
+      isRotationGate && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "operations__field", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "theta-input", children: "theta (rotation)" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: "theta-input",
+            type: "text",
+            className: "operations__input",
+            value: parameterValue,
+            onChange: (e) => setParameterValue(e.target.value),
+            onBlur: handleRotationSave,
+            onKeyDown: (e) => {
+              if (e.key === "Enter") handleRotationSave();
+            },
+            placeholder: "e.g., pi/2, 1.5708, 2*pi"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "operations__helper", children: "Enter angle in radians or use pi expressions" })
+      ] }),
+      isCnotGate && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "operations__field", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "control-select", children: "Control qubit" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              id: "control-select",
+              className: "operations__select",
+              value: controlQubit,
+              onChange: (e) => {
+                const newControl = parseInt(e.target.value, 10);
+                setControlQubit(newControl);
+                if (newControl === targetQubit) {
+                  setTargetQubit(newControl === 0 ? 1 : 0);
+                }
+              },
+              children: qubitOptions.map((q) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: q, children: [
+                "q[",
+                q,
+                "]"
+              ] }, q))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "operations__field", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "target-select", children: "Target qubit" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              id: "target-select",
+              className: "operations__select",
+              value: targetQubit,
+              onChange: (e) => {
+                const newTarget = parseInt(e.target.value, 10);
+                setTargetQubit(newTarget);
+                if (newTarget === controlQubit) {
+                  setControlQubit(newTarget === 0 ? 1 : 0);
+                }
+              },
+              children: qubitOptions.map((q) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: q, children: [
+                "q[",
+                q,
+                "]"
+              ] }, q))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "operations__apply-btn",
+            onClick: handleCnotSave,
+            disabled: controlQubit === targetQubit,
+            children: "Apply"
+          }
+        ),
+        controlQubit === targetQubit && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "operations__error", children: "Control and target must be different qubits" })
+      ] })
+    ] })
+  ] });
+}
+function ChevronIcon({ expanded }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "currentColor",
+      style: {
+        transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
+        transition: "transform 0.2s"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
+        }
+      )
+    }
+  );
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
+    }
+  ) });
+}
+
+// src/components/CircuitEditor/CircuitEditor.scss
+var css2 = `.circuit-editor {
+  flex: 1;
+  background: var(--qamposer-bg-secondary, #262626);
+  overflow: auto;
+  position: relative;
+  height: 100%;
+}
+.circuit-editor__canvas {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-height: 100%;
+  padding: 2rem;
+  padding-right: 72px;
+}
+.circuit-editor__scroll-container {
+  flex: 1;
+  overflow-x: auto;
+  overflow-y: visible;
+  position: relative;
+}
+.circuit-editor__scroll-container::-webkit-scrollbar {
+  height: 8px;
+}
+.circuit-editor__scroll-container::-webkit-scrollbar-track {
+  background: var(--qamposer-bg-primary, #161616);
+  border-radius: 4px;
+}
+.circuit-editor__scroll-container::-webkit-scrollbar-thumb {
+  background: var(--qamposer-border-strong, #6f6f6f);
+  border-radius: 4px;
+}
+.circuit-editor__scroll-container::-webkit-scrollbar-thumb:hover {
+  background: var(--qamposer-text-secondary, #a8a8a8);
+}
+.circuit-editor__circuit-area {
+  position: relative;
+}
+.circuit-editor__lanes {
+  position: relative;
+}
+.circuit-editor__lane {
+  position: relative;
+  height: 80px;
+  display: flex;
+  align-items: center;
+}
+.circuit-editor__lane--classical {
+  border-top: 1px solid var(--qamposer-border, #525252);
+  margin-top: 1rem;
+}
+.circuit-editor__lane-label {
+  width: 60px;
+  font-family: "IBM Plex Mono", "Menlo", "Monaco", monospace;
+  font-size: 0.875rem;
+  color: var(--qamposer-text-secondary, #a8a8a8);
+  padding-right: 1rem;
+  text-align: right;
+  flex-shrink: 0;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.15s;
+}
+.circuit-editor__lane-label:hover {
+  background-color: var(--qamposer-hover, rgba(255, 255, 255, 0.1));
+}
+.circuit-editor__lane-label--selected {
+  background-color: var(--qamposer-selected, rgba(66, 133, 244, 0.2));
+  color: var(--qamposer-text-primary, #f4f4f4);
+}
+.circuit-editor__lane-line {
+  flex: 1;
+  height: 2px;
+  background: var(--qamposer-border, #525252);
+  position: relative;
+}
+.circuit-editor__lane-line--classical {
+  height: 4px;
+  background: var(--qamposer-border-strong, #6f6f6f);
+}
+.circuit-editor__drop-zone-continuous {
+  position: absolute;
+  left: 60px;
+  right: 0;
+  top: 0;
+  height: 100%;
+  pointer-events: all;
+  z-index: 1;
+}
+.circuit-editor__preview {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 3;
+}
+.circuit-editor__gates {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 2;
+}
+.circuit-editor__gate {
+  position: absolute;
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+  pointer-events: all;
+  transition: all 0.2s;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+.circuit-editor__gate:hover {
+  transform: translate(-50%, -50%) scale(1.1);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+}
+.circuit-editor__gate--selected {
+  outline: 2px solid var(--qamposer-accent, #4285f4);
+  outline-offset: 2px;
+}
+.circuit-editor__gate--rotation {
+  width: auto;
+  min-width: 32px;
+  padding: 0 8px;
+  white-space: nowrap;
+}
+.circuit-editor__gate--preview {
+  background: #8d8d8d !important;
+  opacity: 0.7;
+  cursor: default;
+  pointer-events: none;
+}
+.circuit-editor__gate--preview:hover {
+  transform: translate(-50%, -50%);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+.circuit-editor__gate--shifted-preview {
+  opacity: 0.5;
+  cursor: default;
+  pointer-events: none;
+}
+.circuit-editor__gate--shifted-preview:hover {
+  transform: translate(-50%, -50%);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+.circuit-editor__gate-label {
+  color: white;
+  font-weight: 600;
+  font-size: 0.875rem;
+  letter-spacing: 0.5px;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+}
+.circuit-editor__gate-param {
+  font-size: 0.5rem;
+  font-weight: 400;
+  opacity: 0.9;
+  font-family: "IBM Plex Mono", "Menlo", "Monaco", monospace;
+}
+.circuit-editor__cnot {
+  position: absolute;
+  transform: translateX(-50%);
+  cursor: pointer;
+  pointer-events: all;
+  width: 40px;
+}
+.circuit-editor__cnot--selected .circuit-editor__cnot-line {
+  stroke: var(--qamposer-accent, #4285f4);
+  stroke-width: 3;
+}
+.circuit-editor__cnot--preview {
+  cursor: default;
+  pointer-events: none;
+}
+.circuit-editor__cnot--preview .circuit-editor__cnot-line {
+  background: #8d8d8d;
+  opacity: 0.7;
+}
+.circuit-editor__cnot--preview .circuit-editor__cnot-control {
+  background: #8d8d8d;
+  opacity: 0.7;
+}
+.circuit-editor__cnot--preview .circuit-editor__cnot-target {
+  border-color: #8d8d8d;
+  background: rgba(255, 255, 255, 0.7);
+  opacity: 0.7;
+}
+.circuit-editor__cnot--preview .circuit-editor__cnot-target::before, .circuit-editor__cnot--preview .circuit-editor__cnot-target::after {
+  background: #8d8d8d;
+}
+.circuit-editor__cnot--shifted-preview {
+  opacity: 0.5;
+  cursor: default;
+  pointer-events: none;
+}
+.circuit-editor__cnot-line {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  width: 2px;
+  height: 100%;
+  background: #002d9c;
+  transform: translateX(-50%);
+}
+.circuit-editor__cnot-control {
+  position: absolute;
+  left: 50%;
+  width: 8px;
+  height: 8px;
+  background: #002d9c;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+.circuit-editor__cnot-target {
+  position: absolute;
+  left: 50%;
+  width: 26px;
+  height: 26px;
+  border: 2px solid #002d9c;
+  border-radius: 50%;
+  background: white;
+  transform: translate(-50%, -50%);
+}
+.circuit-editor__cnot-target::before, .circuit-editor__cnot-target::after {
+  content: "";
+  position: absolute;
+  background: #002d9c;
+}
+.circuit-editor__cnot-target::before {
+  left: 50%;
+  top: 20%;
+  width: 2px;
+  height: 60%;
+  transform: translateX(-50%);
+}
+.circuit-editor__cnot-target::after {
+  top: 50%;
+  left: 20%;
+  height: 2px;
+  width: 60%;
+  transform: translateY(-50%);
+}
+.circuit-editor__measurements {
+  position: absolute;
+  top: 2rem;
+  right: 2rem;
+  pointer-events: none;
+  z-index: 10;
+}
+.circuit-editor__measurement {
+  position: absolute;
+  right: 0;
+  transform: translateY(-50%);
+}
+.circuit-editor__measurement-icon {
+  width: 32px;
+  height: 32px;
+  border: 2px solid var(--qamposer-border-strong, #6f6f6f);
+  border-radius: 50%;
+  background: var(--qamposer-bg-secondary, #262626);
+  position: relative;
+}
+.circuit-editor__measurement-icon::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 10px solid var(--qamposer-text-primary, #f4f4f4);
+  transform: translate(-50%, -60%);
+}
+.circuit-editor__toolbar {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--qamposer-bg-primary, #161616);
+  border: 1px solid var(--qamposer-border, #525252);
+  border-radius: 4px;
+  padding: 4px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  pointer-events: auto;
+  transform: translate(-50%, calc(-100% - 12px));
+}
+.circuit-editor__toolbar--below {
+  transform: translate(-50%, 48px);
+}
+.circuit-editor__toolbar--qubit {
+  transform: translate(0, -50%);
+}
+.circuit-editor__toolbar-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  color: var(--qamposer-text-secondary, #a8a8a8);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.circuit-editor__toolbar-btn:hover:not(:disabled) {
+  background: var(--qamposer-hover, rgba(255, 255, 255, 0.1));
+  color: var(--qamposer-text-primary, #f4f4f4);
+}
+.circuit-editor__toolbar-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.circuit-editor__toolbar-btn--danger:hover:not(:disabled) {
+  background: rgba(218, 30, 40, 0.2);
+  color: #fa4d56;
+}`;
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css2));
+var GATE_COLORS = {
+  H: "#fa4d56",
+  X: "#002d9c",
+  Y: "#9f1853",
+  Z: "#33b1ff",
+  RX: "#9f1853",
+  RY: "#9f1853",
+  RZ: "#33b1ff",
+  CNOT: "#002d9c"
+};
+var QUBIT_HEIGHT = 80;
+var MAX_POSITIONS = 20;
+var LABEL_WIDTH = 60;
+var COLUMN_GAP = 20;
+var MIN_LEFT_MARGIN = 16;
+function CircuitEditor({ className = "" } = {}) {
+  const { circuit, updateGates, addQubit, removeQubit, setEditingGate, config } = useQamposer();
+  const { qubits, gates } = circuit;
+  const [dragOverQubit, setDragOverQubit] = react.useState(null);
+  const [dragOverPosition, setDragOverPosition] = react.useState(null);
+  const [selectedGateId, setSelectedGateId] = react.useState(null);
+  const [selectedQubitIndex, setSelectedQubitIndex] = react.useState(null);
+  const [draggingGateType, setDraggingGateType] = react.useState(null);
+  const [previewShiftedGates, setPreviewShiftedGates] = react.useState([]);
+  const canvasRef = react.useRef(null);
+  const columnWidths = react.useMemo(() => {
+    const widths = {};
+    for (let pos = 0; pos < MAX_POSITIONS; pos++) {
+      let maxWidth = 32;
+      gates.forEach((g) => {
+        if (g.position === pos) {
+          if (["RX", "RY", "RZ"].includes(g.type) && g.parameter !== void 0) {
+            const parameterLabel = `(${(g.parameter / Math.PI).toFixed(2)}\u03C0)`;
+            const gateTypeWidth = 32;
+            const paramWidth = parameterLabel.length * 6;
+            const padding = 16;
+            const estimatedWidth = Math.max(gateTypeWidth, paramWidth) + padding;
+            maxWidth = Math.max(maxWidth, estimatedWidth);
+          } else if (g.type !== "CNOT") {
+            maxWidth = Math.max(maxWidth, 32);
+          }
+        }
+      });
+      widths[pos] = maxWidth;
+    }
+    return widths;
+  }, [gates]);
+  const columnLeftXs = react.useMemo(() => {
+    const leftXs = {};
+    for (let pos = 0; pos < MAX_POSITIONS; pos++) {
+      if (pos === 0) {
+        leftXs[pos] = LABEL_WIDTH + MIN_LEFT_MARGIN;
+      } else {
+        const prevLeftX = leftXs[pos - 1];
+        const prevWidth = columnWidths[pos - 1];
+        const prevRightEdge = prevLeftX + prevWidth;
+        leftXs[pos] = prevRightEdge + COLUMN_GAP;
+      }
+    }
+    return leftXs;
+  }, [columnWidths]);
+  const columnCenterXs = react.useMemo(() => {
+    const centerXs = {};
+    for (let pos = 0; pos < MAX_POSITIONS; pos++) {
+      centerXs[pos] = columnLeftXs[pos] + columnWidths[pos] / 2;
+    }
+    return centerXs;
+  }, [columnLeftXs, columnWidths]);
+  const getGateQubits2 = (gate) => {
+    if (gate.type === "CNOT" && gate.control !== void 0 && gate.target !== void 0) {
+      const minQubit = Math.min(gate.control, gate.target);
+      const maxQubit = Math.max(gate.control, gate.target);
+      const qubits2 = [];
+      for (let q = minQubit; q <= maxQubit; q++) {
+        qubits2.push(q);
+      }
+      return qubits2;
+    }
+    return gate.qubit !== void 0 ? [gate.qubit] : [];
+  };
+  const calculateDropPosition = (mouseX, qubit, gateType) => {
+    let closestPos = 0;
+    let minDistance = Infinity;
+    for (let pos = 0; pos < MAX_POSITIONS; pos++) {
+      const distance = Math.abs(columnCenterXs[pos] - mouseX);
+      if (distance < minDistance) {
+        minDistance = distance;
+        closestPos = pos;
+      }
+    }
+    let targetQubits;
+    let control;
+    let target;
+    if (gateType === "CNOT") {
+      control = Math.min(qubit, qubits - 2);
+      target = control + 1;
+      targetQubits = [control, target];
+    } else {
+      targetQubits = [qubit];
+    }
+    const rightWall = gates.filter((g) => {
+      if (g.type !== "CNOT" || g.control === void 0 || g.target === void 0) {
+        return false;
+      }
+      const gateQubits = getGateQubits2(g);
+      return targetQubits.some((q) => gateQubits.includes(q)) && g.position > closestPos;
+    }).sort((a, b) => a.position - b.position)[0];
+    let initialPosition;
+    if (rightWall) {
+      initialPosition = Math.min(closestPos, rightWall.position - 1);
+    } else {
+      initialPosition = closestPos;
+    }
+    initialPosition = Math.max(0, initialPosition);
+    const shiftedGatesForInsert = gates.map((g) => {
+      const gateQubits = getGateQubits2(g);
+      const overlapsQubit = targetQubits.some((q) => gateQubits.includes(q));
+      if (overlapsQubit && g.position >= initialPosition) {
+        return { ...g, position: g.position + 1 };
+      }
+      return g;
+    });
+    const tempGate = {
+      id: "temp",
+      type: gateType,
+      position: initialPosition,
+      ...gateType === "CNOT" ? { control, target } : { qubit },
+      ...["RX", "RY", "RZ"].includes(gateType) ? { parameter: Math.PI / 2 } : {}
+    };
+    const compacted = compactGates([...shiftedGatesForInsert, tempGate]);
+    const finalGate = compacted.find((g) => g.id === "temp");
+    const finalPosition = finalGate ? finalGate.position : initialPosition;
+    const shiftedGates = [];
+    compacted.forEach((compactedGate) => {
+      if (compactedGate.id === "temp") return;
+      const originalGate = gates.find((g) => g.id === compactedGate.id);
+      if (originalGate && originalGate.position !== compactedGate.position) {
+        shiftedGates.push({
+          id: compactedGate.id,
+          newPosition: compactedGate.position
+        });
+      }
+    });
+    return { initialPosition, finalPosition, shiftedGates, control, target };
+  };
+  const handleDragOver = (event, qubit) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "copy";
+    let gateType = draggingGateType;
+    if (!gateType) {
+      const mimeType = event.dataTransfer.types.find((t) => t.startsWith("application/x-gate-"));
+      if (mimeType) {
+        gateType = mimeType.replace("application/x-gate-", "").toUpperCase();
+        setDraggingGateType(gateType);
+      }
+    }
+    setDragOverQubit(qubit);
+    if (canvasRef.current && gateType) {
+      const rect = canvasRef.current.getBoundingClientRect();
+      const mouseX = event.clientX - rect.left;
+      const { finalPosition, shiftedGates } = calculateDropPosition(mouseX, qubit, gateType);
+      setDragOverPosition(finalPosition);
+      setPreviewShiftedGates(shiftedGates);
+    }
+  };
+  const handleDragLeave = () => {
+    setDragOverQubit(null);
+    setDragOverPosition(null);
+    setPreviewShiftedGates([]);
+  };
+  const handleDragEnd = () => {
+    setDragOverQubit(null);
+    setDragOverPosition(null);
+    setPreviewShiftedGates([]);
+    setDraggingGateType(null);
+  };
+  const handleDrop = (event, qubit) => {
+    event.preventDefault();
+    setDragOverQubit(null);
+    setDragOverPosition(null);
+    setDraggingGateType(null);
+    setPreviewShiftedGates([]);
+    const gateType = event.dataTransfer.getData("gateType");
+    if (!gateType || !canvasRef.current) return;
+    if (gates.length >= config.maxGates) {
+      console.warn(`Maximum gate limit (${config.maxGates}) reached`);
+      return;
+    }
+    const rect = canvasRef.current.getBoundingClientRect();
+    const mouseX = event.clientX - rect.left;
+    const { initialPosition, control, target } = calculateDropPosition(mouseX, qubit, gateType);
+    const targetQubits = gateType === "CNOT" && control !== void 0 && target !== void 0 ? [control, target] : [qubit];
+    const shiftedGates = gates.map((g) => {
+      const gateQubits = getGateQubits2(g);
+      const overlapsQubit = targetQubits.some((q) => gateQubits.includes(q));
+      if (overlapsQubit && g.position >= initialPosition) {
+        return { ...g, position: g.position + 1 };
+      }
+      return g;
+    });
+    const newGate = {
+      id: generateGateId(),
+      type: gateType,
+      position: initialPosition,
+      ...gateType === "CNOT" ? { control, target } : { qubit },
+      ...["RX", "RY", "RZ"].includes(gateType) ? { parameter: Math.PI / 2 } : {}
+    };
+    const updatedGates = compactGates([...shiftedGates, newGate]);
+    updateGates(updatedGates);
+  };
+  const handleGateClick = (gateId) => {
+    setSelectedGateId(selectedGateId === gateId ? null : gateId);
+    setSelectedQubitIndex(null);
+  };
+  const handleGateDelete = (gateId) => {
+    const remainingGates = gates.filter((g) => g.id !== gateId);
+    const compactedGates = compactGates(remainingGates);
+    updateGates(compactedGates);
+    setSelectedGateId(null);
+  };
+  const handleGateEdit = (gate) => {
+    setEditingGate(gate);
+    setSelectedGateId(null);
+  };
+  const handleQubitClick = (qubitIndex) => {
+    setSelectedQubitIndex(selectedQubitIndex === qubitIndex ? null : qubitIndex);
+    setSelectedGateId(null);
+  };
+  const handleQubitAdd = () => {
+    addQubit();
+    setSelectedQubitIndex(null);
+  };
+  const handleQubitRemove = () => {
+    if (selectedQubitIndex === null) return;
+    removeQubit(selectedQubitIndex);
+    setSelectedQubitIndex(null);
+  };
+  const renderGate = (gate) => {
+    const isSelected = selectedGateId === gate.id;
+    if (gate.type === "CNOT" && gate.control !== void 0 && gate.target !== void 0) {
+      const top = Math.min(gate.control, gate.target) * QUBIT_HEIGHT + QUBIT_HEIGHT / 2;
+      const height = Math.abs(gate.target - gate.control) * QUBIT_HEIGHT;
+      const left = columnCenterXs[gate.position];
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: `circuit-editor__cnot ${isSelected ? "circuit-editor__cnot--selected" : ""}`,
+          style: {
+            left: `${left}px`,
+            top: `${top}px`,
+            height: `${height}px`
+          },
+          onClick: () => handleGateClick(gate.id),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "circuit-editor__cnot-line" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "circuit-editor__cnot-control",
+                style: {
+                  top: gate.control < gate.target ? "0" : "100%"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "circuit-editor__cnot-target",
+                style: {
+                  top: gate.target < gate.control ? "0" : "100%"
+                }
+              }
+            )
+          ]
+        },
+        gate.id
+      );
+    }
+    if (gate.qubit === void 0) return null;
+    const isRotationGate = ["RX", "RY", "RZ"].includes(gate.type);
+    const parameterLabel = gate.parameter !== void 0 ? `(${(gate.parameter / Math.PI).toFixed(2)}\u03C0)` : "";
+    const centerX = columnCenterXs[gate.position];
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `circuit-editor__gate ${isSelected ? "circuit-editor__gate--selected" : ""} ${isRotationGate ? "circuit-editor__gate--rotation" : ""}`,
+        style: {
+          left: `${centerX}px`,
+          top: `${gate.qubit * QUBIT_HEIGHT + QUBIT_HEIGHT / 2}px`,
+          backgroundColor: GATE_COLORS[gate.type]
+        },
+        onClick: () => handleGateClick(gate.id),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "circuit-editor__gate-label", children: [
+          gate.type,
+          isRotationGate && gate.parameter !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "circuit-editor__gate-param", children: parameterLabel })
+        ] })
+      },
+      gate.id
+    );
+  };
+  const selectedGate = selectedGateId ? gates.find((g) => g.id === selectedGateId) : null;
+  const maxGatePosition = gates.length > 0 ? Math.max(...gates.map((g) => g.position)) : 0;
+  const lastColumnRightEdge = columnLeftXs[maxGatePosition] + columnWidths[maxGatePosition] + COLUMN_GAP;
+  const minCircuitWidth = Math.max(lastColumnRightEdge, 400);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `circuit-editor ${className}`.trim(), onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "circuit-editor__canvas", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "circuit-editor__scroll-container", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: canvasRef,
+        className: "circuit-editor__circuit-area",
+        style: { minWidth: `${minCircuitWidth}px` },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "circuit-editor__lanes", children: [
+            Array.from({ length: qubits }).map((_, qubitIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "circuit-editor__lane", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: `circuit-editor__lane-label ${selectedQubitIndex === qubitIndex ? "circuit-editor__lane-label--selected" : ""}`,
+                  onClick: () => handleQubitClick(qubitIndex),
+                  children: [
+                    "q[",
+                    qubitIndex,
+                    "]"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "circuit-editor__lane-line" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "circuit-editor__drop-zone-continuous",
+                  onDragOver: (e) => handleDragOver(e, qubitIndex),
+                  onDragLeave: handleDragLeave,
+                  onDrop: (e) => handleDrop(e, qubitIndex)
+                }
+              )
+            ] }, qubitIndex)),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "circuit-editor__lane circuit-editor__lane--classical", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "circuit-editor__lane-label", children: [
+                "c",
+                qubits
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "circuit-editor__lane-line circuit-editor__lane-line--classical" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "circuit-editor__gates", children: gates.filter((gate) => {
+            const isBeingShifted = previewShiftedGates.some((sg) => sg.id === gate.id);
+            return !isBeingShifted;
+          }).map(renderGate) }),
+          dragOverQubit !== null && dragOverPosition !== null && draggingGateType && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "circuit-editor__preview", children: draggingGateType === "CNOT" ? (() => {
+            const control = Math.min(dragOverQubit, qubits - 2);
+            const target = control + 1;
+            const top = control * QUBIT_HEIGHT + QUBIT_HEIGHT / 2;
+            const height = QUBIT_HEIGHT;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "circuit-editor__cnot circuit-editor__cnot--preview",
+                style: {
+                  left: `${columnCenterXs[dragOverPosition]}px`,
+                  top: `${top}px`,
+                  height: `${height}px`
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "circuit-editor__cnot-line" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "circuit-editor__cnot-control",
+                      style: { top: control < target ? "0" : "100%" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "circuit-editor__cnot-target",
+                      style: { top: target < control ? "0" : "100%" }
+                    }
+                  )
+                ]
+              }
+            );
+          })() : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "circuit-editor__gate circuit-editor__gate--preview",
+              style: {
+                left: `${columnCenterXs[dragOverPosition]}px`,
+                top: `${dragOverQubit * QUBIT_HEIGHT + QUBIT_HEIGHT / 2}px`
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "circuit-editor__gate-label", children: [
+                draggingGateType,
+                ["RX", "RY", "RZ"].includes(draggingGateType) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "circuit-editor__gate-param", children: "(0.50\u03C0)" })
+              ] })
+            }
+          ) }),
+          previewShiftedGates.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "circuit-editor__preview circuit-editor__preview--shifted", children: previewShiftedGates.map((shiftedGate) => {
+            const originalGate = gates.find((g) => g.id === shiftedGate.id);
+            if (!originalGate) return null;
+            if (originalGate.type === "CNOT" && originalGate.control !== void 0 && originalGate.target !== void 0) {
+              const top = Math.min(originalGate.control, originalGate.target) * QUBIT_HEIGHT + QUBIT_HEIGHT / 2;
+              const height = Math.abs(originalGate.target - originalGate.control) * QUBIT_HEIGHT;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "circuit-editor__cnot circuit-editor__cnot--shifted-preview",
+                  style: {
+                    left: `${columnCenterXs[shiftedGate.newPosition]}px`,
+                    top: `${top}px`,
+                    height: `${height}px`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "circuit-editor__cnot-line" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: "circuit-editor__cnot-control",
+                        style: {
+                          top: originalGate.control < originalGate.target ? "0" : "100%"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: "circuit-editor__cnot-target",
+                        style: {
+                          top: originalGate.target < originalGate.control ? "0" : "100%"
+                        }
+                      }
+                    )
+                  ]
+                },
+                shiftedGate.id
+              );
+            }
+            if (originalGate.qubit === void 0) return null;
+            const isRotationGate = ["RX", "RY", "RZ"].includes(originalGate.type);
+            const parameterLabel = originalGate.parameter !== void 0 ? `(${(originalGate.parameter / Math.PI).toFixed(2)}\u03C0)` : "";
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `circuit-editor__gate circuit-editor__gate--shifted-preview ${isRotationGate ? "circuit-editor__gate--rotation" : ""}`,
+                style: {
+                  left: `${columnCenterXs[shiftedGate.newPosition]}px`,
+                  top: `${originalGate.qubit * QUBIT_HEIGHT + QUBIT_HEIGHT / 2}px`,
+                  backgroundColor: GATE_COLORS[originalGate.type]
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "circuit-editor__gate-label", children: [
+                  originalGate.type,
+                  isRotationGate && originalGate.parameter !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "circuit-editor__gate-param", children: parameterLabel })
+                ] })
+              },
+              shiftedGate.id
+            );
+          }) }),
+          selectedGate && /* @__PURE__ */ jsxRuntime.jsx(
+            GateToolbar,
+            {
+              gate: selectedGate,
+              position: {
+                top: selectedGate.type === "CNOT" && selectedGate.control !== void 0 && selectedGate.target !== void 0 ? Math.min(selectedGate.control, selectedGate.target) * QUBIT_HEIGHT + QUBIT_HEIGHT / 2 : (selectedGate.qubit ?? 0) * QUBIT_HEIGHT + QUBIT_HEIGHT / 2,
+                left: columnCenterXs[selectedGate.position]
+              },
+              showBelow: selectedGate.type === "CNOT" ? Math.min(selectedGate.control ?? 0, selectedGate.target ?? 0) === 0 : selectedGate.qubit === 0,
+              onEdit: ["RX", "RY", "RZ", "CNOT"].includes(selectedGate.type) ? () => handleGateEdit(selectedGate) : void 0,
+              onDelete: () => handleGateDelete(selectedGate.id)
+            }
+          ),
+          selectedQubitIndex !== null && /* @__PURE__ */ jsxRuntime.jsx(
+            QubitToolbar,
+            {
+              position: {
+                top: selectedQubitIndex * QUBIT_HEIGHT + QUBIT_HEIGHT / 2,
+                left: LABEL_WIDTH
+              },
+              canAdd: qubits < config.maxQubits,
+              canRemove: qubits > 1,
+              onAddQubit: handleQubitAdd,
+              onDeleteQubit: handleQubitRemove
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "circuit-editor__measurements", children: Array.from({ length: qubits }).map((_, qubitIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "circuit-editor__measurement",
+        style: {
+          top: `${qubitIndex * QUBIT_HEIGHT + QUBIT_HEIGHT / 2}px`
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "circuit-editor__measurement-icon" })
+      },
+      qubitIndex
+    )) })
+  ] }) });
+}
+function GateToolbar({ gate, position, showBelow = false, onEdit, onDelete }) {
+  const isEditable = ["RX", "RY", "RZ", "CNOT"].includes(gate.type);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `circuit-editor__toolbar ${showBelow ? "circuit-editor__toolbar--below" : ""}`,
+      style: {
+        top: `${position.top}px`,
+        left: `${position.left}px`
+      },
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        isEditable && onEdit && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "circuit-editor__toolbar-btn",
+            onClick: (e) => {
+              e.stopPropagation();
+              onEdit();
+            },
+            title: "Edit operation",
+            children: /* @__PURE__ */ jsxRuntime.jsx(EditIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "circuit-editor__toolbar-btn circuit-editor__toolbar-btn--danger",
+            onClick: (e) => {
+              e.stopPropagation();
+              onDelete();
+            },
+            title: "Delete",
+            children: /* @__PURE__ */ jsxRuntime.jsx(TrashIcon, {})
+          }
+        )
+      ]
+    }
+  );
+}
+function QubitToolbar({
+  position,
+  canAdd,
+  canRemove,
+  onAddQubit,
+  onDeleteQubit
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "circuit-editor__toolbar circuit-editor__toolbar--qubit",
+      style: {
+        top: `${position.top}px`,
+        left: `${position.left}px`
+      },
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "circuit-editor__toolbar-btn",
+            onClick: (e) => {
+              e.stopPropagation();
+              onAddQubit();
+            },
+            disabled: !canAdd,
+            title: "Add qubit",
+            children: /* @__PURE__ */ jsxRuntime.jsx(AddIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "circuit-editor__toolbar-btn",
+            onClick: (e) => {
+              e.stopPropagation();
+              onDeleteQubit();
+            },
+            disabled: !canRemove,
+            title: "Delete qubit",
+            children: /* @__PURE__ */ jsxRuntime.jsx(TrashIcon, {})
+          }
+        )
+      ]
+    }
+  );
+}
+function EditIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.146 0.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" }) });
+}
+function TrashIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"
+      }
+    )
+  ] });
+}
+function AddIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2z"
+    }
+  ) });
+}
+
+// src/components/ResultsPanel/ResultsPanel.scss
+var css3 = `.results-panel {
+  background: var(--qamposer-bg-secondary, #262626);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+.results-panel--empty {
+  justify-content: center;
+  align-items: center;
+}
+.results-panel__placeholder {
+  text-align: center;
+  color: var(--qamposer-text-secondary, #a8a8a8);
+  padding: 2rem;
+}
+.results-panel__placeholder svg {
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+.results-panel__placeholder h3 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.125rem;
+  font-weight: 500;
+  color: var(--qamposer-text-primary, #f4f4f4);
+}
+.results-panel__placeholder p {
+  margin: 0;
+  font-size: 0.875rem;
+  max-width: 300px;
+}
+.results-panel__header {
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--qamposer-border, #525252);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.results-panel__header h3 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--qamposer-text-primary, #f4f4f4);
+}
+.results-panel__stats {
+  display: flex;
+  gap: 0.75rem;
+}
+.results-panel__stat {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  color: var(--qamposer-text-secondary, #a8a8a8);
+}
+.results-panel__stat svg {
+  color: var(--qamposer-text-secondary, #a8a8a8);
+}
+.results-panel__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+.results-panel__chart {
+  flex: 1;
+  padding: 0.5rem;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.results-panel__chart > div {
+  width: 100% !important;
+  min-height: 400px;
+}`;
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css3));
+function ResultsPanel({ className = "" } = {}) {
+  const { result } = useQamposer();
+  if (!result) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `results-panel results-panel--empty ${className}`.trim(), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "results-panel__placeholder", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ChartIcon, {}),
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "No simulation results yet" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Add gates to your circuit and run simulation to see results" })
+    ] }) });
+  }
+  const maxBinaryLength = Math.max(...Object.keys(result.counts).map((s) => s.length));
+  const numQubits = maxBinaryLength;
+  const allStates = [];
+  for (let i = 0; i < Math.pow(2, numQubits); i++) {
+    allStates.push(i.toString(2).padStart(numQubits, "0"));
+  }
+  const counts = allStates.map((state) => result.counts[state] || 0);
+  const totalShots = Object.values(result.counts).reduce((sum, count) => sum + count, 0);
+  const probabilities = counts.map((count) => count / totalShots * 100);
+  const chartHeight = 400;
+  const xPositions = allStates.map((_, i) => i);
+  const barWidth = 0.6;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `results-panel ${className}`.trim(), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "results-panel__header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Simulation Results" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "results-panel__stats", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "results-panel__stat", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TimeIcon, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          result.execution_time.toFixed(3),
+          "s"
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "results-panel__content", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "results-panel__chart", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Plot__default.default,
+      {
+        data: [
+          {
+            x: xPositions,
+            y: probabilities,
+            type: "bar",
+            width: barWidth,
+            marker: {
+              color: "#4285F4"
+            }
+          }
+        ],
+        layout: {
+          title: { text: "Measurement Probabilities" },
+          height: chartHeight,
+          xaxis: {
+            title: { text: "Computational basis states" },
+            tickmode: "array",
+            tickvals: xPositions,
+            ticktext: allStates,
+            tickangle: -65
+          },
+          yaxis: {
+            title: { text: "Probabilities (%)" },
+            range: [0, 100],
+            dtick: 20
+          },
+          margin: { t: 40, r: 20, b: 100, l: 60 },
+          paper_bgcolor: "transparent",
+          plot_bgcolor: "transparent",
+          font: {
+            family: "IBM Plex Sans, sans-serif",
+            size: 12
+          }
+        },
+        config: {
+          displayModeBar: true,
+          displaylogo: false,
+          modeBarButtonsToRemove: ["pan2d", "lasso2d", "select2d"],
+          responsive: true
+        },
+        style: { width: "100%", height: `${chartHeight}px` },
+        useResizeHandler: true
+      }
+    ) }) })
+  ] });
+}
+function ChartIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "48", height: "48", viewBox: "0 0 32 32", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M27 28V6h-8v22h-4V14H7v14H4V2H2v26a2 2 0 0 0 2 2h26v-2ZM9 28V16h4v12Zm12 0V8h4v20Z" }) });
+}
+function TimeIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 32 32", fill: "currentColor", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 4a12 12 0 1 0 12 12A12 12 0 0 0 16 4Zm0 22a10 10 0 1 1 10-10 10 10 0 0 1-10 10Z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18.59 21 15 17.41V9h2v7.59l3 3.01L18.59 21z" })
+  ] });
+}
+
+// src/components/QSphereView/QSphereView.scss
+var css4 = `.qsphere-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--qamposer-bg-secondary, #262626);
+}
+.qsphere-view__placeholder {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--qamposer-text-secondary, #a8a8a8);
+  padding: 2rem;
+  text-align: center;
+}
+.qsphere-view__placeholder p {
+  font-size: 0.875rem;
+  max-width: 250px;
+}
+.qsphere-view__controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--qamposer-border, #525252);
+  flex-shrink: 0;
+}
+.qsphere-view__toggles {
+  display: flex;
+  gap: 1rem;
+}
+.qsphere-view__checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--qamposer-text-primary, #f4f4f4);
+  cursor: pointer;
+}
+.qsphere-view__checkbox input[type=checkbox] {
+  width: 14px;
+  height: 14px;
+  accent-color: var(--qamposer-accent, #4285f4);
+  cursor: pointer;
+}
+.qsphere-view__reset-btn {
+  padding: 0.25rem 0.75rem;
+  border: none;
+  background: transparent;
+  color: var(--qamposer-accent, #4285f4);
+  font-size: 0.75rem;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.15s;
+}
+.qsphere-view__reset-btn:hover {
+  background: var(--qamposer-hover, rgba(255, 255, 255, 0.1));
+}
+.qsphere-view__plot {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}`;
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css4));
+var BG = "rgba(12,16,22,0.96)";
+var RING = "rgba(255,255,255,0.35)";
+var SPOKE = "rgba(80,140,255,0.55)";
+var DEFAULT_CAMERA = {
+  eye: { x: 1.35, y: 1.35, z: 1.05 },
+  center: { x: 0, y: 0, z: 0 },
+  up: { x: 0, y: 0, z: 1 }
+};
+var RESOLUTION_THETA = 48;
+var RESOLUTION_PHI = 96;
+function formatPhaseFraction(phase) {
+  const pi = Math.PI;
+  const normalized = (phase % (2 * pi) + 2 * pi) % (2 * pi);
+  const frac = normalized / pi;
+  const snapped = Math.round(frac * 4) / 4;
+  if (snapped === 0) return "0";
+  if (snapped === 2) return "2\u03C0";
+  const numerator = snapped * 4;
+  const gcd = (a, b) => b === 0 ? Math.abs(a) : gcd(b, a % b);
+  const g = gcd(Math.abs(numerator), 4);
+  const n = numerator / g;
+  const d = 4 / g;
+  return d === 1 ? `${n}\u03C0` : `${n}\u03C0/${d}`;
+}
+function buildCircle(theta, isMeridian = false) {
+  const x = [];
+  const y = [];
+  const z = [];
+  for (let j = 0; j <= RESOLUTION_PHI; j++) {
+    const phi = 2 * Math.PI * j / RESOLUTION_PHI;
+    if (isMeridian) {
+      x.push(Math.sin(phi) * Math.sin(theta));
+      y.push(Math.cos(phi) * Math.sin(theta));
+      z.push(Math.cos(theta));
+    } else {
+      x.push(Math.sin(theta) * Math.cos(phi));
+      y.push(Math.sin(theta) * Math.sin(phi));
+      z.push(Math.cos(theta));
+    }
+  }
+  return { x, y, z };
+}
+function generateSphereSurface() {
+  const x = [];
+  const y = [];
+  const z = [];
+  const surfacecolor = [];
+  for (let i = 0; i <= RESOLUTION_THETA; i++) {
+    const theta = Math.PI * i / RESOLUTION_THETA;
+    const rowX = [];
+    const rowY = [];
+    const rowZ = [];
+    const rowC = [];
+    for (let j = 0; j <= RESOLUTION_PHI; j++) {
+      const phi = 2 * Math.PI * j / RESOLUTION_PHI;
+      rowX.push(Math.sin(theta) * Math.cos(phi));
+      rowY.push(Math.sin(theta) * Math.sin(phi));
+      rowZ.push(Math.cos(theta));
+      rowC.push(1 - Math.abs(Math.cos(theta)) * 0.35);
+    }
+    x.push(rowX);
+    y.push(rowY);
+    z.push(rowZ);
+    surfacecolor.push(rowC);
+  }
+  return { x, y, z, surfacecolor };
+}
+function generateRadialLines(points) {
+  const x = [];
+  const y = [];
+  const z = [];
+  points.forEach((p) => {
+    x.push(0, p.x, null);
+    y.push(0, p.y, null);
+    z.push(0, p.z, null);
+  });
+  return { x, y, z };
+}
+function QSphereView({ className = "" }) {
+  const { result } = useQamposer();
+  const points = result?.qsphere;
+  const [showStateLabels, setShowStateLabels] = react.useState(true);
+  const [showPhaseLabels, setShowPhaseLabels] = react.useState(false);
+  const [camera, setCamera] = react.useState(DEFAULT_CAMERA);
+  const labelText = react.useMemo(
+    () => (points || []).map((p) => {
+      const parts = [];
+      if (showStateLabels) parts.push(`|${p.state}\u27E9`);
+      if (showPhaseLabels) parts.push(`\u03C6=${formatPhaseFraction(p.phase)}`);
+      return parts.join("<br>");
+    }),
+    [points, showPhaseLabels, showStateLabels]
+  );
+  if (!points || points.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `qsphere-view ${className}`.trim(), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "qsphere-view__placeholder", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No Q-sphere data available (run a simulation with \u2264 5 qubits)." }) }) });
+  }
+  const x = points.map((p) => p.x);
+  const y = points.map((p) => p.y);
+  const z = points.map((p) => p.z);
+  const sizes = points.map((p) => 6 + 18 * Math.sqrt(p.probability));
+  const phases = points.map((p) => p.phase);
+  const hoverText = points.map(
+    (p) => `<b>State |${p.state}\u27E9</b><br>Probability: ${p.probability.toFixed(3)}<br>Phase angle: ${formatPhaseFraction(p.phase)}`
+  );
+  const sphereData = generateSphereSurface();
+  const equatorRing = buildCircle(Math.PI / 2);
+  const meridianRing = buildCircle(0, true);
+  const radialData = generateRadialLines(points);
+  const hiddenAxisStyle = {
+    range: [-1.1, 1.1],
+    showgrid: false,
+    showline: false,
+    zeroline: false,
+    showticklabels: false,
+    showspikes: false,
+    title: { text: "" },
+    showbackground: false
+  };
+  const traces = [
+    // Sphere surface
+    {
+      type: "surface",
+      x: sphereData.x,
+      y: sphereData.y,
+      z: sphereData.z,
+      surfacecolor: sphereData.surfacecolor,
+      showscale: false,
+      opacity: 0.32,
+      hoverinfo: "skip",
+      colorscale: [
+        [0, "rgba(44,78,120,0.45)"],
+        [1, "rgba(18,28,44,0.55)"]
+      ],
+      contours: { x: { show: false }, y: { show: false }, z: { show: false } },
+      lighting: { ambient: 0.9, diffuse: 0.45, specular: 0.1 },
+      showlegend: false
+    },
+    // Radial lines
+    {
+      type: "scatter3d",
+      mode: "lines",
+      hoverinfo: "skip",
+      x: radialData.x,
+      y: radialData.y,
+      z: radialData.z,
+      line: { color: SPOKE, width: 2 },
+      showlegend: false
+    },
+    // Equator ring
+    {
+      type: "scatter3d",
+      mode: "lines",
+      hoverinfo: "skip",
+      x: equatorRing.x,
+      y: equatorRing.y,
+      z: equatorRing.z,
+      line: { color: RING, width: 2 },
+      showlegend: false
+    },
+    // Meridian ring
+    {
+      type: "scatter3d",
+      mode: "lines",
+      hoverinfo: "skip",
+      x: meridianRing.x,
+      y: meridianRing.y,
+      z: meridianRing.z,
+      line: { color: RING, width: 1.5, dash: "dot" },
+      showlegend: false
+    },
+    // State points
+    {
+      type: "scatter3d",
+      mode: "markers+text",
+      x,
+      y,
+      z,
+      text: labelText,
+      hoverinfo: "text",
+      hovertext: hoverText,
+      textposition: "top center",
+      textfont: { color: "#ffffff", size: 12 },
+      marker: {
+        size: sizes,
+        color: phases,
+        colorscale: "HSV",
+        cmin: -Math.PI,
+        cmax: Math.PI,
+        opacity: 0.95,
+        line: { color: "#cfd8ff", width: 1.5 }
+      },
+      showlegend: false
+    }
+  ];
+  const layout = {
+    uirevision: "qsphere-view",
+    scene: {
+      xaxis: hiddenAxisStyle,
+      yaxis: hiddenAxisStyle,
+      zaxis: hiddenAxisStyle,
+      aspectmode: "cube",
+      bgcolor: BG,
+      camera
+    },
+    margin: { l: 0, r: 0, t: 10, b: 0 },
+    paper_bgcolor: "rgba(0,0,0,0)",
+    plot_bgcolor: "rgba(0,0,0,0)",
+    font: {
+      family: "IBM Plex Sans, sans-serif",
+      size: 12,
+      color: "rgba(255,255,255,0.85)"
+    },
+    showlegend: false
+  };
+  const config = {
+    displayModeBar: false,
+    scrollZoom: true,
+    responsive: true,
+    displaylogo: false
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `qsphere-view ${className}`.trim(), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "qsphere-view__controls", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "qsphere-view__toggles", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "qsphere-view__checkbox", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: showStateLabels,
+              onChange: (e) => setShowStateLabels(e.target.checked)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "State labels" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "qsphere-view__checkbox", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: showPhaseLabels,
+              onChange: (e) => setShowPhaseLabels(e.target.checked)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Phase angle" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "qsphere-view__reset-btn",
+          onClick: () => setCamera({ ...DEFAULT_CAMERA }),
+          children: "Reset view"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "qsphere-view__plot", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Plot__default.default,
+      {
+        data: traces,
+        layout,
+        config,
+        useResizeHandler: true,
+        style: { width: "100%", height: "100%" }
+      }
+    ) })
+  ] });
+}
+
+// src/components/CodeEditor/CodeEditor.scss
+var css5 = `.code-editor {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background: var(--qamposer-bg-secondary, #262626);
+}
+.code-editor__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--qamposer-border, #525252);
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+.code-editor__title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--qamposer-text-primary, #f4f4f4);
+}
+.code-editor__title svg {
+  color: var(--qamposer-text-secondary, #a8a8a8);
+}
+.code-editor__format select {
+  min-width: 120px;
+  height: 2rem;
+  padding: 0 2rem 0 0.75rem;
+  font-size: 0.75rem;
+  color: var(--qamposer-text-primary, #f4f4f4);
+  background: var(--qamposer-bg-primary, #161616);
+  border: 1px solid var(--qamposer-border, #525252);
+  border-radius: 4px;
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23a8a8a8' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.5rem center;
+}
+.code-editor__format select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.code-editor__format select:focus {
+  outline: 2px solid var(--qamposer-accent, #4285f4);
+  outline-offset: -2px;
+}
+.code-editor__body {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  min-height: 0;
+  background: var(--qamposer-bg-tertiary, #1a1a1a);
+  border: 1px solid transparent;
+}
+.code-editor__body--error {
+  border-color: var(--qamposer-error, #da1e28);
+}
+.code-editor__line-numbers {
+  flex-shrink: 0;
+  padding: 0.75rem 0;
+  background: var(--qamposer-bg-secondary, #262626);
+  border-right: 1px solid var(--qamposer-border, #525252);
+  overflow: hidden;
+  user-select: none;
+}
+.code-editor__line-number {
+  padding: 0 0.75rem;
+  font-family: "IBM Plex Mono", "Consolas", "Monaco", monospace;
+  font-size: 0.75rem;
+  line-height: 1.5rem;
+  color: var(--qamposer-text-tertiary, #6f6f6f);
+  text-align: right;
+  min-width: 2.5rem;
+}
+.code-editor__textarea {
+  flex: 1;
+  padding: 0.75rem;
+  font-family: "IBM Plex Mono", "Consolas", "Monaco", monospace;
+  font-size: 0.75rem;
+  line-height: 1.5rem;
+  color: var(--qamposer-text-primary, #f4f4f4);
+  background: transparent;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow: auto;
+  white-space: pre;
+  tab-size: 2;
+}
+.code-editor__textarea::placeholder {
+  color: var(--qamposer-text-tertiary, #6f6f6f);
+}
+.code-editor__textarea:focus {
+  outline: none;
+}
+.code-editor__textarea[readonly] {
+  cursor: default;
+}
+.code-editor__error {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  color: var(--qamposer-error, #da1e28);
+  background: rgba(218, 30, 40, 0.1);
+  border-top: 1px solid var(--qamposer-error, #da1e28);
+}
+.code-editor__error-icon {
+  flex-shrink: 0;
+}`;
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css5));
+var CodeIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.708 5.578L2.061 8.224l2.647 2.646-.708.708L1 8.224l3.354-3.354.354.708zm6.584 0l2.647 2.646-2.647 2.646.708.708L15 8.224l-3.354-3.354-.354.708zM6 13l3-10h1l-3 10H6z" }) });
+function CodeEditor({
+  className = "",
+  showHeader = true,
+  placeholder = "Enter OpenQASM 2.0 code...",
+  readOnly = false
+}) {
+  const { qasmCode, setQasmCode, parseError } = useQamposer();
+  const textareaRef = react.useRef(null);
+  const lineNumbersRef = react.useRef(null);
+  const handleScroll = react.useCallback(() => {
+    if (textareaRef.current && lineNumbersRef.current) {
+      lineNumbersRef.current.scrollTop = textareaRef.current.scrollTop;
+    }
+  }, []);
+  const lineCount = qasmCode.split("\n").length;
+  const lineNumbers = Array.from({ length: lineCount }, (_, i) => i + 1);
+  const handleChange = react.useCallback(
+    (e) => {
+      setQasmCode(e.target.value);
+    },
+    [setQasmCode]
+  );
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === "Tab") {
+        e.preventDefault();
+        const textarea = textareaRef.current;
+        if (!textarea) return;
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const newCode = qasmCode.substring(0, start) + "  " + qasmCode.substring(end);
+        setQasmCode(newCode);
+        requestAnimationFrame(() => {
+          textarea.selectionStart = textarea.selectionEnd = start + 2;
+        });
+      }
+    },
+    [qasmCode, setQasmCode]
+  );
+  react.useEffect(() => {
+    handleScroll();
+  }, [qasmCode, handleScroll]);
+  const hasErrors = !!parseError;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `code-editor ${className}`.trim(), children: [
+    showHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "code-editor__header", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "code-editor__title", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CodeIcon, {}),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Code" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "code-editor__format", children: /* @__PURE__ */ jsxRuntime.jsx("select", { disabled: true, defaultValue: "openqasm2", children: /* @__PURE__ */ jsxRuntime.jsx("option", { value: "openqasm2", children: "OpenQASM 2.0" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `code-editor__body ${hasErrors ? "code-editor__body--error" : ""}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "code-editor__line-numbers", ref: lineNumbersRef, children: lineNumbers.map((num) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "code-editor__line-number", children: num }, num)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          ref: textareaRef,
+          className: "code-editor__textarea",
+          value: qasmCode,
+          onChange: handleChange,
+          onScroll: handleScroll,
+          onKeyDown: handleKeyDown,
+          placeholder,
+          spellCheck: false,
+          autoCapitalize: "off",
+          autoCorrect: "off",
+          readOnly
+        }
+      )
+    ] }),
+    parseError && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "code-editor__error", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "code-editor__error-icon", children: "\u26A0" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: parseError })
+    ] })
+  ] });
+}
+
+// src/components/SimulationControls/SimulationControls.scss
+var css6 = `.simulation-controls__run-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.15s, opacity 0.15s;
+}
+.simulation-controls__run-btn--primary {
+  background: var(--qamposer-accent, #4285f4);
+  color: white;
+}
+.simulation-controls__run-btn--primary:hover:not(:disabled) {
+  background: var(--qamposer-accent-hover, #3367d6);
+}
+.simulation-controls__run-btn--secondary {
+  background: var(--qamposer-bg-secondary, #262626);
+  color: var(--qamposer-text-primary, #f4f4f4);
+  border: 1px solid var(--qamposer-border, #525252);
+}
+.simulation-controls__run-btn--secondary:hover:not(:disabled) {
+  background: var(--qamposer-hover, rgba(255, 255, 255, 0.1));
+}
+.simulation-controls__run-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.simulation-controls__spinner {
+  animation: spin 1s linear infinite;
+}
+.simulation-controls__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.65);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+.simulation-controls__dialog {
+  background: var(--qamposer-bg-secondary, #262626);
+  border: 1px solid var(--qamposer-border, #525252);
+  border-radius: 8px;
+  width: 100%;
+  max-width: 480px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+.simulation-controls__dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--qamposer-border, #525252);
+}
+.simulation-controls__dialog-header h2 {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--qamposer-text-primary, #f4f4f4);
+}
+.simulation-controls__close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--qamposer-text-secondary, #a8a8a8);
+  cursor: pointer;
+}
+.simulation-controls__close-btn:hover {
+  background: var(--qamposer-hover, rgba(255, 255, 255, 0.1));
+  color: var(--qamposer-text-primary, #f4f4f4);
+}
+.simulation-controls__dialog-content {
+  padding: 1.5rem;
+}
+.simulation-controls__section {
+  margin-bottom: 1.5rem;
+}
+.simulation-controls__section:last-child {
+  margin-bottom: 0;
+}
+.simulation-controls__section h3 {
+  margin: 0 0 1rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--qamposer-text-primary, #f4f4f4);
+}
+.simulation-controls__field label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--qamposer-text-secondary, #a8a8a8);
+}
+.simulation-controls__field input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--qamposer-text-primary, #f4f4f4);
+  background: var(--qamposer-bg-primary, #161616);
+  border: 1px solid var(--qamposer-border, #525252);
+  border-radius: 4px;
+}
+.simulation-controls__field input:focus {
+  outline: 2px solid var(--qamposer-accent, #4285f4);
+  outline-offset: -2px;
+}
+.simulation-controls__loading {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  color: var(--qamposer-text-secondary, #a8a8a8);
+  font-size: 0.875rem;
+}
+.simulation-controls__error {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  background: rgba(218, 30, 40, 0.1);
+  border: 1px solid rgba(218, 30, 40, 0.3);
+  border-radius: 4px;
+}
+.simulation-controls__error-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  background: #da1e28;
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 700;
+  border-radius: 50%;
+}
+.simulation-controls__error-content {
+  flex: 1;
+  min-width: 0;
+}
+.simulation-controls__error-title {
+  margin: 0 0 0.25rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #fa4d56;
+}
+.simulation-controls__error-desc {
+  margin: 0;
+  font-size: 0.75rem;
+  color: var(--qamposer-text-secondary, #a8a8a8);
+  line-height: 1.4;
+}
+.simulation-controls__backend-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-height: 240px;
+  overflow-y: auto;
+}
+.simulation-controls__backend-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  text-align: left;
+  background: var(--qamposer-bg-primary, #161616);
+  border: 1px solid var(--qamposer-border, #525252);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: border-color 0.15s, background-color 0.15s;
+}
+.simulation-controls__backend-item:hover {
+  background: var(--qamposer-hover, rgba(255, 255, 255, 0.05));
+}
+.simulation-controls__backend-item--selected {
+  border-color: var(--qamposer-accent, #4285f4);
+  background: rgba(66, 133, 244, 0.1);
+}
+.simulation-controls__backend-item-content {
+  flex: 1;
+  min-width: 0;
+}
+.simulation-controls__backend-item-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+.simulation-controls__backend-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--qamposer-text-primary, #f4f4f4);
+}
+.simulation-controls__backend-type {
+  padding: 0.125rem 0.375rem;
+  font-size: 0.625rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-radius: 2px;
+}
+.simulation-controls__backend-type--ideal {
+  background: rgba(72, 187, 120, 0.2);
+  color: #48bb78;
+}
+.simulation-controls__backend-type--noisy_fake {
+  background: rgba(237, 137, 54, 0.2);
+  color: #ed8936;
+}
+.simulation-controls__backend-desc {
+  margin: 0;
+  font-size: 0.75rem;
+  color: var(--qamposer-text-secondary, #a8a8a8);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.simulation-controls__backend-check {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  margin-left: 0.75rem;
+  color: var(--qamposer-accent, #4285f4);
+}
+.simulation-controls__dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--qamposer-border, #525252);
+}
+.simulation-controls__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+.simulation-controls__btn--primary {
+  background: var(--qamposer-accent, #4285f4);
+  color: white;
+}
+.simulation-controls__btn--primary:hover:not(:disabled) {
+  background: var(--qamposer-accent-hover, #3367d6);
+}
+.simulation-controls__btn--secondary {
+  background: transparent;
+  color: var(--qamposer-text-primary, #f4f4f4);
+  border: 1px solid var(--qamposer-border, #525252);
+}
+.simulation-controls__btn--secondary:hover:not(:disabled) {
+  background: var(--qamposer-hover, rgba(255, 255, 255, 0.1));
+}
+.simulation-controls__btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}`;
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css6));
+var PlayIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 32 32", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 28a1 1 0 01-1-1V5a1 1 0 011.5-.87l21 11a1 1 0 010 1.74l-21 11A1 1 0 017 28z" }) });
+var CloseIcon2 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 32 32", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4l6.6 6.6L8 22.6 9.4 24l6.6-6.6 6.6 6.6 1.4-1.4-6.6-6.6L24 9.4z" }) });
+var LoadingSpinner = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", className: "simulation-controls__spinner", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "circle",
+  {
+    cx: "8",
+    cy: "8",
+    r: "6",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeDasharray: "25 75"
+  }
+) });
+var CheckIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 32 32", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13 24l-9-9 1.4-1.4L13 21.2 26.6 7.6 28 9z" }) });
+function SimulationControls({
+  buttonOnly = false,
+  buttonLabel = "Set up and run",
+  className = ""
+}) {
+  const { simulate, status, circuit, adapter, canSimulate } = useQamposer();
+  const isSimulating = status === "simulating";
+  const [isDialogOpen, setIsDialogOpen] = react.useState(false);
+  const [shots, setShots] = react.useState(1024);
+  const [backends, setBackends] = react.useState([]);
+  const [selectedBackendId, setSelectedBackendId] = react.useState("ideal");
+  const [isLoadingBackends, setIsLoadingBackends] = react.useState(false);
+  const [backendError, setBackendError] = react.useState(false);
+  react.useEffect(() => {
+    if (isDialogOpen && adapter.getBackends) {
+      setIsLoadingBackends(true);
+      setBackendError(false);
+      adapter.getBackends().then((result) => {
+        setBackends(result);
+        if (result.length === 1 && result[0].id === "ideal" && !canSimulate) {
+          setBackendError(true);
+        }
+      }).finally(() => setIsLoadingBackends(false));
+    }
+  }, [isDialogOpen, adapter, canSimulate]);
+  const selectedBackend = backends.find((b) => b.id === selectedBackendId);
+  const buildProfile = () => {
+    if (!selectedBackend || selectedBackend.backend_type === "ideal") {
+      return { type: "ideal" };
+    }
+    return {
+      type: "noisy_fake",
+      backend_name: selectedBackend.id
+    };
+  };
+  const handleRun = async () => {
+    if (circuit.gates.length === 0) {
+      alert("Please add gates to the circuit before running simulation");
+      return;
+    }
+    const profile = buildProfile();
+    await simulate(shots, profile);
+    setIsDialogOpen(false);
+  };
+  const handleQuickRun = async () => {
+    if (circuit.gates.length === 0) {
+      alert("Please add gates to the circuit before running simulation");
+      return;
+    }
+    await simulate(shots);
+  };
+  if (buttonOnly) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        className: `simulation-controls__run-btn simulation-controls__run-btn--primary ${className}`.trim(),
+        onClick: handleQuickRun,
+        disabled: isSimulating,
+        children: [
+          isSimulating ? /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, {}) : /* @__PURE__ */ jsxRuntime.jsx(PlayIcon, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: isSimulating ? "Running..." : "Run" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        className: `simulation-controls__run-btn simulation-controls__run-btn--primary ${className}`.trim(),
+        onClick: () => setIsDialogOpen(true),
+        disabled: isSimulating,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PlayIcon, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: buttonLabel })
+        ]
+      }
+    ),
+    isDialogOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "simulation-controls__overlay", onClick: () => setIsDialogOpen(false), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "simulation-controls__dialog", onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "simulation-controls__dialog-header", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Set up and run your circuit" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "simulation-controls__close-btn",
+            onClick: () => setIsDialogOpen(false),
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon2, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "simulation-controls__dialog-content", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "simulation-controls__section", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Step 1: Configure settings" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "simulation-controls__field", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "shots-input", children: "Shots" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                id: "shots-input",
+                type: "number",
+                value: shots,
+                min: 1,
+                max: 1e4,
+                onChange: (e) => setShots(Number(e.target.value))
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "simulation-controls__section", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Step 2: Choose a backend" }),
+          isLoadingBackends ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "simulation-controls__loading", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, {}),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Loading backends..." })
+          ] }) : backendError ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "simulation-controls__error", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "simulation-controls__error-icon", children: "!" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "simulation-controls__error-content", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "simulation-controls__error-title", children: "Backend unavailable" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "simulation-controls__error-desc", children: "Cannot connect to the simulation backend. Please check that the server is running and CORS is configured correctly." })
+            ] })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "simulation-controls__backend-list", children: backends.map((backend) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              className: `simulation-controls__backend-item ${selectedBackendId === backend.id ? "simulation-controls__backend-item--selected" : ""}`,
+              onClick: () => setSelectedBackendId(backend.id),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "simulation-controls__backend-item-content", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "simulation-controls__backend-item-header", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "simulation-controls__backend-name", children: backend.name }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: `simulation-controls__backend-type simulation-controls__backend-type--${backend.backend_type}`,
+                        children: backend.backend_type === "ideal" ? "Ideal" : "Noisy"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "simulation-controls__backend-desc", children: backend.description || `${backend.num_qubits} qubits` })
+                ] }),
+                selectedBackendId === backend.id && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "simulation-controls__backend-check", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) })
+              ]
+            },
+            backend.id
+          )) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "simulation-controls__dialog-footer", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "simulation-controls__btn simulation-controls__btn--secondary",
+            onClick: () => setIsDialogOpen(false),
+            disabled: isSimulating,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "simulation-controls__btn simulation-controls__btn--primary",
+            onClick: handleRun,
+            disabled: isSimulating || backendError,
+            children: isSimulating ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, {}),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Running..." })
+            ] }) : "Run circuit"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/presets/Qamposer/Qamposer.scss
+var css7 = `.qamposer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: var(--qamposer-bg-primary, #161616);
+  overflow: hidden;
+}
+.qamposer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1rem;
+  height: 48px;
+  background: var(--qamposer-bg-secondary, #262626);
+  border-bottom: 1px solid var(--qamposer-border, #525252);
+  flex-shrink: 0;
+}
+.qamposer__title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--qamposer-text-primary, #f4f4f4);
+}
+.qamposer__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.qamposer__theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--qamposer-text-secondary, #a8a8a8);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.qamposer__theme-toggle:hover {
+  background: var(--qamposer-hover, rgba(255, 255, 255, 0.1));
+  color: var(--qamposer-text-primary, #f4f4f4);
+}
+.qamposer__layout {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 280px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  min-height: 0;
+}
+.qamposer__left-area {
+  grid-column: 1;
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  overflow: hidden;
+  min-height: 0;
+}
+.qamposer__top-area {
+  grid-row: 1;
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  border-bottom: 2px solid var(--qamposer-border, #525252);
+  overflow: hidden;
+  min-height: 0;
+}
+.qamposer__operations {
+  grid-column: 1;
+  border-right: 2px solid var(--qamposer-border, #525252);
+  overflow-y: auto;
+  overflow-x: hidden;
+  min-height: 0;
+}
+.qamposer__circuit {
+  grid-column: 2;
+  overflow: auto;
+  min-height: 0;
+}
+.qamposer__bottom-area {
+  grid-row: 2;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  overflow: hidden;
+  min-height: 0;
+}
+.qamposer__results {
+  grid-column: 1;
+  border-right: 2px solid var(--qamposer-border, #525252);
+  overflow: hidden;
+  min-height: 0;
+}
+.qamposer__qsphere {
+  grid-column: 2;
+  overflow: hidden;
+  min-height: 0;
+}
+.qamposer__code-editor {
+  grid-column: 2;
+  border-left: 2px solid var(--qamposer-border, #525252);
+  overflow: hidden;
+  min-height: 0;
+}`;
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css7));
+function Qamposer({
+  className = "",
+  showHeader = true,
+  title = "Qamposer",
+  codeEditorWidth = "280px",
+  topGridTemplate = "1fr 3fr",
+  bottomGridTemplate = "1fr 1fr",
+  defaultTheme = "dark",
+  showThemeToggle = true,
+  ...providerProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { defaultTheme, children: /* @__PURE__ */ jsxRuntime.jsx(QamposerProvider, { ...providerProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+    QamposerContent,
+    {
+      className,
+      showHeader,
+      title,
+      codeEditorWidth,
+      topGridTemplate,
+      bottomGridTemplate,
+      showThemeToggle
+    }
+  ) }) });
+}
+function QamposerContent({
+  className,
+  showHeader,
+  title,
+  codeEditorWidth,
+  topGridTemplate,
+  bottomGridTemplate,
+  showThemeToggle
+}) {
+  const { theme, toggleTheme } = useTheme();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `qamposer ${className}`.trim(), children: [
+    showHeader && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "qamposer__header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "qamposer__title", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "qamposer__actions", children: [
+        showThemeToggle && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "qamposer__theme-toggle",
+            onClick: toggleTheme,
+            title: theme === "dark" ? "Switch to light mode" : "Switch to dark mode",
+            "aria-label": "Toggle theme",
+            children: theme === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(SunIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(MoonIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(SimulationControls, {})
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "qamposer__layout",
+        style: { gridTemplateColumns: `1fr ${codeEditorWidth}` },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "qamposer__left-area", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "qamposer__top-area",
+                style: { gridTemplateColumns: topGridTemplate },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "qamposer__operations", children: /* @__PURE__ */ jsxRuntime.jsx(Operations, {}) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("main", { className: "qamposer__circuit", children: /* @__PURE__ */ jsxRuntime.jsx(CircuitEditor, {}) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "qamposer__bottom-area",
+                style: { gridTemplateColumns: bottomGridTemplate },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "qamposer__results", children: /* @__PURE__ */ jsxRuntime.jsx(ResultsPanel, {}) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "qamposer__qsphere", children: /* @__PURE__ */ jsxRuntime.jsx(QSphereView, {}) })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "qamposer__code-editor", children: /* @__PURE__ */ jsxRuntime.jsx(CodeEditor, {}) })
+        ]
+      }
+    )
+  ] });
+}
+function SunIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })
+      ]
+    }
+  );
+}
+function MoonIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+    }
+  );
+}
+
+exports.QSphereView = QSphereView;
+exports.Qamposer = Qamposer;
+exports.ResultsPanel = ResultsPanel;