@xmachines/docs 6.1.0 → 8.0.0-next.1

package/examples/@xmachines/play-svelte-demo/variables/demoComponents.md

@@ -6,25 +6,25 @@
 const demoComponents: object;
 ```
 
-Defined in: [packages/play-svelte/examples/demo/src/components/demo-components.ts:20](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-svelte/examples/demo/src/components/demo-components.ts#L20)
+Defined in: [packages/play-svelte/examples/demo/src/components/demo-components.ts:20](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-svelte/examples/demo/src/components/demo-components.ts#L20)
 
 demoComponents — the full catalog component map, shared with the router demos.
 
 ## Type Declaration
 
-| Name                                          | Type                  | Default value | Defined in                                                                                                                                                                                                   |
-| --------------------------------------------- | --------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| <a id="property-about"></a> `About`           | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:22](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-svelte/examples/demo/src/components/demo-components.ts#L22) |
-| <a id="property-button"></a> `Button`         | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:34](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-svelte/examples/demo/src/components/demo-components.ts#L34) |
-| <a id="property-contact"></a> `Contact`       | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:23](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-svelte/examples/demo/src/components/demo-components.ts#L23) |
-| <a id="property-dashboard"></a> `Dashboard`   | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:25](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-svelte/examples/demo/src/components/demo-components.ts#L25) |
-| <a id="property-field"></a> `Field`           | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:33](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-svelte/examples/demo/src/components/demo-components.ts#L33) |
-| <a id="property-home"></a> `Home`             | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:21](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-svelte/examples/demo/src/components/demo-components.ts#L21) |
-| <a id="property-login"></a> `Login`           | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:24](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-svelte/examples/demo/src/components/demo-components.ts#L24) |
-| <a id="property-navbar"></a> `NavBar`         | `LegacyComponentType` | `NavBarView`  | [packages/play-svelte/examples/demo/src/components/demo-components.ts:31](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-svelte/examples/demo/src/components/demo-components.ts#L31) |
-| <a id="property-navigation"></a> `Navigation` | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:30](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-svelte/examples/demo/src/components/demo-components.ts#L30) |
-| <a id="property-overview"></a> `Overview`     | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:26](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-svelte/examples/demo/src/components/demo-components.ts#L26) |
-| <a id="property-panel"></a> `Panel`           | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:32](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-svelte/examples/demo/src/components/demo-components.ts#L32) |
-| <a id="property-profile"></a> `Profile`       | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:28](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-svelte/examples/demo/src/components/demo-components.ts#L28) |
-| <a id="property-settings"></a> `Settings`     | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:29](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-svelte/examples/demo/src/components/demo-components.ts#L29) |
-| <a id="property-stats"></a> `Stats`           | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:27](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-svelte/examples/demo/src/components/demo-components.ts#L27) |
+| Name                                          | Type                  | Default value | Defined in                                                                                                                                                                                                               |
+| --------------------------------------------- | --------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| <a id="property-about"></a> `About`           | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:22](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-svelte/examples/demo/src/components/demo-components.ts#L22) |
+| <a id="property-button"></a> `Button`         | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:34](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-svelte/examples/demo/src/components/demo-components.ts#L34) |
+| <a id="property-contact"></a> `Contact`       | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:23](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-svelte/examples/demo/src/components/demo-components.ts#L23) |
+| <a id="property-dashboard"></a> `Dashboard`   | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:25](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-svelte/examples/demo/src/components/demo-components.ts#L25) |
+| <a id="property-field"></a> `Field`           | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:33](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-svelte/examples/demo/src/components/demo-components.ts#L33) |
+| <a id="property-home"></a> `Home`             | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:21](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-svelte/examples/demo/src/components/demo-components.ts#L21) |
+| <a id="property-login"></a> `Login`           | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:24](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-svelte/examples/demo/src/components/demo-components.ts#L24) |
+| <a id="property-navbar"></a> `NavBar`         | `LegacyComponentType` | `NavBarView`  | [packages/play-svelte/examples/demo/src/components/demo-components.ts:31](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-svelte/examples/demo/src/components/demo-components.ts#L31) |
+| <a id="property-navigation"></a> `Navigation` | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:30](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-svelte/examples/demo/src/components/demo-components.ts#L30) |
+| <a id="property-overview"></a> `Overview`     | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:26](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-svelte/examples/demo/src/components/demo-components.ts#L26) |
+| <a id="property-panel"></a> `Panel`           | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:32](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-svelte/examples/demo/src/components/demo-components.ts#L32) |
+| <a id="property-profile"></a> `Profile`       | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:28](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-svelte/examples/demo/src/components/demo-components.ts#L28) |
+| <a id="property-settings"></a> `Settings`     | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:29](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-svelte/examples/demo/src/components/demo-components.ts#L29) |
+| <a id="property-stats"></a> `Stats`           | `LegacyComponentType` | -             | [packages/play-svelte/examples/demo/src/components/demo-components.ts:27](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-svelte/examples/demo/src/components/demo-components.ts#L27) |

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

@@ -37,7 +37,7 @@ Use this order to understand the implementation:
 5. `Shell.svelte` renders `<PlayUIProvider>` + `<PlayRenderer />` with the actor and registryResult and provides the shared UI shell (nav, debug panel with the **Show Inspector** button).
 6. Browser tests in `test/browser/` validate startup and auth route transitions.
 
-```ts
+```ts fragment
 // src/runtime.ts (shape)
 export const inspector = createDemoInspector();
 const createDemoPlayer = definePlayer({

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

@@ -37,7 +37,7 @@ Use this order to understand the implementation:
 5. `Shell.svelte` renders `<PlayUIProvider>` + `<PlayRenderer />` with the actor and registryResult and provides the shared UI shell (nav, debug panel with the **Show Inspector** button).
 6. Browser tests in `test/browser/` validate startup and auth route transitions.
 
-```ts
+```ts fragment
 // src/runtime.ts (shape)
 export const inspector = createDemoInspector();
 const createDemoPlayer = definePlayer({

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

@@ -36,7 +36,7 @@ Use this order to understand the implementation:
 5. `Shell` is the shared demo layout component imported from [`@xmachines/play-react-demo`](../play-react-demo/README.md) (defined in `packages/play-react/examples/demo/src/components/Shell.tsx`, a workspace-only package). It renders `PlayUIProvider` + `PlayRenderer`, header/nav, and the debug panel — including the **Show Inspector** button — from actor state.
 6. Tests in `test/` and `test/browser/` validate invariant and runtime behavior.
 
-```tsx
+```tsx fragment
 // src/App.tsx (shape)
 import { Shell } from "@xmachines/play-react-demo"; // shared demo shell (workspace-only package)
 import { createPlayer, inspector, routeMap, createRegistryResult } from "./runtime.js";
@@ -72,12 +72,13 @@ return (
 );
 ```
 
