Multi-screen apps scatter state, presence, and agent coordination logic across dozens of components — stores drift from screen to screen, agents can't enumerate what surfaces exist or target mutations to the right one, and presence layers have no stable handles to track who's doing what. Without a coordinating registry, each screen reinvents undo, coaching, and agent operability from scratch.

Screen is a registered container that announces itself to the enclosing <Screen.System> registry on mount, making it discoverable and inhabitable. Every screen carries an id (globally unique) and optional title, and supports two render modes: JSX children or schema (agent-emitted JSON); children win if both are provided. Via useRegisterStore(name, zustandStore), a screen can attach Zustand stores to itself so agents and presence layers enumerate per-screen state without prop drilling. The schema mode recursively renders JSON through a component registry (registerSchemaComponent), letting agents emit entire UIs as JSON with no per-page glue code. Agent activity pushes live into ScreenMeta.agentActivity, which Screen reads and broadcasts as a CSS class and custom property so UI can visually follow agent focus.

Wrap your app once with <Screen.System>. Inside, declare each surface as <Screen id="dashboard"><Screen.Body>..., or pass schema for agent-emitted mode. To attach a store, call useRegisterStore("myStore", useMyZustandStore) inside a component within that screen. Agents and presence layers call useScreens() to enumerate all surfaces and read storeKeys to find per-screen state, then interact via Zustand's getState() / setState() — no MCP bridge required.