@xmachines/play-vue 1.0.0-beta.9 → 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mikael Karon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,280 +1,207 @@
-# @xmachines/play-vue
+# `@xmachines/play-vue`
 
-**Vue renderer consuming signals and UI schema with provider pattern**
+> Vue 3 renderer for the XMachines Play Architecture — passively observes actor signals and renders UI via `@xmachines/json-render-vue`.
 
-Signal-driven Vue rendering layer observing actor state with zero Vue state for business logic.
+Part of the [XMachines Play monorepo](../../README.md).
 
-## Overview
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Version](https://img.shields.io/badge/version-1.1.0-blue)](https://www.npmjs.com/package/@xmachines/play-vue)
+
+---
 
-`@xmachines/play-vue` provides `PlayRenderer` for building Vue 3 UIs that passively observe actor signals. This package enables framework-swappable architecture where Vue is just a rendering target subscribing to signal changes — business logic lives entirely in the actor.
+## Overview
 
-Per [RFC Play v1](https://gitlab.com/xmachin-es/rfc/-/blob/main/src/play-v1.md), this package implements:
+`@xmachines/play-vue` is the Vue 3 rendering layer for XMachines Play. It bridges TC39 Signals (actor state) to Vue reactivity and drives component rendering through `@xmachines/json-render-vue`.
 
-- **Signal-Only Reactivity (INV-05):** No refs/reactive for business logic, TC39 signals only
-- **Passive Infrastructure (INV-04):** Components observe signals, send events to actor
+**Architecture invariants this package upholds:**
 
-**Key Principle:** Vue state is never used for business logic. Signals are the source of truth.
+- **Passive Infrastructure** — Components observe actor signals; they never decide state transitions.
+- **Signal-Only Reactivity** — TC39 Signals are the source of truth; Vue reactivity is used only to trigger re-renders.
+- **Actor Authority** — The actor controls view selection; the renderer reflects it.
 
-Renderer receives actor via props (provider pattern), not children.
+---
 
 ## Installation
 
 ```bash
-npm install vue@^3.5.0
-npm install @xmachines/play-vue
+pnpm add @xmachines/play-vue
 ```
 
-## Current Exports
-
-- `PlayRenderer` (Vue component)
-- `PlayRendererProps` (TypeScript interface)
+**Peer dependencies** (install alongside):
 
-**Peer dependencies:**
+```bash
+pnpm add vue@^3.5.0 xstate@^5.31.0 @xstate/store@^3.17.0 @xmachines/json-render-vue@^0.18.0 @xmachines/json-render-core@^0.18.0 @xmachines/json-render-xstate@^0.18.0
+```
 
-- `vue` ^3.5.0 — Vue 3 runtime
+---
 
 ## Quick Start
 
 ```vue
 <!-- App.vue -->
+<template>
+	<PlayUIProvider :actor="actor" :registryResult="registryResult">
+		<PlayRenderer />
+	</PlayUIProvider>
+</template>
+
 <script setup lang="ts">
+import { defineRegistry, PlayUIProvider, PlayRenderer } from "@xmachines/play-vue";
 import { definePlayer } from "@xmachines/play-xstate";
-import { defineCatalog } from "@xmachines/play-catalog";
-import { PlayRenderer } from "@xmachines/play-vue";
-import { z } from "zod";
-import LoginForm from "./components/LoginForm.vue";
-import Dashboard from "./components/Dashboard.vue";
-
-// 1. Define catalog (business logic layer)
-const catalog = defineCatalog({
-	LoginForm: z.object({ error: z.string().optional() }),
-	Dashboard: z.object({
-		userId: z.string(),
-		username: z.string(),
-	}),
-});
+import { myMachine } from "./machine.js";
+import { myCatalog } from "./catalog.js";
+import HomeSFC from "./views/Home.vue";
+import LoginSFC from "./views/Login.vue";
 
-// 2. Define component map (view layer)
-const components = {
-	LoginForm,
-	Dashboard,
-};
-
-// 3. Create player actor (business logic runtime)
-const createPlayer = definePlayer({ machine: authMachine, catalog });
+const createPlayer = definePlayer({ machine: myMachine });
 const actor = createPlayer();
 actor.start();
-</script>
 
-<template>
-	<!-- 4. Render UI (actor via props) -->
-	<PlayRenderer :actor="actor" :components="components">
-		<template #fallback>
-			<div>Loading...</div>
-		</template>
-	</PlayRenderer>
-</template>
+const registryResult = defineRegistry(myCatalog, {
+	components: {
+		Home: HomeSFC, // .vue SFCs are auto-wrapped
+		Login: LoginSFC,
+	},
+	actions: {
+		login: async (args) => actor.send({ type: "auth.login", ...args }),
+		logout: async () => actor.send({ type: "auth.logout" }),
+	},
+});
+</script>
 ```
 
-## API Reference
+---
 
-### PlayRenderer
+## API Summary
 
-Main renderer component subscribing to actor signals and dynamically rendering catalog components:
+### Components
 
-```typescript
-interface PlayRendererProps {
-	actor: AbstractActor<any>;
-	components: Record<string, Component>;
-}
-```
+#### `<PlayUIProvider>`
 
-**Props:**
+Batteries-included composite provider. Wraps `<ActorProvider>` and `JSONUIProvider` in one component. **Recommended for most apps.**
 
-- `actor` - Actor instance with `currentView` signal
-- `components` - Map of component names to Vue components
+| Prop                  | Type                       | Required | Description                                 |
+| --------------------- | -------------------------- | -------- | ------------------------------------------- |
+| `actor`               | `AbstractActor & Viewable` | ✅       | The XMachines actor instance                |
+| `registryResult`      | `DefineRegistryResult`     | ✅       | Result of `defineRegistry()`                |
+| `store`               | `StateStore`               | —        | External controlled state store (optional)  |
+| `onRenderError`       | `RenderErrorHandler`       | —        | Error handler for render failures           |
+| `navigate`            | `(path: string) => void`   | —        | Link navigation function                    |
+| `validationFunctions` | `Record<string, Function>` | —        | Custom validation functions                 |
+| `functions`           | `Record<string, Function>` | —        | Named functions for `$computed` expressions |
 
-**Slots:**
+**Slots:** `default` (rendered content), `fallback` (shown while actor view is `null`)
 
-- `fallback` - Slot shown when `currentView` is null
+#### `<PlayRenderer>`
 
-**Behavior:**
+Zero-prop leaf component. Reads the current `spec` and `registry` from the nearest `<ActorProvider>` or `<PlayUIProvider>` context and renders via `<Renderer>`. Must be placed inside one of those providers.
 
-1. Subscribes to `actor.currentView` signal using a `Signal.subtle.Watcher` inside a Vue component
-2. Looks up component from `components` map using `view.component` string
-3. Renders component with props from `view.props` + `send` function via Vue's dynamic `<component :is="..."/>`
+```vue
+<PlayUIProvider :actor="actor" :registryResult="registryResult">
+  <PlayRenderer />
+</PlayUIProvider>
+```
 
-**Example Component (LoginForm.vue):**
+#### `<ActorProvider>`
 
-```vue
-<script setup lang="ts">
-import type { AbstractActor } from "@xmachines/play-actor";
-import { ref } from "vue";
-
-const props = defineProps<{
-	error?: string;
-	send: AbstractActor<any>["send"];
-}>();
-
-const username = ref("");
-
-function handleSubmit() {
-	props.send({
-		type: "auth.login",
-		username: username.value,
-	});
-}
-</script>
+Low-level escape hatch for custom provider composition. Owns the full actor lifecycle — signal subscription, per-view state store, handler resolution, and Vue context provision. Use `<PlayUIProvider>` unless you need fine-grained control.
 
-<template>
-	<form @submit.prevent="handleSubmit">
-		<p v-if="error" style="color: red">{{ error }}</p>
-		<input v-model="username" required placeholder="Username" />
-		<button type="submit">Log In</button>
-	</form>
-</template>
-```
+| Prop             | Type                       | Required | Description                     |
+| ---------------- | -------------------------- | -------- | ------------------------------- |
+| `actor`          | `AbstractActor & Viewable` | ✅       | The XMachines actor instance    |
+| `registryResult` | `DefineRegistryResult`     | ✅       | Result of `defineRegistry()`    |
+| `store`          | `StateStore`               | —        | External controlled state store |
+| `onRenderError`  | `RenderErrorHandler`       | —        | Override render error handler   |
 
-## Examples
+---
 
-### Provider Pattern
+### Functions
 
-```vue
-<!-- App.vue -->
-<script setup lang="ts">
-import { PlayVueRouterProvider } from "@xmachines/play-vue-router";
-import { PlayRenderer } from "@xmachines/play-vue";
-import { provide } from "vue";
-import Header from "./components/Header.vue";
-import Footer from "./components/Footer.vue";
-
-// Provide actor to nested components like Header
-provide("actor", actor);
-</script>
+#### `defineRegistry(catalog, options)`
 
-<template>
-	<PlayVueRouterProvider :actor="actor" :router="router" :routeMap="routeMap">
-		<template #default="{ currentActor, currentRouter }">
-			<div>
-				<Header />
-				<PlayRenderer :actor="currentActor" :components="components" />
-				<Footer />
-			</div>
-		</template>
-	</PlayVueRouterProvider>
-</template>
-```
+Drop-in replacement for `defineRegistry` from `@xmachines/json-render-vue`. **Always import from `@xmachines/play-vue`** rather than `@xmachines/json-render-vue` when working with Vue SFCs — this wrapper automatically detects `.vue` SFCs in the `components` map and wraps them via `h()` so Vue composables (including `inject`-based ones) work correctly inside `<script setup>`.
 
-```vue
-<!-- Header.vue -->
-<script setup lang="ts">
-import { inject, ref, onMounted, onUnmounted } from "vue";
-import type { AbstractActor } from "@xmachines/play-actor";
-
-const actor = inject<AbstractActor<any>>("actor")!;
-const route = ref<string | null>(null);
-
-let watcher: any;
-
-onMounted(() => {
-	let pending = false;
-	watcher = new Signal.subtle.Watcher(() => {
-		if (!pending) {
-			pending = true;
-			queueMicrotask(() => {
-				pending = false;
-				for (const s of watcher.getPending()) s.get();
-				route.value = actor.currentRoute.get();
-				watcher.watch(actor.currentRoute);
-			});
-		}
-	});
-	route.value = actor.currentRoute.get();
-	watcher.watch(actor.currentRoute);
+```typescript
+import { defineRegistry } from "@xmachines/play-vue";
+// NOT: import { defineRegistry } from "@xmachines/json-render-vue"
+
+import LoginSFC from "./views/Login.vue";
+import DashboardSFC from "./views/Dashboard.vue";
+
+const registryResult = defineRegistry(catalog, {
+	components: {
+		Login: LoginSFC, // .vue SFC — auto-wrapped via h()
+		Dashboard: DashboardSFC,
+	},
+	actions: {
+		login: async (args, setState, getState) => {
+			/* ... */
+		},
+	},
 });
+```
 
-onUnmounted(() => {
-	if (watcher) watcher.unwatch(actor.currentRoute);
-});
-</script>
+Plain `ComponentFn` functions (non-SFC) also work and are passed through unchanged. Mixing SFCs and plain functions in the same registry is supported.
 
-<template>
-	<header>
-		<nav>Current: {{ route }}</nav>
-	</header>
-</template>
+#### `useActor()`
+
+Vue composable for accessing the raw actor inside a `PlayRenderer` tree. Avoids prop drilling for deeply nested components.
+
+```typescript
+import { useActor } from "@xmachines/play-vue";
+
+// Inside a component rendered by PlayRenderer:
+const actor = useActor();
+actor.send({ type: "SUBMIT" });
 ```
 
-## Architecture
+Throws if called outside an `<ActorProvider>` or `<PlayUIProvider>` tree.
 
-This package implements **Signal-Only Reactivity (INV-05)** and **Passive Infrastructure (INV-04)**:
+#### `getPlayViewContext()`
 
-1. **No Business Logic in Vue:**
-    - No ref/reactive for business state
-    - No watch/watchEffect for business side effects
-    - Vue only triggers renders, doesn't control state
+Access the current `ViewContextValue` — `{ spec, handlers, registry, store }` — from inside an `<ActorProvider>` tree.
 
-2. **Signals as Source of Truth:**
-    - `actor.currentView.get()` provides UI structure
-    - `actor.currentRoute.get()` provides navigation state
-    - Components observe signals via explicit watcher patterns
+```typescript
+import { getPlayViewContext } from "@xmachines/play-vue";
 
-3. **Event Forwarding:**
-    - Components receive `send` function via props
-    - User actions send events to actor (e.g., `{ type: "auth.login" }`)
-    - Actor guards validate and process events
+// Inside setup() of a component within an ActorProvider tree:
+const view = getPlayViewContext();
+// view.spec, view.handlers, view.registry, view.store
+```
 
-4. **Microtask Batching:**
-    - `Signal.subtle.Watcher` coalesces rapid signal changes
-    - Prevents Vue thrashing from multiple signal updates
-    - Single Vue render per microtask batch
+---
 
-5. **Explicit Disposal Contract:**
-    - Component teardown calls watcher `unwatch` in `onUnmounted`
-    - Do not rely on GC-only cleanup
+### Re-exported from `@xmachines/json-render-vue`
 
-**Pattern:**
+The following are re-exported so consumers import everything from `@xmachines/play-vue`:
 
-- Renderer receives actor via props (provider pattern)
-- Enables composition with navigation, headers, footers
-- Supports multiple renderers in same app
+**Components:** `JSONUIProvider`, `StateProvider`, `ActionProvider`, `VisibilityProvider`, `ValidationProvider`, `Renderer`
 
-**Architectural Invariants:**
+**Composables:** `useBoundProp`
 
-- **Signal-Only Reactivity (INV-05):** No Vue state for business logic
-- **Passive Infrastructure (INV-04):** Components reflect, never decide
+**Types:** `JSONUIProviderProps`, `StateProviderProps`, `ActionProviderProps`, `ValidationProviderProps`, `RendererProps`, `ComponentFn`, `ComponentContext`, `DefineRegistryResult`
 
-## Canonical Watcher Lifecycle
+---
 
-If you write your own custom integration, use the same watcher flow as `PlayRenderer`:
+## Testing
 
-1. `notify` callback runs
-2. Schedule work with `queueMicrotask`
-3. Drain `watcher.getPending()`
-4. Read actor signals and update Vue-local ref state
-5. Re-arm with `watch(...)` or `watch()`
+Run tests for this package in isolation:
 
-Watcher notify is one-shot. Re-arm is required for continuous observation.
+```bash
+# From the monorepo root
+pnpm --filter @xmachines/play-vue test
 
-## Benefits
+# Watch mode
+pnpm --filter @xmachines/play-vue run test:watch
 
-- **Framework Swappable:** Business logic has zero Vue imports
-- **Type Safety:** Props validated against catalog schemas
-- **Simple Testing:** Test actors without Vue renderer
-- **Performance:** Microtask batching reduces unnecessary renders
-- **Composability:** Renderer prop enables complex layouts
+# With coverage (80% threshold enforced on lines, functions, branches, statements)
+pnpm exec vitest run --coverage --config packages/play-vue/vitest.config.ts
+```
 
-## Related Packages
+Tests use [Vitest](https://vitest.dev/) with `jsdom` environment and `@vue/test-utils` for component mounting.
 
-- **[@xmachines/play-xstate](../play-xstate)** - XState adapter providing actors
-- **[@xmachines/play-catalog](../play-catalog)** - UI schema validation
-- **[@xmachines/play-vue-router](../play-vue-router)** - Vue Router integration
-- **[@xmachines/play-actor](../play-actor)** - Actor base
-- **[@xmachines/play-signals](../play-signals)** - TC39 Signals primitives
+---
 
 ## License
 
-Copyright (c) 2016 [Mikael Karon](mailto:mikael@karon.se). All rights reserved.
-
-This work is licensed under the terms of the MIT license.  
-For a copy, see <https://opensource.org/licenses/MIT>.
+MIT — see [LICENSE](LICENSE).

package/dist/actor-provider-context.d.ts

@@ -0,0 +1,40 @@
+/**
+ * ViewContextValue and getPlayViewContext — shared context types for Vue provider architecture.
+ *
+ * Extracted from ActorProvider.vue so TypeScript can re-export these types from index.ts.
+ * (The vue-shim.d.ts only declares a default export from *.vue files, so named exports
+ * from .vue SFCs are not visible to TypeScript's re-export resolution.)
+ *
+ * @packageDocumentation
+ */
+import type { InjectionKey } from "vue";
+import type { ComponentRegistry } from "@xmachines/json-render-vue";
+import type { BaseViewContextValue } from "@xmachines/play-actor";
+/**
+ * Context value provided by ActorProvider and consumed by PlayRenderer (zero-prop leaf).
+ * Accessible via getPlayViewContext() inside any ActorProvider/PlayUIProvider tree.
+ */
+export interface ViewContextValue extends BaseViewContextValue<ComponentRegistry> {
+}
+/**
+ * Injection key for the ViewContextValue. Exported so ActorProvider.vue can use it
+ * as the canonical key without re-declaring.
+ *
+ * @internal Use getPlayViewContext() as the public API; do not inject ViewKey directly.
+ */
+export declare const ViewKey: InjectionKey<ViewContextValue>;
+/**
+ * Access the current ViewContextValue from inside an ActorProvider tree.
+ *
+ * @throws {Error} If called outside an <ActorProvider> (or <PlayUIProvider>) tree
+ *
+ * @example
+ * ```typescript
+ * import { getPlayViewContext } from "@xmachines/play-vue";
+ *
+ * const view = getPlayViewContext();
+ * // view.spec, view.handlers, view.registry
+ * ```
+ */
+export declare function getPlayViewContext(): ViewContextValue;
+//# sourceMappingURL=actor-provider-context.d.ts.map

package/dist/actor-provider-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor-provider-context.d.ts","sourceRoot":"","sources":["../src/actor-provider-context.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAC;AAExC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAElE;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpF;;;;;GAKG;AACH,eAAO,MAAM,OAAO,EAAE,YAAY,CAAC,gBAAgB,CAA4B,CAAC;AAEhF;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,IAAI,gBAAgB,CAErD"}

package/dist/define-registry.d.ts

@@ -0,0 +1,79 @@
+/**
+ * `defineRegistry` wrapper for @xmachines/play-vue.
+ *
+ * Wraps `defineRegistry` from `@xmachines/json-render-vue` with automatic SFC support.
+ *
+ * ## Vue-specific — React and Solid do not need this
+ *
+ * In React, `useContext()` works anywhere inside the component call tree.
+ * In Solid, `useContext()` works inside reactive computations and component renders.
+ * Neither has the strict "synchronous setup() only" constraint that Vue's `inject()`
+ * imposes — so their `defineRegistry` implementations call `componentFn(ctx)` directly
+ * with no wrapping needed.
+ *
+ * For the DOM renderer, there is no component system at all — just render functions
+ * returning `HTMLElement` — so injection context is not applicable.
+ *
+ * Only Vue requires this adapter.
+ *
+ * ## Why this wrapper exists
+ *
+ * `@xmachines/json-render-vue`'s `defineRegistry` calls each registered component as a plain
+ * function: `componentFn(ctx)`. A `.vue` SFC (output of `defineComponent` or
+ * `<script setup>`) is an **object**, not a function — calling it throws.
+ *
+ * More fundamentally, `defineRegistry` calls components inside its own render
+ * function (the return value of `setup()`). Vue's `inject()` — and composables built
+ * on it: `useStateBinding`, `useStateStore` — only work during synchronous `setup()`
+ * execution, not inside render functions. Plain `.ts` `ComponentFn` files cannot
+ * call any Vue composable for this reason.
+ *
+ * This wrapper auto-detects Vue SFCs in the `components` map and wraps them via
+ * `h(SFC, ctx)`. The SFC renders as a child component with its own `setup()`,
+ * giving full access to composables inside `<script setup>`.
+ *
+ * ## Usage
+ *
+ * Import `defineRegistry` from `@xmachines/play-vue` instead of `@xmachines/json-render-vue`:
+ *
+ * ```ts
+ * import { defineRegistry } from "@xmachines/play-vue";
+ * // not: import { defineRegistry } from "@xmachines/json-render-vue";
+ *
+ * import LoginSFC from "./views/Login.vue";
+ * import DashboardSFC from "./views/Dashboard.vue";
+ *
+ * const { registry } = defineRegistry(catalog, {
+ *   components: {
+ *     Login: LoginSFC,       // .vue SFC — auto-wrapped
+ *     Dashboard: DashboardSFC, // .vue SFC — auto-wrapped
+ *   },
+ * });
+ * ```
+ *
+ * Plain `ComponentFn` functions still work and are passed through unchanged.
+ * Mixing SFCs and plain functions in the same registry is supported.
+ */
+import { type Component } from "vue";
+import { defineRegistry as defineRegistryBase, type ComponentFn } from "@xmachines/json-render-vue";
+import type { Catalog, InferCatalogComponents } from "@xmachines/json-render-core";
+export type ComponentEntry<C extends Catalog, K extends keyof InferCatalogComponents<C>> = ComponentFn<C, K> | Component;
+export type ComponentsMap<C extends Catalog> = {
+    [K in keyof InferCatalogComponents<C>]?: ComponentEntry<C, K>;
+};
+export type DefineRegistryOptions<C extends Catalog> = Omit<Parameters<typeof defineRegistryBase<C>>[1], "components"> & {
+    components?: ComponentsMap<C>;
+};
+/**
+ * Create a component registry, automatically wrapping `.vue` SFCs so they work
+ * correctly with `@xmachines/json-render-vue`'s rendering pipeline.
+ *
+ * Drop-in replacement for `defineRegistry` from `@xmachines/json-render-vue`. Import from
+ * `@xmachines/play-vue` to get SFC support for free.
+ *
+ * @param catalog - The json-render catalog defining component prop shapes.
+ * @param options - Registry options. `components` entries may be `.vue` SFCs
+ *   (objects) or plain `ComponentFn` functions — both are handled automatically.
+ */
+export declare function defineRegistry<C extends Catalog>(catalog: C, options: DefineRegistryOptions<C>): ReturnType<typeof defineRegistryBase<C>>;
+//# sourceMappingURL=define-registry.d.ts.map

package/dist/define-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-registry.d.ts","sourceRoot":"","sources":["../src/define-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AAEH,OAAO,EAAK,KAAK,SAAS,EAAE,MAAM,KAAK,CAAC;AACxC,OAAO,EACN,cAAc,IAAI,kBAAkB,EAEpC,KAAK,WAAW,EAEhB,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAwCnF,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,OAAO,EAAE,CAAC,SAAS,MAAM,sBAAsB,CAAC,CAAC,CAAC,IACpF,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,GACjB,SAAS,CAAC;AAEb,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,OAAO,IAAI;KAC7C,CAAC,IAAI,MAAM,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC;CAC7D,CAAC;AAEF,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,OAAO,IAAI,IAAI,CAC1D,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3C,YAAY,CACZ,GAAG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,OAAO,EAC/C,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAC/B,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAa1C"}

package/dist/index.d.ts

@@ -1,8 +1,27 @@
 /**
- * @xmachines/play-vue - Vue renderer for XMachines Play architecture
+ * @xmachines/play-vue - Vue 3 renderer for XMachines Play architecture
+ *
+ * Provides a thin Vue rendering layer that passively observes actor signals
+ * and renders UI components via @xmachines/json-render-vue. Vue reactivity is only used
+ * to trigger re-renders — signals are the source of truth.
+ *
+ * Re-exports `defineRegistry` (SFC-aware — auto-wraps `.vue` SFCs via `h()`),
+ * `useBoundProp`, `ComponentFn`, `ComponentContext`, and all json-render providers
+ * so consumers import everything from `@xmachines/play-vue` rather than
+ * `@xmachines/json-render-vue` directly.
  *
  * @packageDocumentation
  */
 export { default as PlayRenderer } from "./PlayRenderer.vue";
-export type { PlayRendererProps } from "./types.js";
+export { default as ActorProvider } from "./ActorProvider.vue";
+export { default as PlayUIProvider } from "./PlayUIProvider.vue";
+export type { ActorProviderProps, PlayUIProviderProps, RenderErrorHandler, VisibilityProviderProps, } from "./types.js";
+export { getPlayViewContext } from "./actor-provider-context.js";
+export type { ViewContextValue } from "./actor-provider-context.js";
+export { useActor } from "./useActor.js";
+export type { AnyPlayActor } from "./useActor.js";
+export { defineRegistry } from "./define-registry.js";
+export type { DefineRegistryOptions, ComponentsMap, ComponentEntry } from "./define-registry.js";
+export { JSONUIProvider, StateProvider, ActionProvider, VisibilityProvider, ValidationProvider, Renderer, useBoundProp, } from "@xmachines/json-render-vue";
+export type { JSONUIProviderProps, StateProviderProps, ActionProviderProps, ValidationProviderProps, RendererProps, ComponentFn, ComponentContext, DefineRegistryResult, } from "@xmachines/json-render-vue";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAGH,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGjE,YAAY,EACX,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,uBAAuB,GACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,YAAY,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAGpE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAGlD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGjG,OAAO,EACN,cAAc,EACd,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,QAAQ,EACR,YAAY,GACZ,MAAM,4BAA4B,CAAC;AACpC,YAAY,EACX,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,EACnB,uBAAuB,EACvB,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,oBAAoB,GACpB,MAAM,4BAA4B,CAAC"}

package/dist/types.d.ts

@@ -3,19 +3,26 @@
  *
  * @packageDocumentation
  */
-import type { AbstractActor, Viewable } from "@xmachines/play-actor";
-import type { Component } from "vue";
-import type { AnyActorLogic } from "xstate";
+import type { DefineRegistryResult } from "@xmachines/json-render-vue";
+import type { BaseActorProviderProps } from "@xmachines/play-actor";
 /**
- * Props for PlayRenderer component
- *
- * @property actor - Actor instance with currentView signal (requires Viewable capability)
- * @property components - Map of component names to Vue components
+ * Props for the ActorProvider component.
+ * Extracted to types.ts so TypeScript can re-export without the vue-shim limitation.
  */
-export interface PlayRendererProps {
-    /** Actor instance with currentView signal (requires Viewable capability) */
-    actor: AbstractActor<AnyActorLogic> & Viewable;
-    /** Map of component names to Vue components */
-    components: Record<string, Component>;
+export interface ActorProviderProps extends BaseActorProviderProps<DefineRegistryResult> {
+}
+/**
+ * Props for PlayUIProvider — all ActorProvider props plus JSONUIProvider's own props.
+ */
+export type { RenderErrorHandler } from "@xmachines/json-render-vue";
+export interface VisibilityProviderProps {
+}
+export interface PlayUIProviderProps extends ActorProviderProps {
+    /** Navigate function forwarded to JSONUIProvider for link resolution */
+    navigate?: (path: string) => void;
+    /** Validation functions forwarded to JSONUIProvider */
+    validationFunctions?: Record<string, (value: unknown, args?: Record<string, unknown>) => boolean>;
+    /** Named functions for $computed expressions in props */
+    functions?: Record<string, (args?: Record<string, unknown>, state?: Record<string, unknown>) => unknown>;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IACjC,4EAA4E;IAC5E,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,GAAG,QAAQ,CAAC;IAE/C,+CAA+C;IAC/C,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACtC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AACvE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAEpE;;;GAGG;AACH,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB,CAAC,oBAAoB,CAAC;CAAG;AAE3F;;GAEG;AACH,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAIrE,MAAM,WAAW,uBAAuB;CAAG;AAE3C,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB;IAC9D,wEAAwE;IACxE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,uDAAuD;IACvD,mBAAmB,CAAC,EAAE,MAAM,CAC3B,MAAM,EACN,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAC3D,CAAC;IACF,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CACjB,MAAM,EACN,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAC5E,CAAC;CACF"}

package/dist/useActor.d.ts

@@ -0,0 +1,50 @@
+/**
+ * useActor — Vue composable for accessing the provided actor inside a PlayRenderer tree.
+ *
+ * Components rendered inside PlayRenderer can call useActor() to reach the actor
+ * instance without prop drilling.
+ *
+ * What is returned is a **swap-following proxy**, not the raw actor object:
+ * - It is a stable reference for the lifetime of the injection, yet forwards every
+ *   operation (property reads/writes, `in`, `Object.keys` / spread, `instanceof`)
+ *   to whichever actor is CURRENTLY provided — so it transparently follows a
+ *   `props.actor` swap on `<ActorProvider>` without consumers re-injecting.
+ * - Method identity is stable per underlying method: `actor.send === actor.send`
+ *   across repeated reads (allocation-free), and rebinds only when the underlying
+ *   method changes or the actor is swapped.
+ * - It is NOT `===` the `actor` prop passed to `<ActorProvider>` (it is a distinct
+ *   Proxy object). Any consumer keyed on actor identity — most notably a router
+ *   bridge extending `RouterBridgeBase`, whose one-bridge-per-actor guard keys a
+ *   WeakMap on the actor instance — must be given the actor prop itself, not the
+ *   value returned by `useActor()`.
+ *
+ * @throws {Error} If called outside a PlayRenderer tree
+ *
+ * @example
+ * ```typescript
+ * import { useActor } from "@xmachines/play-vue";
+ *
+ * const actor = useActor();
+ * actor.send({ type: "SUBMIT" });
+ * ```
+ *
+ * @packageDocumentation
+ */
+import type { InjectionKey } from "vue";
+import type { AbstractActor } from "@xmachines/play-actor";
+import type { AnyActorLogic } from "xstate";
+/** Bare actor type accepted by Vue context providers. For the full routing + view shape, use `PlayActor` from `@xmachines/play-router`. */
+export type AnyPlayActor = AbstractActor<AnyActorLogic>;
+export declare const ActorKey: InjectionKey<AnyPlayActor>;
+/**
+ * Provide the actor to all descendant components via Vue's inject/provide mechanism.
+ *
+ * Called inside `PlayRenderer.vue`'s `setup()` to make the actor available to any
+ * child component that calls `useActor()`. Not typically needed outside framework
+ * internals unless building a custom renderer wrapper.
+ *
+ * @param actor - The actor instance to inject into the component tree.
+ */
+export declare function provideActor(actor: AnyPlayActor): void;
+export declare function useActor(): AnyPlayActor;
+//# sourceMappingURL=useActor.d.ts.map

package/dist/useActor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useActor.d.ts","sourceRoot":"","sources":["../src/useActor.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAGH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAC;AAExC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,2IAA2I;AAC3I,MAAM,MAAM,YAAY,GAAG,aAAa,CAAC,aAAa,CAAC,CAAC;AAExD,eAAO,MAAM,QAAQ,EAAE,YAAY,CAAC,YAAY,CAA6B,CAAC;AAE9E;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAEtD;AAED,wBAAgB,QAAQ,IAAI,YAAY,CAEvC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xmachines/play-vue",
-  "version": "1.0.0-beta.9",
+  "version": "1.1.0",
   "description": "Vue renderer for XMachines Play architecture",
   "keywords": [
     "reactive",
@@ -10,9 +10,11 @@
     "xmachines"
   ],
   "license": "MIT",
+  "author": "Mikael Karon <mikael@karon.se>",
   "repository": {
     "type": "git",
-    "url": "git@gitlab.com:xmachin-es/xmachines-js.git"
+    "url": "git+ssh://git@gitlab.com/xmachin-es/xmachines-js.git",
+    "directory": "packages/play-vue"
   },
   "files": [
     "dist",
@@ -20,6 +22,7 @@
     "LICENSE"
   ],
   "type": "module",
+  "sideEffects": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -33,27 +36,46 @@
   },
   "scripts": {
     "build": "vite build && tsc --build --force",
-    "clean": "rm -rf dist node_modules/.vite node_modules/.vite-temp",
-    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist *.tsbuildinfo coverage .vitest-attachments test/browser/__screenshots__ node_modules/.svelte2tsx-* node_modules/.vite*",
+    "lint": "oxlint .",
+    "format": "oxfmt .",
     "test": "vitest",
-    "test:watch": "vitest",
-    "prepublishOnly": "npm run build"
+    "test:watch": "vitest"
   },
   "dependencies": {
-    "@xmachines/play-actor": "1.0.0-beta.9",
-    "@xmachines/play-catalog": "1.0.0-beta.9",
-    "@xmachines/play-signals": "1.0.0-beta.9"
+    "@xmachines/play": "1.1.0",
+    "@xmachines/play-actor": "1.1.0",
+    "@xmachines/play-signals": "1.1.0"
   },
   "devDependencies": {
-    "@types/node": "^25.5.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@types/node": "^26.2.0",
     "@vitejs/plugin-vue": "^6.0.5",
-    "@vue/test-utils": "^2.4.6",
-    "@xmachines/shared": "1.0.0-beta.9",
-    "typescript": "^5.9.3",
-    "vitest": "^4.1.0",
-    "vue": "^3.5.0"
+    "@vitest/browser-playwright": "^4.1.10",
+    "@vue/test-utils": "^2.4.9",
+    "@xmachines/json-render-core": "^0.19.0-xm.2",
+    "@xmachines/json-render-vue": "^0.19.0-xm.2",
+    "@xmachines/json-render-xstate": "^0.19.0-xm.2",
+    "@xstate/store": "^3.17.0",
+    "oxfmt": "^0.64.0",
+    "oxlint": "^1.79.0",
+    "typescript": "^5.9.3 || ^6.0.3",
+    "vite": "^8.0.10",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.11",
+    "vue": "^3.5.33",
+    "xstate": "^5.31.0",
+    "zod": "^4.4.1"
   },
   "peerDependencies": {
-    "vue": "^3.5.0"
+    "@xmachines/json-render-core": "^0.19.0-xm.2",
+    "@xmachines/json-render-vue": "^0.19.0-xm.2",
+    "@xmachines/json-render-xstate": "^0.19.0-xm.2",
+    "@xstate/store": "^3.17.0",
+    "vue": "^3.5.0",
+    "xstate": "^5.31.0"
+  },
+  "engines": {
+    "node": ">=22.0.0"
   }
 }

package/dist/PlayRenderer.js

@@ -1,9 +0,0 @@
-import e from "./PlayRenderer.vue_vue_type_script_lang.js";
-/* empty css                                                             */
-import t from "./_virtual/_plugin-vue_export-helper.js";
-//#region src/PlayRenderer.vue
-var n = /* @__PURE__ */ t(e, [["__scopeId", "data-v-275eda6e"]]);
-//#endregion
-export { n as default };
-
-//# sourceMappingURL=PlayRenderer.js.map

package/dist/PlayRenderer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PlayRenderer.js","names":[],"sources":["../src/PlayRenderer.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * PlayRenderer - Main Vue renderer component for XMachines Play architecture\n *\n * Architecture (per RESEARCH.md Pattern 1):\n * - Subscribes to actor.currentView signal via Signal.subtle.Watcher\n * - Dynamically renders catalog components based on view.component string\n * - Forwards user events to actor via actor.send()\n * - Vue ref only for triggering renders, NOT business logic\n *\n * Signal bridge uses one-shot re-watch pattern:\n * TC39 Signal watchers stop watching after notification, so watcher.watch()\n * must be called inside a microtask after getPending() to re-arm for the\n * next notification.\n *\n * CRITICAL: Never call signal.get() or signal.set() inside the Watcher's\n * notify callback. The callback runs synchronously during the signal graph's\n * dirty-propagation phase. All reads must be deferred to a queueMicrotask.\n *\n * @invariant Actor Authority - Actor decides all state transitions via guards\n * @invariant Passive Infrastructure - Component observes signals, sends events\n * @invariant Signal-Only Reactivity - Business logic state lives in actor signals\n */\n\nimport { defineComponent, ref, computed, toRaw, onUnmounted, h, type PropType } from \"vue\";\nimport { Signal } from \"@xmachines/play-signals\";\nimport type { PlayRendererProps } from \"./types.js\";\nimport type { AbstractActor, Viewable } from \"@xmachines/play-actor\";\nimport type { AnyActorLogic } from \"xstate\";\nimport type { Component } from \"vue\";\n\nexport default defineComponent({\n\tname: \"PlayRenderer\",\n\tprops: {\n\t\tactor: {\n\t\t\ttype: Object as PropType<AbstractActor<AnyActorLogic> & Viewable>,\n\t\t\trequired: true,\n\t\t},\n\t\tcomponents: {\n\t\t\ttype: Object as PropType<Record<string, Component>>,\n\t\t\trequired: true,\n\t\t},\n\t},\n\tsetup(props, { slots }) {\n\t\t// Unwrap actor from Vue's reactive proxy to access raw Signal objects\n\t\t// CRITICAL: toRaw() preserves Signal's 'this' binding for .get() and watcher operations\n\t\tconst actor = toRaw(props.actor);\n\n\t\t// Get initial value from unwrapped signal\n\t\tconst initialView = actor.currentView.get();\n\n\t\t// Vue ref for triggering re-renders (NOT business logic state)\n\t\t// Signal is source of truth, ref is just Vue's render trigger\n\t\tconst view = ref<{ component: string; props: Record<string, unknown> } | null>(initialView);\n\n\t\t// Signal watcher for bridging TC39 Signals to Vue reactivity\n\t\t// Created immediately (not in onMounted) so signal changes during the\n\t\t// synchronous mount phase are captured.\n\t\t//\n\t\t// The notify callback runs synchronously during the signal graph's\n\t\t// dirty-propagation phase. NEVER read (.get()) or write (.set()) signals\n\t\t// inside it. Only schedule a microtask to do the actual work.\n\t\tconst watcher = new Signal.subtle.Watcher(() => {\n\t\t\tqueueMicrotask(() => {\n\t\t\t\t// Step 1: Acknowledge notification (clears watcher's dirty flags)\n\t\t\t\twatcher.getPending();\n\n\t\t\t\t// Step 2: Read signal value (safe — notification phase is over)\n\t\t\t\tview.value = actor.currentView.get();\n\n\t\t\t\t// Step 3: Re-watch for next notification (one-shot pattern)\n\t\t\t\t// TC39 watchers stop notifying after first notification until re-armed\n\t\t\t\twatcher.watch(actor.currentView);\n\t\t\t});\n\t\t});\n\n\t\t// Start watching the signal\n\t\twatcher.watch(actor.currentView);\n\n\t\tonUnmounted(() => {\n\t\t\t// Unwatch to stop receiving notifications\n\t\t\twatcher.unwatch(actor.currentView);\n\t\t});\n\n\t\t// Bind send function to actor for correct 'this' context\n\t\tconst sendBound = actor.send.bind(actor);\n\n\t\t// Compute Component from view.component lookup\n\t\tconst ResolvedComponent = computed(() => {\n\t\t\tif (!view.value) return null;\n\n\t\t\t// Handle null/undefined components catalog gracefully\n\t\t\tif (!props.components) {\n\t\t\t\tconsole.error(\n\t\t\t\t\t`Components catalog is ${props.components === null ? \"null\" : \"undefined\"}. ` +\n\t\t\t\t\t\t`Cannot render component \"${view.value.component}\".`,\n\t\t\t\t);\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\t// Look up component from catalog\n\t\t\tconst comp = toRaw(props.components[view.value.component]);\n\n\t\t\tif (!comp) {\n\t\t\t\tconsole.error(\n\t\t\t\t\t`Component \"${view.value.component}\" not found in catalog. ` +\n\t\t\t\t\t\t`Available components: ${Object.keys(props.components).join(\", \")}`,\n\t\t\t\t);\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\treturn comp;\n\t\t});\n\n\t\t// Use render function to avoid Vue 3.5 SFC template <slot> + jsdom renderSlot crash\n\t\treturn () => {\n\t\t\t// No view — show fallback slot\n\t\t\tif (!view.value) {\n\t\t\t\treturn slots.fallback ? slots.fallback() : null;\n\t\t\t}\n\n\t\t\t// View exists but component not found\n\t\t\tif (!ResolvedComponent.value) {\n\t\t\t\treturn h(\n\t\t\t\t\t\"div\",\n\t\t\t\t\t{ class: \"play-renderer-error\" },\n\t\t\t\t\t`Component \"${view.value.component}\" not found in catalog`,\n\t\t\t\t);\n\t\t\t}\n\n\t\t\t// Render matched component dynamically\n\t\t\treturn h(ResolvedComponent.value, {\n\t\t\t\t...view.value.props,\n\t\t\t\tsend: sendBound,\n\t\t\t});\n\t\t};\n\t},\n});\n</script>\n\n<style scoped>\n.play-renderer-error {\n\tpadding: 1rem;\n\tbackground-color: #fee;\n\tborder: 1px solid #fcc;\n\tborder-radius: 4px;\n\tcolor: #c00;\n\tfont-family: monospace;\n}\n</style>\n"],"mappings":""}

package/dist/PlayRenderer.vue_vue_type_script_lang.js

@@ -1,35 +0,0 @@
-import { computed as e, defineComponent as t, h as n, onUnmounted as r, ref as i, toRaw as a } from "vue";
-import { Signal as o } from "@xmachines/play-signals";
-//#region src/PlayRenderer.vue?vue&type=script&lang.ts
-var s = t({
-	name: "PlayRenderer",
-	props: {
-		actor: {
-			type: Object,
-			required: !0
-		},
-		components: {
-			type: Object,
-			required: !0
-		}
-	},
-	setup(t, { slots: s }) {
-		let c = a(t.actor), l = i(c.currentView.get()), u = new o.subtle.Watcher(() => {
-			queueMicrotask(() => {
-				u.getPending(), l.value = c.currentView.get(), u.watch(c.currentView);
-			});
-		});
-		u.watch(c.currentView), r(() => {
-			u.unwatch(c.currentView);
-		});
-		let d = c.send.bind(c), f = e(() => l.value ? t.components ? a(t.components[l.value.component]) || (console.error(`Component "${l.value.component}" not found in catalog. Available components: ${Object.keys(t.components).join(", ")}`), null) : (console.error(`Components catalog is ${t.components === null ? "null" : "undefined"}. Cannot render component "${l.value.component}".`), null) : null);
-		return () => l.value ? f.value ? n(f.value, {
-			...l.value.props,
-			send: d
-		}) : n("div", { class: "play-renderer-error" }, `Component "${l.value.component}" not found in catalog`) : s.fallback ? s.fallback() : null;
-	}
-});
-//#endregion
-export { s as default };
-
-//# sourceMappingURL=PlayRenderer.vue_vue_type_script_lang.js.map

package/dist/PlayRenderer.vue_vue_type_script_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PlayRenderer.vue_vue_type_script_lang.js","names":[],"sources":["../src/PlayRenderer.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * PlayRenderer - Main Vue renderer component for XMachines Play architecture\n *\n * Architecture (per RESEARCH.md Pattern 1):\n * - Subscribes to actor.currentView signal via Signal.subtle.Watcher\n * - Dynamically renders catalog components based on view.component string\n * - Forwards user events to actor via actor.send()\n * - Vue ref only for triggering renders, NOT business logic\n *\n * Signal bridge uses one-shot re-watch pattern:\n * TC39 Signal watchers stop watching after notification, so watcher.watch()\n * must be called inside a microtask after getPending() to re-arm for the\n * next notification.\n *\n * CRITICAL: Never call signal.get() or signal.set() inside the Watcher's\n * notify callback. The callback runs synchronously during the signal graph's\n * dirty-propagation phase. All reads must be deferred to a queueMicrotask.\n *\n * @invariant Actor Authority - Actor decides all state transitions via guards\n * @invariant Passive Infrastructure - Component observes signals, sends events\n * @invariant Signal-Only Reactivity - Business logic state lives in actor signals\n */\n\nimport { defineComponent, ref, computed, toRaw, onUnmounted, h, type PropType } from \"vue\";\nimport { Signal } from \"@xmachines/play-signals\";\nimport type { PlayRendererProps } from \"./types.js\";\nimport type { AbstractActor, Viewable } from \"@xmachines/play-actor\";\nimport type { AnyActorLogic } from \"xstate\";\nimport type { Component } from \"vue\";\n\nexport default defineComponent({\n\tname: \"PlayRenderer\",\n\tprops: {\n\t\tactor: {\n\t\t\ttype: Object as PropType<AbstractActor<AnyActorLogic> & Viewable>,\n\t\t\trequired: true,\n\t\t},\n\t\tcomponents: {\n\t\t\ttype: Object as PropType<Record<string, Component>>,\n\t\t\trequired: true,\n\t\t},\n\t},\n\tsetup(props, { slots }) {\n\t\t// Unwrap actor from Vue's reactive proxy to access raw Signal objects\n\t\t// CRITICAL: toRaw() preserves Signal's 'this' binding for .get() and watcher operations\n\t\tconst actor = toRaw(props.actor);\n\n\t\t// Get initial value from unwrapped signal\n\t\tconst initialView = actor.currentView.get();\n\n\t\t// Vue ref for triggering re-renders (NOT business logic state)\n\t\t// Signal is source of truth, ref is just Vue's render trigger\n\t\tconst view = ref<{ component: string; props: Record<string, unknown> } | null>(initialView);\n\n\t\t// Signal watcher for bridging TC39 Signals to Vue reactivity\n\t\t// Created immediately (not in onMounted) so signal changes during the\n\t\t// synchronous mount phase are captured.\n\t\t//\n\t\t// The notify callback runs synchronously during the signal graph's\n\t\t// dirty-propagation phase. NEVER read (.get()) or write (.set()) signals\n\t\t// inside it. Only schedule a microtask to do the actual work.\n\t\tconst watcher = new Signal.subtle.Watcher(() => {\n\t\t\tqueueMicrotask(() => {\n\t\t\t\t// Step 1: Acknowledge notification (clears watcher's dirty flags)\n\t\t\t\twatcher.getPending();\n\n\t\t\t\t// Step 2: Read signal value (safe — notification phase is over)\n\t\t\t\tview.value = actor.currentView.get();\n\n\t\t\t\t// Step 3: Re-watch for next notification (one-shot pattern)\n\t\t\t\t// TC39 watchers stop notifying after first notification until re-armed\n\t\t\t\twatcher.watch(actor.currentView);\n\t\t\t});\n\t\t});\n\n\t\t// Start watching the signal\n\t\twatcher.watch(actor.currentView);\n\n\t\tonUnmounted(() => {\n\t\t\t// Unwatch to stop receiving notifications\n\t\t\twatcher.unwatch(actor.currentView);\n\t\t});\n\n\t\t// Bind send function to actor for correct 'this' context\n\t\tconst sendBound = actor.send.bind(actor);\n\n\t\t// Compute Component from view.component lookup\n\t\tconst ResolvedComponent = computed(() => {\n\t\t\tif (!view.value) return null;\n\n\t\t\t// Handle null/undefined components catalog gracefully\n\t\t\tif (!props.components) {\n\t\t\t\tconsole.error(\n\t\t\t\t\t`Components catalog is ${props.components === null ? \"null\" : \"undefined\"}. ` +\n\t\t\t\t\t\t`Cannot render component \"${view.value.component}\".`,\n\t\t\t\t);\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\t// Look up component from catalog\n\t\t\tconst comp = toRaw(props.components[view.value.component]);\n\n\t\t\tif (!comp) {\n\t\t\t\tconsole.error(\n\t\t\t\t\t`Component \"${view.value.component}\" not found in catalog. ` +\n\t\t\t\t\t\t`Available components: ${Object.keys(props.components).join(\", \")}`,\n\t\t\t\t);\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\treturn comp;\n\t\t});\n\n\t\t// Use render function to avoid Vue 3.5 SFC template <slot> + jsdom renderSlot crash\n\t\treturn () => {\n\t\t\t// No view — show fallback slot\n\t\t\tif (!view.value) {\n\t\t\t\treturn slots.fallback ? slots.fallback() : null;\n\t\t\t}\n\n\t\t\t// View exists but component not found\n\t\t\tif (!ResolvedComponent.value) {\n\t\t\t\treturn h(\n\t\t\t\t\t\"div\",\n\t\t\t\t\t{ class: \"play-renderer-error\" },\n\t\t\t\t\t`Component \"${view.value.component}\" not found in catalog`,\n\t\t\t\t);\n\t\t\t}\n\n\t\t\t// Render matched component dynamically\n\t\t\treturn h(ResolvedComponent.value, {\n\t\t\t\t...view.value.props,\n\t\t\t\tsend: sendBound,\n\t\t\t});\n\t\t};\n\t},\n});\n</script>\n\n<style scoped>\n.play-renderer-error {\n\tpadding: 1rem;\n\tbackground-color: #fee;\n\tborder: 1px solid #fcc;\n\tborder-radius: 4px;\n\tcolor: #c00;\n\tfont-family: monospace;\n}\n</style>\n"],"mappings":";;;AA+BA,IAAA,IAAe,EAAgB;CAC9B,MAAM;CACN,OAAO;EACN,OAAO;GACN,MAAM;GACN,UAAU;GACV;EACD,YAAY;GACX,MAAM;GACN,UAAU;GACV;EACD;CACD,MAAM,GAAO,EAAE,YAAS;EAGvB,IAAM,IAAQ,EAAM,EAAM,MAAM,EAO1B,IAAO,EAJO,EAAM,YAAY,KAAK,CAIgD,EASrF,IAAU,IAAI,EAAO,OAAO,cAAc;AAC/C,wBAAqB;AASpB,IAPA,EAAQ,YAAY,EAGpB,EAAK,QAAQ,EAAM,YAAY,KAAK,EAIpC,EAAQ,MAAM,EAAM,YAAY;KAC/B;IACD;AAKF,EAFA,EAAQ,MAAM,EAAM,YAAY,EAEhC,QAAkB;AAEjB,KAAQ,QAAQ,EAAM,YAAY;IACjC;EAGF,IAAM,IAAY,EAAM,KAAK,KAAK,EAAM,EAGlC,IAAoB,QACpB,EAAK,QAGL,EAAM,aASE,EAAM,EAAM,WAAW,EAAK,MAAM,WAAW,KAGzD,QAAQ,MACP,cAAc,EAAK,MAAM,UAAU,gDACT,OAAO,KAAK,EAAM,WAAW,CAAC,KAAK,KAAK,GAClE,EACM,SAfP,QAAQ,MACP,yBAAyB,EAAM,eAAe,OAAO,SAAS,YAAY,6BAC7C,EAAK,MAAM,UAAU,IAClD,EACM,QARgB,KAuBvB;AAGF,eAEM,EAAK,QAKL,EAAkB,QAShB,EAAE,EAAkB,OAAO;GACjC,GAAG,EAAK,MAAM;GACd,MAAM;GACN,CAAC,GAXM,EACN,OACA,EAAE,OAAO,uBAAuB,EAChC,cAAc,EAAK,MAAM,UAAU,wBACnC,GATM,EAAM,WAAW,EAAM,UAAS,GAAI;;CAmB9C,CAAC"}

package/dist/_virtual/_plugin-vue_export-helper.js

@@ -1,8 +0,0 @@
-//#region \0plugin-vue:export-helper
-var e = (e, t) => {
-	let n = e.__vccOpts || e;
-	for (let [e, r] of t) n[e] = r;
-	return n;
-};
-//#endregion
-export { e as default };

package/dist/index.css

@@ -1,2 +0,0 @@
-.play-renderer-error[data-v-275eda6e]{color:#c00;background-color:#fee;border:1px solid #fcc;border-radius:4px;padding:1rem;font-family:monospace}
-/*$vite$:1*/

package/dist/index.js

@@ -1,2 +0,0 @@
-import e from "./PlayRenderer.js";
-export { e as PlayRenderer };