@xmachines/docs 6.1.0 → 7.0.0

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

@@ -6,7 +6,7 @@
 const demoComponents: object;
 ```
 
-Defined in: [packages/play-react/examples/demo/src/components/demo-components.ts:20](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-react/examples/demo/src/components/demo-components.ts#L20)
+Defined in: [packages/play-react/examples/demo/src/components/demo-components.ts:20](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v7.0.0/packages/play-react/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 | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Defined in                                                                                                                                                                                                 |
 | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| <a id="property-about"></a> `About`           | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"About"`\>      | -             | About — Public information page Uses ComponentFn<AuthCatalog, "About"> for catalog-typed props. NavBar handles the navigation — this component only renders content.                                                                                                                                                                                                                                                                                                        | [packages/play-react/examples/demo/src/components/demo-components.ts:22](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-react/examples/demo/src/components/demo-components.ts#L22) |
-| <a id="property-button"></a> `Button`         | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Button"`\>     | -             | Button — emits `press`; the spec's `on.press` binding decides what happens (a host action sending a machine event, or a built-in like setState).                                                                                                                                                                                                                                                                                                                            | [packages/play-react/examples/demo/src/components/demo-components.ts:34](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-react/examples/demo/src/components/demo-components.ts#L34) |
-| <a id="property-contact"></a> `Contact`       | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Contact"`\>    | -             | Contact — Public contact page Uses ComponentFn<AuthCatalog, "Contact"> for catalog-typed props. NavBar handles the navigation — this component only renders content.                                                                                                                                                                                                                                                                                                        | [packages/play-react/examples/demo/src/components/demo-components.ts:23](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-react/examples/demo/src/components/demo-components.ts#L23) |
-| <a id="property-dashboard"></a> `Dashboard`   | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Dashboard"`\>  | -             | Dashboard — Protected authenticated home Uses ComponentFn<AuthCatalog, "Dashboard"> for catalog-typed props. Emits "logout" to trigger the auth.logout event via PlayRenderer actions map. NavBar handles the navigation — this component only handles auth actions.                                                                                                                                                                                                        | [packages/play-react/examples/demo/src/components/demo-components.ts:25](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-react/examples/demo/src/components/demo-components.ts#L25) |
-| <a id="property-field"></a> `Field`           | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Field"`\>      | -             | Field — labelled input with two-way $bindState binding and declarative validation checks. Registration happens by rendering: useFieldValidation registers the bound state path with the ValidationProvider so the `validateForm` built-in sees it. The error DISPLAY deliberately reads `props.formErrors` — the result object validateForm wrote to state — rather than the local hook, so every renderer (DOM included) surfaces errors at the same moment: after submit. | [packages/play-react/examples/demo/src/components/demo-components.ts:33](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-react/examples/demo/src/components/demo-components.ts#L33) |
-| <a id="property-home"></a> `Home`             | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Home"`\>       | -             | Home - Public landing page component Uses ComponentFn<AuthCatalog, "Home"> for catalog-typed props. NavBar handles the navigation — this component only renders content.                                                                                                                                                                                                                                                                                                    | [packages/play-react/examples/demo/src/components/demo-components.ts:21](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-react/examples/demo/src/components/demo-components.ts#L21) |
-| <a id="property-login"></a> `Login`           | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Login"`\>      | -             | Login — Authentication form Uses ComponentFn<AuthCatalog, "Login"> for catalog-typed props. Username is bound via $bindState from the spec — useStateBinding provides reactive two-way binding to the @xstate/store atom backing the current view's state store. Emits "submit" on form submit — spec resolves the username state and calls login handler.                                                                                                                  | [packages/play-react/examples/demo/src/components/demo-components.ts:24](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-react/examples/demo/src/components/demo-components.ts#L24) |
-| <a id="property-navbar"></a> `NavBar`         | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"NavBar"`\>     | `NavBarView`  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | [packages/play-react/examples/demo/src/components/demo-components.ts:31](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-react/examples/demo/src/components/demo-components.ts#L31) |
-| <a id="property-navigation"></a> `Navigation` | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Navigation"`\> | -             | Navigation - Status display component Uses ComponentFn<AuthCatalog, "Navigation"> for catalog-typed props. This component displays navigation state info. NavBar handles the actual navigation.                                                                                                                                                                                                                                                                             | [packages/play-react/examples/demo/src/components/demo-components.ts:30](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-react/examples/demo/src/components/demo-components.ts#L30) |
-| <a id="property-overview"></a> `Overview`     | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Overview"`\>   | -             | Overview - Dashboard overview child route component Uses ComponentFn<AuthCatalog, "Overview"> for catalog-typed props. Relative route "overview" resolves to /dashboard/overview.                                                                                                                                                                                                                                                                                           | [packages/play-react/examples/demo/src/components/demo-components.ts:26](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-react/examples/demo/src/components/demo-components.ts#L26) |
-| <a id="property-panel"></a> `Panel`           | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Panel"`\>      | -             | Panel — generic container leaf for the 0.20 showcase. Renders an optional title and note, then its spec `children` — which is how repeat containers work: the element renders ONCE and its children render per item, so a Panel is both the list shell and the row.                                                                                                                                                                                                         | [packages/play-react/examples/demo/src/components/demo-components.ts:32](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-react/examples/demo/src/components/demo-components.ts#L32) |
-| <a id="property-profile"></a> `Profile`       | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Profile"`\>    | -             | Profile — Protected user profile page Uses ComponentFn<AuthCatalog, "Profile"> for catalog-typed props. NavBar handles the navigation — this component only renders content.                                                                                                                                                                                                                                                                                                | [packages/play-react/examples/demo/src/components/demo-components.ts:28](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-react/examples/demo/src/components/demo-components.ts#L28) |
-| <a id="property-settings"></a> `Settings`     | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Settings"`\>   | -             | Settings — Protected settings page Uses ComponentFn<AuthCatalog, "Settings"> for catalog-typed props. NavBar handles the navigation — this component only renders content.                                                                                                                                                                                                                                                                                                  | [packages/play-react/examples/demo/src/components/demo-components.ts:29](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-react/examples/demo/src/components/demo-components.ts#L29) |
-| <a id="property-stats"></a> `Stats`           | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Stats"`\>      | -             | Stats - Dashboard stats child route component Uses ComponentFn<AuthCatalog, "Stats"> for catalog-typed props. Relative route "stats" resolves to /dashboard/stats.                                                                                                                                                                                                                                                                                                          | [packages/play-react/examples/demo/src/components/demo-components.ts:27](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-react/examples/demo/src/components/demo-components.ts#L27) |
+| <a id="property-about"></a> `About`           | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"About"`\>      | -             | About — Public information page Uses ComponentFn<AuthCatalog, "About"> for catalog-typed props. NavBar handles the navigation — this component only renders content.                                                                                                                                                                                                                                                                                                        | [packages/play-react/examples/demo/src/components/demo-components.ts:22](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v7.0.0/packages/play-react/examples/demo/src/components/demo-components.ts#L22) |
+| <a id="property-button"></a> `Button`         | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Button"`\>     | -             | Button — emits `press`; the spec's `on.press` binding decides what happens (a host action sending a machine event, or a built-in like setState).                                                                                                                                                                                                                                                                                                                            | [packages/play-react/examples/demo/src/components/demo-components.ts:34](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v7.0.0/packages/play-react/examples/demo/src/components/demo-components.ts#L34) |
+| <a id="property-contact"></a> `Contact`       | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Contact"`\>    | -             | Contact — Public contact page Uses ComponentFn<AuthCatalog, "Contact"> for catalog-typed props. NavBar handles the navigation — this component only renders content.                                                                                                                                                                                                                                                                                                        | [packages/play-react/examples/demo/src/components/demo-components.ts:23](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v7.0.0/packages/play-react/examples/demo/src/components/demo-components.ts#L23) |
+| <a id="property-dashboard"></a> `Dashboard`   | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Dashboard"`\>  | -             | Dashboard — Protected authenticated home Uses ComponentFn<AuthCatalog, "Dashboard"> for catalog-typed props. Emits "logout" to trigger the auth.logout event via PlayRenderer actions map. NavBar handles the navigation — this component only handles auth actions.                                                                                                                                                                                                        | [packages/play-react/examples/demo/src/components/demo-components.ts:25](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v7.0.0/packages/play-react/examples/demo/src/components/demo-components.ts#L25) |
+| <a id="property-field"></a> `Field`           | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Field"`\>      | -             | Field — labelled input with two-way $bindState binding and declarative validation checks. Registration happens by rendering: useFieldValidation registers the bound state path with the ValidationProvider so the `validateForm` built-in sees it. The error DISPLAY deliberately reads `props.formErrors` — the result object validateForm wrote to state — rather than the local hook, so every renderer (DOM included) surfaces errors at the same moment: after submit. | [packages/play-react/examples/demo/src/components/demo-components.ts:33](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v7.0.0/packages/play-react/examples/demo/src/components/demo-components.ts#L33) |
+| <a id="property-home"></a> `Home`             | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Home"`\>       | -             | Home - Public landing page component Uses ComponentFn<AuthCatalog, "Home"> for catalog-typed props. NavBar handles the navigation — this component only renders content.                                                                                                                                                                                                                                                                                                    | [packages/play-react/examples/demo/src/components/demo-components.ts:21](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v7.0.0/packages/play-react/examples/demo/src/components/demo-components.ts#L21) |
+| <a id="property-login"></a> `Login`           | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Login"`\>      | -             | Login — Authentication form Uses ComponentFn<AuthCatalog, "Login"> for catalog-typed props. Username is bound via $bindState from the spec — useStateBinding provides reactive two-way binding to the @xstate/store atom backing the current view's state store. Emits "submit" on form submit — spec resolves the username state and calls login handler.                                                                                                                  | [packages/play-react/examples/demo/src/components/demo-components.ts:24](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v7.0.0/packages/play-react/examples/demo/src/components/demo-components.ts#L24) |
+| <a id="property-navbar"></a> `NavBar`         | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"NavBar"`\>     | `NavBarView`  | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | [packages/play-react/examples/demo/src/components/demo-components.ts:31](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v7.0.0/packages/play-react/examples/demo/src/components/demo-components.ts#L31) |
+| <a id="property-navigation"></a> `Navigation` | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Navigation"`\> | -             | Navigation - Status display component Uses ComponentFn<AuthCatalog, "Navigation"> for catalog-typed props. This component displays navigation state info. NavBar handles the actual navigation.                                                                                                                                                                                                                                                                             | [packages/play-react/examples/demo/src/components/demo-components.ts:30](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v7.0.0/packages/play-react/examples/demo/src/components/demo-components.ts#L30) |
+| <a id="property-overview"></a> `Overview`     | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Overview"`\>   | -             | Overview - Dashboard overview child route component Uses ComponentFn<AuthCatalog, "Overview"> for catalog-typed props. Relative route "overview" resolves to /dashboard/overview.                                                                                                                                                                                                                                                                                           | [packages/play-react/examples/demo/src/components/demo-components.ts:26](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v7.0.0/packages/play-react/examples/demo/src/components/demo-components.ts#L26) |
+| <a id="property-panel"></a> `Panel`           | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Panel"`\>      | -             | Panel — generic container leaf for the 0.20 showcase. Renders an optional title and note, then its spec `children` — which is how repeat containers work: the element renders ONCE and its children render per item, so a Panel is both the list shell and the row.                                                                                                                                                                                                         | [packages/play-react/examples/demo/src/components/demo-components.ts:32](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v7.0.0/packages/play-react/examples/demo/src/components/demo-components.ts#L32) |
+| <a id="property-profile"></a> `Profile`       | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Profile"`\>    | -             | Profile — Protected user profile page Uses ComponentFn<AuthCatalog, "Profile"> for catalog-typed props. NavBar handles the navigation — this component only renders content.                                                                                                                                                                                                                                                                                                | [packages/play-react/examples/demo/src/components/demo-components.ts:28](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v7.0.0/packages/play-react/examples/demo/src/components/demo-components.ts#L28) |
+| <a id="property-settings"></a> `Settings`     | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Settings"`\>   | -             | Settings — Protected settings page Uses ComponentFn<AuthCatalog, "Settings"> for catalog-typed props. NavBar handles the navigation — this component only renders content.                                                                                                                                                                                                                                                                                                  | [packages/play-react/examples/demo/src/components/demo-components.ts:29](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v7.0.0/packages/play-react/examples/demo/src/components/demo-components.ts#L29) |
+| <a id="property-stats"></a> `Stats`           | [`ComponentFn`](../../../../api/@xmachines/play-react/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `addTask`: \{ `description`: `"Add a task (sends task.add to the machine)"`; `params`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `completeTask`: \{ `description`: `"Mark a task done (sends task.complete to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `login`: \{ `description`: `"Login with username"`; `params`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `logout`: \{ `description`: `"Logout and return to home"`; \}; `removeTask`: \{ `description`: `"Remove a task (sends task.remove to the machine)"`; `params`: `ZodObject`\<\{ `id`: `ZodString`; \}, `$strip`\>; \}; `resetForm`: \{ `description`: `"Reset a demo form to its defaults (confirm-gated in the spec)"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; \}, `$strip`\>; \}; `route`: \{ `description`: `"Navigate to a route by path (e.g. '#home', '#login', '#dashboard')"`; `params`: `ZodObject`\<\{ `params`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodString`\>\>; `to`: `ZodString`; \}, `$strip`\>; \}; `submitForm`: \{ `description`: `"Submit a demo form; rejects when the form did not pass validation"`; `params`: `ZodObject`\<\{ `form`: `ZodString`; `valid`: `ZodOptional`\<`ZodNullable`\<`ZodBoolean`\>\>; \}, `$strip`\>; \}; \}; `components`: \{ `About`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$strip`\>; \}; `Contact`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Dashboard`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; `welcome`: `ZodBoolean`; \}, `$strip`\>; \}; `Field`: \{ `props`: `ZodObject`\<\{ `checks`: `ZodOptional`\<`ZodArray`\<`ZodCustom`\<..., ...\>\>\>; `formErrors`: `ZodOptional`\<`ZodRecord`\<`ZodString`, `ZodArray`\<...\>\>\>; `inputType`: `ZodOptional`\<`ZodEnum`\<\{ `email`: ...; `text`: ...; `textarea`: ...; \}\>\>; `label`: `ZodString`; `placeholder`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `value`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `Home`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Login`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; `username`: `ZodOptional`\<`ZodString`\>; \}, `$strip`\>; \}; `NavBar`: \{ `props`: `ZodObject`\<\{ `isAuthenticated`: `ZodBoolean`; `username`: `ZodNullable`\<`ZodString`\>; \}, `$strip`\>; \}; `Navigation`: \{ `props`: `ZodObject`\<\{ `currentPath`: `ZodString`; `isAuthenticated`: `ZodBoolean`; \}, `$strip`\>; \}; `Overview`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ..., ..., ...\]\>\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodUnion`\<readonly \[..., ...\]\>\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Profile`: \{ `props`: `ZodObject`\<\{ `username`: `ZodString`; \}, `$strip`\>; \}; `Settings`: \{ `props`: `ZodObject`\<\{ `section`: `ZodOptional`\<`ZodString`\>; `username`: `ZodString`; \}, `$strip`\>; \}; `Stats`: \{ `props`: `ZodObject`\<\{ `title`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Stats"`\>      | -             | Stats - Dashboard stats child route component Uses ComponentFn<AuthCatalog, "Stats"> for catalog-typed props. Relative route "stats" resolves to /dashboard/stats.                                                                                                                                                                                                                                                                                                          | [packages/play-react/examples/demo/src/components/demo-components.ts:27](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v7.0.0/packages/play-react/examples/demo/src/components/demo-components.ts#L27) |

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

@@ -39,17 +39,18 @@ Use this order to understand the implementation:
 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
+```tsx fragment
 // src/main.tsx (shape)
 createRoot(document.getElementById("root")!).render(<App />);
 ```
 
-```ts
+```ts 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);
 
@@ -61,7 +62,7 @@ export function createRegistryResult(actor: ReturnType<typeof createPlayer>) {
 }
 ```
 
-```tsx
+```tsx fragment
 // src/App.tsx (shape)
 import { Shell } from "@xmachines/play-react-demo"; // shared demo shell (workspace-only package)
 

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

@@ -43,12 +43,12 @@ Use this order to understand the implementation:
 6. `<DebugPanel actor={actor} inspector={inspector} />` shows live state, auth status, and current route, plus the **Show Inspector** button.
 7. Browser tests in `test/browser/` validate startup and interaction behavior.
 
-```tsx
+```tsx fragment
 // src/main.tsx (shape)
 render(() => <App />, document.getElementById("app")!);
 ```
 
-```tsx
+```tsx fragment
 // src/App.tsx (shape)
 const inspector = createDemoInspector();
 const createPlayer = definePlayer({
@@ -56,7 +56,7 @@ const createPlayer = definePlayer({
 	options: { inspect: inspector.inspect },
 	actor: compose(PlayerActor, withRouting, withView),
 });
-const actor = createPlayer() as AuthActor;
+const actor = createPlayer();
 actor.start();
 
 export function App() {

package/examples/@xmachines/play-solid-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/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-solid-demo/type-aliases/AuthCatalog.md

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

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

@@ -6,4 +6,4 @@
 const About: ComponentFn<AuthCatalog, "About">;
 ```
 
-Defined in: [packages/play-solid/examples/demo/src/components/About.tsx:9](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-solid/examples/demo/src/components/About.tsx#L9)
+Defined in: [packages/play-solid/examples/demo/src/components/About.tsx:9](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v7.0.0/packages/play-solid/examples/demo/src/components/About.tsx#L9)

package/examples/@xmachines/play-solid-demo/variables/Button.md

@@ -6,6 +6,6 @@
 const Button: ComponentFn<AuthCatalog, "Button">;
 ```
 
-Defined in: [packages/play-solid/examples/demo/src/components/Button.tsx:10](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-solid/examples/demo/src/components/Button.tsx#L10)
+Defined in: [packages/play-solid/examples/demo/src/components/Button.tsx:10](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v7.0.0/packages/play-solid/examples/demo/src/components/Button.tsx#L10)
 
 Button — 0.20 showcase action leaf: emits 'press'; the spec binding decides what happens.

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

@@ -6,4 +6,4 @@
 const Contact: ComponentFn<AuthCatalog, "Contact">;
 ```
 
-Defined in: [packages/play-solid/examples/demo/src/components/Contact.tsx:9](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-solid/examples/demo/src/components/Contact.tsx#L9)
+Defined in: [packages/play-solid/examples/demo/src/components/Contact.tsx:9](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v7.0.0/packages/play-solid/examples/demo/src/components/Contact.tsx#L9)

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

@@ -6,4 +6,4 @@
 const Dashboard: ComponentFn<AuthCatalog, "Dashboard">;
 ```
 
-Defined in: [packages/play-solid/examples/demo/src/components/Dashboard.tsx:9](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-solid/examples/demo/src/components/Dashboard.tsx#L9)
+Defined in: [packages/play-solid/examples/demo/src/components/Dashboard.tsx:9](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v7.0.0/packages/play-solid/examples/demo/src/components/Dashboard.tsx#L9)