@xmachines/docs 6.1.0 → 8.0.0-next.1

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

@@ -2,14 +2,14 @@
 
 # Interface: PlayDomOptions
 
-Defined in: [packages/play-dom/src/types.ts:23](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-dom/src/types.ts#L23)
+Defined in: [packages/play-dom/src/types.ts:23](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-dom/src/types.ts#L23)
 
 The options of `PlayRenderer`.
 
 This type extends [UIProviderOptions](UIProviderOptions.md), which gives `functions`,
-`directives`, `validationFunctions`, `navigate`, and `onRenderError`. Each render
-pass puts all of them into `DomRenderContext`, and a component implementation
-reads them at `ctx.ctx.*`.
+`directives`, `validationFunctions`, `navigate`, `onRenderError`, `onConfirm`, and
+`confirmDialog`. Each render pass puts them into `DomRenderContext`, and a component
+implementation reads them at `ctx.ctx.*`.
 
 ## Extends
 
@@ -17,16 +17,17 @@ reads them at `ctx.ctx.*`.
 
 ## 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 element that the renderer shows when `currentView` is `null`, and after a failure of a rebuild that it contains. The renderer shows it for EVERY null view, and not for the first mount only: a view that returns to `null` after a view that was not `null` also shows it. The four framework providers hold the same rule for their placeholder content. The renderer shows it after a failure of a rebuild too. This option turns nothing on: the renderer contains such a failure always, and this option says only what the empty container shows. The next view that renders clears the container, which removes the element. **One element belongs to one renderer.** `appendChild` MOVES a node. Two renderers that hold the same element therefore take it from each other on every null view, and the container of the first one goes empty without a notice. Build one element for each `PlayRenderer`. A FUNCTION also works here. The renderer calls it at the first moment that it needs the element, and it keeps the result, so a renderer whose view is never null builds nothing. [CreatePlayUIOptions.fallback](CreatePlayUIOptions.md#property-fallback) passes such a function for each mount. A producer that THROWS is contained on BOTH paths — a null view, and a rebuild that failed — and the renderer writes it to `console.error` and NOT to [PlayDomOptions.onError](#property-onerror). On the second path the renderer calls the producer from inside the containment of the view, and a second trip through `onError` would report the failure of the fallback as a failure of the view. The container stays empty.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                                                                                                                      | [packages/play-dom/src/types.ts:132](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-dom/src/types.ts#L132) |
-| <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-loading"></a> `loading?`                         | `boolean`                                                                                                 | With the value `true`, the spec is still streaming, for example from an AI provider. The renderer gives the flag to `renderSpec`. A component implementation therefore reads `ctx.ctx.loading`, and it can render a skeleton state. The flag also stops each warning about an absent child during the ingestion of the stream, because an element of a reference can still be absent from the incremental spec. This option matches the `loading` prop of the framework renderer providers.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                                                                                      | [packages/play-dom/src/types.ts:54](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-dom/src/types.ts#L54)   |
-| <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. | -                                                                                                                      | [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-registryresult"></a> `registryResult?`           | [`DefineRegistryResult`](DefineRegistryResult.md)                                                         | The result of `defineRegistry`. It gives the registry and the factory of the handlers. With this option, `PlayRenderer` connects `setState` and `getState` of the `StateStore` on @xstate/store to the factory of the handlers for you. This is the preferred way, because each action then always receives a live `setState` and a live `state` on the current store.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                                                                                                                      | [packages/play-dom/src/types.ts:32](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-dom/src/types.ts#L32)   |
-| <a id="property-store"></a> `store?`                             | `StateStore`                                                                                              | The optional external StateStore, for example from `xstateStoreStateStore` in @xmachines/json-render-xstate. With this option, `PlayRenderer` works in the controlled mode: it ignores `spec.state`, and this store is the single source of truth of the UI state, such as a form value. Without this option, the renderer makes a new `@xstate/store` atom for each view transition, with the values of `spec.state`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                                                                                                                      | [packages/play-dom/src/types.ts:42](https://gitlab.com/xmachin-es/xmachines-js/-/blob/v6.1.0/packages/play-dom/src/types.ts#L42)   |
-| <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-confirmdialog"></a> `confirmDialog?`             | `boolean`                                                                                                 | `false` turns the default confirm dialog off, for a host whose component shows the pending confirmation through `ctx.confirmation`. Without `onConfirm`, the default (`true`) shows the dialog on `document.body` for each binding with `confirm` that waits.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | [`UIProviderOptions`](UIProviderOptions.md).[`confirmDialog`](UIProviderOptions.md#property-confirmdialog)             | -                                                                                                                                              |
+| <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 element that the renderer shows when `currentView` is `null`, and after a failure of a rebuild that it contains. The renderer shows it for EVERY null view, and not for the first mount only: a view that returns to `null` after a view that was not `null` also shows it. The four framework providers hold the same rule for their placeholder content. The renderer shows it after a failure of a rebuild too. This option turns nothing on: the renderer contains such a failure always, and this option says only what the empty container shows. The next view that renders clears the container, which removes the element. **One element belongs to one renderer.** `appendChild` MOVES a node. Two renderers that hold the same element therefore take it from each other on every null view, and the container of the first one goes empty without a notice. Build one element for each `PlayRenderer`. A FUNCTION also works here. The renderer calls it at the first moment that it needs the element, and it keeps the result, so a renderer whose view is never null builds nothing. [CreatePlayUIOptions.fallback](CreatePlayUIOptions.md#property-fallback) passes such a function for each mount. A producer that THROWS is contained on BOTH paths — a null view, and a rebuild that failed — and the renderer writes it to `console.error` and NOT to [PlayDomOptions.onError](#property-onerror). On the second path the renderer calls the producer from inside the containment of the view, and a second trip through `onError` would report the failure of the fallback as a failure of the view. The container stays empty.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -                                                                                                                      | [packages/play-dom/src/types.ts:136](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-dom/src/types.ts#L136) |
+| <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-loading"></a> `loading?`                         | `boolean`                                                                                                 | With the value `true`, the spec is still streaming, for example from an AI provider. The renderer gives the flag to `renderSpec`. A component implementation therefore reads `ctx.ctx.loading`, and it can render a skeleton state. The flag also stops each warning about an absent child during the ingestion of the stream, because an element of a reference can still be absent from the incremental spec. This option matches the `loading` prop of the framework renderer providers.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -                                                                                                                      | [packages/play-dom/src/types.ts:54](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-dom/src/types.ts#L54)   |
+| <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, the binding waits as the pending confirmation of the tree (`ctx.confirmation`), and the default confirm dialog shows it. See [ConfirmHandler](../type-aliases/ConfirmHandler.md) for the full contract.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | [`UIProviderOptions`](UIProviderOptions.md).[`onConfirm`](UIProviderOptions.md#property-onconfirm)                     | -                                                                                                                                              |
+| <a id="property-onerror"></a> `onError?`                         | (`error`, `reset`) => `void`                                                                              | The optional handler of a failure of the view: a failure of the root, or of a complete rebuild. This option is NOT the same as `onRenderError`, which [UIProviderOptions](UIProviderOptions.md) gives: the inner renderer routes a render error of one component below the root, and a rejection of one action handler, to `onRenderError`. It contains each of them per element, and the rest of the view stays. `onError` receives a failure that leaves no view: the component, a prop, or the `visible` condition of the ROOT throws, or the resolution of the store of the view throws. The inner renderer also gives a failure of the root to `onRenderError`, with `info.kind` `"root"`. The renderer CONTAINS such a failure, 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 inner renderer shows the write at its commit point, a microtask after the write, and it resolves the props of every element that the write touched there. A `$computed` function of the root that throws on the new state fails the root. 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. | -                                                                                                                      | [packages/play-dom/src/types.ts:104](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-dom/src/types.ts#L104) |
+| <a id="property-onrendererror"></a> `onRenderError?`             | [`OnRenderError`](../type-aliases/OnRenderError.md)                                                       | Unified error handler, `(error, name, info)`, for every failure in code that the renderer runs. Each failure reaches it one time: - `info.kind` `"element"` — a component renderer below the root throws, an effect of it throws, or a read of its children after the pass fails - `"props"` / `"visible"` — a prop expression or the `visible` condition of an element throws; the boundary of the parent fails - `"root"` — the root fails (its component, a prop, or its `visible` condition); it has no boundary above it. The renderer shows nothing and throws nothing, also without a handler. A new version of the root renders again - `"action"` / `"watch"` — an `on` chain or a `watch` chain fails `name` is the element type (for `props` and `visible`, the type of the boundary that fails), or the action name for `action` and `watch`. `info.key`, `info.type` and `info.action` name the element and the action. A handler with two parameters still works. When provided, suppresses the `console.error` fallback for each of them. Without it, the renderer reads the handler that `defineRegistry(catalog, { onRenderError })` put on the registry, and then writes one `[json-render]` console line. A handler that throws gives its error to `reportError` one time, and no other element fails. 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, info) => { myErrorReporter.capture(err, { context: name, ...info }); }, });`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | [`UIProviderOptions`](UIProviderOptions.md).[`onRenderError`](UIProviderOptions.md#property-onrendererror)             | -                                                                                                                                              |
+| <a id="property-registryresult"></a> `registryResult?`           | [`DefineRegistryResult`](DefineRegistryResult.md)                                                         | The result of `defineRegistry`. It gives the registry and the factory of the handlers. With this option, `PlayRenderer` connects `setState` and `getState` of the `StateStore` on @xstate/store to the factory of the handlers for you. This is the preferred way, because each action then always receives a live `setState` and a live `state` on the current store.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                                                                                                                      | [packages/play-dom/src/types.ts:32](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-dom/src/types.ts#L32)   |
+| <a id="property-store"></a> `store?`                             | `StateStore`                                                                                              | The optional external StateStore, for example from `xstateStoreStateStore` in @xmachines/json-render-xstate. With this option, `PlayRenderer` works in the controlled mode: it ignores `spec.state`, and this store is the single source of truth of the UI state, such as a form value. Without this option, the renderer makes a new `@xstate/store` atom for each view transition, with the values of `spec.state`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -                                                                                                                      | [packages/play-dom/src/types.ts:42](https://gitlab.com/xmachin-es/xmachines-js/-/blob/docs-v8.0.0-next.1/packages/play-dom/src/types.ts#L42)   |
+| <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/RenderErrorInfo.md

@@ -0,0 +1,16 @@
+[API](../../../README.md) / [@xmachines/play-dom](../README.md) / RenderErrorInfo
+
+# Interface: RenderErrorInfo
+
+Defined in: `@xmachines/json-render-core`
+
+What a renderer tells the handler about a failure.
+
+## Properties
+
+| Property                               | Type                                                    | Description                                                                                       | Defined in |
+| -------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------- |
+| <a id="property-action"></a> `action?` | `string`                                                | The action name, for `action` and `watch`.                                                        | -          |
+| <a id="property-key"></a> `key?`       | `string`                                                | The key of the element whose code failed. For `props` and `visible`, the child, not the boundary. | -          |
+| <a id="property-kind"></a> `kind`      | [`RenderErrorKind`](../type-aliases/RenderErrorKind.md) | The place where the failure occurred.                                                             | -          |
+| <a id="property-type"></a> `type?`     | `string`                                                | The component type of that element.                                                               | -          |

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

@@ -11,18 +11,20 @@ empty map, so `renderSpec(spec, store, registry)` renders a static tree.
 
 ## Properties
 
-| Property                                                         | Type                                                                                                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | 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. Converted to a `DirectiveRegistry` once per `renderSpec` call and forwarded to `PropResolutionContext.directives`, matching the framework renderers' `directives` prop (@json-render 0.19). Built-in expressions always take precedence over custom directives.                                                                                                                                                                                                                                                | -          |
-| <a id="property-fallback"></a> `fallback?`                       | [`DomComponentRenderer`](../type-aliases/DomComponentRenderer.md)                                         | Renderer called when `registry` has no entry for an element's `type` (GAP-04). If absent, unknown types render as `null`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -          |
-| <a id="property-functions"></a> `functions?`                     | `Record`\<`string`, `ComputedFunction`\>                                                                  | Map of named compute functions forwarded to `PropResolutionContext` (GAP-03). Enables `{ $computed: "fn", args }` prop expressions to resolve. When absent, `$computed` expressions return `undefined` (no throw).                                                                                                                                                                                                                                                                                                                                                                                                    | -          |
-| <a id="property-handlers"></a> `handlers?`                       | `Record`\<`string`, `ActionHandler`\>                                                                     | Map of catalog action names → async `ActionHandler` functions, consumed by `defineRegistry`'s `emit()`/`watch` dispatch. Defaults to `{}`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -          |
-| <a id="property-loading"></a> `loading?`                         | `boolean`                                                                                                 | Flag indicating the spec is still streaming (GAP-06). When `true`, components can read `ctx.loading` to render skeleton states, and missing-child warnings (GAP-07) are suppressed since referenced elements may not yet have arrived in the incremental spec.                                                                                                                                                                                                                                                                                                                                                        | -          |
-| <a id="property-navigate"></a> `navigate?`                       | (`path`) => `void`                                                                                        | Navigation callback forwarded to `DomRenderContext.navigate`. Invoked automatically by `defineRegistry`'s `emit()` when an action binding resolves with `onSuccess: { navigate: "/path" }`. Also readable by component implementations via `ctx.navigate`.                                                                                                                                                                                                                                                                                                                                                            | -          |
-| <a id="property-onconfirm"></a> `onConfirm?`                     | [`ConfirmHandler`](../type-aliases/ConfirmHandler.md)                                                     | Confirmation hook forwarded to `DomRenderContext.onConfirm`. Consulted by `defineRegistry`'s `emit()` before executing an action binding that declares `confirm`. Without it, confirm-gated actions are skipped with a `console.warn` (never executed unconfirmed).                                                                                                                                                                                                                                                                                                                                                   | -          |
-| <a id="property-onrendererror"></a> `onRenderError?`             | [`RenderErrorHandler`](../type-aliases/RenderErrorHandler.md)                                             | Callback matching `RenderErrorHandler = (error, name)`. Invoked for three distinct error classes: - `(error, elementType)` when a component renderer throws (GAP-08) - `(error, actionName)` when an action handler rejects during `emit()` - `(error, actionName)` when an action handler rejects in a `watch` binding If absent, all three fall back to `console.error`. Forwarded into `DomRenderContext.onRenderError` so `emit()` and `watch` handlers route errors through the same channel as component render errors.                                                                                         | -          |
-| <a id="property-onvalidationsetup"></a> `onValidationSetup?`     | (`cleanup`) => `void`                                                                                     | Called with an unregister callback for every field an element registers through `ctx.validation.registerField`, so a host can release the registrations of an element instance when it unmounts. Mirrors `onWatchSetup`.                                                                                                                                                                                                                                                                                                                                                                                              | -          |
-| <a id="property-onwatchsetup"></a> `onWatchSetup?`               | (`cleanup`) => `void` \| (() => `void`)                                                                   | Callback invoked with each watch subscription cleanup function (GAP-02). When an element declares `watch`, the renderer sets up a store subscription and passes its unsubscribe function to this callback. Host renderers collect these to call on teardown. When absent, `watch` bindings are not wired. May return a replacement cleanup: when the caller wraps the supplied cleanup (e.g. to drop it from its own collection when invoked), the incremental renderer registers the returned wrapper so an unmount-driven release also runs the caller's bookkeeping. Returning nothing keeps the supplied cleanup. | -          |
-| <a id="property-send"></a> `send?`                               | (`event`) => `void`                                                                                       | Dispatcher for interaction events (e.g. `actor.send`), exposed to component implementations via `ctx.send`. Defaults to a no-op.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -          |
-| <a id="property-validation"></a> `validation?`                   | [`ValidationRegistry`](ValidationRegistry.md)                                                             | Field-validation registry shared by the whole tree, exposed to components as `ctx.validation` and used by the `validateForm` built-in. One is created per `renderSpec` call when omitted; a host that re-renders (e.g. the incremental renderer) must create one for its lifetime and pass it on every pass so registrations survive.                                                                                                                                                                                                                                                                                 | -          |
-| <a id="property-validationfunctions"></a> `validationFunctions?` | `Record`\<`string`, (`value`, `args?`) => `boolean`\>                                                     | Custom validation functions forwarded to `DomRenderContext.validationFunctions`. Components pass these as `customFunctions` to `runValidationCheck` / `runValidation` from `@xmachines/json-render-core`. Has no effect on prop resolution.                                                                                                                                                                                                                                                                                                                                                                           | -          |
+| Property                                                         | Type                                                                                                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Defined in |
+| ---------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- |
+| <a id="property-confirmdialog"></a> `confirmDialog?`             | `boolean`                                                                                                 | `false` turns the default confirm dialog off, for a host whose component shows the pending confirmation through `ctx.confirmation`. The default, `true`, shows the dialog on `document.body` for each binding with `confirm` that waits, when the host gives no `onConfirm`, as `JSONUIProvider` of the framework renderers shows `ConfirmDialog`. The renderers that share one validation registry share the setting: the last pass sets it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | -          |
+| <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. Converted to a `DirectiveRegistry` once per `renderSpec` call and forwarded to `PropResolutionContext.directives`, matching the framework renderers' `directives` prop (@json-render 0.19). Built-in expressions always take precedence over custom directives.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -          |
+| <a id="property-fallback"></a> `fallback?`                       | [`DomComponentRenderer`](../type-aliases/DomComponentRenderer.md)                                         | Renderer called when `registry` has no entry for an element's `type` (GAP-04). If absent, unknown types render as `null`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | -          |
+| <a id="property-functions"></a> `functions?`                     | `Record`\<`string`, `ComputedFunction`\>                                                                  | Map of named compute functions forwarded to `PropResolutionContext` (GAP-03). Enables `{ $computed: "fn", args }` prop expressions to resolve. When absent, `$computed` expressions return `undefined` (no throw).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | -          |
+| <a id="property-handlers"></a> `handlers?`                       | `Record`\<`string`, `ActionHandler`\>                                                                     | Map of catalog action names → async `ActionHandler` functions, consumed by `defineRegistry`'s `emit()`/`watch` dispatch. Defaults to `{}`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -          |
+| <a id="property-loading"></a> `loading?`                         | `boolean`                                                                                                 | Flag indicating the spec is still streaming (GAP-06). When `true`, components can read `ctx.loading` to render skeleton states, and missing-child warnings (GAP-07) are suppressed since referenced elements may not yet have arrived in the incremental spec.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -          |
+| <a id="property-navigate"></a> `navigate?`                       | (`path`) => `void`                                                                                        | Navigation callback forwarded to `DomRenderContext.navigate`. Invoked automatically by `defineRegistry`'s `emit()` when an action binding resolves with `onSuccess: { navigate: "/path" }`. Also readable by component implementations via `ctx.navigate`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -          |
+| <a id="property-onconfirm"></a> `onConfirm?`                     | [`ConfirmHandler`](../type-aliases/ConfirmHandler.md)                                                     | Confirmation hook forwarded to `DomRenderContext.onConfirm`. Consulted by `defineRegistry`'s `emit()` before executing an action binding that declares `confirm`. Without it, the binding waits as the pending confirmation of the tree (`ctx.confirmation`), and the default confirm dialog shows it (see `confirmDialog`).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | -          |
+| <a id="property-oneffectcleanup"></a> `onEffectCleanup?`         | (`cleanup`) => `void`                                                                                     | Called with each cleanup that an effect of a component returns (see `DomRenderContext.effect`). `renderSpec` keeps no instance from one call to the next, so the host calls each cleanup when it discards the tree. When absent, the renderer drops the cleanups. The incremental renderer runs the cleanups itself, and it ignores this option.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -          |
+| <a id="property-onrendererror"></a> `onRenderError?`             | [`OnRenderError`](../type-aliases/OnRenderError.md)                                                       | The error handler, `(error, name, info)`. Each failure in code that the renderer runs reaches it one time. `info.kind` names the place: - `element`, with `name` the type of the element: a component renderer below the root throws (GAP-08), an effect of it throws, or a read of its children after the pass fails. The element shows nothing. - `props` and `visible`, with `name` the type of the PARENT: a prop expression or the `visible` condition of an element below the root throws. The boundary of the parent catches it, as in the framework renderers, and the parent shows nothing. `info.key` and `info.type` name the element whose expression threw. - `root`: the root fails, and it has no boundary above it: its component throws, a prop of it fails to resolve, or its `visible` condition throws. The renderer shows nothing and throws nothing, also without a handler, so a root that a stream gives half does not stop the host. A new version of the root renders again. - `action` and `watch`, with `name` the action name: an `on` chain or a `watch` chain fails. A handler that throws gives its error to `reportError` one time, and no other element fails. If absent, the renderer reads the handler of the registry, which `defineRegistry(catalog, { onRenderError })` sets. Without either, each failure gives one `console.error` line of the form `[json-render] <kind> error in <Type> "<key>":`. Forwarded into `DomRenderContext.onRenderError` so `emit()` and `watch` handlers route errors through the same channel as component render errors. | -          |
+| <a id="property-onvalidationsetup"></a> `onValidationSetup?`     | (`cleanup`) => `void`                                                                                     | Called with an unregister callback for every field an element registers through `ctx.validation.registerField`, so a host can release the registrations of an element instance when it unmounts. Mirrors `onWatchSetup`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -          |
+| <a id="property-onwatchsetup"></a> `onWatchSetup?`               | (`cleanup`, `end`, `baseline`) => `void` \| (() => `void`)                                                | Callback invoked with each watch subscription cleanup function (GAP-02). When an element declares `watch`, the renderer sets up a store subscription and passes its unsubscribe function to this callback. Host renderers collect these to call on teardown. When absent, `watch` bindings are not wired. May return a replacement cleanup: when the caller wraps the supplied cleanup (e.g. to drop it from its own collection when invoked), the incremental renderer registers the returned wrapper so an unmount-driven release also runs the caller's bookkeeping. Returning nothing keeps the supplied cleanup. The cleanup stops the subscription, and the bindings that a change still runs go on. A host that renders the tree again on each change must do so after the store notification, for example in a microtask: each watch then hears the change before the host releases it. `end` stops the chain before its next binding, and a change that waits for its run. Call it when the element goes for good. The incremental renderer calls it for a removed element, for an element whose watched paths or item path a new render changes, after a pass that throws, and on `dispose`. `baseline` reads and sets the watched values that the next change compares against. The incremental renderer gives the values of an earlier subscription of the element to its new one, so a write that came before a new spec still fires, as the effect of react compares against the values of its last run.                                                                           | -          |
+| <a id="property-send"></a> `send?`                               | (`event`) => `void`                                                                                       | Dispatcher for interaction events (e.g. `actor.send`), exposed to component implementations via `ctx.send`. Defaults to a no-op.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | -          |
+| <a id="property-validation"></a> `validation?`                   | [`ValidationRegistry`](ValidationRegistry.md)                                                             | Field-validation registry shared by the whole tree, exposed to components as `ctx.validation` and used by the `validateForm` built-in. One is created per `renderSpec` call when omitted; a host that re-renders (e.g. the incremental renderer) must create one for its lifetime and pass it on every pass so registrations survive.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | -          |
+| <a id="property-validationfunctions"></a> `validationFunctions?` | `Record`\<`string`, (`value`, `args?`) => `boolean`\>                                                     | Custom validation functions forwarded to `DomRenderContext.validationFunctions`. Components pass these as `customFunctions` to `runValidationCheck` / `runValidation` from `@xmachines/json-render-core`. Has no effect on prop resolution.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -          |

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

@@ -22,11 +22,12 @@ and are available to component implementations via `ctx.ctx.*`.
 
 ## Properties
 
-| Property                                                         | Type                                                                                                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | 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] });`                     | -          |
-| <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`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | -          |
-| <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" } } } }`                                                                                                                                                                                                                                                                                                                                                                                                                  | -          |
-| <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.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | -          |
-| <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 }); }, });`                                                                                                                                                                                                                                               | -          |
-| <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 };` | -          |
+| Property                                                         | Type                                                                                                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Defined in |
+| ---------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
+| <a id="property-confirmdialog"></a> `confirmDialog?`             | `boolean`                                                                                                 | `false` turns the default confirm dialog off, for a host whose component shows the pending confirmation through `ctx.confirmation`. Without `onConfirm`, the default (`true`) shows the dialog on `document.body` for each binding with `confirm` that waits.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | -          |
+| <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] });`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | -          |
+| <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`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | -          |
+| <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" } } } }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | -          |
+| <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, the binding waits as the pending confirmation of the tree (`ctx.confirmation`), and the default confirm dialog shows it. See [ConfirmHandler](../type-aliases/ConfirmHandler.md) for the full contract.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | -          |
+| <a id="property-onrendererror"></a> `onRenderError?`             | [`OnRenderError`](../type-aliases/OnRenderError.md)                                                       | Unified error handler, `(error, name, info)`, for every failure in code that the renderer runs. Each failure reaches it one time: - `info.kind` `"element"` — a component renderer below the root throws, an effect of it throws, or a read of its children after the pass fails - `"props"` / `"visible"` — a prop expression or the `visible` condition of an element throws; the boundary of the parent fails - `"root"` — the root fails (its component, a prop, or its `visible` condition); it has no boundary above it. The renderer shows nothing and throws nothing, also without a handler. A new version of the root renders again - `"action"` / `"watch"` — an `on` chain or a `watch` chain fails `name` is the element type (for `props` and `visible`, the type of the boundary that fails), or the action name for `action` and `watch`. `info.key`, `info.type` and `info.action` name the element and the action. A handler with two parameters still works. When provided, suppresses the `console.error` fallback for each of them. Without it, the renderer reads the handler that `defineRegistry(catalog, { onRenderError })` put on the registry, and then writes one `[json-render]` console line. A handler that throws gives its error to `reportError` one time, and no other element fails. 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, info) => { myErrorReporter.capture(err, { context: name, ...info }); }, });` | -          |
+| <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 };`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | -          |