@playfast/reform-remote 1.1.0 → 1.3.0

package/src/fixtures.ts

@@ -1,453 +1,10 @@
-import { createElement, Fragment } from 'react'
-import { Duration, Effect, Layer, Option, Schema as S } from 'effect'
-import {
-  Channel,
-  Composition,
-  type CapturedScene,
-  type DerivedContract,
-  Engine,
-  Event,
-  type EventOf,
-  Procedure,
-  Reducer,
-  State,
-  StateGroup,
-  Ui,
-  each,
-  mount,
-  one,
-  provide,
-  scene,
-  slot,
-  type SlotService,
-  ui,
-} from '@playfast/reform'
-import {
-  type CompositionChildSummary,
-  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
-
-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
-
-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],
-}) {}
-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 }),
-  events: { greet: S.Struct({ text: S.String }), clear: S.Struct({}) },
-})
-class PanelUi extends PanelUiBase {}
-
-class Panel extends Composition.make('Panel', {
-  title: 'Panel',
-  ui: PanelUi,
-  states: [Greeting],
-})<Panel>() {}
-
-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(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] })
-}
-export const slottedScene: typeof makeSlottedScene = makeSlottedScene
-
-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
-
-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
+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