@playfast/reform-remote 1.0.1 → 1.1.0

package/src/fixtures.ts

@@ -3,61 +3,83 @@ import { Duration, Effect, Layer, Option, Schema as S } from 'effect'
 import {
   Channel,
   Composition,
+  type CapturedScene,
   type DerivedContract,
   Engine,
   Event,
   type EventOf,
   Procedure,
-  Props,
   Reducer,
-  type Scene,
   State,
   StateGroup,
   Ui,
-  type WiredUi,
   each,
   mount,
   one,
   provide,
   scene,
   slot,
+  type SlotService,
   ui,
 } from '@playfast/reform'
+import {
+  type CompositionChildSummary,
+  type EngineServices,
+  type WiredUi,
+} from '@playfast/reform/internal'
 
-/**
- * Shared scenes the remote-transport tests render server-side. Each is a closed
- * `Scene` wired the canonical way — compositions + reducers in `Layer.mergeAll`,
- * then `provideMerge(presentation)` (views + seeded state) and `provideMerge(Engine)`
- * — so they exercise the real runtime, not a stub. The compositions return
- * headless structures; the server expands slot fills from those structures and the
- * client renders the resulting wire tree with its own `RemoteView`s (thunk slots),
- * which the transport tests supply separately.
- */
-
-// ── counter: a flat composition with own state + one event ────────────────────
-class Count extends State.make('count', S.Number) {}
+const CountBase: State.StateDefinition<'count', number, typeof S.Number> = State.make(
+  'count',
+  S.Number,
+)
+class Count extends CountBase {}
 class Counters extends StateGroup.make(Count) {}
 class Bumped extends Event.make('Bumped', S.Struct({ by: S.Number })) {}
-class Bump extends Reducer.make('Bump', { states: [Count], events: [Bumped] }) {}
+class Bump extends Reducer.make('Bump', {
+  states: [Count],
+  events: [Bumped],
+}) {}
 const CounterUiBase: WiredUi<
   DerivedContract<{
     props: S.Struct<{ count: typeof S.Number }>
     events: { bump: S.Struct<{ by: typeof S.Number }> }
-  }>
+  }>,
+  'Counter'
 > = ui('Counter', {
   props: S.Struct({ count: S.Number }),
   events: { bump: S.Struct({ by: S.Number }) },
 })
 export class CounterUi extends CounterUiBase {}
-class Counter extends Composition.make('Counter', { title: 'Counter', ui: CounterUi, states: [Count] }) {}
 
-/** A boot event the counter scene dispatches before its first render. */
+class Counter extends Composition.make('Counter', {
+  title: 'Counter',
+  ui: CounterUi,
+  states: [Count],
+})<Counter>() {}
+
+type CounterScene = CapturedScene<
+  typeof CounterUi.Contract,
+  readonly [typeof Count],
+  | EngineServices
+  | State.StateStore<'count', number>
+  | Ui.UiService<'Counter'>
+  | Composition.CompositionId<'Counter', Counter, never>,
+  unknown,
+  'Counter',
+  Counter
+>
+
 export const bumpedBy = (amount: number): EventOf<'Bumped', { by: number }> =>
   Event.construct(Bumped, { by: amount })
 
