create-foldkit-app 0.32.0 → 0.32.1

package/dist/templates/examples/ui-showcase/src/ui/update.ts

@@ -1,4 +1,4 @@
-import { Array, Match as M, Number, Option, pipe } from 'effect'
+import { Array, Number, Option, pipe } from 'effect'
 import { Update } from 'foldkit'
 import { evo } from 'foldkit/struct'
 
@@ -20,9 +20,8 @@ import {
   Tooltip,
   VirtualList,
 } from '@foldkit/ui'
-import { Message as AnimationMessage } from '@foldkit/ui/animation'
 
-import { UiMessage } from './message'
+import { Message as UiMessage } from './message'
 import type {
   City,
   DemoColumn,
@@ -83,51 +82,46 @@ const reorderColumns = (
 
 const DemoMenu = Menu.create<string>()
 
-const foldDialogOutMessage = M.type<Dialog.OutMessage>().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    Opened: () => model => ({ model }),
-    Closed: () => model => ({ model }),
-  }),
-)
+const foldDialogOutMessage = Dialog.OutMessage.match<
+  Update.Step<UiModel, UiMessage>
+>({
+  Opened: () => model => ({ model }),
+  Closed: () => model => ({ model }),
+})
 
-const foldMenuOutMessage = M.type<Menu.OutMessage<string>>().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    Selected: () => model => ({ model }),
-  }),
-)
+const foldMenuOutMessage = Menu.OutMessage.match<
+  Update.Step<UiModel, UiMessage>,
+  Menu.OutMessage<string>
+>({
+  Selected: () => model => ({ model }),
+})
 
-const foldPopoverOutMessage = M.type<Popover.OutMessage>().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    Opened: () => model => ({ model }),
-    Closed: () => model => ({ model }),
-  }),
-)
+const foldPopoverOutMessage = Popover.OutMessage.match<
+  Update.Step<UiModel, UiMessage>
+>({
+  Opened: () => model => ({ model }),
+  Closed: () => model => ({ model }),
+})
 
-const foldToastOutMessage = M.type<typeof Toast.OutMessage.Type>().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    DismissedToast: () => model => ({ model }),
-  }),
-)
+const foldToastOutMessage = Toast.OutMessage.match<
+  Update.Step<UiModel, UiMessage>
+>({
+  DismissedToast: () => model => ({ model }),
+})
 
-const foldTooltipOutMessage = M.type<Tooltip.OutMessage>().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    Shown: () => model => ({ model }),
-    Hidden: () => model => ({ model }),
-  }),
-)
+const foldTooltipOutMessage = Tooltip.OutMessage.match<
+  Update.Step<UiModel, UiMessage>
+>({
+  Shown: () => model => ({ model }),
+  Hidden: () => model => ({ model }),
+})
 
