fix: massive fix for circular depsga!

src/App.tsx

@@ -39,7 +39,7 @@ import {
   engineStreamActor,
   useSettings,
   useToken,
-} from '@src/machines/appMachine'
+} from '@src/lib/singletons'
 import { commandBarActor } from '@src/machines/commandBarMachine'
 import { EngineStreamTransition } from '@src/machines/engineStreamMachine'
 import { onboardingPaths } from '@src/routes/Onboarding/paths'

src/Auth.tsx

@@ -1,5 +1,5 @@
 import Loading from '@src/components/Loading'
-import { useAuthState } from '@src/machines/appMachine'
+import { useAuthState } from '@src/lib/singletons'
 
 // Wrapper around protected routes, used in src/Router.tsx
 export const Auth = ({ children }: React.PropsWithChildren) => {

src/Router.tsx

@@ -35,7 +35,7 @@ import {
   rustContext,
 } from '@src/lib/singletons'
 import { reportRejection } from '@src/lib/trap'
-import { useToken } from '@src/machines/appMachine'
+import { useToken } from '@src/lib/singletons'
 import RootLayout from '@src/Root'
 import Home from '@src/routes/Home'
 import Onboarding, { onboardingRoutes } from '@src/routes/Onboarding'

src/clientSideScene/ClientSideSceneComp.tsx

@@ -40,7 +40,7 @@ import {
 } from '@src/lib/singletons'
 import { err, reportRejection, trap } from '@src/lib/trap'
 import { throttle, toSync } from '@src/lib/utils'
-import type { useSettings } from '@src/machines/appMachine'
+import type { useSettings } from '@src/lib/singletons'
 import { commandBarActor } from '@src/machines/commandBarMachine'
 import type { SegmentOverlay } from '@src/machines/modelingMachine'
 

src/components/AppHeader.tsx

@@ -5,7 +5,7 @@ import { RefreshButton } from '@src/components/RefreshButton'
 import UserSidebarMenu from '@src/components/UserSidebarMenu'
 import { isDesktop } from '@src/lib/isDesktop'
 import { type IndexLoaderData } from '@src/lib/types'
-import { useUser } from '@src/machines/appMachine'
+import { useUser } from '@src/lib/singletons'
 
 import styles from './AppHeader.module.css'
 

src/components/CameraProjectionToggle.tsx

@@ -1,7 +1,7 @@
 import { Switch } from '@headlessui/react'
 import { useEffect, useState } from 'react'
 
-import { settingsActor, useSettings } from '@src/machines/appMachine'
+import { settingsActor, useSettings } from '@src/lib/singletons'
 
 export function CameraProjectionToggle() {
   const settings = useSettings()

src/components/CommandBar/CommandBarKclInput.tsx

@@ -29,7 +29,7 @@ import { err } from '@src/lib/trap'
 import { useCalculateKclExpression } from '@src/lib/useCalculateKclExpression'
 import { roundOff } from '@src/lib/utils'
 import { varMentions } from '@src/lib/varCompletionExtension'
-import { useSettings } from '@src/machines/appMachine'
+import { useSettings } from '@src/lib/singletons'
 import {
   commandBarActor,
   useCommandBarState,

src/components/DownloadAppBanner.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 
 import { ActionButton } from '@src/components/ActionButton'
 import { CREATE_FILE_URL_PARAM } from '@src/lib/constants'
-import { useSettings } from '@src/machines/appMachine'
+import { useSettings } from '@src/lib/singletons'
 import { useSearchParams } from 'react-router-dom'
 
 const DownloadAppBanner = () => {

src/components/EngineStream.tsx

@@ -18,7 +18,7 @@ import { REASONABLE_TIME_TO_REFRESH_STREAM_SIZE } from '@src/lib/timings'
 import { err, reportRejection, trap } from '@src/lib/trap'
 import type { IndexLoaderData } from '@src/lib/types'
 import { uuidv4 } from '@src/lib/utils'
-import { engineStreamActor, useSettings } from '@src/machines/appMachine'
+import { engineStreamActor, useSettings } from '@src/lib/singletons'
 import { useCommandBarState } from '@src/machines/commandBarMachine'
 import {
   EngineStreamState,

src/components/FileMachineProvider.tsx

@@ -33,7 +33,7 @@ import { markOnce } from '@src/lib/performance'
 import { codeManager, kclManager } from '@src/lib/singletons'
 import { err, reportRejection } from '@src/lib/trap'
 import { type IndexLoaderData } from '@src/lib/types'
-import { useSettings, useToken } from '@src/machines/appMachine'
+import { useSettings, useToken } from '@src/lib/singletons'
 import { commandBarActor } from '@src/machines/commandBarMachine'
 import { fileMachine } from '@src/machines/fileMachine'
 import { modelingMenuCallbackMostActions } from '@src/menu/register'

src/components/Gizmo.tsx

@@ -27,7 +27,7 @@ import { useModelingContext } from '@src/hooks/useModelingContext'
 import { AxisNames } from '@src/lib/constants'
 import { sceneInfra } from '@src/lib/singletons'
 import { reportRejection } from '@src/lib/trap'
-import { useSettings } from '@src/machines/appMachine'
+import { useSettings } from '@src/lib/singletons'
 
 const CANVAS_SIZE = 80
 const FRUSTUM_SIZE = 0.5

src/components/HelpMenu.tsx

@@ -10,7 +10,7 @@ import { createAndOpenNewTutorialProject } from '@src/lib/desktopFS'
 import { openExternalBrowserIfDesktop } from '@src/lib/openWindow'
 import { PATHS } from '@src/lib/paths'
 import { reportRejection } from '@src/lib/trap'
-import { settingsActor } from '@src/machines/appMachine'
+import { settingsActor } from '@src/lib/singletons'
 import type { WebContentSendPayload } from '@src/menu/channels'
 
 const HelpMenuDivider = () => (

src/components/LspProvider.tsx

@@ -27,7 +27,7 @@ import { PATHS } from '@src/lib/paths'
 import type { FileEntry } from '@src/lib/project'
 import { codeManager } from '@src/lib/singletons'
 import { err } from '@src/lib/trap'
-import { useToken } from '@src/machines/appMachine'
+import { useToken } from '@src/lib/singletons'
 
 function getWorkspaceFolders(): LSP.WorkspaceFolder[] {
   return []

src/components/ModelStateIndicator.tsx

@@ -1,4 +1,4 @@
-import { engineStreamActor } from '@src/machines/appMachine'
+import { engineStreamActor } from '@src/lib/singletons'
 import { EngineStreamState } from '@src/machines/engineStreamMachine'
 import { useSelector } from '@xstate/react'
 

src/components/ModelingMachineProvider.tsx

@@ -110,7 +110,7 @@ import { submitAndAwaitTextToKcl } from '@src/lib/textToCad'
 import { err, reject, reportRejection, trap } from '@src/lib/trap'
 import type { IndexLoaderData } from '@src/lib/types'
 import { platform, uuidv4 } from '@src/lib/utils'
-import { useSettings, useToken } from '@src/machines/appMachine'
+import { useSettings, useToken } from '@src/lib/singletons'
 import { commandBarActor } from '@src/machines/commandBarMachine'
 import { kclEditorActor } from '@src/machines/kclEditorMachine'
 import {

src/components/ModelingSidebar/ModelingPane.tsx

@@ -5,7 +5,7 @@ import { ActionButton } from '@src/components/ActionButton'
 import { ActionIcon } from '@src/components/ActionIcon'
 import type { CustomIconName } from '@src/components/CustomIcon'
 import Tooltip from '@src/components/Tooltip'
-import { useSettings } from '@src/machines/appMachine'
+import { useSettings } from '@src/lib/singletons'
 import { onboardingPaths } from '@src/routes/Onboarding/paths'
 
 import styles from './ModelingPane.module.css'

src/components/ModelingSidebar/ModelingPanes/KclEditorPane.tsx

@@ -47,7 +47,7 @@ import { codeManagerHistoryCompartment } from '@src/lang/codeManager'
 import { codeManager, editorManager, kclManager } from '@src/lib/singletons'
 import { Themes, getSystemTheme } from '@src/lib/theme'
 import { onMouseDragMakeANewNumber, onMouseDragRegex } from '@src/lib/utils'
-import { useSettings } from '@src/machines/appMachine'
+import { useSettings } from '@src/lib/singletons'
 import {
   editorIsMountedSelector,
   kclEditorActor,

src/components/ModelingSidebar/ModelingSidebar.tsx

@@ -22,7 +22,7 @@ import { useKclContext } from '@src/lang/KclProvider'
 import { EngineConnectionStateType } from '@src/lang/std/engineConnection'
 import { SIDEBAR_BUTTON_SUFFIX } from '@src/lib/constants'
 import { isDesktop } from '@src/lib/isDesktop'
-import { useSettings } from '@src/machines/appMachine'
+import { useSettings } from '@src/lib/singletons'
 import { commandBarActor } from '@src/machines/commandBarMachine'
 import { onboardingPaths } from '@src/routes/Onboarding/paths'
 

src/components/ProjectSidebarMenu.tsx

@@ -23,7 +23,7 @@ import {
   kclManager,
 } from '@src/lib/singletons'
 import { type IndexLoaderData } from '@src/lib/types'
-import { useToken } from '@src/machines/appMachine'
+import { useToken } from '@src/lib/singletons'
 import { commandBarActor } from '@src/machines/commandBarMachine'
 
 const ProjectSidebarMenu = ({

src/components/ProjectsContextProvider.tsx

@@ -33,7 +33,7 @@ import { PATHS } from '@src/lib/paths'
 import type { Project } from '@src/lib/project'
 import { codeManager, kclManager } from '@src/lib/singletons'
 import { err } from '@src/lib/trap'
-import { useSettings } from '@src/machines/appMachine'
+import { useSettings } from '@src/lib/singletons'
 import { commandBarActor } from '@src/machines/commandBarMachine'
 import { projectsMachine } from '@src/machines/projectsMachine'
 

src/components/Providers/SystemIOProviderDesktop.tsx

@@ -1,6 +1,6 @@
 import { useFileSystemWatcher } from '@src/hooks/useFileSystemWatcher'
 import { PATHS } from '@src/lib/paths'
-import { systemIOActor, useSettings } from '@src/machines/appMachine'
+import { systemIOActor, useSettings } from '@src/lib/singletons'
 import {
   useHasListedProjects,
   useProjectDirectoryPath,

src/components/RefreshButton.tsx

@@ -13,7 +13,7 @@ import {
 } from '@src/lib/singletons'
 import { reportRejection } from '@src/lib/trap'
 import { toSync } from '@src/lib/utils'
-import { useToken } from '@src/machines/appMachine'
+import { useToken } from '@src/lib/singletons'
 import type { WebContentSendPayload } from '@src/menu/channels'
 
 export const RefreshButton = ({ children }: React.PropsWithChildren) => {

src/components/RouteProvider.tsx

@@ -18,7 +18,7 @@ import { markOnce } from '@src/lib/performance'
 import { loadAndValidateSettings } from '@src/lib/settings/settingsUtils'
 import { trap } from '@src/lib/trap'
 import type { IndexLoaderData } from '@src/lib/types'
-import { settingsActor, useSettings } from '@src/machines/appMachine'
+import { settingsActor, useSettings } from '@src/lib/singletons'
 
 export const RouteProviderContext = createContext({})
 

src/components/Settings/AllSettingsFields.tsx

@@ -28,7 +28,7 @@ import {
 } from '@src/lib/settings/settingsUtils'
 import { reportRejection } from '@src/lib/trap'
 import { toSync } from '@src/lib/utils'
-import { settingsActor, useSettings } from '@src/machines/appMachine'
+import { settingsActor, useSettings } from '@src/lib/singletons'
 import { APP_VERSION, IS_NIGHTLY, getReleaseUrl } from '@src/routes/utils'
 import { waitFor } from 'xstate'
 

src/components/Settings/SettingsFieldInput.tsx

@@ -9,7 +9,7 @@ import type {
   WildcardSetEvent,
 } from '@src/lib/settings/settingsTypes'
 import { getSettingInputType } from '@src/lib/settings/settingsUtils'
-import { settingsActor, useSettings } from '@src/machines/appMachine'
+import { settingsActor, useSettings } from '@src/lib/singletons'
 
 interface SettingsFieldInputProps {
   // We don't need the fancy types here,

src/components/Settings/SettingsSearchBar.tsx

@@ -8,7 +8,7 @@ import { useNavigate } from 'react-router-dom'
 import { CustomIcon } from '@src/components/CustomIcon'
 import { interactionMap } from '@src/lib/settings/initialKeybindings'
 import type { SettingsLevel } from '@src/lib/settings/settingsTypes'
-import { useSettings } from '@src/machines/appMachine'
+import { useSettings } from '@src/lib/singletons'
 
 type ExtendedSettingsLevel = SettingsLevel | 'keybindings'
 

src/components/Settings/SettingsSectionsList.tsx

@@ -3,7 +3,7 @@ import decamelize from 'decamelize'
 import type { Setting } from '@src/lib/settings/initialSettings'
 import type { SettingsLevel } from '@src/lib/settings/settingsTypes'
 import { shouldHideSetting } from '@src/lib/settings/settingsUtils'
-import { useSettings } from '@src/machines/appMachine'
+import { useSettings } from '@src/lib/singletons'
 
 interface SettingsSectionsListProps {
   searchParamTab: SettingsLevel

src/components/UserSidebarMenu.tsx

@@ -11,7 +11,7 @@ import { useAbsoluteFilePath } from '@src/hooks/useAbsoluteFilePath'
 import usePlatform from '@src/hooks/usePlatform'
 import { isDesktop } from '@src/lib/isDesktop'
 import { PATHS } from '@src/lib/paths'
-import { authActor } from '@src/machines/appMachine'
+import { authActor } from '@src/lib/singletons'
 
 type User = Models['User_type']
 

src/components/ViewControlMenu.tsx

@@ -12,7 +12,7 @@ import type { AxisNames } from '@src/lib/constants'
 import { VIEW_NAMES_SEMANTIC } from '@src/lib/constants'
 import { sceneInfra } from '@src/lib/singletons'
 import { reportRejection } from '@src/lib/trap'
-import { useSettings } from '@src/machines/appMachine'
+import { useSettings } from '@src/lib/singletons'
 
 export function useViewControlMenuItems() {
   const { state: modelingState, send: modelingSend } = useModelingContext()

src/hooks/useAuthNavigation.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 
 import { PATHS } from '@src/lib/paths'
-import { useAuthState } from '@src/machines/appMachine'
+import { useAuthState } from '@src/lib/singletons'
 
 /**
  * A simple hook that listens to the auth state of the app and navigates

src/hooks/useCreateFileLinkQueryWatcher.ts

@@ -9,7 +9,7 @@ import { CREATE_FILE_URL_PARAM, DEFAULT_FILE_NAME } from '@src/lib/constants'
 import { isDesktop } from '@src/lib/isDesktop'
 import type { FileLinkParams } from '@src/lib/links'
 import { PATHS } from '@src/lib/paths'
-import { useSettings } from '@src/machines/appMachine'
+import { useSettings } from '@src/lib/singletons'
 
 // For initializing the command arguments, we actually want `method` to be undefined
 // so that we don't skip it in the command palette.

src/hooks/useEngineConnectionSubscriptions.ts

@@ -27,7 +27,7 @@ import {
 } from '@src/lib/singletons'
 import { err, reportRejection } from '@src/lib/trap'
 import { getModuleId } from '@src/lib/utils'
-import { engineStreamActor } from '@src/machines/appMachine'
+import { engineStreamActor } from '@src/lib/singletons'
 import { EngineStreamState } from '@src/machines/engineStreamMachine'
 import type {
   EdgeCutInfo,

src/hooks/useResolvedTheme.ts

@@ -1,5 +1,5 @@
 import { Themes, getSystemTheme } from '@src/lib/theme'
-import { useSettings } from '@src/machines/appMachine'
+import { useSettings } from '@src/lib/singletons'
 
 /**
  * Resolves the current theme based on the theme setting

src/index.tsx

@@ -13,7 +13,7 @@ import { initializeWindowExceptionHandler } from '@src/lib/exceptions'
 import { isDesktop } from '@src/lib/isDesktop'
 import { markOnce } from '@src/lib/performance'
 import { reportRejection } from '@src/lib/trap'
-import { appActor } from '@src/machines/appMachine'
+import { appActor } from '@src/lib/singletons'
 import reportWebVitals from '@src/reportWebVitals'
 
 markOnce('code/willAuth')

src/lib/commandBarConfigs/authCommandConfig.ts

@@ -1,5 +1,5 @@
 import type { Command } from '@src/lib/commandTypes'
-import { authActor } from '@src/machines/appMachine'
+import { authActor } from '@src/lib/singletons'
 import { ACTOR_IDS } from '@src/machines/machineConstants'
 
 export const authCommands: Command[] = [

src/lib/commandBarConfigs/namedViewsConfig.ts

@@ -12,7 +12,7 @@ import type { Command, CommandArgumentOption } from '@src/lib/commandTypes'
 import { engineCommandManager } from '@src/lib/singletons'
 import { err, reportRejection } from '@src/lib/trap'
 import { uuidv4 } from '@src/lib/utils'
-import { getSettings, settingsActor } from '@src/machines/appMachine'
+import { getSettings, settingsActor } from '@src/lib/singletons'
 
 function isWorldCoordinateSystemType(
   x: string

src/lib/commandBarConfigs/projectsCommandConfig.ts

@@ -176,7 +176,7 @@ import {
   folderSnapshot,
   defaultProjectFolderNameSnapshot,
 } from '@src/machines/systemIO/snapshotContext'
-import { systemIOActor } from '@src/machines/appMachine'
+import { systemIOActor } from '@src/lib/singletons'
 import { SystemIOMachineEvents } from '@src/machines/systemIO/utils'
 
 export const openProjectCommand: Command = {

src/lib/routeLoaders.ts

@@ -20,7 +20,7 @@ import type {
   HomeLoaderData,
   IndexLoaderData,
 } from '@src/lib/types'
-import { settingsActor } from '@src/machines/appMachine'
+import { settingsActor } from '@src/lib/singletons'
 
 export const telemetryLoader: LoaderFunction = async ({
   params,

src/lib/selections.ts

@@ -43,7 +43,7 @@ import {
   isOverlap,
   uuidv4,
 } from '@src/lib/utils'
-import { engineStreamActor } from '@src/machines/appMachine'
+import { engineStreamActor } from '@src/lib/singletons'
 import type { ModelingMachineEvent } from '@src/machines/modelingMachine'
 import { showUnsupportedSelectionToast } from '@src/components/ToastUnsupportedSelection'
 

src/lib/settings/settingsUtils.ts

@@ -456,7 +456,7 @@ export function getSettingInputType(setting: Setting) {
 export const jsAppSettings = async () => {
   let jsAppSettings = default_app_settings()
   if (!TEST) {
-    const settings = await import('@src/machines/appMachine').then((module) =>
+    const settings = await import('@src/lib/singletons').then((module) =>
       module.getSettings()
     )
     if (settings) {

src/lib/singletons.ts

@@ -90,3 +90,109 @@ if (typeof window !== 'undefined') {
       },
     })
 }
+
+
+import { useSelector } from '@xstate/react'
+import { createActor, setup, spawnChild } from 'xstate'
+
+import { isDesktop } from '@src/lib/isDesktop'
+import { createSettings } from '@src/lib/settings/initialSettings'
+import { authMachine } from '@src/machines/authMachine'
+import type { EngineStreamActor } from '@src/machines/engineStreamMachine'
+import {
+  engineStreamContextCreate,
+  engineStreamMachine,
+} from '@src/machines/engineStreamMachine'
+import { ACTOR_IDS } from '@src/machines/machineConstants'
+import { settingsMachine } from '@src/machines/settingsMachine'
+import { systemIOMachineDesktop } from '@src/machines/systemIO/systemIOMachineDesktop'
+import { systemIOMachineWeb } from '@src/machines/systemIO/systemIOMachineWeb'
+const { AUTH, SETTINGS, SYSTEM_IO, ENGINE_STREAM } = ACTOR_IDS
+const appMachineActors = {
+  [AUTH]: authMachine,
+  [SETTINGS]: settingsMachine,
+  [SYSTEM_IO]: isDesktop() ? systemIOMachineDesktop : systemIOMachineWeb,
+  [ENGINE_STREAM]: engineStreamMachine,
+} as const
+
+const appMachine = setup({
+  types: {} as {
+    children: {
+      auth: typeof AUTH
+      settings: typeof SETTINGS
+      systemIO: typeof SYSTEM_IO
+    }
+  },
+  actors: appMachineActors,
+  context: {} as {
+    codeManager: any,
+    kclManager: any,
+    engineCommandManager: any,
+    sceneInfra: any,
+    sceneEntitiesManager: any
+  }
+}).createMachine({
+  id: 'modeling-app',
+  context:{
+    codeManager: codeManager,
+    kclManager: kclManager,
+    engineCommandManager: engineCommandManager,
+    sceneInfra: sceneInfra,
+    sceneEntitiesManager: sceneEntitiesManager
+  },
+  entry: [
+    spawnChild(AUTH, { id: AUTH, systemId: AUTH }),
+    spawnChild(SETTINGS, {
+      id: SETTINGS,
+      systemId: SETTINGS,
+      input: createSettings(),
+    }),
+    spawnChild(SYSTEM_IO, { id: SYSTEM_IO, systemId: SYSTEM_IO }),
+    spawnChild(ENGINE_STREAM, {
+      id: ENGINE_STREAM,
+      systemId: ENGINE_STREAM,
+      input: engineStreamContextCreate(),
+    }),
+  ],
+})
+
+export const appActor = createActor(appMachine, {
+  systemId: 'root',
+})
+
+/**
+ * GOTCHA: the type coercion of this actor works because it is spawned for
+ * the lifetime of {appActor}, but would not work if it were invoked
+ * or if it were destroyed under any conditions during {appActor}'s life
+ */
+export const authActor = appActor.getSnapshot().children.auth!
+export const useAuthState = () => useSelector(authActor, (state) => state)
+export const useToken = () =>
+  useSelector(authActor, (state) => state.context.token)
+export const useUser = () =>
+  useSelector(authActor, (state) => state.context.user)
+
+/**
+ * GOTCHA: the type coercion of this actor works because it is spawned for
+ * the lifetime of {appActor}, but would not work if it were invoked
+ * or if it were destroyed under any conditions during {appActor}'s life
+ */
+export const settingsActor = appActor.getSnapshot().children.settings!
+export const getSettings = () => {
+  const { currentProject: _, ...settings } = settingsActor.getSnapshot().context
+  return settings
+}
+export const useSettings = () =>
+  useSelector(settingsActor, (state) => {
+    // We have to peel everything that isn't settings off
+    const { currentProject, ...settings } = state.context
+    return settings
+  })
+
+export const systemIOActor = appActor.getSnapshot().children.systemIO!
+
+export const engineStreamActor = appActor.system.get(
+  ENGINE_STREAM
+) as EngineStreamActor
+
+window.actor = systemIOActor

src/machines/engineStreamMachine.ts

@@ -1,4 +1,3 @@
-import { engineCommandManager, sceneInfra } from '@src/lib/singletons'
 import type { MutableRefObject } from 'react'
 import type { ActorRefFrom } from 'xstate'
 import { assign, fromPromise, setup } from 'xstate'
@@ -79,7 +78,7 @@ export const engineStreamMachine = setup({
   actors: {
     [EngineStreamTransition.Play]: fromPromise(
       async ({
-        input: { context, params },
+        input: { context, params, rootContext},
       }: {
         input: { context: EngineStreamContext; params: { zoomToFit: boolean } }
       }) => {
@@ -98,7 +97,7 @@ export const engineStreamMachine = setup({
           return
         }
 
-        await sceneInfra.camControls.restoreRemoteCameraStateAndTriggerSync()
+        await rootContext.sceneInfra.camControls.restoreRemoteCameraStateAndTriggerSync()
 
         video.style.display = 'block'
         canvas.style.display = 'none'
@@ -108,7 +107,7 @@ export const engineStreamMachine = setup({
     ),
     [EngineStreamTransition.Pause]: fromPromise(
       async ({
-        input: { context },
+        input: { context, rootContext },
       }: {
         input: { context: EngineStreamContext }
       }) => {
@@ -123,7 +122,7 @@ export const engineStreamMachine = setup({
         await holdOntoVideoFrameInCanvas(video, canvas)
         video.style.display = 'none'
 
-        await sceneInfra.camControls.saveRemoteCameraState()
+        await rootContext.sceneInfra.camControls.saveRemoteCameraState()
 
         // Make sure we're on the next frame for no flickering between canvas
         // and the video elements.
@@ -138,17 +137,18 @@ export const engineStreamMachine = setup({
               context.mediaStream = null
               video.srcObject = null
 
-              engineCommandManager.tearDown({ idleMode: true })
+              rootContext.engineCommandManager.tearDown({ idleMode: true })
             })()
         )
       }
     ),
     [EngineStreamTransition.StartOrReconfigureEngine]: fromPromise(
       async ({
-        input: { context, event },
+        input: { context, event, rootContext },
       }: {
         input: { context: EngineStreamContext; event: any }
       }) => {
+        console.log(context,event, rootContext)
         if (!context.authToken) return
 
         const video = context.videoRef.current
@@ -172,10 +172,10 @@ export const engineStreamMachine = setup({
           ...event.settings,
         }
 
-        engineCommandManager.settings = settingsNext
+        rootContext.engineCommandManager.settings = settingsNext
 
         window.requestAnimationFrame(() => {
-          engineCommandManager.start({
+          rootContext.engineCommandManager.start({
             setMediaStream: event.onMediaStream,
             setIsStreamReady: (isStreamReady: boolean) => {
               event.setAppState({ isStreamReady })
@@ -225,7 +225,12 @@ export const engineStreamMachine = setup({
       reenter: true,
       invoke: {
         src: EngineStreamTransition.StartOrReconfigureEngine,
-        input: (args) => args,
+        input: (args) => ({
+          context: args.context,
+          rootContext: args.self.system.get('root').getSnapshot().context,
+          params: { zoomToFit: args.context.zoomToFit },
+          event: args.event
+        }),
       },
       on: {
         // Transition requested by engineConnection
@@ -246,6 +251,7 @@ export const engineStreamMachine = setup({
         src: EngineStreamTransition.Play,
         input: (args) => ({
           context: args.context,
+          rootContext: args.self.system.get('root').getSnapshot().context,
           params: { zoomToFit: args.context.zoomToFit },
         }),
       },
@@ -261,7 +267,11 @@ export const engineStreamMachine = setup({
     [EngineStreamState.Reconfiguring]: {
       invoke: {
         src: EngineStreamTransition.StartOrReconfigureEngine,
-        input: (args) => args,
+        input: (args) => ({
+          context: args.context,
+          rootContext: args.self.system.get('root').getSnapshot().context,
+          event: args.event
+        }),
         onDone: {
           target: EngineStreamState.Playing,
         },
@@ -270,7 +280,10 @@ export const engineStreamMachine = setup({
     [EngineStreamState.Paused]: {
       invoke: {
         src: EngineStreamTransition.Pause,
-        input: (args) => args,
+        input: (args) => ({
+          context: args.context,
+          rootContext: args.self.system.get('root').getSnapshot().context,
+        }),
       },
       on: {
         [EngineStreamTransition.StartOrReconfigureEngine]: {
@@ -282,7 +295,11 @@ export const engineStreamMachine = setup({
       reenter: true,
       invoke: {
         src: EngineStreamTransition.StartOrReconfigureEngine,
-        input: (args) => args,
+        input: (args) => ({
+          context: args.context,
+          rootContext: args.self.system.get('root').getSnapshot().context,
+          event: args.event
+        }),
       },
       on: {
         // The stream can be paused as it's resuming.

src/machines/settingsMachine.ts

@@ -35,13 +35,6 @@ import {
   saveSettings,
   setSettingsAtLevel,
 } from '@src/lib/settings/settingsUtils'
-import {
-  codeManager,
-  engineCommandManager,
-  kclManager,
-  sceneEntitiesManager,
-  sceneInfra,
-} from '@src/lib/singletons'
 import {
   Themes,
   darkModeMatcher,
@@ -95,13 +88,14 @@ export const settingsMachine = setup({
         doNotPersist: boolean
         context: SettingsMachineContext
         toastCallback?: () => void
+        rootContext: any
       }
     >(async ({ input }) => {
       // Without this, when a user changes the file, it'd
       // create a detection loop with the file-system watcher.
       if (input.doNotPersist) return
 
-      codeManager.writeCausedByAppCheckedInFileTreeFileSystemWatcher = true
+      input.rootContext.codeManager.writeCausedByAppCheckedInFileTreeFileSystemWatcher = true
       const { currentProject, ...settings } = input.context
 
       const val = await saveSettings(settings, currentProject?.path)
@@ -190,20 +184,28 @@ export const settingsMachine = setup({
     }),
   },
   actions: {
-    setEngineTheme: ({ context }) => {
+    setEngineTheme: ({ context, self }) => {
+      const rootContext = self.system.get('root').getSnapshot().context
+      const engineCommandManager = rootContext.engineCommandManager
       if (engineCommandManager && context.app.theme.current) {
         engineCommandManager
           .setTheme(context.app.theme.current)
           .catch(reportRejection)
       }
     },
-    setClientTheme: ({ context }) => {
+    setClientTheme: ({ context, self }) => {
+      const rootContext = self.system.get('root').getSnapshot().context
+      const sceneInfra = rootContext.sceneInfra
+      const sceneEntitiesManager = rootContext.sceneEntitiesManager
+
       if (!sceneInfra || !sceneEntitiesManager) return
       const opposingTheme = getOppositeTheme(context.app.theme.current)
       sceneInfra.theme = opposingTheme
       sceneEntitiesManager.updateSegmentBaseColor(opposingTheme)
     },
-    setAllowOrbitInSketchMode: ({ context }) => {
+    setAllowOrbitInSketchMode: ({ context, self }) => {
+      const rootContext = self.system.get('root').getSnapshot().context
+      const sceneInfra = rootContext.sceneInfra
       if (!sceneInfra.camControls) return
       sceneInfra.camControls._setting_allowOrbitInSketchMode =
         context.app.allowOrbitInSketchMode.current
@@ -232,7 +234,9 @@ export const settingsMachine = setup({
         id: `${event.type}.success`,
       })
     },
-    'Execute AST': ({ context, event }) => {
+    'Execute AST': ({ context, event, self }) => {
+      const rootContext = self.system.get('root').getSnapshot().context
+      const kclManager = rootContext.kclManager
       try {
         const relevantSetting = (s: typeof settings) => {
           return (
@@ -345,8 +349,10 @@ export const settingsMachine = setup({
         currentTheme === Themes.System ? getSystemTheme() : currentTheme
       )
     },
-    setEngineCameraProjection: ({ context }) => {
+    setEngineCameraProjection: ({ context, self }) => {
       const newCurrentProjection = context.modeling.cameraProjection.current
+      const rootContext = self.system.get('root').getSnapshot().context
+      const sceneInfra = rootContext.sceneInfra
       sceneInfra.camControls.setEngineCameraProjection(newCurrentProjection)
     },
     sendThemeToWatcher: sendTo('watchSystemTheme', ({ context }) => ({
@@ -532,7 +538,7 @@ export const settingsMachine = setup({
             console.error('Error persisting settings')
           },
         },
-        input: ({ context, event }) => {
+        input: ({ context, event, self }) => {
           if (
             event.type === 'set.app.namedViews' &&
             'toastCallback' in event.data
@@ -547,6 +553,7 @@ export const settingsMachine = setup({
           return {
             doNotPersist: event.doNotPersist ?? false,
             context,
+            rootContext: self.system.get('root').getSnapshot().context,
           }
         },
       },

src/machines/systemIO/hooks.ts

@@ -1,4 +1,4 @@
-import { systemIOActor } from '@src/machines/appMachine'
+import { systemIOActor } from '@src/lib/singletons'
 import { useSelector } from '@xstate/react'
 export const useRequestedProjectName = () =>
   useSelector(systemIOActor, (state) => state.context.requestedProjectName)

src/machines/systemIO/snapshotContext.ts

@@ -1,4 +1,4 @@
-import { systemIOActor } from '@src/machines/appMachine'
+import { systemIOActor } from '@src/lib/singletons'
 
 export const folderSnapshot = () => {
   const { folders } = systemIOActor.getSnapshot().context

src/machines/systemIO/systemIOMachine.ts

@@ -190,6 +190,7 @@ export const systemIOMachine = setup({
           requestedProjectName: string
           requestedFileName: string
           requestedCode: string
+          rootContext: any
         }
       }): Promise<{
         message: string
@@ -361,13 +362,14 @@ export const systemIOMachine = setup({
       invoke: {
         id: SystemIOMachineActors.createKCLFile,
         src: SystemIOMachineActors.createKCLFile,
-        input: ({ context, event }) => {
+        input: ({ context, event, self}) => {
           assertEvent(event, SystemIOMachineEvents.createKCLFile)
           return {
             context,
             requestedProjectName: event.data.requestedProjectName,
             requestedFileName: event.data.requestedFileName,
             requestedCode: event.data.requestedCode,
+            rootContext: self.system.get('root').getSnapshot().context
           }
         },
         onDone: {

src/machines/systemIO/systemIOMachineWeb.ts

@@ -6,7 +6,6 @@ import { newKclFile } from '@src/lang/project'
 import { readLocalStorageProjectSettingsFile } from '@src/lib/settings/settingsUtils'
 import { err } from '@src/lib/trap'
 import { DEFAULT_DEFAULT_LENGTH_UNIT } from '@src/lib/constants'
-import { codeManager, kclManager } from '@src/lib/singletons'
 
 export const systemIOMachineWeb = systemIOMachine.provide({
   actors: {
@@ -19,6 +18,7 @@ export const systemIOMachineWeb = systemIOMachine.provide({
           requestedProjectName: string
           requestedFileName: string
           requestedCode: string
+          rootContext: any
         }
       }) => {
         // Browser version doesn't navigate, just overwrites the current file
@@ -35,9 +35,9 @@ export const systemIOMachineWeb = systemIOMachine.provide({
             DEFAULT_DEFAULT_LENGTH_UNIT
         )
         if (err(codeToWrite)) return Promise.reject(codeToWrite)
-        codeManager.updateCodeStateEditor(codeToWrite)
-        await codeManager.writeToFile()
-        await kclManager.executeCode()
+        input.rootContext.codeManager.updateCodeStateEditor(codeToWrite)
+        await input.rootContext.codeManager.writeToFile()
+        await input.rootContext.kclManager.executeCode()
         return {
           message: 'File overwritten successfully',
           fileName: input.requestedFileName,

src/menu/register.ts

@@ -10,7 +10,7 @@ import {
 } from '@src/lib/singletons'
 import { reportRejection } from '@src/lib/trap'
 import { uuidv4 } from '@src/lib/utils'
-import { authActor, settingsActor } from '@src/machines/appMachine'
+import { authActor, settingsActor } from '@src/lib/singletons'
 import { commandBarActor } from '@src/machines/commandBarMachine'
 import type { WebContentSendPayload } from '@src/menu/channels'
 import type { NavigateFunction } from 'react-router-dom'

src/routes/Home.tsx

@@ -26,7 +26,7 @@ import {
   getSortIcon,
 } from '@src/lib/sorting'
 import { reportRejection } from '@src/lib/trap'
-import { authActor, systemIOActor, useSettings } from '@src/machines/appMachine'
+import { authActor, systemIOActor, useSettings } from '@src/lib/singletons'
 import { commandBarActor } from '@src/machines/commandBarMachine'
 import {
   useCanReadWriteProjectDirectory,

src/routes/Onboarding/Camera.tsx

@@ -1,7 +1,7 @@
 import { SettingsSection } from '@src/components/Settings/SettingsSection'
 import type { CameraSystem } from '@src/lib/cameraControls'
 import { cameraMouseDragGuards, cameraSystems } from '@src/lib/cameraControls'
-import { settingsActor, useSettings } from '@src/machines/appMachine'
+import { settingsActor, useSettings } from '@src/lib/singletons'
 import { onboardingPaths } from '@src/routes/Onboarding/paths'
 
 import {

src/routes/Onboarding/Introduction.tsx

@@ -13,7 +13,7 @@ import { codeManager, kclManager } from '@src/lib/singletons'
 import { Themes, getSystemTheme } from '@src/lib/theme'
 import { reportRejection } from '@src/lib/trap'
 import type { IndexLoaderData } from '@src/lib/types'
-import { useSettings } from '@src/machines/appMachine'
+import { useSettings } from '@src/lib/singletons'
 import { onboardingPaths } from '@src/routes/Onboarding/paths'
 
 import { OnboardingButtons, useDemoCode } from '@src/routes/Onboarding/utils'

src/routes/Onboarding/ParametricModeling.tsx

@@ -1,7 +1,7 @@
 import { bracketThicknessCalculationLine } from '@src/lib/exampleKcl'
 import { isDesktop } from '@src/lib/isDesktop'
 import { Themes, getSystemTheme } from '@src/lib/theme'
-import { useSettings } from '@src/machines/appMachine'
+import { useSettings } from '@src/lib/singletons'
 import { onboardingPaths } from '@src/routes/Onboarding/paths'
 
 import { OnboardingButtons, useDemoCode } from '@src/routes/Onboarding/utils'

src/routes/Onboarding/Units.tsx

@@ -3,7 +3,7 @@ import { faArrowRight, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { ActionButton } from '@src/components/ActionButton'
 import { SettingsSection } from '@src/components/Settings/SettingsSection'
 import { type BaseUnit, baseUnitsUnion } from '@src/lib/settings/settingsTypes'
-import { settingsActor, useSettings } from '@src/machines/appMachine'
+import { settingsActor, useSettings } from '@src/lib/singletons'
 import { onboardingPaths } from '@src/routes/Onboarding/paths'
 
 import { useDismiss, useNextClick } from '@src/routes/Onboarding/utils'

src/routes/Onboarding/UserMenu.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 
-import { useUser } from '@src/machines/appMachine'
+import { useUser } from '@src/lib/singletons'
 import { onboardingPaths } from '@src/routes/Onboarding/paths'
 
 import { OnboardingButtons } from '@src/routes/Onboarding/utils'

src/routes/Onboarding/utils.tsx

@@ -15,7 +15,7 @@ import { PATHS } from '@src/lib/paths'
 import { codeManager, editorManager, kclManager } from '@src/lib/singletons'
 import { reportRejection } from '@src/lib/trap'
 import { toSync } from '@src/lib/utils'
-import { settingsActor } from '@src/machines/appMachine'
+import { settingsActor } from '@src/lib/singletons'
 import { onboardingRoutes } from '@src/routes/Onboarding'
 import { onboardingPaths } from '@src/routes/Onboarding/paths'
 

src/routes/SignIn.tsx

@@ -14,7 +14,7 @@ import { PATHS } from '@src/lib/paths'
 import { Themes, getSystemTheme } from '@src/lib/theme'
 import { reportRejection } from '@src/lib/trap'
 import { toSync } from '@src/lib/utils'
-import { authActor, useSettings } from '@src/machines/appMachine'
+import { authActor, useSettings } from '@src/lib/singletons'
 import { APP_VERSION, IS_NIGHTLY } from '@src/routes/utils'
 
 const subtleBorder =