Feat: eval button

src/App.svelte

@@ -34,6 +34,7 @@
     PanelLeftOpen,
     PanelRightOpen,
     CircleStop,
+    Play,
   } from "lucide-svelte";
 
   const appContext = createAppContext();
@@ -51,6 +52,7 @@
 
   let analyserNode = $state<AnalyserNode | null>(null);
   let interpreterLogs = $state<LogEntry[]>([]);
+  let editorWithLogsRef: EditorWithLogs;
 
   let logsUnsubscribe: (() => void) | undefined;
 
@@ -350,6 +352,15 @@
         <Share2 size={18} />
       </button>
     {/snippet}
+    <button
+      onclick={() => editorWithLogsRef?.triggerEvaluate()}
+      class="icon-button evaluate-button"
+      disabled={!$initialized}
+      class:is-running={$running}
+      title="Evaluate (Cmd-E)"
+    >
+      <Play size={18} />
+    </button>
     <button
       onclick={() => uiState.toggleScope()}
       class="icon-button"
@@ -405,6 +416,7 @@
 
     <div class="editor-area">
       <EditorWithLogs
+        bind:this={editorWithLogsRef}
         value={projectEditor.content}
         onChange={handleEditorChange}
         onExecute={handleExecute}
@@ -588,6 +600,14 @@
     border-color: var(--danger-hover);
   }
 
+  .icon-button.evaluate-button.is-running {
+    color: var(--accent-color);
+  }
+
+  .icon-button.evaluate-button.is-running:hover:not(:disabled) {
+    border-color: var(--accent-color);
+  }
+
   h3 {
     margin-top: 0;
     color: var(--text-color);

src/lib/components/editor/Editor.svelte

@@ -47,7 +47,7 @@
   const hoverTooltipCompartment = new Compartment();
   const themeCompartment = new Compartment();
 
-  function handleExecute() {
+  export function handleExecute() {
     if (!editorView) return;
 
     if (mode === 'composition') {

src/lib/components/editor/EditorWithLogs.svelte

@@ -22,8 +22,13 @@
     mode = 'composition'
   }: Props = $props();
 
+  let editorRef: Editor;
   let logPanelRef: LogPanel;
 
+  export function triggerEvaluate() {
+    editorRef?.handleExecute();
+  }
+
   let editorHeight = $state(70);
   let isResizing = $state(false);
   let startY = $state(0);
@@ -82,6 +87,7 @@
 <div class="editor-with-logs">
   <div class="editor-section" style="height: {editorHeight}%;">
     <Editor
+      bind:this={editorRef}
       {value}
       {onChange}
       {onExecute}