[Refactor] decouple settingsMachine from React (#5142)

* Remove unnecessary console.log

* Create a global appMachine

* Strip authMachine of side-effects

* Replace react-bound authMachine use with XState actor use

* Fix import goof

* Register auth commands directly!

* Don't provide anything to settingsMachine from React

* Remove unecessary async

* Make it possible to load project settings via a sent event, without React

* Make settingsMachine ready to be an actor

* Remove settingsLoader use

* Replace all useSettingsAuthContext use with direct actor use

* Add logic to clear project settings, fmt

* fmt

* Clear and load project settings from routeLoaders, but using actor

* Remove useRefreshSettings

* Restore use of useToken() that wasn't working for some reason

* Migrate useFileSystemWatcher use to RouteProvider

* Surface wasm_bindgen unavailable error to console

* Remove unnecessary use of Jest settings wrappers

* Replace dynamic import with actor.getSnapshot

* Migrate system theme and theme color watching from useEffects to actors/actions

* Migrate cursor color effect

* Remove unused code that is now in RouteProvider

* Migrate route commands registration further down for now, out of SettingsAuthProvider

* Migrate settings command registration out of SettingsAuthProvider.tsx

* Delete SettingsAuthProvider.tsx!

* Remove unused settingsLoader!

* fmt and remove comments

* Use actor for routeLoader

* Fix project read error due to uninitialized WASM

* Fix user settings load error due to uninitialized WASM

* Move settingsActor into appActor as a spawned child

* Trying to fix unit tests

* Remove unused imports and demo window attachments

* fmt

* Fix testing issues caused by circular dependency

* Add `setThemeColor` to a few actions list it was missing from

* fmt

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* Fix "Execute AST" action in browser, where currentProject is `undefined`

* Update commands list when currentProject changes

* Fix `clearProjectSettings`, which was passing along non-settings context

* Fix onboarding test that actually needed the onboarding initially dismissed

* Add scrollIntoView to make this test more reliable

* @lf94's feedback I missed

I got distracted by a million other things last week

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* Revert "A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)"

This reverts commit 129226c6ef.

* fmt

* revert bad snapshot

* Fix up camera movement test locator

* Fix test that was flipping the user settings without waiting

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

e2e/playwright/onboarding-tests.spec.ts

@@ -13,8 +13,8 @@ import {
 import * as TOML from '@iarna/toml'
 import { expectPixelColor } from './fixtures/sceneFixture'
 
-// Because onboarding relies on an app setting we need to set it as incompletel
-// for all these tests.
+// Because our default test settings have the onboardingStatus set to 'dismissed',
+// we must set it to empty for the tests where we want to see the onboarding immediately.
 
 test.describe('Onboarding tests', () => {
   test(
@@ -22,7 +22,7 @@ test.describe('Onboarding tests', () => {
     {
       appSettings: {
         app: {
-          onboardingStatus: 'incomplete',
+          onboardingStatus: '',
         },
       },
       cleanProjectDir: true,
@@ -63,7 +63,7 @@ test.describe('Onboarding tests', () => {
       tag: '@electron',
       appSettings: {
         app: {
-          onboardingStatus: 'incomplete',
+          onboardingStatus: '',
         },
       },
       cleanProjectDir: true,
@@ -106,11 +106,6 @@ test.describe('Onboarding tests', () => {
   test(
     'Code resets after confirmation',
     {
-      appSettings: {
-        app: {
-          onboardingStatus: 'incomplete',
-        },
-      },
       cleanProjectDir: true,
     },
     async ({ context, page, homePage }) => {
@@ -158,7 +153,7 @@ test.describe('Onboarding tests', () => {
     {
       appSettings: {
         app: {
-          onboardingStatus: 'incomplete',
+          onboardingStatus: '',
         },
       },
     },
@@ -319,7 +314,7 @@ test.describe('Onboarding tests', () => {
     {
       appSettings: {
         app: {
-          onboardingStatus: 'incomplete',
+          onboardingStatus: '',
         },
       },
       cleanProjectDir: true,
@@ -392,7 +387,7 @@ test.describe('Onboarding tests', () => {
     {
       appSettings: {
         app: {
-          onboardingStatus: 'incomplete',
+          onboardingStatus: '',
         },
       },
       cleanProjectDir: true,

e2e/playwright/testing-camera-movement.spec.ts

@@ -358,9 +358,7 @@ test.describe('Testing Camera Movement', { tag: ['@skipWin'] }, () => {
       exact: true,
     })
     const userSettingsTab = page.getByRole('radio', { name: 'User' })
-    const mouseControlsSetting = page
-      .locator('#mouseControls')
-      .getByRole('combobox')
+    const mouseControlsSetting = () => page.locator('#camera-controls').first()
     const mouseControlSuccesToast = page.getByText(
       'Set mouse controls to "Solidworks"'
     )
@@ -390,7 +388,14 @@ test.describe('Testing Camera Movement', { tag: ['@skipWin'] }, () => {
         await settingsLink.click()
         await expect(settingsDialogHeading).toBeVisible()
         await userSettingsTab.click()
-        await mouseControlsSetting.selectOption({ label: 'Solidworks' })
+        const setting = mouseControlsSetting()
+        await expect(setting).toBeAttached()
+        await setting.scrollIntoViewIfNeeded()
+        await setting.selectOption({ label: 'Solidworks' })
+        await expect(setting, 'Setting value did not change').toHaveValue(
+          'Solidworks',
+          { timeout: 120_000 }
+        )
         await expect(mouseControlSuccesToast).toBeVisible()
         await settingsCloseButton.click()
       })

e2e/playwright/testing-settings.spec.ts

@@ -633,6 +633,7 @@ test.describe('Testing settings', () => {
             `Set default unit to "${unitOfMeasure}" as a user default`
           )
           await expect(toastMessage).toBeVisible()
+          await expect(toastMessage).not.toBeVisible()
         })
       }
       await changeUnitOfMeasureInUserTab('in')

src/App.tsx

@@ -6,14 +6,12 @@ import { useHotkeys } from 'react-hotkeys-hook'
 import { useLoaderData, useNavigate } from 'react-router-dom'
 import { type IndexLoaderData } from 'lib/types'
 import { PATHS } from 'lib/paths'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { onboardingPaths } from 'routes/Onboarding/paths'
 import { useEngineConnectionSubscriptions } from 'hooks/useEngineConnectionSubscriptions'
 import { codeManager, engineCommandManager } from 'lib/singletons'
 import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath'
 import { isDesktop } from 'lib/isDesktop'
 import { useLspContext } from 'components/LspProvider'
-import { useRefreshSettings } from 'hooks/useRefreshSettings'
 import { ModelingSidebar } from 'components/ModelingSidebar/ModelingSidebar'
 import { LowerRightControls } from 'components/LowerRightControls'
 import ModalContainer from 'react-modal-promise'
@@ -30,6 +28,7 @@ import { useRouteLoaderData } from 'react-router-dom'
 import { useEngineCommands } from 'components/EngineCommands'
 import { commandBarActor } from 'machines/commandBarMachine'
 import { useToken } from 'machines/appMachine'
+import { useSettings } from 'machines/appMachine'
 maybeWriteToDisk()
   .then(() => {})
   .catch(() => {})
@@ -49,7 +48,6 @@ export function App() {
     })
   })
 
-  useRefreshSettings(PATHS.FILE + 'SETTINGS')
   const navigate = useNavigate()
   const filePath = useAbsoluteFilePath()
   const { onProjectOpen } = useLspContext()
@@ -71,7 +69,7 @@ export function App() {
 
   useHotKeyListener()
 
-  const { settings } = useSettingsAuthContext()
+  const settings = useSettings()
   const token = useToken()
 
   const coreDumpManager = useMemo(
@@ -81,7 +79,7 @@ export function App() {
 
   const {
     app: { onboardingStatus },
-  } = settings.context
+  } = settings
 
   useHotkeys('backspace', (e) => {
     e.preventDefault()

src/Router.tsx

@@ -28,10 +28,8 @@ import {
   fileLoader,
   homeLoader,
   onboardingRedirectLoader,
-  settingsLoader,
   telemetryLoader,
 } from 'lib/routeLoaders'
-import SettingsAuthProvider from 'components/SettingsAuthProvider'
 import LspProvider from 'components/LspProvider'
 import { KclContextProvider } from 'lang/KclProvider'
 import { ASK_TO_OPEN_QUERY_PARAM, BROWSER_PROJECT_NAME } from 'lib/constants'
@@ -45,34 +43,28 @@ import { AppStateProvider } from 'AppState'
 import { reportRejection } from 'lib/trap'
 import { RouteProvider } from 'components/RouteProvider'
 import { ProjectsContextProvider } from 'components/ProjectsContextProvider'
-import { OpenInDesktopAppHandler } from 'components/OpenInDesktopAppHandler'
 import { useToken } from 'machines/appMachine'
+import { OpenInDesktopAppHandler } from 'components/OpenInDesktopAppHandler'
 
 const createRouter = isDesktop() ? createHashRouter : createBrowserRouter
 
 const router = createRouter([
   {
-    loader: settingsLoader,
     id: PATHS.INDEX,
-    // TODO: Re-evaluate if this is true
-    /* Make sure auth is the outermost provider or else we will have
-     * inefficient re-renders, use the react profiler to see. */
     element: (
       <OpenInDesktopAppHandler>
         <RouteProvider>
-          <SettingsAuthProvider>
-            <LspProvider>
-              <ProjectsContextProvider>
-                <KclContextProvider>
-                  <AppStateProvider>
-                    <MachineManagerProvider>
-                      <Outlet />
-                    </MachineManagerProvider>
-                  </AppStateProvider>
-                </KclContextProvider>
-              </ProjectsContextProvider>
-            </LspProvider>
-          </SettingsAuthProvider>
+          <LspProvider>
+            <ProjectsContextProvider>
+              <KclContextProvider>
+                <AppStateProvider>
+                  <MachineManagerProvider>
+                    <Outlet />
+                  </MachineManagerProvider>
+                </AppStateProvider>
+              </KclContextProvider>
+            </ProjectsContextProvider>
+          </LspProvider>
         </RouteProvider>
       </OpenInDesktopAppHandler>
     ),
@@ -120,7 +112,6 @@ const router = createRouter([
         children: [
           {
             id: PATHS.FILE + 'SETTINGS',
-            loader: settingsLoader,
             children: [
               {
                 loader: onboardingRedirectLoader,
@@ -166,11 +157,9 @@ const router = createRouter([
             index: true,
             element: <></>,
             id: PATHS.HOME + 'SETTINGS',
-            loader: settingsLoader,
           },
           {
             path: makeUrlPathRelative(PATHS.SETTINGS),
-            loader: settingsLoader,
             element: <Settings />,
           },
           {

src/clientSideScene/ClientSideSceneComp.tsx

@@ -2,7 +2,6 @@ import { useRef, useEffect, useState, useMemo, Fragment } from 'react'
 import { useModelingContext } from 'hooks/useModelingContext'
 
 import { cameraMouseDragGuards } from 'lib/cameraControls'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { ARROWHEAD, DEBUG_SHOW_BOTH_SCENES } from './sceneInfra'
 import { ReactCameraProperties } from './CameraControls'
 import { throttle, toSync } from 'lib/utils'
@@ -48,6 +47,7 @@ import { ActionButton } from 'components/ActionButton'
 import { err, reportRejection, trap } from 'lib/trap'
 import { Node } from 'wasm-lib/kcl/bindings/Node'
 import { commandBarActor } from 'machines/commandBarMachine'
+import { useSettings } from 'machines/appMachine'
 
 function useShouldHideScene(): { hideClient: boolean; hideServer: boolean } {
   const [isCamMoving, setIsCamMoving] = useState(false)
@@ -76,8 +76,8 @@ export const ClientSideScene = ({
   cameraControls,
 }: {
   cameraControls: ReturnType<
-    typeof useSettingsAuthContext
-  >['settings']['context']['modeling']['mouseControls']['current']
+    typeof useSettings
+  >['modeling']['mouseControls']['current']
 }) => {
   const canvasRef = useRef<HTMLDivElement>(null)
   const { state, send, context } = useModelingContext()

src/components/CameraProjectionToggle.tsx

@@ -1,24 +1,22 @@
 import { Switch } from '@headlessui/react'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
+import { settingsActor, useSettings } from 'machines/appMachine'
 import { useEffect, useState } from 'react'
 
 export function CameraProjectionToggle() {
-  const { settings } = useSettingsAuthContext()
+  const settings = useSettings()
   const isCameraProjectionPerspective =
-    settings.context.modeling.cameraProjection.current === 'perspective'
+    settings.modeling.cameraProjection.current === 'perspective'
   const [checked, setChecked] = useState(isCameraProjectionPerspective)
 
   useEffect(() => {
-    setChecked(
-      settings.context.modeling.cameraProjection.current === 'perspective'
-    )
-  }, [settings.context.modeling.cameraProjection.current])
+    setChecked(settings.modeling.cameraProjection.current === 'perspective')
+  }, [settings.modeling.cameraProjection.current])
 
   return (
     <Switch
       checked={checked}
       onChange={(newValue) => {
-        settings.send({
+        settingsActor.send({
           type: 'set.modeling.cameraProjection',
           data: {
             level: 'user',

src/components/CommandBar/CommandBarKclInput.tsx

@@ -7,7 +7,6 @@ import {
 } from '@codemirror/autocomplete'
 import { EditorView, keymap, ViewUpdate } from '@codemirror/view'
 import { CustomIcon } from 'components/CustomIcon'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { CommandArgument, KclCommandValue } from 'lib/commandTypes'
 import { getSystemTheme } from 'lib/theme'
 import { useCalculateKclExpression } from 'lib/useCalculateKclExpression'
@@ -20,6 +19,7 @@ import { createIdentifier, createVariableDeclaration } from 'lang/modifyAst'
 import { useCodeMirror } from 'components/ModelingSidebar/ModelingPanes/CodeEditor'
 import { useSelector } from '@xstate/react'
 import { commandBarActor, useCommandBarState } from 'machines/commandBarMachine'
+import { useSettings } from 'machines/appMachine'
 import toast from 'react-hot-toast'
 
 const machineContextSelector = (snapshot?: {
@@ -42,7 +42,7 @@ function CommandBarKclInput({
   const previouslySetValue = commandBarState.context.argumentsToSubmit[
     arg.name
   ] as KclCommandValue | undefined
-  const { settings } = useSettingsAuthContext()
+  const settings = useSettings()
   const argMachineContext = useSelector(
     arg.machineActor,
     machineContextSelector
@@ -117,9 +117,9 @@ function CommandBarKclInput({
           : defaultValue.length,
     },
     theme:
-      settings.context.app.theme.current === 'system'
+      settings.app.theme.current === 'system'
         ? getSystemTheme()
-        : settings.context.app.theme.current,
+        : settings.app.theme.current,
     extensions: [
       varMentionsExtension,
       EditorView.updateListener.of((vu: ViewUpdate) => {

src/components/DownloadAppBanner.tsx

@@ -1,16 +1,16 @@
 import { Dialog } from '@headlessui/react'
 import { ActionButton } from './ActionButton'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { CREATE_FILE_URL_PARAM } from 'lib/constants'
+import { useSettings } from 'machines/appMachine'
 
 const DownloadAppBanner = () => {
   const [searchParams] = useSearchParams()
   const hasCreateFileParam = searchParams.has(CREATE_FILE_URL_PARAM)
-  const { settings } = useSettingsAuthContext()
+  const settings = useSettings()
   const [isBannerDismissed, setIsBannerDismissed] = useState(
-    settings.context.app.dismissWebBanner.current || hasCreateFileParam
+    settings.app.dismissWebBanner.current
   )
 
   return (

src/components/FileMachineProvider.tsx

@@ -1,7 +1,7 @@
 import { useMachine } from '@xstate/react'
-import { useNavigate, useRouteLoaderData } from 'react-router-dom'
+import { useLocation, useNavigate, useRouteLoaderData } from 'react-router-dom'
 import { type IndexLoaderData } from 'lib/types'
-import { PATHS } from 'lib/paths'
+import { BROWSER_PATH, PATHS } from 'lib/paths'
 import React, { createContext, useEffect, useMemo } from 'react'
 import { toast } from 'react-hot-toast'
 import {
@@ -27,9 +27,10 @@ import {
   getKclSamplesManifest,
   KclSamplesManifestItem,
 } from 'lib/getKclSamplesManifest'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { markOnce } from 'lib/performance'
 import { commandBarActor } from 'machines/commandBarMachine'
+import { settingsActor, useSettings } from 'machines/appMachine'
+import { createRouteCommands } from 'lib/commandBarConfigs/routeCommandConfig'
 import { useToken } from 'machines/appMachine'
 
 type MachineContext<T extends AnyStateMachine> = {
@@ -48,14 +49,51 @@ export const FileMachineProvider = ({
   children: React.ReactNode
 }) => {
   const navigate = useNavigate()
-  const { settings } = useSettingsAuthContext()
+  const location = useLocation()
   const token = useToken()
+  const settings = useSettings()
   const projectData = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
   const { project, file } = projectData
   const [kclSamples, setKclSamples] = React.useState<KclSamplesManifestItem[]>(
     []
   )
 
+  // Due to the route provider, i've moved this to the FileMachineProvider instead of CommandBarProvider
+  // This will register the commands to route to Telemetry, Home, and Settings.
+  useEffect(() => {
+    const filePath =
+      PATHS.FILE + '/' + encodeURIComponent(file?.path || BROWSER_PATH)
+    const { RouteTelemetryCommand, RouteHomeCommand, RouteSettingsCommand } =
+      createRouteCommands(navigate, location, filePath)
+    commandBarActor.send({
+      type: 'Remove commands',
+      data: {
+        commands: [
+          RouteTelemetryCommand,
+          RouteHomeCommand,
+          RouteSettingsCommand,
+        ],
+      },
+    })
+    if (location.pathname === PATHS.HOME) {
+      commandBarActor.send({
+        type: 'Add commands',
+        data: { commands: [RouteTelemetryCommand, RouteSettingsCommand] },
+      })
+    } else if (location.pathname.includes(PATHS.FILE)) {
+      commandBarActor.send({
+        type: 'Add commands',
+        data: {
+          commands: [
+            RouteTelemetryCommand,
+            RouteSettingsCommand,
+            RouteHomeCommand,
+          ],
+        },
+      })
+    }
+  }, [location])
+
   useEffect(() => {
     markOnce('code/didLoadFile')
     async function fetchKclSamples() {
@@ -323,7 +361,7 @@ export const FileMachineProvider = ({
         authToken: token ?? '',
         projectData,
         settings: {
-          defaultUnit: settings?.context?.modeling.defaultUnit.current ?? 'mm',
+          defaultUnit: settings.modeling.defaultUnit.current ?? 'mm',
         },
         specialPropsForSampleCommand: {
           onSubmit: async (data) => {
@@ -345,7 +383,7 @@ export const FileMachineProvider = ({
             // Either way, we want to overwrite the defaultUnit project setting
             // with the sample's setting.
             if (data.sampleUnits) {
-              settings.send({
+              settingsActor.send({
                 type: 'set.modeling.defaultUnit',
                 data: {
                   level: 'project',

src/components/HelpMenu.tsx

@@ -1,6 +1,5 @@
 import { Popover } from '@headlessui/react'
 import Tooltip from './Tooltip'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { CustomIcon } from './CustomIcon'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { PATHS } from 'lib/paths'
@@ -9,6 +8,7 @@ import { useAbsoluteFilePath } from 'hooks/useAbsoluteFilePath'
 import { useLspContext } from './LspProvider'
 import { openExternalBrowserIfDesktop } from 'lib/openWindow'
 import { reportRejection } from 'lib/trap'
+import { settingsActor } from 'machines/appMachine'
 
 const HelpMenuDivider = () => (
   <div className="h-[1px] bg-chalkboard-110 dark:bg-chalkboard-80" />
@@ -20,7 +20,6 @@ export function HelpMenu(props: React.PropsWithChildren) {
   const filePath = useAbsoluteFilePath()
   const isInProject = location.pathname.includes(PATHS.FILE)
   const navigate = useNavigate()
-  const { settings } = useSettingsAuthContext()
 
   return (
     <Popover className="relative">
@@ -106,7 +105,7 @@ export function HelpMenu(props: React.PropsWithChildren) {
         <HelpMenuItem
           as="button"
           onClick={() => {
-            settings.send({
+            settingsActor.send({
               type: 'set.app.onboardingStatus',
               data: {
                 value: '',

src/components/LspProvider.tsx

@@ -10,7 +10,6 @@ import {
 import { TEST, VITE_KC_API_BASE_URL } from 'env'
 import { kcl } from 'editor/plugins/lsp/kcl/language'
 import { copilotPlugin } from 'editor/plugins/lsp/copilot'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { Extension } from '@codemirror/state'
 import { LanguageSupport } from '@codemirror/language'
 import { useNavigate } from 'react-router-dom'

src/components/ModelingMachineProvider.tsx

@@ -22,7 +22,6 @@ import {
   modelingMachineDefaultContext,
 } from 'machines/modelingMachine'
 import { useSetupEngineManager } from 'hooks/useSetupEngineManager'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import {
   isCursorInSketchCommandRange,
   updateSketchDetailsNodePaths,
@@ -110,6 +109,7 @@ import { kclEditorActor } from 'machines/kclEditorMachine'
 import { commandBarActor } from 'machines/commandBarMachine'
 import { useToken } from 'machines/appMachine'
 import { getNodePathFromSourceRange } from 'lang/queryAstNodePathUtils'
+import { useSettings } from 'machines/appMachine'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -131,19 +131,15 @@ export const ModelingMachineProvider = ({
   children: React.ReactNode
 }) => {
   const {
-    settings: {
-      context: {
-        app: { theme, enableSSAO, allowOrbitInSketchMode },
-        modeling: {
-          defaultUnit,
-          cameraProjection,
-          highlightEdges,
-          showScaleGrid,
-          cameraOrbit,
-        },
-      },
+    app: { theme, enableSSAO, allowOrbitInSketchMode },
+    modeling: {
+      defaultUnit,
+      cameraProjection,
+      highlightEdges,
+      showScaleGrid,
+      cameraOrbit,
     },
-  } = useSettingsAuthContext()
+  } = useSettings()
   const previousAllowOrbitInSketchMode = useRef(allowOrbitInSketchMode.current)
   const navigate = useNavigate()
   const { context, send: fileMachineSend } = useFileContext()

src/components/ModelingSidebar/ModelingPane.tsx

@@ -1,12 +1,12 @@
 import { ReactNode } from 'react'
 import styles from './ModelingPane.module.css'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { ActionButton } from 'components/ActionButton'
 import Tooltip from 'components/Tooltip'
 import { CustomIconName } from 'components/CustomIcon'
 import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
 import { ActionIcon } from 'components/ActionIcon'
 import { onboardingPaths } from 'routes/Onboarding/paths'
+import { useSettings } from 'machines/appMachine'
 
 export interface ModelingPaneProps {
   id: string
@@ -68,8 +68,8 @@ export const ModelingPane = ({
   title,
   ...props
 }: ModelingPaneProps) => {
-  const { settings } = useSettingsAuthContext()
-  const onboardingStatus = settings.context.app.onboardingStatus
+  const settings = useSettings()
+  const onboardingStatus = settings.app.onboardingStatus
   const pointerEventsCssClass =
     onboardingStatus.current === onboardingPaths.CAMERA
       ? 'pointer-events-none '

src/components/ModelingSidebar/ModelingPanes/KclEditorPane.tsx

@@ -1,5 +1,4 @@
 import { TEST } from 'env'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { Themes, getSystemTheme } from 'lib/theme'
 import { useEffect, useMemo, useRef } from 'react'
 import { highlightSelectionMatches, searchKeymap } from '@codemirror/search'
@@ -51,6 +50,7 @@ import {
 } from 'machines/kclEditorMachine'
 import { useSelector } from '@xstate/react'
 import { modelingMachineEvent } from 'editor/manager'
+import { useSettings } from 'machines/appMachine'
 
 export const editorShortcutMeta = {
   formatCode: {
@@ -63,9 +63,7 @@ export const editorShortcutMeta = {
 }
 
 export const KclEditorPane = () => {
-  const {
-    settings: { context },
-  } = useSettingsAuthContext()
+  const context = useSettings()
   const lastSelectionEvent = useSelector(kclEditorActor, selectionEventSelector)
   const editorIsMounted = useSelector(kclEditorActor, editorIsMountedSelector)
   const theme =

src/components/ModelingSidebar/ModelingSidebar.tsx

@@ -1,4 +1,3 @@
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { Resizable } from 're-resizable'
 import {
   MouseEventHandler,
@@ -21,6 +20,7 @@ import { MachineManagerContext } from 'components/MachineManagerProvider'
 import { onboardingPaths } from 'routes/Onboarding/paths'
 import { SIDEBAR_BUTTON_SUFFIX } from 'lib/constants'
 import { commandBarActor } from 'machines/commandBarMachine'
+import { useSettings } from 'machines/appMachine'
 
 interface ModelingSidebarProps {
   paneOpacity: '' | 'opacity-20' | 'opacity-40'
@@ -38,23 +38,23 @@ function getPlatformString(): 'web' | 'desktop' {
 export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
   const machineManager = useContext(MachineManagerContext)
   const kclContext = useKclContext()
-  const { settings } = useSettingsAuthContext()
-  const onboardingStatus = settings.context.app.onboardingStatus
+  const settings = useSettings()
+  const onboardingStatus = settings.app.onboardingStatus
   const { send, context } = useModelingContext()
   const pointerEventsCssClass =
     onboardingStatus.current === onboardingPaths.CAMERA ||
     context.store?.openPanes.length === 0
       ? 'pointer-events-none '
       : 'pointer-events-auto '
-  const showDebugPanel = settings.context.modeling.showDebugPanel
+  const showDebugPanel = settings.modeling.showDebugPanel
 
   const paneCallbackProps = useMemo(
     () => ({
       kclContext,
-      settings: settings.context,
+      settings,
       platform: getPlatformString(),
     }),
-    [kclContext.diagnostics, settings.context]
+    [kclContext.diagnostics, settings]
   )
 
   const sidebarActions: SidebarAction[] = [
@@ -144,7 +144,7 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
         },
       })
     }
-  }, [settings.context])
+  }, [settings.modeling.showDebugPanel])
 
   const togglePane = useCallback(
     (newPane: SidebarType) => {

src/components/NetworkHealthIndicator.test.tsx

@@ -1,6 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import { BrowserRouter } from 'react-router-dom'
-import { SettingsAuthProviderJest } from './SettingsAuthProvider'
 import {
   NETWORK_HEALTH_TEXT,
   NetworkHealthIndicator,
@@ -9,11 +8,7 @@ import { NetworkHealthState } from 'hooks/useNetworkStatus'
 
 function TestWrap({ children }: { children: React.ReactNode }) {
   // wrap in router and xState context
-  return (
-    <BrowserRouter>
-      <SettingsAuthProviderJest>{children}</SettingsAuthProviderJest>
-    </BrowserRouter>
-  )
+  return <BrowserRouter>{children}</BrowserRouter>
 }
 
 // Our Playwright tests for this are much more comprehensive.

src/components/ProjectSidebarMenu.test.tsx

@@ -1,7 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import { BrowserRouter } from 'react-router-dom'
 import ProjectSidebarMenu from './ProjectSidebarMenu'
-import { SettingsAuthProviderJest } from './SettingsAuthProvider'
 import { Project } from 'lib/project'
 
 const now = new Date()
@@ -32,9 +31,7 @@ describe('ProjectSidebarMenu tests', () => {
   test('Disables popover menu by default', () => {
     render(
       <BrowserRouter>
-        <SettingsAuthProviderJest>
-          <ProjectSidebarMenu project={projectWellFormed} />
-        </SettingsAuthProviderJest>
+        <ProjectSidebarMenu project={projectWellFormed} />
       </BrowserRouter>
     )
 

src/components/ProjectSidebarMenu.tsx

@@ -18,7 +18,6 @@ import { SnapshotFrom } from 'xstate'
 import { commandBarActor } from 'machines/commandBarMachine'
 import { useSelector } from '@xstate/react'
 import { copyFileShareLink } from 'lib/links'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { useToken } from 'machines/appMachine'
 
 const ProjectSidebarMenu = ({
@@ -103,7 +102,6 @@ function ProjectMenuPopover({
   const location = useLocation()
   const navigate = useNavigate()
   const filePath = useAbsoluteFilePath()
-  useSettingsAuthContext()
   const token = useToken()
   const machineManager = useContext(MachineManagerContext)
   const commands = useSelector(commandBarActor, commandsSelector)

src/components/ProjectsContextProvider.tsx

@@ -20,11 +20,11 @@ import {
   getUniqueProjectName,
   getNextFileName,
 } from 'lib/desktopFS'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import useStateMachineCommands from 'hooks/useStateMachineCommands'
 import { projectsCommandBarConfig } from 'lib/commandBarConfigs/projectsCommandConfig'
 import { isDesktop } from 'lib/isDesktop'
 import { commandBarActor } from 'machines/commandBarMachine'
+import { useSettings } from 'machines/appMachine'
 import {
   CREATE_FILE_URL_PARAM,
   FILE_EXT,
@@ -77,9 +77,7 @@ const ProjectsContextWeb = ({ children }: { children: React.ReactNode }) => {
     searchParams.delete('units')
     setSearchParams(searchParams)
   }, [searchParams, setSearchParams])
-  const {
-    settings: { context: settings },
-  } = useSettingsAuthContext()
+  const settings = useSettings()
 
   const [state, send, actor] = useMachine(
     projectsMachine.provide({
@@ -183,9 +181,7 @@ const ProjectsContextDesktop = ({
     setSearchParams(searchParams)
   }, [searchParams, setSearchParams])
   const { onProjectOpen } = useLspContext()
-  const {
-    settings: { context: settings },
-  } = useSettingsAuthContext()
+  const settings = useSettings()
 
   const [projectsLoaderTrigger, setProjectsLoaderTrigger] = useState(0)
   const { projectPaths, projectsDir } = useProjectsLoader([

src/components/RefreshButton.tsx

@@ -5,7 +5,6 @@ import { codeManager, engineCommandManager } from 'lib/singletons'
 import React, { useMemo } from 'react'
 import toast from 'react-hot-toast'
 import Tooltip from './Tooltip'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { reportRejection } from 'lib/trap'
 import { toSync } from 'lib/utils'
 import { useToken } from 'machines/appMachine'

src/components/RouteProvider.tsx

@@ -1,17 +1,36 @@
 import { useEffect, useState, createContext, ReactNode } from 'react'
-import { useNavigation, useLocation } from 'react-router-dom'
+import {
+  useNavigation,
+  useLocation,
+  useNavigate,
+  useRouteLoaderData,
+} from 'react-router-dom'
 import { PATHS } from 'lib/paths'
 import { markOnce } from 'lib/performance'
 import { useAuthNavigation } from 'hooks/useAuthNavigation'
+import { useAuthState } from 'machines/appMachine'
+import { IndexLoaderData } from 'lib/types'
+import { getAppSettingsFilePath } from 'lib/desktop'
+import { isDesktop } from 'lib/isDesktop'
+import { trap } from 'lib/trap'
+import { useFileSystemWatcher } from 'hooks/useFileSystemWatcher'
+import { loadAndValidateSettings } from 'lib/settings/settingsUtils'
+import { settingsActor } from 'machines/appMachine'
 
 export const RouteProviderContext = createContext({})
 
 export function RouteProvider({ children }: { children: ReactNode }) {
   useAuthNavigation()
+  const loadedProject = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
   const [first, setFirstState] = useState(true)
+  const [settingsPath, setSettingsPath] = useState<string | undefined>(
+    undefined
+  )
   const navigation = useNavigation()
+  const navigate = useNavigate()
   const location = useLocation()
 
+  const authState = useAuthState()
   useEffect(() => {
     // On initialization, the react-router-dom does not send a 'loading' state event.
     // it sends an idle event first.
@@ -28,6 +47,41 @@ export function RouteProvider({ children }: { children: ReactNode }) {
     setFirstState(false)
   }, [navigation])
 
+  useEffect(() => {
+    if (!isDesktop()) return
+    getAppSettingsFilePath().then(setSettingsPath).catch(trap)
+  }, [])
+
+  useFileSystemWatcher(
+    async (eventType: string) => {
+      // If there is a projectPath but it no longer exists it means
+      // it was exterally removed. If we let the code past this condition
+      // execute it will recreate the directory due to code in
+      // loadAndValidateSettings trying to recreate files. I do not
+      // wish to change the behavior in case anything else uses it.
+      // Go home.
+      if (loadedProject?.project?.path) {
+        if (!window.electron.exists(loadedProject?.project?.path)) {
+          navigate(PATHS.HOME)
+          return
+        }
+      }
+
+      // Only reload if there are changes. Ignore everything else.
+      if (eventType !== 'change') return
+
+      const data = await loadAndValidateSettings(loadedProject?.project?.path)
+      settingsActor.send({
+        type: 'Set all settings',
+        settings: data.settings,
+        doNotPersist: true,
+      })
+    },
+    [settingsPath, loadedProject?.project?.path].filter(
+      (x: string | undefined) => x !== undefined
+    )
+  )
+
   return (
     <RouteProviderContext.Provider value={{}}>
       {children}

src/components/Settings/AllSettingsFields.tsx

@@ -1,5 +1,4 @@
 import decamelize from 'decamelize'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { Setting } from 'lib/settings/initialSettings'
 import { SetEventTypes, SettingsLevel } from 'lib/settings/settingsTypes'
 import {
@@ -25,6 +24,8 @@ import { useLspContext } from 'components/LspProvider'
 import { toSync } from 'lib/utils'
 import { reportRejection } from 'lib/trap'
 import { openExternalBrowserIfDesktop } from 'lib/openWindow'
+import { settingsActor, useSettings } from 'machines/appMachine'
+import { useSelector } from '@xstate/react'
 
 interface AllSettingsFieldsProps {
   searchParamTab: SettingsLevel
@@ -40,9 +41,7 @@ export const AllSettingsFields = forwardRef(
     const navigate = useNavigate()
     const { onProjectOpen } = useLspContext()
     const dotDotSlash = useDotDotSlash()
-    const {
-      settings: { send, context, state },
-    } = useSettingsAuthContext()
+    const context = useSettings()
 
     const projectPath = useMemo(() => {
       const filteredPathname = location.pathname
@@ -62,7 +61,7 @@ export const AllSettingsFields = forwardRef(
     }, [location.pathname])
 
     function restartOnboarding() {
-      send({
+      settingsActor.send({
         type: `set.app.onboardingStatus`,
         data: { level: 'user', value: '' },
       })
@@ -72,11 +71,14 @@ export const AllSettingsFields = forwardRef(
      * A "listener" for the XState to return to "idle" state
      * when the user resets the onboarding, using the callback above
      */
+    const isSettingsMachineIdle = useSelector(settingsActor, (s) =>
+      s.matches('idle')
+    )
     useEffect(() => {
       async function navigateToOnboardingStart() {
         if (
-          state.context.app.onboardingStatus.user === '' &&
-          state.matches('idle')
+          context.app.onboardingStatus.current === '' &&
+          isSettingsMachineIdle
         ) {
           if (isFileSettings) {
             // If we're in a project, first navigate to the onboarding start here
@@ -91,7 +93,12 @@ export const AllSettingsFields = forwardRef(
       }
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       navigateToOnboardingStart()
-    }, [isFileSettings, navigate, state])
+    }, [
+      isFileSettings,
+      navigate,
+      isSettingsMachineIdle,
+      context.app.onboardingStatus.current,
+    ])
 
     return (
       <div className="relative overflow-y-auto">
@@ -142,7 +149,7 @@ export const AllSettingsFields = forwardRef(
                         }
                         parentLevel={setting.getParentLevel(searchParamTab)}
                         onFallback={() =>
-                          send({
+                          settingsActor.send({
                             type: `set.${category}.${settingName}`,
                             data: {
                               level: searchParamTab,
@@ -218,7 +225,7 @@ export const AllSettingsFields = forwardRef(
               <ActionButton
                 Element="button"
                 onClick={() => {
-                  send({
+                  settingsActor.send({
                     type: 'Reset settings',
                     level: searchParamTab,
                   })

src/components/Settings/SettingsFieldInput.tsx

@@ -1,5 +1,4 @@
 import { Toggle } from 'components/Toggle/Toggle'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { Setting } from 'lib/settings/initialSettings'
 import {
   SetEventTypes,
@@ -7,6 +6,7 @@ import {
   WildcardSetEvent,
 } from 'lib/settings/settingsTypes'
 import { getSettingInputType } from 'lib/settings/settingsUtils'
+import { settingsActor, useSettings } from 'machines/appMachine'
 import { useMemo } from 'react'
 import { EventFrom } from 'xstate'
 
@@ -25,9 +25,8 @@ export function SettingsFieldInput({
   settingsLevel,
   setting,
 }: SettingsFieldInputProps) {
-  const {
-    settings: { context, send },
-  } = useSettingsAuthContext()
+  const context = useSettings()
+  const send = settingsActor.send
   const options = useMemo(() => {
     return setting.commandConfig &&
       'options' in setting.commandConfig &&

src/components/Settings/SettingsSearchBar.tsx

@@ -2,10 +2,10 @@ import { Combobox } from '@headlessui/react'
 import { CustomIcon } from 'components/CustomIcon'
 import decamelize from 'decamelize'
 import Fuse from 'fuse.js'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { interactionMap } from 'lib/settings/initialKeybindings'
 import { Setting } from 'lib/settings/initialSettings'
 import { SettingsLevel } from 'lib/settings/settingsTypes'
+import { useSettings } from 'machines/appMachine'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { useNavigate } from 'react-router-dom'
@@ -32,23 +32,22 @@ export function SettingsSearchBar() {
   )
   const navigate = useNavigate()
   const [query, setQuery] = useState('')
-  const { settings } = useSettingsAuthContext()
+  const settings = useSettings()
   const settingsAsSearchable: SettingsSearchItem[] = useMemo(
     () => [
-      ...Object.entries(settings.state.context).flatMap(
-        ([category, categorySettings]) =>
-          Object.entries(categorySettings).flatMap(([settingName, setting]) => {
-            const s = setting as Setting
-            return (['project', 'user'] satisfies SettingsLevel[])
-              .filter((l) => s.hideOnLevel !== l)
-              .map((l) => ({
-                category: decamelize(category, { separator: ' ' }),
-                name: settingName,
-                description: s.description ?? '',
-                displayName: decamelize(settingName, { separator: ' ' }),
-                level: l as ExtendedSettingsLevel,
-              }))
-          })
+      ...Object.entries(settings).flatMap(([category, categorySettings]) =>
+        Object.entries(categorySettings).flatMap(([settingName, setting]) => {
+          const s = setting
+          return (['project', 'user'] satisfies SettingsLevel[])
+            .filter((l) => s.hideOnLevel !== l)
+            .map((l) => ({
+              category: decamelize(category, { separator: ' ' }),
+              name: settingName,
+              description: s.description ?? '',
+              displayName: decamelize(settingName, { separator: ' ' }),
+              level: l,
+            }))
+        })
       ),
       ...Object.entries(interactionMap).flatMap(
         ([category, categoryKeybindings]) =>
@@ -61,7 +60,7 @@ export function SettingsSearchBar() {
           }))
       ),
     ],
-    [settings.state.context]
+    [settings]
   )
   const [searchResults, setSearchResults] = useState(settingsAsSearchable)
 

src/components/Settings/SettingsSectionsList.tsx

@@ -1,8 +1,8 @@
 import decamelize from 'decamelize'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { Setting } from 'lib/settings/initialSettings'
 import { SettingsLevel } from 'lib/settings/settingsTypes'
 import { shouldHideSetting } from 'lib/settings/settingsUtils'
+import { useSettings } from 'machines/appMachine'
 
 interface SettingsSectionsListProps {
   searchParamTab: SettingsLevel
@@ -13,9 +13,7 @@ export function SettingsSectionsList({
   searchParamTab,
   scrollRef,
 }: SettingsSectionsListProps) {
-  const {
-    settings: { context },
-  } = useSettingsAuthContext()
+  const context = useSettings()
   return (
     <div className="flex w-32 flex-col gap-3 pr-2 py-1 border-0 border-r border-r-chalkboard-20 dark:border-r-chalkboard-90">
       {Object.entries(context)

src/components/SettingsAuthProvider.tsx

@@ -1,383 +0,0 @@
-import { trap } from 'lib/trap'
-import { useMachine, useSelector } from '@xstate/react'
-import { useNavigate, useRouteLoaderData, useLocation } from 'react-router-dom'
-import { PATHS, BROWSER_PATH } from 'lib/paths'
-import React, { createContext, useEffect, useState } from 'react'
-import { settingsMachine } from 'machines/settingsMachine'
-import { toast } from 'react-hot-toast'
-import {
-  darkModeMatcher,
-  getOppositeTheme,
-  setThemeClass,
-  Themes,
-} from 'lib/theme'
-import decamelize from 'decamelize'
-import { Actor, AnyStateMachine, ContextFrom, Prop, StateFrom } from 'xstate'
-import {
-  kclManager,
-  sceneInfra,
-  engineCommandManager,
-  sceneEntitiesManager,
-} from 'lib/singletons'
-import { IndexLoaderData } from 'lib/types'
-import { settings } from 'lib/settings/initialSettings'
-import {
-  createSettingsCommand,
-  settingsWithCommandConfigs,
-} from 'lib/commandBarConfigs/settingsCommandConfig'
-import { Command } from 'lib/commandTypes'
-import { BaseUnit } from 'lib/settings/settingsTypes'
-import {
-  saveSettings,
-  loadAndValidateSettings,
-} from 'lib/settings/settingsUtils'
-import { reportRejection } from 'lib/trap'
-import { getAppSettingsFilePath } from 'lib/desktop'
-import { isDesktop } from 'lib/isDesktop'
-import { useFileSystemWatcher } from 'hooks/useFileSystemWatcher'
-import { codeManager } from 'lib/singletons'
-import { createRouteCommands } from 'lib/commandBarConfigs/routeCommandConfig'
-import { commandBarActor } from 'machines/commandBarMachine'
-
-type MachineContext<T extends AnyStateMachine> = {
-  state: StateFrom<T>
-  context: ContextFrom<T>
-  send: Prop<Actor<T>, 'send'>
-}
-
-type SettingsAuthContextType = {
-  settings: MachineContext<typeof settingsMachine>
-}
-
-/**
- * This variable is used to store the last snapshot of the settings context
- * for use outside of React, such as in `wasm.ts`. It is updated every time
- * the settings machine changes with `useSelector`.
- * TODO: when we decouple XState from React, we can just subscribe to the actor directly from `wasm.ts`
- */
-export let lastSettingsContextSnapshot:
-  | ContextFrom<typeof settingsMachine>
-  | undefined
-
-export const SettingsAuthContext = createContext({} as SettingsAuthContextType)
-
-export const SettingsAuthProvider = ({
-  children,
-}: {
-  children: React.ReactNode
-}) => {
-  const loadedSettings = useRouteLoaderData(PATHS.INDEX) as typeof settings
-  const loadedProject = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
-  return (
-    <SettingsAuthProviderBase
-      loadedSettings={loadedSettings}
-      loadedProject={loadedProject}
-    >
-      {children}
-    </SettingsAuthProviderBase>
-  )
-}
-
-// For use in jest tests we don't want to use the loader data
-// and mock the whole Router
-export const SettingsAuthProviderJest = ({
-  children,
-}: {
-  children: React.ReactNode
-}) => {
-  const loadedSettings = settings
-  return (
-    <SettingsAuthProviderBase loadedSettings={loadedSettings}>
-      {children}
-    </SettingsAuthProviderBase>
-  )
-}
-
-export const SettingsAuthProviderBase = ({
-  children,
-  loadedSettings,
-  loadedProject,
-}: {
-  children: React.ReactNode
-  loadedSettings: typeof settings
-  loadedProject?: IndexLoaderData
-}) => {
-  const location = useLocation()
-  const navigate = useNavigate()
-  const [settingsPath, setSettingsPath] = useState<string | undefined>(
-    undefined
-  )
-
-  const [settingsState, settingsSend, settingsActor] = useMachine(
-    settingsMachine.provide({
-      actions: {
-        //TODO: batch all these and if that's difficult to do from tsx,
-        // make it easy to do
-
-        setClientSideSceneUnits: ({ context, event }) => {
-          const newBaseUnit =
-            event.type === 'set.modeling.defaultUnit'
-              ? (event.data.value as BaseUnit)
-              : context.modeling.defaultUnit.current
-          sceneInfra.baseUnit = newBaseUnit
-        },
-        setEngineTheme: ({ context }) => {
-          engineCommandManager
-            .setTheme(context.app.theme.current)
-            .catch(reportRejection)
-        },
-        setClientTheme: ({ context }) => {
-          const opposingTheme = getOppositeTheme(context.app.theme.current)
-          sceneInfra.theme = opposingTheme
-          sceneEntitiesManager.updateSegmentBaseColor(opposingTheme)
-        },
-        setAllowOrbitInSketchMode: ({ context }) => {
-          sceneInfra.camControls._setting_allowOrbitInSketchMode =
-            context.app.allowOrbitInSketchMode.current
-          // ModelingMachineProvider will do a use effect to trigger the camera engine sync
-        },
-        toastSuccess: ({ event }) => {
-          if (!('data' in event)) return
-          const eventParts = event.type.replace(/^set./, '').split('.') as [
-            keyof typeof settings,
-            string
-          ]
-          const truncatedNewValue = event.data.value?.toString().slice(0, 28)
-          const message =
-            `Set ${decamelize(eventParts[1], { separator: ' ' })}` +
-            (truncatedNewValue
-              ? ` to "${truncatedNewValue}${
-                  truncatedNewValue.length === 28 ? '...' : ''
-                }"${
-                  event.data.level === 'project'
-                    ? ' for this project'
-                    : ' as a user default'
-                }`
-              : '')
-          toast.success(message, {
-            duration: message.split(' ').length * 100 + 1500,
-            id: `${event.type}.success`,
-          })
-        },
-        'Execute AST': ({ context, event }) => {
-          try {
-            const relevantSetting = (s: typeof settings) => {
-              return (
-                s.modeling?.defaultUnit?.current !==
-                  context.modeling.defaultUnit.current ||
-                s.modeling.showScaleGrid.current !==
-                  context.modeling.showScaleGrid.current ||
-                s.modeling?.highlightEdges.current !==
-                  context.modeling.highlightEdges.current
-              )
-            }
-
-            const allSettingsIncludesUnitChange =
-              event.type === 'Set all settings' &&
-              relevantSetting(event.settings)
-            const resetSettingsIncludesUnitChange =
-              event.type === 'Reset settings' && relevantSetting(settings)
-
-            if (
-              event.type === 'set.modeling.defaultUnit' ||
-              event.type === 'set.modeling.showScaleGrid' ||
-              event.type === 'set.modeling.highlightEdges' ||
-              allSettingsIncludesUnitChange ||
-              resetSettingsIncludesUnitChange
-            ) {
-              // Unit changes requires a re-exec of code
-              // eslint-disable-next-line @typescript-eslint/no-floating-promises
-              kclManager.executeCode(true)
-            } else {
-              // For any future logging we'd like to do
-              // console.log(
-              //   'Not re-executing AST because the settings change did not affect the code interpretation'
-              // )
-            }
-          } catch (e) {
-            console.error('Error executing AST after settings change', e)
-          }
-        },
-        async persistSettings({ context, event }) {
-          // Without this, when a user changes the file, it'd
-          // create a detection loop with the file-system watcher.
-          if (event.doNotPersist) return
-
-          codeManager.writeCausedByAppCheckedInFileTreeFileSystemWatcher = true
-          return saveSettings(context, loadedProject?.project?.path)
-        },
-      },
-    }),
-    { input: loadedSettings }
-  )
-  // Any time the actor changes, update the settings state for external use
-  useSelector(settingsActor, (s) => {
-    lastSettingsContextSnapshot = s.context
-  })
-
-  useEffect(() => {
-    if (!isDesktop()) return
-    getAppSettingsFilePath().then(setSettingsPath).catch(trap)
-  }, [])
-
-  useFileSystemWatcher(
-    async (eventType: string) => {
-      // If there is a projectPath but it no longer exists it means
-      // it was exterally removed. If we let the code past this condition
-      // execute it will recreate the directory due to code in
-      // loadAndValidateSettings trying to recreate files. I do not
-      // wish to change the behavior in case anything else uses it.
-      // Go home.
-      if (loadedProject?.project?.path) {
-        if (!window.electron.exists(loadedProject?.project?.path)) {
-          navigate(PATHS.HOME)
-          return
-        }
-      }
-
-      // Only reload if there are changes. Ignore everything else.
-      if (eventType !== 'change') return
-
-      const data = await loadAndValidateSettings(loadedProject?.project?.path)
-      settingsSend({
-        type: 'Set all settings',
-        settings: data.settings,
-        doNotPersist: true,
-      })
-    },
-    [settingsPath, loadedProject?.project?.path].filter(
-      (x: string | undefined) => x !== undefined
-    )
-  )
-
-  // Add settings commands to the command bar
-  // They're treated slightly differently than other commands
-  // Because their state machine doesn't have a meaningful .nextEvents,
-  // and they are configured statically in initialiSettings
-  useEffect(() => {
-    // If the user wants to hide the settings commands
-    //from the command bar don't add them.
-    if (settingsState.context.commandBar.includeSettings.current === false)
-      return
-
-    const commands = settingsWithCommandConfigs(settingsState.context)
-      .map((type) =>
-        createSettingsCommand({
-          type,
-          send: settingsSend,
-          context: settingsState.context,
-          actor: settingsActor,
-          isProjectAvailable: loadedProject !== undefined,
-        })
-      )
-      .filter((c) => c !== null) as Command[]
-
-    commandBarActor.send({ type: 'Add commands', data: { commands: commands } })
-
-    return () => {
-      commandBarActor.send({
-        type: 'Remove commands',
-        data: { commands },
-      })
-    }
-  }, [
-    settingsState,
-    settingsSend,
-    settingsActor,
-    commandBarActor.send,
-    settingsWithCommandConfigs,
-  ])
-
-  // Due to the route provider, i've moved this to the SettingsAuthProvider instead of CommandBarProvider
-  // This will register the commands to route to Telemetry, Home, and Settings.
-  useEffect(() => {
-    const filePath =
-      PATHS.FILE +
-      '/' +
-      encodeURIComponent(loadedProject?.file?.path || BROWSER_PATH)
-    const { RouteTelemetryCommand, RouteHomeCommand, RouteSettingsCommand } =
-      createRouteCommands(navigate, location, filePath)
-    commandBarActor.send({
-      type: 'Remove commands',
-      data: {
-        commands: [
-          RouteTelemetryCommand,
-          RouteHomeCommand,
-          RouteSettingsCommand,
-        ],
-      },
-    })
-    if (location.pathname === PATHS.HOME) {
-      commandBarActor.send({
-        type: 'Add commands',
-        data: { commands: [RouteTelemetryCommand, RouteSettingsCommand] },
-      })
-    } else if (location.pathname.includes(PATHS.FILE)) {
-      commandBarActor.send({
-        type: 'Add commands',
-        data: {
-          commands: [
-            RouteTelemetryCommand,
-            RouteSettingsCommand,
-            RouteHomeCommand,
-          ],
-        },
-      })
-    }
-  }, [location])
-
-  // Listen for changes to the system theme and update the app theme accordingly
-  // This is only done if the theme setting is set to 'system'.
-  // It can't be done in XState (in an invoked callback, for example)
-  // because there doesn't seem to be a good way to listen to
-  // events outside of the machine that also depend on the machine's context
-  useEffect(() => {
-    const listener = (e: MediaQueryListEvent) => {
-      if (settingsState.context.app.theme.current !== 'system') return
-      setThemeClass(e.matches ? Themes.Dark : Themes.Light)
-    }
-
-    darkModeMatcher?.addEventListener('change', listener)
-    return () => darkModeMatcher?.removeEventListener('change', listener)
-  }, [settingsState.context])
-
-  /**
-   * Update the --primary-hue CSS variable
-   * to match the setting app.themeColor.current
-   */
-  useEffect(() => {
-    document.documentElement.style.setProperty(
-      `--primary-hue`,
-      settingsState.context.app.themeColor.current
-    )
-  }, [settingsState.context.app.themeColor.current])
-
-  /**
-   * Update the --cursor-color CSS variable
-   * based on the setting textEditor.blinkingCursor.current
-   */
-  useEffect(() => {
-    document.documentElement.style.setProperty(
-      `--cursor-color`,
-      settingsState.context.textEditor.blinkingCursor.current
-        ? 'auto'
-        : 'transparent'
-    )
-  }, [settingsState.context.textEditor.blinkingCursor.current])
-
-  return (
-    <SettingsAuthContext.Provider
-      value={{
-        settings: {
-          state: settingsState,
-          context: settingsState.context,
-          send: settingsSend,
-        },
-      }}
-    >
-      {children}
-    </SettingsAuthContext.Provider>
-  )
-}
-
-export default SettingsAuthProvider

src/components/Stream.tsx

@@ -1,6 +1,5 @@
 import { MouseEventHandler, useEffect, useRef, useState } from 'react'
 import Loading from './Loading'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { useModelingContext } from 'hooks/useModelingContext'
 import { useNetworkContext } from 'hooks/useNetworkContext'
 import { NetworkHealthState } from 'hooks/useNetworkStatus'
@@ -20,8 +19,8 @@ import { IndexLoaderData } from 'lib/types'
 import { err, reportRejection } from 'lib/trap'
 import { getArtifactOfTypes } from 'lang/std/artifactGraph'
 import { ViewControlContextMenu } from './ViewControlMenu'
-import { commandBarActor, useCommandBarState } from 'machines/commandBarMachine'
-import { useSelector } from '@xstate/react'
+import { useCommandBarState } from 'machines/commandBarMachine'
+import { useSettings } from 'machines/appMachine'
 
 enum StreamState {
   Playing = 'playing',
@@ -34,7 +33,7 @@ export const Stream = () => {
   const [isLoading, setIsLoading] = useState(true)
   const videoWrapperRef = useRef<HTMLDivElement>(null)
   const videoRef = useRef<HTMLVideoElement>(null)
-  const { settings } = useSettingsAuthContext()
+  const settings = useSettings()
   const { state, send } = useModelingContext()
   const commandBarState = useCommandBarState()
   const { mediaStream } = useAppStream()
@@ -42,7 +41,7 @@ export const Stream = () => {
   const [streamState, setStreamState] = useState(StreamState.Unset)
   const { file } = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
 
-  const IDLE = settings.context.app.streamIdleMode.current
+  const IDLE = settings.app.streamIdleMode.current
 
   const isNetworkOkay =
     overallState === NetworkHealthState.Ok ||
@@ -336,7 +335,7 @@ export const Stream = () => {
         id="video-stream"
       />
       <ClientSideScene
-        cameraControls={settings.context.modeling.mouseControls.current}
+        cameraControls={settings.modeling.mouseControls.current}
       />
       {(streamState === StreamState.Paused ||
         streamState === StreamState.Resuming) && (

src/components/UnitsMenu.tsx

@@ -1,5 +1,5 @@
 import { Popover } from '@headlessui/react'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
+import { settingsActor, useSettings } from 'machines/appMachine'
 import { changeKclSettings, unitLengthToUnitLen } from 'lang/wasm'
 import { baseUnitLabels, baseUnitsUnion } from 'lib/settings/settingsTypes'
 import { codeManager, kclManager } from 'lib/singletons'
@@ -8,24 +8,25 @@ import { useEffect, useState } from 'react'
 import toast from 'react-hot-toast'
 
 export function UnitsMenu() {
-  const { settings } = useSettingsAuthContext()
+  const settings = useSettings()
   const [hasPerFileLengthUnit, setHasPerFileLengthUnit] = useState(
     Boolean(kclManager.fileSettings.defaultLengthUnit)
   )
   const [lengthSetting, setLengthSetting] = useState(
     kclManager.fileSettings.defaultLengthUnit ||
-      settings.context.modeling.defaultUnit.current
+      settings.modeling.defaultUnit.current
   )
   useEffect(() => {
     setHasPerFileLengthUnit(Boolean(kclManager.fileSettings.defaultLengthUnit))
     setLengthSetting(
       kclManager.fileSettings.defaultLengthUnit ||
-        settings.context.modeling.defaultUnit.current
+        settings.modeling.defaultUnit.current
     )
   }, [
     kclManager.fileSettings.defaultLengthUnit,
-    settings.context.modeling.defaultUnit.current,
+    settings.modeling.defaultUnit.current,
   ])
+
   return (
     <Popover className="relative pointer-events-auto">
       {({ close }) => (
@@ -75,7 +76,7 @@ export function UnitsMenu() {
                             .catch(reportRejection)
                         }
                       } else {
-                        settings.send({
+                        settingsActor.send({
                           type: 'set.modeling.defaultUnit',
                           data: {
                             level: 'project',

src/components/UserSidebarMenu.test.tsx

@@ -7,7 +7,6 @@ import {
   createRoutesFromElements,
 } from 'react-router-dom'
 import { Models } from '@kittycad/lib'
-import { SettingsAuthProviderJest } from './SettingsAuthProvider'
 
 type User = Models['User_type']
 
@@ -120,12 +119,7 @@ function TestWrap({ children }: { children: React.ReactNode }) {
   // https://reactrouter.com/en/6.16.0/routers/picking-a-router#using-v64-data-apis
   const router = createMemoryRouter(
     createRoutesFromElements(
-      <Route
-        path="/file/:id"
-        element={
-          <SettingsAuthProviderJest>{children}</SettingsAuthProviderJest>
-        }
-      />
+      <Route path="/file/:id" element={<>{children}</>} />
     ),
     {
       initialEntries: ['/file/new'],

src/hooks/useCreateFileLinkQueryWatcher.ts

@@ -2,10 +2,10 @@ import { base64ToString } from 'lib/base64'
 import { CREATE_FILE_URL_PARAM, DEFAULT_FILE_NAME } from 'lib/constants'
 import { useEffect } from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { useSettingsAuthContext } from './useSettingsAuthContext'
 import { isDesktop } from 'lib/isDesktop'
 import { FileLinkParams } from 'lib/links'
 import { ProjectsCommandSchema } from 'lib/commandBarConfigs/projectsCommandConfig'
+import { useSettings } from 'machines/appMachine'
 
 // For initializing the command arguments, we actually want `method` to be undefined
 // so that we don't skip it in the command palette.
@@ -26,7 +26,7 @@ export function useCreateFileLinkQuery(
   callback: (args: CreateFileSchemaMethodOptional) => void
 ) {
   const [searchParams] = useSearchParams()
-  const { settings } = useSettingsAuthContext()
+  const settings = useSettings()
 
   useEffect(() => {
     const createFileParam = searchParams.has(CREATE_FILE_URL_PARAM)
@@ -45,7 +45,7 @@ export function useCreateFileLinkQuery(
             ? params.name.replace('.kcl', '')
             : params.name
           : isDesktop()
-          ? settings.context.projects.defaultProjectName.current
+          ? settings.projects.defaultProjectName.current
           : DEFAULT_FILE_NAME,
         code: params.code || '',
         method: isDesktop() ? undefined : 'existingProject',

src/hooks/useRefreshSettings.ts

@@ -1,32 +0,0 @@
-import { useRouteLoaderData } from 'react-router-dom'
-import { useSettingsAuthContext } from './useSettingsAuthContext'
-import { PATHS } from 'lib/paths'
-import { settings } from 'lib/settings/initialSettings'
-import { useEffect } from 'react'
-
-/**
- * I was dismayed to learn that index route in Router.tsx where we initially load up the settings
- * doesn't re-run on subsequent navigations. This hook is a workaround,
- * in conjunction with additional uses of settingsLoader further down the router tree.
- * @param routeId - The id defined in Router.tsx to load the settings from.
- */
-export function useRefreshSettings(routeId: string = PATHS.INDEX) {
-  const ctx = useSettingsAuthContext()
-  const routeData = useRouteLoaderData(routeId) as typeof settings
-
-  if (!ctx) {
-    // Intended to stop the world
-    // eslint-disable-next-line
-    throw new Error(
-      'useRefreshSettings must be used within a SettingsAuthProvider'
-    )
-  }
-
-  useEffect(() => {
-    ctx.settings.send({
-      type: 'Set all settings',
-      settings: routeData,
-      doNotPersist: true,
-    })
-  }, [])
-}

src/hooks/useResolvedTheme.ts

@@ -1,5 +1,5 @@
 import { Themes, getSystemTheme } from 'lib/theme'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
+import { useSettings } from 'machines/appMachine'
 
 /**
  * Resolves the current theme based on the theme setting
@@ -7,10 +7,8 @@ import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
  * @returns {Themes.Light | Themes.Dark}
  */
 export function useResolvedTheme() {
-  const {
-    settings: { context },
-  } = useSettingsAuthContext()
-  return context.app.theme.current === Themes.System
+  const settings = useSettings()
+  return settings.app.theme.current === Themes.System
     ? getSystemTheme()
-    : context.app.theme.current
+    : settings.app.theme.current
 }

src/hooks/useSettingsAuthContext.ts

@@ -1,6 +0,0 @@
-import { SettingsAuthContext } from 'components/SettingsAuthProvider'
-import { useContext } from 'react'
-
-export const useSettingsAuthContext = () => {
-  return useContext(SettingsAuthContext)
-}

src/index.tsx

@@ -11,6 +11,9 @@ import { ToastUpdate } from 'components/ToastUpdate'
 import { markOnce } from 'lib/performance'
 import { AUTO_UPDATER_TOAST_ID } from 'lib/constants'
 import { initializeWindowExceptionHandler } from 'lib/exceptions'
+import { initPromise } from 'lang/wasm'
+import { appActor } from 'machines/appMachine'
+import { reportRejection } from 'lib/trap'
 
 markOnce('code/willAuth')
 initializeWindowExceptionHandler()
@@ -23,6 +26,14 @@ initializeWindowExceptionHandler()
 //     iframe: false,
 //   })
 
+// Don't start the app machine until all these singletons
+// are initialized, and the wasm module is loaded.
+initPromise
+  .then(() => {
+    appActor.start()
+  })
+  .catch(reportRejection)
+
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 
 root.render(

src/lang/KclProvider.tsx

@@ -1,9 +1,10 @@
 import { createContext, useContext, useEffect, useState } from 'react'
 import { type IndexLoaderData } from 'lib/types'
-import { useLoaderData } from 'react-router-dom'
+import { useRouteLoaderData } from 'react-router-dom'
 import { codeManager, kclManager } from 'lib/singletons'
 import { Diagnostic } from '@codemirror/lint'
 import { KCLError } from './errors'
+import { PATHS } from 'lib/paths'
 
 const KclContext = createContext({
   code: codeManager?.code || '',
@@ -27,7 +28,9 @@ export function KclContextProvider({
 }) {
   // If we try to use this component anywhere but under the paths.FILE route it will fail
   // Because useLoaderData assumes we are on within it's context.
-  const { code: loadedCode } = useLoaderData() as IndexLoaderData
+  const data = useRouteLoaderData(PATHS.FILE) as IndexLoaderData | undefined
+  const loadedCode = data?.code
+
   // Both the code state and the editor state start off with the same code.
   const [code, setCode] = useState(loadedCode || codeManager.code)
 

src/lang/wasm.ts

@@ -463,11 +463,11 @@ export const executeWithEngine = async (
 const jsAppSettings = async () => {
   let jsAppSettings = default_app_settings()
   if (!TEST) {
-    const lastSettingsSnapshot = await import(
-      'components/SettingsAuthProvider'
-    ).then((module) => module.lastSettingsContextSnapshot)
-    if (lastSettingsSnapshot) {
-      jsAppSettings = getAllCurrentSettings(lastSettingsSnapshot)
+    const settings = await import('machines/appMachine').then((module) =>
+      module.getSettings()
+    )
+    if (settings) {
+      jsAppSettings = getAllCurrentSettings(settings)
     }
   }
   return jsAppSettings

src/lib/commandBarConfigs/settingsCommandConfig.ts

@@ -7,20 +7,23 @@ import {
   SettingsPaths,
   SettingsLevel,
   SettingProps,
+  SetEventTypes,
 } from 'lib/settings/settingsTypes'
 import { settingsMachine } from 'machines/settingsMachine'
 import { PathValue } from 'lib/types'
-import { Actor, AnyStateMachine, ContextFrom } from 'xstate'
+import { ActorRefFrom, AnyStateMachine } from 'xstate'
 import { getPropertyByPath } from 'lib/objectPropertyByPath'
 import { buildCommandArgument } from 'lib/createMachineCommand'
 import decamelize from 'decamelize'
 import { isDesktop } from 'lib/isDesktop'
-import { Setting } from 'lib/settings/initialSettings'
+import {
+  createSettings,
+  Setting,
+  SettingsType,
+} from 'lib/settings/initialSettings'
 
 // An array of the paths to all of the settings that have commandConfigs
-export const settingsWithCommandConfigs = (
-  s: ContextFrom<typeof settingsMachine>
-) =>
+export const settingsWithCommandConfigs = (s: SettingsType) =>
   Object.entries(s).flatMap(([categoryName, categorySettings]) =>
     Object.entries(categorySettings)
       .filter(([_, setting]) => setting.commandConfig !== undefined)
@@ -28,7 +31,7 @@ export const settingsWithCommandConfigs = (
   ) as SettingsPaths[]
 
 const levelArgConfig = <T extends AnyStateMachine = AnyStateMachine>(
-  actor: Actor<T>,
+  actor: ActorRefFrom<T>,
   isProjectAvailable: boolean,
   hideOnLevel?: SettingsLevel
 ): CommandArgument<SettingsLevel, T> => ({
@@ -53,23 +56,16 @@ const levelArgConfig = <T extends AnyStateMachine = AnyStateMachine>(
 
 interface CreateSettingsArgs {
   type: SettingsPaths
-  send: Function
-  context: ContextFrom<typeof settingsMachine>
-  actor: Actor<typeof settingsMachine>
-  isProjectAvailable: boolean
+  actor: ActorRefFrom<typeof settingsMachine>
 }
 
 // Takes a Setting with a commandConfig and creates a Command
 // that can be used in the CommandBar component.
-export function createSettingsCommand({
-  type,
-  send,
-  context,
-  actor,
-  isProjectAvailable,
-}: CreateSettingsArgs) {
-  type S = PathValue<typeof context, typeof type>
+export function createSettingsCommand({ type, actor }: CreateSettingsArgs) {
+  type S = PathValue<ReturnType<typeof createSettings>, typeof type>
 
+  const context = actor.getSnapshot().context
+  const isProjectAvailable = context.currentProject !== undefined
   const settingConfig = getPropertyByPath(context, type) as SettingProps<
     S['default']
   >
@@ -129,10 +125,18 @@ export function createSettingsCommand({
     icon: 'settings',
     needsReview: false,
     onSubmit: (data) => {
-      if (data !== undefined && data !== null) {
-        send({ type: `set.${type}`, data })
+      if (
+        data !== undefined &&
+        data !== null &&
+        'value' in data &&
+        'level' in data
+      ) {
+        // TS would not let me get this to type properly
+        const coercedData = data as unknown as SetEventTypes['data']
+        actor.send({ type: `set.${type}`, data: coercedData })
       } else {
-        send({ type })
+        console.error('Invalid data submitted to settings command', data)
+        return new Error('Invalid data submitted to settings command', data)
       }
     },
     args: {

src/lib/desktop.ts

@@ -4,6 +4,7 @@ import { Project, FileEntry } from 'lib/project'
 
 import {
   defaultAppSettings,
+  initPromise,
   parseAppSettings,
   parseProjectSettings,
 } from 'lang/wasm'
@@ -131,11 +132,20 @@ export async function createNewProjectDirectory(
 export async function listProjects(
   configuration?: DeepPartial<Configuration> | Error
 ): Promise<Project[]> {
-  if (configuration === undefined) {
-    configuration = await readAppSettingsFile()
+  // Make sure we have wasm initialized.
+  const initializedResult = await initPromise
+  if (err(initializedResult)) {
+    return Promise.reject(initializedResult)
   }
 
-  if (err(configuration)) return Promise.reject(configuration)
+  if (configuration === undefined) {
+    configuration = await readAppSettingsFile().catch((e) => {
+      console.error(e)
+      return e
+    })
+  }
+
+  if (err(configuration) || !configuration) return Promise.reject(configuration)
   const projectDir = await ensureProjectDirectoryExists(configuration)
   const projects = []
   if (!projectDir) return Promise.reject(new Error('projectDir was falsey'))

src/lib/paths.ts

@@ -75,11 +75,11 @@ export async function getProjectMetaByRouteId(
   return route
 }
 
-export async function parseProjectRoute(
+export function parseProjectRoute(
   configuration: DeepPartial<Configuration>,
   id: string,
   pathlib: PlatformPath | undefined
-): Promise<ProjectRoute> {
+): ProjectRoute {
   let projectName = null
   let projectPath = ''
   let currentFileName = null

src/lib/routeLoaders.ts

@@ -13,37 +13,9 @@ import makeUrlPathRelative from './makeUrlPathRelative'
 import { codeManager } from 'lib/singletons'
 import { fileSystemManager } from 'lang/std/fileSystemManager'
 import { getProjectInfo } from './desktop'
-import { createSettings } from './settings/initialSettings'
 import { normalizeLineEndings } from 'lib/codeEditor'
 import { OnboardingStatus } from 'wasm-lib/kcl/bindings/OnboardingStatus'
-
-// The root loader simply resolves the settings and any errors that
-// occurred during the settings load
-export const settingsLoader: LoaderFunction = async ({
-  params,
-}): Promise<
-  ReturnType<typeof createSettings> | ReturnType<typeof redirect>
-> => {
-  let { settings, configuration } = await loadAndValidateSettings()
-
-  // I don't love that we have to read the settings again here,
-  // but we need to get the project path to load the project settings
-  if (params.id) {
-    const projectPathData = await getProjectMetaByRouteId(
-      params.id,
-      configuration
-    )
-    if (projectPathData) {
-      const { projectPath } = projectPathData
-      const { settings: s } = await loadAndValidateSettings(
-        projectPath || undefined
-      )
-      return s
-    }
-  }
-
-  return settings
-}
+import { getSettings, settingsActor } from 'machines/appMachine'
 
 export const telemetryLoader: LoaderFunction = async ({
   params,
@@ -53,7 +25,7 @@ export const telemetryLoader: LoaderFunction = async ({
 
 // Redirect users to the appropriate onboarding page if they haven't completed it
 export const onboardingRedirectLoader: ActionFunction = async (args) => {
-  const { settings } = await loadAndValidateSettings()
+  const settings = getSettings()
   const onboardingStatus: OnboardingStatus =
     settings.app.onboardingStatus.current || ''
   const notEnRouteToOnboarding = !args.request.url.includes(
@@ -72,7 +44,7 @@ export const onboardingRedirectLoader: ActionFunction = async (args) => {
     )
   }
 
-  return settingsLoader(args)
+  return null
 }
 
 export const fileLoader: LoaderFunction = async (
@@ -156,9 +128,17 @@ export const fileLoader: LoaderFunction = async (
       ? await getProjectInfo(projectPath)
       : null
 
+    const project = maybeProjectInfo ?? defaultProjectData
+
+    // Fire off the event to load the project settings
+    settingsActor.send({
+      type: 'load.project',
+      project,
+    })
+
     const projectData: IndexLoaderData = {
       code,
-      project: maybeProjectInfo ?? defaultProjectData,
+      project,
       file: {
         name: currentFileName || '',
         path: currentFilePath || '',
@@ -197,5 +177,8 @@ export const homeLoader: LoaderFunction = async ({
       PATHS.FILE + '/%2F' + BROWSER_PROJECT_NAME + (url.search || '')
     )
   }
+  settingsActor.send({
+    type: 'clear.project',
+  })
   return {}
 }

src/lib/settings/initialSettings.tsx

@@ -554,3 +554,4 @@ export function createSettings() {
 }
 
 export const settings = createSettings()
+export type SettingsType = ReturnType<typeof createSettings>

src/lib/settings/settingsUtils.ts

@@ -1,7 +1,3 @@
-import { Setting, createSettings, settings } from 'lib/settings/initialSettings'
-import { SaveSettingsPayload, SettingsLevel } from './settingsTypes'
-import { isDesktop } from 'lib/isDesktop'
-import { err } from 'lib/trap'
 import {
   defaultAppSettings,
   defaultProjectSettings,
@@ -10,9 +6,8 @@ import {
   parseProjectSettings,
   tomlStringify,
 } from 'lang/wasm'
-import { Configuration } from 'wasm-lib/kcl/bindings/Configuration'
 import { mouseControlsToCameraSystem } from 'lib/cameraControls'
-import { appThemeToTheme } from 'lib/theme'
+import { BROWSER_PROJECT_NAME } from 'lib/constants'
 import {
   getInitialDefaultDir,
   readAppSettingsFile,
@@ -20,9 +15,14 @@ import {
   writeAppSettingsFile,
   writeProjectSettingsFile,
 } from 'lib/desktop'
-import { ProjectConfiguration } from 'wasm-lib/kcl/bindings/ProjectConfiguration'
-import { BROWSER_PROJECT_NAME } from 'lib/constants'
+import { isDesktop } from 'lib/isDesktop'
+import { Setting, createSettings, settings } from 'lib/settings/initialSettings'
+import { appThemeToTheme } from 'lib/theme'
+import { err } from 'lib/trap'
 import { DeepPartial } from 'lib/types'
+import { Configuration } from 'wasm-lib/kcl/bindings/Configuration'
+import { ProjectConfiguration } from 'wasm-lib/kcl/bindings/ProjectConfiguration'
+import { SaveSettingsPayload, SettingsLevel } from './settingsTypes'
 
 /**
  * Convert from a rust settings struct into the JS settings struct.
@@ -312,6 +312,22 @@ export function getAllCurrentSettings(
   return currentSettings
 }
 
+export function clearSettingsAtLevel(
+  allSettings: typeof settings,
+  level: SettingsLevel
+) {
+  Object.entries(allSettings).forEach(([category, settingsCategory]) => {
+    const categoryKey = category as keyof typeof settings
+    Object.entries(settingsCategory).forEach(
+      ([_, settingValue]: [string, Setting]) => {
+        settingValue[level] = undefined
+      }
+    )
+  })
+
+  return allSettings
+}
+
 export function setSettingsAtLevel(
   allSettings: typeof settings,
   level: SettingsLevel,

src/machines/appMachine.ts

@@ -1,26 +1,39 @@
-import { ActorRefFrom, createActor, setup } from 'xstate'
+import { ActorRefFrom, assign, createActor, setup, spawnChild } from 'xstate'
 import { authMachine } from './authMachine'
 import { useSelector } from '@xstate/react'
 import { ACTOR_IDS } from './machineConstants'
+import { settingsMachine } from './settingsMachine'
+import { createSettings } from 'lib/settings/initialSettings'
+
+const { AUTH, SETTINGS } = ACTOR_IDS
+const appMachineActors = {
+  [AUTH]: authMachine,
+  [SETTINGS]: settingsMachine,
+} as const
+
+type AppMachineActors = {
+  [K in keyof typeof appMachineActors]: ActorRefFrom<
+    (typeof appMachineActors)[K]
+  >
+}
 
 const appMachine = setup({
-  actors: {
-    [ACTOR_IDS.AUTH]: authMachine,
-  },
+  actors: appMachineActors,
 }).createMachine({
   /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgAoBbAQwGMALASwzAEp8QAHLWKgFyqw0YA9EAjACZ0AT0FDkU5EA */
   id: 'modeling-app',
-  invoke: [
-    {
-      src: ACTOR_IDS.AUTH,
-      systemId: ACTOR_IDS.AUTH,
-    },
+  entry: [
+    spawnChild(AUTH, { id: AUTH, systemId: AUTH }),
+    spawnChild(SETTINGS, {
+      id: SETTINGS,
+      systemId: SETTINGS,
+      input: createSettings(),
+    }),
   ],
 })
 
-export const appActor = createActor(appMachine).start()
-
-export const authActor = appActor.system.get(ACTOR_IDS.AUTH) as ActorRefFrom<
+export const appActor = createActor(appMachine)
+export const authActor = appActor.system.get(AUTH) as ActorRefFrom<
   typeof authMachine
 >
 export const useAuthState = () => useSelector(authActor, (state) => state)
@@ -28,3 +41,17 @@ export const useToken = () =>
   useSelector(authActor, (state) => state.context.token)
 export const useUser = () =>
   useSelector(authActor, (state) => state.context.user)
+
+export const settingsActor = appActor.system.get(SETTINGS) as ActorRefFrom<
+  typeof settingsMachine
+>
+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
+  })

src/machines/authMachine.ts

@@ -80,7 +80,7 @@ export const authMachine = setup({
     ),
   },
 }).createMachine({
-  /** @xstate-layout N4IgpgJg5mDOIC5QAoC2BDAxgCwJYDswBKAOhzEwGsBJAMwBkB7KGCa-AYgkcJIIDdGlMGWwVKAWgA2zVhIIBtAAwBdRKAAOjWLgAuuHupAAPRAGYArAEYSADgu2AnGYBMLpVYBsZz7YA0IACeiG6OJM62tmZKLgDsno5KtvEAvikBaFh4hKTkVHRMLJDsHGAATmWMZSQaUui6tFWoouLSspDy+MpqSCBaOvqGvaYIljb2Tq7uXj7+QYgALFYW4clWy1ZmVgsWsZtpGRg4BMQkMkVsnIUABIwArrrdRv16BvhGI74LJBYW7o5WKJmKILObBUZeEgJP4LTxKMwIhZmBYLA4gTLHHJnWQEKAAeQeXB4IgEQhEGOyp3OUFxBN0CFJmHqb26T16L0G72GiCsSg8PyszkBCViTiUjgC4Jcnhc4SUsQcvgsoL2VjRFJOpGptMJ5Uq1Vq9UaZWaGqx2vw+IeDPwgiZnNZqme2leQ1An1s31+-0BCJBYJCLm+lk8CRl9hRyos6qOlK17QgdI4N0UTvZLs5Hx58NsJARuys0tDSl+AYQthsgNi0TMqt2LjVaPwjAgcCMZuIzoGbyzCAknkliH7Maympa+QYCfYXddXPdixcg4QvKUdk2u2iLkcsXhCRHmKpU7nfQzPe5CAsMpIXi8MvFKM8VliS5c1jzj53W3isNFqPS6NjMcLStXQZ0zc8ohsJI-kcFxXEcR9HAWF9gTzDxbCUXxAQWEsdn3ONsQuOkwLPedl22MIzFg3YP1gl9PG+bYvGsSxlUcRJozSFIgA */
+  /** @xstate-layout N4IgpgJg5mDOIC5QEECuAXAFgOgMabFwGsBJAMwBkB7KGCEgOwGIIqGxsBLBgNyqI75CRALQAbGnRHcA2gAYAuolAAHKrE7pObZSAAeiAIwAWQ9gBspuQCYAnAGYAHPYCsx+4ccAaEAE9E1q7YcoZyxrYR1m7mcrYAvnE+aFh4BMTk1LSQjExgAE55VHnYKmIAhuhkRQC2qcLikpDSDPJKSCBqGlo67QYI9gDs5tge5o6h5vau7oY+-v3mA9jWco4u5iu21ua2YcYJSRg4Eln0zJkABFQYrbqdmtoMun2GA7YjxuPmLqvGNh5zRCfJaOcyLUzuAYuFyGcwHEDJY6NCAAeQwTEuskUd3UDx6oD6Im2wUcAzkMJ2cjBxlMgIWLmwZLWljecjJTjh8IYVAgcF0iJxXUez0QIgGxhJZIpu2ptL8AWwtje1nCW2iq1shns8MRdXSlGRjEFeKevUQjkcy3sqwGHimbg83nlCF22GMytVUWMMUc8USCKO2BOdCN7Xu3VNBKMKsVFp2hm2vu+1id83slkVrgTxhcW0pNJ1geDkDR6GNEZFCAT1kZZLk9cMLltb0WdPMjewjjC1mzOZCtk5CSAA */
   id: ACTOR_IDS.AUTH,
   initial: 'checkIfLoggedIn',
   context: {

src/machines/machineConstants.ts

@@ -1,3 +1,4 @@
 export const ACTOR_IDS = {
   AUTH: 'auth',
-}
+  SETTINGS: 'settings',
+} as const

src/machines/settingsMachine.ts

@@ -1,6 +1,25 @@
-import { assign, setup } from 'xstate'
-import { Themes, getSystemTheme, setThemeClass } from 'lib/theme'
-import { createSettings, settings } from 'lib/settings/initialSettings'
+import {
+  AnyActorRef,
+  assign,
+  enqueueActions,
+  EventObject,
+  fromCallback,
+  fromPromise,
+  sendTo,
+  setup,
+} from 'xstate'
+import {
+  Themes,
+  darkModeMatcher,
+  getOppositeTheme,
+  getSystemTheme,
+  setThemeClass,
+} from 'lib/theme'
+import {
+  createSettings,
+  settings,
+  SettingsType,
+} from 'lib/settings/initialSettings'
 import {
   BaseUnit,
   SetEventTypes,
@@ -9,16 +28,39 @@ import {
   WildcardSetEvent,
 } from 'lib/settings/settingsTypes'
 import {
+  clearSettingsAtLevel,
   configurationToSettingsPayload,
+  loadAndValidateSettings,
   projectConfigurationToSettingsPayload,
+  saveSettings,
   setSettingsAtLevel,
 } from 'lib/settings/settingsUtils'
-import { sceneInfra } from 'lib/singletons'
+import {
+  codeManager,
+  engineCommandManager,
+  kclManager,
+  sceneEntitiesManager,
+  sceneInfra,
+} from 'lib/singletons'
+import toast from 'react-hot-toast'
+import decamelize from 'decamelize'
+import { reportRejection } from 'lib/trap'
+import { Project } from 'lib/project'
+import {
+  createSettingsCommand,
+  settingsWithCommandConfigs,
+} from 'lib/commandBarConfigs/settingsCommandConfig'
+import { Command } from 'lib/commandTypes'
+import { commandBarActor } from './commandBarMachine'
+
+type SettingsMachineContext = SettingsType & {
+  currentProject?: Project
+}
 
 export const settingsMachine = setup({
   types: {
-    context: {} as ReturnType<typeof createSettings>,
-    input: {} as ReturnType<typeof createSettings>,
+    context: {} as SettingsMachineContext,
+    input: {} as SettingsMachineContext,
     events: {} as (
       | WildcardSetEvent<SettingsPaths>
       | SetEventTypes
@@ -35,16 +77,219 @@ export const settingsMachine = setup({
           level: SettingsLevel
         }
       | { type: 'Set all settings'; settings: typeof settings }
+      | { type: 'load.project'; project?: Project }
+      | { type: 'clear.project' }
     ) & { doNotPersist?: boolean },
   },
+  actors: {
+    persistSettings: fromPromise<
+      void,
+      { doNotPersist: boolean; context: SettingsMachineContext }
+    >(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
+      const { currentProject, ...settings } = input.context
+
+      return saveSettings(settings, currentProject?.path)
+    }),
+    loadUserSettings: fromPromise<SettingsMachineContext, void>(async () => {
+      const { settings } = await loadAndValidateSettings()
+      return settings
+    }),
+    loadProjectSettings: fromPromise<
+      SettingsMachineContext,
+      { project?: Project }
+    >(async ({ input }) => {
+      const { settings } = await loadAndValidateSettings(input.project?.path)
+      return settings
+    }),
+    watchSystemTheme: fromCallback<{
+      type: 'update.themeWatcher'
+      theme: Themes
+    }>(({ receive }) => {
+      const listener = (e: MediaQueryListEvent) => {
+        setThemeClass(e.matches ? Themes.Dark : Themes.Light)
+      }
+
+      receive((event) => {
+        if (event.type !== 'update.themeWatcher') {
+          return
+        } else {
+          if (event.theme === Themes.System) {
+            darkModeMatcher?.addEventListener('change', listener)
+          } else {
+            darkModeMatcher?.removeEventListener('change', listener)
+          }
+        }
+      })
+
+      return () => darkModeMatcher?.removeEventListener('change', listener)
+    }),
+    registerCommands: fromCallback<
+      { type: 'update' },
+      { settings: SettingsType; actor: AnyActorRef }
+    >(({ input, receive }) => {
+      // If the user wants to hide the settings commands
+      //from the command bar don't add them.
+      if (settings.commandBar.includeSettings.current === false) return
+      let commands: Command[] = []
+
+      const updateCommands = () =>
+        settingsWithCommandConfigs(input.settings)
+          .map((type) =>
+            createSettingsCommand({
+              type,
+              actor: input.actor,
+            })
+          )
+          .filter((c) => c !== null) as Command[]
+      const addCommands = () =>
+        commandBarActor.send({
+          type: 'Add commands',
+          data: { commands: commands },
+        })
+      const removeCommands = () =>
+        commandBarActor.send({
+          type: 'Remove commands',
+          data: { commands: commands },
+        })
+
+      receive((event) => {
+        if (event.type !== 'update') return
+        removeCommands()
+        commands = updateCommands()
+        addCommands()
+      })
+
+      commands = updateCommands()
+      addCommands()
+
+      return () => {
+        removeCommands()
+      }
+    }),
+  },
   actions: {
-    setEngineTheme: () => {},
-    setClientTheme: () => {},
-    'Execute AST': () => {},
-    toastSuccess: () => {},
-    setClientSideSceneUnits: () => {},
-    setAllowOrbitInSketchMode: () => {},
-    persistSettings: () => {},
+    setClientSideSceneUnits: ({ context, event }) => {
+      const newBaseUnit =
+        event.type === 'set.modeling.defaultUnit'
+          ? (event.data.value as BaseUnit)
+          : context.modeling.defaultUnit.current
+      if (!sceneInfra) return
+      sceneInfra.baseUnit = newBaseUnit
+    },
+    setEngineTheme: ({ context }) => {
+      if (engineCommandManager && context.app.theme.current) {
+        engineCommandManager
+          .setTheme(context.app.theme.current)
+          .catch(reportRejection)
+      }
+    },
+    setClientTheme: ({ context }) => {
+      if (!sceneInfra || !sceneEntitiesManager) return
+      const opposingTheme = getOppositeTheme(context.app.theme.current)
+      sceneInfra.theme = opposingTheme
+      sceneEntitiesManager.updateSegmentBaseColor(opposingTheme)
+    },
+    setAllowOrbitInSketchMode: ({ context }) => {
+      if (!sceneInfra.camControls) return
+      sceneInfra.camControls._setting_allowOrbitInSketchMode =
+        context.app.allowOrbitInSketchMode.current
+      // ModelingMachineProvider will do a use effect to trigger the camera engine sync
+    },
+    toastSuccess: ({ event }) => {
+      if (!('data' in event)) return
+      const eventParts = event.type.replace(/^set./, '').split('.') as [
+        keyof typeof settings,
+        string
+      ]
+      const truncatedNewValue = event.data.value?.toString().slice(0, 28)
+      const message =
+        `Set ${decamelize(eventParts[1], { separator: ' ' })}` +
+        (truncatedNewValue
+          ? ` to "${truncatedNewValue}${
+              truncatedNewValue.length === 28 ? '...' : ''
+            }"${
+              event.data.level === 'project'
+                ? ' for this project'
+                : ' as a user default'
+            }`
+          : '')
+      toast.success(message, {
+        duration: message.split(' ').length * 100 + 1500,
+        id: `${event.type}.success`,
+      })
+    },
+    'Execute AST': ({ context, event }) => {
+      try {
+        const relevantSetting = (s: typeof settings) => {
+          return (
+            s.modeling?.defaultUnit?.current !==
+              context.modeling.defaultUnit.current ||
+            s.modeling.showScaleGrid.current !==
+              context.modeling.showScaleGrid.current ||
+            s.modeling?.highlightEdges.current !==
+              context.modeling.highlightEdges.current
+          )
+        }
+
+        const allSettingsIncludesUnitChange =
+          event.type === 'Set all settings' &&
+          relevantSetting(event.settings || context)
+        const resetSettingsIncludesUnitChange =
+          event.type === 'Reset settings' && relevantSetting(settings)
+
+        const shouldExecute =
+          kclManager !== undefined &&
+          (event.type === 'set.modeling.defaultUnit' ||
+            event.type === 'set.modeling.showScaleGrid' ||
+            event.type === 'set.modeling.highlightEdges' ||
+            allSettingsIncludesUnitChange ||
+            resetSettingsIncludesUnitChange)
+
+        if (shouldExecute) {
+          // Unit changes requires a re-exec of code
+          kclManager.executeCode(true).catch(reportRejection)
+        } else {
+          // For any future logging we'd like to do
+          // console.log(
+          //   'Not re-executing AST because the settings change did not affect the code interpretation'
+          // )
+        }
+      } catch (e) {
+        console.error('Error executing AST after settings change', e)
+      }
+    },
+    setThemeColor: ({ context }) => {
+      document.documentElement.style.setProperty(
+        `--primary-hue`,
+        context.app.themeColor.current
+      )
+    },
+    /**
+     * Update the --cursor-color CSS variable
+     * based on the setting textEditor.blinkingCursor.current
+     */
+    setCursorColor: ({ context }) => {
+      document.documentElement.style.setProperty(
+        `--cursor-color`,
+        context.textEditor.blinkingCursor.current ? 'auto' : 'transparent'
+      )
+    },
+    /** Unload the project-level setting values from memory */
+    clearProjectSettings: assign(({ context }) => {
+      // Peel off all non-settings context
+      const { currentProject: _, ...settings } = context
+      const newSettings = clearSettingsAtLevel(settings, 'project')
+      return newSettings
+    }),
+    /** Unload the current project's info from memory */
+    clearCurrentProject: assign(({ context }) => {
+      return { ...context, currentProject: undefined }
+    }),
     resetSettings: assign(({ context, event }) => {
       if (!('level' in event)) return {}
 
@@ -59,9 +304,10 @@ export const settingsMachine = setup({
 
       return newSettings
     }),
-    setAllSettings: assign(({ event }) => {
-      if (!('settings' in event)) return {}
-      return event.settings
+    setAllSettings: assign(({ event, context }) => {
+      if ('settings' in event) return event.settings
+      else if ('output' in event) return event.output || context
+      else return context
     }),
     setSettingAtLevel: assign(({ context, event }) => {
       if (!('data' in event)) return {}
@@ -94,25 +340,55 @@ export const settingsMachine = setup({
       const newCurrentProjection = context.modeling.cameraProjection.current
       sceneInfra.camControls.setEngineCameraProjection(newCurrentProjection)
     },
+    sendThemeToWatcher: sendTo('watchSystemTheme', ({ context }) => ({
+      type: 'update.themeWatcher',
+      theme: context.app.theme.current,
+    })),
   },
 }).createMachine({
-  /** @xstate-layout N4IgpgJg5mDOIC5QGUwBc0EsB2VYDpMIAbMAYlnXwEMAHW-Ae2wCNHqAnCHKZNatAFdYAbQAMAXUShajWJizNpIAB6IALAFYAnPgBMARgDsBsQDY969QGYjmzQBoQAT0SnrADnwePY61r0PAwNtMyMAX3CnVAweAiJSCio6BjQACzAAWzAAYUZiRg5xKSQQWXlFbGU1BD1PfFtfE3UzTUNNaydXBCD1b209PTEPTTMtdQNNSOj0LFx4knJKNHxMxggwYh58DYAzakFiNABVbAVi5XKFTCVSmusxPXx7bRt1DzMxI3UjD3UutwhAz4MyeHxiV5+AYRKIgGJzPCERZJFYpfDpLJgC6lK6VaqIExPMwWGwdGxBPRmAE9PSafCPMQ-EzWbQ6ELTOGzOJIxLLVbrTbbNKYKBpLaitAAUWgcGxMjk11uoBqVmBH0ZLKCrVs-xciCCwLCvhCjyMFhGHPh3IS5AASnB0AACZYI0SSS4KvF3AlafADRl1YZ2IxiRx6hBtIzPb7abQ+DxGaxmYKWrnzHnkGKO6jEYjOtN4OVlT03KrehAtOnm7Qaup6Ixm6mR6OaR4dAwjM1mVOxdM2lH8jZbXD4WBpRgAd2QAGMc2AAOIcIhF3Gl-EIRPA6yGcyh4whSnU0xGJ5GAat0OfFowma9xH9gBUK5LStUiECdMmfx+mg8hmNTY-PgMYQpoZoxh41g9q6+C0GAHDyLACL5nesBkBAzBgIQ2AAG6MAA1lhcEIZgSFWvMz4VGu5YALTbtYwEnj8HhxnooT1mG3QhmY-TmJ82gGCyjzaJEsLYAK8ClOReAelRr41HRJiMZYvysexdjUuohh+poBiGDuXzGKy0HWossmKmWyqIDR3zAZWLSahM2jWJ04YjDxHbDMmmhaYE3wmemxGIchLpxOZXpWQgNEjMB1h6WEYHqK8ZgJk2EL6N8wR1Cy-gJqJ4RAA */
-  id: 'Settings',
-  initial: 'idle',
+  /** @xstate-layout N4IgpgJg5mDOIC5QGUwBc0EsB2VYDpMIAbMAYlnXwEMAHW-Ae2wCNHqAnCHKZNatAFdYAbQAMAXUShajWJizNpIAB6IAzAA4x+AIyaAbJoCsAFl1njAJmOaANCACeiXQHZ1+a7bdWDATnUxawBfYIdUDB4CIlIKKjoGNAALMABbMABhRmJGDnEpJBBZeUVsZTUELR19IzMLUy97J0RfTXxDBr8DAxtdMSs-UPD0LFxoknJKNHxUxggwYh58eYAzakFiNABVbAV85WKFTCVCiqq9QxNzSxsm50qDU3wrMXV1V2M-bT8xV6GQCKjPCECZxaYJfDJNJgfaFQ6lcoabQXWrXBq3Bz3YzqPz4AyvL7qYw1TS6Az-QFREGxKY0ej4WBoDhgaipACSEwAsnMYZIDnIjidQGdkSS6jdbJjEK5zHi-PouqYiQZjBSRlSYpN4vTqMQcgB3ADyHBYCjZ2GQAGt0ABjJLc+awmQChGnJHVS7i9GS5oIQweVxueVWVz4mW6NWRMbUrXTWbzRa4fA21lgDjUAAKHEYACswDbSk6ii7jmU3ZVRZ60Y0pQg+rorPglQ2rKZ-FY3DLI0DxjSqPGFkskpgoElFqO0ABRaBwIvw0uIise1H1Gu+3Rk3R6Uydaz47qqsIA9XRzVkABKcHQAAIpj25yWhap3SirquMevAriTK4urYBhYViaN2GqghE166sQt4nngD4lAu5Zkni1yaKG2i6OoBgblYtY7sYniGNYmjqKYmjyropggaeoK0gOiZQAySSMPqyApqQADiHBEHBgplsKL5itWH73BYKr4OoLzmBhHahlRwJnjk1AQPgtDZnmBY8a6-EIKYVgePopEfKRmhAQ2xi1m8FyuCGnxmHhJFyb25AAFSaQh2nnIJ74+iJgZPK87ykmR-SmK4wFHpS0a0Gm8iMjw0FRngZAQMwYCENgABujDWvgkXAtFHCxUCCU9ggOBZSmhaSG5T4VKFuIkUEO7uPKfihaYtb6JZQR+J8Sq-iR4XDIlBAFUV8V3lEZBptmHAqcQAgrLkqS5TBo0xZgcW4CVURlZljCVaW+Q1Xxz46ciRhiFhBjvEEPmIKSVk2b1O4NA5EVrfgincLgWyUBwyWpelWU5XlBDfTwf1pntFUCEd1V8nCj6nWczyfPiYgfL4xhhZoqGdR8OhXT0xJiL1HxaI5X3sD9UBQwDM25PNi3LatI3U0pkP-TDB1w8wx2I868G1RomEEURGHWZjrydV0Hjym2bw3bY2LqFTEO4Fmub5mggPYGl5XZWlYMc7TWvqWgPOHfzCMFELvGLn035dGIPgYW1ui9bLv7PK8LxGGRFG6erNM8ObOvTRws3M2gS0cCtJsa1A4cFlbfPYALdvFsLKMaMS+BiKYfg2NigZk+85m+h2pg6L+MpthhKtEqER7YDy8CFGD-I54uAC06ie88ZL4i8FFfmSta92YBe-L8fhhaGLyYVTmrdw75ahbWqEGPgfjyj+PR762EYfezY2bcVk1jGvWlnWRTxB8YWEysY6O6Fve94vUB5fDXxIh5zX6-0b7uTOr3EMW4OzdH6K7JUZMJ7rh3I2X+PRpZvE+K4ABZs1I6xASLBAYhawdj6M8CSG4F64zVi3IAA */
+  initial: 'loadingUser',
   context: ({ input }) => {
     return {
       ...createSettings(),
       ...input,
     }
   },
+  invoke: [
+    {
+      src: 'watchSystemTheme',
+      id: 'watchSystemTheme',
+    },
+    {
+      src: 'registerCommands',
+      id: 'registerCommands',
+      // Peel off the non-settings context
+      input: ({ context: { currentProject, ...settings }, self }) => ({
+        settings,
+        actor: self,
+      }),
+    },
+  ],
   states: {
     idle: {
-      entry: ['setThemeClass', 'setClientSideSceneUnits'],
+      entry: ['setThemeClass', 'setClientSideSceneUnits', 'sendThemeToWatcher'],
 
       on: {
         '*': {
           target: 'persisting settings',
-          actions: ['setSettingAtLevel', 'toastSuccess'],
+          actions: [
+            'setSettingAtLevel',
+            'toastSuccess',
+            enqueueActions(({ enqueue, check }) => {
+              if (
+                check(
+                  ({ event }) => event.type === 'set.textEditor.blinkingCursor'
+                )
+              ) {
+                enqueue('setCursorColor')
+              }
+            }),
+          ],
         },
 
         'set.app.onboardingStatus': {
@@ -126,7 +402,7 @@ export const settingsMachine = setup({
           target: 'persisting settings',
 
           // No toast
-          actions: ['setSettingAtLevel'],
+          actions: ['setSettingAtLevel', 'setThemeColor'],
         },
 
         'set.modeling.defaultUnit': {
@@ -149,6 +425,7 @@ export const settingsMachine = setup({
             'setThemeClass',
             'setEngineTheme',
             'setClientTheme',
+            'sendThemeToWatcher',
           ],
         },
 
@@ -191,9 +468,11 @@ export const settingsMachine = setup({
             'setThemeClass',
             'setEngineTheme',
             'setClientSideSceneUnits',
+            'setThemeColor',
             'Execute AST',
             'setClientTheme',
             'setAllowOrbitInSketchMode',
+            'sendThemeToWatcher',
           ],
         },
 
@@ -203,9 +482,11 @@ export const settingsMachine = setup({
             'setThemeClass',
             'setEngineTheme',
             'setClientSideSceneUnits',
+            'setThemeColor',
             'Execute AST',
             'setClientTheme',
             'setAllowOrbitInSketchMode',
+            'sendThemeToWatcher',
           ],
         },
 
@@ -213,12 +494,85 @@ export const settingsMachine = setup({
           target: 'persisting settings',
           actions: ['setSettingAtLevel', 'toastSuccess', 'Execute AST'],
         },
+
+        'load.project': {
+          target: 'loadingProject',
+        },
+
+        'clear.project': {
+          target: 'idle',
+          reenter: true,
+          actions: [
+            'clearProjectSettings',
+            'clearCurrentProject',
+            'setThemeColor',
+            sendTo('registerCommands', { type: 'update' }),
+          ],
+        },
       },
     },
 
     'persisting settings': {
-      entry: ['persistSettings'],
-      always: 'idle',
+      invoke: {
+        src: 'persistSettings',
+        onDone: {
+          target: 'idle',
+        },
+        onError: {
+          target: 'idle',
+          actions: () => {
+            console.error('Error persisting settings')
+          },
+        },
+        input: ({ context, event }) => {
+          return {
+            doNotPersist: event.doNotPersist ?? false,
+            context,
+          }
+        },
+      },
+    },
+
+    loadingUser: {
+      invoke: {
+        src: 'loadUserSettings',
+        onDone: {
+          target: 'idle',
+          actions: 'setAllSettings',
+        },
+        onError: {
+          target: 'idle',
+          actions: ({ event }) => {
+            console.error('Error loading user settings', event)
+          },
+        },
+      },
+    },
+    loadingProject: {
+      entry: [
+        assign({
+          currentProject: ({ event }) =>
+            event.type === 'load.project' ? event.project : undefined,
+        }),
+      ],
+      invoke: {
+        src: 'loadProjectSettings',
+        onDone: {
+          target: 'idle',
+          actions: [
+            'setAllSettings',
+            'setThemeColor',
+            'Execute AST',
+            sendTo('registerCommands', { type: 'update' }),
+          ],
+        },
+        onError: 'idle',
+        input: ({ event }) => {
+          return {
+            project: event.type === 'load.project' ? event.project : undefined,
+          }
+        },
+      },
     },
   },
 })

src/routes/Home.tsx

@@ -12,11 +12,9 @@ import {
   getSortFunction,
   getSortIcon,
 } from '../lib/sorting'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { isDesktop } from 'lib/isDesktop'
 import { kclManager } from 'lib/singletons'
-import { useRefreshSettings } from 'hooks/useRefreshSettings'
 import { LowerRightControls } from 'components/LowerRightControls'
 import { ProjectSearchBar, useProjectSearch } from 'components/ProjectSearchBar'
 import { Project } from 'lib/project'
@@ -26,6 +24,7 @@ import { useProjectsLoader } from 'hooks/useProjectsLoader'
 import { useProjectsContext } from 'hooks/useProjectsContext'
 import { commandBarActor } from 'machines/commandBarMachine'
 import { useCreateFileLinkQuery } from 'hooks/useCreateFileLinkQueryWatcher'
+import { useSettings } from 'machines/appMachine'
 
 // This route only opens in the desktop context for now,
 // as defined in Router.tsx, so we can use the desktop APIs and types.
@@ -46,11 +45,8 @@ const Home = () => {
     })
   })
 
-  useRefreshSettings(PATHS.HOME + 'SETTINGS')
   const navigate = useNavigate()
-  const {
-    settings: { context: settings },
-  } = useSettingsAuthContext()
+  const settings = useSettings()
 
   // Cancel all KCL executions while on the home page
   useEffect(() => {

src/routes/Onboarding/Camera.tsx

@@ -1,26 +1,19 @@
 import { OnboardingButtons, useDismiss, useNextClick } from '.'
 import { onboardingPaths } from 'routes/Onboarding/paths'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import {
   CameraSystem,
   cameraMouseDragGuards,
   cameraSystems,
 } from 'lib/cameraControls'
 import { SettingsSection } from 'components/Settings/SettingsSection'
+import { settingsActor, useSettings } from 'machines/appMachine'
 
 export default function Units() {
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.STREAMING)
   const {
-    settings: {
-      send,
-      state: {
-        context: {
-          modeling: { mouseControls },
-        },
-      },
-    },
-  } = useSettingsAuthContext()
+    modeling: { mouseControls },
+  } = useSettings()
 
   return (
     <div className="fixed inset-0 z-50 grid items-end justify-start px-4 pointer-events-none">
@@ -40,7 +33,7 @@ export default function Units() {
             className="block w-full px-3 py-1 bg-transparent border border-chalkboard-30"
             value={mouseControls.current}
             onChange={(e) => {
-              send({
+              settingsActor.send({
                 type: 'set.modeling.mouseControls',
                 data: {
                   level: 'user',

src/routes/Onboarding/Introduction.tsx

@@ -1,6 +1,5 @@
 import { OnboardingButtons, useDemoCode } from '.'
 import { onboardingPaths } from 'routes/Onboarding/paths'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { Themes, getSystemTheme } from 'lib/theme'
 import { bracket } from 'lib/exampleKcl'
 import { createAndOpenNewTutorialProject } from 'lib/desktopFS'
@@ -14,6 +13,7 @@ import { PATHS } from 'lib/paths'
 import { useFileContext } from 'hooks/useFileContext'
 import { useLspContext } from 'components/LspProvider'
 import { reportRejection } from 'lib/trap'
+import { useSettings } from 'machines/appMachine'
 
 /**
  * Show either a welcome screen or a warning screen
@@ -120,14 +120,8 @@ function OnboardingIntroductionInner() {
   useDemoCode()
 
   const {
-    settings: {
-      state: {
-        context: {
-          app: { theme },
-        },
-      },
-    },
-  } = useSettingsAuthContext()
+    app: { theme },
+  } = useSettings()
   const getLogoTheme = () =>
     theme.current === Themes.Light ||
     (theme.current === Themes.System && getSystemTheme() === Themes.Light)

src/routes/Onboarding/ParametricModeling.tsx

@@ -1,21 +1,17 @@
 import { OnboardingButtons, useDemoCode } from '.'
 import { onboardingPaths } from 'routes/Onboarding/paths'
 import { Themes, getSystemTheme } from 'lib/theme'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { bracketThicknessCalculationLine } from 'lib/exampleKcl'
 import { isDesktop } from 'lib/isDesktop'
+import { useSettings } from 'machines/appMachine'
 
 export default function OnboardingParametricModeling() {
   useDemoCode()
   const {
-    settings: {
-      context: {
-        app: {
-          theme: { current: theme },
-        },
-      },
+    app: {
+      theme: { current: theme },
     },
-  } = useSettingsAuthContext()
+  } = useSettings()
   const getImageTheme = () =>
     theme === Themes.Light ||
     (theme === Themes.System && getSystemTheme() === Themes.Light)

src/routes/Onboarding/Units.tsx

@@ -4,19 +4,14 @@ import { ActionButton } from 'components/ActionButton'
 import { SettingsSection } from 'components/Settings/SettingsSection'
 import { useDismiss, useNextClick } from '.'
 import { onboardingPaths } from 'routes/Onboarding/paths'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
+import { settingsActor, useSettings } from 'machines/appMachine'
 
 export default function Units() {
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.CAMERA)
   const {
-    settings: {
-      send,
-      context: {
-        modeling: { defaultUnit },
-      },
-    },
-  } = useSettingsAuthContext()
+    modeling: { defaultUnit },
+  } = useSettings()
 
   return (
     <div className="fixed grid place-content-center inset-0 bg-chalkboard-110/50 z-50">
@@ -31,7 +26,7 @@ export default function Units() {
             className="block w-full px-3 py-1 border border-chalkboard-30 bg-transparent"
             value={defaultUnit.user}
             onChange={(e) => {
-              send({
+              settingsActor.send({
                 type: 'set.modeling.defaultUnit',
                 data: {
                   level: 'user',

src/routes/Onboarding/index.tsx

@@ -5,7 +5,6 @@ import Camera from './Camera'
 import Sketching from './Sketching'
 import { useCallback, useEffect } from 'react'
 import makeUrlPathRelative from '../../lib/makeUrlPathRelative'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import Streaming from './Streaming'
 import CodeEditor from './CodeEditor'
 import ParametricModeling from './ParametricModeling'
@@ -26,9 +25,10 @@ import { reportRejection } from 'lib/trap'
 import { useNetworkContext } from 'hooks/useNetworkContext'
 import { NetworkHealthState } from 'hooks/useNetworkStatus'
 import { EngineConnectionStateType } from 'lang/std/engineConnection'
+import { settingsActor, useSettings } from 'machines/appMachine'
+import { useSelector } from '@xstate/react'
 import { CustomIcon } from 'components/CustomIcon'
 import Tooltip from 'components/Tooltip'
-import { commandBarActor } from 'machines/commandBarMachine'
 
 export const kbdClasses =
   'py-0.5 px-1 text-sm rounded bg-chalkboard-10 dark:bg-chalkboard-100 border border-chalkboard-50 border-b-2'
@@ -112,25 +112,24 @@ export function useDemoCode() {
 
 export function useNextClick(newStatus: string) {
   const filePath = useAbsoluteFilePath()
-  const {
-    settings: { send },
-  } = useSettingsAuthContext()
   const navigate = useNavigate()
 
   return useCallback(() => {
-    send({
+    settingsActor.send({
       type: 'set.app.onboardingStatus',
       data: { level: 'user', value: newStatus },
     })
     navigate(filePath + PATHS.ONBOARDING.INDEX.slice(0, -1) + newStatus)
-  }, [filePath, newStatus, send, navigate])
+  }, [filePath, newStatus, settingsActor.send, navigate])
 }
 
 export function useDismiss() {
   const filePath = useAbsoluteFilePath()
-  const {
-    settings: { state, send },
-  } = useSettingsAuthContext()
+  const settings = useSettings()
+  const send = settingsActor.send
+  const isSettingsActorIdle = useSelector(settingsActor, (s) =>
+    s.matches('idle')
+  )
   const navigate = useNavigate()
 
   const settingsCallback = useCallback(() => {
@@ -146,12 +145,17 @@ export function useDismiss() {
    */
   useEffect(() => {
     if (
-      state.context.app.onboardingStatus.user === 'dismissed' &&
-      state.matches('idle')
+      settings.app.onboardingStatus.current === 'dismissed' &&
+      isSettingsActorIdle
     ) {
       navigate(filePath)
     }
-  }, [filePath, navigate, state])
+  }, [
+    filePath,
+    navigate,
+    isSettingsActorIdle,
+    settings.app.onboardingStatus.current,
+  ])
 
   return settingsCallback
 }

src/routes/SignIn.tsx

@@ -3,7 +3,6 @@ import { isDesktop } from '../lib/isDesktop'
 import { VITE_KC_SITE_BASE_URL, VITE_KC_API_BASE_URL } from '../env'
 import { Themes, getSystemTheme } from '../lib/theme'
 import { PATHS } from 'lib/paths'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { APP_NAME } from 'lib/constants'
 import { CSSProperties, useCallback, useState } from 'react'
 import { Logo } from 'components/Logo'
@@ -15,6 +14,7 @@ import { toSync } from 'lib/utils'
 import { reportRejection } from 'lib/trap'
 import toast from 'react-hot-toast'
 import { authActor } from 'machines/appMachine'
+import { useSettings } from 'machines/appMachine'
 
 const subtleBorder =
   'border border-solid border-chalkboard-30 dark:border-chalkboard-80'
@@ -23,14 +23,8 @@ const cardArea = `${subtleBorder} rounded-lg px-6 py-3 text-chalkboard-70 dark:t
 const SignIn = () => {
   const [userCode, setUserCode] = useState('')
   const {
-    settings: {
-      state: {
-        context: {
-          app: { theme },
-        },
-      },
-    },
-  } = useSettingsAuthContext()
+    app: { theme },
+  } = useSettings()
   const signInUrl = `${VITE_KC_SITE_BASE_URL}${
     PATHS.SIGN_IN
   }?callbackUrl=${encodeURIComponent(