Add option to switch between automatic or manual compilation

src/components/EditorPanel.tsx

@@ -58,6 +58,12 @@ export default function EditorPanel({className, style}: {className?: string, sty
       label: "Preview OpenSCAD",
       run: () => model.render({isPreview: true, now: true})
     });
+    editor.addAction({
+      id: "openscad-build",
+      label: "Build (Preview)",
+      keybindings: [monaco.KeyCode.F5, monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
+      run: () => model.render({isPreview: true, now: true})
+    });
     editor.addAction({
       id: "openscad-save-do-nothing",
       label: "Save (disabled)",
@@ -127,9 +133,6 @@ export default function EditorPanel({className, style}: {className?: string, sty
           {
             separator: true
           },
-          {
-            separator: true
-          },
           {
             label: 'Select All',
             icon: 'pi pi-info-circle',

src/components/PanelSwitcher.tsx

@@ -4,6 +4,7 @@ import React, { useContext } from 'react';
 import { SingleLayoutComponentId } from '../state/app-state.ts'
 import { TabMenu } from 'primereact/tabmenu';
 import { ToggleButton } from 'primereact/togglebutton';
+import { Button } from 'primereact/button';
 import { ModelContext } from './contexts.ts';
 
 export default function PanelSwitcher() {
@@ -21,6 +22,23 @@ export default function PanelSwitcher() {
   }
   const multiTargets = singleTargets;
 
+  const autoCompileEnabled = state.view.autoCompile !== false;
+
+  const createMenuItems = () => {
+    const items = singleTargets.map(({icon, label, id}) => 
+      ({icon, label, command: () => model.changeSingleVisibility(id)}));
+
+    if (!autoCompileEnabled) {
+      items.push({
+        icon: 'pi pi-play',
+        label: 'Build',
+        command: () => model.render({isPreview: true, now: true}),
+      });
+    }
+
+    return items;
+  };
+
   return (
     <div className="">
       <div className='flex flex-row' style={{
@@ -29,11 +47,12 @@ export default function PanelSwitcher() {
       }}>
 
         {state.view.layout.mode === 'multi'
-          ?   <div className='flex flex-row gap-1' style={{
-            justifyContent: 'center',
-            flex: 1,
-            margin: '5px'
-          }}>
+          ?   <>
+              <div className='flex flex-row gap-1' style={{
+                justifyContent: 'center',
+                flex: 1,
+                margin: '5px'
+              }}>
                 {multiTargets.map(({icon, label, id}) => 
                   <ToggleButton
                     key={id}
@@ -45,15 +64,27 @@ export default function PanelSwitcher() {
                     onChange={e => model.changeMultiVisibility(id, e.value)}
                     />
                   )}
+                  {!autoCompileEnabled && (
+                    <Button
+                      label="Build"
+                      icon="pi pi-play"
+                      title="Build (Ctrl+Enter)"
+                      onClick={() => model.render({isPreview: true, now: true})}
+                      loading={state.previewing || state.rendering}
+                      style={{
+                        marginRight: '5px',
+                      }}
+                    />
+                  )}
               </div>
+            </>
           :   <>
                 <TabMenu
                   activeIndex={singleTargets.map(t => t.id).indexOf(state.view.layout.focus)}
                   style={{
                     flex: 1,
                   }}
-                  model={singleTargets.map(({icon, label, id}) => 
-                  ({icon, label, command: () => model.changeSingleVisibility(id)}))} />
+                  model={createMenuItems()} />
               </>
         }
       </div>

src/components/SettingsMenu.tsx

@@ -40,6 +40,11 @@ export default function SettingsMenu({className, style}: {className?: string, st
           // disabled: true,
           command: () => model.mutate(s => s.view.lineNumbers = !s.view.lineNumbers)
         },
+        {
+          label: state.view.autoCompile !== false ? 'Enable manual compile' : 'Enable auto compile',
+          icon: 'pi pi-play',
+          command: () => model.mutate(s => s.view.autoCompile = !(s.view.autoCompile !== false))
+        },
         ...(isInStandaloneMode() ? [
           {
             separator: true

src/state/app-state.ts

@@ -4,7 +4,7 @@ import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 import { ParameterSet } from './customizer-types.ts';
 import { VALID_EXPORT_FORMATS_2D, VALID_EXPORT_FORMATS_3D } from './formats.ts';
 
-export type MultiLayoutComponentId = 'editor' | 'viewer' | 'customizer';
+export type MultiLayoutComponentId = 'editor' | 'viewer' | 'customizer' | 'build';
 export type SingleLayoutComponentId = MultiLayoutComponentId;
 
 export type Source = {
@@ -56,6 +56,7 @@ export interface State {
     color: string,
     showAxes?: boolean,
     lineNumbers?: boolean,
+    autoCompile?: boolean,
   }
 
   currentRunLogs?: ['stderr'|'stdout', string][],

src/state/model.ts

@@ -176,7 +176,9 @@ export class Model {
         s.params.sources = s.params.sources.map(src => src.path === s.params.activePath ? {...src, content} : src);
       });
     }
-    if (this.source.trim() !== '') {
+    // Only auto-compile if autoCompile is enabled (defaults to true for backward compatibility)
+    const autoCompile = this.state.view.autoCompile !== false;
+    if (this.source.trim() !== '' && autoCompile) {
       if (this.state.params.activePath.endsWith('.scad')) {
         this.checkSyntax();
       }