Add styling and resizers

project/app.py

@@ -126,8 +126,6 @@ def execute_blockly_logic(user_inputs):
 
 def build_interface():
     with gr.Blocks() as demo:
-        gr.Markdown("# Blockly Code Executor")
-        
         # Create a fixed number of potential input fields (max 10)
         input_fields = []
         input_labels = []

project/src/index.css

@@ -1,56 +1,228 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 html,
 body {
   height: 100%;
-  margin: 0;
-  padding: 0;
-  max-width: 100vw;
+  width: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  overflow: hidden;
+}
+
+/* --- Top Bar --- */
+#topBar {
+  display: flex;
+  align-items: center;
+  height: 50px;
+  background: #6366f1;
+  padding: 0 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+}
+
+#titleSection {
+  display: flex;
+  align-items: center;
+}
+
+#titleSection h1 {
+  font-size: 20px;
+  font-weight: 600;
+  color: white;
+  letter-spacing: 0.5px;
+}
+
+#divider {
+  width: 2px;
+  height: 30px;
+  background: rgba(255, 255, 255, 0.3);
+  margin: 0 20px;
+}
+
+/* --- Menus --- */
+#menuSection {
+  display: flex;
+  gap: 5px;
+}
+
+.menuGroup {
+  position: relative;
+}
+
+.menuButton {
+  background: rgba(255, 255, 255, 0.15);
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  backdrop-filter: blur(10px);
+}
+
+.menuButton:hover {
+  background: rgba(255, 255, 255, 0.25);
+  border-color: rgba(255, 255, 255, 0.3);
+  transform: translateY(-1px);
+}
+
+.menuButton:active {
+  transform: translateY(0);
+}
+
+.dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: white;
+  border-radius: 6px;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+  min-width: 150px;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-8px);
+  transition: all 0.2s ease;
+  margin-top: 4px;
+  z-index: 2000;
+}
+
+.menuGroup:hover .dropdown,
+.dropdown:hover {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.dropdownItem {
+  display: block;
+  padding: 12px 16px;
+  color: #333;
+  text-decoration: none;
+  font-size: 14px;
+  transition: all 0.15s ease;
+  border-left: 3px solid transparent;
+}
+
+.dropdownItem:first-child {
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+}
+
+.dropdownItem:last-child {
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
+.dropdownItem:hover {
+  background: #f0f2f5;
+  border-left-color: #667eea;
+  padding-left: 20px;
 }
 
+.dropdownItem:active {
+  background: #e8ebf0;
+}
+
+/* --- Main Split Layout --- */
 #pageContainer {
   display: flex;
   width: 100%;
-  height: 100%;
+  height: calc(100% - 50px);
   overflow: hidden;
 }
 
-#blocklyDiv {
-  flex: 1;
-  min-width: 600px;
-  height: 100%;
+#pageContainer.dragging {
+  user-select: none;
+  cursor: col-resize;
 }
 
+/* --- Add dark grey padding around Gradio + Code --- */
 #outputPane {
+  flex: 0 0 30%;
+  background: #2c2c2c;
+  /* dark grey background around both sections */
+  padding: 16px;
+  /* padding around the inside */
+  gap: 16px;
+  /* space between iframe and code */
   display: flex;
   flex-direction: column;
-  width: 600px;
-  flex-shrink: 0;
-  height: 100%;
-  overflow: hidden;
-  padding: 1rem;
   box-sizing: border-box;
 }
 
+/* Add matching background to the Gradio frame container */
 #chatContainer {
-  flex: 0 0 400px;
-  /* fixed height for iframe area */
-  width: 100%;
+  background: #2c2c2c;
+  border: none;
+  flex: 0 0 50%;
+  box-sizing: border-box;
 }
 
+/* Slightly inset the Gradio iframe */
 #chatContainer iframe {
+  border-radius: 6px;
+  overflow: hidden;
   width: 100%;
   height: 100%;
   border: none;
-  display: block;
 }
 
+/* Style the code area with matching margin and contrast */
 #generatedCode {
+  background: #1f1f1f;
+  color: #e0e7ff;
+  border-radius: 6px;
+  padding: 16px;
+  box-sizing: border-box;
   flex: 1;
-  background: #111;
-  color: #0f0;
-  padding: 10px;
-  font-family: monospace;
-  white-space: pre-wrap;
   overflow-y: auto;
