@xmachines/docs 4.0.0 → 5.0.1

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

@@ -0,0 +1,30 @@
+[Examples](../../../README.md) / [@xmachines/play-dom-demo](../README.md) / demoComponents
+
+# Variable: demoComponents
+
+```ts
+const demoComponents: object;
+```
+
+Defined in: [packages/play-dom/examples/demo/src/components/demo-components.ts:20](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-dom/examples/demo/src/components/demo-components.ts#L20)
+
+demoComponents — the full catalog component map, shared with the router demos.
+
+## Type Declaration
+
+| Name                                          | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Default value | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Defined in                                                                                                                                                                                             |
+| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| <a id="property-about"></a> `About`           | [`ComponentFn`](../../play-dom/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. Catalog-typed DOM component (ComponentFn<AuthCatalog, 'About'>). Renders static content from props.                                                                                                                                                                                                                                                                                                                                                        | [packages/play-dom/examples/demo/src/components/demo-components.ts:22](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-dom/examples/demo/src/components/demo-components.ts#L22) |
+| <a id="property-button"></a> `Button`         | [`ComponentFn`](../../play-dom/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-dom/examples/demo/src/components/demo-components.ts:34](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-dom/examples/demo/src/components/demo-components.ts#L34) |
+| <a id="property-contact"></a> `Contact`       | [`ComponentFn`](../../play-dom/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. Catalog-typed DOM component (ComponentFn<AuthCatalog, 'Contact'>). Renders static content from props.                                                                                                                                                                                                                                                                                                                                                        | [packages/play-dom/examples/demo/src/components/demo-components.ts:23](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-dom/examples/demo/src/components/demo-components.ts#L23) |
+| <a id="property-dashboard"></a> `Dashboard`   | [`ComponentFn`](../../play-dom/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. Catalog-typed DOM component (ComponentFn<AuthCatalog, 'Dashboard'>). Renders welcome message; logout button emits 'logout' action.                                                                                                                                                                                                                                                                                                                | [packages/play-dom/examples/demo/src/components/demo-components.ts:25](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-dom/examples/demo/src/components/demo-components.ts#L25) |
+| <a id="property-field"></a> `Field`           | [`ComponentFn`](../../play-dom/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. ctx.validation.registerField registers the bound state path with the DOM renderer's validation registry so the `validateForm` built-in sees it (the incremental renderer releases the registration when the element unmounts). Error DISPLAY deliberately reads `props.formErrors` — the result validateForm wrote to state — so every renderer surfaces errors at the same moment: after submit. | [packages/play-dom/examples/demo/src/components/demo-components.ts:33](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-dom/examples/demo/src/components/demo-components.ts#L33) |
+| <a id="property-home"></a> `Home`             | [`ComponentFn`](../../play-dom/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. Catalog-typed DOM component (ComponentFn<AuthCatalog, 'Home'>). Renders static welcome content from props.                                                                                                                                                                                                                                                                                                                                                      | [packages/play-dom/examples/demo/src/components/demo-components.ts:21](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-dom/examples/demo/src/components/demo-components.ts#L21) |
+| <a id="property-login"></a> `Login`           | [`ComponentFn`](../../play-dom/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. Catalog-typed DOM component (ComponentFn<AuthCatalog, 'Login'>). Binds username input to ctx.store via $bindState; emits 'submit' on form submit.                                                                                                                                                                                                                                                                                                              | [packages/play-dom/examples/demo/src/components/demo-components.ts:24](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-dom/examples/demo/src/components/demo-components.ts#L24) |
+| <a id="property-navbar"></a> `NavBar`         | [`ComponentFn`](../../play-dom/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-dom/examples/demo/src/components/demo-components.ts:31](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-dom/examples/demo/src/components/demo-components.ts#L31) |
+| <a id="property-navigation"></a> `Navigation` | [`ComponentFn`](../../play-dom/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 — Navigation status display. Catalog-typed DOM component (ComponentFn<AuthCatalog, 'Navigation'>). Renders current path and auth status from props.                                                                                                                                                                                                                                                                                                                              | [packages/play-dom/examples/demo/src/components/demo-components.ts:30](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-dom/examples/demo/src/components/demo-components.ts#L30) |
+| <a id="property-overview"></a> `Overview`     | [`ComponentFn`](../../play-dom/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. Catalog-typed DOM component (ComponentFn<AuthCatalog, 'Overview'>). Relative route resolves to /dashboard/overview. Logout and goToStats buttons emit actions.                                                                                                                                                                                                                                                                                   | [packages/play-dom/examples/demo/src/components/demo-components.ts:26](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-dom/examples/demo/src/components/demo-components.ts#L26) |
+| <a id="property-panel"></a> `Panel`           | [`ComponentFn`](../../play-dom/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 appends its rendered spec `children` — repeat containers render ONCE and their children render per item, so a Panel is both the list shell and the row.                                                                                                                                                                                                                                      | [packages/play-dom/examples/demo/src/components/demo-components.ts:32](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-dom/examples/demo/src/components/demo-components.ts#L32) |
+| <a id="property-profile"></a> `Profile`       | [`ComponentFn`](../../play-dom/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. Catalog-typed DOM component (ComponentFn<AuthCatalog, 'Profile'>). Renders username from route params filled into props.                                                                                                                                                                                                                                                                                                                             | [packages/play-dom/examples/demo/src/components/demo-components.ts:28](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-dom/examples/demo/src/components/demo-components.ts#L28) |
+| <a id="property-settings"></a> `Settings`     | [`ComponentFn`](../../play-dom/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. Catalog-typed DOM component (ComponentFn<AuthCatalog, 'Settings'>). Renders active section and username from props.                                                                                                                                                                                                                                                                                                                                     | [packages/play-dom/examples/demo/src/components/demo-components.ts:29](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-dom/examples/demo/src/components/demo-components.ts#L29) |
+| <a id="property-stats"></a> `Stats`           | [`ComponentFn`](../../play-dom/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. Catalog-typed DOM component (ComponentFn<AuthCatalog, 'Stats'>). Relative route resolves to /dashboard/stats. goToOverview button emits action.                                                                                                                                                                                                                                                                                                        | [packages/play-dom/examples/demo/src/components/demo-components.ts:27](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-dom/examples/demo/src/components/demo-components.ts#L27) |

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

@@ -1,18 +1,19 @@
 [Examples](../../README.md) / @xmachines/play-dom-router-demo
 
-<!-- generated-by: gsd-doc-writer -->
-
 # @xmachines/play-dom-router-demo
 
 Pure TypeScript integration demo for [`@xmachines/play-dom-router`](../../../api/@xmachines/play-dom-router/README.md) — actor-authoritative routing with the Browser History API and no framework.
 
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
 ## What This Demonstrates
 
 - Shared auth machine reused without framework-specific business logic
 - `connectRouter` + `createBrowserHistory` wiring actor ↔ browser History API
 - Shell-driven DOM rendering via `connectRenderer` with actor-authoritative navigation
-- Manual TC39 Signal watcher lifecycle — the mechanism that framework adapters abstract
+- Manual atom watcher lifecycle — the mechanism that framework adapters abstract
 - Non-browser invariant tests plus browser E2E coverage
+- Stately inspector attached at creation via `options.inspect` — the debug panel's **Show Inspector** button opens the live machine in its own window
 
 ## Running the Demo
 
@@ -30,9 +31,9 @@ Then open `http://localhost:3005`.
 Use this order to understand the implementation:
 
 1. `src/main.ts` looks up the host element (throws if absent), calls `initApp(app)` from `src/runtime.ts`, and registers unload cleanup.
-2. `src/runtime.ts` creates the actor from the shared machine via `definePlayer`, starts it, initializes router sync via `initRouter(actor)`, mounts the shared DOM shell via `initShell(actor, host)`, and returns one cleanup function.
+2. `src/runtime.ts` creates the page's inspector with `createDemoInspector()`, creates the actor from the shared machine via `definePlayer` with `options.inspect` wired to it, starts it, initializes router sync via `initRouter(actor)`, mounts the shared DOM shell via `initShell(actor, host, inspector)`, and returns one cleanup function.
 3. `initRouter(actor)` from `src/router.ts` extracts route metadata, creates a browser history wrapper, instantiates a router, and calls `connectRouter` to wire bidirectional actor ↔ URL sync.
-4. `initShell(actor, host)` is imported from `@xmachines/play-dom-demo`, so the router demo reuses the shared DOM shell instead of duplicating the scaffold and renderer wiring.
+4. `initShell(actor, host, inspector)` is imported from `@xmachines/play-dom-demo`, so the router demo reuses the shared DOM shell — inspector button included — instead of duplicating the scaffold and renderer wiring.
 5. Navigation buttons and links dispatch `play.route`, `auth.login`, and `auth.logout` events directly to the actor — no URL mutations from the shell.
 6. Browser tests in `test/browser/` validate startup rendering and the full auth route flow.
 
@@ -50,7 +51,7 @@ window.addEventListener("beforeunload", () => {
 
 ```ts
 // src/router.ts (shape)
-export function initRouter(actor) {
+export function initRouter(actor: RoutableActor) {
 	const routeTree = extractMachineRoutes(authMachine);
 	const routeMap = createRouteMap(authMachine);
 	const history = createBrowserHistory({ window });
@@ -67,12 +68,16 @@ export function initRouter(actor) {
 ```ts
 // src/runtime.ts (shape)
 export function initApp(host: HTMLElement): () => void {
-	const createPlayer = definePlayer({ machine: authMachine });
+	const inspector = createDemoInspector();
+	const createPlayer = definePlayer({
+		machine: authMachine,
+		options: { inspect: inspector.inspect },
+	});
 	const actor = createPlayer();
 	actor.start();
 
 	const cleanupRouter = initRouter(actor);
-	const cleanupShell = initShell(actor, host);
+	const cleanupShell = initShell(actor, host, inspector);
 
 	return () => {
 		cleanupShell();
@@ -87,7 +92,7 @@ export function initApp(host: HTMLElement): () => void {
 - `src/main.ts` - host lookup, app bootstrap, and unload cleanup
 - `src/runtime.ts` - actor startup, router initialization, and shared shell wiring
 - `src/router.ts` - `createBrowserHistory`, `createRouter`, and `connectRouter` wiring
-- `@xmachines/play-dom-demo` - shared DOM shell, NavBar, DebugPanel, and renderer wiring reused by this router demo
+- `@xmachines/play-dom-demo` - shared DOM shell, NavBar, DebugPanel (including the **Show Inspector** button), and renderer wiring reused by this router demo
 - `test/library-pattern.test.ts` - architecture boundary and invariant assertions
 - `test/browser/shared-demo.browser.test.ts` - startup rendering and full auth route browser flow
 
@@ -97,19 +102,17 @@ The demo utilizes XMachines architectural invariants at the lowest level:
 
 1. **Actor Authority:** Intercepting browser `popstate` events or navigation button clicks dispatches a `play.route` event to the actor. The actor processes the request against the current state, ensuring any auth logic is correctly applied.
 2. **Passive Infrastructure:** The router simply updates `window.history` and the DOM solely renders HTML based on what `actor.currentView` yields. Neither holds business state.
-3. **Signal-Only Reactivity:** The integration registers `watchSignal` observers that trigger DOM reconciliation, illustrating the underlying mechanism that framework adapters abstract.
+3. **Atom-Only Reactivity:** The integration registers `watchAtom` observers that trigger DOM reconciliation, illustrating the underlying mechanism that framework adapters abstract.
 
 ## Watcher Lifecycle and Cleanup Contract
 
 Even in the vanilla demo, watcher handling follows the canonical lifecycle:
 
-1. `notify`
-2. `queueMicrotask`
-3. `getPending()`
-4. Read actor signals and project DOM state
-5. Re-arm with `watch()`/`watch(...signals)`
+1. The atom notifies the subscription, synchronously, from the `set` that changed it
+2. `watchAtom` queues one microtask, and it drops each duplicate notification of that batch
+3. The microtask reads the actor atoms and projects DOM state
 
-Watcher notifications are one-shot, so re-arm is mandatory. Router/shell teardown must explicitly call cleanup (`disconnect`/`unwatch`) and not rely on GC-only behavior. In vanilla TypeScript, this means retaining cleanup functions and calling them on `beforeunload` or during hot-module replacement.
+One subscription lives for the whole watch, and no caller arms a watcher again. Router/shell teardown must explicitly call cleanup (`disconnect`/`unwatch`) and not rely on GC-only behavior. In vanilla TypeScript, this means retaining cleanup functions and calling them on `beforeunload` or during hot-module replacement.
 
 ## Adapter Boundaries
 
@@ -127,19 +130,9 @@ These commands are defined in `package.json`:
 | `pnpm --filter @xmachines/play-dom-router-demo run test`         | Run Vitest test suite                          |
 | `pnpm --filter @xmachines/play-dom-router-demo run test:browser` | Run browser-focused Vitest suite               |
 
-## Verification
-
-Use these checks to validate README claims against the current demo implementation:
-
-```bash
-pnpm --filter @xmachines/play-dom-router-demo run test
-pnpm --filter @xmachines/play-dom-router-demo run test:browser
-```
-
-Expected result: tests pass, including startup rendering and the full browser auth flow in `test/browser/`.
-
 ## Learn More
 
 - [Play DOM Router](../../../api/@xmachines/play-dom-router/README.md)
 - [Play DOM](../play-dom-demo/README.md)
 - [Play Router](../../../api/@xmachines/play-router/README.md)
+- [Inspecting a Running Actor](../../../guides/inspector.md)

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

@@ -1,18 +1,24 @@
 [Examples](../../README.md) / @xmachines/play-react-demo
 
-<!-- generated-by: gsd-doc-writer -->
-
 # @xmachines/play-react-demo
 
 React renderer demo for [`@xmachines/play-react`](../../../api/@xmachines/play-react/README.md) — actor + `PlayRenderer` without a router.
 
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
 ## What This Demonstrates
 
 - Shared auth machine reused without framework-specific business logic
 - `PlayRenderer` rendering actor-projected views with a typed `defineRegistry` catalog
 - Auth machine states drive view switching via `auth.login` / `auth.logout` events only — no `play.route` routing
-- Canonical TC39 Signals lifecycle surfaced through React's rendering model
+- Canonical atoms lifecycle surfaced through React's rendering model
 - Non-browser invariant tests plus browser renderer coverage
+- Stately inspector attached at creation via `options.inspect` — the debug panel's **Show Inspector** button opens the live machine in its own window
+- json-render 0.20 showcase pages driven purely by spec:
+    - **Overview** — two data planes side by side: `/context/tasks` (machine context via the read-only `/context` projection; `repeat` + `key`, `$item`-filtered lists, per-row actions sending inspectable machine events) next to ephemeral store state (`pushState`/`removeState`/`setState` built-ins driving filter chips and toggles that survive context updates)
+    - **Stats** — nested repeats (`repeat.statePath: { $item: "members" }`) over `/context/teams`
+    - **Settings** — declarative field validation, the `validateForm` built-in, a confirm-gated `resetForm` host action, and `onSuccess`/`onError` chains
+    - **Contact** — a chained named action: submit validates, then routes home on success or writes `"$error.message"` to state on failure
 
 ## Running the Demo
 
@@ -30,11 +36,11 @@ Then open `http://localhost:3001`.
 Use this order to understand the implementation:
 
 1. `src/main.tsx` mounts `<App />`.
-2. `src/App.tsx` creates the actor at module scope via `definePlayer({ machine: authMachine })()` — created once when the module is first evaluated.
+2. `src/App.tsx` creates the page's inspector with `createDemoInspector()` and the actor at module scope via `definePlayer({ machine: authMachine, options: { inspect: inspector.inspect }, actor: compose(PlayerActor, withRouting, withView) })()` — both created once when the module is first evaluated.
 3. `defineRegistry(authCatalog, { components, actions })` builds the typed `registryResult` — real async action handlers dispatching to `actor.send()`.
 4. `<PlayUIProvider actor={actor} registryResult={registryResult}><PlayRenderer /></PlayUIProvider>` observes `actor.currentView` and renders the active spec.
-5. A `NavBar` component observes `actor` signals directly for nav visibility.
-6. `<DebugPanel actor={actor} />` shows live state, auth status, and current route.
+5. A `NavBar` component observes `actor` atoms directly for nav visibility.
+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
@@ -46,39 +52,17 @@ createRoot(document.getElementById("root")!).render(<App />);
 // src/App.tsx (shape)
 // Both actor and registryResult are module-scope singletons — created once,
 // never recreated, no useMemo needed inside the component.
-const actor: AuthActor = definePlayer({ machine: authMachine })();
+const inspector = createDemoInspector();
+const actor: AuthActor = definePlayer({
+	machine: authMachine,
+	options: { inspect: inspector.inspect },
+	actor: compose(PlayerActor, withRouting, withView),
+})();
 actor.start();
 
 const registryResult = defineRegistry(authCatalog, {
-	components: {
-		Home,
-		About,
-		Contact,
-		Login,
-		Dashboard,
-		Overview,
-		Stats,
-		Profile,
-		Settings,
-		Navigation,
-		NavBar: NavBarView,
-	},
-	actions: {
-		login: async (args) =>
-			actor.send({
-				type: "auth.login",
-				username: assertNonNullable(args, "args").username,
-			}),
-		logout: async () => actor.send({ type: "auth.logout" }),
-		route: async (args) => {
-			const { to, params } = assertNonNullable(args, "args");
-			actor.send({
-				type: "play.route",
-				to,
-				...(params != null && { params }),
-			});
-		},
-	},
+	components: demoComponents, // one shared map — Home…NavBar plus the 0.20 Panel/Field/Button leaves
+	actions: createAuthActionHandlers(actor), // login/logout/route + task events + form actions
 });
 
 export function App() {
@@ -93,7 +77,7 @@ export function App() {
 					<PlayRenderer />
 				</PlayUIProvider>
 			</main>
-			<DebugPanel actor={actor} />
+			<DebugPanel actor={actor} inspector={inspector} />
 		</div>
 	);
 }
@@ -113,20 +97,18 @@ export function App() {
 The demo utilizes XMachines architectural invariants:
 
 1. **Actor Authority:** View components dispatch `auth.login` and `auth.logout` events to the actor. The actor evaluates guards and transitions — React never decides which view to render.
-2. **Passive Infrastructure:** `PlayRenderer` observes `actor.currentView` signals only. It holds no business state and makes no routing decisions.
-3. **Signal-Only Reactivity:** The bridge leverages React's rendering model to react precisely when actor signals update, without polluting the component tree with `useState` or `useEffect` for business logic.
+2. **Passive Infrastructure:** `PlayRenderer` observes `actor.currentView` atoms only. It holds no business state and makes no routing decisions.
+3. **Atom-Only Reactivity:** The bridge leverages React's rendering model to react precisely when actor atoms update, without polluting the component tree with `useState` or `useEffect` for business logic.
 
 ## Watcher Lifecycle and Cleanup Contract
 
 This demo follows the canonical watcher lifecycle used across all `@xmachines` framework adapters:
 
-1. `notify`
-2. `queueMicrotask`
-3. `getPending()`
-4. Read actor signals and project React render state
-5. Re-arm with `watch()`/`watch(...signals)`
+1. The atom notifies the subscription, synchronously, from the `set` that changed it
+2. `watchAtom` queues one microtask, and it drops each duplicate notification of that batch
+3. The microtask reads the actor atoms and projects React render state
 
-Watcher notifications are one-shot. Cleanup is explicit: `actor.stop()` is called on component unmount via `useEffect`, and `PlayRenderer` handles internal watcher teardown natively.
+One subscription lives for the whole watch, and no caller arms a watcher again. Cleanup is explicit: `actor.stop()` is called on component unmount via `useEffect`, and `PlayRenderer` handles internal watcher teardown natively.
 
 ## Adapter Boundaries
 
@@ -144,21 +126,11 @@ These commands are defined in `package.json`:
 | `pnpm --filter @xmachines/play-react-demo run test`         | Run Vitest test suite                          |
 | `pnpm --filter @xmachines/play-react-demo run test:browser` | Run browser-focused Vitest suite               |
 
-## Verification
-
-Use these checks to validate README claims against the current demo implementation:
-
-```bash
-pnpm --filter @xmachines/play-react-demo run test
-pnpm --filter @xmachines/play-react-demo run test:browser
-```
-
-Expected result: library-pattern invariant tests pass and the browser renderer suite completes.
-
 ## Learn More
 
 - [play-react](../../../api/@xmachines/play-react/README.md)
 - [React Router demo](../play-react-router-demo/README.md)
+- [Inspecting a Running Actor](../../../guides/inspector.md)
 
 ## Type Aliases
 
@@ -168,15 +140,19 @@ Expected result: library-pattern invariant tests pass and the browser renderer s
 
 - [About](variables/About.md)
 - [authCatalog](variables/authCatalog.md)
+- [Button](variables/Button.md)
 - [Contact](variables/Contact.md)
 - [Dashboard](variables/Dashboard.md)
 - [DebugPanel](variables/DebugPanel.md)
+- [demoComponents](variables/demoComponents.md)
+- [Field](variables/Field.md)
 - [Home](variables/Home.md)
 - [Login](variables/Login.md)
 - [NavBar](variables/NavBar.md)
 - [NavBarView](variables/NavBarView.md)
 - [Navigation](variables/Navigation.md)
 - [Overview](variables/Overview.md)
+- [Panel](variables/Panel.md)
 - [Profile](variables/Profile.md)
 - [Settings](variables/Settings.md)
 - [Shell](variables/Shell.md)
@@ -184,4 +160,4 @@ Expected result: library-pattern invariant tests pass and the browser renderer s
 
 ## Functions
 
-- [App](functions/App.md)
+- [createAuthActionHandlers](functions/createAuthActionHandlers.md)

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

@@ -0,0 +1,35 @@
+[Examples](../../../README.md) / [@xmachines/play-react-demo](../README.md) / createAuthActionHandlers
+
+# Function: createAuthActionHandlers()
+
+```ts
+function createAuthActionHandlers(actor): object;
+```
+
+Defined in: [packages/play-actor/examples/shared/src/actions.ts:48](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-actor/examples/shared/src/actions.ts#L48)
+
+Build the demo action handler map for one actor.
+
+Returned functions use the `(params, setState) => Promise<void>` shape every
+framework's `defineRegistry` accepts; spread the result into its `actions`.
+
+## Parameters
+
+| Parameter | Type        |
+| --------- | ----------- |
+| `actor`   | `AuthActor` |
+
+## Returns
+
+`object`
+
+| Name             | Type                                                    | Defined in                                                                                                                                                               |
+| ---------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `addTask()`      | (`params?`) => `Promise`\<`void`\>                      | [packages/play-actor/examples/shared/src/actions.ts:65](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-actor/examples/shared/src/actions.ts#L65) |
+| `completeTask()` | (`params`, `_setState`, `state`) => `Promise`\<`void`\> | [packages/play-actor/examples/shared/src/actions.ts:72](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-actor/examples/shared/src/actions.ts#L72) |
+| `login()`        | (`params?`) => `Promise`\<`void`\>                      | [packages/play-actor/examples/shared/src/actions.ts:50](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-actor/examples/shared/src/actions.ts#L50) |
+| `logout()`       | () => `Promise`\<`void`\>                               | [packages/play-actor/examples/shared/src/actions.ts:54](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-actor/examples/shared/src/actions.ts#L54) |
+| `removeTask()`   | (`params`, `_setState`, `state`) => `Promise`\<`void`\> | [packages/play-actor/examples/shared/src/actions.ts:81](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-actor/examples/shared/src/actions.ts#L81) |
+| `resetForm()`    | (`params`, `setState`) => `Promise`\<`void`\>           | [packages/play-actor/examples/shared/src/actions.ts:99](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-actor/examples/shared/src/actions.ts#L99) |
+| `route()`        | (`params?`) => `Promise`\<`void`\>                      | [packages/play-actor/examples/shared/src/actions.ts:55](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-actor/examples/shared/src/actions.ts#L55) |
+| `submitForm()`   | (`params?`) => `Promise`\<`void`\>                      | [packages/play-actor/examples/shared/src/actions.ts:92](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-actor/examples/shared/src/actions.ts#L92) |

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

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

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

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

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

@@ -0,0 +1,12 @@
+[Examples](../../../README.md) / [@xmachines/play-react-demo](../README.md) / Button
+
+# Variable: Button
+
+```ts
+const Button: ComponentFn<AuthCatalog, "Button">;
+```
+
+Defined in: [packages/play-react/examples/demo/src/components/Button.tsx:8](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.1/packages/play-react/examples/demo/src/components/Button.tsx#L8)
+
+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).

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

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