@qamposer/react 0.1.0 → 0.1.2

package/README.md

@@ -6,14 +6,15 @@ Qamposer is a modular, open-source quantum composer that can be embedded into yo
 
 ## Installation
 
-> **Coming Soon** - npm package publication is in progress.
-
 ```bash
-# Not yet available
 npm install @qamposer/react
 ```
 
-For now, please use the source code directly or contact the maintainers for access.
+For the full version with visualization (Q-sphere, histograms), also install Plotly:
+
+```bash
+npm install plotly.js-basic-dist-min react-plotly.js
+```
 
 ## Examples
 
@@ -38,32 +39,27 @@ Quantum mechanics and simulation results can be directly leveraged as game logic
 ### Basic Usage (QamposerMicro)
 
 ```tsx
-import { QamposerMicro, qiskitAdapter } from "@qamposer/react";
-import "@qamposer/react/styles.css";
+import { QamposerMicro } from '@qamposer/react';
 
 function App() {
-  return (
-    <QamposerMicro
-      adapter={qiskitAdapter("http://localhost:8000")}
-      onSimulationComplete={(event) => {
-        console.log("Result:", event.result);
-        console.log("QASM:", event.qasm);
-      }}
-    />
-  );
+  return <QamposerMicro />;
 }
 ```
 
