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

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

@@ -1,5 +1,7 @@
 [Examples](../../README.md) / @xmachines/play-vue-demo
 
+<!-- generated-by: gsd-doc-writer -->
+
 # @xmachines/play-vue-demo
 
 Vue 3 renderer demo for [`@xmachines/play-vue`](../../../api/@xmachines/play-vue/README.md) — actor + `PlayRenderer` without a router.
@@ -29,16 +31,17 @@ Use this order to understand the implementation:
 
 1. `src/main.ts` calls `definePlayer({ machine: authMachine })`, starts the actor, and mounts the Vue app.
 2. The actor is provided to all components via `app.provide("actor", actor)`.
-3. `src/App.vue` injects the actor and builds the typed `registryResult` with `defineRegistry(authCatalog, { components, actions })` inside `computed` — real async action handlers dispatching to `actor.send()`.
-4. `<PlayUIProvider :actor="actor" :registryResult="registryResult"><PlayRenderer /></PlayUIProvider>` observes `actor.currentView` and renders the active spec.
+3. `src/App.vue` injects the actor, declares a typed `ComponentsMap<typeof authCatalog>` for `demoViews`, and builds the `registryResult` with `defineRegistry(authCatalog, { components: demoViews, actions })` inside `computed` — action handlers use `satisfies ActionFn` for catalog-typed safety and dispatch to `actor.send()`.
+4. `<PlayUIProvider :actor="typedActor" :registryResult="registryResult"><PlayRenderer /></PlayUIProvider>` observes `actor.currentView` and renders the active spec.
 5. A `NavBar` SFC observes `actor` signals directly for nav visibility.
-6. `<DebugPanel :actor="actor" />` shows live state, auth status, and current route.
+6. `<DebugPanel :actor="typedActor" />` shows live state, auth status, and current route.
 7. HMR cleanup calls `actor.stop()` via `import.meta.hot.dispose`.
 8. Browser tests in `test/browser/` validate startup and interaction behavior.
 
 ```ts
-// src/main.ts (shape)
-const actor = definePlayer({ machine: authMachine })();
+// src/main.ts
+const createPlayer = definePlayer({ machine: authMachine });
+const actor = createPlayer() as AuthActor;
 actor.start();
 
 const app = createApp(App);
@@ -47,40 +50,46 @@ app.mount("#app");
 ```
 
 ```vue
-<!-- src/App.vue (shape) -->
+<!-- src/App.vue -->
 <script setup lang="ts">
+import type { ComponentsMap } from "@xmachines/play-vue";
+import type { ActionFn } from "@json-render/vue";
+
 const typedActor = assertNonNullable(inject<AuthActor>("actor"), "actor");
 
+const demoViews: ComponentsMap<typeof authCatalog> = {
+	Home: HomeSFC,
+	About: AboutSFC,
+	Contact: ContactSFC,
+	Login: LoginSFC,
+	Dashboard: DashboardSFC,
+	Overview: OverviewSFC,
+	Stats: StatsSFC,
+	Profile: ProfileSFC,
+	Settings: SettingsSFC,
+	Navigation: NavigationSFC,
+	NavBar: NavBarViewSFC,
+};
+
 const registryResult = computed(() =>
 	defineRegistry(authCatalog, {
-		components: {
-			Home: HomeSFC,
-			About: AboutSFC,
-			Contact: ContactSFC,
-			Login: LoginSFC,
-			Dashboard: DashboardSFC,
-			Overview: OverviewSFC,
-			Stats: StatsSFC,
-			Profile: ProfileSFC,
-			Settings: SettingsSFC,
-			Navigation: NavigationSFC,
-			NavBar: NavBarViewSFC,
-		},
+		components: demoViews,
 		actions: {
-			login: async (args) =>
+			login: (async (args) => {
 				typedActor.send({
 					type: "auth.login",
 					username: assertNonNullable(args, "args").username,
-				}),
+				});
+			}) satisfies ActionFn<typeof authCatalog, "login">,
 			logout: async () => typedActor.send({ type: "auth.logout" }),
-			route: async (args) => {
+			route: (async (args) => {
 				const { to, params } = assertNonNullable(args, "args");
 				typedActor.send({
 					type: "play.route",
 					to,
 					...(params != null && { params }),
 				});
-			},
+			}) satisfies ActionFn<typeof authCatalog, "route">,
 		},
 	}),
 );
@@ -105,8 +114,10 @@ const registryResult = computed(() =>
 ## Key Files
 
 - `src/main.ts` - actor creation/start and Vue app mount with actor injection
-- `src/App.vue` - registry construction and `PlayUIProvider` + `PlayRenderer` composition
+- `src/App.vue` - typed `ComponentsMap` declaration, registry construction, and `PlayUIProvider` + `PlayRenderer` composition
+- `src/catalog.ts` - `authCatalog` built via `defineCatalog` with the `@json-render/vue` schema
 - `src/components/` - demo view components bound to catalog component keys (Home, Login, Dashboard, Profile, etc.)
+- `src/index.ts` - re-exports all components and catalog for library-pattern testing
 - `test/library-pattern.test.ts` - architecture boundary and invariant assertions
 - `test/browser/renderer-demo.browser.test.ts` - browser-mode renderer coverage
 

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

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

package/examples/@xmachines/play-vue-demo/variables/App.md

@@ -6,4 +6,4 @@
 const App: DefineComponent<{}, {}, unknown>;
 ```
 
