fancy-screens
@particle-academy/fancy-screens
Multi-screen application shell with cross-screen agent presence.
UI surface
2 components, each with a live demo, props table, and source.
ButtonlivebetaCardRK
$
npm install @particle-academy/fancy-screensOne handler, two operatorsHuman+ contract
Human — keystroke
<ScreenSystem value={value} onChange={setValue} />
Agent — MCP tool call
tools.call( "screen_focus", { … } )
screen_focusscreen_register
Why
Without
fancy-screens, Human+ apps must either rebuild screen coordination from scratch or rely on heavyweight framework patterns that hide state from agents. DOM scraping and tab-based solutions aren't addressable or agent-introspectable; Zustand alone doesn't bridge surfaces or enable presence layers. Teams end up reinventing the same affordances — surface registry, state enumeration, cross-surface presence markers, schema-driven rendering — for every new app.What
fancy-screens is a deliberately minimal (~400 lines) screen registry and coordination layer for apps where humans and agents work in parallel across addressable surfaces. It exports <Screen.System> (the provider), <Screen id title> (self-registering addressable surfaces), useRegisterStore(name, store) (binds Zustand stores to screens so agents enumerate and mutate them), useScreens() (returns a snapshot of every mounted screen and its state), and schema-driven rendering (<Screen schema={...}> + registerSchemaComponent) so an LLM can emit a JSON page and the client renders it. State lives entirely in Zustand; fancy-screens only discovers and surfaces it.How
Install with
npm install @particle-academy/fancy-screens zustand. Wrap your app in <Screen.System>, declare <Screen id="profile"> surfaces, call useRegisterStore("user", useUserStore) inside a screen to bind a Zustand store, and use useScreens() anywhere to read the registry. For schema-driven mode, call registerSchemaComponent("Button", ButtonImpl) once, then pass schema={{type: "Button", ...}} to <Screen>.Components
2 components · click any tile for a full demo, source, and install snippet.