Fix: sim panel resizes workspace, tab clicks switch pages in canvas

templates/editor.html

@@ -55,9 +55,14 @@
   /* Right panel width */
   .gjs-pn-views-container{width:280px !important}
 
+  /* Main layout — editor + optional sim panel side by side */
+  .main-wrap{display:flex;height:calc(100vh - 48px)}
+  .editor-wrap{flex:1;overflow:hidden}
+  .editor-wrap #gjs{height:100% !important}
+
   /* Simulation toggle panel */
-  .sim-panel{position:fixed;right:0;top:48px;width:50%;height:calc(100vh - 48px);background:#080c14;border-left:2px solid var(--border);z-index:20;display:none;overflow:auto}
+  .sim-panel{width:0;overflow:hidden;background:#080c14;border-left:2px solid var(--border);transition:width 0.2s;flex-shrink:0}
-  .sim-panel.open{display:block}
+  .sim-panel.open{width:45%}
   .sim-panel-header{padding:8px 12px;background:var(--card);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;color:var(--text2)}
   .sim-panel-header button{padding:4px 10px;border:1px solid var(--border);border-radius:4px;background:var(--card);color:var(--text2);font-size:11px;cursor:pointer}
 </style>
@@ -86,17 +91,19 @@
   </div>
 </div>
 
-<!-- GRAPESJS EDITOR -->
+<!-- MAIN LAYOUT -->
-<div id="gjs"></div>
+<div class="main-wrap">
-
+  <div class="editor-wrap">
-<!-- SIMULATION PANEL (toggle) -->
+    <div id="gjs"></div>
-<div class="sim-panel" id="sim-panel">
+  </div>
+  <div class="sim-panel" id="sim-panel">
   <div class="sim-panel-header">
     MACHINE SIMULATION
     <button onclick="toggleSim()">Close</button>
   </div>
   <div id="sim-container" style="padding:16px;display:flex;align-items:center;justify-content:center;min-height:400px"></div>
-</div>
+  </div>
+</div><!-- /main-wrap -->
 
 <script src="static/vendor/grapes.min.js"></script>
 <script src="static/hmi-blocks.js"></script>
@@ -283,7 +290,44 @@ function switchTheme(theme) {
 // ══════════════════════════════════════════════════════
 function toggleSim() {
   document.getElementById('sim-panel').classList.toggle('open');
+  // Give GrapesJS time to see the resize, then refresh canvas
+  setTimeout(() => editor.refresh(), 300);
 }
+
+// Inject page-switching script into the canvas after components load
+editor.on('load', () => {
+  // Add script to make tab clicks switch pages inside the canvas
+  const script = `
+    document.addEventListener('click', function(e) {
+      var tab = e.target.closest('[style*="cursor:pointer"][style*="font-weight:600"]');
+      if (!tab || !tab.parentElement || tab.parentElement.children.length < 2) return;
+      // Check if it's in the tab bar
+      var bar = tab.parentElement;
+      if (!bar.style.cssText.includes('height:50px') && !bar.style.cssText.includes('height: 50px')) return;
+      // Get tab index
+      var tabs = Array.from(bar.children);
+      var idx = tabs.indexOf(tab);
+      if (idx < 0) return;
+      // Reset all tab styles
+      tabs.forEach(function(t) { t.style.color = '#7a8baa'; t.style.borderBottom = 'none'; });
+      tab.style.color = '#2d7ff9';
+      tab.style.borderBottom = '3px solid #2d7ff9';
+      // Show/hide pages
+      var pages = document.querySelectorAll('[data-page], [style*="flex-wrap:wrap"][style*="padding:8px"]');
+      var pageContainers = Array.from(pages).filter(function(p) { return p.style.cssText.includes('wrap') && p.style.cssText.includes('padding'); });
+      pageContainers.forEach(function(p, i) {
+        p.style.display = (i === idx) ? 'flex' : 'none';
+      });
+    });
+  `;
+  // Inject into canvas
+  const frame = editor.Canvas.getFrameEl();
+  if (frame && frame.contentDocument) {
+    const s = frame.contentDocument.createElement('script');
+    s.textContent = script;
+    frame.contentDocument.body.appendChild(s);
+  }
+});
 </script>
 </body>
 </html>