@xmachines/docs 5.0.2 → 6.1.0

package/api/@xmachines/play-dom/README.md

@@ -4,7 +4,7 @@
 
 Vanilla DOM renderer for XMachines Play architecture with atom-driven rendering.
 
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Version](https://img.shields.io/badge/version-5.0.2-blue)](https://www.npmjs.com/package/@xmachines/play-dom)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Version](https://img.shields.io/badge/version-6.1.0-blue)](https://www.npmjs.com/package/@xmachines/play-dom)
 
 ## Installation
 
@@ -15,9 +15,11 @@ pnpm add @xmachines/play-dom
 **Peer dependencies:**
 
 ```bash
-pnpm add @xmachines/play @xmachines/play-atom @xstate/store @xmachines/json-render-core @xmachines/json-render-dom @xmachines/json-render-xstate
+pnpm add @xmachines/core @xmachines/play @xmachines/play-atom @xstate/store @xmachines/json-render-core @xmachines/json-render-dom @xmachines/json-render-xstate
 ```
 
+[`@xmachines/play`](../play/README.md) is the peer of [`@xmachines/play-view`](../play-view/README.md), which this package depends on. Install ONE copy of it.
+
 `@xstate/store` is the peer of [`@xmachines/play-atom`](../play-atom/README.md), and not of this
 package: this package reads the atom through [`@xmachines/play-atom`](../play-atom/README.md) and
 imports the engine in no source file. Install ONE copy of it.
@@ -206,7 +208,7 @@ const mount = createPlayUI(registryResult, {
 });
 ```
 
-Without `functions`, every `$computed` expression resolves to `undefined`. Nothing throws, and the old behavior stays.
+Without `functions`, every `$computed` expression resolves to `undefined`, and nothing throws.
 
 ### `validationFunctions` — custom field validation
 
@@ -285,32 +287,27 @@ The order of the arguments is the same as in the `RenderErrorHandler` type of `@
 
 Without `onRenderError`, the renderer writes all three types of error to `console.error`, then stops them. No exception goes to the caller, and no promise rejection stays unhandled.
 
-### The renderer contains a failed rebuild — a change of behaviour in 2.3.0
+### The renderer contains a failed rebuild
 
 **Read this if you catch what `mount()` or `connect()` throws.**
 
-In 2.2.0 the renderer had no containment. A view that failed the rebuild threw out of
-`mount()` and out of the callback of the atom watcher, so a `try` of the host, an error
-boundary of the framework around it, or the global handler of the page received it.
-
-In 2.3.0 the renderer contains such a failure ALWAYS. No option turns the containment on,
-and no option turns it off. The renderer clears the container, it shows the `fallback`,
-and `mount()` returns normally. A host that shows its own error page from a `catch` around
-`mount()` sees that `catch` never again.
+The renderer contains a view that fails the rebuild ALWAYS. No option turns the
+containment on, and no option turns it off. The renderer clears the container, it shows
+the `fallback`, and `mount()` returns normally. A host that shows its own error page from
+a `catch` around `mount()` never sees that `catch` run.
 
 The four framework renderers contain a failed render always, because an error boundary of
-a framework is not an option that a caller turns off. This change puts play-dom on the
-same rule.
+a framework is not an option that a caller turns off. play-dom follows the same rule.
 
-**To escalate a failure, raise it from a task of your own:**
+**To escalate a failure, raise it from a task of your own.** The example imports `rethrowLater` from [`@xmachines/core/utils`](../core/README.md). Install that package next to this one, because your code imports it and a package manager such as pnpm does not let your code import a package that it does not declare:
 
 ```typescript
+import { rethrowLater } from "@xmachines/core/utils";
+
 const mount = createPlayUI(registryResult, {
 	onError: (err) => {
 		reportToSentry(err);
-		queueMicrotask(() => {
-			throw err; // the page keeps its own global handler
-		});
+		rethrowLater(err); // the page keeps its own global handler
 	},
 });
 ```
@@ -323,7 +320,7 @@ this one rule, so a host learns it one time and writes the same handler for each
 
 `onRenderError` covers one element: the inner renderer contains a render error of a component, and a rejection of an action handler, per element, and the rebuild continues. Some failures escape that boundary — a `$computed` function that throws during the resolution of a prop, for example — and they abort the complete rebuild.
 
-`onError` receives such a failure. The renderer contains it with this option and without it: it resets the state of the failed rebuild, so that the next emission makes a complete render again, and it clears the container. `connect()` renders the first view synchronously, so a bad initial view makes `connect()` throw no more.
+`onError` receives such a failure. The renderer contains it with this option and without it: it resets the state of the failed rebuild, so that the next emission makes a complete render again, and it clears the container. `connect()` renders the first view synchronously, and a bad initial view does not make `connect()` throw.
 
 A write of the store takes the same path. The renderer resolves the props of every element that the write touched, so a `$computed` function that throws on the new state aborts that render too. The renderer contains such a failure as well, and the action handler that wrote the state receives no exception.
 
@@ -367,35 +364,33 @@ const Home: ComponentFn<typeof catalog, "Home"> = ({ ctx }) => {
 
 ### XMachines Layer
 
-| Export                                   | Kind     | Description                                                                          |
-| ---------------------------------------- | -------- | ------------------------------------------------------------------------------------ |
-| `createRenderer(catalog, components)`    | function | The one-call factory. Its `mount` hands a `Cleanup` back                             |
-| `createPlayUI(registryResult, options?)` | function | The complete factory. It returns a `MountFn`                                         |
-| `PlayRenderer`                           | class    | The renderer class, with a `connect()` and `disconnect()` lifecycle                  |
-| `defineRegistry(catalog, options)`       | function | Build a catalog-typed `DomRegistry` with typed handlers                              |
-| `renderSpec(...)`                        | function | The pure low-level Spec → DOM renderer                                               |
-| `schema`                                 | const    | The `@xmachines/json-render-dom` schema — pass to `defineCatalog()`                  |
-| `asCleanup`, `Cleanup`                   | —        | The release a mount returns, re-exported from [`@xmachines/play`](../play/README.md) |
+| Export                                   | Kind     | Description                                                         |
+| ---------------------------------------- | -------- | ------------------------------------------------------------------- |
+| `createRenderer(catalog, components)`    | function | The one-call factory. Its `mount` hands a plain release back        |
+| `createPlayUI(registryResult, options?)` | function | The complete factory. It returns a `MountFn`                        |
+| `PlayRenderer`                           | class    | The renderer class, with a `connect()` and `disconnect()` lifecycle |
+| `defineRegistry(catalog, options)`       | function | Build a catalog-typed `DomRegistry` with typed handlers             |
+| `renderSpec(...)`                        | function | The pure low-level Spec → DOM renderer                              |
+| `schema`                                 | const    | The `@xmachines/json-render-dom` schema — pass to `defineCatalog()` |
 
 ### Key Types
 
-| Type                     | Description                                                                                                   |
-| ------------------------ | ------------------------------------------------------------------------------------------------------------- |
-| `ComponentFn<C, K>`      | Catalog-typed component function — returns `HTMLElement \| Text \| null`                                      |
-| `ComponentContext<C, K>` | The context of each component: `props`, `children`, `emit`, `on`, `bindings`, and `ctx`                       |
-| `ActionFn<C, K>`         | Catalog-typed action function — receives `(params, setState, state)`                                          |
-| `EventHandle`            | The handle that `on(eventName)` returns. It has `emit()`, `shouldPreventDefault`, and `bound`                 |
-| `SetState`               | State updater: `(prev => next) => void`                                                                       |
-| `DefineRegistryResult`   | The result of `defineRegistry`. It has `registry`, `handlers`, and `executeAction`                            |
-| `PlayDomOptions`         | Options for `PlayRenderer` — extends `UIProviderOptions`, adds `fallback` and `onError`                       |
-| `CreatePlayUIOptions`    | Options for `createPlayUI` — extends `UIProviderOptions`, adds `fallback` and `onError`                       |
-| `MountOptions`           | Per-mount options for `MountFn`: `store`, `loading`                                                           |
-| `MountFn`                | The mount: `(actor, container, options?) → Cleanup`. `createPlayUI` returns one, and a consumer may write one |
-| `UIProviderOptions`      | Shared options: `functions`, `validationFunctions`, `navigate`, `onRenderError`                               |
-| `BaseComponentProps<P>`  | Catalog-agnostic component props for shared component libraries                                               |
-| `DomRegistry`            | Raw registry type: `Record<string, DomComponentRenderer>`                                                     |
-| `DomSchema`              | Type of the `schema` export                                                                                   |
-| `Cleanup`                | The release of a mount, re-exported from [`@xmachines/play`](../play/README.md)                               |
+| Type                     | Description                                                                                                      |
+| ------------------------ | ---------------------------------------------------------------------------------------------------------------- |
+| `ComponentFn<C, K>`      | Catalog-typed component function — returns `HTMLElement \| Text \| null`                                         |
+| `ComponentContext<C, K>` | The context of each component: `props`, `children`, `emit`, `on`, `bindings`, and `ctx`                          |
+| `ActionFn<C, K>`         | Catalog-typed action function — receives `(params, setState, state)`                                             |
+| `EventHandle`            | The handle that `on(eventName)` returns. It has `emit()`, `shouldPreventDefault`, and `bound`                    |
+| `SetState`               | State updater: `(prev => next) => void`                                                                          |
+| `DefineRegistryResult`   | The result of `defineRegistry`. It has `registry`, `handlers`, and `executeAction`                               |
+| `PlayDomOptions`         | Options for `PlayRenderer` — extends `UIProviderOptions`, adds `fallback` and `onError`                          |
+| `CreatePlayUIOptions`    | Options for `createPlayUI` — extends `UIProviderOptions`, adds `fallback` and `onError`                          |
+| `MountOptions`           | Per-mount options for `MountFn`: `store`, `loading`                                                              |
+| `MountFn`                | The mount: `(actor, container, options?) → () => void`. `createPlayUI` returns one, and a consumer may write one |
+| `UIProviderOptions`      | Shared options: `functions`, `validationFunctions`, `navigate`, `onRenderError`                                  |
+| `BaseComponentProps<P>`  | Catalog-agnostic component props for shared component libraries                                                  |
+| `DomRegistry`            | Raw registry type: `Record<string, DomComponentRenderer>`                                                        |
+| `DomSchema`              | Type of the `schema` export                                                                                      |
 
 ## Rendering Behavior
 
@@ -455,7 +450,6 @@ The public API has two layers:
 - [Actions](type-aliases/Actions.md)
 - [BaseComponentProps](type-aliases/BaseComponentProps.md)
 - [CatalogHasActions](type-aliases/CatalogHasActions.md)
-- [Cleanup](type-aliases/Cleanup.md)
 - [ComponentFn](type-aliases/ComponentFn.md)
 - [ComponentRegistry](type-aliases/ComponentRegistry.md)
 - [ConfirmHandler](type-aliases/ConfirmHandler.md)
@@ -473,7 +467,6 @@ The public API has two layers:
 
 ## Functions
 
-- [asCleanup](functions/asCleanup.md)
 - [createPlayUI](functions/createPlayUI.md)
 - [createRenderer](functions/createRenderer.md)
 - [createValidationRegistry](functions/createValidationRegistry.md)

package/api/@xmachines/play-dom/classes/PlayRenderer.md

@@ -2,7 +2,7 @@
 
 # Class: PlayRenderer
 
-Defined in: [packages/play-dom/src/PlayRenderer.ts:129](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.2/packages/play-dom/src/PlayRenderer.ts#L129)
+Defined in: [packages/play-dom/src/PlayRenderer.ts:127](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-dom/src/PlayRenderer.ts#L127)
 
 PlayRenderer connects the `currentView` atom of an actor to the DOM renderer.
 
@@ -64,7 +64,7 @@ new PlayRenderer(
 ): PlayRenderer;
 ```
 
-Defined in: [packages/play-dom/src/PlayRenderer.ts:223](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.2/packages/play-dom/src/PlayRenderer.ts#L223)
+Defined in: [packages/play-dom/src/PlayRenderer.ts:232](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-dom/src/PlayRenderer.ts#L232)
 
 #### Parameters
 
@@ -87,7 +87,7 @@ Defined in: [packages/play-dom/src/PlayRenderer.ts:223](https://gitlab.com/xmach
 connect(): void;
 ```
 
-Defined in: [packages/play-dom/src/PlayRenderer.ts:239](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.2/packages/play-dom/src/PlayRenderer.ts#L239)
+Defined in: [packages/play-dom/src/PlayRenderer.ts:248](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-dom/src/PlayRenderer.ts#L248)
 
 Starts the watch of actor.currentView, and renders into the container.
 It renders the first view synchronously, then it subscribes to the atom changes.
@@ -109,7 +109,7 @@ renderer first.
 disconnect(): void;
 ```
 
-Defined in: [packages/play-dom/src/PlayRenderer.ts:283](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.2/packages/play-dom/src/PlayRenderer.ts#L283)
+Defined in: [packages/play-dom/src/PlayRenderer.ts:292](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-dom/src/PlayRenderer.ts#L292)
 
 Stops the watch and clears the container.
 

package/api/@xmachines/play-dom/functions/createPlayUI.md

@@ -6,7 +6,7 @@
 function createPlayUI(registryResult, options?): MountFn;
 ```
 
-Defined in: [packages/play-dom/src/create-play-ui.ts:118](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.2/packages/play-dom/src/create-play-ui.ts#L118)
+Defined in: [packages/play-dom/src/create-play-ui.ts:110](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-dom/src/create-play-ui.ts#L110)
 
 Creates the mount function of the complete DOM renderer.
 

package/api/@xmachines/play-dom/functions/createRenderer.md

@@ -3,10 +3,10 @@
 # Function: createRenderer()
 
 ```ts
-function createRenderer<C>(catalog, componentMap): (actor, container, options?) => Cleanup;
+function createRenderer<C>(catalog, componentMap): (actor, container, options?) => () => void;
 ```
 
-Defined in: [packages/play-dom/src/create-renderer.ts:88](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.2/packages/play-dom/src/create-renderer.ts#L88)
+Defined in: [packages/play-dom/src/create-renderer.ts:87](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-dom/src/create-renderer.ts#L87)
 
 Creates a DOM renderer factory from a catalog and a component map. You can use
 the factory more than one time.
@@ -31,7 +31,7 @@ the PlayRenderer in one call, and it returns a `disconnect` cleanup function.
 
 A `mount` function. It accepts `(actor, container, options?)`, and it returns `disconnect`.
 
-(`actor`, `container`, `options?`) => [`Cleanup`](../type-aliases/Cleanup.md)
+(`actor`, `container`, `options?`) => () => `void`
 
 ## Remarks
 

package/api/@xmachines/play-dom/interfaces/CreatePlayUIOptions.md

@@ -2,7 +2,7 @@
 
 # Interface: CreatePlayUIOptions
 
-Defined in: [packages/play-dom/src/types.ts:152](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.2/packages/play-dom/src/types.ts#L152)
+Defined in: [packages/play-dom/src/types.ts:152](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-dom/src/types.ts#L152)
 
 The options of `createPlayUI()`, the complete DOM factory.
 
@@ -28,13 +28,13 @@ createPlayUI
 
 ## Properties
 
-| Property                                                         | Type                                                                                                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Inherited from                                                                                                         | Defined in                                                                                                                         |
-| ---------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| <a id="property-directives"></a> `directives?`                   | `DirectiveDefinition`\<`ZodType`\<`unknown`, `unknown`, `$ZodTypeInternals`\<`unknown`, `unknown`\>\>\>[] | Custom directives — user-defined `$`-prefixed dynamic values that extend the spec expression language (e.g. `{ $format: "currency", value: ... }`). Each entry is a `DirectiveDefinition` built with `defineDirective` from `@xmachines/json-render-core`. The array is converted to a `DirectiveRegistry` once per render pass and forwarded to `resolveElementProps` via `PropResolutionContext.directives`. Built-in expressions (`$state`, `$cond`, etc.) always take precedence over custom directives. Mirrors the `directives` prop on `JSONUIProvider` / `JsonUIProvider` introduced in **Json-render** 0.19. **Example** `import { defineDirective, resolvePropValue } from "@xmachines/json-render-core"; import { z } from "zod"; const formatDirective = defineDirective({ name: "$format", description: "Locale-aware number formatting.", schema: z.object({ $format: z.enum(["number", "currency"]), value: z.unknown() }), resolve(value, ctx) { const resolved = resolvePropValue(value.value, ctx); return new Intl.NumberFormat().format(resolved as number); }, }); renderSpec(spec, store, registry, { directives: [formatDirective] });`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | [`UIProviderOptions`](UIProviderOptions.md).[`directives`](UIProviderOptions.md#property-directives)                   | -                                                                                                                                  |
-| <a id="property-fallback"></a> `fallback?`                       | `HTMLElement` \| (() => `HTMLElement`) \| `null`                                                          | The optional fallback content — see [PlayDomOptions.fallback](PlayDomOptions.md#property-fallback) for what the renderer does with it. The factory shows it for every null view, and after a failure of a rebuild that the renderer contains. **Give a FUNCTION when the factory mounts more than one time.** ONE factory serves every `mount()` call, and `appendChild` MOVES a node. A single element therefore passes from one container to the next on every null view, and the container that loses it goes empty without a notice. A function runs one time for each mount, so every renderer owns its own element: `const mount = createPlayUI(registryResult, { 	fallback: () => { 		const element = document.createElement("p"); 		element.textContent = "Loading…"; 		return element; 	}, });` An element stays correct for a factory that mounts one time.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -                                                                                                                      | [packages/play-dom/src/types.ts:176](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.2/packages/play-dom/src/types.ts#L176) |
-| <a id="property-functions"></a> `functions?`                     | `Record`\<`string`, `ComputedFunction`\>                                                                  | Named compute functions for `{ $computed: "name", args: {...} }` prop expressions. Each function receives the resolved `args` object and returns the computed value. Forwarded directly to `resolveElementProps` via `PropResolutionContext.functions`, matching the `FunctionsContext` provider in the framework renderers. Without this option, `$computed` expressions resolve to `undefined` (no throw). **Example** `renderSpec(spec, store, registry, { functions: { fullName: (args) => `${args.first} ${args.last}`, formatCurrency: (args) => new Intl.NumberFormat().format(args.amount as number), }, });` Mirrors the `functions` prop on `JSONUIProvider` / `JsonUIProvider`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | [`UIProviderOptions`](UIProviderOptions.md).[`functions`](UIProviderOptions.md#property-functions)                     | -                                                                                                                                  |
-| <a id="property-navigate"></a> `navigate?`                       | (`path`) => `void`                                                                                        | Programmatic navigation function. Called automatically when an action binding resolves with `onSuccess: { navigate: "/path" }`. The resolved path string is passed as the sole argument. Mirrors the `navigate` prop in `ActionProvider` from the framework renderers, where it is captured in the `execute()` closure. Also available to component implementations directly via `ctx.ctx.navigate` for cases where navigation needs to be triggered outside of an action binding. **Example** `import { useNavigate } from "my-router"; const navigate = useNavigate(); renderSpec(spec, store, registry, { navigate });` Spec binding that triggers navigation: `{ "on": { "click": { "action": "doSomething", "onSuccess": { "navigate": "/dashboard" } } } }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | [`UIProviderOptions`](UIProviderOptions.md).[`navigate`](UIProviderOptions.md#property-navigate)                       | -                                                                                                                                  |
-| <a id="property-onconfirm"></a> `onConfirm?`                     | [`ConfirmHandler`](../type-aliases/ConfirmHandler.md)                                                     | Confirmation hook for actions that declare `confirm` in their binding. Consulted by `emit()` before executing a confirm-gated action. Return (or resolve) `true` to execute, `false` to skip. Without this handler, confirm-gated actions are skipped with a `console.warn` — they never execute unconfirmed. See [ConfirmHandler](../type-aliases/ConfirmHandler.md) for the full contract. This is the headless equivalent of the `pendingConfirmation` / `confirmAction()` / `cancelAction()` flow in the framework adapters.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | [`UIProviderOptions`](UIProviderOptions.md).[`onConfirm`](UIProviderOptions.md#property-onconfirm)                     | -                                                                                                                                  |
-| <a id="property-onerror"></a> `onError?`                         | (`error`, `reset`) => `void`                                                                              | The optional handler of a failure of a complete rebuild of the view. This option is NOT the same as `onRenderError`, which [UIProviderOptions](UIProviderOptions.md) gives: the inner renderer routes a render error of one component, and a rejection of one action handler, to `onRenderError`. It contains each of them per element, and the rebuild continues. `onError` receives the failure of the complete rebuild that no per-element boundary caught. The renderer CONTAINS a rebuild that throws, with this option and without it: it resets the state of the failed rebuild, so that the next emission makes a complete render again, and it clears the container. `connect()` renders the first view synchronously, so a bad initial view makes `connect()` throw no more. A WRITE of the store takes the same path. The renderer resolves the props of every element that the write touched, so a `$computed` function that throws on the new state aborts that render too. The renderer contains such a failure as well, and the action handler that wrote the state receives no exception. This option says WHERE the report goes. Without it, the renderer writes the contained failure to `console.error`. A handler that THROWS reaches no caller: the renderer contains that throw too, and it writes the throw to `console.error`. A host that must escalate a failure raises it from a task of its own — `queueMicrotask(() => { throw error; })` — which reaches the global handler of the page and leaves the containment whole. The five renderers hold this one rule. The second parameter is the RESET, for a retry that the host starts — a "Retry" button of its own. It renders the view that the actor holds at the MOMENT OF THE CALL, so a host that keeps the callback cannot rewind the screen to the view that failed. A reset that the host calls from inside this handler does nothing, because no input changed between the two attempts, and a reset after `disconnect()` does nothing. A reset belongs to ONE connection. `connect()` starts a connection, and the reset of a report of an older connection does nothing. A host that calls `connect()` again from inside this handler abandons the connection that reported. The "Retry" button of that report must not render into the connection that took its place. Call the reset of the newest report. This option matches the `onError` prop of the framework renderer providers, and the five renderers hold the same three rules for the reset. | [`PlayDomOptions`](PlayDomOptions.md).[`onError`](PlayDomOptions.md#property-onerror)                                  | [packages/play-dom/src/types.ts:100](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.2/packages/play-dom/src/types.ts#L100) |
-| <a id="property-onrendererror"></a> `onRenderError?`             | [`RenderErrorHandler`](../type-aliases/RenderErrorHandler.md)                                             | Unified error handler for component render errors and action handler rejections. Matches `RenderErrorHandler = (error: unknown, name: string) => void`. Invoked for three distinct error classes: - `(error, elementType)` — when a component renderer throws synchronously during `renderSpec` - `(error, actionName)` — when an action handler rejects during `emit()` (on-event path) - `(error, actionName)` — when an action handler rejects during a `watch` binding callback When provided, suppresses the `console.error` fallback for all three error types. Forwarded into `renderSpec` as the `onRenderError` parameter and into `DomRenderContext.onRenderError` so both `emit()` and `watch` handlers route their errors through the same channel as component render errors. **Example** `renderSpec(spec, store, registry, { onRenderError: (err, name) => { myErrorReporter.capture(err, { context: name }); }, });`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | [`UIProviderOptions`](UIProviderOptions.md).[`onRenderError`](UIProviderOptions.md#property-onrendererror)             | -                                                                                                                                  |
-| <a id="property-validationfunctions"></a> `validationFunctions?` | `Record`\<`string`, (`value`, `args?`) => `boolean`\>                                                     | Custom validation functions for inline field validation. Each function receives `(value, args?)` and returns `true` (valid) or `false` (invalid). Functions are available to component implementations via `ctx.ctx.validationFunctions` and should be passed as `customFunctions` to `runValidationCheck` / `runValidation` from `@xmachines/json-render-core`. Mirrors `customFunctions` in `ValidationProvider` from the framework renderers. The DOM renderer has no automatic `ValidationProvider` tree — validation must be invoked explicitly by component implementations. **Example** `import { runValidationCheck } from "@xmachines/json-render-core"; renderSpec(spec, store, registry, { validationFunctions: { isEven: (value) => typeof value === "number" && value % 2 === 0, phoneNumber: (value) => /^\+?[\d\s\-()]{7,}$/.test(String(value)), }, }); // Inside a ComponentFn: const MyField: ComponentFn<typeof catalog, "MyField"> = ({ ctx }) => { const result = runValidationCheck( { type: "isEven", message: "must be even" }, { value: someValue, stateModel: {}, customFunctions: ctx.ctx.validationFunctions }, ); // result.valid, result.message };`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | [`UIProviderOptions`](UIProviderOptions.md).[`validationFunctions`](UIProviderOptions.md#property-validationfunctions) | -                                                                                                                                  |
+| Property                                                         | Type                                                                                                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | Inherited from                                                                                                         | Defined in                                                                                                                         |
+| ---------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| <a id="property-directives"></a> `directives?`                   | `DirectiveDefinition`\<`ZodType`\<`unknown`, `unknown`, `$ZodTypeInternals`\<`unknown`, `unknown`\>\>\>[] | Custom directives — user-defined `$`-prefixed dynamic values that extend the spec expression language (e.g. `{ $format: "currency", value: ... }`). Each entry is a `DirectiveDefinition` built with `defineDirective` from `@xmachines/json-render-core`. The array is converted to a `DirectiveRegistry` once per render pass and forwarded to `resolveElementProps` via `PropResolutionContext.directives`. Built-in expressions (`$state`, `$cond`, etc.) always take precedence over custom directives. Mirrors the `directives` prop on `JSONUIProvider` / `JsonUIProvider` introduced in **Json-render** 0.19. **Example** `import { defineDirective, resolvePropValue } from "@xmachines/json-render-core"; import { z } from "zod"; const formatDirective = defineDirective({ name: "$format", description: "Locale-aware number formatting.", schema: z.object({ $format: z.enum(["number", "currency"]), value: z.unknown() }), resolve(value, ctx) { const resolved = resolvePropValue(value.value, ctx); return new Intl.NumberFormat().format(resolved as number); }, }); renderSpec(spec, store, registry, { directives: [formatDirective] });`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | [`UIProviderOptions`](UIProviderOptions.md).[`directives`](UIProviderOptions.md#property-directives)                   | -                                                                                                                                  |
+| <a id="property-fallback"></a> `fallback?`                       | `HTMLElement` \| (() => `HTMLElement`) \| `null`                                                          | The optional fallback content — see [PlayDomOptions.fallback](PlayDomOptions.md#property-fallback) for what the renderer does with it. The factory shows it for every null view, and after a failure of a rebuild that the renderer contains. **Give a FUNCTION when the factory mounts more than one time.** ONE factory serves every `mount()` call, and `appendChild` MOVES a node. A single element therefore passes from one container to the next on every null view, and the container that loses it goes empty without a notice. A function runs one time for each mount, so every renderer owns its own element: `const mount = createPlayUI(registryResult, { 	fallback: () => { 		const element = document.createElement("p"); 		element.textContent = "Loading…"; 		return element; 	}, });` An element stays correct for a factory that mounts one time.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -                                                                                                                      | [packages/play-dom/src/types.ts:176](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-dom/src/types.ts#L176) |
+| <a id="property-functions"></a> `functions?`                     | `Record`\<`string`, `ComputedFunction`\>                                                                  | Named compute functions for `{ $computed: "name", args: {...} }` prop expressions. Each function receives the resolved `args` object and returns the computed value. Forwarded directly to `resolveElementProps` via `PropResolutionContext.functions`, matching the `FunctionsContext` provider in the framework renderers. Without this option, `$computed` expressions resolve to `undefined` (no throw). **Example** `renderSpec(spec, store, registry, { functions: { fullName: (args) => `${args.first} ${args.last}`, formatCurrency: (args) => new Intl.NumberFormat().format(args.amount as number), }, });` Mirrors the `functions` prop on `JSONUIProvider` / `JsonUIProvider`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | [`UIProviderOptions`](UIProviderOptions.md).[`functions`](UIProviderOptions.md#property-functions)                     | -                                                                                                                                  |
+| <a id="property-navigate"></a> `navigate?`                       | (`path`) => `void`                                                                                        | Programmatic navigation function. Called automatically when an action binding resolves with `onSuccess: { navigate: "/path" }`. The resolved path string is passed as the sole argument. Mirrors the `navigate` prop in `ActionProvider` from the framework renderers, where it is captured in the `execute()` closure. Also available to component implementations directly via `ctx.ctx.navigate` for cases where navigation needs to be triggered outside of an action binding. **Example** `import { useNavigate } from "my-router"; const navigate = useNavigate(); renderSpec(spec, store, registry, { navigate });` Spec binding that triggers navigation: `{ "on": { "click": { "action": "doSomething", "onSuccess": { "navigate": "/dashboard" } } } }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | [`UIProviderOptions`](UIProviderOptions.md).[`navigate`](UIProviderOptions.md#property-navigate)                       | -                                                                                                                                  |
+| <a id="property-onconfirm"></a> `onConfirm?`                     | [`ConfirmHandler`](../type-aliases/ConfirmHandler.md)                                                     | Confirmation hook for actions that declare `confirm` in their binding. Consulted by `emit()` before executing a confirm-gated action. Return (or resolve) `true` to execute, `false` to skip. Without this handler, confirm-gated actions are skipped with a `console.warn` — they never execute unconfirmed. See [ConfirmHandler](../type-aliases/ConfirmHandler.md) for the full contract. This is the headless equivalent of the `pendingConfirmation` / `confirmAction()` / `cancelAction()` flow in the framework adapters.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | [`UIProviderOptions`](UIProviderOptions.md).[`onConfirm`](UIProviderOptions.md#property-onconfirm)                     | -                                                                                                                                  |
+| <a id="property-onerror"></a> `onError?`                         | (`error`, `reset`) => `void`                                                                              | The optional handler of a failure of a complete rebuild of the view. This option is NOT the same as `onRenderError`, which [UIProviderOptions](UIProviderOptions.md) gives: the inner renderer routes a render error of one component, and a rejection of one action handler, to `onRenderError`. It contains each of them per element, and the rebuild continues. `onError` receives the failure of the complete rebuild that no per-element boundary caught. The renderer CONTAINS a rebuild that throws, with this option and without it: it resets the state of the failed rebuild, so that the next emission makes a complete render again, and it clears the container. `connect()` renders the first view synchronously, and a bad initial view does not make `connect()` throw. A WRITE of the store takes the same path. The renderer resolves the props of every element that the write touched, so a `$computed` function that throws on the new state aborts that render too. The renderer contains such a failure as well, and the action handler that wrote the state receives no exception. This option says WHERE the report goes. Without it, the renderer writes the contained failure to `console.error`. A handler that THROWS reaches no caller: the renderer contains that throw too, and it writes the throw to `console.error`. A host that must escalate a failure raises it from a task of its own — `rethrowLater(error)` of `@xmachines/core/utils` — which reaches the global handler of the page and leaves the containment whole. The host installs `@xmachines/core` itself. The five renderers hold this one rule. The second parameter is the RESET, for a retry that the host starts — a "Retry" button of its own. It renders the view that the actor holds at the MOMENT OF THE CALL, so a host that keeps the callback cannot rewind the screen to the view that failed. A reset that the host calls from inside this handler does nothing, because no input changed between the two attempts, and a reset after `disconnect()` does nothing. A reset belongs to ONE connection. `connect()` starts a connection, and the reset of a report of an older connection does nothing. A host that calls `connect()` again from inside this handler abandons the connection that reported. The "Retry" button of that report must not render into the connection that took its place. Call the reset of the newest report. This option matches the `onError` prop of the framework renderer providers, and the five renderers hold the same three rules for the reset. | [`PlayDomOptions`](PlayDomOptions.md).[`onError`](PlayDomOptions.md#property-onerror)                                  | [packages/play-dom/src/types.ts:100](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-dom/src/types.ts#L100) |
+| <a id="property-onrendererror"></a> `onRenderError?`             | [`RenderErrorHandler`](../type-aliases/RenderErrorHandler.md)                                             | Unified error handler for component render errors and action handler rejections. Matches `RenderErrorHandler = (error: unknown, name: string) => void`. Invoked for three distinct error classes: - `(error, elementType)` — when a component renderer throws synchronously during `renderSpec` - `(error, actionName)` — when an action handler rejects during `emit()` (on-event path) - `(error, actionName)` — when an action handler rejects during a `watch` binding callback When provided, suppresses the `console.error` fallback for all three error types. Forwarded into `renderSpec` as the `onRenderError` parameter and into `DomRenderContext.onRenderError` so both `emit()` and `watch` handlers route their errors through the same channel as component render errors. **Example** `renderSpec(spec, store, registry, { onRenderError: (err, name) => { myErrorReporter.capture(err, { context: name }); }, });`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | [`UIProviderOptions`](UIProviderOptions.md).[`onRenderError`](UIProviderOptions.md#property-onrendererror)             | -                                                                                                                                  |
+| <a id="property-validationfunctions"></a> `validationFunctions?` | `Record`\<`string`, (`value`, `args?`) => `boolean`\>                                                     | Custom validation functions for inline field validation. Each function receives `(value, args?)` and returns `true` (valid) or `false` (invalid). Functions are available to component implementations via `ctx.ctx.validationFunctions` and should be passed as `customFunctions` to `runValidationCheck` / `runValidation` from `@xmachines/json-render-core`. Mirrors `customFunctions` in `ValidationProvider` from the framework renderers. The DOM renderer has no automatic `ValidationProvider` tree — validation must be invoked explicitly by component implementations. **Example** `import { runValidationCheck } from "@xmachines/json-render-core"; renderSpec(spec, store, registry, { validationFunctions: { isEven: (value) => typeof value === "number" && value % 2 === 0, phoneNumber: (value) => /^\+?[\d\s\-()]{7,}$/.test(String(value)), }, }); // Inside a ComponentFn: const MyField: ComponentFn<typeof catalog, "MyField"> = ({ ctx }) => { const result = runValidationCheck( { type: "isEven", message: "must be even" }, { value: someValue, stateModel: {}, customFunctions: ctx.ctx.validationFunctions }, ); // result.valid, result.message };`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | [`UIProviderOptions`](UIProviderOptions.md).[`validationFunctions`](UIProviderOptions.md#property-validationfunctions) | -                                                                                                                                  |

package/api/@xmachines/play-dom/interfaces/DomRenderContext.md

@@ -18,8 +18,8 @@ Low-level render context passed to each `DomComponentRenderer`.
 | <a id="property-navigate"></a> `navigate?`                       | (`path`) => `void`                                            | Navigation function forwarded from `UIProviderOptions`. Called when an action binding has `onSuccess: { navigate: "/path" }`. Mirrors the `navigate` prop in `ActionProvider` from framework renderers.                                                                                                                                                                                                                                                                                                                                               | -          |
 | <a id="property-onconfirm"></a> `onConfirm?`                     | [`ConfirmHandler`](../type-aliases/ConfirmHandler.md)         | Confirmation hook forwarded from `UIProviderOptions.onConfirm`. Consulted by `emit()` before executing an action binding that declares `confirm`. When absent, confirm-gated actions are skipped with a `console.warn` instead of executing unconfirmed.                                                                                                                                                                                                                                                                                              | -          |
 | <a id="property-onrendererror"></a> `onRenderError?`             | [`RenderErrorHandler`](../type-aliases/RenderErrorHandler.md) | Error handler forwarded from `UIProviderOptions.onRenderError`. Matches `RenderErrorHandler = (error: unknown, name: string) => void`. Called by `emit()` when an action handler rejects, with `(error, actionName)`. Also called by `renderSpec` when a component renderer throws, with `(error, elementType)`. When absent, both fall back to `console.error`. Component implementations may call this directly via `ctx.ctx.onRenderError` to surface errors through the application's central error channel.                                      | -          |
-| <a id="property-renderchildren"></a> `renderChildren`            | (`keys`) => `Node`[]                                          | Render a list of child element keys into DOM nodes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -          |
-| <a id="property-renderslot"></a> `renderSlot`                    | (`slotName`) => `Node`[]                                      | Render the children the element placed in a named slot (`element.slots`). Returns `[]` for a slot the element does not fill. Slot children render with the enclosing repeat scope, not once per item of this element's own `repeat`.                                                                                                                                                                                                                                                                                                                  | -          |
+| <a id="property-renderchildren"></a> `renderChildren`            | (`keys`) => `Node`[]                                          | Render a list of child element keys into DOM nodes. In the incremental renderer, a node can be the node of an earlier render: a child whose subtree did not change keeps it. This occurs in a `setSpec` pass, and when the array of a `repeat` grows or shrinks. Do not add a listener or a child node to a returned node, because a kept node then receives it again. Put such decoration on a wrapper node.                                                                                                                                         | -          |
+| <a id="property-renderslot"></a> `renderSlot`                    | (`slotName`) => `Node`[]                                      | Render the children the element placed in a named slot (`element.slots`). Returns `[]` for a slot the element does not fill. Slot children render with the enclosing repeat scope, not once per item of this element's own `repeat`. As for [DomRenderContext.renderChildren](#property-renderchildren), a returned node can be the node of an earlier render.                                                                                                                                                                                        | -          |
 | <a id="property-repeatbasepath"></a> `repeatBasePath?`           | `string`                                                      | Absolute JSON Pointer path to the current repeat item (e.g. "/todos/0"). Mirrors `repeatBasePath` in `PropResolutionContext`.                                                                                                                                                                                                                                                                                                                                                                                                                         | -          |
 | <a id="property-repeatindex"></a> `repeatIndex?`                 | `number`                                                      | Current repeat array index when inside a repeat scope. Mirrors `repeatIndex` in `PropResolutionContext`.                                                                                                                                                                                                                                                                                                                                                                                                                                              | -          |
 | <a id="property-repeatitem"></a> `repeatItem?`                   | `unknown`                                                     | Current repeat item when inside a repeat scope. Mirrors `repeatItem` in `@xmachines/json-render-core`'s `PropResolutionContext`.                                                                                                                                                                                                                                                                                                                                                                                                                      | -          |

package/api/@xmachines/play-dom/interfaces/MountOptions.md

@@ -2,7 +2,7 @@
 
 # Interface: MountOptions
 
-Defined in: [packages/play-dom/src/create-play-ui.ts:50](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.2/packages/play-dom/src/create-play-ui.ts#L50)
+Defined in: [packages/play-dom/src/create-play-ui.ts:49](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-dom/src/create-play-ui.ts#L49)
 
 The mount options of the `MountFn` that `createPlayUI` returns.
 
@@ -15,5 +15,5 @@ time.
 
 | Property                                 | Type         | Description                                                                                                                                                                              | Defined in                                                                                                                                         |
 | ---------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| <a id="property-loading"></a> `loading?` | `boolean`    | With the value `true`, the renderer stops each warning about an absent child during the ingestion of a streaming spec. It also gives `ctx.ctx.loading` to each component implementation. | [packages/play-dom/src/create-play-ui.ts:62](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.2/packages/play-dom/src/create-play-ui.ts#L62) |
-| <a id="property-store"></a> `store?`     | `StateStore` | The optional external `StateStore`, which is the controlled mode. Without it, the renderer makes a new `@xstate/store` atom for each view transition, with the values of `spec.state`.   | [packages/play-dom/src/create-play-ui.ts:56](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v5.0.2/packages/play-dom/src/create-play-ui.ts#L56) |
+| <a id="property-loading"></a> `loading?` | `boolean`    | With the value `true`, the renderer stops each warning about an absent child during the ingestion of a streaming spec. It also gives `ctx.ctx.loading` to each component implementation. | [packages/play-dom/src/create-play-ui.ts:61](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-dom/src/create-play-ui.ts#L61) |
+| <a id="property-store"></a> `store?`     | `StateStore` | The optional external `StateStore`, which is the controlled mode. Without it, the renderer makes a new `@xstate/store` atom for each view transition, with the values of `spec.state`.   | [packages/play-dom/src/create-play-ui.ts:55](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-dom/src/create-play-ui.ts#L55) |