Create modeling provider, move engine management to it

src/App.tsx

@@ -1,10 +1,4 @@
-import {
-  useRef,
-  useEffect,
-  useLayoutEffect,
-  useCallback,
-  MouseEventHandler,
-} from 'react'
+import { useEffect, useCallback, MouseEventHandler } from 'react'
 import { DebugPanel } from './components/DebugPanel'
 import { v4 as uuidv4 } from 'uuid'
 import { asyncParser } from './lang/abstractSyntaxTree'
@@ -16,10 +10,7 @@ import { MemoryPanel } from './components/MemoryPanel'
 import { useHotKeyListener } from './hooks/useHotKeyListener'
 import { Stream } from './components/Stream'
 import ModalContainer from 'react-modal-promise'
-import {
-  EngineCommand,
-  EngineCommandManager,
-} from './lang/std/engineConnection'
+import { EngineCommand } from './lang/std/engineConnection'
 import { throttle } from './lib/utils'
 import { AppHeader } from './components/AppHeader'
 import { KCLError } from './lang/errors'
@@ -41,14 +32,10 @@ import { CameraDragInteractionType_type } from '@kittycad/lib/dist/types/src/mod
 import { CodeMenu } from 'components/CodeMenu'
 import { TextEditor } from 'components/TextEditor'
 import { Themes, getSystemTheme } from 'lib/theme'
-import { useEngineWithStream } from 'hooks/useEngineWithStream'
 
 export function App() {
   const { code: loadedCode, project } = useLoaderData() as IndexLoaderData
 
-  const streamRef = useRef<HTMLDivElement>(null)
-  useEngineWithStream(streamRef)
-
   useHotKeyListener()
   const {
     addLog,
@@ -302,11 +289,7 @@ export function App() {
   }
 
   return (
-    <div
-      className="h-screen overflow-hidden relative flex flex-col cursor-pointer select-none"
-      onMouseMove={handleMouseMove}
-      ref={streamRef}
-    >
+    <div className='relative h-full flex flex-col' onMouseMove={handleMouseMove}>
       <AppHeader
         className={
           'transition-opacity transition-duration-75 ' +

src/Router.tsx

@@ -40,6 +40,7 @@ import { ContextFrom } from 'xstate'
 import CommandBarProvider from 'components/CommandBar'
 import { TEST, VITE_KC_SENTRY_DSN } from './env'
 import * as Sentry from '@sentry/react'
+import ModelingMachineProvider from 'components/ModelingMachineProvider'
 
 if (VITE_KC_SENTRY_DSN && !TEST) {
   Sentry.init({
@@ -136,7 +137,9 @@ const router = createBrowserRouter(
       element: (
         <Auth>
           <Outlet />
+          <ModelingMachineProvider>
           <App />
+          </ModelingMachineProvider>
           {!isTauri() && import.meta.env.PROD && <DownloadAppBanner />}
         </Auth>
       ),

src/components/ModelingMachineProvider.tsx

@@ -0,0 +1,79 @@
+import { useMachine } from '@xstate/react'
+import { paths } from '../Router'
+import React, { createContext, useEffect, useRef } from 'react'
+import { setThemeClass, Themes } from 'lib/theme'
+import {
+  AnyStateMachine,
+  ContextFrom,
+  InterpreterFrom,
+  Prop,
+  StateFrom,
+} from 'xstate'
+import { MODELING_PERSIST_KEY, modelingMachine } from 'machines/modelingMachine'
+import { useEngineWithStream } from 'hooks/useEngineWithStream'
+
+type MachineContext<T extends AnyStateMachine> = {
+  state: StateFrom<T>
+  context: ContextFrom<T>
+  send: Prop<InterpreterFrom<T>, 'send'>
+}
+
+export const ModelingMachineContext = createContext(
+  {} as MachineContext<typeof modelingMachine>
+)
+
+export const ModelingMachineProvider = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  const streamRef = useRef<HTMLDivElement>(null)
+  useEngineWithStream(streamRef)
+
+  // const { commands } = useCommandsContext()
+
+  // Settings machine setup
+  // const retrievedSettings = useRef(
+  // localStorage?.getItem(MODELING_PERSIST_KEY) || '{}'
+  // )
+
+  // What should we persist from modeling state? Nothing?
+  // const persistedSettings = Object.assign(
+  //   settingsMachine.initialState.context,
+  //   JSON.parse(retrievedSettings.current) as Partial<
+  //     (typeof settingsMachine)['context']
+  //   >
+  // )
+
+  // const [modelingState, modelingSend] = useMachine(modelingMachine, {
+  //   // context: persistedSettings,
+  //   actions: {},
+  // })
+
+  // useStateMachineCommands({
+  //   state: settingsState,
+  //   send: settingsSend,
+  //   commands,
+  //   owner: 'settings',
+  //   commandBarMeta: settingsCommandBarMeta,
+  // })
+
+  return (
+    // <ModelingMachineContext.Provider
+    //   value={{
+    //     state: modelingState,
+    //     context: modelingState.context,
+    //     send: modelingSend,
+    //   }}
+    // >
+    <div
+      className="h-screen overflow-hidden select-none"
+      ref={streamRef}
+    >
+      {children}
+    </div>
+    // </ModelingMachineContext.Provider>
+  )
+}
+
+export default ModelingMachineProvider

src/components/Stream.tsx

@@ -180,7 +180,7 @@ export const Stream = ({ className = '' }) => {
         onWheel={handleScroll}
         onPlay={() => setIsLoading(false)}
         onMouseMoveCapture={handleMouseMove}
-        className={`w-full h-full ${isExecuting && 'blur-md'}`}
+        className={`w-full cursor-pointer h-full ${isExecuting && 'blur-md'}`}
         style={{ transitionDuration: '200ms', transitionProperty: 'filter' }}
       />
       {isLoading && (