Collect structured errors from parsing/executing KCL (#187)

Currently, syntax/semantic errors in the user's source code result in vanilla JS exceptions being thrown, so they show up in the console. Instead, this PR:

- Adds a new type KCLError
- KCL syntax/semantic errors when parsing/executing the source code now throw KCLErrors instead of vanilla JS exceptions.
- KCL errors are caught and logged to a new "Errors" panel, instead of the browser console.

src/useStore.ts

@@ -20,6 +20,7 @@ import {
   SourceRangeMap,
   EngineCommandManager,
 } from './lang/std/engineConnection'
+import { KCLError } from './lang/errors'
 
 export type Selection = {
   type: 'default' | 'line-end' | 'line-mid'
@@ -122,6 +123,8 @@ export interface StoreState {
   setGuiMode: (guiMode: GuiModes) => void
   logs: string[]
   addLog: (log: string) => void
+  kclErrors: KCLError[]
+  addKCLError: (err: KCLError) => void
   resetLogs: () => void
   ast: Program | null
   setAst: (ast: Program | null) => void
@@ -251,6 +254,10 @@ export const useStore = create<StoreState>()(
           set((state) => ({ logs: [...state.logs, log] }))
         }
       },
+      kclErrors: [],
+      addKCLError: (e) => {
+        set((state) => ({ kclErrors: [...state.kclErrors, e] }))
+      },
       resetLogs: () => {
         set({ logs: [] })
       },