@xmachines/docs 1.0.0-beta.51 → 1.0.0-beta.53

package/examples/@xmachines/play-dom-demo/variables/Dashboard.md

@@ -6,7 +6,7 @@
 const Dashboard: ComponentFn<AuthCatalog, "Dashboard">;
 ```
 
-Defined in: [play-dom/examples/demo/src/components/Dashboard.ts:9](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-dom/examples/demo/src/components/Dashboard.ts#L9)
+Defined in: [play-dom/examples/demo/src/components/Dashboard.ts:9](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-dom/examples/demo/src/components/Dashboard.ts#L9)
 
 Dashboard — Protected authenticated home. Catalog-typed DOM component
 (ComponentFn<AuthCatalog, 'Dashboard'>). Renders welcome message; logout

package/examples/@xmachines/play-dom-demo/variables/Home.md

@@ -6,7 +6,7 @@
 const Home: ComponentFn<AuthCatalog, "Home">;
 ```
 
-Defined in: [play-dom/examples/demo/src/components/Home.ts:9](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-dom/examples/demo/src/components/Home.ts#L9)
+Defined in: [play-dom/examples/demo/src/components/Home.ts:9](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-dom/examples/demo/src/components/Home.ts#L9)
 
 Home — Public landing page. Catalog-typed DOM component
 (ComponentFn<AuthCatalog, 'Home'>). Renders static welcome content from

package/examples/@xmachines/play-dom-demo/variables/Login.md

@@ -6,7 +6,7 @@
 const Login: ComponentFn<AuthCatalog, "Login">;
 ```
 
-Defined in: [play-dom/examples/demo/src/components/Login.ts:9](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-dom/examples/demo/src/components/Login.ts#L9)
+Defined in: [play-dom/examples/demo/src/components/Login.ts:9](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-dom/examples/demo/src/components/Login.ts#L9)
 
 Login — Authentication form. Catalog-typed DOM component
 (ComponentFn<AuthCatalog, 'Login'>). Binds username input to ctx.store via

package/examples/@xmachines/play-dom-demo/variables/NavBarView.md

@@ -6,7 +6,7 @@
 const NavBarView: ComponentFn<AuthCatalog, "NavBar">;
 ```
 
-Defined in: [play-dom/examples/demo/src/components/NavBarView.ts:12](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-dom/examples/demo/src/components/NavBarView.ts#L12)
+Defined in: [play-dom/examples/demo/src/components/NavBarView.ts:12](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-dom/examples/demo/src/components/NavBarView.ts#L12)
 
 NavBarView — Catalog-typed NavBar component for DOM renderer.
 

package/examples/@xmachines/play-dom-demo/variables/Navigation.md

@@ -6,7 +6,7 @@
 const Navigation: ComponentFn<AuthCatalog, "Navigation">;
 ```
 
-Defined in: [play-dom/examples/demo/src/components/Navigation.ts:9](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-dom/examples/demo/src/components/Navigation.ts#L9)
+Defined in: [play-dom/examples/demo/src/components/Navigation.ts:9](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-dom/examples/demo/src/components/Navigation.ts#L9)
 
 Navigation — Navigation status display. Catalog-typed DOM component
 (ComponentFn<AuthCatalog, 'Navigation'>). Renders current path and auth

package/examples/@xmachines/play-dom-demo/variables/Overview.md

@@ -6,7 +6,7 @@
 const Overview: ComponentFn<AuthCatalog, "Overview">;
 ```
 
-Defined in: [play-dom/examples/demo/src/components/Overview.ts:9](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-dom/examples/demo/src/components/Overview.ts#L9)
+Defined in: [play-dom/examples/demo/src/components/Overview.ts:9](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-dom/examples/demo/src/components/Overview.ts#L9)
 
 Overview — Dashboard overview child route. Catalog-typed DOM component
 (ComponentFn<AuthCatalog, 'Overview'>). Relative route resolves to

package/examples/@xmachines/play-dom-demo/variables/Profile.md

@@ -6,7 +6,7 @@
 const Profile: ComponentFn<AuthCatalog, "Profile">;
 ```
 
-Defined in: [play-dom/examples/demo/src/components/Profile.ts:9](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-dom/examples/demo/src/components/Profile.ts#L9)
+Defined in: [play-dom/examples/demo/src/components/Profile.ts:9](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-dom/examples/demo/src/components/Profile.ts#L9)
 
 Profile — Protected user profile page. Catalog-typed DOM component
 (ComponentFn<AuthCatalog, 'Profile'>). Renders username from route params

package/examples/@xmachines/play-dom-demo/variables/Settings.md

@@ -6,7 +6,7 @@
 const Settings: ComponentFn<AuthCatalog, "Settings">;
 ```
 
-Defined in: [play-dom/examples/demo/src/components/Settings.ts:9](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-dom/examples/demo/src/components/Settings.ts#L9)
+Defined in: [play-dom/examples/demo/src/components/Settings.ts:9](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-dom/examples/demo/src/components/Settings.ts#L9)
 
 Settings — Protected settings page. Catalog-typed DOM component
 (ComponentFn<AuthCatalog, 'Settings'>). Renders active section and username

package/examples/@xmachines/play-dom-demo/variables/Stats.md

@@ -6,7 +6,7 @@
 const Stats: ComponentFn<AuthCatalog, "Stats">;
 ```
 
-Defined in: [play-dom/examples/demo/src/components/Stats.ts:9](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-dom/examples/demo/src/components/Stats.ts#L9)
+Defined in: [play-dom/examples/demo/src/components/Stats.ts:9](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-dom/examples/demo/src/components/Stats.ts#L9)
 
 Stats — Dashboard stats child route. Catalog-typed DOM component
 (ComponentFn<AuthCatalog, 'Stats'>). Relative route resolves to

package/examples/@xmachines/play-dom-demo/variables/authCatalog.md

@@ -169,4 +169,4 @@ const authCatalog: Catalog<
 >;
 ```
 
-Defined in: [play-dom/examples/demo/src/catalog.ts:5](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-dom/examples/demo/src/catalog.ts#L5)
+Defined in: [play-dom/examples/demo/src/catalog.ts:5](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-dom/examples/demo/src/catalog.ts#L5)

package/examples/@xmachines/play-dom-router-demo/README.md

@@ -1,5 +1,7 @@
 [Examples](../../README.md) / @xmachines/play-dom-router-demo
 
+<!-- generated-by: gsd-doc-writer -->
+
 # @xmachines/play-dom-router-demo
 
 Pure TypeScript integration demo for [`@xmachines/play-dom-router`](../../../api/@xmachines/play-dom-router/README.md) — actor-authoritative routing with the Browser History API and no framework.
@@ -27,8 +29,8 @@ Then open `http://localhost:5174`.
 
 Use this order to understand the implementation:
 
-1. `src/main.ts` looks up the host element, calls `initApp(app)` from `src/runtime.ts`, and registers unload cleanup.
-2. `src/runtime.ts` creates the actor from the shared machine, starts it, initializes router sync via `initRouter(actor)`, mounts the shared DOM shell via `initShell(actor, host)`, and returns one cleanup function.
+1. `src/main.ts` looks up the host element (throws if absent), calls `initApp(app)` from `src/runtime.ts`, and registers unload cleanup.
+2. `src/runtime.ts` creates the actor from the shared machine via `definePlayer`, starts it, initializes router sync via `initRouter(actor)`, mounts the shared DOM shell via `initShell(actor, host)`, and returns one cleanup function.
 3. `initRouter(actor)` from `src/router.ts` extracts route metadata, creates a browser history wrapper, instantiates a router, and calls `connectRouter` to wire bidirectional actor ↔ URL sync.
 4. `initShell(actor, host)` is imported from `@xmachines/play-dom-demo`, so the router demo reuses the shared DOM shell instead of duplicating the scaffold and renderer wiring.
 5. Navigation buttons and links dispatch `play.route`, `auth.login`, and `auth.logout` events directly to the actor — no URL mutations from the shell.
@@ -37,12 +39,13 @@ Use this order to understand the implementation:
 ```ts
 // src/main.ts (shape)
 const app = document.getElementById("app");
-let cleanup;
-if (app) {
-	cleanup = initApp(app);
-}
+if (!app) throw new Error("Root element not found");
+
+const cleanup = initApp(app);
 
-window.addEventListener("beforeunload", () => cleanup?.());
+window.addEventListener("beforeunload", () => {
+	cleanup();
+});
 ```
 
 ```ts
@@ -63,17 +66,20 @@ export function initRouter(actor) {
 
 ```ts
 // src/runtime.ts (shape)
-const actor = createPlayer();
-actor.start();
+export function initApp(host: HTMLElement): () => void {
+	const createPlayer = definePlayer({ machine: authMachine });
+	const actor = createPlayer();
+	actor.start();
 
-const cleanupRouter = initRouter(actor);
-const cleanupShell = initShell(actor, host);
+	const cleanupRouter = initRouter(actor);
+	const cleanupShell = initShell(actor, host);
 
-return () => {
-	cleanupShell();
-	cleanupRouter();
-	actor.stop();
-};
+	return () => {
+		cleanupShell();
+		cleanupRouter();
+		actor.stop();
+	};
+}
 ```
 
 ## Key Files
@@ -83,8 +89,7 @@ return () => {
 - `src/router.ts` - `createBrowserHistory`, `createRouter`, and `connectRouter` wiring
 - `@xmachines/play-dom-demo` - shared DOM shell, NavBar, DebugPanel, and renderer wiring reused by this router demo
 - `test/library-pattern.test.ts` - architecture boundary and invariant assertions
-- `test/browser/startup.browser.test.ts` - startup rendering assertion for public home + login action
-- `test/browser/auth-flow.browser.test.ts` - login → dashboard → profile → logout browser flow
+- `test/browser/shared-demo.browser.test.ts` - startup rendering and full auth route browser flow
 
 ## State Machine & Architecture Details
 

package/examples/@xmachines/play-react-demo/README.md

@@ -1,5 +1,7 @@
 [Examples](../../README.md) / @xmachines/play-react-demo
 
+<!-- generated-by: gsd-doc-writer -->
+
 # @xmachines/play-react-demo
 
 React renderer demo for [`@xmachines/play-react`](../../../api/@xmachines/play-react/README.md) — actor + `PlayRenderer` without a router.
@@ -42,46 +44,44 @@ createRoot(document.getElementById("root")!).render(<App />);
 
 ```tsx
 // src/App.tsx (shape)
+// Both actor and registryResult are module-scope singletons — created once,
+// never recreated, no useMemo needed inside the component.
 const actor: AuthActor = definePlayer({ machine: authMachine })();
 actor.start();
 
-export function App() {
-	const registryResult = useMemo(
-		() =>
-			defineRegistry(authCatalog, {
-				components: {
-					Home,
-					About,
-					Contact,
-					Login,
-					Dashboard,
-					Overview,
-					Stats,
-					Profile,
-					Settings,
-					Navigation,
-					NavBar: NavBarView,
-				},
-				actions: {
-					login: async (args) =>
-						actor.send({
-							type: "auth.login",
-							username: assertNonNullable(args, "args").username,
-						}),
-					logout: async () => actor.send({ type: "auth.logout" }),
-					route: async (args) => {
-						const { to, params } = assertNonNullable(args, "args");
-						actor.send({
-							type: "play.route",
-							to,
-							...(params != null && { params }),
-						});
-					},
-				},
+const registryResult = defineRegistry(authCatalog, {
+	components: {
+		Home,
+		About,
+		Contact,
+		Login,
+		Dashboard,
+		Overview,
+		Stats,
+		Profile,
+		Settings,
+		Navigation,
+		NavBar: NavBarView,
+	},
+	actions: {
+		login: async (args) =>
+			actor.send({
+				type: "auth.login",
+				username: assertNonNullable(args, "args").username,
 			}),
-		[],
-	);
+		logout: async () => actor.send({ type: "auth.logout" }),
+		route: async (args) => {
+			const { to, params } = assertNonNullable(args, "args");
+			actor.send({
+				type: "play.route",
+				to,
+				...(params != null && { params }),
+			});
+		},
+	},
+});
 
+export function App() {
 	return (
 		<div className="demo-app" data-demo-shell>
 			<header className="demo-header">
@@ -103,6 +103,7 @@ export function App() {
 
 - `src/main.tsx` - React entry point that mounts `<App />`
 - `src/App.tsx` - actor lifecycle, registry construction, and `PlayUIProvider` + `PlayRenderer` composition
+- `src/catalog.ts` - catalog definition using `defineCatalog` from `@json-render/core` with `@json-render/react/schema`
 - `src/components/` - demo view components bound to catalog component keys (Home, Login, Dashboard, Profile, etc.)
 - `test/library-pattern.test.ts` - architecture boundary and invariant assertions
 - `test/browser/renderer-demo.browser.test.tsx` - browser-mode renderer coverage
@@ -156,8 +157,8 @@ Expected result: library-pattern invariant tests pass and the browser renderer s
 
 ## Learn More
 
-- [React](../../../api/@xmachines/play-react/README.md)
-- [React Router](../play-react-router-demo/README.md)
+- [play-react](../../../api/@xmachines/play-react/README.md)
+- [React Router demo](../play-react-router-demo/README.md)
 
 ## Type Aliases
 

package/examples/@xmachines/play-react-demo/functions/App.md

@@ -6,7 +6,7 @@
 function App(): Element;
 ```
 
-Defined in: [packages/play-react/examples/demo/src/App.tsx:36](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-react/examples/demo/src/App.tsx#L36)
+Defined in: [packages/play-react/examples/demo/src/App.tsx:68](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-react/examples/demo/src/App.tsx#L68)
 
 ## Returns
 

package/examples/@xmachines/play-react-demo/type-aliases/AuthCatalog.md

@@ -6,4 +6,4 @@
 type AuthCatalog = typeof authCatalog;
 ```
 
-Defined in: [packages/play-react/examples/demo/src/catalog.ts:6](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-react/examples/demo/src/catalog.ts#L6)
+Defined in: [packages/play-react/examples/demo/src/catalog.ts:6](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-react/examples/demo/src/catalog.ts#L6)

package/examples/@xmachines/play-react-demo/variables/About.md

@@ -6,7 +6,7 @@
 const About: ComponentFn<AuthCatalog, "About">;
 ```
 
-Defined in: [packages/play-react/examples/demo/src/components/About.tsx:10](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-react/examples/demo/src/components/About.tsx#L10)
+Defined in: [packages/play-react/examples/demo/src/components/About.tsx:10](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-react/examples/demo/src/components/About.tsx#L10)
 
 About — Public information page
 

package/examples/@xmachines/play-react-demo/variables/Contact.md

@@ -6,7 +6,7 @@
 const Contact: ComponentFn<AuthCatalog, "Contact">;
 ```
 
-Defined in: [packages/play-react/examples/demo/src/components/Contact.tsx:10](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-react/examples/demo/src/components/Contact.tsx#L10)
+Defined in: [packages/play-react/examples/demo/src/components/Contact.tsx:10](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-react/examples/demo/src/components/Contact.tsx#L10)
 
 Contact — Public contact page
 

package/examples/@xmachines/play-react-demo/variables/Dashboard.md

@@ -6,7 +6,7 @@
 const Dashboard: ComponentFn<AuthCatalog, "Dashboard">;
 ```
 
-Defined in: [packages/play-react/examples/demo/src/components/Dashboard.tsx:12](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-react/examples/demo/src/components/Dashboard.tsx#L12)
+Defined in: [packages/play-react/examples/demo/src/components/Dashboard.tsx:12](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-react/examples/demo/src/components/Dashboard.tsx#L12)
 
 Dashboard — Protected authenticated home
 

package/examples/@xmachines/play-react-demo/variables/DebugPanel.md

@@ -8,7 +8,7 @@ const DebugPanel: FC<{
 }>;
 ```
 
-Defined in: [packages/play-react/examples/demo/src/components/DebugPanel.tsx:11](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-react/examples/demo/src/components/DebugPanel.tsx#L11)
+Defined in: [packages/play-react/examples/demo/src/components/DebugPanel.tsx:11](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-react/examples/demo/src/components/DebugPanel.tsx#L11)
 
 DebugPanel — Live debug footer. Observes actor.state and actor.currentRoute
 via useSignalEffect and displays current state value, can-logout status,

package/examples/@xmachines/play-react-demo/variables/Home.md

@@ -6,7 +6,7 @@
 const Home: ComponentFn<AuthCatalog, "Home">;
 ```
 
-Defined in: [packages/play-react/examples/demo/src/components/Home.tsx:10](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-react/examples/demo/src/components/Home.tsx#L10)
+Defined in: [packages/play-react/examples/demo/src/components/Home.tsx:10](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-react/examples/demo/src/components/Home.tsx#L10)
 
 Home - Public landing page component
 

package/examples/@xmachines/play-react-demo/variables/Login.md

@@ -6,7 +6,7 @@
 const Login: ComponentFn<AuthCatalog, "Login">;
 ```
 
-Defined in: [packages/play-react/examples/demo/src/components/Login.tsx:14](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-react/examples/demo/src/components/Login.tsx#L14)
+Defined in: [packages/play-react/examples/demo/src/components/Login.tsx:14](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-react/examples/demo/src/components/Login.tsx#L14)
 
 Login — Authentication form
 

package/examples/@xmachines/play-react-demo/variables/NavBar.md

@@ -8,7 +8,7 @@ const NavBar: FC<{
 }>;
 ```
 
-Defined in: [packages/play-react/examples/demo/src/components/NavBar.tsx:12](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-react/examples/demo/src/components/NavBar.tsx#L12)
+Defined in: [packages/play-react/examples/demo/src/components/NavBar.tsx:12](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-react/examples/demo/src/components/NavBar.tsx#L12)
 
 NavBar — App-shell navigation component.
 

package/examples/@xmachines/play-react-demo/variables/NavBarView.md

@@ -6,7 +6,7 @@
 const NavBarView: ComponentFn<AuthCatalog, "NavBar">;
 ```
 
-Defined in: [packages/play-react/examples/demo/src/components/NavBarView.tsx:11](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-react/examples/demo/src/components/NavBarView.tsx#L11)
+Defined in: [packages/play-react/examples/demo/src/components/NavBarView.tsx:11](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-react/examples/demo/src/components/NavBarView.tsx#L11)
 
 NavBarView — Catalog-typed NavBar for use in defineRegistry components map.
 

package/examples/@xmachines/play-react-demo/variables/Navigation.md

@@ -6,7 +6,7 @@
 const Navigation: ComponentFn<AuthCatalog, "Navigation">;
 ```
 
-Defined in: [packages/play-react/examples/demo/src/components/Navigation.tsx:10](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-react/examples/demo/src/components/Navigation.tsx#L10)
+Defined in: [packages/play-react/examples/demo/src/components/Navigation.tsx:10](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-react/examples/demo/src/components/Navigation.tsx#L10)
 
 Navigation - Status display component
 

package/examples/@xmachines/play-react-demo/variables/Overview.md

@@ -6,7 +6,7 @@
 const Overview: ComponentFn<AuthCatalog, "Overview">;
 ```
 
-Defined in: [packages/play-react/examples/demo/src/components/Overview.tsx:10](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-react/examples/demo/src/components/Overview.tsx#L10)
+Defined in: [packages/play-react/examples/demo/src/components/Overview.tsx:10](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-react/examples/demo/src/components/Overview.tsx#L10)
 
 Overview - Dashboard overview child route component
 

package/examples/@xmachines/play-react-demo/variables/Profile.md

@@ -6,7 +6,7 @@
 const Profile: ComponentFn<AuthCatalog, "Profile">;
 ```
 
-Defined in: [packages/play-react/examples/demo/src/components/Profile.tsx:11](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-react/examples/demo/src/components/Profile.tsx#L11)
+Defined in: [packages/play-react/examples/demo/src/components/Profile.tsx:11](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-react/examples/demo/src/components/Profile.tsx#L11)
 
 Profile — Protected user profile page
 

package/examples/@xmachines/play-react-demo/variables/Settings.md

@@ -6,7 +6,7 @@
 const Settings: ComponentFn<AuthCatalog, "Settings">;
 ```
 
-Defined in: [packages/play-react/examples/demo/src/components/Settings.tsx:11](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-react/examples/demo/src/components/Settings.tsx#L11)
+Defined in: [packages/play-react/examples/demo/src/components/Settings.tsx:11](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-react/examples/demo/src/components/Settings.tsx#L11)
 
 Settings — Protected settings page
 

package/examples/@xmachines/play-react-demo/variables/Shell.md

@@ -10,7 +10,7 @@ const Shell: FC<{
 }>;
 ```
 
-Defined in: [packages/play-react/examples/demo/src/components/Shell.tsx:14](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-react/examples/demo/src/components/Shell.tsx#L14)
+Defined in: [packages/play-react/examples/demo/src/components/Shell.tsx:14](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-react/examples/demo/src/components/Shell.tsx#L14)
 
 Demo Shell layout component.
 

package/examples/@xmachines/play-react-demo/variables/Stats.md

@@ -6,7 +6,7 @@
 const Stats: ComponentFn<AuthCatalog, "Stats">;
 ```
 
-Defined in: [packages/play-react/examples/demo/src/components/Stats.tsx:10](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-react/examples/demo/src/components/Stats.tsx#L10)
+Defined in: [packages/play-react/examples/demo/src/components/Stats.tsx:10](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-react/examples/demo/src/components/Stats.tsx#L10)
 
 Stats - Dashboard stats child route component
 

package/examples/@xmachines/play-react-demo/variables/authCatalog.md

@@ -169,4 +169,4 @@ const authCatalog: Catalog<
 >;
 ```
 
-Defined in: [packages/play-react/examples/demo/src/catalog.ts:5](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-react/examples/demo/src/catalog.ts#L5)
+Defined in: [packages/play-react/examples/demo/src/catalog.ts:5](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-react/examples/demo/src/catalog.ts#L5)

package/examples/@xmachines/play-react-router-demo/README.md

@@ -1,5 +1,7 @@
 [Examples](../../README.md) / @xmachines/play-react-router-demo
 
+<!-- generated-by: gsd-doc-writer -->
+
 # @xmachines/play-react-router-demo
 
 React Router v7 integration demo for the XMachines Play architecture.
@@ -10,7 +12,7 @@ React Router v7 integration demo for the XMachines Play architecture.
 - `PlayRouterProvider` renderer-based integration with React Router
 - Shell-driven rendering via `PlayRenderer` with actor-authoritative navigation
 - Canonical TC39 Signals lifecycle mapped to React's rendering loop
-- Non-browser invariant tests plus browser E2E coverage
+- Browser E2E coverage via a shared demo browser suite
 
 ## Running the Demo
 
@@ -28,71 +30,73 @@ Then open `http://localhost:5173`.
 Use this order to understand the implementation:
 
 1. `src/main.tsx` mounts `<App />`.
-2. `src/App.tsx` calls `useMemo(createAppRuntime, [])` to create the actor from shared machine + catalog and start it once per mounted app.
-3. `createAppRuntime()` extracts route metadata from the machine and converts it into a memoized route map.
-4. `createAppRuntime()` also builds a React Router data router with a tiny `RoutedShell` wrapper.
-5. `PlayRouterProvider` wires actor navigation and router changes in both directions.
-6. `Shell` (inside `App.tsx`) receives both `actor` and `router`, matching the other router demos.
-7. `ReactRouterApp` mounts `RouterProvider` with the bridged router instance.
-8. Browser tests in `test/browser/` validate startup and auth navigation flow.
+2. `src/App.tsx` calls `useMemo(createAppRuntime, [])` to create the actor and browser router, starting the actor once per mounted app.
+3. `src/runtime.ts` pre-builds the `routeMap` (via `createRouteMap(authMachine)`) and exports `createPlayer`, `routeMap`, and `createRegistryResult` — keeping runtime setup separate from React lifecycle concerns.
+4. `createAppRuntime()` creates the actor, builds a `registryResult` from the registry, and constructs a React Router data router with a `RoutedShell` wrapper.
+5. `PlayRouterProvider` wires actor navigation and router changes in both directions, using the pre-built `routeMap`.
+6. `Shell` (inside `App.tsx`) receives `actor`, `router`, and `registryResult`, matching the other router demos.
+7. The `renderer` prop renders `<RouterProvider router={currentRouter} />` directly — no intermediate `ReactRouterApp` wrapper is needed.
+8. Browser tests in `test/browser/` validate startup and auth navigation flow via a shared demo suite.
 
 ```tsx
 // src/main.tsx (shape)
 createRoot(document.getElementById("root")!).render(<App />);
 ```
 
+```ts
+// src/runtime.ts (shape)
+export const createPlayer = definePlayer({ machine: authMachine });
+export const routeMap = createRouteMap(authMachine);
+
+export function createRegistryResult(actor: ReturnType<typeof createPlayer>) {
+	return defineRegistry(authCatalog, {
+		components: { Home, About, Contact, Login, Dashboard /* … */ },
+		actions: {
+			login: async (args) => actor.send({ type: "auth.login", username: args.username }),
+			logout: async () => actor.send({ type: "auth.logout" }),
+			route: async (args) => actor.send({ type: "play.route", to: args.to }),
+		},
+	});
+}
+```
+
 ```tsx
 // src/App.tsx (shape)
 function createAppRuntime() {
 	const actor = createPlayer();
 	actor.start();
 
-	const routeTree = extractMachineRoutes(authMachine);
-	const routeMap = createRouteMapFromTree(routeTree);
+	const registryResult = createRegistryResult(actor);
 
-	let router;
+	let router!: BrowserRouterInstance;
 
 	function RoutedShell() {
-		return <Shell actor={actor} router={router} />;
+		return <Shell actor={actor} router={router} registryResult={registryResult} />;
 	}
 
 	router = createBrowserRouter([{ path: "*", element: <RoutedShell /> }]);
 
-	return { actor, routeMap, router };
+	return { actor, router };
 }
 
-const { actor, routeMap, router } = useMemo(createAppRuntime, []);
+const { actor, router } = useMemo(createAppRuntime, []);
 
 return (
 	<PlayRouterProvider
 		actor={actor}
 		router={router}
 		routeMap={routeMap}
-		renderer={(currentActor, currentRouter) => (
-			<ReactRouterApp actor={currentActor} router={currentRouter} />
-		)}
+		renderer={(_, currentRouter) => <RouterProvider router={currentRouter} />}
 	/>
 );
 ```
 
-```tsx
-// src/components/Login.tsx (shape)
-export function Login() {
-	return (
-		<button onClick={() => actor.send({ type: "auth.login", username, password })}>
-			Login
-		</button>
-	);
-}
-```
-
 ## Key Files
 
 - `src/main.tsx` - React entry point that mounts `<App />`
-- `src/App.tsx` - actor lifecycle, route extraction, provider wiring, and renderer composition
-- `src/components/` - demo views bound to catalog component keys (Home, Login, Dashboard, Profile, etc.)
-- `test/browser/startup.browser.test.tsx` - startup assertion for public home + login control
-- `test/browser/auth-flow.browser.test.tsx` - end-to-end login -> dashboard -> profile -> logout flow
+- `src/runtime.ts` - actor factory (`createPlayer`), pre-built `routeMap`, and `createRegistryResult` registry wiring
+- `src/App.tsx` - actor lifecycle, provider wiring, and `RoutedShell` composition
+- `test/browser/shared-demo.browser.test.tsx` - browser E2E suite for startup and auth navigation flow
 
 ## State Machine & Architecture Details
 
@@ -116,7 +120,7 @@ Watcher notifications are one-shot. Cleanup is explicit: bridge/provider teardow
 
 ## Adapter Boundaries
 
-`PlayRouterProvider` and the React Router bridge stay passive infrastructure. Business validity remains actor-owned, while `RouterBridgeBase` remains the shared policy layer and the concrete React adapter stays a thin port, delegating DOM synchronization to React Router. The demo keeps the same `Shell(actor, router)` shape as the other router demos, with `ReactRouterApp` as the only React Router-specific wrapper needed to mount `RouterProvider`.
+`PlayRouterProvider` and the React Router bridge stay passive infrastructure. Business validity remains actor-owned, while `RouterBridgeBase` remains the shared policy layer and the concrete React adapter stays a thin port, delegating DOM synchronization to React Router. The demo keeps the same `Shell(actor, router, registryResult)` shape as the other router demos, with `RouterProvider` rendered directly inside the `renderer` callback — no additional wrapper component is required.
 
 ## Available Scripts
 

package/examples/@xmachines/play-solid-demo/README.md

@@ -1,5 +1,7 @@
 [Examples](../../README.md) / @xmachines/play-solid-demo
 
+<!-- generated-by: gsd-doc-writer -->
+
 # @xmachines/play-solid-demo
 
 Solid renderer demo for [`@xmachines/play-solid`](../../../api/@xmachines/play-solid/README.md) — actor + `PlayRenderer` without a router.
@@ -28,7 +30,7 @@ Then open `http://localhost:5173`.
 Use this order to understand the implementation:
 
 1. `src/main.tsx` mounts `<App />` to the DOM root via Solid's `render`.
-2. `src/App.tsx` creates the actor at module scope via `definePlayer({ machine: authMachine })()` and starts it.
+2. `src/App.tsx` creates the actor at module scope via `definePlayer({ machine: authMachine })` then calls the returned factory to produce the actor and starts it.
 3. `defineRegistry(authCatalog, { components, actions })` builds the typed `registryResult` inside `createMemo` — real async action handlers dispatching to `actor.send()`.
 4. `<PlayUIProvider actor={actor} registryResult={registryResult()}><PlayRenderer /></PlayUIProvider>` observes `actor.currentView` and renders the active spec.
 5. A `NavBar` component observes `actor` signals directly for nav visibility.
@@ -42,7 +44,8 @@ render(() => <App />, document.getElementById("app")!);
 
 ```tsx
 // src/App.tsx (shape)
-const actor = definePlayer({ machine: authMachine })() as AuthActor;
+const createPlayer = definePlayer({ machine: authMachine });
+const actor = createPlayer() as AuthActor;
 actor.start();
 
 export function App() {