-```tsx
+```tsx fragment
 // src/runtime.ts (shape)
 export const inspector = createDemoInspector();
 export const createPlayer = definePlayer({
 	machine: authMachine,
 	options: { inspect: inspector.inspect },
+	actor: compose(PlayerActor, withRouting, withView),
 });
 export const routeMap = createRouteMap(authMachine);
 

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

@@ -37,27 +37,33 @@ Use this order to understand the implementation:
 5. `Shell` (from [`@xmachines/play-solid-demo`](../play-solid-demo/README.md)) renders actor-projected state (`PlayRenderer`), emits actor events via the `registryResult` actions, and shows the debug panel's **Show Inspector** button.
 6. `test/library-pattern.test.ts` plus `test/browser/` verify invariants and browser routing behavior.
 
-```tsx
+```tsx fragment
 // src/main.tsx (shape)
 render(() => <App />, document.getElementById("app")!);
 ```
 
-```ts
+```ts fragment
 // src/runtime.ts (shape)
 export const inspector = createDemoInspector();
 const createPlayer = definePlayer({
 	machine: authMachine,
 	options: { inspect: inspector.inspect },
+	actor: compose(PlayerActor, withRouting, withView),
 });
 export const actor = createPlayer();
 actor.start();
 
+export const registryResult = defineRegistry(authCatalog, {
+	components: demoComponents,
+	actions: createAuthActionHandlers(actor), // login/logout/route + task events + form actions
+});
+
 export const routeMap = createRouteMap(authMachine);
 const routeTree = extractMachineRoutes(authMachine);
 export const routes = getRoutableRoutes(routeTree);
 ```
 
