@xmachines/docs 5.0.0 → 5.0.2

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

@@ -3,170 +3,195 @@
 # Variable: authCatalog
 
 ```ts
-const authCatalog: 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<"string", unknown>>;
-							props: SchemaType<"propsOf", string>;
-							type: SchemaType<"ref", string>;
-							visible: SchemaType<"any", unknown>;
-						}
-					>
-				>;
-				root: SchemaType<"string", unknown>;
-			}
-		>;
-	},
-	{
-		actions: {
-			login: {
-				description: "Login with username";
-				params: ZodObject<
-					{
-						username: ZodString;
-					},
-					$strip
-				>;
-			};
-			logout: {
-				description: "Logout and return to home";
-			};
-			route: {
-				description: "Navigate to a route by path (e.g. '#home', '#login', '#dashboard')";
-				params: ZodObject<
-					{
-						params: ZodOptional<ZodRecord<ZodString, ZodString>>;
-						to: ZodString;
-					},
-					$strip
-				>;
-			};
-		};
-		components: {
-			About: {
-				props: ZodObject<
-					{
-						title: ZodString;
-					},
-					$strip
-				>;
-			};
-			Contact: {
-				props: ZodObject<
-					{
-						title: ZodString;
-					},
-					$strip
-				>;
-			};
-			Dashboard: {
-				props: ZodObject<
-					{
-						username: ZodString;
-						welcome: ZodBoolean;
-					},
-					$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
-				>;
-			};
-			Profile: {
-				props: ZodObject<
-					{
-						username: ZodString;
-					},
-					$strip
-				>;
-			};
-			Settings: {
-				props: ZodObject<
-					{
-						section: ZodOptional<ZodString>;
-						username: ZodString;
-					},
-					$strip
-				>;
-			};
-			Stats: {
-				props: ZodObject<
-					{
-						title: ZodString;
-					},
-					$strip
-				>;
-			};
-		};
-	}
->;
+const authCatalog: 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<"string", unknown>>;
+        props: SchemaType<"propsOf", string>;
+        repeat: {
+           inner?: unknown;
+           kind: "any";
+           optional: true;
+        };
+        slots: {
+           inner?: SchemaType<"array", SchemaType<..., ...>>;
+           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: "danger";
+              primary: "primary";
+              secondary: "secondary";
+           }>>;
+        }, $strip>;
+     };
+     Contact: {
+        props: ZodObject<{
+           title: ZodString;
+        }, $strip>;
+     };
+     Dashboard: {
+        props: ZodObject<{
+           username: ZodString;
+           welcome: ZodBoolean;
+        }, $strip>;
+     };
+     Field: {
+        props: ZodObject<{
+           checks: ZodOptional<ZodArray<ZodCustom<ValidationCheck, ValidationCheck>>>;
+           formErrors: ZodOptional<ZodRecord<ZodString, ZodArray<ZodString>>>;
+           inputType: ZodOptional<ZodEnum<{
+              email: "email";
+              text: "text";
+              textarea: "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 [ZodString, ZodNumber, ZodBoolean, ZodNull]>>;
+           testId: ZodOptional<ZodString>;
+           title: ZodOptional<ZodUnion<readonly [ZodString, ZodNumber]>>;
+           tone: ZodOptional<ZodEnum<{
+              danger: "danger";
+              default: "default";
+              muted: "muted";
+              success: "success";
+           }>>;
+        }, $strip>;
+     };
+     Profile: {
+        props: ZodObject<{
+           username: ZodString;
+        }, $strip>;
+     };
+     Settings: {
+        props: ZodObject<{
+           section: ZodOptional<ZodString>;
+           username: ZodString;
+        }, $strip>;
+     };
+     Stats: {
+        props: ZodObject<{
+           title: ZodString;
+        }, $strip>;
+     };
+  };
+}>;
 ```
 
-Defined in: [packages/play-react/examples/demo/src/catalog.ts:5](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v1.0.0-beta.56/packages/play-react/examples/demo/src/catalog.ts#L5)
+Defined in: [packages/play-react/examples/demo/src/catalog.ts:5](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.2/packages/play-react/examples/demo/src/catalog.ts#L5)

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

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