Cut release v0.24.1 (#3014)

* mediaStream

* make vitest happy

* fmt

package.json

@@ -1,6 +1,6 @@
 {
   "name": "untitled-app",
-  "version": "0.24.0",
+  "version": "0.24.1",
   "private": true,
   "dependencies": {
     "@codemirror/autocomplete": "^6.17.0",

packages/codemirror-lsp-client/src/plugin/lsp.ts

@@ -93,23 +93,10 @@ export class LanguageServerPlugin implements PluginValue {
   private doSemanticTokens: boolean = false
   private doFoldingRanges: boolean = false
 
-  private _defferer = deferExecution((code: string) => {
+  // When a doc update needs to be sent to the server, this holds the
-    try {
+  // timeout handle for it. When null, the server has the up-to-date
-      // Update the state (not the editor) with the new code.
+  // document.
-      this.client.textDocumentDidChange({
+  private sendScheduled: number | null = null
-        textDocument: {
-          uri: this.getDocUri(),
-          version: this.documentVersion++,
-        },
-        contentChanges: [{ text: code }],
-      })
-
-      this.requestSemanticTokens()
-      this.updateFoldingRanges()
-    } catch (e) {
-      console.error(e)
-    }
-  }, this.changesDelay)
 
   constructor(options: LanguageServerOptions, private view: EditorView) {
     this.client = options.client
@@ -152,14 +139,9 @@ export class LanguageServerPlugin implements PluginValue {
   }
 
   update(viewUpdate: ViewUpdate) {
-    // If the doc didn't change we can return early.
+    if (viewUpdate.docChanged) {
-    if (!viewUpdate.docChanged) {
+      this.scheduleSendDoc()
-      return
     }
-
-    this.sendChange({
-      documentText: viewUpdate.state.doc.toString(),
-    })
   }
 
   destroy() {
@@ -184,16 +166,6 @@ export class LanguageServerPlugin implements PluginValue {
     this.updateFoldingRanges()
   }
 
-  async sendChange({ documentText }: { documentText: string }) {
-    if (!this.client.ready) return
-
-    this._defferer(documentText)
-  }
-
-  requestDiagnostics() {
-    this.sendChange({ documentText: this.getDocText() })
-  }
-
   async requestHoverTooltip(
     view: EditorView,
     { line, character }: { line: number; character: number }
@@ -204,7 +176,7 @@ export class LanguageServerPlugin implements PluginValue {
     )
       return null
 
-    this.sendChange({ documentText: this.getDocText() })
+    this.ensureDocSent()
     const result = await this.client.textDocumentHover({
       textDocument: { uri: this.getDocUri() },
       position: { line, character },
@@ -227,6 +199,42 @@ export class LanguageServerPlugin implements PluginValue {
     return { pos, end, create: (view) => ({ dom }), above: true }
   }
 
+  scheduleSendDoc() {
+    if (this.sendScheduled != null) window.clearTimeout(this.sendScheduled)
+    this.sendScheduled = window.setTimeout(
+      () => this.sendDoc(),
+      this.changesDelay
+    )
+  }
+
+  sendDoc() {
+    if (this.sendScheduled != null) {
+      window.clearTimeout(this.sendScheduled)
+      this.sendScheduled = null
+    }
+
+    if (!this.client.ready) return
+    try {
+      // Update the state (not the editor) with the new code.
+      this.client.textDocumentDidChange({
+        textDocument: {
+          uri: this.getDocUri(),
+          version: this.documentVersion++,
+        },
+        contentChanges: [{ text: this.view.state.doc.toString() }],
+      })
+
+      this.requestSemanticTokens()
+      this.updateFoldingRanges()
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  ensureDocSent() {
+    if (this.sendScheduled != null) this.sendDoc()
+  }
+
   async getFoldingRanges(): Promise<LSP.FoldingRange[] | null> {
     if (
       !this.doFoldingRanges ||
@@ -284,13 +292,7 @@ export class LanguageServerPlugin implements PluginValue {
     )
       return null
 
-    this.client.textDocumentDidChange({
+    this.ensureDocSent()
-      textDocument: {
-        uri: this.getDocUri(),
-        version: this.documentVersion++,
-      },
-      contentChanges: [{ text: this.getDocText() }],
-    })
 
     const result = await this.client.textDocumentFormatting({
       textDocument: { uri: this.getDocUri() },
@@ -330,9 +332,7 @@ export class LanguageServerPlugin implements PluginValue {
     )
       return null
 
-    this.sendChange({
+    this.ensureDocSent()
-      documentText: context.state.doc.toString(),
-    })
 
     const result = await this.client.textDocumentCompletion({
       textDocument: { uri: this.getDocUri() },

src-tauri/tauri.conf.json

@@ -80,5 +80,5 @@
     }
   },
   "productName": "Zoo Modeling App",
-  "version": "0.24.0"
+  "version": "0.24.1"
 }

src/App.tsx

@@ -26,7 +26,6 @@ import useHotkeyWrapper from 'lib/hotkeyWrapper'
 import Gizmo from 'components/Gizmo'
 import { CoreDumpManager } from 'lib/coredump'
 import { UnitsMenu } from 'components/UnitsMenu'
-import { useAppState } from 'AppState'
 
 export function App() {
   useRefreshSettings(paths.FILE + 'SETTINGS')
@@ -46,8 +45,6 @@ export function App() {
 
   useHotKeyListener()
   const { context } = useModelingContext()
-  const { streamDimensions, didDragInStream, buttonDownInStream } =
-    useAppState()
 
   const { auth, settings } = useSettingsAuthContext()
   const token = auth?.context?.token
@@ -77,7 +74,7 @@ export function App() {
     (p) => p === onboardingStatus.current
   )
     ? 'opacity-20'
-    : didDragInStream
+    : context.store?.didDragInStream
     ? 'opacity-40'
     : ''
 
@@ -95,11 +92,11 @@ export function App() {
       clientX: e.clientX,
       clientY: e.clientY,
       el: e.currentTarget,
-      ...streamDimensions,
+      ...context.store?.streamDimensions,
     })
 
     const newCmdId = uuidv4()
-    if (buttonDownInStream === undefined) {
+    if (context.store?.buttonDownInStream === undefined) {
       debounceSocketSend({
         type: 'modeling_cmd_req',
         cmd: {
@@ -121,7 +118,7 @@ export function App() {
         className={
           'transition-opacity transition-duration-75 ' +
           paneOpacity +
-          (buttonDownInStream ? ' pointer-events-none' : '')
+          (context.store?.buttonDownInStream ? ' pointer-events-none' : '')
         }
         project={{ project, file }}
         enableMenu={true}

src/AppState.tsx

@@ -1,10 +1,4 @@
-import {
+import { createContext, useContext, useState, ReactNode } from 'react'
-  createContext,
-  useContext,
-  useState,
-  ReactNode,
-  useEffect,
-} from 'react'
 
 /*
 
@@ -17,23 +11,11 @@ Please do not fill this up with junk.
 interface AppState {
   isStreamReady: boolean
   setAppState: (newAppState: Partial<AppState>) => void
-
-  mediaStream?: MediaStream
-  buttonDownInStream: number | undefined
-  didDragInStream: boolean
-  streamDimensions: { streamWidth: number; streamHeight: number }
-  // openPanes: SidebarType[]
 }
 
 const AppStateContext = createContext<AppState>({
   isStreamReady: false,
   setAppState: () => {},
-
-  buttonDownInStream: undefined,
-  didDragInStream: false,
-  streamDimensions: { streamWidth: 1280, streamHeight: 720 },
-  mediaStream: undefined,
-  // openPanes: persistedContext.openPanes || ['code'],
 })
 
 export const useAppState = () => useContext(AppStateContext)
@@ -42,38 +24,47 @@ export const AppStateProvider = ({ children }: { children: ReactNode }) => {
   const [appState, _setAppState] = useState<AppState>({
     isStreamReady: false,
     setAppState: () => {},
-
-    buttonDownInStream: undefined,
-    didDragInStream: false,
-    streamDimensions: { streamWidth: 1280, streamHeight: 720 },
-    mediaStream: undefined,
-    // openPanes: persistedContext.openPanes || ['code'],
   })
-  useEffect(() => {
+  const setAppState = (newAppState: Partial<AppState>) =>
-    // console.log('appState change', appState)
+    _setAppState({ ...appState, ...newAppState })
-  }, [appState])
-  const setAppState = (newAppState: Partial<AppState>) => {
-    // console.log('appstate', newAppState)
-    _setAppState({
-      ...appState,
-      ...newAppState,
-      mediaStream: newAppState.mediaStream || appState.mediaStream,
-    })
-  }
 
   return (
     <AppStateContext.Provider
       value={{
         isStreamReady: appState.isStreamReady,
         setAppState,
-
-        mediaStream: appState.mediaStream,
-        buttonDownInStream: appState.buttonDownInStream,
-        didDragInStream: appState.didDragInStream,
-        streamDimensions: appState.streamDimensions,
       }}
     >
       {children}
     </AppStateContext.Provider>
   )
 }
+
+interface AppStream {
+  mediaStream: MediaStream
+  setMediaStream: (mediaStream: MediaStream) => void
+}
+
+const AppStreamContext = createContext<AppStream>({
+  mediaStream: undefined as unknown as MediaStream,
+  setMediaStream: () => {},
+})
+
+export const useAppStream = () => useContext(AppStreamContext)
+
+export const AppStreamProvider = ({ children }: { children: ReactNode }) => {
+  const [mediaStream, setMediaStream] = useState<MediaStream>(
+    undefined as unknown as MediaStream
+  )
+
+  return (
+    <AppStreamContext.Provider
+      value={{
+        mediaStream,
+        setMediaStream,
+      }}
+    >
+      {children}
+    </AppStreamContext.Provider>
+  )
+}

src/Router.tsx

@@ -49,17 +49,17 @@ const router = createBrowserRouter([
     /* Make sure auth is the outermost provider or else we will have
      * inefficient re-renders, use the react profiler to see. */
     element: (
-      <AppStateProvider>
+      <CommandBarProvider>
-        <CommandBarProvider>
+        <SettingsAuthProvider>
-          <SettingsAuthProvider>
+          <LspProvider>
-            <LspProvider>
+            <KclContextProvider>
-              <KclContextProvider>
+              <AppStateProvider>
                 <Outlet />
-              </KclContextProvider>
+              </AppStateProvider>
-            </LspProvider>
+            </KclContextProvider>
-          </SettingsAuthProvider>
+          </LspProvider>
-        </CommandBarProvider>
+        </SettingsAuthProvider>
-      </AppStateProvider>
+      </CommandBarProvider>
     ),
     errorElement: <ErrorPage />,
     children: [

src/components/ModelingSidebar/ModelingPane.tsx

@@ -1,7 +1,6 @@
 import styles from './ModelingPane.module.css'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { useModelingContext } from 'hooks/useModelingContext'
-import { useAppState } from 'AppState'
 
 export interface ModelingPaneProps
   extends React.PropsWithChildren,
@@ -34,10 +33,9 @@ export const ModelingPane = ({
 }: ModelingPaneProps) => {
   const { settings } = useSettingsAuthContext()
   const onboardingStatus = settings.context.app.onboardingStatus
-  // const { context } = useModelingContext()
+  const { context } = useModelingContext()
-  const { buttonDownInStream } = useAppState()
   const pointerEventsCssClass =
-    buttonDownInStream || onboardingStatus.current === 'camera'
+    context.store?.buttonDownInStream || onboardingStatus.current === 'camera'
       ? 'pointer-events-none '
       : 'pointer-events-auto '
   return (

src/components/ModelingSidebar/ModelingSidebar.tsx

@@ -15,7 +15,6 @@ import styles from './ModelingSidebar.module.css'
 import { ModelingPane } from './ModelingPane'
 import { isTauri } from 'lib/isTauri'
 import { useModelingContext } from 'hooks/useModelingContext'
-import { useAppState } from 'AppState'
 
 interface ModelingSidebarProps {
   paneOpacity: '' | 'opacity-20' | 'opacity-40'
@@ -25,9 +24,8 @@ export function ModelingSidebar({ paneOpacity }: ModelingSidebarProps) {
   const { settings } = useSettingsAuthContext()
   const onboardingStatus = settings.context.app.onboardingStatus
   const { context } = useModelingContext()
-  const { buttonDownInStream } = useAppState()
   const pointerEventsCssClass =
-    buttonDownInStream ||
+    context.store?.buttonDownInStream ||
     onboardingStatus.current === 'camera' ||
     context.store?.openPanes.length === 0
       ? 'pointer-events-none '

src/components/Stream.tsx

@@ -9,7 +9,7 @@ import { ClientSideScene } from 'clientSideScene/ClientSideSceneComp'
 import { btnName } from 'lib/cameraControls'
 import { sendSelectEventToEngine } from 'lib/selections'
 import { kclManager, engineCommandManager, sceneInfra } from 'lib/singletons'
-import { useAppState } from 'AppState'
+import { useAppStream } from 'AppState'
 
 export const Stream = () => {
   const [isLoading, setIsLoading] = useState(true)
@@ -17,10 +17,8 @@ export const Stream = () => {
   const [clickCoords, setClickCoords] = useState<{ x: number; y: number }>()
   const videoRef = useRef<HTMLVideoElement>(null)
   const { settings } = useSettingsAuthContext()
-  const { state, send } = useModelingContext()
+  const { state, send, context } = useModelingContext()
-  const { mediaStream, streamDimensions, didDragInStream, setAppState } =
+  const { mediaStream } = useAppStream()
-    useAppState()
-
   const { overallState } = useNetworkContext()
   const [isFreezeFrame, setIsFreezeFrame] = useState(false)
 
@@ -128,19 +126,12 @@ export const Stream = () => {
     )
       return
     if (!videoRef.current) return
-    // console.log('setting mideastrema to vi2', mediaStream, (window as any).mediaStream)
+    if (!mediaStream) return
-    const _mediaStream = mediaStream || (window as any).mediaStream
-    if (!_mediaStream) return
 
-    // console.log('setting mideastrema to vi')
     // Do not immediately play the stream!
-    videoRef.current.srcObject = _mediaStream
+    videoRef.current.srcObject = mediaStream
     videoRef.current.pause()
 
-    // setAppState({
-    //   mediaStream,
-    // })
-
     send({
       type: 'Set context',
       data: {
@@ -159,49 +150,44 @@ export const Stream = () => {
       clientX: e.clientX,
       clientY: e.clientY,
       el: videoRef.current,
-      ...streamDimensions,
+      ...context.store?.streamDimensions,
     })
 
-    setAppState({
+    send({
-      buttonDownInStream: e.button,
+      type: 'Set context',
+      data: {
+        buttonDownInStream: e.button,
+      },
     })
-    // send({
-    //   type: 'Set context',
-    //   data: {
-    //     buttonDownInStream: e.button,
-    //   },
-    // })
     setClickCoords({ x, y })
   }
 
   const handleMouseUp: MouseEventHandler<HTMLDivElement> = (e) => {
     if (!isNetworkOkay) return
     if (!videoRef.current) return
-    setAppState({
+    send({
-      buttonDownInStream: undefined,
+      type: 'Set context',
+      data: {
+        buttonDownInStream: undefined,
+      },
     })
-    // send({
-    //   type: 'Set context',
-    //   data: {
-    //     buttonDownInStream: undefined,
-    //   },
-    // })
     if (state.matches('Sketch')) return
     if (state.matches('Sketch no face')) return
 
-    if (!didDragInStream && btnName(e).left) {
+    if (!context.store?.didDragInStream && btnName(e).left) {
-      sendSelectEventToEngine(e, videoRef.current, streamDimensions)
+      sendSelectEventToEngine(
+        e,
+        videoRef.current,
+        context.store?.streamDimensions
+      )
     }
 
-    setAppState({
+    send({
-      didDragInStream: false,
+      type: 'Set context',
+      data: {
+        didDragInStream: false,
+      },
     })
-    // send({
-    //   type: 'Set context',
-    //   data: {
-    //     didDragInStream: false,
-    //   },
-    // })
     setClickCoords(undefined)
   }
 
@@ -215,16 +201,13 @@ export const Stream = () => {
       ((clickCoords.x - e.clientX) ** 2 + (clickCoords.y - e.clientY) ** 2) **
       0.5
 
-    if (delta > 5 && !didDragInStream) {
+    if (delta > 5 && !context.store?.didDragInStream) {
-      setAppState({
+      send({
-        didDragInStream: true,
+        type: 'Set context',
+        data: {
+          didDragInStream: true,
+        },
       })
-      // send({
-      //   type: 'Set context',
-      //   data: {
-      //     didDragInStream: true,
-      //   },
-      // })
     }
   }
 

src/editor/plugins/lsp/copilot/index.ts

@@ -195,14 +195,15 @@ export class CompletionRequester implements PluginValue {
 
   private queuedUids: string[] = []
 
-  private _deffererCodeUpdate = deferExecution(() => {
-    this.requestCompletions()
-  }, changesDelay)
-
   private _deffererUserSelect = deferExecution(() => {
     this.rejectSuggestionCommand()
   }, changesDelay)
 
+  // When a doc update needs to be sent to the server, this holds the
+  // timeout handle for it. When null, the server has the up-to-date
+  // document.
+  private sendScheduledInput: number | null = null
+
   constructor(readonly view: EditorView, client: LanguageServerClient) {
     this.client = client
   }
@@ -245,7 +246,34 @@ export class CompletionRequester implements PluginValue {
     }
 
     this.lastPos = this.view.state.selection.main.head
-    if (viewUpdate.docChanged) this._deffererCodeUpdate(true)
+    if (viewUpdate.docChanged) this.scheduleUpdateDoc()
+  }
+
+  scheduleUpdateDoc() {
+    if (this.sendScheduledInput != null)
+      window.clearTimeout(this.sendScheduledInput)
+    this.sendScheduledInput = window.setTimeout(
+      () => this.updateDoc(),
+      changesDelay
+    )
+  }
+
+  updateDoc() {
+    if (this.sendScheduledInput != null) {
+      window.clearTimeout(this.sendScheduledInput)
+      this.sendScheduledInput = null
+    }
+
+    if (!this.client.ready) return
+    try {
+      this.requestCompletions()
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  ensureDocUpdated() {
+    if (this.sendScheduledInput != null) this.updateDoc()
   }
 
   ghostText(): GhostText | null {

src/editor/plugins/lsp/kcl/index.ts

@@ -27,13 +27,10 @@ export class KclPlugin implements PluginValue {
     this.client = client
   }
 
-  private _deffererCodeUpdate = deferExecution(() => {
+  // When a doc update needs to be sent to the server, this holds the
-    if (this.viewUpdate === null) {
+  // timeout handle for it. When null, the server has the up-to-date
-      return
+  // document.
-    }
+  private sendScheduledInput: number | null = null
-
-    kclManager.executeCode()
-  }, changesDelay)
 
   private _deffererUserSelect = deferExecution(() => {
     if (this.viewUpdate === null) {
@@ -101,7 +98,34 @@ export class KclPlugin implements PluginValue {
     codeManager.code = newCode
     codeManager.writeToFile()
 
-    this._deffererCodeUpdate(true)
+    this.scheduleUpdateDoc()
+  }
+
+  scheduleUpdateDoc() {
+    if (this.sendScheduledInput != null)
+      window.clearTimeout(this.sendScheduledInput)
+    this.sendScheduledInput = window.setTimeout(
+      () => this.updateDoc(),
+      changesDelay
+    )
+  }
+
+  updateDoc() {
+    if (this.sendScheduledInput != null) {
+      window.clearTimeout(this.sendScheduledInput)
+      this.sendScheduledInput = null
+    }
+
+    if (!this.client.ready) return
+    try {
+      kclManager.executeCode()
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  ensureDocUpdated() {
+    if (this.sendScheduledInput != null) this.updateDoc()
   }
 
   async updateUnits(

src/hooks/useSetupEngineManager.ts

@@ -1,10 +1,10 @@
 import { useLayoutEffect, useEffect, useRef } from 'react'
-import { engineCommandManager, kclManager, sceneInfra } from 'lib/singletons'
+import { engineCommandManager, kclManager } from 'lib/singletons'
 import { deferExecution } from 'lib/utils'
 import { Themes } from 'lib/theme'
 import { makeDefaultPlanes, modifyGrid } from 'lang/wasm'
 import { useModelingContext } from './useModelingContext'
-import { useAppState } from 'AppState'
+import { useAppState, useAppStream } from 'AppState'
 
 export function useSetupEngineManager(
   streamRef: React.RefObject<HTMLDivElement>,
@@ -27,7 +27,8 @@ export function useSetupEngineManager(
     showScaleGrid: boolean
   }
 ) {
-  const { setAppState, streamDimensions } = useAppState()
+  const { setAppState } = useAppState()
+  const { setMediaStream } = useAppStream()
 
   const streamWidth = streamRef?.current?.offsetWidth
   const streamHeight = streamRef?.current?.offsetHeight
@@ -47,17 +48,14 @@ export function useSetupEngineManager(
       streamWidth,
       streamHeight
     )
-    if (!hasSetNonZeroDimensions.current && quadHeight && quadWidth) {
+    if (
+      !hasSetNonZeroDimensions.current &&
+      quadHeight &&
+      quadWidth &&
+      settings.modelingSend
+    ) {
       engineCommandManager.start({
-        // setMediaStream: (mediaStream) =>
+        setMediaStream: setMediaStream,
-        //   settings.modelingSend({
-        //     type: 'Set context',
-        //     data: { mediaStream },
-        //   }),
-        setMediaStream: (mediaStream) => {
-          ;(window as any).mediaStream = mediaStream
-          setAppState({ mediaStream })
-        },
         setIsStreamReady: (isStreamReady) => setAppState({ isStreamReady }),
         width: quadWidth,
         height: quadHeight,
@@ -78,22 +76,15 @@ export function useSetupEngineManager(
           return modifyGrid(kclManager.engineCommandManager, hidden)
         },
       })
-      setAppState({
+      settings.modelingSend({
-        streamDimensions: { streamWidth: quadWidth, streamHeight: quadHeight },
+        type: 'Set context',
+        data: {
+          streamDimensions: {
+            streamWidth: quadWidth,
+            streamHeight: quadHeight,
+          },
+        },
       })
-      sceneInfra._streamDimensions = {
-        streamWidth: quadWidth,
-        streamHeight: quadHeight,
-      }
-      // settings.modelingSend({
-      //   type: 'Set context',
-      //   data: {
-      //     streamDimensions: {
-      //       streamWidth: quadWidth,
-      //       streamHeight: quadHeight,
-      //     },
-      //   },
-      // })
       hasSetNonZeroDimensions.current = true
     }
   }
@@ -102,7 +93,6 @@ export function useSetupEngineManager(
     streamRef?.current?.offsetWidth,
     streamRef?.current?.offsetHeight,
     settings.modelingSend,
-    setAppState,
   ])
 
   useEffect(() => {
@@ -112,29 +102,22 @@ export function useSetupEngineManager(
         streamRef?.current?.offsetHeight
       )
       if (
-        streamDimensions.streamWidth !== width ||
+        settings.modelingContext.store.streamDimensions.streamWidth !== width ||
-        streamDimensions.streamHeight !== height
+        settings.modelingContext.store.streamDimensions.streamHeight !== height
       ) {
         engineCommandManager.handleResize({
           streamWidth: width,
           streamHeight: height,
         })
-        setAppState({
+        settings.modelingSend({
-          streamDimensions: { streamWidth: width, streamHeight: height },
+          type: 'Set context',
+          data: {
+            streamDimensions: {
+              streamWidth: width,
+              streamHeight: height,
+            },
+          },
         })
-        sceneInfra._streamDimensions = {
-          streamWidth: width,
-          streamHeight: height,
-        }
-        // settings.modelingSend({
-        //   type: 'Set context',
-        //   data: {
-        //     streamDimensions: {
-        //       streamWidth: width,
-        //       streamHeight: height,
-        //     },
-        //   },
-        // })
       }
     }, 500)
 

src/index.tsx

@@ -13,6 +13,7 @@ import {
   UpdaterRestartModal,
   createUpdaterRestartModal,
 } from 'components/UpdaterRestartModal'
+import { AppStreamProvider } from 'AppState'
 
 // uncomment for xstate inspector
 // import { DEV } from 'env'
@@ -26,28 +27,30 @@ const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 
 root.render(
   <HotkeysProvider>
-    <Router />
+    <AppStreamProvider>
-    <Toaster
+      <Router />
-      position="bottom-center"
+      <Toaster
-      toastOptions={{
+        position="bottom-center"
-        style: {
+        toastOptions={{
-          borderRadius: '3px',
+          style: {
-        },
+            borderRadius: '3px',
-        className:
-          'bg-chalkboard-10 dark:bg-chalkboard-90 text-chalkboard-110 dark:text-chalkboard-10 rounded-sm border-chalkboard-20/50 dark:border-chalkboard-80/50',
-        success: {
-          iconTheme: {
-            primary: 'oklch(89% 0.16 143.4deg)',
-            secondary: 'oklch(48.62% 0.1654 142.5deg)',
           },
-          duration:
+          className:
-            window?.localStorage.getItem('playwright') === 'true'
+            'bg-chalkboard-10 dark:bg-chalkboard-90 text-chalkboard-110 dark:text-chalkboard-10 rounded-sm border-chalkboard-20/50 dark:border-chalkboard-80/50',
-              ? 10 // speed up e2e tests
+          success: {
-              : 1500,
+            iconTheme: {
-        },
+              primary: 'oklch(89% 0.16 143.4deg)',
-      }}
+              secondary: 'oklch(48.62% 0.1654 142.5deg)',
-    />
+            },
-    <ModalContainer />
+            duration:
+              window?.localStorage.getItem('playwright') === 'true'
+                ? 10 // speed up e2e tests
+                : 1500,
+          },
+        }}
+      />
+      <ModalContainer />
+    </AppStreamProvider>
   </HotkeysProvider>
 )
 

src/machines/modelingMachine.ts

@@ -138,7 +138,6 @@ export type SegmentOverlayPayload =
     }
 
 interface Store {
-  mediaStream?: MediaStream
   videoElement?: HTMLVideoElement
   buttonDownInStream: number | undefined
   didDragInStream: boolean

src/routes/Onboarding/Camera.tsx

@@ -8,11 +8,9 @@ import {
 } from 'lib/cameraControls'
 import { SettingsSection } from 'components/Settings/SettingsSection'
 import { useModelingContext } from 'hooks/useModelingContext'
-import { useAppState } from 'AppState'
 
 export default function Units() {
   const { context } = useModelingContext()
-  const { buttonDownInStream } = useAppState()
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.STREAMING)
   const {
@@ -31,7 +29,7 @@ export default function Units() {
       <div
         className={
           'max-w-2xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
-          (buttonDownInStream ? '' : ' pointer-events-auto')
+          (context.store?.buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >
         <SettingsSection

src/routes/Onboarding/CmdK.tsx

@@ -2,11 +2,9 @@ import usePlatform from 'hooks/usePlatform'
 import { OnboardingButtons, kbdClasses, useDismiss, useNextClick } from '.'
 import { onboardingPaths } from 'routes/Onboarding/paths'
 import { useModelingContext } from 'hooks/useModelingContext'
-import { useAppState } from 'AppState'
 
 export default function CmdK() {
-  // const { context } = useModelingContext()
+  const { context } = useModelingContext()
-  const { buttonDownInStream } = useAppState()
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.USER_MENU)
   const platformName = usePlatform()
@@ -16,7 +14,7 @@ export default function CmdK() {
       <div
         className={
           'max-w-full xl:max-w-4xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
-          (buttonDownInStream ? '' : ' pointer-events-auto')
+          (context.store?.buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >
         <h2 className="text-2xl font-bold">Command Bar</h2>

src/routes/Onboarding/CodeEditor.tsx

@@ -1,12 +1,10 @@
 import { useModelingContext } from 'hooks/useModelingContext'
 import { OnboardingButtons, useDemoCode, useDismiss, useNextClick } from '.'
 import { onboardingPaths } from 'routes/Onboarding/paths'
-import { useAppState } from 'AppState'
 
 export default function OnboardingCodeEditor() {
   useDemoCode()
   const { context } = useModelingContext()
-  const { buttonDownInStream } = useAppState()
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.PARAMETRIC_MODELING)
 
@@ -15,7 +13,7 @@ export default function OnboardingCodeEditor() {
       <div
         className={
           'z-10 max-w-xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg h-[75vh] flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
-          (buttonDownInStream ? '' : ' pointer-events-auto')
+          (context.store?.buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >
         <section className="flex-1 overflow-y-auto">

src/routes/Onboarding/Export.tsx

@@ -2,11 +2,9 @@ import { APP_NAME } from 'lib/constants'
 import { OnboardingButtons, useDismiss, useNextClick } from '.'
 import { onboardingPaths } from 'routes/Onboarding/paths'
 import { useModelingContext } from 'hooks/useModelingContext'
-import { useAppState } from 'AppState'
 
 export default function Export() {
   const { context } = useModelingContext()
-  const { buttonDownInStream } = useAppState()
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.SKETCHING)
 
@@ -15,7 +13,7 @@ export default function Export() {
       <div
         className={
           'max-w-full xl:max-w-2xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
-          (buttonDownInStream ? '' : ' pointer-events-auto')
+          (context.store?.buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >
         <section className="flex-1">

src/routes/Onboarding/InteractiveNumbers.tsx

@@ -8,12 +8,10 @@ import {
 import { onboardingPaths } from 'routes/Onboarding/paths'
 import { bracketWidthConstantLine } from 'lib/exampleKcl'
 import { useModelingContext } from 'hooks/useModelingContext'
-import { useAppState } from 'AppState'
 
 export default function OnboardingInteractiveNumbers() {
   useDemoCode()
   const { context } = useModelingContext()
-  const { buttonDownInStream } = useAppState()
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.COMMAND_K)
 
@@ -22,7 +20,7 @@ export default function OnboardingInteractiveNumbers() {
       <div
         className={
           'z-10 max-w-xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg h-[75vh] flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
-          (buttonDownInStream ? '' : ' pointer-events-auto')
+          (context.store?.buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >
         <section className="flex-1 overflow-y-auto mb-6">

src/routes/Onboarding/ParametricModeling.tsx

@@ -4,12 +4,10 @@ import { Themes, getSystemTheme } from 'lib/theme'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { bracketThicknessCalculationLine } from 'lib/exampleKcl'
 import { useModelingContext } from 'hooks/useModelingContext'
-import { useAppState } from 'AppState'
 
 export default function OnboardingParametricModeling() {
   useDemoCode()
   const { context } = useModelingContext()
-  const { buttonDownInStream } = useAppState()
   const {
     settings: {
       context: {
@@ -32,7 +30,7 @@ export default function OnboardingParametricModeling() {
       <div
         className={
           'z-10 max-w-xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg h-[75vh] flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
-          (buttonDownInStream ? '' : ' pointer-events-auto')
+          (context.store?.buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >
         <section className="flex-1 overflow-y-auto mb-6">

src/routes/Onboarding/ProjectMenu.tsx

@@ -2,11 +2,9 @@ import { OnboardingButtons, useDismiss, useNextClick } from '.'
 import { onboardingPaths } from 'routes/Onboarding/paths'
 import { isTauri } from 'lib/isTauri'
 import { useModelingContext } from 'hooks/useModelingContext'
-import { useAppState } from 'AppState'
 
 export default function ProjectMenu() {
   const { context } = useModelingContext()
-  const { buttonDownInStream } = useAppState()
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.EXPORT)
   const tauri = isTauri()
@@ -16,7 +14,7 @@ export default function ProjectMenu() {
       <div
         className={
           'max-w-xl flex flex-col border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
-          (buttonDownInStream ? '' : ' pointer-events-auto')
+          (context.store?.buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >
         <section className="flex-1">

src/routes/Onboarding/Sketching.tsx

@@ -3,11 +3,9 @@ import { onboardingPaths } from 'routes/Onboarding/paths'
 import { useEffect } from 'react'
 import { codeManager, kclManager } from 'lib/singletons'
 import { useModelingContext } from 'hooks/useModelingContext'
-import { useAppState } from 'AppState'
 
 export default function Sketching() {
   const { context } = useModelingContext()
-  const { buttonDownInStream } = useAppState()
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.FUTURE_WORK)
 
@@ -25,7 +23,7 @@ export default function Sketching() {
       <div
         className={
           'max-w-full xl:max-w-2xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
-          (buttonDownInStream ? '' : ' pointer-events-auto')
+          (context.store?.buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >
         <h1 className="text-2xl font-bold">Sketching</h1>

src/routes/Onboarding/Streaming.tsx

@@ -1,11 +1,9 @@
 import { useModelingContext } from 'hooks/useModelingContext'
 import { OnboardingButtons, useDismiss, useNextClick } from '.'
 import { onboardingPaths } from 'routes/Onboarding/paths'
-import { useAppState } from 'AppState'
 
 export default function Streaming() {
   const { context } = useModelingContext()
-  const { buttonDownInStream } = useAppState()
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.EDITOR)
 
@@ -14,7 +12,7 @@ export default function Streaming() {
       <div
         className={
           'max-w-xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg h-[75vh] flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
-          (buttonDownInStream ? '' : ' pointer-events-auto')
+          (context.store?.buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >
         <section className="flex-1 overflow-y-auto">

src/routes/Onboarding/UserMenu.tsx

@@ -3,11 +3,9 @@ import { onboardingPaths } from 'routes/Onboarding/paths'
 import { useEffect, useState } from 'react'
 import { useModelingContext } from 'hooks/useModelingContext'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
-import { useAppState } from 'AppState'
 
 export default function UserMenu() {
   const { context } = useModelingContext()
-  const { buttonDownInStream } = useAppState()
   const { auth } = useSettingsAuthContext()
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.PROJECT_MENU)
@@ -38,7 +36,7 @@ export default function UserMenu() {
       <div
         className={
           'max-w-xl flex flex-col border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
-          (buttonDownInStream ? '' : ' pointer-events-auto')
+          (context.store?.buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >
         <section className="flex-1">