-```tsx
+```tsx fragment
 // src/App.tsx (shape)
 import { Shell } from "@xmachines/play-solid-demo"; // shared demo shell (workspace-only package)
 import { actor, inspector, registryResult, routeMap, routes } from "./runtime.js";
@@ -80,11 +86,6 @@ return (
 );
 ```
 
-```ts
-// src/runtime.ts — actor events wired via the shared handler factory
-actions: createAuthActionHandlers(actor), // login/logout/route + task events + form actions
-```
-
 ## Key Files
 
 - `src/runtime.ts` - actor lifecycle, registry, route map, and routable routes setup

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

@@ -44,7 +44,7 @@ Use this order to understand the implementation:
 7. HMR cleanup calls `actor.stop()` via `import.meta.hot.dispose`.
 8. Browser tests in `test/browser/` validate startup and interaction behavior.
 
-```ts
+```ts fragment
 // src/main.ts
 const inspector = createDemoInspector();
 const createPlayer = definePlayer({
@@ -52,7 +52,7 @@ const createPlayer = definePlayer({
 	options: { inspect: inspector.inspect },
 	actor: compose(PlayerActor, withRouting, withView),
 });
-const actor = createPlayer() as AuthActor;
+const actor = createPlayer();
 actor.start();
 
 const app = createApp(App);

package/examples/@xmachines/play-vue-demo/functions/createAuthActionHandlers.md

@@ -6,7 +6,7 @@
 function createAuthActionHandlers(actor): object;
 ```
 