-Defined in: [packages/play-vue/examples/demo/src/env.d.ts:5](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.51/packages/play-vue/examples/demo/src/env.d.ts#L5)
+Defined in: [packages/play-vue/examples/demo/src/env.d.ts:5](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.53/packages/play-vue/examples/demo/src/env.d.ts#L5)

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

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

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

@@ -1,5 +1,7 @@
 [Examples](../../README.md) / @xmachines/play-vue-router-demo
 
+<!-- generated-by: gsd-doc-writer -->
+
 # @xmachines/play-vue-router-demo
 
 Vue Router integration demo for the XMachines Play architecture using Vue Composition API.

package/examples/README.md

@@ -83,13 +83,13 @@ npm run dev -w @xmachines/play-dom-router-demo
 
 ### Renderers
 
-| Package                                                             | Role                                |
-| ------------------------------------------------------------------- | ----------------------------------- |
-| [`@xmachines/play-dom`](../api/@xmachines/play-dom/README.md)       | `connectRenderer`, `defineRegistry` |
-| [`@xmachines/play-react`](../api/@xmachines/play-react/README.md)   | `PlayRenderer`, `defineRegistry`    |
-| [`@xmachines/play-solid`](../api/@xmachines/play-solid/README.md)   | `PlayRenderer`, `defineRegistry`    |
-| [`@xmachines/play-svelte`](../api/@xmachines/play-svelte/README.md) | `PlayRenderer`, `defineRegistry`    |
-| [`@xmachines/play-vue`](../api/@xmachines/play-vue/README.md)       | `PlayRenderer`, `defineRegistry`    |
+| Package                                                             | Role                                               |
+| ------------------------------------------------------------------- | -------------------------------------------------- |
+| [`@xmachines/play-dom`](../api/@xmachines/play-dom/README.md)       | `createPlayUI`, `createRenderer`, `defineRegistry` |
+| [`@xmachines/play-react`](../api/@xmachines/play-react/README.md)   | `PlayRenderer`, `defineRegistry`                   |
+| [`@xmachines/play-solid`](../api/@xmachines/play-solid/README.md)   | `PlayRenderer`, `defineRegistry`                   |
+| [`@xmachines/play-svelte`](../api/@xmachines/play-svelte/README.md) | `PlayRenderer`, `defineRegistry`                   |
+| [`@xmachines/play-vue`](../api/@xmachines/play-vue/README.md)       | `PlayRenderer`, `defineRegistry`                   |
 
 ### Router Adapters
 

package/examples/multi-router-integration.md

@@ -268,7 +268,7 @@ import {
 } from "@xmachines/play-dom-router";
 import { extractMachineRoutes } from "@xmachines/play-router";
 import { definePlayer } from "@xmachines/play-xstate";
-import { connectRenderer, defineRegistry } from "@xmachines/play-dom";
+import { createPlayUI, defineRegistry } from "@xmachines/play-dom";
 import { authMachine, authCatalog } from "@xmachines/play-actor-shared";
 
 const createPlayer = definePlayer({ machine: authMachine });
@@ -287,16 +287,13 @@ const router = createRouter({ routeTree, history });
 const disconnect = connectRouter({ actor, router, routeMap });
 
 // Renderer setup
-const { registry } = defineRegistry(authCatalog, {
+const registryResult = defineRegistry(authCatalog, {
 	components: {
 		/* ...your DOM components */
 	},
 });
-const disconnectRenderer = connectRenderer({
-	actor,
-	registry,
-	container: document.getElementById("app")!,
-});
+const mount = createPlayUI(registryResult);
+const disconnectRenderer = mount(actor, document.getElementById("app")!);
 
 // Cleanup
 window.addEventListener("beforeunload", () => {
@@ -376,13 +373,13 @@ export const disconnectRouter = connectRouter({ actor, routeMap });
 
 Each framework also has a companion renderer package for the view layer:
 
-| Package                  | Framework   | Key API                             |
-| ------------------------ | ----------- | ----------------------------------- |
-| `@xmachines/play-dom`    | Vanilla DOM | `connectRenderer`, `defineRegistry` |
-| `@xmachines/play-react`  | React       | `PlayRenderer`, `defineRegistry`    |
-| `@xmachines/play-solid`  | SolidJS     | `PlayRenderer`, `defineRegistry`    |
-| `@xmachines/play-vue`    | Vue 3       | `PlayRenderer`, `defineRegistry`    |
-| `@xmachines/play-svelte` | Svelte 5    | `PlayRenderer`, `defineRegistry`    |
+| Package                  | Framework   | Key API                                            |
+| ------------------------ | ----------- | -------------------------------------------------- |
+| `@xmachines/play-dom`    | Vanilla DOM | `createPlayUI`, `createRenderer`, `defineRegistry` |
+| `@xmachines/play-react`  | React       | `PlayRenderer`, `defineRegistry`                   |
+| `@xmachines/play-solid`  | SolidJS     | `PlayRenderer`, `defineRegistry`                   |
+| `@xmachines/play-vue`    | Vue 3       | `PlayRenderer`, `defineRegistry`                   |
+| `@xmachines/play-svelte` | Svelte 5    | `PlayRenderer`, `defineRegistry`                   |
 
 ## Architectural Invariants
 
@@ -402,5 +399,5 @@ All adapters preserve the 5 architectural invariants:
 ## Learn More
 
 - [Play RFC](../rfc/play.md) — Complete architectural specification
-- [play-router README](../api/@xmachines/play-router/README.md) — Route extraction and route maps
-- [play-dom-router README](../api/@xmachines/play-dom-router/README.md) — Vanilla DOM router adapter
+- [play-router](../api/@xmachines/play-router/README.md) — Route extraction and route maps
+- [play-dom-router](../api/@xmachines/play-dom-router/README.md) — Vanilla DOM router adapter

package/examples/routing-patterns.md

@@ -301,5 +301,5 @@ function App() {
 ## Learn More
 
 - [Play RFC](../rfc/play.md) — Complete architectural specification
-- [play-router README](../api/@xmachines/play-router/README.md) — Route extraction and tree building
-- [play-dom-router README](../api/@xmachines/play-dom-router/README.md) — Vanilla DOM bindings
+- [play-router](../api/@xmachines/play-router/README.md) — Route extraction and tree building
+- [play-dom-router](../api/@xmachines/play-dom-router/README.md) — Vanilla DOM bindings

package/guides/README.md

@@ -44,7 +44,7 @@ View layer documentation by framework:
 - **[@xmachines/play-vue](../api/@xmachines/play-vue/README.md)** — Vue rendering from actor-driven view state
 - **[@xmachines/play-solid](../api/@xmachines/play-solid/README.md)** — SolidJS rendering from actor-driven view state
 - **[@xmachines/play-svelte](../api/@xmachines/play-svelte/README.md)** — Svelte 5 rendering from actor-driven view state
-- **[@xmachines/play-dom](../api/@xmachines/play-dom/README.md)** — Vanilla DOM rendering ([`connectRenderer`](../api/@xmachines/play-dom/functions/connectRenderer.md), [`defineRegistry`](../api/@xmachines/play-dom/functions/defineRegistry.md))
+- **[@xmachines/play-dom](../api/@xmachines/play-dom/README.md)** — Vanilla DOM rendering ([`createPlayUI`](../api/@xmachines/play-dom/functions/createPlayUI.md), [`createRenderer`](../api/@xmachines/play-dom/functions/createRenderer.md), [`defineRegistry`](../api/@xmachines/play-dom/functions/defineRegistry.md))
 
 ## Contributing & Operations
 

package/guides/actor-model.md

@@ -175,6 +175,6 @@ The Play RFC captures the actor/infrastructure split in a single statement:
 - [Understanding TC39 Signals](signals.md) — how the actor communicates with infrastructure
 - [Understanding State Machines](state-machines.md) — how the machine definition drives actor behavior
 - [Getting Started](getting-started.md) — hands-on walkthrough creating and starting an actor
-- [@xmachines/play-actor README](../api/@xmachines/play-actor/README.md) — API reference for [`AbstractActor`](../api/@xmachines/play-actor/classes/AbstractActor.md)
-- [@xmachines/play-xstate README](../api/@xmachines/play-xstate/README.md) — API reference for [`definePlayer`](../api/@xmachines/play-xstate/functions/definePlayer.md) and [`PlayerActor`](../api/@xmachines/play-xstate/classes/PlayerActor.md)
+- [@xmachines/play-actor](../api/@xmachines/play-actor/README.md) — API reference for [`AbstractActor`](../api/@xmachines/play-actor/classes/AbstractActor.md)
+- [@xmachines/play-xstate](../api/@xmachines/play-xstate/README.md) — API reference for [`definePlayer`](../api/@xmachines/play-xstate/functions/definePlayer.md) and [`PlayerActor`](../api/@xmachines/play-xstate/classes/PlayerActor.md)
 - [Play RFC](../rfc/play.md) — complete architectural specification