-  border: 1px solid #333;
-  margin-top: 10px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+  white-space: pre-wrap;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+/* --- Vertical Resizer --- */
+.verticalResizer {
+  height: 8px;
+  background: #e5e7eb;
+  cursor: row-resize;
+  transition: background 0.2s ease;
+  flex-shrink: 0;
+  z-index: 1500;
+}
+
+.verticalResizer:hover,
+.verticalResizer.active {
+  background: #6366f1;
+}
+
+/* --- Resizer --- */
+.resizer {
+  width: 8px;
+  background: #e5e7eb;
+  cursor: col-resize;
+  transition: background 0.2s ease;
+  flex-shrink: 0;
+  z-index: 1500;
+}
+
+.resizer:hover,
+.resizer.active {
+  background: #6366f1;
+}
+
+/* --- Right Pane --- */
+#blocklyDiv {
+  flex: 1;
+  min-width: 40%;
+  height: 100%;
+  overflow: hidden;
+  background: #fff;
 }

project/src/index.html

@@ -3,20 +3,152 @@
 
 <head>
   <meta charset="utf-8" />
-  <title>Blockly Sample App</title>
+  <title>Blockly MCP Builder</title>
 </head>
 
 <body>
+  <div id="topBar">
+    <div id="titleSection">
+      <h1>Blockly MCP Builder</h1>
+    </div>
+    <div id="divider"></div>
+    <div id="menuSection">
+      <div class="menuGroup">
+        <button class="menuButton">File</button>
+        <div class="dropdown">
+          <a href="#" class="dropdownItem" data-action="new">New</a>
+          <a href="#" class="dropdownItem" data-action="open">Open</a>
+          <a href="#" class="dropdownItem" data-action="download">Download</a>
+        </div>
+      </div>
+
+      <div class="menuGroup">
+        <button class="menuButton">Edit</button>
+        <div class="dropdown">
+          <a href="#" class="dropdownItem" data-action="undo">Undo</a>
+          <a href="#" class="dropdownItem" data-action="redo">Redo</a>
+          <a href="#" class="dropdownItem" data-action="cleanup">Clean up</a>
+          <a href="#" class="dropdownItem" data-action="clear">Clear</a>
+        </div>
+      </div>
+
+      <div class="menuGroup">
+        <button class="menuButton">Examples</button>
+        <div class="dropdown"></div>
+      </div>
+    </div>
+  </div>
+
   <div id="pageContainer">
     <div id="outputPane">
       <div id="chatContainer">
-        <iframe src="http://127.0.0.1:7860" style="width: 100%; height: 600px; border: none;"></iframe>
+        <iframe src="http://127.0.0.1:7860" style="width: 100%; height: 100%; border: none;"></iframe>
       </div>
-
+      <div class="verticalResizer"></div>
       <pre id="generatedCode"><code></code></pre>
     </div>
+    <div class="resizer"></div>
     <div id="blocklyDiv"></div>
   </div>
