@xmachines/play-solid 1.0.0-beta.16 → 1.0.0-beta.17

package/README.md

@@ -1,299 +1,253 @@
 # @xmachines/play-solid
 
-**SolidJS renderer consuming signals and UI schema with provider pattern**
+**SolidJS renderer for XMachines Play Architecture**
 
-Signal-driven SolidJS rendering layer observing actor state with zero SolidJS state for business logic.
+Bridges TC39 Signal-driven actors to SolidJS's fine-grained reactivity. Business logic stays in the actor; Solid is purely a rendering target.
 
 ## Overview
 
-`@xmachines/play-solid` provides `PlayRenderer` for building SolidJS UIs that passively observe actor signals. This package enables framework-swappable architecture where SolidJS is just a rendering target subscribing to signal changes — business logic lives entirely in the actor.
+`@xmachines/play-solid` provides `PlayRenderer`, a Solid component that:
 
-Per [RFC Play v1](https://gitlab.com/xmachin-es/rfc/-/blob/main/src/play-v1.md), this package implements:
+- Subscribes to `actor.currentView` (TC39 Signal) and re-renders on every state transition
+- Renders the current view's JSON spec via `@json-render/solid`
+- Routes action names from spec elements to `actor.send()` via the `actions` prop
+- Manages per-view UI state in an `@xstate/store` atom (automatic or caller-supplied)
 
-- **Signal-Only Reactivity (INV-05):** No createSignal/createStore for business logic, TC39 signals only
-- **Passive Infrastructure (INV-04):** Components observe signals, send events to actor
+Per [RFC Play v1](https://gitlab.com/xmachin-es/rfc/-/blob/main/src/play-v1.md):
 
-**Key Principle:** SolidJS state is never used for business logic. Signals are the source of truth.
-
-Renderer receives actor via props (provider pattern), not children.
+- **Actor Authority (INV-01):** Guards in the machine decide all state transitions
+- **Passive Infrastructure (INV-04):** Solid observes signals and dispatches events — never decides
+- **Signal-Only Reactivity (INV-05):** `actor.currentView` signal is the sole render trigger
 
 ## Installation
 
 ```bash
-npm install solid-js@^1.8.0
 npm install @xmachines/play-solid
+npm install @json-render/solid @json-render/core   # peer deps
+npm install @json-render/xstate @xstate/store      # store integration
 ```
 
 ## Current Exports
 
-- `PlayRenderer`
+- `PlayRenderer` — main renderer component
+- `useActor` — hook for accessing the actor inside a `PlayRenderer` tree
+- `defineRegistry` — re-exported from `@json-render/solid`
+- `useStateBinding` — re-exported from `@json-render/solid`
+- `ComponentFn` (type) — re-exported from `@json-render/solid`
+- `ComponentContext` (type) — re-exported from `@json-render/solid`
 - `PlayRendererProps` (type)
-
-**Peer dependencies:**
-
-- `solid-js` ^1.8.0 - SolidJS runtime
+- `PlayActor` (type)
 
 ## Quick Start
 
 ```tsx
-import { render } from "solid-js/web";
-import { definePlayer } from "@xmachines/play-xstate";
-import { defineCatalog } from "@xmachines/play-catalog";
+import { definePlayer, formatPlayRouteTransitions } from "@xmachines/play-xstate";
 import { PlayRenderer } from "@xmachines/play-solid";
+import { defineCatalog } from "@json-render/core";
+import { defineRegistry } from "@xmachines/play-solid";
+import type { ComponentFn } from "@xmachines/play-solid";
+import { setup, assign } from "xstate";
 import { z } from "zod";
 
-// 1. Define catalog (business logic layer)
+// 1. Define catalog — the contract between machine spec and UI components
 const catalog = defineCatalog({
-	LoginForm: z.object({ error: z.string().optional() }),
-	Dashboard: z.object({
-		userId: z.string(),
-		username: z.string(),
-	}),
+	elements: {
+		Login: { props: z.object({ title: z.string() }), description: "Login form" },
+		Dashboard: { props: z.object({ username: z.string() }), description: "Dashboard" },
+	},
 });
 
-// 2. Create SolidJS components (view layer)
-const components = {
-	LoginForm: (props) => (
+// 2. Implement components using ComponentFn — typed against catalog entries
+const Login: ComponentFn<typeof catalog, "Login"> = ({ props, emit }) => (
+	<div class="view">
+		<h2>{props.title}</h2>
 		<form
 			onSubmit={(e) => {
 				e.preventDefault();
-				const data = new FormData(e.currentTarget);
-				props.send({
-					type: "auth.login",
-					username: data.get("username"),
-				});
+				emit("submit");
 			}}
 		>
-			{props.error && <p style={{ color: "red" }}>{props.error}</p>}
-			<input name="username" required placeholder="Username" />
 			<button type="submit">Log In</button>
 		</form>
-	),
-	Dashboard: (props) => (
-		<div>
-			<h1>Welcome, {props.username}!</h1>
-			<p>User ID: {props.userId}</p>
-			<button onClick={() => props.send({ type: "auth.logout" })}>Log Out</button>
-		</div>
-	),
-};
-
-// 3. Create player actor (business logic runtime)
-const createPlayer = definePlayer({ machine: authMachine, catalog });
-const actor = createPlayer();
-actor.start();
+	</div>
+);
 
-// 4. Render UI (actor via props)
-render(
-	() => <PlayRenderer actor={actor} components={components} />,
-	document.getElementById("app")!,
+const Dashboard: ComponentFn<typeof catalog, "Dashboard"> = ({ props }) => (
+	<div class="view">Welcome, {props.username}!</div>
 );
-```
 
-## API Reference
+// 3. Build registry
+const { registry } = defineRegistry(catalog, {
+	components: { Login, Dashboard },
+	actions: { login: async () => {}, logout: async () => {} },
+});
 
-### PlayRenderer
+// 4. Define machine with view metadata
+const machine = setup({
+	types: {
+		context: {} as {
+			isAuthenticated: boolean;
+			username: string | null;
+			routeParams: Record<string, string>;
+			queryParams: Record<string, string>;
+		},
+		events: {} as
+			| { type: "auth.login"; username: string }
+			| { type: "auth.logout" }
+			| { type: "play.route"; to: string; params?: Record<string, string> },
+	},
+}).createMachine(
+	formatPlayRouteTransitions({
+		id: "app",
+		initial: "login",
+		context: { isAuthenticated: false, username: null, routeParams: {}, queryParams: {} },
+		states: {
+			login: {
+				id: "login",
+				meta: {
+					route: "/login",
+					view: {
+						component: "Login",
+						spec: {
+							root: "root",
+							elements: {
+								root: { type: "Login", props: { title: "Sign In" }, children: [] },
+							},
+						},
+					},
+				},
+			},
+			dashboard: {
+				id: "dashboard",
+				meta: {
+					route: "/dashboard",
+					view: {
+						component: "Dashboard",
+						spec: {
+							root: "root",
+							elements: {
+								root: { type: "Dashboard", props: { username: "" }, children: [] },
+							},
+						},
+					},
+				},
+			},
+		},
+		on: {
+			"auth.login": {
+				target: ".dashboard",
+				guard: ({ context }) => !context.isAuthenticated,
+				actions: assign({ isAuthenticated: true, username: ({ event }) => event.username }),
+			},
+			"auth.logout": {
+				target: ".login",
+				guard: ({ context }) => context.isAuthenticated,
+				actions: assign({ isAuthenticated: false, username: null }),
+			},
+		},
+	}),
+);
 
-Main renderer component subscribing to actor signals and dynamically rendering catalog components:
+// 5. Create actor and render
+const createPlayer = definePlayer({ machine });
+const actor = createPlayer();
+actor.start();
 
-```typescript
-interface PlayRendererProps {
-	actor: AbstractActor<any>;
-	components: Record<string, Component<any>>;
-	fallback?: JSX.Element;
+function App() {
+	return (
+		<PlayRenderer
+			actor={actor}
+			registry={registry}
+			actions={{ login: "auth.login", logout: "auth.logout" }}
+		/>
+	);
 }
 ```
 
-**Props:**
-
-- `actor` - Actor instance with `currentView` signal
-- `components` - Map of component names to SolidJS components
-- `fallback` - Component shown when `currentView` is null
-
-**Behavior:**
+## API Reference
 
-1. Subscribes to `actor.currentView` signal using a `Signal.subtle.Watcher` inside the component
-2. Looks up component from `components` map using `view.component` string
-3. Renders component with props from `view.props` + `send` function using Solid's `<Dynamic />`
+### `PlayRenderer`
 
-**Example:**
+Main component. Subscribes to `actor.currentView` and renders the spec.
 
 ```tsx
 <PlayRenderer
 	actor={actor}
-	components={{
-		HomePage: (props) => <div>Home</div>,
-		AboutPage: (props) => <div>About</div>,
-	}}
-	fallback={<div>Loading...</div>}
+	registry={registry}
+	actions={{ login: "auth.login" }}
+	store={myStore}
+	fallback={<p>Loading…</p>}
 />
 ```
 
-## Examples
-
-### Component Receiving Props from Catalog
-
-```tsx
-import { PlayRenderer } from "@xmachines/play-solid";
-import { defineCatalog } from "@xmachines/play-catalog";
-import { z } from "zod";
-
-// Define schema in catalog
-const catalog = defineCatalog({
-	UserProfile: z.object({
-		userId: z.string(),
-		name: z.string(),
-		avatar: z.string().url().optional(),
-		stats: z.object({
-			posts: z.number(),
-			followers: z.number(),
-		}),
-	}),
-});
+**`actor`** — A `PlayerActor` (or any `AbstractActor & Viewable`). Provides the `currentView` signal.
 
-// Component receives type-safe props + send
-const components = {
-	UserProfile: (props) => (
-		<div>
-			{props.avatar && <img src={props.avatar} alt={props.name} />}
-			<h1>{props.name}</h1>
-			<p>ID: {props.userId}</p>
-			<div>
-				<span>{props.stats.posts} posts</span>
-				<span>{props.stats.followers} followers</span>
-			</div>
-			<button
-				onClick={() =>
-					props.send({
-						type: "profile.edit",
-						userId: props.userId,
-					})
-				}
-			>
-				Edit Profile
-			</button>
-		</div>
-	),
-};
-
-<PlayRenderer actor={actor} components={components} />;
-```
+**`registry`** — Built with `defineRegistry(catalog, { components, actions })` from `@xmachines/play-solid`.
 
-### Provider Pattern
+**`actions`** — Maps json-render action names (from spec `on` bindings) to XState event type strings. Type-checked against `EventFromLogic<TLogic>["type"]` when `TLogic` is specified:
 
 ```tsx
-import { PlayTanStackRouterProvider } from "@xmachines/play-tanstack-solid-router";
-import { PlayRenderer } from "@xmachines/play-solid";
-import { createSignal, onCleanup } from "solid-js";
-
-// Renderer receives actor via props (not children)
-function App() {
-	return (
-		<PlayTanStackRouterProvider
-			actor={actor}
-			router={router}
-			routeMap={routeMap}
-			renderer={(currentActor, currentRouter) => {
-				return (
-					<div>
-						<Header actor={currentActor} />
-						<PlayRenderer actor={currentActor} components={components} />
-						<Footer />
-					</div>
-				);
-			}}
-		/>
-	);
-}
-
-// Header component also receives actor
-function Header(props) {
-	const [route, setRoute] = createSignal<string | null>(null);
-
-	// Manual watcher setup for custom component reading signals
-	let watcher: Signal.subtle.Watcher;
-
-	// ... setup watcher to update route signal ...
-
-	return (
-		<header>
-			<nav>Current: {route()}</nav>
-		</header>
-	);
-}
+<PlayRenderer<typeof machine>
+	actor={actor}
+	registry={registry}
+	actions={{ login: "auth.login", logout: "auth.logout" }}
+/>
 ```
 
-## Architecture
-
-This package implements **Signal-Only Reactivity (INV-05)** and **Passive Infrastructure (INV-04)**:
+**`store`** (optional) — Controls per-view UI state (`$state` bindings, form values):
 
-1. **No Business Logic in SolidJS:**
-    - No createSignal/createStore for business state
-    - No createEffect for business side effects
-    - SolidJS only triggers renders, doesn't control state
+- **Omitted (uncontrolled, default):** A fresh `@xstate/store` atom is created per view transition, seeded from `view.spec.state`.
+- **Provided (controlled):** The caller owns the store; `spec.state` is ignored.
 
-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
-
-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
+```tsx
+import { createAtom } from "@xstate/store";
+import { xstateStoreStateStore } from "@json-render/xstate";
+import type { StateStore } from "@json-render/core";
 
-4. **Microtask Batching:**
-    - `Signal.subtle.Watcher` coalesces rapid signal changes
-    - Prevents SolidJS thrashing from multiple signal updates
-    - Single SolidJS render per microtask batch
+const store: StateStore = xstateStoreStateStore({ atom: createAtom({ username: "" }) });
 
-5. **Explicit Disposal Contract:**
-    - Component teardown calls watcher `unwatch` in `onCleanup`
-    - Do not rely on GC-only cleanup
+<PlayRenderer actor={actor} registry={registry} store={store} actions={{ login: "auth.login" }} />;
+```
 
-**Pattern:**
+**`fallback`** — Shown when `actor.currentView.get()` is `null`.
 
-- Renderer receives actor via props (provider pattern)
-- Enables composition with navigation, headers, footers
-- Supports multiple renderers in same app
+---
 
-**Architectural Invariants:**
+### `useActor`
 
-- **Signal-Only Reactivity (INV-05):** No SolidJS state for business logic
-- **Passive Infrastructure (INV-04):** Components reflect, never decide
+Solid hook for accessing the actor from inside any component rendered by `PlayRenderer`. No prop drilling needed.
 
-## Canonical Watcher Lifecycle
+```tsx
+import { useActor } from "@xmachines/play-solid";
 
-If you write your own custom integration, use the same watcher flow as `PlayRenderer`:
+// Inside any component rendered inside PlayRenderer:
+function LogoutButton() {
+	const actor = useActor();
+	return <button onClick={() => actor.send({ type: "auth.logout" })}>Log Out</button>;
+}
+```
 
-1. `notify` callback runs
-2. Schedule work with `queueMicrotask`
-3. Drain `watcher.getPending()`
-4. Read actor signals and update SolidJS-local signal state (`setSignal()`)
-5. Re-arm with `watch(...)` or `watch()`
+Throws `"useActor() must be called inside <PlayRenderer>"` if called outside the tree.
 
-Watcher notify is one-shot. Re-arm is required for continuous observation.
+---
 
-## Benefits
+## Route Parameters in Props
 
-- **Framework Swappable:** Business logic has zero SolidJS imports
-- **Type Safety:** Props validated against catalog schemas
-- **Simple Testing:** Test actors without SolidJS renderer
-- **Performance:** Microtask batching reduces unnecessary renders
-- **Composability:** Renderer prop enables complex layouts
+When using `formatPlayRouteTransitions`, URL path parameters flow automatically into component props. Declare an `undefined` slot in the spec to opt in:
 
-## Related Packages
+```ts
+// spec: { section: undefined, user: "alice" }
+// After play.route to /settings/profile → context.routeParams = { section: "profile" }
+// Component receives: { section: "profile", user: "alice" }
+```
 
-- **[@xmachines/play-xstate](../play-xstate)** - XState adapter providing actors
-- **[@xmachines/play-catalog](../play-catalog)** - UI schema validation
-- **[@xmachines/play-solid-router](../play-solid-router)** - Solid Router integration
-- **[@xmachines/play-tanstack-solid-router](../play-tanstack-solid-router)** - TanStack Solid Router integration
-- **[@xmachines/play-actor](../play-actor)** - Actor base
-- **[@xmachines/play-signals](../play-signals)** - TC39 Signals primitives
+Priority: **route param fills `undefined` slots; explicit non-`undefined` spec props always win.**
 
-## License
+---
 
-Copyright (c) 2016 [Mikael Karon](mailto:mikael@karon.se). All rights reserved.
+## Architecture Notes
 
-This work is licensed under the terms of the MIT license.  
-For a copy, see <https://opensource.org/licenses/MIT>.
+- SolidJS signals are only used to trigger re-renders — not for business logic
+- `actor.currentView` (TC39 Signal) is bridged into a SolidJS `createSignal` inside `PlayRenderer`
+- Per-view UI state lives in an `@xstate/store` atom, not in SolidJS reactive state
+- `@json-render/solid` drives rendering; `PlayRenderer` is the signal bridge — import `defineRegistry`, `ComponentFn`, `ComponentContext`, and `useStateBinding` from `@xmachines/play-solid`

package/dist/PlayRenderer.js

@@ -1,31 +1,59 @@
-import { Dynamic as e, createComponent as t, insert as n, memo as r, mergeProps as i, template as a } from "solid-js/web";
-import { createSignal as o, onMount as s } from "solid-js";
-import { Signal as c } from "@xmachines/play-signals";
+import { ActionProvider as e, Renderer as t, StateProvider as n, VisibilityProvider as r } from "./node_modules/@json-render/solid/dist/index.js";
+import { createAtom as i } from "./node_modules/@xstate/store/dist/store-69e7e2d5.esm.js";
+import { xstateStoreStateStore as a } from "./node_modules/@json-render/xstate/dist/index.js";
+import { ActorProvider as o } from "./useActor.js";
+import { createComponent as s } from "solid-js/web";
+import { createSignal as c, onCleanup as l, onMount as u } from "solid-js";
+import { watchSignal as d } from "@xmachines/play-signals";
 //#region src/PlayRenderer.tsx
-var l = /* @__PURE__ */ a("<div class=play-renderer-error>Component \"<!>\" not found in catalog. Available: "), u = (a) => {
-	let [u, d] = o(a.actor.currentView.get());
-	s(() => {
-		let e = new c.subtle.Watcher(() => {
-			queueMicrotask(() => {
-				e.getPending(), d(a.actor.currentView.get()), e.watch(a.actor.currentView);
-			});
+var f = (f) => {
+	let [p, m] = c(f.actor.currentView.get()), h = null, g = null;
+	return u(() => {
+		let e = d(f.actor.currentView, (e) => {
+			m(e);
 		});
-		e.watch(a.actor.currentView);
+		l(() => {
+			e();
+		});
+	}), s(o, {
+		get value() {
+			return f.actor;
+		},
+		get children() {
+			return (() => {
+				let o = p();
+				if (!o) return f.fallback ?? null;
+				let c;
+				f.store ? c = f.store : ((h === null || g !== o) && (h = a({ atom: i(o.spec.state ?? {}) }), g = o), c = h);
+				let l = Object.fromEntries(Object.entries(f.actions ?? {}).map(([e, t]) => [e, async (e = {}) => f.actor.send({
+					type: t,
+					...e
+				})]));
+				return s(n, {
+					store: c,
+					get children() {
+						return s(e, {
+							handlers: l,
+							get children() {
+								return s(r, { get children() {
+									return s(t, {
+										get spec() {
+											return o.spec;
+										},
+										get registry() {
+											return f.registry;
+										}
+									});
+								} });
+							}
+						});
+					}
+				});
+			})();
+		}
 	});
-	let f = a.actor.send.bind(a.actor);
-	return [
-		r(() => r(() => !u())() && (a.fallback || null)),
-		r(() => r(() => !!(u() && !a.components))() && (console.error(`Components catalog is ${a.components === null ? "null" : "undefined"}. Cannot render component "${u().component}".`), a.fallback || null)),
-		r(() => r(() => !!(u() && a.components && !a.components[u().component]))() && (console.error(`Component "${u().component}" not found in catalog. Available components: ${Object.keys(a.components).join(", ")}`), (() => {
-			var e = l(), t = e.firstChild.nextSibling;
-			return t.nextSibling, n(e, () => u().component, t), n(e, () => Object.keys(a.components).join(", "), null), e;
-		})())),
-		r(() => r(() => !!(u() && a.components && a.components[u().component]))() && t(e, i({ get component() {
-			return a.components[u().component];
-		} }, () => u().props, { send: f })))
-	];
 };
 //#endregion
-export { u as PlayRenderer };
+export { f as PlayRenderer };
 
 //# sourceMappingURL=PlayRenderer.js.map

package/dist/PlayRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlayRenderer.js","names":["createSignal","onMount","Component","Dynamic","Signal","PlayRendererProps","SolidView","PlayRenderer","props","view","setView","actor","currentView","get","watcher","subtle","Watcher","queueMicrotask","getPending","watch","sendBound","send","bind","_$memo","fallback","components","console","error","component","Object","keys","join","_el$","_tmpl$","_el$2","firstChild","_el$5","nextSibling","_el$3","_$insert","_$createComponent","_$mergeProps"],"sources":["../src/PlayRenderer.tsx"],"sourcesContent":["/**\n * PlayRenderer - Main SolidJS renderer component for XMachines Play architecture\n *\n * @packageDocumentation\n */\n\nimport { createSignal, onMount, type Component } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport { Signal } from \"@xmachines/play-signals\";\nimport type { PlayRendererProps, SolidView } from \"./types.js\";\n\n/**\n * Main renderer component that subscribes to actor signals and renders UI\n *\n * Architecture (per XMachines Play patterns):\n * - Subscribes to actor.currentView signal via TC39 Signal.subtle.Watcher\n * - Dynamically renders catalog components based on view.component string\n * - Forwards user events to actor via actor.send()\n * - SolidJS signal only for triggering renders, NOT business logic\n *\n * Invariant: Actor Authority - Actor decides all state transitions via guards.\n * Invariant: Passive Infrastructure - Component observes signals and sends events.\n * Invariant: Signal-Only Reactivity - Business logic state lives in actor signals.\n *\n * @example\n * ```typescript\n * import { PlayRenderer } from \"@xmachines/play-solidjs\";\n * import { definePlayer } from \"@xmachines/play-xstate\";\n *\n * const actor = definePlayer({ machine, catalog })();\n * actor.start();\n *\n * const components = {\n *   Dashboard: (props) => <div>User: {props.userId}</div>,\n *   LoginForm: (props) => (\n *     <form onSubmit={(e) => {\n *       e.preventDefault();\n *       props.send({ type: \"auth.login\", payload: {...} });\n *     }}>...</form>\n *   )\n * };\n *\n * <PlayRenderer actor={actor} components={components} />\n * ```\n *\n * @param props - Component props\n * @returns SolidJS element rendering current view from actor\n *\n * @remarks\n * **Component lookup:** Dynamically looks up component from `components` map\n * using `view.component` string from actor.currentView signal.\n *\n * **Event forwarding:** Injects `send` function as prop to components. Components\n * call `send(event)` to forward intents to actor. Actor guards decide validity.\n *\n * **Error handling:** If component not found in catalog, logs error and shows\n * fallback. This indicates missing component registration, not runtime error.\n *\n * **Signal bridge:** Uses one-shot re-watch pattern. TC39 Signal watchers stop\n * watching after notification, so watcher.watch() must be called in microtask\n * after getPending() to re-arm for next notification.\n *\n * **CRITICAL:** Never call actor.send() during render - only in event handlers.\n * Calling send during render causes infinite render loops.\n */\nexport const PlayRenderer: Component<PlayRendererProps> = (props) => {\n\t// Create SolidJS signal for view\n\t// Signal is NOT business logic state - it's just SolidJS's render trigger\n\tconst [view, setView] = createSignal<SolidView>(props.actor.currentView.get() as SolidView);\n\n\t// Bridge TC39 Signal to SolidJS signal\n\t// Uses one-shot re-watch pattern (must re-watch after each notification)\n\tonMount(() => {\n\t\tconst watcher = new Signal.subtle.Watcher(() => {\n\t\t\tqueueMicrotask(() => {\n\t\t\t\t// Acknowledge the notification\n\t\t\t\twatcher.getPending();\n\n\t\t\t\t// Update SolidJS signal (triggers SolidJS reactivity)\n\t\t\t\tsetView(props.actor.currentView.get() as SolidView);\n\n\t\t\t\t// Re-watch for next notification (one-shot pattern)\n\t\t\t\t// TC39 Signal watchers stop watching after notification\n\t\t\t\twatcher.watch(props.actor.currentView);\n\t\t\t});\n\t\t});\n\n\t\t// Watch actor.currentView for changes\n\t\twatcher.watch(props.actor.currentView);\n\n\t\t// Note: TC39 Signal watchers don't have explicit disposal\n\t\t// The watcher will be garbage collected when the component unmounts\n\t});\n\n\t// Bind send function (ensures correct 'this' context)\n\tconst sendBound = props.actor.send.bind(props.actor);\n\n\treturn (\n\t\t<>\n\t\t\t{/* No view - show fallback */}\n\t\t\t{!view() && (props.fallback || null)}\n\n\t\t\t{/* Handle null/undefined components catalog gracefully */}\n\t\t\t{view() &&\n\t\t\t\t!props.components &&\n\t\t\t\t(() => {\n\t\t\t\t\tconsole.error(\n\t\t\t\t\t\t`Components catalog is ${props.components === null ? \"null\" : \"undefined\"}. ` +\n\t\t\t\t\t\t\t`Cannot render component \"${view()!.component}\".`,\n\t\t\t\t\t);\n\t\t\t\t\treturn props.fallback || null;\n\t\t\t\t})()}\n\n\t\t\t{/* View exists but component not found */}\n\t\t\t{view() &&\n\t\t\t\tprops.components &&\n\t\t\t\t!props.components[view()!.component] &&\n\t\t\t\t(() => {\n\t\t\t\t\tconsole.error(\n\t\t\t\t\t\t`Component \"${view()!.component}\" not found in catalog. ` +\n\t\t\t\t\t\t\t`Available components: ${Object.keys(props.components).join(\", \")}`,\n\t\t\t\t\t);\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div class=\"play-renderer-error\">\n\t\t\t\t\t\t\tComponent \"{view()!.component}\" not found in catalog. Available:{\" \"}\n\t\t\t\t\t\t\t{Object.keys(props.components).join(\", \")}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})()}\n\n\t\t\t{/* Render matched component dynamically */}\n\t\t\t{view() && props.components && props.components[view()!.component] && (\n\t\t\t\t<Dynamic\n\t\t\t\t\tcomponent={props.components[view()!.component]}\n\t\t\t\t\t{...view()!.props}\n\t\t\t\t\tsend={sendBound}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"mappings":";;;;iHAiEaO,KAA8CC,MAAU;CAGpE,IAAM,CAACC,GAAMC,KAAWV,EAAwBQ,EAAMG,MAAMC,YAAYC,KAAK,CAAc;AAI3FZ,SAAc;EACb,IAAMa,IAAU,IAAIV,EAAOW,OAAOC,cAAc;AAC/CC,wBAAqB;AASpBH,IAPAA,EAAQI,YAAY,EAGpBR,EAAQF,EAAMG,MAAMC,YAAYC,KAAK,CAAc,EAInDC,EAAQK,MAAMX,EAAMG,MAAMC,YAAY;KACrC;IACD;AAGFE,IAAQK,MAAMX,EAAMG,MAAMC,YAAY;GAIrC;CAGF,IAAMQ,IAAYZ,EAAMG,MAAMU,KAAKC,KAAKd,EAAMG,MAAM;AAEpD,QAAA;EAAAY,QAGGA,QAAA,CAACd,GAAM,CAAA,EAAA,KAAKD,EAAMgB,YAAY,MAAK;EAAAD,QAGnCA,QAAA,CAAA,EAAAd,GAAM,IACN,CAACD,EAAMiB,YAAU,EAAA,KAEhBC,QAAQC,MACP,yBAAyBnB,EAAMiB,eAAe,OAAO,SAAS,YAAW,6BAC5ChB,GAAM,CAAEmB,UAAS,IAC9C,EACMpB,EAAMgB,YAAY,MACtB;EAAAD,QAGJA,QAAA,CAAA,EAAAd,GAAM,IACND,EAAMiB,cACN,CAACjB,EAAMiB,WAAWhB,GAAM,CAAEmB,YAAU,EAAA,KAEnCF,QAAQC,MACP,cAAclB,GAAM,CAAEmB,UAAS,gDACLC,OAAOC,KAAKtB,EAAMiB,WAAW,CAACM,KAAK,KAAK,GAClE,SACD;GAAA,IAAAC,IAAAC,GAAA,EAAAG,IAAAJ,EAAAG,WAAAE;AAG2C,UAH3CD,EAAAC,aAAAE,EAAAP,SAEcvB,GAAM,CAAEmB,WAASQ,EAAA,EAAAG,EAAAP,SAC5BH,OAAOC,KAAKtB,EAAMiB,WAAW,CAACM,KAAK,KAAK,EAAA,KAAA,EAAAC;MAAA,EAGxC;EAAAT,QAGJA,QAAA,CAAA,EAAAd,GAAM,IAAID,EAAMiB,cAAcjB,EAAMiB,WAAWhB,GAAM,CAAEmB,YAAU,EAAA,IAAAY,EAChErC,GAAOsC,EAAA,EAAA,IACPb,YAAS;AAAA,UAAEpB,EAAMiB,WAAWhB,GAAM,CAAEmB;KAAU,QAC1CnB,GAAM,CAAED,OAAK,EACjBa,MAAMD,GAAS,CAAA,CAEhB,CAAA;EAAA"}
+{"version":3,"file":"PlayRenderer.js","names":["createSignal","onCleanup","onMount","Component","Renderer","StateProvider","ActionProvider","VisibilityProvider","ActionHandler","StateStore","createAtom","xstateStoreStateStore","watchSignal","PlayRendererProps","ViewMetadata","ActorProvider","PlayActor","PlayRenderer","props","view","setView","actor","currentView","get","internalStore","lastView","unwatch","nextView","_$createComponent","value","children","fallback","store","initialState","spec","state","Record","atom","handlers","Object","fromEntries","entries","actions","map","actionName","eventType","params","send","type","registry"],"sources":["../src/PlayRenderer.tsx"],"sourcesContent":["/**\n * PlayRenderer - Main SolidJS renderer component for XMachines Play architecture\n *\n * @packageDocumentation\n */\n\nimport { createSignal, onCleanup, onMount, type Component } from \"solid-js\";\nimport { Renderer, StateProvider, ActionProvider, VisibilityProvider } from \"@json-render/solid\";\nimport type { ActionHandler, StateStore } from \"@json-render/core\";\nimport { createAtom } from \"@xstate/store\";\nimport { xstateStoreStateStore } from \"@json-render/xstate\";\nimport { watchSignal } from \"@xmachines/play-signals\";\nimport type { PlayRendererProps } from \"./types.js\";\nimport type { ViewMetadata } from \"@xmachines/play-actor\";\nimport { ActorProvider, type PlayActor } from \"./useActor.js\";\n\n/**\n * Main renderer component that subscribes to actor signals and renders UI\n *\n * Architecture (per XMachines Play patterns):\n * - Subscribes to actor.currentView signal via TC39 Signal.subtle.Watcher\n * - Renders view.spec via @json-render/solid Renderer backed by the registry\n * - Routes actions to actor.send() via ActionProvider handlers\n * - SolidJS signal only for triggering renders, NOT business logic\n * - State store: uses external `store` prop if provided (controlled mode); otherwise\n *   creates a fresh @xstate/store atom per view transition seeded from spec.state.\n *\n * Invariant: Actor Authority - Actor decides all state transitions via guards.\n * Invariant: Passive Infrastructure - Component observes signals and sends events.\n * Invariant: Signal-Only Reactivity - Business logic state lives in actor signals.\n *\n * @example\n * ```typescript\n * import { PlayRenderer } from \"@xmachines/play-solid\";\n * import { defineRegistry } from \"@json-render/solid\";\n *\n * const { registry } = defineRegistry(catalog, { components: { ... } });\n *\n * // Uncontrolled — fresh atom per view, seeded from spec.state:\n * <PlayRenderer actor={actor} registry={registry} actions={{ login: \"auth.login\" }} />\n *\n * // Controlled — caller provides and owns the store:\n * import { createAtom } from \"@xstate/store\";\n * import { xstateStoreStateStore } from \"@json-render/xstate\";\n * const store = xstateStoreStateStore({ atom: createAtom({ username: \"\" }) });\n * <PlayRenderer actor={actor} registry={registry} store={store} actions={{ login: \"auth.login\" }} />\n * ```\n */\nexport const PlayRenderer: Component<PlayRendererProps> = (props) => {\n\t// Create SolidJS signal for view\n\t// Signal is NOT business logic state - it's just SolidJS's render trigger\n\tconst [view, setView] = createSignal<ViewMetadata | null>(\n\t\tprops.actor.currentView.get() as ViewMetadata | null,\n\t);\n\n\t// Internal per-view store — recreated on each view transition when no external store.\n\tlet internalStore: StateStore | null = null;\n\tlet lastView: ViewMetadata | null = null;\n\n\t// Bridge TC39 Signal to SolidJS signal\n\tonMount(() => {\n\t\tconst unwatch = watchSignal(props.actor.currentView, (nextView: ViewMetadata | null) => {\n\t\t\tsetView(nextView);\n\t\t});\n\t\tonCleanup(() => {\n\t\t\tunwatch();\n\t\t});\n\t});\n\n\treturn (\n\t\t<ActorProvider value={props.actor as PlayActor}>\n\t\t\t{(() => {\n\t\t\t\tconst currentView = view();\n\t\t\t\tif (!currentView) return props.fallback ?? null;\n\n\t\t\t\t// Resolve the store: external (controlled) or internal per-view atom\n\t\t\t\tlet store: StateStore;\n\t\t\t\tif (props.store) {\n\t\t\t\t\tstore = props.store;\n\t\t\t\t} else {\n\t\t\t\t\tif (internalStore === null || lastView !== currentView) {\n\t\t\t\t\t\tconst initialState =\n\t\t\t\t\t\t\t(currentView.spec.state as Record<string, unknown>) ?? {};\n\t\t\t\t\t\tinternalStore = xstateStoreStateStore({\n\t\t\t\t\t\t\tatom: createAtom(initialState),\n\t\t\t\t\t\t});\n\t\t\t\t\t\tlastView = currentView;\n\t\t\t\t\t}\n\t\t\t\t\tstore = internalStore;\n\t\t\t\t}\n\n\t\t\t\tconst handlers: Record<string, ActionHandler> = Object.fromEntries(\n\t\t\t\t\tObject.entries(props.actions ?? {}).map(([actionName, eventType]) => [\n\t\t\t\t\t\tactionName,\n\t\t\t\t\t\tasync (params: Record<string, unknown> = {}) =>\n\t\t\t\t\t\t\tprops.actor.send({ type: eventType, ...params }),\n\t\t\t\t\t]),\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<StateProvider store={store}>\n\t\t\t\t\t\t<ActionProvider handlers={handlers}>\n\t\t\t\t\t\t\t<VisibilityProvider>\n\t\t\t\t\t\t\t\t<Renderer spec={currentView.spec} registry={props.registry} />\n\t\t\t\t\t\t\t</VisibilityProvider>\n\t\t\t\t\t\t</ActionProvider>\n\t\t\t\t\t</StateProvider>\n\t\t\t\t);\n\t\t\t})()}\n\t\t</ActorProvider>\n\t);\n};\n"],"mappings":";;;;;;;;AAgDA,IAAaiB,KAA8CC,MAAU;CAGpE,IAAM,CAACC,GAAMC,KAAWpB,EACvBkB,EAAMG,MAAMC,YAAYC,KAAK,CAC7B,EAGGC,IAAmC,MACnCC,IAAgC;AAYpC,QATAvB,QAAc;EACb,IAAMwB,IAAUd,EAAYM,EAAMG,MAAMC,cAAcK,MAAkC;AACvFP,KAAQO,EAAS;IAChB;AACF1B,UAAgB;AACfyB,MAAS;IACR;GACD,EAEFE,EACEb,GAAa;EAAA,IAACc,QAAK;AAAA,UAAEX,EAAMG;;EAAkB,IAAAS,WAAA;AAAA,iBACrC;IACP,IAAMR,IAAcH,GAAM;AAC1B,QAAI,CAACG,EAAa,QAAOJ,EAAMa,YAAY;IAG3C,IAAIC;AACJ,IAAId,EAAMc,QACTA,IAAQd,EAAMc,UAEVR,MAAkB,QAAQC,MAAaH,OAG1CE,IAAgBb,EAAsB,EACrC0B,MAAM3B,EAFLY,EAAYY,KAAKC,SAAqC,EAAE,CAE5B,EAC7B,CAAC,EACFV,IAAWH,IAEZU,IAAQR;IAGT,IAAMc,IAA0CC,OAAOC,YACtDD,OAAOE,QAAQvB,EAAMwB,WAAW,EAAE,CAAC,CAACC,KAAK,CAACC,GAAYC,OAAe,CACpED,GACA,OAAOE,IAAkC,EAAE,KAC1C5B,EAAMG,MAAM0B,KAAK;KAAEC,MAAMH;KAAW,GAAGC;KAAQ,CAAC,CACjD,CACF,CAAC;AAED,WAAAlB,EACEvB,GAAa;KAAQ2B;KAAK,IAAAF,WAAA;AAAA,aAAAF,EACzBtB,GAAc;OAAWgC;OAAQ,IAAAR,WAAA;AAAA,eAAAF,EAChCrB,GAAkB,EAAA,IAAAuB,WAAA;AAAA,gBAAAF,EACjBxB,GAAQ;UAAA,IAAC8B,OAAI;AAAA,kBAAEZ,EAAYY;;UAAI,IAAEe,WAAQ;AAAA,kBAAE/B,EAAM+B;;UAAQ,CAAA;WAAA,CAAA;;OAAA,CAAA;;KAAA,CAAA;OAK3D;;EAAA,CAAA"}

package/dist/index.js

@@ -1,2 +1,4 @@
-import { PlayRenderer as e } from "./PlayRenderer.js";
-export { e as PlayRenderer };
+import { defineRegistry as e, useStateBinding as t } from "./node_modules/@json-render/solid/dist/index.js";
+import { useActor as n } from "./useActor.js";
+import { PlayRenderer as r } from "./PlayRenderer.js";
+export { r as PlayRenderer, e as defineRegistry, n as useActor, t as useStateBinding };