-export const counterScene = (boot?: ReadonlyArray<EventOf<'Bumped', { by: number }>>): Scene => {
+const makeCounterScene = (
+  boot?: ReadonlyArray<EventOf<'Bumped', { by: number }>>,
+): CounterScene => {
   const presentation = Layer.mergeAll(
-    provide(CounterUi, Ui.make(CounterUi, ({ count }) => `count:${count}`)),
+    provide(
+      CounterUi,
+      Ui.make(CounterUi, ({ count }) => `count:${count}`),
+    ),
     StateGroup.live(Counters, { count: 0 }),
   )
   const app = Layer.mergeAll(
@@ -70,14 +92,14 @@ export const counterScene = (boot?: ReadonlyArray<EventOf<'Bumped', { by: number
   ).pipe(Layer.provideMerge(presentation), Layer.provideMerge(Engine))
   return scene(Counter, boot === undefined ? { provide: [app] } : { provide: [app], boot })
 }
+export const counterScene: typeof makeCounterScene = makeCounterScene
 
-// ── structure counter: kept as explicit structure-event coverage. The `bump`
-// trigger rides ON the structure, so the server reads it from `structure.events`,
-// registers the handle, and produces the same wire shape as a legacy view body.
-// ───────────────────────────────────────────────────────────────────────────────
-export const structureCounterScene = (): Scene => {
+const makeStructureCounterScene = (): CounterScene => {
   const presentation = Layer.mergeAll(
-    provide(CounterUi, Ui.make(CounterUi, ({ count }) => `count:${count}`)),
+    provide(
+      CounterUi,
+      Ui.make(CounterUi, ({ count }) => `count:${count}`),
+    ),
     StateGroup.live(Counters, { count: 0 }),
   )
   const app = Layer.mergeAll(
@@ -90,21 +112,45 @@ export const structureCounterScene = (): Scene => {
   ).pipe(Layer.provideMerge(presentation), Layer.provideMerge(Engine))
   return scene(Counter, { provide: [app] })
 }
+export const structureCounterScene: typeof makeStructureCounterScene = makeStructureCounterScene
 
-// ── option: a flat composition whose prop is an `Option` (an Effect-native, non-JSON
-// value) — exercises the symmetric schema encode/decode so the client receives a REAL
-// `Option`, not its raw `{_tag,value}` wire shape. ──────────────────────────────────
-class Label extends State.make('label', S.OptionFromSelf(S.String)) {}
+const LabelBase: State.StateDefinition<
+  'label',
+  Option.Option<string>,
+  S.OptionFromSelf<typeof S.String>
+> = State.make('label', S.OptionFromSelf(S.String))
+class Label extends LabelBase {}
 class Labels extends StateGroup.make(Label) {}
 const OptionalUiBase: WiredUi<
-  DerivedContract<{ props: S.Struct<{ label: S.Option<typeof S.String> }> }>
+  DerivedContract<{ props: S.Struct<{ label: S.Option<typeof S.String> }> }>,
+  'Optional'
 > = ui('Optional', { props: S.Struct({ label: S.Option(S.String) }) })
 export class OptionalUi extends OptionalUiBase {}
-class Optional extends Composition.make('Optional', { title: 'Optional', ui: OptionalUi, states: [Label] }) {}
 
-export const optionScene = (initial: Option.Option<string> = Option.some('hi')): Scene => {
+class Optional extends Composition.make('Optional', {
+  title: 'Optional',
+  ui: OptionalUi,
+  states: [Label],
+})<Optional>() {}
+
+type OptionalScene = CapturedScene<
+  typeof OptionalUi.Contract,
+  readonly [typeof Label],
+  | EngineServices
+  | State.StateStore<'label', Option.Option<string>>
+  | Ui.UiService<'Optional'>
+  | Composition.CompositionId<'Optional', Optional, never>,
+  unknown,
+  'Optional',
+  Optional
+>
+
+const makeOptionScene = (initial: Option.Option<string> = Option.some('hi')): OptionalScene => {
   const presentation = Layer.mergeAll(
-    provide(OptionalUi, Ui.make(OptionalUi, () => null)),
+    provide(
+      OptionalUi,
+      Ui.make(OptionalUi, () => null),
+    ),
     StateGroup.live(Labels, { label: initial }),
   )
   const app = Layer.mergeAll(
@@ -115,32 +161,88 @@ export const optionScene = (initial: Option.Option<string> = Option.some('hi')):
   ).pipe(Layer.provideMerge(presentation), Layer.provideMerge(Engine))
   return scene(Optional, { provide: [app] })
 }
+export const optionScene: typeof makeOptionScene = makeOptionScene
 
-// ── slotted: a shell whose one slot holds a child with its OWN state + event ───
-class Greeting extends State.make('greeting', S.String) {}
+const GreetingBase: State.StateDefinition<'greeting', string, typeof S.String> = State.make(
+  'greeting',
+  S.String,
+)
+class Greeting extends GreetingBase {}
 class Greeted extends Event.make('Greeted', S.Struct({ text: S.String })) {}
 class Cleared extends Event.make('Cleared', S.Struct({})) {}
-class SetGreeting extends Reducer.make('SetGreeting', { states: [Greeting], events: [Greeted] }) {}
-class ClearGreeting extends Reducer.make('ClearGreeting', { states: [Greeting], events: [Cleared] }) {}
-class PanelUi extends ui('Panel', {
+class SetGreeting extends Reducer.make('SetGreeting', {
+  states: [Greeting],
+  events: [Greeted],
+}) {}
+class ClearGreeting extends Reducer.make('ClearGreeting', {
+  states: [Greeting],
+  events: [Cleared],
+}) {}
+const PanelUiBase: WiredUi<
+  DerivedContract<{
+    props: S.Struct<{ greeting: typeof S.String }>
+    events: {
+      greet: S.Struct<{ text: typeof S.String }>
+      clear: S.Struct<{}>
+    }
+  }>,
+  'Panel'
+> = ui('Panel', {
   props: S.Struct({ greeting: S.String }),
-  // Two events on one node — each registers behind its own `${id}:${name}` handle.
   events: { greet: S.Struct({ text: S.String }), clear: S.Struct({}) },
-}) {}
-class Panel extends Composition.make('Panel', { title: 'Panel', ui: PanelUi, states: [Greeting] }) {}
-class MainSlot extends slot('Main')<typeof Panel>() {}
-class ShellUi extends ui('Shell')<{ props: {}; slots: { Main: MainSlot } }>() {}
-class Shell extends Composition.make('Shell', { title: 'Shell', slots: { Main: MainSlot }, ui: ShellUi }) {}
+})
+class PanelUi extends PanelUiBase {}
+
+class Panel extends Composition.make('Panel', {
+  title: 'Panel',
+  ui: PanelUi,
+  states: [Greeting],
+})<Panel>() {}
 
-export const slottedScene = (): Scene => {
+class MainSlot extends slot('Main')<MainSlot, typeof Panel>() {}
+const ShellUiBase: Ui.UiClass<{ props: {}; slots: { Main: MainSlot } }, 'Shell'> = ui('Shell')<{
+  props: {}
+  slots: { Main: MainSlot }
+}>()
+class ShellUi extends ShellUiBase {}
+
+class Shell extends Composition.make('Shell', {
+  title: 'Shell',
+  slots: { Main: MainSlot },
+  ui: ShellUi,
+})<Shell>() {}
+
+type SlottedScene = CapturedScene<
+  typeof ShellUi.Contract,
+  readonly [],
+  | EngineServices
+  | State.StateStore<'greeting', string>
+  | Ui.UiService<'Panel'>
+  | Ui.UiService<'Shell'>
+  | Composition.CompositionId<'Shell', Shell, MainSlot>
+  | Composition.CompositionId<'Panel', Panel, never>
+  | SlotService<'Main', MainSlot, CompositionChildSummary<Panel>>,
+  unknown,
+  'Shell',
+  Shell
+>
+
+const makeSlottedScene = (): SlottedScene => {
   const presentation = Layer.mergeAll(
-    provide(ShellUi, Ui.make(ShellUi, (_props, slots) => createElement(slots.Main, {}))),
-    provide(PanelUi, Ui.make(PanelUi, ({ greeting }) => greeting)),
+    provide(
+      ShellUi,
+      Ui.make(ShellUi, (_props, slots) => createElement(slots.Main, {})),
+    ),
+    provide(
+      PanelUi,
+      Ui.make(PanelUi, ({ greeting }) => greeting),
+    ),
     provide(MainSlot, Panel),
     State.live(Greeting, 'hi'),
   )
   const app = Layer.mergeAll(
     Composition.live(Shell, function* () {
+      yield* Effect.void
       return mount({ props: {}, slots: { Main: one({}) } })
     }),
     Composition.live(Panel, function* () {
@@ -148,63 +250,132 @@ export const slottedScene = (): Scene => {
       const greet = yield* Event.trigger(Greeted)
       const clearTrigger = yield* Event.trigger(Cleared)
       const clear = (): void => clearTrigger({})
-      return mount({ props: { greeting }, slots: {}, events: { greet, clear } })
+      return mount({
+        props: { greeting },
+        slots: {},
+        events: { greet, clear },
+      })
     }),
     Reducer.live(SetGreeting, (_greeting, event) => event.text),
     Reducer.live(ClearGreeting, () => ''),
   ).pipe(Layer.provideMerge(presentation), Layer.provideMerge(Engine))
   return scene(Shell, { provide: [app] })
 }
+export const slottedScene: typeof makeSlottedScene = makeSlottedScene
 
-// ── list: a parent with two slots — a single-child toolbar and a dynamic list ──
-const ListItem = S.Struct({ id: S.String, label: S.String })
-class Items extends State.make('items', S.Array(ListItem)) {}
+const ListItem: S.Struct<{ id: typeof S.String; label: typeof S.String }> = S.Struct({
+  id: S.String,
+  label: S.String,
+})
+const ItemsBase: State.StateDefinition<
+  'items',
+  ReadonlyArray<{ readonly id: string; readonly label: string }>,
+  S.Array$<typeof ListItem>
+> = State.make('items', S.Array(ListItem))
+class Items extends ItemsBase {}
 class Added extends Event.make('Added', ListItem) {}
 class Removed extends Event.make('Removed', S.Struct({ id: S.String })) {}
-class AddItem extends Reducer.make('AddItem', { states: [Items], events: [Added] }) {}
-class RemoveItem extends Reducer.make('RemoveItem', { states: [Items], events: [Removed] }) {}
+class AddItem extends Reducer.make('AddItem', {
+  states: [Items],
+  events: [Added],
+}) {}
+class RemoveItem extends Reducer.make('RemoveItem', {
+  states: [Items],
+  events: [Removed],
+}) {}
+
+const BarUiBase: WiredUi<
+  DerivedContract<{
+    props: S.Struct<{}>
+    events: { add: typeof ListItem }
+  }>,
+  'Bar'
+> = ui('Bar', {
+  props: S.Struct({}),
+  events: { add: ListItem },
+})
+class BarUi extends BarUiBase {}
+
+class Bar extends Composition.make('Bar', { title: 'Bar', ui: BarUi })<Bar>() {}
+const ItemUiBase: WiredUi<
+  DerivedContract<{
+    props: S.Struct<{ label: typeof S.String }>
+    events: { remove: S.Struct<{}> }
+  }>,
+  'Item'
+> = ui('Item', {
+  props: S.Struct({ label: S.String }),
+  events: { remove: S.Struct({}) },
+})
+class ItemUi extends ItemUiBase {}
 
-class BarUi extends ui('Bar', { props: S.Struct({}), events: { add: ListItem } }) {}
-class Bar extends Composition.make('Bar', { title: 'Bar', ui: BarUi }) {}
-class ItemUi extends ui('Item', { props: S.Struct({ label: S.String }), events: { remove: S.Struct({}) } }) {}
 class ItemComp extends Composition.make('Item', {
   title: 'Item',
   ui: ItemUi,
   props: ListItem,
-}) {}
-class BarSlot extends slot('Bar')<typeof Bar>() {}
-class ItemSlot extends slot('Item')<typeof ItemComp>() {}
-class ListUi extends ui('List')<{
+})<ItemComp>() {}
+
+class BarSlot extends slot('Bar')<BarSlot, typeof Bar>() {}
+
+class ItemSlot extends slot('Item')<ItemSlot, typeof ItemComp>() {}
+const ListUiBase: Ui.UiClass<
+  {
+    props: { items: ReadonlyArray<{ id: string; label: string }> }
+    slots: { Bar: BarSlot; Item: ItemSlot }
+  },
+  'List'
+> = ui('List')<{
   props: { items: ReadonlyArray<{ id: string; label: string }> }
   slots: { Bar: BarSlot; Item: ItemSlot }
-}>() {}
+}>()
+class ListUi extends ListUiBase {}
+
 class ListComp extends Composition.make('List', {
   title: 'List',
   slots: { Bar: BarSlot, Item: ItemSlot },
   ui: ListUi,
   states: [Items],
-}) {}
+})<ListComp>() {}
 
-export const listScene = (
+type ListScene = CapturedScene<
+  typeof ListUi.Contract,
+  readonly [typeof Items],
+  | EngineServices
+  | Ui.UiService<'Item'>
+  | State.StateStore<'items', ReadonlyArray<{ readonly id: string; readonly label: string }>>
+  | Ui.UiService<'Bar'>
+  | Ui.UiService<'List'>
+  | Composition.CompositionId<'List', ListComp, BarSlot | ItemSlot>
+  | Composition.CompositionId<'Bar', Bar, never>
+  | Composition.CompositionId<'Item', ItemComp, never>
+  | SlotService<'Bar', BarSlot, CompositionChildSummary<Bar>>
+  | SlotService<'Item', ItemSlot, CompositionChildSummary<ItemComp>>,
+  unknown,
+  'List',
+  ListComp
+>
+
+const makeListScene = (
   initial: ReadonlyArray<{ id: string; label: string }> = [
     { id: 'a', label: 'A' },
     { id: 'b', label: 'B' },
   ],
-): Scene => {
+): ListScene => {
   const presentation = Layer.mergeAll(
     provide(
       ListUi,
       Ui.make(ListUi, (_props, slots) =>
-        createElement(
-          Fragment,
-          null,
-          createElement(slots.Bar, {}),
-          createElement(slots.Item, {}),
-        ),
+        createElement(Fragment, null, createElement(slots.Bar, {}), createElement(slots.Item, {})),
       ),
     ),
-    provide(BarUi, Ui.make(BarUi, () => null)),
-    provide(ItemUi, Ui.make(ItemUi, ({ label }) => label)),
+    provide(
+      BarUi,
+      Ui.make(BarUi, () => null),
+    ),
+    provide(
+      ItemUi,
+      Ui.make(ItemUi, ({ label }) => label),
+    ),
     provide(BarSlot, Bar),
     provide(ItemSlot, ItemComp),
     State.live(Items, initial),
@@ -228,31 +399,36 @@ export const listScene = (
       return mount({ props: {}, slots: {}, events: { add } })
     }),
     Composition.live(ItemComp, function* () {
-      const itemProps = S.decodeUnknownSync(ListItem)(yield* Props)
+      const itemProps = yield* ItemComp.props
       const removeTrigger = yield* Event.trigger(Removed)
-      // The item binds its own id, so the wire `remove` carries no payload — the
-      // client fires it knowing only the handle.
+      // The item binds its id so the wire event carries no payload.
       const remove = (): void => removeTrigger({ id: itemProps.id })
-      return mount({ props: { label: itemProps.label }, slots: {}, events: { remove } })
+      return mount({
+        props: { label: itemProps.label },
+        slots: {},
+        events: { remove },
+      })
     }),
     Reducer.live(AddItem, (current, event) => [...current, { id: event.id, label: event.label }]),
     Reducer.live(RemoveItem, (current, event) => current.filter((entry) => entry.id !== event.id)),
   ).pipe(Layer.provideMerge(presentation), Layer.provideMerge(Engine))
   return scene(ListComp, { provide: [app] })
 }
+export const listScene: typeof makeListScene = makeListScene
 
-// ── async: a counter whose state changes AFTER the opening snapshot, with no client
-// invoke. A boot event kicks a procedure that sleeps, then dispatches `Bumped` — modelling
-// a background load (a repo list, a reconcile sweep) that resolves long after connect. This
-// is the ONLY fixture that exercises the server-initiated streaming push: every other scene
-// settles before its first render, so its full state is already in the snapshot. ──────────
 class Kick extends Event.make('Kick', S.Struct({ to: S.Number })) {}
 class Loader extends Channel.make('Loader', { policy: { _tag: 'latest' } }) {}
-class DelayedBump extends Procedure.make('DelayedBump', { channel: Loader, events: [Kick] }) {}
+class DelayedBump extends Procedure.make('DelayedBump', {
+  channel: Loader,
+  events: [Kick],
+}) {}
 
-export const asyncCounterScene = (delay: Duration.DurationInput = '40 millis'): Scene => {
+const makeAsyncCounterScene = (delay: Duration.DurationInput = '40 millis'): CounterScene => {
   const presentation = Layer.mergeAll(
-    provide(CounterUi, Ui.make(CounterUi, ({ count }) => `count:${count}`)),
+    provide(
+      CounterUi,
+      Ui.make(CounterUi, ({ count }) => `count:${count}`),
+    ),
     StateGroup.live(Counters, { count: 0 }),
   )
   const app = Layer.mergeAll(
@@ -262,16 +438,16 @@ export const asyncCounterScene = (delay: Duration.DurationInput = '40 millis'):
       return mount({ props: { count }, slots: {}, events: { bump } })
     }),
     Reducer.live(Bump, (count, event) => count + event.by),
-    // The procedure runs on the bus AFTER the scene boots: it sleeps past the opening
-    // snapshot, then dispatches `Bumped` — so the only way the client learns the new count
-    // is the server pushing a diff nobody asked for.
     Procedure.live(DelayedBump, function* (event) {
       yield* Effect.sleep(delay)
       yield* Event.dispatch(Bumped, { by: event.to })
     }),
-    // The procedure runs on a named channel; without its queue+fiber (`Channel.live`)
-    // the boot `Kick` is dropped and nothing ever bumps.
+    // Without Channel.live the boot Kick is dropped.
     Channel.live(Loader),
   ).pipe(Layer.provideMerge(presentation), Layer.provideMerge(Engine))
-  return scene(Counter, { provide: [app], boot: [Event.construct(Kick, { to: 7 })] })
+  return scene(Counter, {
+    provide: [app],
+    boot: [Event.construct(Kick, { to: 7 })],
+  })
 }
+export const asyncCounterScene: typeof makeAsyncCounterScene = makeAsyncCounterScene

package/src/index.ts

@@ -1,13 +1,3 @@
-// @playfast/reform-remote — run a reform scene's logic on the server and stream
-// its rendered UI to a thin client over a transport. A fourth consumer of a
-// `Scene`, alongside @playfast/react, @playfast/react-native, and @playfast/proof.
-// See REMOTE_UI.md.
-//
-// Public API is exposed two ways (Effect-style): namespace barrels for discovery
-// (`import { Transport } from "@playfast/reform-remote"`) and per-path subpaths
-// for direct use (`import { connect } from "@playfast/reform-remote/transport"`).
-// The select re-exports below keep the common entry points nameable from the root.
-
 export * as Server from './server'
 export * as Client from './client'
 export * as Transport from './transport'

package/src/memory.ts

@@ -1,14 +1,5 @@
 import type { RemoteTransport } from './transport'
 
-/**
- * The in-memory transport adapter: a duplex pair where what one end sends, the
- * other receives — synchronously, in process. It is the simplest concrete
- * `RemoteTransport`, and the one the test suite drives `serve`/`connect` over
- * without a socket. A WebSocket adapter is the same shape with JSON framing
- * across a wire; proving the loop here proves it everywhere.
- */
-
-/** A linked `server`/`client` transport: each receives exactly what the other sends. */
 export interface TransportPair<Server, Client> {
   readonly server: RemoteTransport<Server, Client>
   readonly client: RemoteTransport<Client, Server>

package/src/react.ts

@@ -1,62 +1,31 @@
 import { type ReactNode, useEffect, useState, useSyncExternalStore } from 'react'
-import {
-  connect,
-  type InvokeMessage,
-  type RemoteTransport,
-  type ServerMessage,
-} from './transport'
+import { connect, type InvokeMessage, type RemoteTransport, type ServerMessage } from './transport'
 import type { RemoteContract, RemoteViewSet } from './client'
 
-/**
- * The React binding for the remote client. A consumer hands it a transport and a
- * `views` map and gets a live React subtree — the framework owns the transport
- * wiring (connect, the patch subscription, re-render on each frame, teardown on
- * unmount). No `useSyncExternalStore`, `binding.subscribe`, or `binding.node()`
- * at the call site.
- */
-
-/**
- * Render the remote scene as React. Pass a stable `transport` (created once,
- * e.g. by `createWebSocketClientTransport`) — the binding is established on mount
- * and disposed on unmount.
- */
 export const useRemoteUI = <C extends RemoteContract>(
   transport: RemoteTransport<InvokeMessage, ServerMessage>,
   views: RemoteViewSet<C>,
 ): ReactNode => {
-  // One binding for the life of the component (the transport is stable).
   const [binding] = useState(() => connect({ transport, views }))
   useEffect(() => () => binding.dispose(), [binding])
-  // Re-render whenever a frame changes the tree; `snapshot` is a stable ref.
   useSyncExternalStore(binding.subscribe, binding.snapshot, binding.snapshot)
   return binding.node()
 }
 
 export interface RemoteUIProps<C extends RemoteContract> {
   readonly transport: RemoteTransport<InvokeMessage, ServerMessage>
-  /** A contract-checked view set from `remoteViews<C>(…)` — an unbranded `Record` is rejected,
-   *  so `<RemoteUI>` can only render views proven to implement the server's shape. */
   readonly views: RemoteViewSet<C>
 }
 
-/** Component form of {@link useRemoteUI}: `<RemoteUI transport={…} views={…} />`. `C` is
- *  inferred from `views` (the `remoteViews<AppContract>(…)` result), so the whole subtree is
- *  typed to that app's contract. */
 export const RemoteUI = <C extends RemoteContract>({
   transport,
   views,
 }: RemoteUIProps<C>): ReactNode => useRemoteUI(transport, views)
 
-/**
- * Anything that reports an observable connection status — implemented by the
- * WebSocket client transport. Kept structural so the React binding needs no
- * dependency on a specific adapter.
- */
 export interface StatusReporter<S> {
   readonly status: () => S
   readonly onStatusChange: (listener: () => void) => () => void
 }
 
-/** Subscribe to a transport's connection status (e.g. to show a reconnecting badge). */
 export const useConnectionStatus = <S>(reporter: StatusReporter<S>): S =>
   useSyncExternalStore(reporter.onStatusChange, reporter.status, reporter.status)

package/src/remote-view.typecheck.ts

@@ -3,21 +3,11 @@ import { Schema as S } from 'effect'
 import { Composition, slot, ui, Ui } from '@playfast/reform'
 import { remoteContract, remoteViews } from './client'
 
-/**
- * Type-level proof that a remote client view — authored with the SAME `Ui.make`
- * the local renderer uses and registered with `remoteViews` — is strict: props,
- * event payloads, and slot names are all derived from the contract, so a wrong
- * access fails to compile. Compiled by `tsc` (the `@ts-expect-error`s would
- * themselves error if the line below them ever stopped being an error); not
- * bundled, not a runtime test.
- */
-
 class FooUi extends ui('Foo', {
   props: S.Struct({ n: S.Number }),
   events: { go: S.Struct({ x: S.String }) },
 }) {}
 
-// ✓ props and event payloads are inferred from the contract.
 const fooView = Ui.make(FooUi, (props, _slots, events) => {
   events.go({ x: String(props.n) })
   return null
@@ -41,12 +31,11 @@ Ui.make(FooUi, (_props, _slots, events) => {
   return null
 })
 
-// A local contract with a slot.
-class FooComp extends Composition.make('FooComp', { title: 'Foo', ui: FooUi }) {}
-class FooSlot extends slot('Foo')<typeof FooComp>() {}
+class FooComp extends Composition.make('FooComp', { title: 'Foo', ui: FooUi })<FooComp>() {}
+
+class FooSlot extends slot('Foo')<FooSlot, typeof FooComp>() {}
 class ShellUi extends ui('Shell', { props: S.Struct({}), slots: { Main: FooSlot } }) {}
 
-// ✓ slot components are keyed by the contract's slot names.
 const shellView = Ui.make(ShellUi, (_props, slots) => createElement(slots.Main, {}))
 
 Ui.make(ShellUi, (_props, slots) =>
@@ -54,12 +43,9 @@ Ui.make(ShellUi, (_props, slots) =>
   createElement(slots.Other, {}),
 )
 
-// The server declares its shape ONCE and exports `typeof` it; the client implements that
-// type with `remoteViews<AppContract>(…)` — importing only the TYPE, never the value.
 const AppContractValue = remoteContract({ Foo: FooUi, Shell: ShellUi })
 type AppContract = typeof AppContractValue
 
-// ✓ a view per contract, each recovering its own name + schema; implements the full shape.
 remoteViews<AppContract>({ Foo: fooView, Shell: shellView })
 
 // @ts-expect-error — a view set MISSING `Shell` does not implement the server's shape.