+
+  <script>
+    // Horizontal resizer (output pane vs blockly)
+    const resizer = document.querySelector('.resizer');
+    const outputPane = document.getElementById('outputPane');
+    const pageContainer = document.getElementById('pageContainer');
+
+    let startX = 0;
+    let startWidth = 0;
+
+    function onPointerMove(e) {
+      const containerRect = pageContainer.getBoundingClientRect();
+      const containerWidth = containerRect.width;
+
+      const dx = e.clientX - startX;
+      let newWidthPx = startWidth + dx;
+
+      const minWidth = containerWidth * 0.2;
+      const maxWidth = containerWidth * 0.59;
+      newWidthPx = Math.max(minWidth, Math.min(maxWidth, newWidthPx));
+
+      const newPercent = (newWidthPx / containerWidth) * 100;
+      outputPane.style.flex = `0 0 ${newPercent}%`;
+    }
+
+    function onPointerUp() {
+      resizer.releasePointerCapture(activePointerId);
+      resizer.removeEventListener('pointermove', onPointerMove);
+      resizer.removeEventListener('pointerup', onPointerUp);
+      resizer.classList.remove('active');
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    }
+
+    let activePointerId = null;
+
+    resizer.addEventListener('pointerdown', (e) => {
+      const rect = outputPane.getBoundingClientRect();
+      startX = e.clientX;
+      startWidth = rect.width;
+      activePointerId = e.pointerId;
+
+      resizer.classList.add('active');
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+
+      resizer.setPointerCapture(activePointerId);
+      resizer.addEventListener('pointermove', onPointerMove);
+      resizer.addEventListener('pointerup', onPointerUp);
+    });
+
+    // Vertical resizer (gradio vs code)
+    const verticalResizer = document.querySelector('.verticalResizer');
+    const chatContainer = document.getElementById('chatContainer');
+    const generatedCode = document.getElementById('generatedCode');
+
+    let startY = 0;
+    let startHeight = 0;
+    let activePointerId2 = null;
+
+    function onVerticalPointerMove(e) {
+      const outputPaneRect = outputPane.getBoundingClientRect();
+      const outputPaneHeight = outputPaneRect.height;
+
+      const dy = e.clientY - startY;
+      let newHeightPx = startHeight + dy;
+
+      const minHeight = outputPaneHeight * 0.4;
+      const maxHeight = outputPaneHeight * 0.78;
+      newHeightPx = Math.max(minHeight, Math.min(maxHeight, newHeightPx));
+
+      const newPercent = (newHeightPx / outputPaneHeight) * 100;
+      chatContainer.style.flex = `0 0 ${newPercent}%`;
+    }
+
+    function onVerticalPointerUp() {
+      verticalResizer.releasePointerCapture(activePointerId2);
+      verticalResizer.removeEventListener('pointermove', onVerticalPointerMove);
+      verticalResizer.removeEventListener('pointerup', onVerticalPointerUp);
+      verticalResizer.classList.remove('active');
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    }
+
+    verticalResizer.addEventListener('pointerdown', (e) => {
+      const rect = chatContainer.getBoundingClientRect();
+      startY = e.clientY;
+      startHeight = rect.height;
+      activePointerId2 = e.pointerId;
+
+      verticalResizer.classList.add('active');
+      document.body.style.cursor = 'row-resize';
+      document.body.style.userSelect = 'none';
+
+      verticalResizer.setPointerCapture(activePointerId2);
+      verticalResizer.addEventListener('pointermove', onVerticalPointerMove);
+      verticalResizer.addEventListener('pointerup', onVerticalPointerUp);
+    });
+  </script>
 </body>
 
 </html>

project/src/index.js

@@ -5,6 +5,7 @@ import { pythonGenerator } from 'blockly/python';
 import { save, load } from './serialization';
 import { toolbox } from './toolbox';
 import '@blockly/toolbox-search';
+import DarkTheme from '@blockly/theme-dark';
 import './index.css';
 
 // Register the blocks and generator with Blockly
@@ -14,32 +15,6 @@ Object.assign(pythonGenerator.forBlock, forBlock);
 // Set up UI elements and inject Blockly
 const blocklyDiv = document.getElementById('blocklyDiv');
 
-// Create a custom theme (Scratch-like colors and hats)
-const myTheme = Blockly.Theme.defineTheme('myScratchTheme', {
-  base: Blockly.Themes.Classic,
-  startHats: true,
-  blockStyles: {
-    logic_blocks: {
-      colourPrimary: '#5C81A6',
-      colourSecondary: '#4A6D8B',
-      colourTertiary: '#3B5572',
-    },
-    loop_blocks: {
-      colourPrimary: '#5CA65C',
-      colourSecondary: '#498949',
-      colourTertiary: '#3B723B',
-    },
-  },
-  categoryStyles: {
-    logic_category: { colour: '#5C81A6' },
-    loop_category: { colour: '#5CA65C' },
-  },
-  componentStyles: {
-    workspaceBackgroundColour: '#f0f0f0',
-    toolboxBackgroundColour: '#ffffff',
-  },
-});
-
 // Inject Blockly with theme + renderer
 const ws = Blockly.inject(blocklyDiv, {
   toolbox,
@@ -61,8 +36,16 @@ const ws = Blockly.inject(blocklyDiv, {
     pinch: true
   },
   renderer: 'zelos',
-  theme: myTheme,
+  theme: DarkTheme,
+});
+
+window.workspace = ws;
+
+// Observe any size change to the blockly container
+const observer = new ResizeObserver(() => {
+  Blockly.svgResize(ws);
 });
+observer.observe(blocklyDiv);
 
 const updateCode = () => {
   let code = pythonGenerator.workspaceToCode(ws);