-const foldHoverIntentOutMessage = M.type<HoverIntent.OutMessage>().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    Opened: () => model => ({ model }),
-    Closed: () => model => ({ model }),
-  }),
-)
+const foldHoverIntentOutMessage = HoverIntent.OutMessage.match<
+  Update.Step<UiModel, UiMessage>
+>({
+  Opened: () => model => ({ model }),
+  Closed: () => model => ({ model }),
+})
 
 const foldMobileMenuDialog = Update.foldChild({
   update: Dialog.update,
@@ -147,19 +141,28 @@ const foldMobileMenuDialogOpen = Update.foldChildStep({
   foldOutMessage: foldDialogOutMessage,
 })
 
-const foldComboboxDemoOutMessage = M.type<Combobox.OutMessage<City>>().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    Selected:
-      ({ value }) =>
-      model => ({
-        model: evo(model, {
-          maybeComboboxDemoSelectedCity: () => Option.some(value),
-        }),
+const foldMobileMenuDialogClose = Update.foldChildStep({
+  update: Dialog.close,
+  read: (model: UiModel) => Option.some(model.mobileMenuDialog),
+  write: (model, nextMobileMenuDialog) =>
+    evo(model, { mobileMenuDialog: () => nextMobileMenuDialog }),
+  toParentMessage: message => UiMessage.GotMobileMenuDialogMessage({ message }),
+  foldOutMessage: foldDialogOutMessage,
+})
+
+const foldComboboxDemoOutMessage = Combobox.OutMessage.match<
+  Update.Step<UiModel, UiMessage>,
+  Combobox.OutMessage<City>
+>({
+  Selected:
+    ({ value }) =>
+    model => ({
+      model: evo(model, {
+        maybeComboboxDemoSelectedCity: () => Option.some(value),
       }),
-    ClearedSelection: () => model => ({ model }),
-  }),
-)
+    }),
+  ClearedSelection: () => model => ({ model }),
+})
 
 const foldComboboxDemo = Update.foldChild({
   update: CityCombobox.update,
@@ -170,28 +173,27 @@ const foldComboboxDemo = Update.foldChild({
   foldOutMessage: foldComboboxDemoOutMessage,
 })
 
-const foldComboboxNullableDemoOutMessage = M.type<
+const foldComboboxNullableDemoOutMessage = Combobox.OutMessage.match<
+  Update.Step<UiModel, UiMessage>,
   Combobox.OutMessage<City>
->().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    Selected:
-      ({ value }) =>
-      model => ({
-        model: evo(model, {
-          maybeComboboxNullableDemoSelectedCity: () =>
-            Option.contains(model.maybeComboboxNullableDemoSelectedCity, value)
+>({
+  Selected:
+    ({ value }) =>
+    model => ({
+      model: evo(model, {
+        maybeComboboxNullableDemoSelectedCity:
+          maybeComboboxNullableDemoSelectedCity =>
+            Option.contains(maybeComboboxNullableDemoSelectedCity, value)
               ? Option.none()
               : Option.some(value),
-        }),
-      }),
-    ClearedSelection: () => model => ({
-      model: evo(model, {
-        maybeComboboxNullableDemoSelectedCity: () => Option.none(),
       }),
     }),
+  ClearedSelection: () => model => ({
+    model: evo(model, {
+      maybeComboboxNullableDemoSelectedCity: () => Option.none(),
+    }),
   }),
-)
+})
 
 const foldComboboxNullableDemo = Update.foldChild({
   update: CityCombobox.update,
@@ -203,27 +205,25 @@ const foldComboboxNullableDemo = Update.foldChild({
   foldOutMessage: foldComboboxNullableDemoOutMessage,
 })
 
-const foldComboboxMultiDemoOutMessage = M.type<
+const foldComboboxMultiDemoOutMessage = Combobox.OutMessage.match<
+  Update.Step<UiModel, UiMessage>,
   Combobox.OutMessage<City>
->().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    Selected:
-      ({ value }) =>
-      model => ({
-        model: evo(model, {
-          comboboxMultiDemoSelectedCities: () =>
-            Array.contains(model.comboboxMultiDemoSelectedCities, value)
-              ? Array.filter(
-                  model.comboboxMultiDemoSelectedCities,
-                  city => city !== value,
-                )
-              : Array.append(model.comboboxMultiDemoSelectedCities, value),
-        }),
+>({
+  Selected:
+    ({ value }) =>
+    model => ({
+      model: evo(model, {
+        comboboxMultiDemoSelectedCities: comboboxMultiDemoSelectedCities =>
+          Array.contains(comboboxMultiDemoSelectedCities, value)
+            ? Array.filter(
+                comboboxMultiDemoSelectedCities,
+                city => city !== value,
+              )
+            : Array.append(comboboxMultiDemoSelectedCities, value),
       }),
-    ClearedSelection: () => model => ({ model }),
-  }),
-)
+    }),
+  ClearedSelection: () => model => ({ model }),
+})
 
 const foldComboboxMultiDemo = Update.foldChild({
   update: CityMultiCombobox.update,
@@ -235,21 +235,19 @@ const foldComboboxMultiDemo = Update.foldChild({
   foldOutMessage: foldComboboxMultiDemoOutMessage,
 })
 
-const foldComboboxPlacementLockDemoOutMessage = M.type<
+const foldComboboxPlacementLockDemoOutMessage = Combobox.OutMessage.match<
+  Update.Step<UiModel, UiMessage>,
   Combobox.OutMessage<City>
->().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    Selected:
-      ({ value }) =>
-      model => ({
-        model: evo(model, {
-          maybeComboboxPlacementLockDemoSelectedCity: () => Option.some(value),
-        }),
+>({
+  Selected:
+    ({ value }) =>
+    model => ({
+      model: evo(model, {
+        maybeComboboxPlacementLockDemoSelectedCity: () => Option.some(value),
       }),
-    ClearedSelection: () => model => ({ model }),
-  }),
-)
+    }),
+  ClearedSelection: () => model => ({ model }),
+})
 
 const foldComboboxPlacementLockDemo = Update.foldChild({
   update: CityCombobox.update,
@@ -263,21 +261,19 @@ const foldComboboxPlacementLockDemo = Update.foldChild({
   foldOutMessage: foldComboboxPlacementLockDemoOutMessage,
 })
 
-const foldComboboxSelectOnFocusDemoOutMessage = M.type<
+const foldComboboxSelectOnFocusDemoOutMessage = Combobox.OutMessage.match<
+  Update.Step<UiModel, UiMessage>,
   Combobox.OutMessage<City>
->().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    Selected:
-      ({ value }) =>
-      model => ({
-        model: evo(model, {
-          maybeComboboxSelectOnFocusDemoSelectedCity: () => Option.some(value),
-        }),
+>({
+  Selected:
+    ({ value }) =>
+    model => ({
+      model: evo(model, {
+        maybeComboboxSelectOnFocusDemoSelectedCity: () => Option.some(value),
       }),
-    ClearedSelection: () => model => ({ model }),
-  }),
-)
+    }),
+  ClearedSelection: () => model => ({ model }),
+})
 
 const foldComboboxSelectOnFocusDemo = Update.foldChild({
   update: CityCombobox.update,
@@ -349,21 +345,19 @@ const foldOverlayDialogDemoOpen = Update.foldChildStep({
   foldOutMessage: foldDialogOutMessage,
 })
 
-const foldOverlayComboboxDemoOutMessage = M.type<
+const foldOverlayComboboxDemoOutMessage = Combobox.OutMessage.match<
+  Update.Step<UiModel, UiMessage>,
   Combobox.OutMessage<City>
->().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    Selected:
-      ({ value }) =>
-      model => ({
-        model: evo(model, {
-          maybeOverlayComboboxDemoSelectedCity: () => Option.some(value),
-        }),
+>({
+  Selected:
+    ({ value }) =>
+    model => ({
+      model: evo(model, {
+        maybeOverlayComboboxDemoSelectedCity: () => Option.some(value),
       }),
-    ClearedSelection: () => model => ({ model }),
-  }),
-)
+    }),
+  ClearedSelection: () => model => ({ model }),
+})
 
 const foldOverlayComboboxDemo = Update.foldChild({
   update: CityCombobox.update,
@@ -415,19 +409,18 @@ const foldNestedDialogChildDemoOpen = Update.foldChildStep({
   foldOutMessage: foldDialogOutMessage,
 })
 
-const foldCalendarBasicDemoOutMessage = M.type<Calendar.OutMessage>().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    SelectedDate:
-      ({ date }) =>
-      model => ({
-        model: evo(model, {
-          maybeCalendarBasicDemoSelectedDate: () => Option.some(date),
-        }),
+const foldCalendarBasicDemoOutMessage = Calendar.OutMessage.match<
+  Update.Step<UiModel, UiMessage>
+>({
+  SelectedDate:
+    ({ date }) =>
+    model => ({
+      model: evo(model, {
+        maybeCalendarBasicDemoSelectedDate: () => Option.some(date),
       }),
-    ChangedViewMonth: () => model => ({ model }),
-  }),
-)
+    }),
+  ChangedViewMonth: () => model => ({ model }),
+})
 
 const foldCalendarBasicDemo = Update.foldChild({
   update: Calendar.update,
@@ -439,24 +432,23 @@ const foldCalendarBasicDemo = Update.foldChild({
   foldOutMessage: foldCalendarBasicDemoOutMessage,
 })
 
-const foldDatePickerBasicDemoOutMessage = M.type<DatePicker.OutMessage>().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    SelectedDate:
-      ({ date }) =>
-      model => ({
-        model: evo(model, {
-          maybeDatePickerBasicDemoSelectedDate: () => Option.some(date),
-        }),
-      }),
-    ClearedDate: () => model => ({
+const foldDatePickerBasicDemoOutMessage = DatePicker.OutMessage.match<
+  Update.Step<UiModel, UiMessage>
+>({
+  SelectedDate:
+    ({ date }) =>
+    model => ({
       model: evo(model, {
-        maybeDatePickerBasicDemoSelectedDate: () => Option.none(),
+        maybeDatePickerBasicDemoSelectedDate: () => Option.some(date),
       }),
     }),
-    ChangedViewMonth: () => model => ({ model }),
+  ClearedDate: () => model => ({
+    model: evo(model, {
+      maybeDatePickerBasicDemoSelectedDate: () => Option.none(),
+    }),
   }),
-)
+  ChangedViewMonth: () => model => ({ model }),
+})
 
 const foldDatePickerBasicDemo = Update.foldChild({
   update: DatePicker.update,
@@ -468,26 +460,25 @@ const foldDatePickerBasicDemo = Update.foldChild({
   foldOutMessage: foldDatePickerBasicDemoOutMessage,
 })
 
-const foldDragAndDropDemoOutMessage = M.type<DragAndDrop.OutMessage>().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    Reordered:
-      ({ itemId, fromContainerId, toContainerId, toIndex }) =>
-      model => ({
-        model: evo(model, {
-          dragAndDropDemoColumns: () =>
-            reorderColumns(
-              model.dragAndDropDemoColumns,
-              itemId,
-              fromContainerId,
-              toContainerId,
-              toIndex,
-            ),
-        }),
+const foldDragAndDropDemoOutMessage = DragAndDrop.OutMessage.match<
+  Update.Step<UiModel, UiMessage>
+>({
+  Reordered:
+    ({ itemId, fromContainerId, toContainerId, toIndex }) =>
+    model => ({
+      model: evo(model, {
+        dragAndDropDemoColumns: dragAndDropDemoColumns =>
+          reorderColumns(
+            dragAndDropDemoColumns,
+            itemId,
+            fromContainerId,
+            toContainerId,
+            toIndex,
+          ),
       }),
-    Cancelled: () => model => ({ model }),
-  }),
-)
+    }),
+  Cancelled: () => model => ({ model }),
+})
 
 const foldDragAndDropDemo = Update.foldChild({
   update: DragAndDrop.update,
@@ -498,22 +489,18 @@ const foldDragAndDropDemo = Update.foldChild({
   foldOutMessage: foldDragAndDropDemoOutMessage,
 })
 
-const foldFileDropBasicDemoOutMessage = M.type<FileDrop.OutMessage>().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    ReceivedFiles:
-      ({ files }) =>
-      model => ({
-        model: evo(model, {
-          fileDropBasicDemoFiles: () => [
-            ...model.fileDropBasicDemoFiles,
-            ...files,
-          ],
-        }),
+const foldFileDropBasicDemoOutMessage = FileDrop.OutMessage.match<
+  Update.Step<UiModel, UiMessage>
+>({
+  ReceivedFiles:
+    ({ files }) =>
+    model => ({
+      model: evo(model, {
+        fileDropBasicDemoFiles: Array.appendAll(files),
       }),
-    RejectedNonFiles: () => model => ({ model }),
-  }),
-)
+    }),
+  RejectedNonFiles: () => model => ({ model }),
+})
 
 const foldFileDropBasicDemo = Update.foldChild({
   update: FileDrop.update,
@@ -525,20 +512,18 @@ const foldFileDropBasicDemo = Update.foldChild({
   foldOutMessage: foldFileDropBasicDemoOutMessage,
 })
 
-const foldListboxDemoOutMessage = M.type<
+const foldListboxDemoOutMessage = Listbox.OutMessage.match<
+  Update.Step<UiModel, UiMessage>,
   Listbox.OutMessage<ListboxItem>
->().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    Selected:
-      ({ value }) =>
-      model => ({
-        model: evo(model, {
-          maybeListboxDemoSelectedItem: () => Option.some(value),
-        }),
+>({
+  Selected:
+    ({ value }) =>
+    model => ({
+      model: evo(model, {
+        maybeListboxDemoSelectedItem: () => Option.some(value),
       }),
-  }),
-)
+    }),
+})
 
 const foldListboxDemo = Update.foldChild({
   update: ItemListbox.update,
@@ -549,28 +534,24 @@ const foldListboxDemo = Update.foldChild({
   foldOutMessage: foldListboxDemoOutMessage,
 })
 
-const foldListboxMultiDemoOutMessage: (
-  outMessage: Listbox.OutMessage<ListboxItem>,
-) => Update.Step<UiModel, UiMessage> = M.type<
+const foldListboxMultiDemoOutMessage = Listbox.OutMessage.match<
+  Update.Step<UiModel, UiMessage>,
   Listbox.OutMessage<ListboxItem>
->().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    Selected:
-      ({ value }) =>
-      model => ({
-        model: evo(model, {
-          listboxMultiDemoSelectedItems: () =>
-            Array.contains(model.listboxMultiDemoSelectedItems, value)
-              ? Array.filter(
-                  model.listboxMultiDemoSelectedItems,
-                  item => item !== value,
-                )
-              : Array.append(model.listboxMultiDemoSelectedItems, value),
-        }),
+>({
+  Selected:
+    ({ value }) =>
+    model => ({
+      model: evo(model, {
+        listboxMultiDemoSelectedItems: listboxMultiDemoSelectedItems =>
+          Array.contains(listboxMultiDemoSelectedItems, value)
+            ? Array.filter(
+                listboxMultiDemoSelectedItems,
+                item => item !== value,
+              )
+            : Array.append(listboxMultiDemoSelectedItems, value),
       }),
-  }),
-)
+    }),
+})
 
 const foldListboxMultiDemo = Update.foldChild({
   update: ItemMultiListbox.update,
@@ -581,18 +562,17 @@ const foldListboxMultiDemo = Update.foldChild({
   foldOutMessage: foldListboxMultiDemoOutMessage,
 })
 
-const foldListboxGroupedDemoOutMessage = M.type<Listbox.OutMessage>().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    Selected:
-      ({ value }) =>
-      model => ({
-        model: evo(model, {
-          maybeListboxGroupedDemoSelectedItem: () => Option.some(value),
-        }),
+const foldListboxGroupedDemoOutMessage = Listbox.OutMessage.match<
+  Update.Step<UiModel, UiMessage>
+>({
+  Selected:
+    ({ value }) =>
+    model => ({
+      model: evo(model, {
+        maybeListboxGroupedDemoSelectedItem: () => Option.some(value),
       }),
-  }),
-)
+    }),
+})
 
 const foldListboxGroupedDemo = Update.foldChild({
   update: CharacterListbox.update,
@@ -661,20 +641,18 @@ const foldPopoverNestedChildDemo = Update.foldChild({
   foldOutMessage: foldPopoverOutMessage,
 })
 
-const foldVerticalRadioGroupDemoOutMessage = M.type<
+const foldVerticalRadioGroupDemoOutMessage = RadioGroup.OutMessage.match<
+  Update.Step<UiModel, UiMessage>,
   RadioGroup.OutMessage<Plan>
->().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    Selected:
-      ({ value }) =>
-      model => ({
-        model: evo(model, {
-          verticalRadioGroupDemoValue: () => Option.some(value),
-        }),
+>({
+  Selected:
+    ({ value }) =>
+    model => ({
+      model: evo(model, {
+        verticalRadioGroupDemoValue: () => Option.some(value),
       }),
-  }),
-)
+    }),
+})
 
 const foldVerticalRadioGroupDemo = Update.foldChild({
   update: PlanRadioGroup.update,
@@ -686,20 +664,18 @@ const foldVerticalRadioGroupDemo = Update.foldChild({
   foldOutMessage: foldVerticalRadioGroupDemoOutMessage,
 })
 
-const foldHorizontalRadioGroupDemoOutMessage = M.type<
+const foldHorizontalRadioGroupDemoOutMessage = RadioGroup.OutMessage.match<
+  Update.Step<UiModel, UiMessage>,
   RadioGroup.OutMessage<Plan>
->().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    Selected:
-      ({ value }) =>
-      model => ({
-        model: evo(model, {
-          horizontalRadioGroupDemoValue: () => Option.some(value),
-        }),
+>({
+  Selected:
+    ({ value }) =>
+    model => ({
+      model: evo(model, {
+        horizontalRadioGroupDemoValue: () => Option.some(value),
       }),
-  }),
-)
+    }),
+})
 
 const foldHorizontalRadioGroupDemo = Update.foldChild({
   update: PlanRadioGroup.update,
@@ -713,14 +689,13 @@ const foldHorizontalRadioGroupDemo = Update.foldChild({
   foldOutMessage: foldHorizontalRadioGroupDemoOutMessage,
 })
 
-const foldSliderRatingDemoOutMessage = M.type<Slider.OutMessage>().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    ChangedValue:
-      ({ value }) =>
-      model => ({ model: evo(model, { sliderRatingValue: () => value }) }),
-  }),
-)
+const foldSliderRatingDemoOutMessage = Slider.OutMessage.match<
+  Update.Step<UiModel, UiMessage>
+>({
+  ChangedValue:
+    ({ value }) =>
+    model => ({ model: evo(model, { sliderRatingValue: () => value }) }),
+})
 
 const foldSliderRatingDemo = Update.foldChild({
   update: Slider.update,
@@ -731,14 +706,13 @@ const foldSliderRatingDemo = Update.foldChild({
   foldOutMessage: foldSliderRatingDemoOutMessage,
 })
 
-const foldSliderVolumeDemoOutMessage = M.type<Slider.OutMessage>().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    ChangedValue:
-      ({ value }) =>
-      model => ({ model: evo(model, { sliderVolumeValue: () => value }) }),
-  }),
-)
+const foldSliderVolumeDemoOutMessage = Slider.OutMessage.match<
+  Update.Step<UiModel, UiMessage>
+>({
+  ChangedValue:
+    ({ value }) =>
+    model => ({ model: evo(model, { sliderVolumeValue: () => value }) }),
+})
 
 const foldSliderVolumeDemo = Update.foldChild({
   update: Slider.update,
@@ -749,16 +723,14 @@ const foldSliderVolumeDemo = Update.foldChild({
   foldOutMessage: foldSliderVolumeDemoOutMessage,
 })
 
-const foldHorizontalTabsDemoOutMessage = M.type<
+const foldHorizontalTabsDemoOutMessage = Tabs.OutMessage.match<
+  Update.Step<UiModel, UiMessage>,
   Tabs.OutMessage<DemoTab>
->().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    Selected:
-      ({ value }) =>
-      model => ({ model: evo(model, { horizontalTabsDemoTab: () => value }) }),
-  }),
-)
+>({
+  Selected:
+    ({ value }) =>
+    model => ({ model: evo(model, { horizontalTabsDemoTab: () => value }) }),
+})
 
 const foldHorizontalTabsDemo = Update.foldChild({
   update: DemoTabs.update,
@@ -770,14 +742,14 @@ const foldHorizontalTabsDemo = Update.foldChild({
   foldOutMessage: foldHorizontalTabsDemoOutMessage,
 })
 
-const foldVerticalTabsDemoOutMessage = M.type<Tabs.OutMessage<DemoTab>>().pipe(
-  M.withReturnType<Update.Step<UiModel, UiMessage>>(),
-  M.tagsExhaustive({
-    Selected:
-      ({ value }) =>
-      model => ({ model: evo(model, { verticalTabsDemoTab: () => value }) }),
-  }),
-)
+const foldVerticalTabsDemoOutMessage = Tabs.OutMessage.match<
+  Update.Step<UiModel, UiMessage>,
+  Tabs.OutMessage<DemoTab>
+>({
+  Selected:
+    ({ value }) =>
+    model => ({ model: evo(model, { verticalTabsDemoTab: () => value }) }),
+})
 
 const foldVerticalTabsDemo = Update.foldChild({
   update: DemoTabs.update,
@@ -866,6 +838,22 @@ const foldAnimationDemo = Update.foldChild({
   foldOutMessage: foldAnimationDemoOutMessage,
 })
 
+const foldAnimationDemoShow = Update.foldChildStep({
+  update: Animation.show,
+  read: (model: UiModel) => Option.some(model.animationDemo),
+  write: (model, nextAnimationDemo) =>
+    evo(model, { animationDemo: () => nextAnimationDemo }),
+  toParentMessage: message => UiMessage.GotAnimationDemoMessage({ message }),
+})
+
+const foldAnimationDemoHide = Update.foldChildStep({
+  update: Animation.hide,
+  read: (model: UiModel) => Option.some(model.animationDemo),
+  write: (model, nextAnimationDemo) =>
+    evo(model, { animationDemo: () => nextAnimationDemo }),
+  toParentMessage: message => UiMessage.GotAnimationDemoMessage({ message }),
+})
+
 const foldVirtualListDemo = Update.foldChild({
   update: VirtualList.update,
   read: (model: UiModel) => Option.some(model.virtualListDemo),
@@ -908,8 +896,6 @@ const foldVirtualListVariableDemoScrollToIndex = Update.foldChild({
 
 export const uiUpdate = (model: UiModel, message: UiMessage) =>
   UiMessage.match<Update.Return<UiModel, UiMessage>>(message, {
-    ClickedOpenMobileMenu: () => foldMobileMenuDialogOpen(model),
-
     GotMobileMenuDialogMessage: ({ message }) =>
       foldMobileMenuDialog(model, message),
 
@@ -1156,13 +1142,10 @@ export const uiUpdate = (model: UiModel, message: UiMessage) =>
 
     GotAnimationDemoMessage: ({ message }) => foldAnimationDemo(model, message),
 
-    ToggledAnimationDemo: () => {
-      const nextShowing = !model.isAnimationDemoShowing
-      return foldAnimationDemo(
-        evo(model, { isAnimationDemoShowing: () => nextShowing }),
-        nextShowing ? AnimationMessage.Showed() : AnimationMessage.Hid(),
-      )
-    },
+    ToggledAnimationDemo: () =>
+      model.animationDemo.isShowing
+        ? foldAnimationDemoHide(model)
+        : foldAnimationDemoShow(model),
 
     GotVirtualListDemoMessage: ({ message }) =>
       foldVirtualListDemo(model, message),
@@ -1182,3 +1165,9 @@ export const uiUpdate = (model: UiModel, message: UiMessage) =>
         Math.floor(VIRTUAL_LIST_ROW_COUNT / 2),
       ),
   })
+
+export const openMobileMenu = (model: UiModel) =>
+  foldMobileMenuDialogOpen(model)
+
+export const closeMobileMenu = (model: UiModel) =>
+  foldMobileMenuDialogClose(model)