@xmachines/docs 6.1.0 → 7.1.0

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

@@ -0,0 +1,9 @@
+[Examples](../../../README.md) / [@xmachines/play-dom-gallery-demo](../README.md) / AuthCatalog
+
+# Type Alias: AuthCatalog
+
+```ts
+type AuthCatalog = typeof authCatalog;
+```
+
+Defined in: [packages/play-dom/examples/gallery/src/catalogs.ts:47](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/catalogs.ts#L47)

package/examples/@xmachines/play-dom-gallery-demo/type-aliases/DonutCatalog.md

@@ -0,0 +1,9 @@
+[Examples](../../../README.md) / [@xmachines/play-dom-gallery-demo](../README.md) / DonutCatalog
+
+# Type Alias: DonutCatalog
+
+```ts
+type DonutCatalog = typeof donutCatalog;
+```
+
+Defined in: [packages/play-dom/examples/gallery/src/catalogs.ts:41](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/catalogs.ts#L41)

package/examples/@xmachines/play-dom-gallery-demo/type-aliases/FetchCatalog.md

@@ -0,0 +1,9 @@
+[Examples](../../../README.md) / [@xmachines/play-dom-gallery-demo](../README.md) / FetchCatalog
+
+# Type Alias: FetchCatalog
+
+```ts
+type FetchCatalog = typeof fetchCatalog;
+```
+
+Defined in: [packages/play-dom/examples/gallery/src/catalogs.ts:23](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/catalogs.ts#L23)

package/examples/@xmachines/play-dom-gallery-demo/type-aliases/FlightCatalog.md

@@ -0,0 +1,9 @@
+[Examples](../../../README.md) / [@xmachines/play-dom-gallery-demo](../README.md) / FlightCatalog
+
+# Type Alias: FlightCatalog
+
+```ts
+type FlightCatalog = typeof flightCatalog;
+```
+
+Defined in: [packages/play-dom/examples/gallery/src/catalogs.ts:44](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/catalogs.ts#L44)

package/examples/@xmachines/play-dom-gallery-demo/type-aliases/GalleryActor.md

@@ -0,0 +1,20 @@
+[Examples](../../../README.md) / [@xmachines/play-dom-gallery-demo](../README.md) / GalleryActor
+
+# Type Alias: GalleryActor
+
+```ts
+type GalleryActor =
+	| FetchActor
+	| StopwatchActor
+	| TicTacToeActor
+	| TemperatureActor
+	| TodoMvcActor
+	| TriviaActor
+	| DonutActor
+	| FlightActor
+	| AuthActor;
+```
+
+Defined in: [packages/play-dom/examples/gallery/src/machines.ts:57](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/machines.ts#L57)
+
+Any of the nine machine actors — what the gallery Shell and DebugPanel accept.

package/examples/@xmachines/play-dom-gallery-demo/type-aliases/GallerySlug.md

@@ -0,0 +1,18 @@
+[Examples](../../../README.md) / [@xmachines/play-dom-gallery-demo](../README.md) / GallerySlug
+
+# Type Alias: GallerySlug
+
+```ts
+type GallerySlug =
+	| "fetch"
+	| "stopwatch"
+	| "tictactoe"
+	| "temperature"
+	| "todomvc"
+	| "trivia"
+	| "donut"
+	| "flight"
+	| "auth";
+```
+
+Defined in: [packages/play-dom/examples/gallery/src/machines.ts:68](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/machines.ts#L68)

package/examples/@xmachines/play-dom-gallery-demo/type-aliases/KitCatalog.md

@@ -0,0 +1,16 @@
+[Examples](../../../README.md) / [@xmachines/play-dom-gallery-demo](../README.md) / KitCatalog
+
+# Type Alias: KitCatalog
+
+```ts
+type KitCatalog = FetchCatalog;
+```
+
+Defined in: [packages/play-dom/examples/gallery/src/catalogs.ts:57](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/catalogs.ts#L57)
+
+The catalog the shared component KIT is typed against.
+
+ComponentFn only constrains a component through the catalog's component
+schemas, and those are identical across all nine catalogs — so the kit is
+typed once against this representative and registers cleanly with every
+machine's defineRegistry call.

package/examples/@xmachines/play-dom-gallery-demo/type-aliases/StopwatchCatalog.md

@@ -0,0 +1,9 @@
+[Examples](../../../README.md) / [@xmachines/play-dom-gallery-demo](../README.md) / StopwatchCatalog
+
+# Type Alias: StopwatchCatalog
+
+```ts
+type StopwatchCatalog = typeof stopwatchCatalog;
+```
+
+Defined in: [packages/play-dom/examples/gallery/src/catalogs.ts:26](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/catalogs.ts#L26)

package/examples/@xmachines/play-dom-gallery-demo/type-aliases/TemperatureCatalog.md

@@ -0,0 +1,9 @@
+[Examples](../../../README.md) / [@xmachines/play-dom-gallery-demo](../README.md) / TemperatureCatalog
+
+# Type Alias: TemperatureCatalog
+
+```ts
+type TemperatureCatalog = typeof temperatureCatalog;
+```
+
+Defined in: [packages/play-dom/examples/gallery/src/catalogs.ts:32](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/catalogs.ts#L32)

package/examples/@xmachines/play-dom-gallery-demo/type-aliases/TicTacToeCatalog.md

@@ -0,0 +1,9 @@
+[Examples](../../../README.md) / [@xmachines/play-dom-gallery-demo](../README.md) / TicTacToeCatalog
+
+# Type Alias: TicTacToeCatalog
+
+```ts
+type TicTacToeCatalog = typeof ticTacToeCatalog;
+```
+
+Defined in: [packages/play-dom/examples/gallery/src/catalogs.ts:29](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/catalogs.ts#L29)

package/examples/@xmachines/play-dom-gallery-demo/type-aliases/TodoMvcCatalog.md

@@ -0,0 +1,9 @@
+[Examples](../../../README.md) / [@xmachines/play-dom-gallery-demo](../README.md) / TodoMvcCatalog
+
+# Type Alias: TodoMvcCatalog
+
+```ts
+type TodoMvcCatalog = typeof todoMvcCatalog;
+```
+
+Defined in: [packages/play-dom/examples/gallery/src/catalogs.ts:35](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/catalogs.ts#L35)

package/examples/@xmachines/play-dom-gallery-demo/type-aliases/TriviaCatalog.md

@@ -0,0 +1,9 @@
+[Examples](../../../README.md) / [@xmachines/play-dom-gallery-demo](../README.md) / TriviaCatalog
+
+# Type Alias: TriviaCatalog
+
+```ts
+type TriviaCatalog = typeof triviaCatalog;
+```
+
+Defined in: [packages/play-dom/examples/gallery/src/catalogs.ts:38](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/catalogs.ts#L38)

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

@@ -0,0 +1,12 @@
+[Examples](../../../README.md) / [@xmachines/play-dom-gallery-demo](../README.md) / Button
+
+# Variable: Button
+
+```ts
+const Button: ComponentFn<KitCatalog, "Button">;
+```
+
+Defined in: [packages/play-dom/examples/gallery/src/components/Button.ts:8](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/components/Button.ts#L8)
+
+Button — emits `press`; the spec's `on.press` binding decides what happens
+(a host action sending a machine event, or a built-in like setState).

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

@@ -0,0 +1,30 @@
+[Examples](../../../README.md) / [@xmachines/play-dom-gallery-demo](../README.md) / Field
+
+# Variable: Field
+
+```ts
+const Field: ComponentFn<KitCatalog, "Field">;
+```
+
+Defined in: [packages/play-dom/examples/gallery/src/components/Field.ts:26](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/components/Field.ts#L26)
+
+Field — labelled input with two-way $bindState binding and declarative
+validation checks.
+
+The DOM renderer resolves `{ $bindState: "/path" }` into `bindings.value`
+and hands the current value in through `props.value`; writing back is the
+component's job, so every `input` event pushes into `ctx.store` at that
+path. A Button then reads the draft with `{ $state: "/path" }` params and
+clears it with a chained `setState` built-in.
+
+The incremental renderer skips re-rendering a bound element while it holds
+focus, so typing never loses the caret — external writes (the setState
+clear) still land because the element is unfocused by then.
+
+`ctx.validation.registerField` registers the bound state path with the DOM
+renderer's validation registry so the `validateForm` built-in sees this
+field's `checks` (the incremental renderer releases the registration when the
+element unmounts). Error DISPLAY deliberately reads `props.formErrors` — the
+`{ path: messages }` map validateForm wrote back to state — so every renderer
+surfaces errors at the same moment: after submit. The error node carries
+`data-demo-error={testId}`, the handle the shared suites assert on.

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

@@ -0,0 +1,16 @@
+[Examples](../../../README.md) / [@xmachines/play-dom-gallery-demo](../README.md) / Page
+
+# Variable: Page
+
+```ts
+const Page: ComponentFn<KitCatalog, "Page">;
+```
+
+Defined in: [packages/play-dom/examples/gallery/src/components/Page.ts:12](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/components/Page.ts#L12)
+
+Page — the root of every view.
+
+Renders `data-page={page}` (the state name) so the browser suites can wait
+for a specific view, plus an `h2` title and the spec children. Title and
+children go through the DOM API rather than innerHTML: props are
+$state-resolved machine data, never trusted markup.

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

@@ -0,0 +1,15 @@
+[Examples](../../../README.md) / [@xmachines/play-dom-gallery-demo](../README.md) / Panel
+
+# Variable: Panel
+
+```ts
+const Panel: ComponentFn<KitCatalog, "Panel">;
+```
+
+Defined in: [packages/play-dom/examples/gallery/src/components/Panel.ts:11](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/components/Panel.ts#L11)
+
+Panel — generic container leaf.
+
+Renders an optional title and note, then appends its rendered spec
+`children` — repeat containers render ONCE and their children render per
+item, so a Panel is both the list shell and the row.

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

@@ -0,0 +1,15 @@
+[Examples](../../../README.md) / [@xmachines/play-dom-gallery-demo](../README.md) / Text
+
+# Variable: Text
+
+```ts
+const Text: ComponentFn<KitCatalog, "Text">;
+```
+
+Defined in: [packages/play-dom/examples/gallery/src/components/Text.ts:11](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/components/Text.ts#L11)
+
+Text — one paragraph of live text.
+
+`String(props.value)` on purpose: $state-resolved values may arrive as
+numbers (counts, elapsed millis) even though the schema declares a string —
+the DOM contract promises text, so coerce once here.

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

@@ -0,0 +1,126 @@
+[Examples](../../../README.md) / [@xmachines/play-dom-gallery-demo](../README.md) / authCatalog
+
+# 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>;
+        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: {
+     login: {
+        description: "Log in with a username (sends auth.login to the machine)";
+        params: ZodObject<{
+           username: ZodString;
+        }, $strip>;
+     };
+     logout: {
+        description: "Log out and return to home (sends auth.logout)";
+     };
+     route: {
+        description: "Navigate to a route by state id (e.g. '#home', '#login', '#dashboard')";
+        params: ZodObject<{
+           params: ZodOptional<ZodRecord<ZodString, ZodString>>;
+           to: ZodString;
+        }, $strip>;
+     };
+  };
+  components: {
+     Button: {
+        props: ZodObject<{
+           disabled: ZodOptional<ZodBoolean>;
+           label: ZodString;
+           testId: ZodOptional<ZodString>;
+           variant: ZodOptional<ZodEnum<{
+              danger: "danger";
+              primary: "primary";
+              secondary: "secondary";
+           }>>;
+        }, $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>;
+     };
+     Page: {
+        props: ZodObject<{
+           page: ZodString;
+           title: ZodString;
+        }, $strip>;
+     };
+     Panel: {
+        props: ZodObject<{
+           note: ZodOptional<ZodString>;
+           testId: ZodOptional<ZodString>;
+           title: ZodOptional<ZodString>;
+           tone: ZodOptional<ZodEnum<{
+              danger: "danger";
+              default: "default";
+              muted: "muted";
+              success: "success";
+           }>>;
+        }, $strip>;
+     };
+     Text: {
+        props: ZodObject<{
+           testId: ZodOptional<ZodString>;
+           tone: ZodOptional<ZodEnum<{
+              danger: "danger";
+              default: "default";
+              muted: "muted";
+              success: "success";
+           }>>;
+           value: ZodString;
+        }, $strip>;
+     };
+  };
+}>;
+```
+
+Defined in: [packages/play-dom/examples/gallery/src/catalogs.ts:46](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/catalogs.ts#L46)
+
+Built catalogs, one per machine — router demos import theirs from here.

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

@@ -0,0 +1,21 @@
+[Examples](../../../README.md) / [@xmachines/play-dom-gallery-demo](../README.md) / demoComponents
+
+# Variable: demoComponents
+
+```ts
+const demoComponents: object;
+```
+
+Defined in: [packages/play-dom/examples/gallery/src/components/demo-components.ts:11](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/components/demo-components.ts#L11)
+
+demoComponents — the full catalog component map, shared with the router demos.
+
+## Type Declaration
+
+| Name                                  | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Defined in                                                                                                                                                                                                        |
+| ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <a id="property-button"></a> `Button` | [`ComponentFn`](../../../../api/@xmachines/play-dom/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `load`: \{ `description`: `"Load the demo user (sends fetch.start to the machine)"`; \}; `retry`: \{ `description`: `"Retry the request (sends fetch.retry to the machine)"`; \}; `toggleFail`: \{ `description`: `"Arm or disarm deterministic failure for the next request (sends fetch.toggleFailNext)"`; \}; \}; `components`: \{ `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$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`\>; \}; `Page`: \{ `props`: `ZodObject`\<\{ `page`: `ZodString`; `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodString`\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Text`: \{ `props`: `ZodObject`\<\{ `testId`: `ZodOptional`\<`ZodString`\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; `value`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Button"`\> | Button — emits `press`; the spec's `on.press` binding decides what happens (a host action sending a machine event, or a built-in like setState).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | [packages/play-dom/examples/gallery/src/components/demo-components.ts:15](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/components/demo-components.ts#L15) |
+| <a id="property-field"></a> `Field`   | [`ComponentFn`](../../../../api/@xmachines/play-dom/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `load`: \{ `description`: `"Load the demo user (sends fetch.start to the machine)"`; \}; `retry`: \{ `description`: `"Retry the request (sends fetch.retry to the machine)"`; \}; `toggleFail`: \{ `description`: `"Arm or disarm deterministic failure for the next request (sends fetch.toggleFailNext)"`; \}; \}; `components`: \{ `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$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`\>; \}; `Page`: \{ `props`: `ZodObject`\<\{ `page`: `ZodString`; `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodString`\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Text`: \{ `props`: `ZodObject`\<\{ `testId`: `ZodOptional`\<`ZodString`\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; `value`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Field"`\>  | Field — labelled input with two-way $bindState binding and declarative validation checks. The DOM renderer resolves `{ $bindState: "/path" }` into `bindings.value` and hands the current value in through `props.value`; writing back is the component's job, so every `input` event pushes into `ctx.store` at that path. A Button then reads the draft with `{ $state: "/path" }` params and clears it with a chained `setState` built-in. The incremental renderer skips re-rendering a bound element while it holds focus, so typing never loses the caret — external writes (the setState clear) still land because the element is unfocused by then. `ctx.validation.registerField` registers the bound state path with the DOM renderer's validation registry so the `validateForm` built-in sees this field's `checks` (the incremental renderer releases the registration when the element unmounts). Error DISPLAY deliberately reads `props.formErrors` — the `{ path: messages }` map validateForm wrote back to state — so every renderer surfaces errors at the same moment: after submit. The error node carries `data-demo-error={testId}`, the handle the shared suites assert on. | [packages/play-dom/examples/gallery/src/components/demo-components.ts:14](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/components/demo-components.ts#L14) |
+| <a id="property-page"></a> `Page`     | [`ComponentFn`](../../../../api/@xmachines/play-dom/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `load`: \{ `description`: `"Load the demo user (sends fetch.start to the machine)"`; \}; `retry`: \{ `description`: `"Retry the request (sends fetch.retry to the machine)"`; \}; `toggleFail`: \{ `description`: `"Arm or disarm deterministic failure for the next request (sends fetch.toggleFailNext)"`; \}; \}; `components`: \{ `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$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`\>; \}; `Page`: \{ `props`: `ZodObject`\<\{ `page`: `ZodString`; `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodString`\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Text`: \{ `props`: `ZodObject`\<\{ `testId`: `ZodOptional`\<`ZodString`\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; `value`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Page"`\>   | Page — the root of every view. Renders `data-page={page}` (the state name) so the browser suites can wait for a specific view, plus an `h2` title and the spec children. Title and children go through the DOM API rather than innerHTML: props are $state-resolved machine data, never trusted markup.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | [packages/play-dom/examples/gallery/src/components/demo-components.ts:12](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/components/demo-components.ts#L12) |
+| <a id="property-panel"></a> `Panel`   | [`ComponentFn`](../../../../api/@xmachines/play-dom/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `load`: \{ `description`: `"Load the demo user (sends fetch.start to the machine)"`; \}; `retry`: \{ `description`: `"Retry the request (sends fetch.retry to the machine)"`; \}; `toggleFail`: \{ `description`: `"Arm or disarm deterministic failure for the next request (sends fetch.toggleFailNext)"`; \}; \}; `components`: \{ `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$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`\>; \}; `Page`: \{ `props`: `ZodObject`\<\{ `page`: `ZodString`; `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodString`\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Text`: \{ `props`: `ZodObject`\<\{ `testId`: `ZodOptional`\<`ZodString`\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; `value`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Panel"`\>  | Panel — generic container leaf. Renders an optional title and note, then appends its rendered spec `children` — repeat containers render ONCE and their children render per item, so a Panel is both the list shell and the row.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | [packages/play-dom/examples/gallery/src/components/demo-components.ts:13](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/components/demo-components.ts#L13) |
+| <a id="property-text"></a> `Text`     | [`ComponentFn`](../../../../api/@xmachines/play-dom/type-aliases/ComponentFn.md)\<`Catalog`\<\{ `catalog`: `SchemaType`\<`"object"`, \{ `actions`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `params`: `SchemaType`\<`"zod"`, `unknown`\>; \}\>; `components`: `SchemaType`\<`"map"`, \{ `description`: `SchemaType`\<`"string"`, `unknown`\>; `example`: `SchemaType`\<`"any"`, `unknown`\>; `props`: `SchemaType`\<`"zod"`, `unknown`\>; `slots`: `SchemaType`\<`"array"`, `SchemaType`\<`"string"`, `unknown`\>\>; \}\>; \}\>; `spec`: `SchemaType`\<`"object"`, \{ `elements`: `SchemaType`\<`"record"`, `SchemaType`\<`"object"`, \{ `children`: `SchemaType`\<`"array"`, `SchemaType`\<..., ...\>\>; `props`: `SchemaType`\<`"propsOf"`, `string`\>; `repeat`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; `slots`: \{ `inner?`: ... \| ...; `kind`: `"record"`; `optional`: `true`; \}; `type`: `SchemaType`\<`"ref"`, `string`\>; `visible`: \{ `inner?`: `unknown`; `kind`: `"any"`; `optional`: `true`; \}; \}\>\>; `root`: `SchemaType`\<`"string"`, `unknown`\>; \}\>; \}, \{ `actions`: \{ `load`: \{ `description`: `"Load the demo user (sends fetch.start to the machine)"`; \}; `retry`: \{ `description`: `"Retry the request (sends fetch.retry to the machine)"`; \}; `toggleFail`: \{ `description`: `"Arm or disarm deterministic failure for the next request (sends fetch.toggleFailNext)"`; \}; \}; `components`: \{ `Button`: \{ `props`: `ZodObject`\<\{ `disabled`: `ZodOptional`\<`ZodBoolean`\>; `label`: `ZodString`; `testId`: `ZodOptional`\<`ZodString`\>; `variant`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `primary`: ...; `secondary`: ...; \}\>\>; \}, `$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`\>; \}; `Page`: \{ `props`: `ZodObject`\<\{ `page`: `ZodString`; `title`: `ZodString`; \}, `$strip`\>; \}; `Panel`: \{ `props`: `ZodObject`\<\{ `note`: `ZodOptional`\<`ZodString`\>; `testId`: `ZodOptional`\<`ZodString`\>; `title`: `ZodOptional`\<`ZodString`\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; \}, `$strip`\>; \}; `Text`: \{ `props`: `ZodObject`\<\{ `testId`: `ZodOptional`\<`ZodString`\>; `tone`: `ZodOptional`\<`ZodEnum`\<\{ `danger`: ...; `default`: ...; `muted`: ...; `success`: ...; \}\>\>; `value`: `ZodString`; \}, `$strip`\>; \}; \}; \}\>, `"Text"`\>   | Text — one paragraph of live text. `String(props.value)` on purpose: $state-resolved values may arrive as numbers (counts, elapsed millis) even though the schema declares a string — the DOM contract promises text, so coerce once here.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | [packages/play-dom/examples/gallery/src/components/demo-components.ts:16](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/components/demo-components.ts#L16) |

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

@@ -0,0 +1,135 @@
+[Examples](../../../README.md) / [@xmachines/play-dom-gallery-demo](../README.md) / donutCatalog
+
+# Variable: donutCatalog
+
+```ts
+const donutCatalog: 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: {
+     advance: {
+        description: "Go to the next step (sends donut.advance — the machine refuses while the current step is unfinished)";
+     };
+     back: {
+        description: "Go back one step (sends donut.back)";
+     };
+     pick: {
+        description: "Pick one ingredient (sends donut.pick — duplicates and picks past four are ignored)";
+        params: ZodObject<{
+           name: ZodString;
+        }, $strip>;
+     };
+     reset: {
+        description: "Start over (sends donut.reset — clears ingredients and every step flag)";
+     };
+     route: {
+        description: "Navigate to a route by state id (e.g. '#recipe', '#mix', '#done')";
+        params: ZodObject<{
+           params: ZodOptional<ZodRecord<ZodString, ZodString>>;
+           to: ZodString;
+        }, $strip>;
+     };
+     work: {
+        description: "Perform the current step (sends donut.work: mix, fry, or decorate)";
+     };
+  };
+  components: {
+     Button: {
+        props: ZodObject<{
+           disabled: ZodOptional<ZodBoolean>;
+           label: ZodString;
+           testId: ZodOptional<ZodString>;
+           variant: ZodOptional<ZodEnum<{
+              danger: "danger";
+              primary: "primary";
+              secondary: "secondary";
+           }>>;
+        }, $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>;
+     };
+     Page: {
+        props: ZodObject<{
+           page: ZodString;
+           title: ZodString;
+        }, $strip>;
+     };
+     Panel: {
+        props: ZodObject<{
+           note: ZodOptional<ZodString>;
+           testId: ZodOptional<ZodString>;
+           title: ZodOptional<ZodString>;
+           tone: ZodOptional<ZodEnum<{
+              danger: "danger";
+              default: "default";
+              muted: "muted";
+              success: "success";
+           }>>;
+        }, $strip>;
+     };
+     Text: {
+        props: ZodObject<{
+           testId: ZodOptional<ZodString>;
+           tone: ZodOptional<ZodEnum<{
+              danger: "danger";
+              default: "default";
+              muted: "muted";
+              success: "success";
+           }>>;
+           value: ZodString;
+        }, $strip>;
+     };
+  };
+}>;
+```
+
+Defined in: [packages/play-dom/examples/gallery/src/catalogs.ts:40](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.1.0/packages/play-dom/examples/gallery/src/catalogs.ts#L40)
+
+Built catalogs, one per machine — router demos import theirs from here.