+> **Note**: By default, QamposerMicro runs in editor-only mode (no simulation). To enable simulation, see [With Backend](#with-backend-simulation) below.
+
 ### Full Version with Visualization (Qamposer)
 
+The full version includes visualization components (histograms, Q-sphere) that require simulation results, so a backend adapter is needed:
+
 ```tsx
-import { Qamposer } from "@qamposer/react/visualization";
-import "@qamposer/react/styles.css";
+import { Qamposer } from '@qamposer/react/visualization';
+import { qiskitAdapter } from '@qamposer/react';
 
 function App() {
   return (
     <Qamposer
-      adapter={qiskitAdapter("http://localhost:8000")}
+      adapter={qiskitAdapter('http://localhost:8080')}
       defaultTheme="dark"
       showThemeToggle
     />
@@ -101,11 +97,24 @@ This library provides two preset components to fit different use cases:
 
 ## Backend Requirements
 
-> **Important**: To run quantum simulations, you need to run the `qamposer-backend` server.
+The React components work standalone for circuit editing. To run quantum simulations, you need the `qamposer-backend` server.
+
+### Editor-Only Mode
+
+By default, components run in editor-only mode without requiring a backend:
+
+```tsx
+import { QamposerMicro } from '@qamposer/react';
+
+// No backend required - editor-only mode (default)
+<QamposerMicro />;
+```
+
+### With Backend (Simulation)
 
-The React components handle circuit editing and visualization, but actual quantum simulation requires a backend server running Qiskit.
+To enable quantum simulation, start the backend and pass the `qiskitAdapter`:
 
-### Starting the Backend
+Assuming localhost is used here, but please specify the actual deployment destination for the backend.
 
 ```bash
 # Clone and setup qamposer-backend
@@ -114,17 +123,16 @@ poetry install
 poetry run uvicorn backend.main:app --host 0.0.0.0 --port 8080 --reload
 ```
 
-The backend will start at `http://localhost:8000` by default.
-
-### Editor-Only Mode (No Backend)
-
-If you only need the circuit editor without simulation capabilities, use the `noopAdapter`:
-
 ```tsx
-import { QamposerMicro, noopAdapter } from "@qamposer/react";
-
-// No backend required - simulation is disabled
-<QamposerMicro adapter={noopAdapter} />;
+import { QamposerMicro, qiskitAdapter } from '@qamposer/react';
+
+<QamposerMicro
+  adapter={qiskitAdapter('http://localhost:8080')}
+  onSimulationComplete={(event) => {
+    console.log('Result:', event.result);
+    console.log('QASM:', event.qasm);
+  }}
+/>;
 ```
 
 ## API Reference
@@ -139,7 +147,7 @@ interface QamposerProps {
   onCircuitChange?: (circuit: Circuit) => void;
 
   // Simulation
-  adapter?: SimulationAdapter; // Backend adapter
+  adapter?: SimulationAdapter; // Backend adapter (default: noopAdapter)
   onSimulationComplete?: (event: SimulationCompleteEvent) => void;
 
   // Configuration
@@ -149,7 +157,7 @@ interface QamposerProps {
   className?: string;
   showHeader?: boolean; // Default: true
   title?: string; // Default: 'Qamposer'
-  defaultTheme?: "light" | "dark"; // Default: 'dark'
+  defaultTheme?: 'light' | 'dark'; // Default: 'dark'
   showThemeToggle?: boolean; // Default: true
 
   // Layout (Qamposer only)
@@ -169,31 +177,31 @@ interface QamposerConfig {
 }
 ```
 
-### Adapters
+<!-- ### Adapters
 
 ```tsx
 // Qiskit Backend Adapter
-import { qiskitAdapter } from "@qamposer/react";
+import { qiskitAdapter } from '@qamposer/react';
 
-const adapter = qiskitAdapter("http://localhost:8000");
+const adapter = qiskitAdapter('http://localhost:8000');
 
 // With options
 const adapter = qiskitAdapter({
-  baseUrl: "http://localhost:8000",
-  headers: { Authorization: "Bearer token" },
+  baseUrl: 'http://localhost:8000',
+  headers: { Authorization: 'Bearer token' },
   timeout: 30000,
 });
 
 // No-op Adapter (editor only, no simulation)
-import { noopAdapter } from "@qamposer/react";
-```
+import { noopAdapter } from '@qamposer/react';
+``` -->
 
-### useQamposer Hook
+<!-- ### useQamposer Hook
 
 For building custom UIs, use the `useQamposer` hook within a `QamposerProvider`:
 
 ```tsx
-import { QamposerProvider, useQamposer } from '@qamposer/react';
+import { QamposerProvider, useQamposer, qiskitAdapter } from '@qamposer/react';
 
 function CustomEditor() {
   const {
@@ -212,14 +220,24 @@ function CustomEditor() {
   );
 }
 
+// Editor-only mode (default)
 function App() {
   return (
-    <QamposerProvider adapter={qiskitAdapter('http://localhost:8000')}>
+    <QamposerProvider>
       <CustomEditor />
     </QamposerProvider>
   );
 }
-```
+
+// With backend simulation
+function AppWithSimulation() {
+  return (
+    <QamposerProvider adapter={qiskitAdapter('http://localhost:8080')}>
+      <CustomEditor />
+    </QamposerProvider>
+  );
+}
+``` -->
 
 <!-- ### Individual Components -->
 
@@ -240,7 +258,7 @@ import { QSphereView, ResultsPanel } from '@qamposer/react/visualization';
 ## OpenQASM Utilities
 
 ```tsx
-import { circuitToQasm, qasmToCircuit } from "@qamposer/react";
+import { circuitToQasm, qasmToCircuit } from '@qamposer/react';
 
 // Convert Circuit to OpenQASM
 const qasm = circuitToQasm(circuit);
@@ -284,7 +302,7 @@ The library uses CSS variables for theming. You can customize colors by overridi
 Or use the theme hook:
 
 ```tsx
-import { useTheme } from "@qamposer/react";
+import { useTheme } from '@qamposer/react';
 
 function ThemeToggle() {
   const { theme, toggleTheme } = useTheme();
@@ -310,6 +328,11 @@ For `Qamposer` (full version) with visualization:
 }
 ```
 
+## Support & Stability
+
+- This library is under active development.
+- Please report issues via [GitHub Issues](https://github.com/QAMP-62/qamposer-react/issues).
+
 ## License
 
 Licensed under the Apache 2.0.

package/dist/{index-BbUFQqpD.d.cts → index-BghK68a6.d.cts}

@@ -43,7 +43,7 @@ interface Circuit {
     qubits: number;
     gates: Gate[];
 }
-type BackendType = 'ideal' | 'noisy_fake';
+type BackendType = 'ideal' | 'noisy_fake' | 'real';
 interface SimulationProfile {
     type: BackendType;
     backend_name?: string;

package/dist/{index-BbUFQqpD.d.ts → index-BghK68a6.d.ts}

@@ -43,7 +43,7 @@ interface Circuit {
     qubits: number;
     gates: Gate[];
 }
-type BackendType = 'ideal' | 'noisy_fake';
+type BackendType = 'ideal' | 'noisy_fake' | 'real';
 interface SimulationProfile {
     type: BackendType;
     backend_name?: string;

package/dist/index.cjs

@@ -321,6 +321,38 @@ function QamposerProvider({
   react.useEffect(() => {
     adapter.isAvailable().then(setCanSimulate);
   }, [adapter]);
+  const autoSimRequestId = react.useRef(0);
+  react.useEffect(() => {
+    if (!canSimulate || circuit.gates.length === 0) {
+      if (circuit.gates.length === 0) {
+        setResult(null);
+      }
+      return;
+    }
+    const requestId = ++autoSimRequestId.current;
+    setStatus("simulating");
+    setError(null);
+    const request = {
+      qubits: circuit.qubits,
+      gates: circuit.gates.map(({ id: _, ...gate }) => gate),
+      shots: 1024,
+      profile: { type: "ideal" }
+    };
+    adapter.simulate(request).then((simulationResult) => {
+      if (autoSimRequestId.current !== requestId) return;
+      setResult(simulationResult);
+      setStatus("idle");
+      onSimulationComplete?.({
+        result: simulationResult,
+        circuit: { ...circuit },
+        qasm: circuitToQasm(circuit)
+      });
+    }).catch((err) => {
+      if (autoSimRequestId.current !== requestId) return;
+      setError(err instanceof Error ? err : new Error(String(err)));
+      setStatus("error");
+    });
+  }, [circuit, canSimulate, adapter, onSimulationComplete]);
   const addGate = react.useCallback(
     (gate) => {
       if (circuit.gates.length >= config.maxGates) {
@@ -490,6 +522,7 @@ function QamposerProvider({
   }, [circuit]);
   const simulate = react.useCallback(
     async (shots = 1024, profile) => {
+      autoSimRequestId.current++;
       if (!canSimulate) {
         throw new Error("Simulation adapter is not available");
       }
@@ -2303,6 +2336,11 @@ var css3 = `.simulation-controls__run-btn {
   border-color: var(--qamposer-accent, #4285f4);
   background: rgba(66, 133, 244, 0.1);
 }
+.simulation-controls__backend-item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
 .simulation-controls__backend-item-content {
   flex: 1;
   min-width: 0;
@@ -2334,6 +2372,10 @@ var css3 = `.simulation-controls__run-btn {
   background: rgba(237, 137, 54, 0.2);
   color: #ed8936;
 }
+.simulation-controls__backend-type--real {
+  background: rgba(160, 174, 192, 0.2);
+  color: #a0aec0;
+}
 .simulation-controls__backend-desc {
   margin: 0;
   font-size: 0.75rem;
@@ -2425,7 +2467,7 @@ function SimulationControls({
   const [isDialogOpen, setIsDialogOpen] = react.useState(false);
   const [shots, setShots] = react.useState(1024);
   const [backends, setBackends] = react.useState([]);
-  const [selectedBackendId, setSelectedBackendId] = react.useState("ideal");
+  const [selectedBackendId, setSelectedBackendId] = react.useState("");
   const [isLoadingBackends, setIsLoadingBackends] = react.useState(false);
   const [backendError, setBackendError] = react.useState(false);
   react.useEffect(() => {
@@ -2433,8 +2475,13 @@ function SimulationControls({
       setIsLoadingBackends(true);
       setBackendError(false);
       adapter.getBackends().then((result) => {
-        setBackends(result);
-        if (result.length === 1 && result[0].id === "ideal" && !canSimulate) {
+        const nonIdealBackends = result.filter((b) => b.backend_type !== "ideal");
+        setBackends(nonIdealBackends);
+        const firstFake = nonIdealBackends.find((b) => b.backend_type === "noisy_fake");
+        if (firstFake) {
+          setSelectedBackendId(firstFake.id);
+        }
+        if (nonIdealBackends.length === 0 && !canSimulate) {
           setBackendError(true);
         }
       }).finally(() => setIsLoadingBackends(false));
@@ -2442,13 +2489,10 @@ function SimulationControls({
   }, [isDialogOpen, adapter, canSimulate]);
   const selectedBackend = backends.find((b) => b.id === selectedBackendId);
   const buildProfile = () => {
-    if (!selectedBackend || selectedBackend.backend_type === "ideal") {
-      return { type: "ideal" };
+    if (!selectedBackend || selectedBackend.backend_type === "noisy_fake") {
+      return selectedBackend ? { type: "noisy_fake", backend_name: selectedBackend.id } : void 0;
     }
-    return {
-      type: "noisy_fake",
-      backend_name: selectedBackend.id
-    };
+    return void 0;
   };
   const handleRun = async () => {
     if (circuit.gates.length === 0) {
@@ -2535,31 +2579,35 @@ function SimulationControls({
               /* @__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("div", { className: "simulation-controls__backend-list", children: backends.map((backend) => {
+            const isReal = backend.backend_type === "real";
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                className: `simulation-controls__backend-item ${selectedBackendId === backend.id ? "simulation-controls__backend-item--selected" : ""} ${isReal ? "simulation-controls__backend-item--disabled" : ""}`,
+                onClick: () => !isReal && setSelectedBackendId(backend.id),
+                disabled: isReal,
+                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 === "noisy_fake" ? "Noisy" : "Real"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "simulation-controls__backend-desc", children: isReal ? "Coming soon" : backend.description || `${backend.num_qubits} qubits` })
                   ] }),
-                  /* @__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
-          )) })
+                  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: [

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Q as QamposerProviderProps$1, T as Theme, C as Circuit, S as SimulationAdapter, a as SimulationCompleteEvent, b as QamposerConfig, c as QamposerContextValue, d as QasmParseResult } from './index-BbUFQqpD.cjs';
-export { h as CircuitRequest, G as Gate, g as GateInfo, f as GateType, j as QSpherePoint, i as SimulationResult, e as ThemeProvider, u as useTheme } from './index-BbUFQqpD.cjs';
+import { Q as QamposerProviderProps$1, T as Theme, C as Circuit, S as SimulationAdapter, a as SimulationCompleteEvent, b as QamposerConfig, c as QamposerContextValue, d as QasmParseResult } from './index-BghK68a6.cjs';
+export { h as CircuitRequest, G as Gate, g as GateInfo, f as GateType, j as QSpherePoint, i as SimulationResult, e as ThemeProvider, u as useTheme } from './index-BghK68a6.cjs';
 import { ReactNode } from 'react';
 
 interface QamposerMicroProps extends Omit<QamposerProviderProps$1, 'children'> {

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Q as QamposerProviderProps$1, T as Theme, C as Circuit, S as SimulationAdapter, a as SimulationCompleteEvent, b as QamposerConfig, c as QamposerContextValue, d as QasmParseResult } from './index-BbUFQqpD.js';
-export { h as CircuitRequest, G as Gate, g as GateInfo, f as GateType, j as QSpherePoint, i as SimulationResult, e as ThemeProvider, u as useTheme } from './index-BbUFQqpD.js';
+import { Q as QamposerProviderProps$1, T as Theme, C as Circuit, S as SimulationAdapter, a as SimulationCompleteEvent, b as QamposerConfig, c as QamposerContextValue, d as QasmParseResult } from './index-BghK68a6.js';
+export { h as CircuitRequest, G as Gate, g as GateInfo, f as GateType, j as QSpherePoint, i as SimulationResult, e as ThemeProvider, u as useTheme } from './index-BghK68a6.js';
 import { ReactNode } from 'react';
 
 interface QamposerMicroProps extends Omit<QamposerProviderProps$1, 'children'> {

package/dist/index.js

@@ -319,6 +319,38 @@ function QamposerProvider({
   useEffect(() => {
     adapter.isAvailable().then(setCanSimulate);
   }, [adapter]);
+  const autoSimRequestId = useRef(0);
+  useEffect(() => {
+    if (!canSimulate || circuit.gates.length === 0) {
+      if (circuit.gates.length === 0) {
+        setResult(null);
+      }
+      return;
+    }
+    const requestId = ++autoSimRequestId.current;
+    setStatus("simulating");
+    setError(null);
+    const request = {
+      qubits: circuit.qubits,
+      gates: circuit.gates.map(({ id: _, ...gate }) => gate),
+      shots: 1024,
+      profile: { type: "ideal" }
+    };
+    adapter.simulate(request).then((simulationResult) => {
+      if (autoSimRequestId.current !== requestId) return;
+      setResult(simulationResult);
+      setStatus("idle");
+      onSimulationComplete?.({
+        result: simulationResult,
+        circuit: { ...circuit },
+        qasm: circuitToQasm(circuit)
+      });
+    }).catch((err) => {
+      if (autoSimRequestId.current !== requestId) return;
+      setError(err instanceof Error ? err : new Error(String(err)));
+      setStatus("error");
+    });
+  }, [circuit, canSimulate, adapter, onSimulationComplete]);
   const addGate = useCallback(
     (gate) => {
       if (circuit.gates.length >= config.maxGates) {
@@ -488,6 +520,7 @@ function QamposerProvider({
   }, [circuit]);
   const simulate = useCallback(
     async (shots = 1024, profile) => {
+      autoSimRequestId.current++;
       if (!canSimulate) {
         throw new Error("Simulation adapter is not available");
       }
@@ -2301,6 +2334,11 @@ var css3 = `.simulation-controls__run-btn {
   border-color: var(--qamposer-accent, #4285f4);
   background: rgba(66, 133, 244, 0.1);
 }
+.simulation-controls__backend-item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
 .simulation-controls__backend-item-content {
   flex: 1;
   min-width: 0;
@@ -2332,6 +2370,10 @@ var css3 = `.simulation-controls__run-btn {
   background: rgba(237, 137, 54, 0.2);
   color: #ed8936;
 }
+.simulation-controls__backend-type--real {
+  background: rgba(160, 174, 192, 0.2);
+  color: #a0aec0;
+}
 .simulation-controls__backend-desc {
   margin: 0;
   font-size: 0.75rem;
@@ -2423,7 +2465,7 @@ function SimulationControls({
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [shots, setShots] = useState(1024);
   const [backends, setBackends] = useState([]);
-  const [selectedBackendId, setSelectedBackendId] = useState("ideal");
+  const [selectedBackendId, setSelectedBackendId] = useState("");
   const [isLoadingBackends, setIsLoadingBackends] = useState(false);
   const [backendError, setBackendError] = useState(false);
   useEffect(() => {
@@ -2431,8 +2473,13 @@ function SimulationControls({
       setIsLoadingBackends(true);
       setBackendError(false);
       adapter.getBackends().then((result) => {
-        setBackends(result);
-        if (result.length === 1 && result[0].id === "ideal" && !canSimulate) {
+        const nonIdealBackends = result.filter((b) => b.backend_type !== "ideal");
+        setBackends(nonIdealBackends);
+        const firstFake = nonIdealBackends.find((b) => b.backend_type === "noisy_fake");
+        if (firstFake) {
+          setSelectedBackendId(firstFake.id);
+        }
+        if (nonIdealBackends.length === 0 && !canSimulate) {
           setBackendError(true);
         }
       }).finally(() => setIsLoadingBackends(false));
@@ -2440,13 +2487,10 @@ function SimulationControls({
   }, [isDialogOpen, adapter, canSimulate]);
   const selectedBackend = backends.find((b) => b.id === selectedBackendId);
   const buildProfile = () => {
-    if (!selectedBackend || selectedBackend.backend_type === "ideal") {
-      return { type: "ideal" };
+    if (!selectedBackend || selectedBackend.backend_type === "noisy_fake") {
+      return selectedBackend ? { type: "noisy_fake", backend_name: selectedBackend.id } : void 0;
     }
-    return {
-      type: "noisy_fake",
-      backend_name: selectedBackend.id
-    };
+    return void 0;
   };
   const handleRun = async () => {
     if (circuit.gates.length === 0) {
@@ -2533,31 +2577,35 @@ function SimulationControls({
               /* @__PURE__ */ jsx("p", { className: "simulation-controls__error-title", children: "Backend unavailable" }),
               /* @__PURE__ */ 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__ */ jsx("div", { className: "simulation-controls__backend-list", children: backends.map((backend) => /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              className: `simulation-controls__backend-item ${selectedBackendId === backend.id ? "simulation-controls__backend-item--selected" : ""}`,
-              onClick: () => setSelectedBackendId(backend.id),
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "simulation-controls__backend-item-content", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "simulation-controls__backend-item-header", children: [
-                    /* @__PURE__ */ jsx("span", { className: "simulation-controls__backend-name", children: backend.name }),
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: `simulation-controls__backend-type simulation-controls__backend-type--${backend.backend_type}`,
-                        children: backend.backend_type === "ideal" ? "Ideal" : "Noisy"
-                      }
-                    )
+          ] }) : /* @__PURE__ */ jsx("div", { className: "simulation-controls__backend-list", children: backends.map((backend) => {
+            const isReal = backend.backend_type === "real";
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: `simulation-controls__backend-item ${selectedBackendId === backend.id ? "simulation-controls__backend-item--selected" : ""} ${isReal ? "simulation-controls__backend-item--disabled" : ""}`,
+                onClick: () => !isReal && setSelectedBackendId(backend.id),
+                disabled: isReal,
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "simulation-controls__backend-item-content", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "simulation-controls__backend-item-header", children: [
+                      /* @__PURE__ */ jsx("span", { className: "simulation-controls__backend-name", children: backend.name }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: `simulation-controls__backend-type simulation-controls__backend-type--${backend.backend_type}`,
+                          children: backend.backend_type === "noisy_fake" ? "Noisy" : "Real"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx("p", { className: "simulation-controls__backend-desc", children: isReal ? "Coming soon" : backend.description || `${backend.num_qubits} qubits` })
                   ] }),
-                  /* @__PURE__ */ jsx("p", { className: "simulation-controls__backend-desc", children: backend.description || `${backend.num_qubits} qubits` })
-                ] }),
-                selectedBackendId === backend.id && /* @__PURE__ */ jsx("span", { className: "simulation-controls__backend-check", children: /* @__PURE__ */ jsx(CheckIcon, {}) })
-              ]
-            },
-            backend.id
-          )) })
+                  selectedBackendId === backend.id && /* @__PURE__ */ jsx("span", { className: "simulation-controls__backend-check", children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+                ]
+              },
+              backend.id
+            );
+          }) })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "simulation-controls__dialog-footer", children: [

package/dist/visualization.cjs

@@ -319,6 +319,38 @@ function QamposerProvider({
   react.useEffect(() => {
     adapter.isAvailable().then(setCanSimulate);
   }, [adapter]);
+  const autoSimRequestId = react.useRef(0);
+  react.useEffect(() => {
+    if (!canSimulate || circuit.gates.length === 0) {
+      if (circuit.gates.length === 0) {
+        setResult(null);
+      }
+      return;
+    }
+    const requestId = ++autoSimRequestId.current;
+    setStatus("simulating");
+    setError(null);
+    const request = {
+      qubits: circuit.qubits,
+      gates: circuit.gates.map(({ id: _, ...gate }) => gate),
+      shots: 1024,
+      profile: { type: "ideal" }
+    };
+    adapter.simulate(request).then((simulationResult) => {
+      if (autoSimRequestId.current !== requestId) return;
+      setResult(simulationResult);
+      setStatus("idle");
+      onSimulationComplete?.({
+        result: simulationResult,
+        circuit: { ...circuit },
+        qasm: circuitToQasm(circuit)
+      });
+    }).catch((err) => {
+      if (autoSimRequestId.current !== requestId) return;
+      setError(err instanceof Error ? err : new Error(String(err)));
+      setStatus("error");
+    });
+  }, [circuit, canSimulate, adapter, onSimulationComplete]);
   const addGate = react.useCallback(
     (gate) => {
       if (circuit.gates.length >= config.maxGates) {
@@ -488,6 +520,7 @@ function QamposerProvider({
   }, [circuit]);
   const simulate = react.useCallback(
     async (shots = 1024, profile) => {
+      autoSimRequestId.current++;
       if (!canSimulate) {
         throw new Error("Simulation adapter is not available");
       }
@@ -2999,6 +3032,11 @@ var css6 = `.simulation-controls__run-btn {
   border-color: var(--qamposer-accent, #4285f4);
   background: rgba(66, 133, 244, 0.1);
 }
+.simulation-controls__backend-item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
 .simulation-controls__backend-item-content {
   flex: 1;
   min-width: 0;
@@ -3030,6 +3068,10 @@ var css6 = `.simulation-controls__run-btn {
   background: rgba(237, 137, 54, 0.2);
   color: #ed8936;
 }
+.simulation-controls__backend-type--real {
+  background: rgba(160, 174, 192, 0.2);
+  color: #a0aec0;
+}
 .simulation-controls__backend-desc {
   margin: 0;
   font-size: 0.75rem;
@@ -3121,7 +3163,7 @@ function SimulationControls({
   const [isDialogOpen, setIsDialogOpen] = react.useState(false);
   const [shots, setShots] = react.useState(1024);
   const [backends, setBackends] = react.useState([]);
-  const [selectedBackendId, setSelectedBackendId] = react.useState("ideal");
+  const [selectedBackendId, setSelectedBackendId] = react.useState("");
   const [isLoadingBackends, setIsLoadingBackends] = react.useState(false);
   const [backendError, setBackendError] = react.useState(false);
   react.useEffect(() => {
@@ -3129,8 +3171,13 @@ function SimulationControls({
       setIsLoadingBackends(true);
       setBackendError(false);
       adapter.getBackends().then((result) => {
-        setBackends(result);
-        if (result.length === 1 && result[0].id === "ideal" && !canSimulate) {
+        const nonIdealBackends = result.filter((b) => b.backend_type !== "ideal");
+        setBackends(nonIdealBackends);
+        const firstFake = nonIdealBackends.find((b) => b.backend_type === "noisy_fake");
+        if (firstFake) {
+          setSelectedBackendId(firstFake.id);
+        }
+        if (nonIdealBackends.length === 0 && !canSimulate) {
           setBackendError(true);
         }
       }).finally(() => setIsLoadingBackends(false));
@@ -3138,13 +3185,10 @@ function SimulationControls({
   }, [isDialogOpen, adapter, canSimulate]);
   const selectedBackend = backends.find((b) => b.id === selectedBackendId);
   const buildProfile = () => {
-    if (!selectedBackend || selectedBackend.backend_type === "ideal") {
-      return { type: "ideal" };
+    if (!selectedBackend || selectedBackend.backend_type === "noisy_fake") {
+      return selectedBackend ? { type: "noisy_fake", backend_name: selectedBackend.id } : void 0;
     }
-    return {
-      type: "noisy_fake",
-      backend_name: selectedBackend.id
-    };
+    return void 0;
   };
   const handleRun = async () => {
     if (circuit.gates.length === 0) {
@@ -3231,31 +3275,35 @@ function SimulationControls({
               /* @__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("div", { className: "simulation-controls__backend-list", children: backends.map((backend) => {
+            const isReal = backend.backend_type === "real";
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                className: `simulation-controls__backend-item ${selectedBackendId === backend.id ? "simulation-controls__backend-item--selected" : ""} ${isReal ? "simulation-controls__backend-item--disabled" : ""}`,
+                onClick: () => !isReal && setSelectedBackendId(backend.id),
+                disabled: isReal,
+                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 === "noisy_fake" ? "Noisy" : "Real"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "simulation-controls__backend-desc", children: isReal ? "Coming soon" : backend.description || `${backend.num_qubits} qubits` })
                   ] }),
-                  /* @__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
-          )) })
+                  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: [

package/dist/visualization.d.cts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Q as QamposerProviderProps, T as Theme } from './index-BbUFQqpD.cjs';
+import { Q as QamposerProviderProps, T as Theme } from './index-BghK68a6.cjs';
 import 'react';
 
 interface QamposerProps extends Omit<QamposerProviderProps, 'children'> {

package/dist/visualization.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Q as QamposerProviderProps, T as Theme } from './index-BbUFQqpD.js';
+import { Q as QamposerProviderProps, T as Theme } from './index-BghK68a6.js';
 import 'react';
 
 interface QamposerProps extends Omit<QamposerProviderProps, 'children'> {

package/dist/visualization.js

@@ -313,6 +313,38 @@ function QamposerProvider({
   useEffect(() => {
     adapter.isAvailable().then(setCanSimulate);
   }, [adapter]);
+  const autoSimRequestId = useRef(0);
+  useEffect(() => {
+    if (!canSimulate || circuit.gates.length === 0) {
+      if (circuit.gates.length === 0) {
+        setResult(null);
+      }
+      return;
+    }
+    const requestId = ++autoSimRequestId.current;
+    setStatus("simulating");
+    setError(null);
+    const request = {
+      qubits: circuit.qubits,
+      gates: circuit.gates.map(({ id: _, ...gate }) => gate),
+      shots: 1024,
+      profile: { type: "ideal" }
+    };
+    adapter.simulate(request).then((simulationResult) => {
+      if (autoSimRequestId.current !== requestId) return;
+      setResult(simulationResult);
+      setStatus("idle");
+      onSimulationComplete?.({
+        result: simulationResult,
+        circuit: { ...circuit },
+        qasm: circuitToQasm(circuit)
+      });
+    }).catch((err) => {
+      if (autoSimRequestId.current !== requestId) return;
+      setError(err instanceof Error ? err : new Error(String(err)));
+      setStatus("error");
+    });
+  }, [circuit, canSimulate, adapter, onSimulationComplete]);
   const addGate = useCallback(
     (gate) => {
       if (circuit.gates.length >= config.maxGates) {
@@ -482,6 +514,7 @@ function QamposerProvider({
   }, [circuit]);
   const simulate = useCallback(
     async (shots = 1024, profile) => {
+      autoSimRequestId.current++;
       if (!canSimulate) {
         throw new Error("Simulation adapter is not available");
       }
@@ -2993,6 +3026,11 @@ var css6 = `.simulation-controls__run-btn {
   border-color: var(--qamposer-accent, #4285f4);
   background: rgba(66, 133, 244, 0.1);
 }
+.simulation-controls__backend-item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
 .simulation-controls__backend-item-content {
   flex: 1;
   min-width: 0;
@@ -3024,6 +3062,10 @@ var css6 = `.simulation-controls__run-btn {
   background: rgba(237, 137, 54, 0.2);
   color: #ed8936;
 }
+.simulation-controls__backend-type--real {
+  background: rgba(160, 174, 192, 0.2);
+  color: #a0aec0;
+}
 .simulation-controls__backend-desc {
   margin: 0;
   font-size: 0.75rem;
@@ -3115,7 +3157,7 @@ function SimulationControls({
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [shots, setShots] = useState(1024);
   const [backends, setBackends] = useState([]);
-  const [selectedBackendId, setSelectedBackendId] = useState("ideal");
+  const [selectedBackendId, setSelectedBackendId] = useState("");
   const [isLoadingBackends, setIsLoadingBackends] = useState(false);
   const [backendError, setBackendError] = useState(false);
   useEffect(() => {
@@ -3123,8 +3165,13 @@ function SimulationControls({
       setIsLoadingBackends(true);
       setBackendError(false);
       adapter.getBackends().then((result) => {
-        setBackends(result);
-        if (result.length === 1 && result[0].id === "ideal" && !canSimulate) {
+        const nonIdealBackends = result.filter((b) => b.backend_type !== "ideal");
+        setBackends(nonIdealBackends);
+        const firstFake = nonIdealBackends.find((b) => b.backend_type === "noisy_fake");
+        if (firstFake) {
+          setSelectedBackendId(firstFake.id);
+        }
+        if (nonIdealBackends.length === 0 && !canSimulate) {
           setBackendError(true);
         }
       }).finally(() => setIsLoadingBackends(false));
@@ -3132,13 +3179,10 @@ function SimulationControls({
   }, [isDialogOpen, adapter, canSimulate]);
   const selectedBackend = backends.find((b) => b.id === selectedBackendId);
   const buildProfile = () => {
-    if (!selectedBackend || selectedBackend.backend_type === "ideal") {
-      return { type: "ideal" };
+    if (!selectedBackend || selectedBackend.backend_type === "noisy_fake") {
+      return selectedBackend ? { type: "noisy_fake", backend_name: selectedBackend.id } : void 0;
     }
-    return {
-      type: "noisy_fake",
-      backend_name: selectedBackend.id
-    };
+    return void 0;
   };
   const handleRun = async () => {
     if (circuit.gates.length === 0) {
@@ -3225,31 +3269,35 @@ function SimulationControls({
               /* @__PURE__ */ jsx("p", { className: "simulation-controls__error-title", children: "Backend unavailable" }),
               /* @__PURE__ */ 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__ */ jsx("div", { className: "simulation-controls__backend-list", children: backends.map((backend) => /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              className: `simulation-controls__backend-item ${selectedBackendId === backend.id ? "simulation-controls__backend-item--selected" : ""}`,
-              onClick: () => setSelectedBackendId(backend.id),
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "simulation-controls__backend-item-content", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "simulation-controls__backend-item-header", children: [
-                    /* @__PURE__ */ jsx("span", { className: "simulation-controls__backend-name", children: backend.name }),
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: `simulation-controls__backend-type simulation-controls__backend-type--${backend.backend_type}`,
-                        children: backend.backend_type === "ideal" ? "Ideal" : "Noisy"
-                      }
-                    )
+          ] }) : /* @__PURE__ */ jsx("div", { className: "simulation-controls__backend-list", children: backends.map((backend) => {
+            const isReal = backend.backend_type === "real";
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: `simulation-controls__backend-item ${selectedBackendId === backend.id ? "simulation-controls__backend-item--selected" : ""} ${isReal ? "simulation-controls__backend-item--disabled" : ""}`,
+                onClick: () => !isReal && setSelectedBackendId(backend.id),
+                disabled: isReal,
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "simulation-controls__backend-item-content", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "simulation-controls__backend-item-header", children: [
+                      /* @__PURE__ */ jsx("span", { className: "simulation-controls__backend-name", children: backend.name }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: `simulation-controls__backend-type simulation-controls__backend-type--${backend.backend_type}`,
+                          children: backend.backend_type === "noisy_fake" ? "Noisy" : "Real"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx("p", { className: "simulation-controls__backend-desc", children: isReal ? "Coming soon" : backend.description || `${backend.num_qubits} qubits` })
                   ] }),
-                  /* @__PURE__ */ jsx("p", { className: "simulation-controls__backend-desc", children: backend.description || `${backend.num_qubits} qubits` })
-                ] }),
-                selectedBackendId === backend.id && /* @__PURE__ */ jsx("span", { className: "simulation-controls__backend-check", children: /* @__PURE__ */ jsx(CheckIcon, {}) })
-              ]
-            },
-            backend.id
-          )) })
+                  selectedBackendId === backend.id && /* @__PURE__ */ jsx("span", { className: "simulation-controls__backend-check", children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+                ]
+              },
+              backend.id
+            );
+          }) })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "simulation-controls__dialog-footer", children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qamposer/react",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "React components for quantum circuit composition",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -26,8 +26,7 @@
         "types": "./dist/visualization.d.cts",
         "default": "./dist/visualization.cjs"
       }
-    },
-    "./styles.css": "./dist/styles.css"
+    }
   },
   "files": [
     "dist"
@@ -77,6 +76,7 @@
     "eslint": "^9.39.2",
     "eslint-plugin-react-hooks": "^7.0.1",
     "happy-dom": "^20.4.0",
+    "prettier": "^3.8.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "sass": "^1.97.1",