@typeonce/effect-machine-devtools 0.24.0 → 0.25.0

package/src/internal/browser/input-form.ts

@@ -1,4 +1,3 @@
-import type { InputIssue } from "../../DevToolsProtocol.js"
 import type { InputSchema } from "../../MachineDocument.js"
 
 type JsonPrimitive = string | number | boolean | null
@@ -217,9 +216,7 @@ const project = (
     case "null":
       return { _tag: "Literal", ...common, value: null }
     case "object": {
-      if (!isRecord(resolved.properties)) {
-        return { _tag: "Object", ...common, fields: [] }
-      }
+      if (!isRecord(resolved.properties)) return { _tag: "Object", ...common, fields: [] }
       const required = new Set(
         Array.isArray(resolved.required)
           ? resolved.required.filter((item): item is string => typeof item === "string")
@@ -253,417 +250,3 @@ const project = (
 }
 
 export const projectInputSchema = (document: InputSchema): InputField => project(document.schema, document.definitions)
-
-export interface InputFormResult {
-  readonly ok: boolean
-  readonly value?: unknown
-}
-
-export interface InputForm {
-  readonly element: HTMLFormElement
-  readonly hasFields: boolean
-  readonly supported: boolean
-  readonly read: () => InputFormResult
-  readonly clearIssues: () => void
-  readonly setIssues: (issues: ReadonlyArray<InputIssue>) => void
-  readonly setPending: (pending: boolean) => void
-}
-
-interface Control {
-  readonly element: HTMLElement
-  readonly interactive: boolean
-  readonly supported: boolean
-  readonly read: () => unknown
-}
-
-interface RenderContext {
-  readonly issueTargets: Map<string, HTMLElement>
-}
-
-let nextControlId = 0
-
-const element = <Tag extends keyof HTMLElementTagNameMap>(
-  tag: Tag,
-  className?: string,
-  text?: string
-): HTMLElementTagNameMap[Tag] => {
-  const node = document.createElement(tag)
-  if (className !== undefined) node.className = className
-  if (text !== undefined) node.textContent = text
-  return node
-}
-
-const valueKey = (value: JsonPrimitive): string => JSON.stringify(value)
-
-const labelText = (field: InputField, fallback: string): string => field.title ?? fallback
-
-const description = (field: InputField): HTMLElement | undefined =>
-  field.description === undefined ? undefined : element("p", "input-description", field.description)
-
-const fieldType = (field: InputField): string => {
-  switch (field._tag) {
-    case "String":
-      return field.format ?? "string"
-    case "Number":
-      return field.integer ? "integer" : "number"
-    case "Boolean":
-      return "boolean"
-    case "Enum":
-      return "enum"
-    case "Literal":
-      return "literal"
-    case "Object":
-      return "object"
-    case "Array":
-      return `${fieldType(field.item)}[]`
-    case "Union":
-      return "union"
-    case "Unsupported":
-      return "unsupported"
-  }
-}
-
-const fieldConstraints = (field: InputField): ReadonlyArray<string> => {
-  switch (field._tag) {
-    case "String":
-      return [
-        field.minLength === undefined ? undefined : `min ${field.minLength} characters`,
-        field.maxLength === undefined ? undefined : `max ${field.maxLength} characters`,
-        field.pattern === undefined ? undefined : `pattern ${field.pattern}`,
-        field.defaultValue === undefined ? undefined : `default ${field.defaultValue}`
-      ].filter((value): value is string => value !== undefined)
-    case "Number":
-      return [
-        field.minimum === undefined ? undefined : `min ${field.minimum}`,
-        field.maximum === undefined ? undefined : `max ${field.maximum}`,
-        field.defaultValue === undefined ? undefined : `default ${field.defaultValue}`
-      ].filter((value): value is string => value !== undefined)
-    case "Enum":
-      return [
-        `${field.values.length} options`,
-        field.defaultValue === undefined ? undefined : `default ${String(field.defaultValue)}`
-      ].filter((value): value is string => value !== undefined)
-    case "Literal":
-      return [`fixed ${String(field.value)}`]
-    case "Object":
-      return [`${field.fields.length} fields`]
-    case "Array":
-      return [
-        field.minItems === 0 ? undefined : `min ${field.minItems} items`,
-        field.maxItems === undefined ? undefined : `max ${field.maxItems} items`
-      ].filter((value): value is string => value !== undefined)
-    case "Union":
-      return [`${field.alternatives.length} variants`]
-    case "Boolean":
-    case "Unsupported":
-      return []
-  }
-}
-
-const renderControl = (
-  field: InputField,
-  name: string,
-  context: RenderContext,
-  path: ReadonlyArray<string | number>
-): Control => {
-  switch (field._tag) {
-    case "String": {
-      const input = element("input", "input-control")
-      input.type = field.format === "date-time"
-        ? "datetime-local"
-        : field.format === "date"
-        ? "date"
-        : field.format === "email"
-        ? "email"
-        : field.format === "uri"
-        ? "url"
-        : "text"
-      input.name = name
-      input.value = field.defaultValue ?? ""
-      if (field.minLength !== undefined) input.minLength = field.minLength
-      if (field.maxLength !== undefined) input.maxLength = field.maxLength
-      if (field.pattern !== undefined) input.pattern = field.pattern
-      return { element: input, interactive: true, supported: true, read: () => input.value }
-    }
-    case "Number": {
-      const input = element("input", "input-control")
-      input.type = "number"
-      input.name = name
-      input.step = field.integer ? "1" : "any"
-      if (field.defaultValue !== undefined) input.value = String(field.defaultValue)
-      if (field.minimum !== undefined) input.min = String(field.minimum)
-      if (field.maximum !== undefined) input.max = String(field.maximum)
-      return {
-        element: input,
-        interactive: true,
-        supported: true,
-        read: () => input.value === "" ? undefined : Number(input.value)
-      }
-    }
-    case "Boolean": {
-      const wrapper = element("label", "boolean-control")
-      const input = element("input")
-      input.type = "checkbox"
-      input.name = name
-      input.checked = field.defaultValue ?? false
-      wrapper.append(input, element("span", undefined, "Enabled"))
-      return { element: wrapper, interactive: true, supported: true, read: () => input.checked }
-    }
-    case "Enum": {
-      const select = element("select", "input-control")
-      select.name = name
-      field.values.forEach((value) => {
-        const option = element("option", undefined, String(value))
-        option.value = valueKey(value)
-        option.selected = Object.is(value, field.defaultValue)
-        select.append(option)
-      })
-      return {
-        element: select,
-        interactive: true,
-        supported: true,
-        read: () => JSON.parse(select.value) as JsonPrimitive
-      }
-    }
-    case "Literal": {
-      const output = element("output", "literal-control", String(field.value))
-      return { element: output, interactive: false, supported: true, read: () => field.value }
-    }
-    case "Object": {
-      const group = element("fieldset", "input-object")
-      const legend = element("legend", undefined, labelText(field, name))
-      group.append(legend)
-      const controls: Array<{
-        readonly key: string
-        readonly included: HTMLInputElement | undefined
-        readonly control: Control
-      }> = []
-      for (const property of field.fields) {
-        const row = element("div", "input-field")
-        const heading = element("div", "input-field-heading")
-        const label = element("label", "input-label", labelText(property.field, property.key))
-        const identity = element("div", "input-field-identity")
-        identity.append(label, element("span", "input-field-type", fieldType(property.field)))
-        const required = property.required ? element("span", "input-required", "required") : undefined
-        let included: HTMLInputElement | undefined
-        const propertyPath = [...path, property.key]
-        const control = renderControl(property.field, `${name}.${property.key}`, context, propertyPath)
-        const labelled = control.element instanceof HTMLInputElement || control.element instanceof HTMLSelectElement
-          ? control.element
-          : control.element.querySelector<HTMLInputElement | HTMLSelectElement>(":scope > input, :scope > select")
-        if (labelled !== null) {
-          const id = `machine-input-${nextControlId++}`
-          labelled.id = id
-          label.htmlFor = id
-        }
-        if (property.required) {
-          if (control.element instanceof HTMLSelectElement) {
-            control.element.required = true
-          } else if (control.element instanceof HTMLInputElement) {
-            control.element.required = property.field._tag === "Number" ||
-              (property.field._tag === "String" &&
-                (property.field.format !== undefined || (property.field.minLength ?? 0) > 0))
-          }
-          heading.append(identity, required!)
-        } else {
-          const optional = element("label", "input-optional")
-          included = element("input")
-          included.type = "checkbox"
-          optional.append(included, element("span", undefined, "include"))
-          heading.append(identity, optional)
-          control.element.toggleAttribute("inert", true)
-          control.element.classList.add("is-disabled")
-          control.element.querySelectorAll<HTMLInputElement | HTMLSelectElement | HTMLButtonElement>(
-            "input, select, button"
-          ).forEach((item) => item.disabled = true)
-          if (
-            control.element instanceof HTMLInputElement ||
-            control.element instanceof HTMLSelectElement ||
-            control.element instanceof HTMLButtonElement
-          ) control.element.disabled = true
-          included.addEventListener("change", () => {
-            control.element.toggleAttribute("inert", !included!.checked)
-            control.element.classList.toggle("is-disabled", !included!.checked)
-            control.element.querySelectorAll<HTMLInputElement | HTMLSelectElement | HTMLButtonElement>(
-              "input, select, button"
-            ).forEach((item) => item.disabled = !included!.checked)
-            if (
-              control.element instanceof HTMLInputElement ||
-              control.element instanceof HTMLSelectElement ||
-              control.element instanceof HTMLButtonElement
-            ) control.element.disabled = !included!.checked
-          })
-        }
-        const issues = element("div", "input-errors")
-        issues.hidden = true
-        context.issueTargets.set(JSON.stringify(propertyPath), issues)
-        row.append(heading, control.element)
-        const constraints = fieldConstraints(property.field)
-        if (constraints.length > 0) {
-          const metadata = element("div", "input-constraints")
-          constraints.forEach((constraint) => metadata.append(element("span", undefined, constraint)))
-          row.append(metadata)
-        }
-        const details = description(property.field)
-        if (details !== undefined) row.append(details)
-        row.append(issues)
-        group.append(row)
-        controls.push({ key: property.key, included, control })
-      }
-      return {
-        element: group,
-        interactive: controls.some(({ control }) => control.interactive),
-        supported: controls.every(({ control }) => control.supported),
-        read: () =>
-          Object.fromEntries(
-            controls
-              .filter(({ included }) => included === undefined || included.checked)
-              .map(({ key, control }) => [key, control.read()])
-              .filter((entry) => entry[1] !== undefined)
-          )
-      }
-    }
-    case "Array": {
-      const group = element("fieldset", "input-array")
-      group.append(element("legend", undefined, labelText(field, name)))
-      const items = element("div", "input-array-items")
-      const controls: Array<{
-        readonly row: HTMLElement
-        readonly control: Control
-        readonly remove: HTMLButtonElement
-      }> = []
-      const add = element("button", "input-array-add", "Add item")
-      add.type = "button"
-      const refreshActions = (): void => {
-        add.disabled = field.maxItems !== undefined && controls.length >= field.maxItems
-        controls.forEach(({ remove }) => remove.disabled = controls.length <= field.minItems)
-      }
-      const addItem = (): void => {
-        if (field.maxItems !== undefined && controls.length >= field.maxItems) return
-        const row = element("div", "input-array-item")
-        const control = renderControl(field.item, `${name}.${controls.length}`, context, [...path, controls.length])
-        const remove = element("button", "input-array-remove", "Remove")
-        remove.type = "button"
-        remove.addEventListener("click", () => {
-          row.remove()
-          const index = controls.findIndex((item) => item.row === row)
-          if (index >= 0) controls.splice(index, 1)
-          refreshActions()
-        })
-        row.append(control.element, remove)
-        items.append(row)
-        controls.push({ row, control, remove })
-        refreshActions()
-      }
-      for (let index = 0; index < field.minItems; index++) addItem()
-      add.addEventListener("click", addItem)
-      group.append(items, add)
-      return {
-        element: group,
-        interactive: true,
-        supported: controls.every(({ control }) => control.supported) && field.item._tag !== "Unsupported",
-        read: () => controls.map(({ control }) => control.read())
-      }
-    }
-    case "Union": {
-      const group = element("fieldset", "input-union")
-      group.append(element("legend", undefined, labelText(field, name)))
-      const select = element("select", "input-control")
-      const body = element("div", "input-union-body")
-      let selected = 0
-      const controls = field.alternatives.map((alternative, index) => {
-        const control = renderControl(alternative, `${name}.${index}`, context, path)
-        const option = element("option", undefined, labelText(alternative, `Option ${index + 1}`))
-        option.value = String(index)
-        select.append(option)
-        return control
-      })
-      const update = (): void => {
-        selected = Number(select.value)
-        body.replaceChildren(controls[selected]?.element ?? element("div"))
-      }
-      select.addEventListener("change", update)
-      group.append(select, body)
-      update()
-      return {
-        element: group,
-        interactive: true,
-        supported: controls.every(({ supported }) => supported),
-        read: () => controls[selected]?.read()
-      }
-    }
-    case "Unsupported": {
-      const message = element("p", "input-unsupported", field.reason)
-      return { element: message, interactive: false, supported: false, read: () => undefined }
-    }
-  }
-}
-
-export const renderInputForm = (
-  schema: InputSchema,
-  options: {
-    readonly name: string
-    readonly fixed?: Readonly<Record<string, JsonPrimitive>>
-    readonly omit?: ReadonlyArray<string>
-  }
-): InputForm => {
-  const form = element("form", "schema-form")
-  const formIssues = element("div", "input-errors input-errors-form")
-  formIssues.hidden = true
-  const context: RenderContext = { issueTargets: new Map() }
-  const projected = projectInputSchema(schema)
-  const visible = projected._tag === "Object" && options.omit !== undefined
-    ? { ...projected, fields: projected.fields.filter(({ key }) => !options.omit!.includes(key)) }
-    : projected
-  const control = renderControl(visible, options.name, context, [])
-  form.append(formIssues, control.element)
-  const clearIssues = (): void => {
-    formIssues.replaceChildren()
-    formIssues.hidden = true
-    context.issueTargets.forEach((target) => {
-      target.replaceChildren()
-      target.hidden = true
-    })
-  }
-  const setIssues = (issues: ReadonlyArray<InputIssue>): void => {
-    clearIssues()
-    const grouped = new Map<HTMLElement, Array<string>>()
-    for (const issue of issues) {
-      let target: HTMLElement = formIssues
-      for (let length = issue.path.length; length > 0; length--) {
-        const candidate = context.issueTargets.get(JSON.stringify(issue.path.slice(0, length)))
-        if (candidate !== undefined) {
-          target = candidate
-          break
-        }
-      }
-      const messages = grouped.get(target) ?? []
-      if (!messages.includes(issue.message)) messages.push(issue.message)
-      grouped.set(target, messages)
-    }
-    grouped.forEach((messages, target) => {
-      messages.forEach((message) => target.append(element("div", undefined, message)))
-      target.hidden = false
-    })
-  }
-  return {
-    element: form,
-    hasFields: control.interactive,
-    supported: control.supported,
-    read: () => {
-      clearIssues()
-      if (!form.reportValidity() || !control.supported) return { ok: false }
-      const value = control.read()
-      return {
-        ok: true,
-        value: isRecord(value) && options.fixed !== undefined ? { ...value, ...options.fixed } : value
-      }
-    },
-    clearIssues,
-    setIssues,
-    setPending: (pending) => {
-      form.toggleAttribute("inert", pending)
-      form.setAttribute("aria-busy", String(pending))
-    }
-  }
-}

package/src/internal/browser/invoke-outcomes-example.ts

@@ -0,0 +1,231 @@
+import { Machine } from "@typeonce/effect-machine"
+import { Effect, Schema, Stream } from "effect"
+
+class ChildWorking extends Schema.TaggedClass<ChildWorking>("InvokeGalleryChildWorking")("Working", {
+  task: Schema.String
+}) {}
+class ChildDone extends Schema.TaggedClass<ChildDone>("InvokeGalleryChildDone")("Done", {
+  result: Schema.String
+}) {}
+class FinishChild extends Schema.TaggedClass<FinishChild>("InvokeGalleryFinishChild")("FinishChild", {}) {}
+
+const ChildStates = Machine.states({
+  Working: ChildWorking,
+  Done: { schema: ChildDone, type: "final", output: Schema.String }
+})
+
+export const invokeGalleryChildMachine = Machine.make({
+  id: "invoke-gallery-child",
+  states: ChildStates.states,
+  events: Machine.events(FinishChild),
+  initial: (to) => to.Working().resolve(({ target }) => target.decoded(new ChildWorking({ task: "render-preview" })))
+}).handle({
+  Working: {
+    on: {
+      FinishChild: (to) =>
+        to.full.Done().resolve(({ state, target }) =>
+          target.decoded(new ChildDone({ result: `${state.task}:complete` }))
+        )
+    }
+  },
+  Done: {
+    output: ({ state }) => state.result
+  }
+})
+
+const InvokedChild = Machine.child("preview-worker", invokeGalleryChildMachine)
+
+class Gallery extends Schema.TaggedClass<Gallery>("InvokeGallery")("Gallery", {
+  selectedDemo: Schema.NullOr(Schema.String)
+}) {}
+class Choose extends Schema.TaggedClass<Choose>("InvokeGalleryChoose")("Choose", {}) {}
+class LoadingDocument extends Schema.TaggedClass<LoadingDocument>("InvokeGalleryLoadingDocument")(
+  "LoadingDocument",
+  { request: Schema.String }
+) {}
+class StreamingUpdates extends Schema.TaggedClass<StreamingUpdates>("InvokeGalleryStreamingUpdates")(
+  "StreamingUpdates",
+  { values: Schema.Array(Schema.Number) }
+) {}
+class WaitingForTimeout extends Schema.TaggedClass<WaitingForTimeout>("InvokeGalleryWaitingForTimeout")(
+  "WaitingForTimeout",
+  { delay: Schema.Literal("2 seconds") }
+) {}
+class WatchingProcess extends Schema.TaggedClass<WatchingProcess>("InvokeGalleryWatchingProcess")(
+  "WatchingProcess",
+  { revision: Schema.Number }
+) {}
+class RunningChild extends Schema.TaggedClass<RunningChild>("InvokeGalleryRunningChild")("RunningChild", {}) {}
+class Completed extends Schema.TaggedClass<Completed>("InvokeGalleryCompleted")("Completed", {
+  source: Schema.String,
+  result: Schema.String
+}) {}
+class Failed extends Schema.TaggedClass<Failed>("InvokeGalleryFailed")("Failed", {
+  source: Schema.String,
+  message: Schema.String
+}) {}
+
+class RunEffect extends Schema.TaggedClass<RunEffect>("InvokeGalleryRunEffect")("RunEffect", {
+  request: Schema.String
+}) {}
+class RunStream extends Schema.TaggedClass<RunStream>("InvokeGalleryRunStream")("RunStream", {}) {}
+class RunTimer extends Schema.TaggedClass<RunTimer>("InvokeGalleryRunTimer")("RunTimer", {}) {}
+class RunProcess extends Schema.TaggedClass<RunProcess>("InvokeGalleryRunProcess")("RunProcess", {}) {}
+class RunChild extends Schema.TaggedClass<RunChild>("InvokeGalleryRunChild")("RunChild", {}) {}
+class Reset extends Schema.TaggedClass<Reset>("InvokeGalleryReset")("Reset", {}) {}
+class StreamValue extends Schema.TaggedClass<StreamValue>("InvokeGalleryStreamValue")("StreamValue", {
+  value: Schema.Number
+}) {}
+
+const GalleryEvents = Machine.events(RunEffect, RunStream, RunTimer, RunProcess, RunChild, Reset)
+const GalleryInternalEvents = Machine.internalEvents(StreamValue)
+const processLogic = Machine.logic({
+  initial: "starting" as "starting" | "ready",
+  run: () => Effect.fail("process stopped")
+})
+
+const GalleryStates = Machine.states({
+  Gallery: {
+    schema: Gallery,
+    initial: "Choose",
+    states: {
+      Choose,
+      LoadingDocument,
+      StreamingUpdates,
+      WaitingForTimeout,
+      WatchingProcess,
+      RunningChild
+    }
+  },
+  Completed,
+  Failed
+})
+
+export const invokeOutcomesMachine = Machine.make({
+  id: "invoke-outcomes",
+  states: GalleryStates.states,
+  events: GalleryEvents,
+  internalEvents: GalleryInternalEvents,
+  initial: (to) =>
+    to.Gallery.initial.resolve(({ target }) =>
+      target.decoded(
+        new Gallery({ selectedDemo: null }),
+        (gallery) => gallery.Choose.decoded(new Choose({}))
+      )
+    )
+}).handle({
+  Gallery: {
+    initialize: ({ builder }) => builder.decoded(new Choose({})),
+    on: {
+      Reset: (to) => to.local.Choose().resolve(({ target }) => target.decoded(new Choose({})))
+    },
+    states: {
+      Choose: {
+        on: {
+          RunEffect: (to) =>
+            to.local.LoadingDocument().resolve(({ event, target }) =>
+              target.decoded(new LoadingDocument({ request: event.request }))
+            ),
+          RunStream: (to) =>
+            to.local.StreamingUpdates().resolve(({ target }) => target.decoded(new StreamingUpdates({ values: [] }))),
+          RunTimer: (to) =>
+            to.local.WaitingForTimeout().resolve(({ target }) =>
+              target.decoded(new WaitingForTimeout({ delay: "2 seconds" }))
+            ),
+          RunProcess: (to) =>
+            to.local.WatchingProcess().resolve(({ target }) => target.decoded(new WatchingProcess({ revision: 1 }))),
+          RunChild: (to) => to.local.RunningChild().resolve(({ target }) => target.decoded(new RunningChild({})))
+        }
+      },
+      LoadingDocument: {
+        invoke: (from) =>
+          from.effect(
+            "load-document",
+            ({ state }) =>
+              state.request === "fail" ? Effect.fail("document unavailable") : Effect.succeed("document loaded")
+          ).onDone((to) =>
+            to.full.Completed().resolve(({ output, target }) =>
+              target.decoded(new Completed({ source: "effect", result: output }))
+            )
+          ).onFailure((to) =>
+            to.full.Failed().resolve(({ error, target }) =>
+              target.decoded(new Failed({ source: "effect", message: error }))
+            )
+          )
+      },
+      StreamingUpdates: {
+        invoke: (from) =>
+          from.stream(
+            "document-updates",
+            () => Stream.fromIterable([1, 2, 3]).pipe(Stream.concat(Stream.fail("stream disconnected")))
+          ).onElement((to) =>
+            to.none.resolve(({ element }, enqueue) => {
+              enqueue.raise(GalleryInternalEvents.StreamValue({ value: element }))
+            })
+          ).onDone((to) =>
+            to.full.Completed().resolve(({ state, target }) =>
+              target.decoded(new Completed({ source: "stream", result: state.values.join(", ") }))
+            )
+          ).onFailure((to) =>
+            to.full.Failed().resolve(({ error, target }) =>
+              target.decoded(new Failed({ source: "stream", message: error }))
+            )
+          ),
+        on: {
+          StreamValue: (to) =>
+            to.local.StreamingUpdates().resolve(({ event, state, target }) =>
+              target.decoded(new StreamingUpdates({ values: [...state.values, event.value] }))
+            )
+        }
+      },
+      WaitingForTimeout: {
+        invoke: (from) =>
+          from.timer("request-timeout", "2 seconds").onDone((to) =>
+            to.full.Completed().resolve(({ target }) =>
+              target.decoded(new Completed({ source: "timer", result: "timeout elapsed" }))
+            )
+          )
+      },
+      WatchingProcess: {
+        invoke: (from) =>
+          from.logic("status-worker", {
+            address: Machine.childAddress("status-worker"),
+            logic: processLogic
+          }).onFailure((to) =>
+            to.full.Failed().resolve(({ error, target }) =>
+              target.decoded(new Failed({ source: "process", message: String(error) }))
+            )
+          ).onSnapshot((to) =>
+            to.branches({
+              ready: { title: "Worker reports ready", target: to.full.Completed() },
+              waiting: { title: "Worker is still starting", target: to.none }
+            }).resolve(({ select, snapshot }) =>
+              snapshot.state === "ready"
+                ? select.ready.decoded(new Completed({ source: "process", result: "ready" }))
+                : select.waiting()
+            )
+          )
+      },
+      RunningChild: {
+        invoke: (from) =>
+          from.child(InvokedChild).onDone((to) =>
+            to.full.Completed().resolve(({ output, target }) =>
+              target.decoded(new Completed({ source: "child machine", result: output }))
+            )
+          )
+      }
+    }
+  },
+  Completed: {
+    on: {
+      Reset: (to) =>
+        to.full.Gallery.initial.resolve(({ target }) => target.decoded(new Gallery({ selectedDemo: null })))
+    }
+  },
+  Failed: {
+    on: {
+      Reset: (to) =>
+        to.full.Gallery.initial.resolve(({ target }) => target.decoded(new Gallery({ selectedDemo: null })))
+    }
+  }
+})