@playfast/reform-remote 1.0.2 → 1.2.0

package/src/counterFixtures.ts

@@ -0,0 +1,142 @@
+import { Duration, Effect, Layer, Schema as S } from 'effect'
+import {
+  Channel,
+  Composition,
+  Engine,
+  Event,
+  Procedure,
+  Reducer,
+  State,
+  StateGroup,
+  Ui,
+  mount,
+  provide,
+  scene,
+  type CapturedScene,
+  type DerivedContract,
+  type EventOf,
+  ui,
+} from '@playfast/reform'
+import { type EngineServices, type WiredUi } from '@playfast/reform/internal'
+
+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],
+}) {}
+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],
+})<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 })
+
+const makeCounterScene = (
+  boot?: ReadonlyArray<EventOf<'Bumped', { by: number }>>,
+): CounterScene => {
+  const presentation = Layer.mergeAll(
+    provide(
+      CounterUi,
+      Ui.make(CounterUi, ({ count }) => `count:${count}`),
+    ),
+    StateGroup.live(Counters, { count: 0 }),
+  )
+  const app = Layer.mergeAll(
+    Composition.live(Counter, function* () {
+      const count = yield* StateGroup.select(Counters, 'count')
+      const bump = yield* Event.trigger(Bumped)
+      return mount({ props: { count }, slots: {}, events: { bump } })
+    }),
+    Reducer.live(Bump, (count, event) => count + event.by),
+  ).pipe(Layer.provideMerge(presentation), Layer.provideMerge(Engine))
+  return scene(Counter, boot === undefined ? { provide: [app] } : { provide: [app], boot })
+}
+export const counterScene: typeof makeCounterScene = makeCounterScene
+
+const makeStructureCounterScene = (): CounterScene => {
+  const presentation = Layer.mergeAll(
+    provide(
+      CounterUi,
+      Ui.make(CounterUi, ({ count }) => `count:${count}`),
+    ),
+    StateGroup.live(Counters, { count: 0 }),
+  )
+  const app = Layer.mergeAll(
+    Composition.live(Counter, function* () {
+      const count = yield* StateGroup.select(Counters, 'count')
+      const bump = yield* Event.trigger(Bumped)
+      return mount({ props: { count }, slots: {}, events: { bump } })
+    }),
+    Reducer.live(Bump, (count, event) => count + event.by),
+  ).pipe(Layer.provideMerge(presentation), Layer.provideMerge(Engine))
+  return scene(Counter, { provide: [app] })
+}
+export const structureCounterScene: typeof makeStructureCounterScene = makeStructureCounterScene
+
+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],
+}) {}
+
+const makeAsyncCounterScene = (delay: Duration.DurationInput = '40 millis'): CounterScene => {
+  const presentation = Layer.mergeAll(
+    provide(
+      CounterUi,
+      Ui.make(CounterUi, ({ count }) => `count:${count}`),
+    ),
+    StateGroup.live(Counters, { count: 0 }),
+  )
+  const app = Layer.mergeAll(
+    Composition.live(Counter, function* () {
+      const count = yield* StateGroup.select(Counters, 'count')
+      const bump = yield* Event.trigger(Bumped)
+      return mount({ props: { count }, slots: {}, events: { bump } })
+    }),
+    Reducer.live(Bump, (count, event) => count + event.by),
+    Procedure.live(DelayedBump, function* (event) {
+      yield* Effect.sleep(delay)
+      yield* Event.dispatch(Bumped, { by: event.to })
+    }),
+    // 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 })],
+  })
+}
+export const asyncCounterScene: typeof makeAsyncCounterScene = makeAsyncCounterScene

package/src/fixtures.ts