-Defined in: [packages/play-actor/examples/shared/src/actions.ts:48](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-actor/examples/shared/src/actions.ts#L48)
+Defined in: [packages/play-actor/examples/shared/src/actions.ts:48](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-actor/examples/shared/src/actions.ts#L48)
 
 Build the demo action handler map for one actor.
 
@@ -23,13 +23,13 @@ framework's `defineRegistry` accepts; spread the result into its `actions`.
 
 `object`
 
-| Name             | Type                                                    | Defined in                                                                                                                                                               |
-| ---------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `addTask()`      | (`params?`) => `Promise`\<`void`\>                      | [packages/play-actor/examples/shared/src/actions.ts:65](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-actor/examples/shared/src/actions.ts#L65) |
-| `completeTask()` | (`params`, `_setState`, `state`) => `Promise`\<`void`\> | [packages/play-actor/examples/shared/src/actions.ts:72](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-actor/examples/shared/src/actions.ts#L72) |
-| `login()`        | (`params?`) => `Promise`\<`void`\>                      | [packages/play-actor/examples/shared/src/actions.ts:50](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-actor/examples/shared/src/actions.ts#L50) |
-| `logout()`       | () => `Promise`\<`void`\>                               | [packages/play-actor/examples/shared/src/actions.ts:54](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-actor/examples/shared/src/actions.ts#L54) |
-| `removeTask()`   | (`params`, `_setState`, `state`) => `Promise`\<`void`\> | [packages/play-actor/examples/shared/src/actions.ts:81](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-actor/examples/shared/src/actions.ts#L81) |
-| `resetForm()`    | (`params`, `setState`) => `Promise`\<`void`\>           | [packages/play-actor/examples/shared/src/actions.ts:99](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-actor/examples/shared/src/actions.ts#L99) |
-| `route()`        | (`params?`) => `Promise`\<`void`\>                      | [packages/play-actor/examples/shared/src/actions.ts:55](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-actor/examples/shared/src/actions.ts#L55) |
-| `submitForm()`   | (`params?`) => `Promise`\<`void`\>                      | [packages/play-actor/examples/shared/src/actions.ts:92](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-actor/examples/shared/src/actions.ts#L92) |
+| Name             | Type                                                    | Defined in                                                                                                                                                                           |
+| ---------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `addTask()`      | (`params?`) => `Promise`\<`void`\>                      | [packages/play-actor/examples/shared/src/actions.ts:65](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-actor/examples/shared/src/actions.ts#L65) |
+| `completeTask()` | (`params`, `_setState`, `state`) => `Promise`\<`void`\> | [packages/play-actor/examples/shared/src/actions.ts:72](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-actor/examples/shared/src/actions.ts#L72) |
+| `login()`        | (`params?`) => `Promise`\<`void`\>                      | [packages/play-actor/examples/shared/src/actions.ts:50](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-actor/examples/shared/src/actions.ts#L50) |
+| `logout()`       | () => `Promise`\<`void`\>                               | [packages/play-actor/examples/shared/src/actions.ts:54](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-actor/examples/shared/src/actions.ts#L54) |
+| `removeTask()`   | (`params`, `_setState`, `state`) => `Promise`\<`void`\> | [packages/play-actor/examples/shared/src/actions.ts:81](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-actor/examples/shared/src/actions.ts#L81) |
+| `resetForm()`    | (`params`, `setState`) => `Promise`\<`void`\>           | [packages/play-actor/examples/shared/src/actions.ts:99](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-actor/examples/shared/src/actions.ts#L99) |
+| `route()`        | (`params?`) => `Promise`\<`void`\>                      | [packages/play-actor/examples/shared/src/actions.ts:55](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-actor/examples/shared/src/actions.ts#L55) |
+| `submitForm()`   | (`params?`) => `Promise`\<`void`\>                      | [packages/play-actor/examples/shared/src/actions.ts:92](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-actor/examples/shared/src/actions.ts#L92) |

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/v6.1.0/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/docs-v8.0.0-next.1/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/v6.1.0/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/docs-v8.0.0-next.1/packages/play-vue/examples/demo/src/env.d.ts#L5)

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

@@ -194,4 +194,4 @@ const authCatalog: Catalog<{
 }>;
 ```
 
-Defined in: [packages/play-vue/examples/demo/src/catalog.ts:5](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/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/docs-v8.0.0-next.1/packages/play-vue/examples/demo/src/catalog.ts#L5)

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

@@ -6,6 +6,6 @@
 const demoComponents: ComponentsMap<typeof authCatalog>;
 ```
 
-Defined in: [packages/play-vue/examples/demo/src/components/demo-components.ts:22](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-vue/examples/demo/src/components/demo-components.ts#L22)
+Defined in: [packages/play-vue/examples/demo/src/components/demo-components.ts:22](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-vue/examples/demo/src/components/demo-components.ts#L22)
 
 demoComponents — the full catalog component map, shared with the router demos.

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

@@ -38,14 +38,14 @@ Use this order to understand how the demo is wired:
 6. `PlayRouterProvider` waits for `router.isReady()` so direct URL loads are handled correctly.
 7. Browser tests in `test/browser/` validate startup and auth route transitions.
 
-```ts
+```ts fragment
 // src/main.ts (shape)
 const app = createApp(App);
 app.use(router);
 app.mount("#app");
 ```
 
-```ts
+```ts fragment
 // src/router.ts (shape)
 export const routes = [{ path: "/:pathMatch(.*)*", name: "xmachines-play", component: RouteHost }];
 ```
@@ -69,7 +69,7 @@ const renderShell = (currentActor, currentRouter) =>
 </template>
 ```
 
-```ts
+```ts fragment
 // src/runtime.ts (shape)
 export const actor = createPlayer();
 actor.start();

package/examples/README.md

@@ -10,7 +10,7 @@ Start with the fundamental machine + actor pattern:
 
 - **[Basic State Machine](basic-state-machine.md)** — `setup().createMachine()` + `definePlayer()` + atoms
 - **[Traffic Light](traffic-light.md)** — Multi-state machine with `meta.route` and `formatPlayRouteTransitions`
-- **[Form Validation](form-validation.md)** — Typed context mutations with `setup.assign`, guards, and `$bindState`
+- **[Form Validation](form-validation.md)** — Typed context patches, guards in transition functions, and `$bindState`
 
 ### Level 2: Routing Patterns
 

package/examples/basic-state-machine.md

@@ -1,6 +1,6 @@
 # Basic State Machine
 
-Learn how to define a simple toggle machine using the current XState v5 + XMachines `setup().createMachine()` + `definePlayer()` pattern.
+Learn how to define a simple toggle machine using the current XState v6 + XMachines `setup().createMachine()` + `definePlayer()` pattern.
 
 ## Use Case
 
@@ -9,15 +9,15 @@ This example demonstrates a toggle switch — the foundation for understanding s
 ## Complete Code
 
 ```typescript
-import { setup } from "xstate";
+import { setup, types } from "xstate";
 import { definePlayer } from "@xmachines/play-xstate";
 
-// 1. Declare types for context, events, and input via setup()
+// 1. Declare the schemas of the context, the events, and the input via setup()
 const toggleSetup = setup({
-	types: {
-		context: {} as { toggleCount: number },
-		events: {} as { type: "toggle" },
-		input: {} as { toggleCount?: number } | undefined,
+	schemas: {
+		context: types<{ toggleCount: number }>(),
+		events: { toggle: types<void>() },
+		input: types<{ toggleCount?: number } | undefined>(),
 	},
 });
 
@@ -31,22 +31,18 @@ const toggleMachine = toggleSetup.createMachine({
 	states: {
 		off: {
 			on: {
-				toggle: {
+				toggle: ({ context }) => ({
 					target: "on",
-					actions: toggleSetup.assign({
-						toggleCount: ({ context }) => context.toggleCount + 1,
-					}),
-				},
+					context: { toggleCount: context.toggleCount + 1 },
+				}),
 			},
 		},
 		on: {
 			on: {
-				toggle: {
+				toggle: ({ context }) => ({
 					target: "off",
-					actions: toggleSetup.assign({
-						toggleCount: ({ context }) => context.toggleCount + 1,
-					}),
-				},
+					context: { toggleCount: context.toggleCount + 1 },
+				}),
 			},
 		},
 	},
@@ -81,11 +77,11 @@ actor.stop();
 
 ## Code Explanation
 
-1. **`setup({ types })`** — Declares TypeScript types for `context`, `events`, and `input` before the machine is created. This is the XState v5 typed entry point. Never pass type parameters directly to `createMachine`.
+1. **`setup({ schemas })`** — Declares the schemas of `context`, `events`, and `input` before the machine is created. `types<T>()` gives a schema that carries the type alone, with no validation at run time. `events` is a map from the type of each event to its payload, and `types<void>()` declares an event without a payload. This is the XState v6 typed entry point. Never pass type parameters directly to `createMachine`.
 
-2. **`toggleSetup.createMachine(...)`** — Creates the state machine. Using the scoped `toggleSetup.createMachine` (instead of the bare `createMachine` from xstate) ensures that guards and actions are type-checked against the declared types.
+2. **`toggleSetup.createMachine(...)`** — Creates the state machine. The scoped `toggleSetup.createMachine` checks each transition function against the declared schemas.
 
-3. **`toggleSetup.assign(...)`** — Assigns context mutations using the typed setup's `assign` helper. This provides full inference from the declared context type — no manual type assertions needed.
+3. **A transition function** — Each transition is a function of `{ context, event }`. It returns the `target` and a `context` patch, which XState merges into the context at the top level. The context of the declared type gives the function full inference, with no type assertions.
 
 4. **`definePlayer({ machine })`** — Wraps the machine in a factory. Calling `createPlayer()` returns a `PlayerActor` — XMachines' actor type that extends XState's actor with atom reactivity and Play Architecture hooks.
 
@@ -99,14 +95,14 @@ actor.stop();
 
 ## Key Concepts
 
-- **`setup({ types })`**: The XState v5 typed entry point. Declares context, event, and input shapes before machine creation.
+- **`setup({ schemas })`**: The XState v6 typed entry point. Declares the context, the event map, and the input before machine creation.
 - **`definePlayer({ machine })`**: Creates a factory function that returns `PlayerActor` instances.
 - **`actor.state`**: An `Atom<Snapshot>` — an atom-based reactive handle on the machine snapshot.
 - **`actor.getSnapshot()`**: Synchronous snapshot access — use for one-time reads and TypeScript-typed context inspection.
-- **Typed `assign`**: Always call `setup.assign(...)` (not the bare `assign` from xstate) for context mutations.
+- **Context patches**: A transition function returns `{ context: { ... } }` to change the context. XState 6 has no `assign` action.
 
 ## Next Steps
 
 - **[Traffic Light Example](traffic-light.md)** — Multi-state machine with `meta.route` and `formatPlayRouteTransitions`
-- **[Form Validation Example](form-validation.md)** — Typed context mutations with `setup.assign` and guards
+- **[Form Validation Example](form-validation.md)** — Typed context patches and guards in transition functions
 - **[Routing Patterns](routing-patterns.md)** — Adding `meta.route` to states and using `play.route` events

package/examples/form-validation.md

@@ -1,22 +1,25 @@
 # Form Validation with Typed Context
 
-Managing login form state using `setup({ types })`, typed `assign`, guards, and `meta.view` with `$bindState`.
+Managing login form state using `setup({ schemas })`, transition functions with context patches and guards, and `meta.view` with `$bindState`.
 
 ## Use Case
 
 This example mirrors the `authMachine` login pattern: a form state with a local state store (`$bindState` two-way binding), a guard on the submit action, and a `meta.view` spec describing the component tree. It covers:
 
-- Typed context mutations with `setup.assign`
-- Guards as inline functions checking context
+- Typed context patches, returned by transition functions
+- Guards as conditions inside the transition functions
 - `meta.view` spec with `$bindState` for two-way form binding
 - Sending typed domain events from the view layer
 
 ## Complete Code
 
 ```typescript
-import { setup } from "xstate";
-import { definePlayer } from "@xmachines/play-xstate";
+import { setup, types } from "xstate";
+import { compose, definePlayer, PlayerActor } from "@xmachines/play-xstate";
 import { formatPlayRouteTransitions } from "@xmachines/play-xstate/routing";
+import { withView } from "@xmachines/play-xstate/view";
+import type { PlayRouteEvent, RouteMetadata } from "@xmachines/play-router";
+import type { ViewMeta } from "@xmachines/play-view";
 
 // Context shape
 interface LoginContext {
@@ -27,30 +30,25 @@ interface LoginContext {
 	query: Record<string, string>;
 }
 
-// Event union — lowercase dot-separated names
-type LoginEvent =
-	| {
-			type: "play.route";
-			to: string;
-			params?: Record<string, string>;
-			query?: Record<string, string>;
-	  }
-	| { type: "auth.login"; username: string }
-	| { type: "auth.logout" };
-
-// 1. Typed setup — always use setup() before createMachine()
+// 1. Typed setup — always use setup() before createMachine(). The events are a map from
+// the type of each event (lowercase dot-separated names) to its payload.
 const loginSetup = setup({
-	types: {
-		context: {} as LoginContext,
-		events: {} as LoginEvent,
-		input: {} as Partial<LoginContext> | undefined,
+	schemas: {
+		context: types<LoginContext>(),
+		events: {
+			"play.route": types<Omit<PlayRouteEvent, "type">>(),
+			"auth.login": types<{ username: string }>(),
+			"auth.logout": types<void>(),
+		},
+		input: types<Partial<LoginContext> | undefined>(),
+		meta: types<{ route?: RouteMetadata; view?: ViewMeta }>(),
 	},
 });
 
 // 2. Machine — wraps config in formatPlayRouteTransitions for play.route support
 const loginMachine = loginSetup.createMachine(
 	formatPlayRouteTransitions({
-		id: "login",
+		id: "loginFlow",
 		initial: "idle",
 		context: ({ input }) => ({
 			isAuthenticated: input?.isAuthenticated ?? false,
@@ -62,24 +60,23 @@ const loginMachine = loginSetup.createMachine(
 
 		// Root-level event handlers — accessible from any state
 		on: {
-			"auth.login": {
-				target: ".dashboard",
-				// Guard: allow login only when not already authenticated
-				guard: ({ context }) => !context.isAuthenticated,
-				actions: loginSetup.assign({
-					isAuthenticated: true,
-					errorMessage: null,
-					// Typed by the event union — TypeScript narrows event.username safely
-					username: ({ event }) => (event.type === "auth.login" ? event.username : null),
-				}),
+			"auth.login": ({ context, event }) => {
+				// Guard: allow login only when not already authenticated. A transition
+				// function that returns nothing leaves the event unhandled.
+				if (context.isAuthenticated) return;
+				return {
+					target: ".dashboard",
+					// The event map types `event.username` for this transition
+					context: {
+						isAuthenticated: true,
+						errorMessage: null,
+						username: event.username,
+					},
+				};
 			},
-			"auth.logout": {
-				target: ".idle",
-				guard: ({ context }) => context.isAuthenticated,
-				actions: loginSetup.assign({
-					isAuthenticated: false,
-					username: null,
-				}),
+			"auth.logout": ({ context }) => {
+				if (!context.isAuthenticated) return;
+				return { target: ".idle", context: { isAuthenticated: false, username: null } };
 			},
 		},
 
@@ -146,17 +143,18 @@ const loginMachine = loginSetup.createMachine(
 					},
 				},
 				// always-guard: redirect to login if not authenticated
-				always: {
-					guard: ({ context }) => !context.isAuthenticated,
-					target: "login",
-				},
+				always: ({ context }) =>
+					context.isAuthenticated ? undefined : { target: "login" },
 			},
 		},
 	}),
 );
 
-// 3. Factory and actor
-const createPlayer = definePlayer({ machine: loginMachine });
+// 3. Factory and actor — withView derives the meta.view spec that a renderer reads
+const createPlayer = definePlayer({
+	machine: loginMachine,
+	actor: compose(PlayerActor, withView),
+});
 const actor = createPlayer();
 actor.start();
 
@@ -169,8 +167,9 @@ actor.send({ type: "auth.login", username: "alice" });
 console.log(actor.getSnapshot().value); // "dashboard"
 console.log(actor.getSnapshot().context.username); // "alice"
 
-// 6. Guard prevents re-login while authenticated
-actor.send({ type: "auth.login", username: "bob" }); // guard fires, transition rejected
+// 6. Guard prevents re-login while authenticated. `can` asks without a send: a send of an
+// event that no transition takes makes the development build of XState 6 log a warning.
+console.log(actor.can({ type: "auth.login", username: "bob" })); // false — the guard refuses it
 console.log(actor.getSnapshot().context.username); // still "alice"
 
 // 7. Logout
@@ -190,9 +189,9 @@ actor.stop();
 | `{ $bindState: "/username" }` | Two-way   | Prop reads and writes the state store key `/username`       |
 | `{ $state: "/username" }`     | Read-only | Reads the current value from the state store at `/username` |
 
-The `state:` key in `meta.view` sets the initial values for the local store. When the user types in the form field, the renderer keeps the store in sync. On submit, action params read the final value via `$state`.
+The `state:` key in `meta.view` sets the initial values for the local store. When the user types in the form field, the component writes the value to the store. On submit, action params read the final value via `$state`.
 
-```typescript
+```typescript fragment
 // In the machine meta.view — the renderer handles the rest:
 view: {
   root: "root",
@@ -216,10 +215,10 @@ view: {
 
 ## Key Concepts
 
-- **`setup({ types })`**: Always declare context, events, and input types before `createMachine`.
-- **`setup.assign(...)`**: Use the scoped `assign` from your `setup` instance, not the bare one from `xstate`. This provides full type inference.
-- **Guards as inline functions**: `({ context }) => !context.isAuthenticated` — guards check state invariants ("can I BE in this state?"), not event details.
-- **`always` transitions**: Entry guards on states. Used for protected routes — if the guard fires, the machine redirects before the state is fully entered.
+- **`setup({ schemas })`**: Always declare the context, the event map, the input, and the `meta` of the states before `createMachine`.
+- **Context patches**: A transition function returns `{ context: { ... } }`. XState merges the patch into the context at the top level. XState 6 has no `assign` action.
+- **Guards inside transition functions**: `if (context.isAuthenticated) return;` — a transition function that returns nothing leaves the event unhandled. A guard checks a state invariant ("can I BE in this state?"), not event details.
+- **`always` transitions**: Entry guards on states. Used for protected routes — if the function returns a target, the machine redirects before the state is fully entered.
 - **Lowercase dot-separated event types**: `"auth.login"`, `"auth.logout"`, `"play.route"` — not `SCREAMING_SNAKE_CASE`.
 
 ## Connecting the Renderer
@@ -231,6 +230,10 @@ import { createRenderer, schema } from "@xmachines/play-dom";
 import { defineCatalog } from "@xmachines/json-render-core";
 import { z } from "zod";
 import type { ComponentFn } from "@xmachines/play-dom";
+import type { ViewActor } from "@xmachines/play-view";
+
+// The started actor of the complete code above
+declare const actor: ViewActor & { stop(): void };
 
 const catalog = defineCatalog(schema, {
 	components: {
@@ -257,10 +260,9 @@ const Login: ComponentFn<AppCatalog, "Login"> = ({ props, on, ctx }) => {
 	const section = document.createElement("section");
 	const input = document.createElement("input");
 	input.value = props.username ?? "";
-	// Keep the local state store in sync as the user types
-	input.addEventListener("input", () => {
-		ctx.store.update((s) => ({ ...s, username: input.value }));
-	});
+	// Write each keystroke to the store path that $bindState binds to the prop
+	const username = ctx.bound<string>("username");
+	input.addEventListener("input", () => username.set(input.value));
 	const button = document.createElement("button");
 	button.textContent = "Log In";
 	const submit = on("submit"); // bound to the spec's on.submit binding
@@ -283,9 +285,6 @@ const Dashboard: ComponentFn<AppCatalog, "Dashboard"> = ({ props, on }) => {
 // createRenderer builds the factory once — call mount() when the actor is ready
 const mount = createRenderer(catalog, { Home, Login, Dashboard });
 
-const actor = createPlayer();
-actor.start();
-
 const disconnect = mount(actor, document.getElementById("app")!);
 
 // Call teardown() when the app ends before the page does, for example when the component
@@ -302,7 +301,7 @@ function teardown(): void {
 
 - `actions` in `defineCatalog` must include every action name referenced in `meta.view` `on:` bindings. TypeScript enforces this via `CatalogHasActions`.
 - `on("submit").emit()` resolves `params` from the current state store at call time — the `$state: "/username"` in the spec is read at that moment, not at render time.
-- `ctx.store.update(fn)` is the standard write path for two-way binding. The spec's `$bindState` directive only wires the read direction (prop ← store); the write direction (store ← input) must be implemented in the component.
+- `ctx.bound("username").set(value)` writes to the store path that `$bindState` binds to the prop. The `$bindState` directive gives the prop its value from the store. The component writes the input back to the store.
 
 ## Next Steps