# state.svelte.js — Global State

`<span class="editor-theme-code">state.svelte.js</span>`<span style="white-space: pre-wrap;"> is the single source of truth for shared reactive state that needs to be accessible across multiple components and routes. Currently it manages the three camera objects.</span>

### Camera objects

<span style="white-space: pre-wrap;">Three camera state objects are exported as Svelte 5 </span>`<span class="editor-theme-code">$state</span>`<span style="white-space: pre-wrap;"> runes:</span>

<table id="bkmrk-exportportcameradept"><colgroup><col></col><col></col><col></col></colgroup><tbody><tr><th>**Export**

</th><th>**Port**

</th><th>**Camera**

</th></tr><tr><td>`<span class="editor-theme-code">depthCamera</span>`

</td><td>5000

</td><td>Depth / front-facing camera

</td></tr><tr><td>`<span class="editor-theme-code">frontCamera</span>`

</td><td>5001

</td><td>Secondary front camera

</td></tr><tr><td>`<span class="editor-theme-code">armCamera</span>`

</td><td>5002

</td><td>Arm-mounted camera

</td></tr></tbody></table>

<span style="white-space: pre-wrap;">Each object has three fields: </span>`<span class="editor-theme-code">name</span>`<span style="white-space: pre-wrap;"> (display string), </span>`<span class="editor-theme-code">port</span>`<span style="white-space: pre-wrap;"> (full </span>`<span class="editor-theme-code">http://localhost:PORT</span>`<span style="white-space: pre-wrap;"> URL used as the </span>`<span class="editor-theme-code"><img></span>`<span style="white-space: pre-wrap;"> src), and </span>`<span class="editor-theme-code">stale</span>`<span style="white-space: pre-wrap;"> (boolean set to </span>`<span class="editor-theme-code">true</span>`<span style="white-space: pre-wrap;"> when the backend reports no frames for 2+ seconds).</span>

### Camera health listener — initCameraHealthListener()

<span style="white-space: pre-wrap;">This function is called once from </span>`<span class="editor-theme-code">+layout.svelte</span>`<span style="white-space: pre-wrap;"> on app startup. It listens for the </span>`<span class="editor-theme-code">camera-feed-status</span>`<span style="white-space: pre-wrap;"> Tauri event emitted by the GStreamer health watcher in the backend, and updates the </span>`<span class="editor-theme-code">stale</span>`<span style="white-space: pre-wrap;"> flag on the matching camera object. A 500ms startup delay is included to ensure the Tauri bridge is ready before the listener is attached.</span>

<span style="white-space: pre-wrap;">Components that display video can read the </span>`<span class="editor-theme-code">stale</span>`<span style="white-space: pre-wrap;"> flag to show a warning overlay when a feed is lost.</span>