Add barebones modeling machine to app

Only implementing adding to code-based selections in the text editor so far

src/Router.tsx

@@ -138,7 +138,7 @@ const router = createBrowserRouter(
         <Auth>
           <Outlet />
           <ModelingMachineProvider>
-          <App />
+            <App />
           </ModelingMachineProvider>
           {!isTauri() && import.meta.env.PROD && <DownloadAppBanner />}
         </Auth>

src/components/ModelingMachineProvider.tsx

@@ -1,7 +1,5 @@
 import { useMachine } from '@xstate/react'
-import { paths } from '../Router'
-import React, { createContext, useEffect, useRef } from 'react'
-import { setThemeClass, Themes } from 'lib/theme'
+import React, { createContext, useRef } from 'react'
 import {
   AnyStateMachine,
   ContextFrom,
@@ -9,7 +7,7 @@ import {
   Prop,
   StateFrom,
 } from 'xstate'
-import { MODELING_PERSIST_KEY, modelingMachine } from 'machines/modelingMachine'
+import { modelingMachine } from 'machines/modelingMachine'
 import { useEngineWithStream } from 'hooks/useEngineWithStream'
 
 type MachineContext<T extends AnyStateMachine> = {
@@ -45,10 +43,34 @@ export const ModelingMachineProvider = ({
   //   >
   // )
 
-  // const [modelingState, modelingSend] = useMachine(modelingMachine, {
-  //   // context: persistedSettings,
-  //   actions: {},
-  // })
+  const [modelingState, modelingSend] = useMachine(modelingMachine, {
+    // context: persistedSettings,
+    actions: {
+      'Modify AST': () => {},
+      'Make selection horizontal': () => {},
+      'Make selection vertical': () => {},
+      'Update code selection cursors': () => {},
+    },
+    guards: {
+      'Can make selection horizontal': () => true,
+      'Can make selection vertical': () => true,
+      'Selection contains axis': () => true,
+      'Selection contains edge': () => true,
+      'Selection contains face': () => true,
+      'Selection contains line': () => true,
+      'Selection contains point': () => true,
+      'Selection is empty': () => true,
+      'Selection is not empty': () => true,
+      'Selection is one face': () => true,
+      'Selection is one or more edges': () => true,
+    },
+    services: {
+      createSketch: async () => {},
+      createLine: async () => {},
+      createExtrude: async () => {},
+      createFillet: async () => {},
+    },
+  })
 
   // useStateMachineCommands({
   //   state: settingsState,
@@ -59,20 +81,17 @@ export const ModelingMachineProvider = ({
   // })
 
   return (
-    // <ModelingMachineContext.Provider
-    //   value={{
-    //     state: modelingState,
-    //     context: modelingState.context,
-    //     send: modelingSend,
-    //   }}
-    // >
-    <div
-      className="h-screen overflow-hidden select-none"
-      ref={streamRef}
+    <ModelingMachineContext.Provider
+      value={{
+        state: modelingState,
+        context: modelingState.context,
+        send: modelingSend,
+      }}
     >
-      {children}
-    </div>
-    // </ModelingMachineContext.Provider>
+      <div className="h-screen overflow-hidden select-none" ref={streamRef}>
+        {children}
+      </div>
+    </ModelingMachineContext.Provider>
   )
 }
 

src/components/TextEditor.tsx

@@ -29,6 +29,7 @@ import {
 import { isOverlap } from 'lib/utils'
 import { kclErrToDiagnostic } from 'lang/errors'
 import { CSSRuleObject } from 'tailwindcss/types/config'
+import { useModelingContext } from 'hooks/useModelingContext'
 
 export const editorShortcutMeta = {
   formatCode: {
@@ -77,6 +78,11 @@ export const TextEditor = ({
     sourceRangeMap: s.sourceRangeMap,
   }))
 
+  const {
+    context: { selectionRanges: machineSelectionRanges },
+    send,
+  } = useModelingContext()
+
   const {
     settings: {
       context: { textWrapping },
@@ -198,6 +204,14 @@ export const TextEditor = ({
       otherSelections: [],
       codeBasedSelections,
     })
+
+    send({
+      type: 'Set selection',
+      data: {
+        ...machineSelectionRanges,
+        codeBasedSelections,
+      },
+    })
   }
 
   const editorExtensions = useMemo(() => {

src/hooks/useModelingContext.ts

@@ -0,0 +1,6 @@
+import { ModelingMachineContext } from 'components/ModelingMachineProvider'
+import { useContext } from 'react'
+
+export const useModelingContext = () => {
+  return useContext(ModelingMachineContext)
+}