@@ -1,247 +1,10 @@
-import { createElement, Fragment } from 'react'
-import { Duration, Effect, Layer, Option, Schema as S } from 'effect'
-import {
-  Channel,
-  Composition,
-  type DerivedContract,
-  Engine,
-  Event,
-  type EventOf,
-  Procedure,
-  Props,
-  Reducer,
-  type Scene,
-  State,
-  StateGroup,
-  Ui,
-  type WiredUi,
-  each,
-  mount,
-  one,
-  provide,
-  scene,
-  slot,
-  ui,
-} from '@playfast/reform'
-
-class Count extends State.make('count', S.Number) {}
-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] }) {}
-const CounterUiBase: WiredUi<
-  DerivedContract<{
-    props: S.Struct<{ count: typeof S.Number }>
-    events: { bump: S.Struct<{ by: typeof S.Number }> }
-  }>
-> = 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] }) {}
-
-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 presentation = Layer.mergeAll(
-    provide(CounterUi, Ui.make(CounterUi, ({ count }) => `count:${count}`)),
-    StateGroup.live(Counters, { count: 0 }),
-  )
-  const app = Layer.mergeAll(
-    Composition.live(Counter, function* () {
-      const count = yield* StateGroup.select(Counters, 'count')
-      const bump = yield* Event.trigger(Bumped)
-      return mount({ props: { count }, slots: {}, events: { bump } })
-    }),
-    Reducer.live(Bump, (count, event) => count + event.by),
-  ).pipe(Layer.provideMerge(presentation), Layer.provideMerge(Engine))
-  return scene(Counter, boot === undefined ? { provide: [app] } : { provide: [app], boot })
-}
-
-export const structureCounterScene = (): Scene => {
-  const presentation = Layer.mergeAll(
-    provide(CounterUi, Ui.make(CounterUi, ({ count }) => `count:${count}`)),
-    StateGroup.live(Counters, { count: 0 }),
-  )
-  const app = Layer.mergeAll(
-    Composition.live(Counter, function* () {
-      const count = yield* StateGroup.select(Counters, 'count')
-      const bump = yield* Event.trigger(Bumped)
-      return mount({ props: { count }, slots: {}, events: { bump } })
-    }),
-    Reducer.live(Bump, (count, event) => count + event.by),
-  ).pipe(Layer.provideMerge(presentation), Layer.provideMerge(Engine))
-  return scene(Counter, { provide: [app] })
-}
-
-class Label extends State.make('label', S.OptionFromSelf(S.String)) {}
-class Labels extends StateGroup.make(Label) {}
-const OptionalUiBase: WiredUi<
-  DerivedContract<{ props: S.Struct<{ label: S.Option<typeof S.String> }> }>
-> = 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 => {
-  const presentation = Layer.mergeAll(
-    provide(OptionalUi, Ui.make(OptionalUi, () => null)),
-    StateGroup.live(Labels, { label: initial }),
-  )
-  const app = Layer.mergeAll(
-    Composition.live(Optional, function* () {
-      const label = yield* StateGroup.select(Labels, 'label')
-      return mount({ props: { label }, slots: {} })
-    }),
-  ).pipe(Layer.provideMerge(presentation), Layer.provideMerge(Engine))
-  return scene(Optional, { provide: [app] })
-}
-
-class Greeting extends State.make('greeting', S.String) {}
-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', {
-  props: S.Struct({ greeting: S.String }),
-  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 }) {}
-
-export const slottedScene = (): Scene => {
-  const presentation = Layer.mergeAll(
-    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* () {
-      const greeting = yield* Greeting
-      const greet = yield* Event.trigger(Greeted)
-      const clearTrigger = yield* Event.trigger(Cleared)
-      const clear = (): void => clearTrigger({})
-      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] })
-}
-
-const ListItem = S.Struct({ id: S.String, label: S.String })
-class Items extends State.make('items', S.Array(ListItem)) {}
-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 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')<{
-  props: { items: ReadonlyArray<{ id: string; label: string }> }
-  slots: { Bar: BarSlot; Item: ItemSlot }
-}>() {}
-class ListComp extends Composition.make('List', {
-  title: 'List',
-  slots: { Bar: BarSlot, Item: ItemSlot },
-  ui: ListUi,
-  states: [Items],
-}) {}
-
-export const listScene = (
-  initial: ReadonlyArray<{ id: string; label: string }> = [
-    { id: 'a', label: 'A' },
-    { id: 'b', label: 'B' },
-  ],
-): Scene => {
-  const presentation = Layer.mergeAll(
-    provide(
-      ListUi,
-      Ui.make(ListUi, (_props, slots) =>
-        createElement(
-          Fragment,
-          null,
-          createElement(slots.Bar, {}),
-          createElement(slots.Item, {}),
-        ),
-      ),
-    ),
-    provide(BarUi, Ui.make(BarUi, () => null)),
-    provide(ItemUi, Ui.make(ItemUi, ({ label }) => label)),
-    provide(BarSlot, Bar),
-    provide(ItemSlot, ItemComp),
-    State.live(Items, initial),
-  )
-  const app = Layer.mergeAll(
-    Composition.live(ListComp, function* () {
-      const listItems = yield* Items
-      return mount({
-        props: { items: listItems },
-        slots: {
-          Bar: one({}),
-          Item: each(listItems, {
-            key: (entry) => entry.id,
-            props: (entry) => ({ id: entry.id, label: entry.label }),
-          }),
-        },
-      })
-    }),
-    Composition.live(Bar, function* () {
-      const add = yield* Event.trigger(Added)
-      return mount({ props: {}, slots: {}, events: { add } })
-    }),
-    Composition.live(ItemComp, function* () {
-      const itemProps = S.decodeUnknownSync(ListItem)(yield* Props)
-      const removeTrigger = yield* Event.trigger(Removed)
-      // Item binds its own id into remove so the wire event has empty payload.
-      const remove = (): void => removeTrigger({ id: itemProps.id })
-      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] })
-}
-
-// Boot Kick → DelayedBump sleeps past opening snapshot, then Bumped — only path for server-pushed diffs.
-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] }) {}
-
-export const asyncCounterScene = (delay: Duration.DurationInput = '40 millis'): Scene => {
-  const presentation = Layer.mergeAll(
-    provide(CounterUi, Ui.make(CounterUi, ({ count }) => `count:${count}`)),
-    StateGroup.live(Counters, { count: 0 }),
-  )
-  const app = Layer.mergeAll(
-    Composition.live(Counter, function* () {
-      const count = yield* StateGroup.select(Counters, 'count')
-      const bump = yield* Event.trigger(Bumped)
-      return mount({ props: { count }, slots: {}, events: { bump } })
-    }),
-    Reducer.live(Bump, (count, event) => count + event.by),
-    Procedure.live(DelayedBump, function* (event) {
-      yield* Effect.sleep(delay)
-      yield* Event.dispatch(Bumped, { by: event.to })
-    }),
-    // 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 })] })
-}
+export {
+  asyncCounterScene,
+  bumpedBy,
+  CounterUi,
+  counterScene,
+  structureCounterScene,
+} from './counterFixtures'
+export { OptionalUi, optionScene } from './optionalFixtures'
+export { slottedScene } from './slottedFixtures'
+export { listScene } from './listFixtures'

package/src/listFixtures.ts

@@ -0,0 +1,174 @@
+import { createElement, Fragment } from 'react'
+import { Layer, Schema as S } from 'effect'
+import {
+  Composition,
+  Engine,
+  Event,
+  Reducer,
+  State,
+  Ui,
+  each,
+  mount,
+  one,
+  provide,
+  scene,
+  slot,
+  type CapturedScene,
+  type DerivedContract,
+  type SlotService,
+  ui,
+} from '@playfast/reform'
+import { type CompositionChildSummary, type EngineServices, type WiredUi } from '@playfast/reform/internal'
+
+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],
+}) {}
+
+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 ItemComp extends Composition.make('Item', {
+  title: 'Item',
+  ui: ItemUi,
+  props: ListItem,
+})<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>() {}
+
+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' },
+  ],
+): ListScene => {
+  const presentation = Layer.mergeAll(
+    provide(
+      ListUi,
+      Ui.make(ListUi, (_props, slots) =>
+        createElement(Fragment, null, createElement(slots.Bar, {}), createElement(slots.Item, {})),
+      ),
+    ),
+    provide(
+      BarUi,
+      Ui.make(BarUi, () => null),
+    ),
+    provide(
+      ItemUi,
+      Ui.make(ItemUi, ({ label }) => label),
+    ),
+    provide(BarSlot, Bar),
+    provide(ItemSlot, ItemComp),
+    State.live(Items, initial),
+  )
+  const app = Layer.mergeAll(
+    Composition.live(ListComp, function* () {
+      const listItems = yield* Items
+      return mount({
+        props: { items: listItems },
+        slots: {
+          Bar: one({}),
+          Item: each(listItems, {
+            key: (entry) => entry.id,
+            props: (entry) => ({ id: entry.id, label: entry.label }),
+          }),
+        },
+      })
+    }),
+    Composition.live(Bar, function* () {
+      const add = yield* Event.trigger(Added)
+      return mount({ props: {}, slots: {}, events: { add } })
+    }),
+    Composition.live(ItemComp, function* () {
+      const itemProps = yield* ItemComp.props
+      const removeTrigger = yield* Event.trigger(Removed)
+      // 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 },
+      })
+    }),
+    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

