npm - @xmachines/docs - Versions diffs - 6.1.0 → 7.0.0 - Mend

@xmachines/docs 6.1.0 → 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (595) hide show

package/examples/@xmachines/play-svelte-demo/functions/createAuthActionHandlers.md CHANGED Viewed

@@ -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/v7.0.0/packages/play-actor/examples/shared/src/actions.ts#L48)
 Build the demo action handler map for one actor.
@@ -25,11 +25,11 @@ framework's `defineRegistry` accepts; spread the result into its `actions`.
 | 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) |
+| `addTask()`      | (`params?`) => `Promise`\<`void`\>                      | [packages/play-actor/examples/shared/src/actions.ts:65](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v7.0.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/v7.0.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/v7.0.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/v7.0.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/v7.0.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/v7.0.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/v7.0.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/v7.0.0/packages/play-actor/examples/shared/src/actions.ts#L92) |

package/examples/@xmachines/play-svelte-demo/type-aliases/AuthCatalog.md CHANGED Viewed

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

package/examples/@xmachines/play-svelte-demo/variables/authCatalog.md CHANGED Viewed

@@ -194,4 +194,4 @@ const authCatalog: Catalog<{
 }>;
 ```
-Defined in: [packages/play-svelte/examples/demo/src/catalog.ts:5](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-svelte/examples/demo/src/catalog.ts#L5)
+Defined in: [packages/play-svelte/examples/demo/src/catalog.ts:5](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v7.0.0/packages/play-svelte/examples/demo/src/catalog.ts#L5)

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

@@ -6,7 +6,7 @@
 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/v7.0.0/packages/play-svelte/examples/demo/src/components/demo-components.ts#L20)
 demoComponents — the full catalog component map, shared with the router demos.
@@ -14,17 +14,17 @@ demoComponents — the full catalog component map, shared with the router demos.
 | 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) |
+| <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/v7.0.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/v7.0.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/v7.0.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/v7.0.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/v7.0.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/v7.0.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/v7.0.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/v7.0.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/v7.0.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/v7.0.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/v7.0.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/v7.0.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/v7.0.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/v7.0.0/packages/play-svelte/examples/demo/src/components/demo-components.ts#L27) |

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/v7.0.0/packages/play-actor/examples/shared/src/actions.ts#L48)
 Build the demo action handler map for one actor.
@@ -25,11 +25,11 @@ framework's `defineRegistry` accepts; spread the result into its `actions`.
 | 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) |
+| `addTask()`      | (`params?`) => `Promise`\<`void`\>                      | [packages/play-actor/examples/shared/src/actions.ts:65](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v7.0.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/v7.0.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/v7.0.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/v7.0.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/v7.0.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/v7.0.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/v7.0.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/v7.0.0/packages/play-actor/examples/shared/src/actions.ts#L92) |

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

@@ -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/v7.0.0/packages/play-vue/examples/demo/src/catalog.ts#L6)

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

@@ -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/v7.0.0/packages/play-vue/examples/demo/src/env.d.ts#L5)

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

@@ -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/v7.0.0/packages/play-vue/examples/demo/src/catalog.ts#L5)

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

@@ -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/v7.0.0/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 CHANGED Viewed

@@ -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/form-validation.md CHANGED Viewed

@@ -15,8 +15,9 @@ This example mirrors the `authMachine` login pattern: a form state with a local
 ```typescript
 import { setup } from "xstate";
-import { definePlayer } from "@xmachines/play-xstate";
+import { compose, definePlayer, PlayerActor } from "@xmachines/play-xstate";
 import { formatPlayRouteTransitions } from "@xmachines/play-xstate/routing";
+import { withView } from "@xmachines/play-xstate/view";
 // Context shape
 interface LoginContext {
@@ -155,8 +156,11 @@ const loginMachine = loginSetup.createMachine(
 	}),
 );
-// 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();
@@ -190,9 +194,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",
@@ -231,6 +235,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 +265,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 +290,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 +306,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