add yaml config format (🪨 STONE)

.cursorignore

@@ -0,0 +1,2 @@
+example_config.yaml  # Add directories or file patterns to ignore during indexing (e.g. foo/ or *.csv)
+*.yaml

README.md

@@ -11,7 +11,7 @@ A web-based tool for visually constructing and simulating Cantera ReactorNet sys
 - Support for flow devices (MassFlowController, Valve)
 - Real-time property editing
 - Simulation capabilities with time-series plots
-- JSON configuration import/export
+- YAML configuration files with 🪨 STONE standard (elegant format)
 
 ![screenshot](https://private-user-images.githubusercontent.com/16088743/452821416-9d904892-a17c-4c60-8efa-c2aa7abf7da8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDk0NjYzMDUsIm5iZiI6MTc0OTQ2NjAwNSwicGF0aCI6Ii8xNjA4ODc0My80NTI4MjE0MTYtOWQ5MDQ4OTItYTE3Yy00YzYwLThlZmEtYzJhYTdhYmY3ZGE4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTA2MDklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwNjA5VDEwNDY0NVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWE5NTAzYzllYjVhODc2Njc1ZWM5N2NiODBkMjMxOWMwNmNjNzcyNDBlMThhY2U1YzlhMmFlZDVhOThhMzQ1ODYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.P-wD297SHbNk1nuTgsBof3vmKukntOBWRnpgi7e774o)
 
@@ -42,37 +42,37 @@ pip install -e .         # install in editable mode
    - Run simulations
    - View results
 
-## Configuration Format
-
-The application uses a JSON-based configuration format:
-
-```json
-{
-  "components": [
-    {
-      "id": "reactor1",
-      "type": "IdealGasReactor",
-      "properties": {
-        "temperature": 1000,
-        "pressure": 101325,
-        "composition": "CH4:1,O2:2,N2:7.52"
-      }
-    }
-  ],
-  "connections": [
-    {
-      "id": "mfc1",
-      "type": "MassFlowController",
-      "source": "res1",
-      "target": "reactor1",
-      "properties": {
-        "mass_flow_rate": 0.1
-      }
-    }
-  ]
-}
+## YAML Configuration with 🪨 STONE Standard
+
+Boulder uses **YAML format with 🪨 STONE standard** (**Structured Type-Oriented Network Expressions**) - an elegant configuration format where component types become keys containing their properties:
+
+```yaml
+metadata:
+  name: "Reactor Configuration"
+  version: "1.0"
+
+simulation:
+  mechanism: "gri30.yaml"
+  time_step: 0.001
+  max_time: 10.0
+
+components:
+  - id: reactor1
+    IdealGasReactor:
+      temperature: 1000      # K
+      pressure: 101325       # Pa
+      composition: "CH4:1,O2:2,N2:7.52"
+
+connections:
+  - id: mfc1
+    MassFlowController:
+      mass_flow_rate: 0.1    # kg/s
+    source: res1
+    target: reactor1
 ```
 
+See [`examples/README.md`](examples/README.md) for comprehensive YAML with 🪨 STONE standard documentation and examples.
+
 ## Supported Components
 
 ### Reactors

boulder/callbacks/clientside_callbacks.py

@@ -5,118 +5,6 @@
 
 def register_callbacks(app) -> None:  # type: ignore
     """Register client-side callbacks."""
-    # Custom edge creation from custom event
-    app.clientside_callback(
-        """
-        function(n_clicks) {
-            if (!window.cy) return null;
-
-            // Listen for the create-edge event
-            if (!window._edgeListenerAdded) {
-                window._edgeListenerAdded = true;
-                window.addEventListener('create-edge', function(e) {
-                    const { source, target } = e.detail;
-                    // Add the edge to Cytoscape
-                    window.cy.add({
-                        group: 'edges',
-                        data: {
-                            source: source,
-                            target: target,
-                            label: 'New Edge'  // You can customize this
-                        }
-                    });
-                });
-            }
-            return null;
-        }
-        """,
-        Output("reactor-graph", "tapEdgeData"),
-        Input("reactor-graph", "tapNode"),
-        prevent_initial_call=True,
-    )
-
-    # Setup client-side callback to handle edge creation
-    app.clientside_callback(
-        """
-        function(n_clicks) {
-            // This is a trigger to create an initial placeholder
-            return [];
-        }
-        """,
-        Output("hidden-edge-data", "children"),
-        Input("reactor-graph", "id"),
-        prevent_initial_call=True,
-    )
-
-    # Update the store when an edge is created
-    app.clientside_callback(
-        """
-        function(n_clicks) {
-            // Initialize event listener if not done already
-            if (!window.edgeEventInitialized) {
-                window.edgeEventInitialized = true;
-
-                document.addEventListener('edgeCreate', function(e) {
-                    if (e && e.detail) {
-                        console.log('Edge creation event received:', e.detail);
-                        // Update the store with new edge data
-                        window.dash_clientside.no_update = false;
-                        return e.detail;
-                    }
-                    return window.dash_clientside.no_update;
-                });
-            }
-
-            // Initially return no update
-            return window.dash_clientside.no_update;
-        }
-        """,
-        Output("edge-added-store", "data"),
-        Input("initialization-trigger", "children"),
-        prevent_initial_call=True,
-    )
-
-    # Edgehandles setup
-    app.clientside_callback(
-        """
-        function(n_intervals) {
-            if (window.edgehandles_setup_complete) {
-                return window.dash_clientside.no_update;
-            }
-            const cy = (
-                document.getElementById('reactor-graph') &&
-                document.getElementById('reactor-graph')._cyreg &&
-                document.getElementById('reactor-graph')._cyreg.cy
-            );
-            if (!cy || typeof cy.edgehandles !== 'function') {
-                console.log("Waiting for Cytoscape and the .edgehandles() function...");
-                return window.dash_clientside.no_update;
-            }
-            // --- One-time setup ---
-            window.boulder_edge_queue = [];
-            document.addEventListener('boulder_edge_created', e => {
-                window.boulder_edge_queue.push(e.detail);
-            });
-            const eh = cy.edgehandles({
-                preview: true, snap: true,
-                complete: (sourceNode, targetNode, addedEles) => {
-                    document.dispatchEvent(new CustomEvent('boulder_edge_created', {
-                        detail: { source: sourceNode.id(), target: targetNode.id(), ts: Date.now() }
-                    }));
-                }
-            });
-            document.addEventListener('keydown', e => { if (e.key === 'Shift') eh.enable(); });
-            document.addEventListener('keyup', e => { if (e.key === 'Shift') eh.disable(); });
-            eh.disable();
-            window.edgehandles_setup_complete = true;
-            console.log('Edgehandles initialized.');
-            return window.dash_clientside.no_update;
-        }
-        """,
-        Output("init-dummy-output", "children"),
-        Input("init-interval", "n_intervals"),
-    )
-
     # Keyboard shortcut for Ctrl+Enter
     app.clientside_callback(
         """
@@ -125,9 +13,14 @@ def register_callbacks(app) -> None:  # type: ignore
             window._boulder_keyboard_shortcut = true;
             document.addEventListener('keydown', function(e) {
                 if (e.ctrlKey && e.key === 'Enter') {
-                    // Check if Add Reactor modal is open
+                    // Check if Add Reactor modal is open and MFC modal is not
                     var addReactorModal = document.getElementById('add-reactor-modal');
-                    if (addReactorModal && addReactorModal.classList.contains('show')) {
+                    var addMFCModal = document.getElementById('add-mfc-modal');
+                    if (
+                        addReactorModal &&
+                        addReactorModal.classList.contains('show') &&
+                        (!addMFCModal || !addMFCModal.classList.contains('show'))
+                    ) {
                         var btn = document.getElementById('add-reactor');
                         if (btn && !btn.disabled) btn.click();
                     } else {