package/src/optionalFixtures.ts

@@ -0,0 +1,64 @@
+import { Layer, Option, Schema as S } from 'effect'
+import {
+  Composition,
+  Engine,
+  State,
+  StateGroup,
+  Ui,
+  mount,
+  provide,
+  scene,
+  type CapturedScene,
+  type DerivedContract,
+  ui,
+} from '@playfast/reform'
+import { type EngineServices, type WiredUi } from '@playfast/reform/internal'
+
+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> }> }>,
+  '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],
+})<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),
+    ),
+    StateGroup.live(Labels, { label: initial }),
+  )
+  const app = Layer.mergeAll(
+    Composition.live(Optional, function* () {
+      const label = yield* StateGroup.select(Labels, 'label')
+      return mount({ props: { label }, slots: {} })
+    }),
+  ).pipe(Layer.provideMerge(presentation), Layer.provideMerge(Engine))
+  return scene(Optional, { provide: [app] })
+}
+export const optionScene: typeof makeOptionScene = makeOptionScene

package/src/react.ts

@@ -1,10 +1,5 @@
 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'
 
 export const useRemoteUI = <C extends RemoteContract>(

package/src/remote-view.typecheck.ts

@@ -31,8 +31,9 @@ Ui.make(FooUi, (_props, _slots, events) => {
   return null
 })
 
-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 } }) {}
 
 const shellView = Ui.make(ShellUi, (_props, slots) => createElement(slots.Main, {}))