@playfast/reform-remote 1.0.1 → 1.1.0

package/README.md

@@ -19,7 +19,7 @@ data — UI-tree patches one way, trigger invocations the other — so there is
 This builds on reform's existing seams: the **`ui` contract** already separates logic from
 presentation, the **`CaptureSink`** already serializes the rendered surface headlessly (the same
 mechanism proofs use), and the **schema-first `ui`** form (`ui(name, { props, events })`) carries
-the wire schemas that make props and trigger payloads typed *and* runtime-validated at the seam.
+the wire schemas that make props and trigger payloads typed _and_ runtime-validated at the seam.
 See [`REMOTE_UI.md`](../../REMOTE_UI.md) for the design.
 
 ## Install
@@ -35,15 +35,15 @@ sockets pair with [`@playfast/reform-remote-node`](https://www.npmjs.com/package
 
 ## Key concepts
 
-| Concept | What it does |
-| --- | --- |
-| `makeRemoteServer(scene)` | Renders a `Scene` to a `WireTree`; `render()`/`renderDiff()` emit full tree/patches; `invoke(handle, payload)` fires a trigger. |
-| `renderWireTree(tree, { views, invoke })` | Folds a `WireTree` back into React using local presentations. |
-| `remoteContract({...})` / `remoteViews<C>({...})` | The trpc-style typesafe seam — server declares the contract, client implements exactly it. |
-| `serve({ scene, transport })` / `connect({ transport, views })` | Bind both ends to any `RemoteTransport`. |
-| `inMemoryTransportPair()` | In-process duplex `RemoteTransport` (the simplest concrete adapter). |
-| `<RemoteUI transport views />` / `useRemoteUI` | React binding that owns connect, subscription, re-render, teardown. |
-| `useConnectionStatus(reporter)` | Reads a transport's live `StatusReporter` status. |
+| Concept                                                         | What it does                                                                                                                    |
+| --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `makeRemoteServer(scene)`                                       | Renders a `Scene` to a `WireTree`; `render()`/`renderDiff()` emit full tree/patches; `invoke(handle, payload)` fires a trigger. |
+| `renderWireTree(tree, { views, invoke })`                       | Folds a `WireTree` back into React using local presentations.                                                                   |
+| `remoteContract({...})` / `remoteViews<C>({...})`               | The trpc-style typesafe seam — server declares the contract, client implements exactly it.                                      |
+| `serve({ scene, transport })` / `connect({ transport, views })` | Bind both ends to any `RemoteTransport`.                                                                                        |
+| `inMemoryTransportPair()`                                       | In-process duplex `RemoteTransport` (the simplest concrete adapter).                                                            |
+| `<RemoteUI transport views />` / `useRemoteUI`                  | React binding that owns connect, subscription, re-render, teardown.                                                             |
+| `useConnectionStatus(reporter)`                                 | Reads a transport's live `StatusReporter` status.                                                                               |
 
 ## How it fits together
 
@@ -106,12 +106,12 @@ sockets pair with [`@playfast/reform-remote-node`](https://www.npmjs.com/package
 
 ## Transport adapters
 
-| Package | Role | Built on |
-| --- | --- | --- |
-| `inMemoryTransportPair` (here) | in-process duplex | — |
-| [`@playfast/reform-remote-node`](https://www.npmjs.com/package/@playfast/reform-remote-node) | WebSocket server | `ws` |
-| [`@playfast/reform-remote-bun`](https://www.npmjs.com/package/@playfast/reform-remote-bun) | WebSocket server | `Bun.serve` |
-| [`@playfast/reform-remote-web`](https://www.npmjs.com/package/@playfast/reform-remote-web) | WebSocket client (factory, auto-reconnect) | global `WebSocket` |
+| Package                                                                                      | Role                                       | Built on           |
+| -------------------------------------------------------------------------------------------- | ------------------------------------------ | ------------------ |
+| `inMemoryTransportPair` (here)                                                               | in-process duplex                          | —                  |
+| [`@playfast/reform-remote-node`](https://www.npmjs.com/package/@playfast/reform-remote-node) | WebSocket server                           | `ws`               |
+| [`@playfast/reform-remote-bun`](https://www.npmjs.com/package/@playfast/reform-remote-bun)   | WebSocket server                           | `Bun.serve`        |
+| [`@playfast/reform-remote-web`](https://www.npmjs.com/package/@playfast/reform-remote-web)   | WebSocket client (factory, auto-reconnect) | global `WebSocket` |
 
 ## License
 

package/package.json

@@ -1,36 +1,38 @@
 {
   "name": "@playfast/reform-remote",
-  "playbook": "./playbook",
-  "version": "1.0.1",
-  "type": "module",
+  "version": "1.1.0",
   "description": "Run a reform scene's logic on the server and stream its rendered UI to a thin client over any duplex transport.",
   "keywords": [
-    "reform",
     "effect",
+    "react",
+    "reform",
     "remote",
     "server-driven-ui",
-    "transport",
-    "react"
+    "transport"
   ],
+  "bugs": {
+    "url": "https://github.com/playfast/reform/issues"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/playfast/reform.git",
     "directory": "packages/reform-remote"
   },
-  "bugs": {
-    "url": "https://github.com/playfast/reform/issues"
-  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "type": "module",
   "sideEffects": false,
   "exports": {
     "./package.json": "./package.json",
     ".": "./src/index.ts",
     "./*": "./src/*.ts"
   },
-  "files": [
-    "src",
-    "README.md"
-  ],
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "clean": "rm -rf dist .tsbuildinfo",
     "check": "tsc --noEmit",
@@ -42,11 +44,9 @@
     "lint:fix": "oxlint --fix src"
   },
   "peerDependencies": {
+    "@playfast/reform": "*",
     "effect": "*",
-    "react": "^19.0.0",
-    "@playfast/reform": "*"
+    "react": "^19.0.0"
   },
-  "publishConfig": {
-    "access": "public"
-  }
+  "playbook": "./playbook"
 }

package/src/client-keyed-slot.test.ts

@@ -4,27 +4,18 @@ import { createRoot } from 'react-dom/client'
 import { expect, test } from 'vitest'
 import { Schema as S } from 'effect'
 import { Composition, slot, Ui, ui } from '@playfast/reform'
-import type { WireNode } from '@playfast/reform'
+import type { WireNode } from '@playfast/reform/internal'
 import { remoteViews, renderWireTree, type RemoteViews } from './client'
 
-/**
- * Regression for the KEYED-SLOT bug ("the sidebar showed every branch row under every repo
- * section"). The client slot thunk renders ALL of a slot's wire children on EACH invocation and
- * ignores call-site props — correct for a singleton slot rendered once, but wrong for a LIST
- * slot a view invokes once PER ITEM (each section did `<slots.Row .../>` per branch), so every
- * call rendered the whole list: N sections × M rows.
- *
- * The fix: a view passes `<slots.Row slotKey={id} />` and the thunk renders only the ONE wire
- * child whose `key` matches (the per-item identity captured server-side from the React `key`).
- * Omitting `slotKey` keeps the render-all-children behaviour (the singleton case). These tests
- * pin both halves directly at the framework boundary, with NO app wiring.
- */
-
-// A list item carrying a `label` so each rendered child is identifiable in the DOM.
 class ItemUi extends ui('Item', { props: S.Struct({ label: S.String }) }) {}
-class ItemComp extends Composition.make('Item', { title: 'Item', ui: ItemUi }) {}
-class ItemSlot extends slot('Item')<typeof ItemComp>() {}
-class ListUi extends ui('List')<{ props: { mode: string }; slots: { Item: ItemSlot } }>() {}
+
+class ItemComp extends Composition.make('Item', { title: 'Item', ui: ItemUi })<ItemComp>() {}
+
+class ItemSlot extends slot('Item')<ItemSlot, typeof ItemComp>() {}
+class ListUi extends ui('List', {
+  props: S.Struct({ mode: S.String }),
+  slots: { Item: ItemSlot },
+}) {}
 
 const node = (over: Partial<WireNode> & Pick<WireNode, 'id' | 'name'>): WireNode => ({
   parentId: null,
@@ -39,8 +30,6 @@ const ItemView = Ui.make(ItemUi, ({ label }) =>
   createElement('span', { 'data-item': label }, label),
 )
 
-// Three keyed children (a/b/c) under one `Item` slot — the wire shape the server emits for a
-// list. `mode` switches the parent view between keyed selection and the legacy render-all.
 const tree: ReadonlyArray<WireNode> = [
   node({ id: '0', name: 'List', props: [{ _tag: 'Data', name: 'mode', value: 'keyed' }] }),
   node({
@@ -89,32 +78,34 @@ const renderWith = async (
 }
 
 test('a keyed slot renders ONE matching child per call site, not the whole list', async () => {
-  // Two "sections", each invoking the SAME `Item` slot once with a different `slotKey` — the
-  // exact shape that duplicated rows. Each must render only its own child.
   const ListView = Ui.make(ListUi, (_props, slots) =>
     createElement(
       'div',
       null,
-      createElement('section', { 'data-section': 'one' }, createElement(slots.Item, { slotKey: 'a' })),
-      createElement('section', { 'data-section': 'two' }, createElement(slots.Item, { slotKey: 'b' })),
+      createElement(
+        'section',
+        { 'data-section': 'one' },
+        createElement(slots.Item, { slotKey: 'a' }),
+      ),
+      createElement(
+        'section',
+        { 'data-section': 'two' },
+        createElement(slots.Item, { slotKey: 'b' }),
+      ),
     ),
   )
   const container = await renderWith(ListView, tree)
 
-  // Exactly two items rendered total — NOT 2 sections × 3 children = 6 (the bug).
   expect(container.querySelectorAll('[data-item]').length).toBe(2)
-  // Each section shows ONLY its keyed child.
   const one = container.querySelector('[data-section="one"]')
   const two = container.querySelector('[data-section="two"]')
   expect(one?.querySelectorAll('[data-item]').length).toBe(1)
   expect(one?.querySelector('[data-item]')?.getAttribute('data-item')).toBe('a')
   expect(two?.querySelector('[data-item]')?.getAttribute('data-item')).toBe('b')
-  // The unreferenced child 'c' is rendered nowhere.
   expect(container.querySelector('[data-item="c"]')).toBeNull()
 })
 
 test('an un-keyed slot still renders ALL its children (singleton/back-compat path)', async () => {
-  // No `slotKey` → render every child of the slot, unchanged from before the keyed API.
   const ListView = Ui.make(ListUi, (_props, slots) =>
     createElement('div', null, createElement(slots.Item)),
   )

package/src/client-remount.test.ts

@@ -5,34 +5,21 @@ import { createRoot } from 'react-dom/client'
 import { expect, test } from 'vitest'
 import { Schema as S } from 'effect'
 import { Composition, slot, Ui, ui } from '@playfast/reform'
-import type { WireNode } from '@playfast/reform'
+import type { WireNode } from '@playfast/reform/internal'
 import type { ServerMessage } from './transport'
 import { connect } from './transport'
 import { inMemoryTransportPair } from './memory'
 import { remoteViews } from './client'
 
-/**
- * Regression for the slot-remount bug: a background patch that re-renders ONLY a parent node
- * must NOT unmount + remount the parent's slot children. Before the fix, `renderWireTree`
- * rebuilt each slot's component closure every render, so a parent rendering a child as
- * `<slots.Child/>` handed React a NEW component type each frame — React then tore down the
- * whole child subtree and rebuilt it, wiping every descendant view's local `useState` (in the
- * app: the onboarding modal's open/step state snapped back, closing the modal on any unrelated
- * background patch once server-initiated streaming started delivering them).
- *
- * This test renders the client into a REAL React root (static markup can't observe fiber
- * preservation), captures the child view's mount-time `useState` id, sends a patch touching
- * only the parent, and asserts the child id is unchanged — i.e. the child fiber survived.
- */
-
-// A child whose CLIENT view owns local state. Each fresh mount picks the next mount id, so a
-// remount is observable as a changed id.
 class ChildUi extends ui('Child', { props: S.Struct({}) }) {}
-class ChildComp extends Composition.make('Child', { title: 'Child', ui: ChildUi }) {}
-class MainSlot extends slot('Main')<typeof ChildComp>() {}
-// A parent carrying a `count` prop (the thing a background patch bumps) and one slot child it
-// renders as `<slots.Main/>` — the component form that triggered the remount.
-class HostUi extends ui('Host')<{ props: { count: number }; slots: { Main: MainSlot } }>() {}
+
+class ChildComp extends Composition.make('Child', { title: 'Child', ui: ChildUi })<ChildComp>() {}
+
+class MainSlot extends slot('Main')<MainSlot, typeof ChildComp>() {}
+class HostUi extends ui('Host', {
+  props: S.Struct({ count: S.Number }),
+  slots: { Main: MainSlot },
+}) {}
 
 const node = (over: Partial<WireNode> & Pick<WireNode, 'id' | 'name'>): WireNode => ({
   parentId: null,
@@ -82,7 +69,6 @@ test('a background patch on the PARENT keeps its slot child mounted (local useSt
       root.render(createElement(Root))
     })
 
-    // First frame: a host (count 0) holding one slot child.
     await act(async () => {
       serverTransport.send({
         _tag: 'Snapshot',
@@ -97,23 +83,23 @@ test('a background patch on the PARENT keeps its slot child mounted (local useSt
     const childIdBefore = container.querySelector('[data-child-id]')?.getAttribute('data-child-id')
     expect(childIdBefore).toBe('mount-1')
 
-    // A background patch that touches ONLY the host (count 0 → 7). The child node is unchanged
-    // and not in the patch at all.
     await act(async () => {
       serverTransport.send({
         _tag: 'Patches',
         patches: [
           {
             _tag: 'Upsert',
-            node: node({ id: '0', name: 'Host', props: [{ _tag: 'Data', name: 'count', value: 7 }] }),
+            node: node({
+              id: '0',
+              name: 'Host',
+              props: [{ _tag: 'Data', name: 'count', value: 7 }],
+            }),
           },
         ],
       })
     })
 
-    // The parent re-rendered with the new count…
     expect(container.querySelector('[data-count]')?.getAttribute('data-count')).toBe('7')
-    // …but the child was NOT remounted: same fiber, same mount id, and no second mount ran.
     expect(container.querySelector('[data-child-id]')?.getAttribute('data-child-id')).toBe(
       childIdBefore,
     )

package/src/client.ts

@@ -1,198 +1,109 @@
 import { createElement, Fragment, type ReactNode, useRef } from 'react'
-import { Option, Record as Rec, Schema } from 'effect'
+import { Effect, Record as Rec, Schema } from 'effect'
+import { type MadeView, Ui, type UiContract, UiViewContract, type ViewImpl } from '@playfast/reform'
 import {
-  type MadeView,
-  Ui,
-  type UiClass,
-  UiViewContract,
+  type AnyMadeView,
+  type AnyUi,
+  type UiReflection,
+  type WiredUiManifest,
   Wire,
   type WireNode,
   type WireTree,
-} from '@playfast/reform'
+} from '@playfast/reform/internal'
 
-// A `Ui.make` view of any contract. The `any` is the same variance escape the core
-// uses for `Schema<any, any>`: a heterogeneous list of contract-typed views cannot
-// share one element type (function params are contravariant in the contract), and the
-// real contract is recovered at runtime from the view's carried brand.
-type AnyMadeView = MadeView<any>
-
-/**
- * The client side of the remote transport: fold the server's patches with
- * `Wire.apply`, then render the resulting `WireTree` with locally registered
- * presentations. The presentations are the SAME `Ui.make` views the local
- * `@playfast/react` renderer uses — one presentation, many consumers (REMOTE_UI.md):
- *
- *  - Each wire node's view runs as a stable React COMPONENT, so a view body's own
- *    hooks (`useState`, effects) work exactly as under `@playfast/react`.
- *  - Slots are COMPONENTS that render that slot's wire children, so a view's
- *    `<slots.Foo/>` / `createElement(slots.Foo, props)` works unchanged (the
- *    per-slot props were captured server-side; the client component ignores them).
- *  - Data props are DECODED through the contract's own props schema — the inverse of
- *    the server's `Schema.encodeUnknown` — so `Option`/`Date`/branded props arrive as
- *    real instances, not their `{_tag,value}` wire shape.
- *
- * A client view is authored with `Ui.make(SomeUi, …)` — exactly like a local view —
- * and registered with `remoteViews<AppContract>({ Some: SomeView, … })`. There is no
- * separate `remoteView` call: a `Ui.make` view carries its own contract, so `remoteViews`
- * recovers each view's wire name + props schema straight from it.
- */
-
-/**
- * The dynamic presentation shape the renderer calls — slots and events erased to
- * their runtime form. Views are authored with `Ui.make` (contract-typed); this is
- * only the internal shape `renderWireTree` invokes them through.
- */
-/** Props a slot thunk/component accepts — a React element-props boundary
- *  (`<slots.Row slotKey={id}/>`), so it stays a plain optional-field shape. */
 export interface SlotPropsExternalApi {
   readonly slotKey?: string
 }
 
 export type RemoteView = (
   props: Record<string, unknown>,
-  // A slot thunk optionally takes `{ slotKey }` to select a single keyed child (see the keyed-
-  // slot handling in `WireNodeView`); omitting it renders all of the slot's children.
   slots: Record<string, (slotProps?: SlotPropsExternalApi) => ReactNode>,
   events: Record<string, (payload: unknown) => void>,
 ) => ReactNode
 
-/** A contract-bound view paired with the contract name the renderer looks it up by, and
- *  (for a WIRED contract) the props schema used to DECODE wire props back into their
- *  decoded domain types — the symmetric inverse of the server's `Schema.encodeUnknown`.
- *  Without it, an `Option`/`Date`/branded prop would reach the view as its raw encoded
- *  shape (e.g. `{_tag:'Some',value}`) instead of a real `Option`. */
 export interface RegisteredRemoteView {
   readonly name: string
   readonly view: RemoteView
-  readonly propsSchema: Option.Option<Schema.Schema<Record<string, unknown>, unknown>>
 }
 
-/** The by-name presentation record the renderer walks — the unbranded runtime shape behind
- *  a `RemoteViewSet`. Internal: it is NOT part of the public API, so a raw record of this
- *  shape can never be handed to `connect`/`renderWireTree`/`<RemoteUI>` (those demand the
- *  branded `RemoteViewSet<C>`). A `RemoteViewSet<C>` is structurally `ViewRegistry & brand`,
- *  so it always widens back to this when the renderer needs the plain lookup. */
 type ViewRegistry = Readonly<Record<string, RegisteredRemoteView>>
 
-/** Phantom brand carrying the server `RemoteContract` a view set was checked against. Typed
- *  as a function OF `C` (never called) so the contract appears in the type WITHOUT needing a
- *  runtime value of `C` — `remoteViews<C>(views)` can brand the set cast-free even though the
- *  client imports the contract as a TYPE only (trpc-style), never as a value. */
 const ViewSetContract: unique symbol = Symbol.for('reform-remote/view-set-contract')
 
-/**
- * The presentation set the client renders by contract name — the `ViewRegistry` the renderer
- * walks, BRANDED with the server `RemoteContract` `C` it was checked against. The brand is
- * what makes the whole client chain typesafe: `connect`, `renderWireTree`, and `<RemoteUI>`
- * accept only a `RemoteViewSet` *produced by* `remoteViews<C>(…)` — never an arbitrary
- * `Record`, which lacks the brand — so a view set cannot reach the renderer without having
- * been type-checked to implement exactly the server's shape. `C` is recovered by inference at
- * each consumer, so passing a `RemoteViewSet<AppContract>` types the whole chain to that app.
- *
- * No default for `C`: a `RemoteViewSet` is ALWAYS bound to a concrete contract (inferred from
- * `remoteViews<AppContract>(…)`), never silently widened to the `RemoteContract` bound — that
- * is what keeps the safety end to end.
- */
 export type RemoteViewSet<C extends RemoteContract> = ViewRegistry & {
-  readonly [ViewSetContract]: (contract: C) => void
+  readonly [ViewSetContract]: (contract: C) => C
 }
 
-/**
- * The shared "shape" the server publishes and the client implements — the trpc `AppRouter`
- * analog. It is a registry of the server's UI contracts (the `ui(...)` classes the scene's
- * wire tree can emit) keyed by a label. The SERVER declares it ONCE (`remoteContract({…})`)
- * and exports `typeof` it; the CLIENT imports THAT TYPE and `remoteViews<AppContract>(…)`
- * checks its view set against it, so the client is forced to implement exactly the server's
- * views. The wire name + props schema are read from each view's own contract at runtime, so
- * the label is only the type-level join key — the contract is never needed as a value here.
- *
- * `UiClass<any>` is the registry's *upper bound*; the precise per-contract types are
- * preserved by inferring `C` narrowly at the `remoteContract` declaration site (so
- * `Ui.Contract<C[K]>` recovers the real contract, not `any`).
- */
-export type RemoteContract = Readonly<Record<string, UiClass<any>>>
+type RemoteUi = UiReflection<UiContract, string> & AnyUi & { readonly manifest: WiredUiManifest }
+export type RemoteContract = Readonly<Record<string, RemoteUi>>
 
-/**
- * Declare a server's `RemoteContract` with its precise key/contract types inferred (the
- * `const` type parameter keeps each value's specific `UiClass<…>` instead of widening to
- * the `UiClass<any>` bound). Define it ONCE next to the scene and export `typeof` it as the
- * UI requirements the client implements against:
- *
- *   export const AppContract = remoteContract({ Shell: ShellUi, Sidebar: SidebarUi })
- *   export type AppContract = typeof AppContract
- *
- * The client then imports only the TYPE and implements it:
- *
- *   import type { AppContract } from '…/app-contract'
- *   export const views = remoteViews<AppContract>({ Shell: ShellView, Sidebar: SidebarView })
- */
 export const remoteContract = <const C extends RemoteContract>(contract: C): C => contract
 
-/**
- * The client view set a `RemoteContract` demands: exactly one `Ui.make` view per contract,
- * each typed to THAT contract (`MadeView<Ui.Contract<C[K]>>`). A missing key, an extra key,
- * or a view authored for the wrong contract is a COMPILE error — the client cannot connect
- * to the server without implementing precisely its shape, the same guarantee trpc gives a
- * client built from `AppRouter`.
- */
+type RemoteViewFor<U extends RemoteUi> =
+  U extends UiReflection<infer Contract, infer Name> ? MadeView<Contract, Name, U> : never
 export type RemoteViews<C extends RemoteContract> = {
-  readonly [K in keyof C]: MadeView<Ui.Contract<C[K]>>
+  readonly [K in keyof C]: RemoteViewFor<C[K]>
+}
+
+type RemoteSlots = Record<string, (slotProps?: SlotPropsExternalApi) => ReactNode>
+type RemoteEvents = Record<string, (payload: unknown) => void>
+
+function bindSlots<C extends Ui.UiContract>(slots: RemoteSlots): Parameters<ViewImpl<C>>[1]
+function bindSlots(slots: RemoteSlots): unknown {
+  return slots
 }
 
-/**
- * Implement a server's UI shape: `remoteViews<AppContract>({ … })` takes the server's
- * `RemoteContract` as a TYPE PARAMETER (the client imports only `typeof AppContract`, never a
- * value — trpc-style) and a set of `Ui.make` views type-checked to implement EXACTLY that
- * contract. Each view carries its own contract (`Ui.make(SomeUi, …)`), so the wire name and
- * props schema are recovered from the view itself — a renamed/retyped contract can never
- * drift from its presentation, and the SAME view authored for the local renderer is reused.
- * The result is a `RemoteViewSet<C>` (the branded set `connect`/`renderWireTree`/`<RemoteUI>`
- * accept); an unbranded `Record` can never be substituted.
- */
+function bindEvents<C extends Ui.UiContract>(events: RemoteEvents): Parameters<ViewImpl<C>>[2]
+function bindEvents(events: RemoteEvents): unknown {
+  return events
+}
+
+const registerView = (view: AnyMadeView): RegisteredRemoteView =>
+  view.capture(
+    <C extends Ui.UiContract, N extends string, U extends Ui.AnyUi>(exact: MadeView<C, N, U>) => {
+      const contract = exact[UiViewContract]
+      const propsReflection = contract.manifest.props
+      if (propsReflection === undefined) {
+        return Effect.runSync(
+          Effect.dieMessage(
+            `reform-remote: view ${contract.manifest.name} needs a wire props schema`,
+          ),
+        )
+      }
+      const propsSchema = Schema.make<C['props'], unknown>(propsReflection.ast)
+      return {
+        name: contract.manifest.name,
+        view: (encoded, slots, events) =>
+          exact(
+            Schema.decodeUnknownSync(propsSchema)(encoded),
+            bindSlots<C>(slots),
+            bindEvents<C>(events),
+          ),
+      }
+    },
+  )
+
 export const remoteViews = <C extends RemoteContract>(views: RemoteViews<C>): RemoteViewSet<C> => {
   const madeViews: ReadonlyArray<AnyMadeView> = Object.values(views)
   const byName: ViewRegistry = Rec.fromEntries(
     madeViews.map((view): readonly [string, RegisteredRemoteView] => {
-      const viewContract = view[UiViewContract]
-      // `Node` is `ReactNode` and `ViewImpl`'s params widen to the dynamic shape the
-      // renderer calls, so the contract-typed view IS a `RemoteView` — no cast.
-      const entry: RegisteredRemoteView = {
-        name: viewContract.manifest.name,
-        view,
-        propsSchema: Option.fromNullable(viewContract.manifest.props),
-      }
+      const entry = registerView(view)
       return [entry.name, entry]
     }),
   )
-  // Brand the record with the contract `C` it was checked against. The brand is a phantom
-  // function OF `C` that is never called, so it needs NO runtime value of `C` — the set is
-  // built cast-free even though the client only has the contract as a type. The renderer
-  // reads the set by string key; the brand is never read at runtime.
-  return { ...byName, [ViewSetContract]: (_contract: C): void => {} }
+  return { ...byName, [ViewSetContract]: (contract: C): C => contract }
 }
 
 export interface ClientConfig<C extends RemoteContract> {
-  /** Presentation (+ optional props schema) per contract name — a contract-checked set. */
   readonly views: RemoteViewSet<C>
-  /** Deliver a trigger invocation to the server (the transport's send). */
   readonly invoke: (handle: string, payload: unknown) => void
 }
 
-/** What the renderer actually walks: the unbranded `ViewRegistry` + `invoke`. Any
- *  `ClientConfig<C>` widens to this (its `RemoteViewSet<C>` views widen to `ViewRegistry`),
- *  so the recursive renderer is contract-agnostic — the contract check already happened at
- *  `remoteViews`. Internal: callers only ever supply a `ClientConfig<C>`. */
 interface RenderConfig {
   readonly views: ViewRegistry
   readonly invoke: (handle: string, payload: unknown) => void
 }
 
-/**
- * A stable top-level component for one wire node — stable identity so React keeps a
- * view's local state across frames (the `node.id` keys it). It decodes props, builds
- * slot components, and runs the registered view INSIDE this component so the view's
- * own hooks get a fiber. A child slot renders its wire children as nested `WireNodeView`s.
- */
 interface WireNodeViewProps {
   readonly node: WireNode
   readonly tree: WireTree
@@ -200,20 +111,10 @@ interface WireNodeViewProps {
 }
 
 const WireNodeView = ({ node, tree, config }: WireNodeViewProps): ReactNode => {
-  // The latest render inputs, for the stable slot closures below to read. Mutated every
-  // render so a slot always renders against the current tree, even though its function
-  // identity never changes.
+  // Stable slot closures read current inputs through this ref.
   const latest = useRef({ node, tree, config })
   latest.current = { node, tree, config }
-  // Slot components cached by name across renders. CRITICAL for state preservation: a parent
-  // view that renders a slot as `<slots.Foo/>` (the Ui.make convention) passes the slot value
-  // as the element TYPE — if that value were a fresh closure each render (as it was before),
-  // React would see a new component type every frame and UNMOUNT+REMOUNT the whole slot
-  // subtree, resetting every descendant view's local hook state (e.g. a modal's open/step
-  // `useState` would snap back, closing the modal on any unrelated background patch). Caching
-  // the closure by slot name gives `<slots.Foo/>` a stable type, so React reconciles the slot's
-  // children by id instead of remounting them. The closure reads `latest` so it still renders
-  // the current tree.
+  // Fresh slot component types remount descendants and reset their hooks.
   const slotCache = useRef<Record<string, () => ReactNode>>({})
 
   const registered = config.views[node.name]
@@ -222,31 +123,22 @@ const WireNodeView = ({ node, tree, config }: WireNodeViewProps): ReactNode => {
   }
 
   const encoded: Record<string, unknown> = Rec.fromEntries(
-    node.props.flatMap((prop) => (prop._tag === 'Data' ? [[prop.name, prop.value] as const] : [])),
-  )
-  const events: Record<string, (payload: unknown) => void> = Rec.fromEntries(
-    node.props.flatMap((prop) =>
-      prop._tag === 'Event'
-        ? [[prop.name, (payload: unknown) => config.invoke(prop.handle, payload)] as const]
-        : [],
+    node.props.flatMap(
+      (prop): ReadonlyArray<readonly [string, unknown]> =>
+        prop._tag === 'Data' ? [[prop.name, prop.value]] : [],
     ),
   )
-  const props: Record<string, unknown> = Option.match(registered.propsSchema, {
-    onNone: () => encoded,
-    onSome: (schema) => Schema.decodeUnknownSync(schema)(encoded),
-  })
+  const eventEntries = node.props.flatMap(
+    (prop): ReadonlyArray<readonly [string, (payload: unknown) => void]> => {
+      if (prop._tag !== 'Event') {
+        return []
+      }
+      return [[prop.name, (payload: unknown) => config.invoke(prop.handle, payload)]]
+    },
+  )
+  const events: Record<string, (payload: unknown) => void> = Rec.fromEntries(eventEntries)
 
-  // A slot resolves to a COMPONENT rendering that slot's wire children — usable as
-  // `<slots.Foo/>` (Ui.make convention) or `slots.Foo()` (thunk convention). The function is
-  // cached so its identity is STABLE across renders (see `slotCache` above); it reads
-  // `latest.current` so each invocation renders against the current tree/config.
-  //
-  // KEYED SLOTS: when the caller passes `slotKey` (`<slots.Row slotKey={id} />`), render only
-  // the ONE wire child whose `key` matches — the per-item identity the server captured from
-  // the parent's React `key` (see WireNode.key). This is what lets a LIST slot be invoked once
-  // per item without each call rendering the WHOLE list (the duplicate-rows bug). With NO
-  // `slotKey` the behaviour is unchanged: render every child of the slot (correct for a
-  // singleton slot rendered once, e.g. `<slots.Create/>`).
+  // slotKey selects one wire child; omitting it renders every child in the slot.
   const slotFor = (slotName: string): ((slotProps?: SlotPropsExternalApi) => ReactNode) => {
     const cached = slotCache.current[slotName]
     if (cached !== undefined) {
@@ -275,16 +167,15 @@ const WireNodeView = ({ node, tree, config }: WireNodeViewProps): ReactNode => {
     return stable
   }
 
-  // Resolve slots LAZILY by name: a view referencing `<slots.Item/>` when that slot has no
-  // wire children this frame (e.g. an empty list) gets a component that renders nothing,
-  // rather than `undefined` (which React rejects as an invalid element type). Mirrors the
-  // engine's total slot proxies — every declared slot is always callable.
+  // Empty slots must still produce a callable component, not an invalid undefined element type.
   const slots: Record<string, (slotProps?: SlotPropsExternalApi) => ReactNode> = new Proxy(
     Object.create(null),
-    { get: (_target, key) => (typeof key === 'string' ? slotFor(key) : undefined) },
+    {
+      get: (_target, key) => (typeof key === 'string' ? slotFor(key) : undefined),
+    },
   )
 
-  return registered.view(props, slots, events)
+  return registered.view(encoded, slots, events)
 }
 
 export const renderWireTree = <C extends RemoteContract>(