@xmachines/docs 7.0.0 → 7.2.0

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+[Examples](../../../README.md) / [@xmachines/play-react-gallery-demo](../README.md) / KitCatalog
+
+# Type Alias: KitCatalog
+
+```ts
+type KitCatalog = FetchCatalog;
+```
+
+Defined in: [packages/play-react/examples/gallery/src/catalogs.ts:57](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.2.0/packages/play-react/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-react-gallery-demo/type-aliases/StopwatchCatalog.md

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+[Examples](../../../README.md) / [@xmachines/play-react-gallery-demo](../README.md) / DebugPanel
+
+# Variable: DebugPanel
+
+```ts
+const DebugPanel: FC<{
+  actor: GalleryActor;
+  inspector: DemoInspector;
+}>;
+```
+
+Defined in: [packages/play-react/examples/gallery/src/components/DebugPanel.tsx:19](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.2.0/packages/play-react/examples/gallery/src/components/DebugPanel.tsx#L19)
+
+DebugPanel — Live debug footer. Observes the state of the actor through a computed
+label atom and displays it, plus the button that opens the Stately inspector window.
+Works with any of the nine gallery actors.
+
+The label atom collapses the union of nine snapshot types into one string, so one
+`useAtomEffect` call can watch it. The gallery hands this component a NEW actor each
+time the user opens a machine, so the atom and the watcher both depend on `[actor]`:
+a watcher with no dependency list stays on the atoms of the FIRST actor.

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

@@ -0,0 +1,24 @@
+[Examples](../../../README.md) / [@xmachines/play-react-gallery-demo](../README.md) / Field
+
+# Variable: Field
+
+```ts
+const Field: ComponentFn<KitCatalog, "Field">;
+```
+
+Defined in: [packages/play-react/examples/gallery/src/components/Field.tsx:21](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.2.0/packages/play-react/examples/gallery/src/components/Field.tsx#L21)
+
+Field — labelled input with two-way $bindState binding and declarative
+validation checks.
+
+`useBoundProp` wires `value` to the bound view-state path when the spec
+passes `{ $bindState: "/path" }`, so a Button can read the draft back with
+`{ $state: "/path" }` params and clear it with a chained `setState` built-in.
+
+Registration happens by rendering: `useFieldValidation` registers the bound
+state path (and its `props.checks`) with the ValidationProvider so the
+`validateForm` built-in sees it. The error DISPLAY deliberately reads
+`props.formErrors` — the result map `validateForm` wrote back to view state —
+rather than the local hook, so every renderer surfaces errors at the same
+moment: after submit. The message node carries `data-demo-error={testId}`,
+the DOM contract the shared browser suites assert on.

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

@@ -0,0 +1,14 @@
+[Examples](../../../README.md) / [@xmachines/play-react-gallery-demo](../README.md) / Page
+
+# Variable: Page
+
+```ts
+const Page: ComponentFn<KitCatalog, "Page">;
+```
+
+Defined in: [packages/play-react/examples/gallery/src/components/Page.tsx:10](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.2.0/packages/play-react/examples/gallery/src/components/Page.tsx#L10)
+
+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.

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

@@ -0,0 +1,15 @@
+[Examples](../../../README.md) / [@xmachines/play-react-gallery-demo](../README.md) / Panel
+
+# Variable: Panel
+
+```ts
+const Panel: ComponentFn<KitCatalog, "Panel">;
+```
+
+Defined in: [packages/play-react/examples/gallery/src/components/Panel.tsx:11](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.2.0/packages/play-react/examples/gallery/src/components/Panel.tsx#L11)
+
+Panel — generic container leaf.
+
+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.

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

@@ -0,0 +1,26 @@
+[Examples](../../../README.md) / [@xmachines/play-react-gallery-demo](../README.md) / Shell
+
+# Variable: Shell
+
+```ts
+const Shell: FC<{
+  actor: GalleryActor;
+  inspector: DemoInspector;
+  nav?: ReactNode;
+  registryResult: DefineRegistryResult;
+  router?: unknown;
+  title?: string;
+}>;
+```
+
+Defined in: [packages/play-react/examples/gallery/src/components/Shell.tsx:19](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.2.0/packages/play-react/examples/gallery/src/components/Shell.tsx#L19)
+
+Demo Shell layout component.
+
+Wraps PlayRenderer and DebugPanel in the standard demo chrome. There is no
+NavBar — every ported machine drives its own navigation through in-view
+buttons (route actions on routing machines, plain events elsewhere).
+
+The gallery App and the router demos share this one Shell: the gallery
+passes `title`/`nav` (machine label + "Back to gallery" button); router
+demos render it bare with their bridged `router`.

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

@@ -0,0 +1,15 @@
+[Examples](../../../README.md) / [@xmachines/play-react-gallery-demo](../README.md) / Text
+
+# Variable: Text
+
+```ts
+const Text: ComponentFn<KitCatalog, "Text">;
+```
+
+Defined in: [packages/play-react/examples/gallery/src/components/Text.tsx:11](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.2.0/packages/play-react/examples/gallery/src/components/Text.tsx#L11)
+
+Text — one paragraph of live text.
+
+`String(props.value)` on purpose: $state-resolved values may arrive as
+numbers (counts, elapsed millis), and React must never render `NaN`-prone
+raw objects — the DOM contract promises text.

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

@@ -0,0 +1,126 @@
+[Examples](../../../README.md) / [@xmachines/play-react-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-react/examples/gallery/src/catalogs.ts:46](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.2.0/packages/play-react/examples/gallery/src/catalogs.ts#L46)
+
+Built catalogs, one per machine — router demos import theirs from here.

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

@@ -0,0 +1,21 @@
+[Examples](../../../README.md) / [@xmachines/play-react-gallery-demo](../README.md) / demoComponents
+
+# Variable: demoComponents
+
+```ts
+const demoComponents: object;
+```
+
+Defined in: [packages/play-react/examples/gallery/src/components/demo-components.ts:11](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.2.0/packages/play-react/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-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`: \{ `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-react/examples/gallery/src/components/demo-components.ts:15](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.2.0/packages/play-react/examples/gallery/src/components/demo-components.ts#L15) |
+| <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`: \{ `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. `useBoundProp` wires `value` to the bound view-state path when the spec passes `{ $bindState: "/path" }`, so a Button can read the draft back with `{ $state: "/path" }` params and clear it with a chained `setState` built-in. Registration happens by rendering: `useFieldValidation` registers the bound state path (and its `props.checks`) with the ValidationProvider so the `validateForm` built-in sees it. The error DISPLAY deliberately reads `props.formErrors` — the result map `validateForm` wrote back to view state — rather than the local hook, so every renderer surfaces errors at the same moment: after submit. The message node carries `data-demo-error={testId}`, the DOM contract the shared browser suites assert on. | [packages/play-react/examples/gallery/src/components/demo-components.ts:14](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.2.0/packages/play-react/examples/gallery/src/components/demo-components.ts#L14) |
+| <a id="property-page"></a> `Page`     | [`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`: \{ `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.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | [packages/play-react/examples/gallery/src/components/demo-components.ts:12](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.2.0/packages/play-react/examples/gallery/src/components/demo-components.ts#L12) |
+| <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`: \{ `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 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/gallery/src/components/demo-components.ts:13](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.2.0/packages/play-react/examples/gallery/src/components/demo-components.ts#L13) |
+| <a id="property-text"></a> `Text`     | [`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`: \{ `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), and React must never render `NaN`-prone raw objects — the DOM contract promises text.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | [packages/play-react/examples/gallery/src/components/demo-components.ts:16](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.2.0/packages/play-react/examples/gallery/src/components/demo-components.ts#L16) |

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

@@ -0,0 +1,135 @@
+[Examples](../../../README.md) / [@xmachines/play-react-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-react/examples/gallery/src/catalogs.ts:40](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v7.2.0/packages/play-react/examples/gallery/src/catalogs.ts#L40)
+
+Built catalogs, one per machine — router demos import theirs from here.