create-foldkit-app 0.30.1 → 0.31.0

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

@@ -12,7 +12,7 @@ import {
 import { Document, Html, HtmlBuilder } from 'foldkit/html'
 import { defineMessageUnion } from 'foldkit/message'
 import { UrlRequest, load, pushUrl } from 'foldkit/navigation'
-import { literal, r } from 'foldkit/route'
+import { defineRouteUnion, literal } from 'foldkit/route'
 import { evo } from 'foldkit/struct'
 import { Url, toString as urlToString } from 'foldkit/url'
 
@@ -28,103 +28,82 @@ import * as View from './ui/view'
 
 // ROUTE
 
-export const HomeRoute = r('Home')
-export const ButtonRoute = r('Button')
-export const CalendarRoute = r('Calendar')
-export const CheckboxRoute = r('Checkbox')
-export const ComboboxRoute = r('Combobox')
-export const DatePickerRoute = r('DatePicker')
-export const DialogRoute = r('Dialog')
-export const DisclosureRoute = r('Disclosure')
-export const DragAndDropRoute = r('DragAndDrop')
-export const FieldsetRoute = r('Fieldset')
-export const FileDropRoute = r('FileDrop')
-export const InputRoute = r('Input')
-export const ListboxRoute = r('Listbox')
-export const MenuRoute = r('Menu')
-export const PopoverRoute = r('Popover')
-export const RadioGroupRoute = r('RadioGroup')
-export const SelectRoute = r('Select')
-export const SliderRoute = r('Slider')
-export const SwitchRoute = r('Switch')
-export const TabsRoute = r('Tabs')
-export const TextareaRoute = r('Textarea')
-export const ToastRoute = r('Toast')
-export const TooltipRoute = r('Tooltip')
-export const AnimationRoute = r('Animation')
-export const VirtualListRoute = r('VirtualList')
-export const NotFoundRoute = r('NotFound', { path: S.String })
-
-const AppRoute = S.Union([
-  HomeRoute,
-  ButtonRoute,
-  CalendarRoute,
-  CheckboxRoute,
-  ComboboxRoute,
-  DatePickerRoute,
-  DialogRoute,
-  DisclosureRoute,
-  DragAndDropRoute,
-  FieldsetRoute,
-  FileDropRoute,
-  InputRoute,
-  ListboxRoute,
-  MenuRoute,
-  PopoverRoute,
-  RadioGroupRoute,
-  SelectRoute,
-  SliderRoute,
-  SwitchRoute,
-  TabsRoute,
-  TextareaRoute,
-  ToastRoute,
-  TooltipRoute,
-  AnimationRoute,
-  VirtualListRoute,
-  NotFoundRoute,
-])
-
-type AppRoute = typeof AppRoute.Type
-
-const homeRouter = pipe(Route.root, Route.mapTo(HomeRoute))
-const buttonRouter = pipe(literal('button'), Route.mapTo(ButtonRoute))
-const calendarRouter = pipe(literal('calendar'), Route.mapTo(CalendarRoute))
-const checkboxRouter = pipe(literal('checkbox'), Route.mapTo(CheckboxRoute))
-const comboboxRouter = pipe(literal('combobox'), Route.mapTo(ComboboxRoute))
+export const AppRoute = defineRouteUnion({
+  Home: {},
+  Button: {},
+  Calendar: {},
+  Checkbox: {},
+  Combobox: {},
+  DatePicker: {},
+  Dialog: {},
+  Disclosure: {},
+  DragAndDrop: {},
+  Fieldset: {},
+  FileDrop: {},
+  Input: {},
+  Listbox: {},
+  Menu: {},
+  Popover: {},
+  RadioGroup: {},
+  Select: {},
+  Slider: {},
+  Switch: {},
+  Tabs: {},
+  Textarea: {},
+  Toast: {},
+  Tooltip: {},
+  Animation: {},
+  VirtualList: {},
+  NotFound: { path: S.String },
+})
+
+export type AppRoute = typeof AppRoute.Type
+
+const homeRouter = pipe(Route.root, Route.mapTo(AppRoute.Home))
+const buttonRouter = pipe(literal('button'), Route.mapTo(AppRoute.Button))
+const calendarRouter = pipe(literal('calendar'), Route.mapTo(AppRoute.Calendar))
+const checkboxRouter = pipe(literal('checkbox'), Route.mapTo(AppRoute.Checkbox))
+const comboboxRouter = pipe(literal('combobox'), Route.mapTo(AppRoute.Combobox))
 const datePickerRouter = pipe(
   literal('date-picker'),
-  Route.mapTo(DatePickerRoute),
+  Route.mapTo(AppRoute.DatePicker),
 )
-const dialogRouter = pipe(literal('dialog'), Route.mapTo(DialogRoute))
+const dialogRouter = pipe(literal('dialog'), Route.mapTo(AppRoute.Dialog))
 const disclosureRouter = pipe(
   literal('disclosure'),
-  Route.mapTo(DisclosureRoute),
+  Route.mapTo(AppRoute.Disclosure),
 )
 const dragAndDropRouter = pipe(
   literal('drag-and-drop'),
-  Route.mapTo(DragAndDropRoute),
+  Route.mapTo(AppRoute.DragAndDrop),
 )
-const fieldsetRouter = pipe(literal('fieldset'), Route.mapTo(FieldsetRoute))
-const fileDropRouter = pipe(literal('file-drop'), Route.mapTo(FileDropRoute))
-const inputRouter = pipe(literal('input'), Route.mapTo(InputRoute))
-const listboxRouter = pipe(literal('listbox'), Route.mapTo(ListboxRoute))
-const menuRouter = pipe(literal('menu'), Route.mapTo(MenuRoute))
-const popoverRouter = pipe(literal('popover'), Route.mapTo(PopoverRoute))
+const fieldsetRouter = pipe(literal('fieldset'), Route.mapTo(AppRoute.Fieldset))
+const fileDropRouter = pipe(
+  literal('file-drop'),
+  Route.mapTo(AppRoute.FileDrop),
+)
+const inputRouter = pipe(literal('input'), Route.mapTo(AppRoute.Input))
+const listboxRouter = pipe(literal('listbox'), Route.mapTo(AppRoute.Listbox))
+const menuRouter = pipe(literal('menu'), Route.mapTo(AppRoute.Menu))
+const popoverRouter = pipe(literal('popover'), Route.mapTo(AppRoute.Popover))
 const radioGroupRouter = pipe(
   literal('radio-group'),
-  Route.mapTo(RadioGroupRoute),
+  Route.mapTo(AppRoute.RadioGroup),
+)
+const selectRouter = pipe(literal('select'), Route.mapTo(AppRoute.Select))
+const sliderRouter = pipe(literal('slider'), Route.mapTo(AppRoute.Slider))
+const switchRouter = pipe(literal('switch'), Route.mapTo(AppRoute.Switch))
+const tabsRouter = pipe(literal('tabs'), Route.mapTo(AppRoute.Tabs))
+const textareaRouter = pipe(literal('textarea'), Route.mapTo(AppRoute.Textarea))
+const toastRouter = pipe(literal('toast'), Route.mapTo(AppRoute.Toast))
+const tooltipRouter = pipe(literal('tooltip'), Route.mapTo(AppRoute.Tooltip))
+const animationRouter = pipe(
+  literal('animation'),
+  Route.mapTo(AppRoute.Animation),
 )
-const selectRouter = pipe(literal('select'), Route.mapTo(SelectRoute))
-const sliderRouter = pipe(literal('slider'), Route.mapTo(SliderRoute))
-const switchRouter = pipe(literal('switch'), Route.mapTo(SwitchRoute))
-const tabsRouter = pipe(literal('tabs'), Route.mapTo(TabsRoute))
-const textareaRouter = pipe(literal('textarea'), Route.mapTo(TextareaRoute))
-const toastRouter = pipe(literal('toast'), Route.mapTo(ToastRoute))
-const tooltipRouter = pipe(literal('tooltip'), Route.mapTo(TooltipRoute))
-const animationRouter = pipe(literal('animation'), Route.mapTo(AnimationRoute))
 const virtualListRouter = pipe(
   literal('virtual-list'),
-  Route.mapTo(VirtualListRoute),
+  Route.mapTo(AppRoute.VirtualList),
 )
 
 const routeParser = Route.oneOf(
@@ -155,7 +134,7 @@ const routeParser = Route.oneOf(
   homeRouter,
 )
 
-const urlToAppRoute = Route.parseUrlWithFallback(routeParser, NotFoundRoute)
+const urlToAppRoute = Route.parseUrlWithFallback(routeParser, AppRoute.NotFound)
 
 // MODEL
 

package/dist/templates/examples/ui-showcase/src/scene.test.ts

@@ -2,23 +2,7 @@ import { Calendar } from 'foldkit'
 import { expect, given, role, scene, text } from 'foldkit/scene'
 import { describe, test } from 'vitest'
 
-import {
-  AnimationRoute,
-  ButtonRoute,
-  CheckboxRoute,
-  DisclosureRoute,
-  FieldsetRoute,
-  HomeRoute,
-  InputRoute,
-  type Model,
-  NotFoundRoute,
-  RadioGroupRoute,
-  SelectRoute,
-  SwitchRoute,
-  TextareaRoute,
-  update,
-  view,
-} from './main'
+import { AppRoute, type Model, update, view } from './main'
 import { uiInit } from './ui/init'
 
 const today = Calendar.make(2026, 4, 16)
@@ -29,7 +13,7 @@ const modelForRoute = (route: Model['route']): Model => ({
   uiModel: uiInit_.model,
 })
 
-const homeModel = modelForRoute(HomeRoute())
+const homeModel = modelForRoute(AppRoute.Home())
 
 describe('view', () => {
   test('the sidebar nav lists a sample of every component link', () => {
@@ -59,16 +43,16 @@ describe('view', () => {
 
   test('simple component routes render the sidebar nav', () => {
     const routes: ReadonlyArray<Model['route']> = [
-      ButtonRoute(),
-      CheckboxRoute(),
-      DisclosureRoute(),
-      FieldsetRoute(),
-      InputRoute(),
-      RadioGroupRoute(),
-      SelectRoute(),
-      SwitchRoute(),
-      TextareaRoute(),
-      AnimationRoute(),
+      AppRoute.Button(),
+      AppRoute.Checkbox(),
+      AppRoute.Disclosure(),
+      AppRoute.Fieldset(),
+      AppRoute.Input(),
+      AppRoute.RadioGroup(),
+      AppRoute.Select(),
+      AppRoute.Switch(),
+      AppRoute.Textarea(),
+      AppRoute.Animation(),
     ]
 
     routes.forEach(route => {
@@ -83,7 +67,7 @@ describe('view', () => {
   test('the Disclosure panel stays mounted while collapsed so it can animate', () => {
     scene(
       { update, view },
-      given(modelForRoute(DisclosureRoute())),
+      given(modelForRoute(AppRoute.Disclosure())),
       expect(
         text('Foldkit is an Elm-inspired UI framework', { exact: false }),
       ).toExist(),
@@ -93,7 +77,7 @@ describe('view', () => {
   test('the NotFound route renders the 404 panel and a Go Home link', () => {
     scene(
       { update, view },
-      given(modelForRoute(NotFoundRoute({ path: '/oops' }))),
+      given(modelForRoute(AppRoute.NotFound({ path: '/oops' }))),
       expect(role('heading', { name: '404 — Page Not Found' })).toExist(),
       expect(text('The path "/oops" was not found.')).toExist(),
       expect(role('link', { name: 'Go Home' })).toExist(),

package/dist/templates/examples/ui-showcase/src/story.test.ts

@@ -7,14 +7,14 @@ import { describe, expect, test } from 'vitest'
 import { Dialog } from '@foldkit/ui'
 import { Message as DialogMessage } from '@foldkit/ui/dialog'
 
-import { HomeRoute, Message, type Model, update } from './main'
+import { AppRoute, Message, type Model, update } from './main'
 import { uiInit } from './ui/init'
 
 const today = Calendar.make(2026, 4, 16)
 const uiInit_ = uiInit(today)
 
 const initialModel: Model = {
-  route: HomeRoute(),
+  route: AppRoute.Home(),
   uiModel: uiInit_.model,
 }
 

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

@@ -91,74 +91,4 @@ export const UiMessage = defineMessageUnion({
   ClickedVirtualListVariableScrollToMiddle: {},
 })
 
-export const {
-  GotMobileMenuDialogMessage,
-  ClickedOpenMobileMenu,
-  ClickedButtonDemo,
-  GotAnimationDemoMessage,
-  ToggledAnimationDemo,
-  UpdatedInputDemoValue,
-  UpdatedTextareaDemoValue,
-  UpdatedFieldsetInputValue,
-  UpdatedFieldsetTextareaValue,
-  ToggledFieldsetCheckboxDemo,
-  ToggledCheckboxBasicDemo,
-  ToggledCheckboxAllDemo,
-  ToggledCheckboxOptionADemo,
-  ToggledCheckboxOptionBDemo,
-  GotComboboxDemoMessage,
-  GotComboboxNullableDemoMessage,
-  GotComboboxMultiDemoMessage,
-  GotComboboxPlacementLockDemoMessage,
-  GotComboboxSelectOnFocusDemoMessage,
-  GotDialogDemoMessage,
-  GotDialogAnimatedDemoMessage,
-  GotOverlayDialogDemoMessage,
-  GotOverlayComboboxDemoMessage,
-  GotNestedDialogParentDemoMessage,
-  GotNestedDialogChildDemoMessage,
-  ClickedDeleteProject,
-  ClickedOpenDialog,
-  ClickedOpenAnimatedDialog,
-  ClickedEditFilters,
-  ClickedOpenProjectSettings,
-  ToggledDisclosureBasicDemo,
-  ToggledDisclosureAnimatedDemo,
-  GotCalendarBasicDemoMessage,
-  GotDatePickerBasicDemoMessage,
-  GotDragAndDropDemoMessage,
-  GotFileDropBasicDemoMessage,
-  ClickedRemoveFileDropDemoFile,
-  GotListboxDemoMessage,
-  GotListboxMultiDemoMessage,
-  GotListboxGroupedDemoMessage,
-  GotMenuBasicDemoMessage,
-  GotMenuAnimatedDemoMessage,
-  GotPopoverBasicDemoMessage,
-  GotPopoverAnimatedDemoMessage,
-  GotPopoverNestedParentDemoMessage,
-  GotPopoverNestedChildDemoMessage,
-  GotVerticalRadioGroupDemoMessage,
-  GotHorizontalRadioGroupDemoMessage,
-  UpdatedSelectDemoValue,
-  GotSliderRatingDemoMessage,
-  GotSliderVolumeDemoMessage,
-  ToggledSwitchDemo,
-  GotHorizontalTabsDemoMessage,
-  GotVerticalTabsDemoMessage,
-  GotToastDemoMessage,
-  ClickedShowInfoToast,
-  ClickedShowSuccessToast,
-  ClickedShowWarningToast,
-  ClickedShowErrorToast,
-  ClickedShowStickyToast,
-  ClickedDismissAllToasts,
-  GotTooltipBasicDemoMessage,
-  GotTooltipNoDelayDemoMessage,
-  GotVirtualListDemoMessage,
-  ClickedVirtualListScrollToMiddle,
-  GotVirtualListVariableDemoMessage,
-  ClickedVirtualListVariableScrollToMiddle,
-} = UiMessage
-
 export type UiMessage = typeof UiMessage.Type

package/dist/templates/examples/view-transitions/src/main.ts

@@ -10,7 +10,7 @@ import { Url, toString as urlToString } from 'foldkit/url'
 import { Artwork, artworks, findArtwork } from './artwork'
 import { AppRoute, artworkRouter, galleryRouter, urlToAppRoute } from './route'
 
-export { ArtworkRoute, GalleryRoute, NotFoundRoute } from './route'
+export { AppRoute } from './route'
 
 // MODEL
 

package/dist/templates/examples/view-transitions/src/route.ts

@@ -1,29 +1,26 @@
 import { Schema as S, pipe } from 'effect'
 import { Route } from 'foldkit'
-import { int, literal, r, slash } from 'foldkit/route'
+import { defineRouteUnion, int, literal, slash } from 'foldkit/route'
 
-export const GalleryRoute = r('Gallery')
-export const ArtworkRoute = r('Artwork', { artworkId: S.Number })
-export const NotFoundRoute = r('NotFound', { path: S.String })
+export const AppRoute = defineRouteUnion({
+  Gallery: {},
+  Artwork: { artworkId: S.Number },
+  NotFound: { path: S.String },
+})
 
-export const AppRoute = S.Union([GalleryRoute, ArtworkRoute, NotFoundRoute])
-
-export type GalleryRoute = typeof GalleryRoute.Type
-export type ArtworkRoute = typeof ArtworkRoute.Type
-export type NotFoundRoute = typeof NotFoundRoute.Type
 export type AppRoute = typeof AppRoute.Type
 
-export const galleryRouter = pipe(Route.root, Route.mapTo(GalleryRoute))
+export const galleryRouter = pipe(Route.root, Route.mapTo(AppRoute.Gallery))
 
 export const artworkRouter = pipe(
   literal('artwork'),
   slash(int('artworkId')),
-  Route.mapTo(ArtworkRoute),
+  Route.mapTo(AppRoute.Artwork),
 )
 
 const routeParser = Route.oneOf(artworkRouter, galleryRouter)
 
 export const urlToAppRoute = Route.parseUrlWithFallback(
   routeParser,
-  NotFoundRoute,
+  AppRoute.NotFound,
 )

package/dist/templates/examples/view-transitions/src/scene.test.ts

@@ -3,22 +3,13 @@ import { Scene } from 'foldkit'
 import { fromString } from 'foldkit/url'
 import { describe, expect, test } from 'vitest'
 
-import {
-  ArtworkRoute,
-  GalleryRoute,
-  Message,
-  Model,
-  NotFoundRoute,
-  update,
-  view,
-  viewTransition,
-} from './main'
-
-const gallery = Model.make({ route: GalleryRoute(), filterText: '' })
+import { AppRoute, Message, Model, update, view, viewTransition } from './main'
+
+const gallery = Model.make({ route: AppRoute.Gallery(), filterText: '' })
 const artworkDetail = (artworkId: number) =>
-  Model.make({ route: ArtworkRoute({ artworkId }), filterText: '' })
+  Model.make({ route: AppRoute.Artwork({ artworkId }), filterText: '' })
 const notFound = Model.make({
-  route: NotFoundRoute({ path: '/nowhere' }),
+  route: AppRoute.NotFound({ path: '/nowhere' }),
   filterText: '',
 })
 

package/dist/templates/examples/websocket-chat/src/main.ts

@@ -19,7 +19,7 @@ import {
 } from 'foldkit'
 import { Document, Html, HtmlBuilder } from 'foldkit/html'
 import { defineMessageUnion } from 'foldkit/message'
-import { ts } from 'foldkit/schema'
+import { defineTaggedUnion } from 'foldkit/schema'
 import { evo } from 'foldkit/struct'
 
 import { Button, Input } from '@foldkit/ui'
@@ -44,18 +44,13 @@ type ChatMessage = typeof ChatMessage.Type
 const ChatSocket = ManagedResource.tag<WebSocket>()('ChatSocket')
 type ChatSocketService = ManagedResource.ServiceOf<typeof ChatSocket>
 
-export const ConnectionDisconnected = ts('ConnectionDisconnected')
-export const ConnectionConnecting = ts('ConnectionConnecting')
-export const ConnectionConnected = ts('ConnectionConnected')
-export const ConnectionError = ts('ConnectionError', { error: S.String })
-
-const ConnectionState = S.Union([
-  ConnectionDisconnected,
-  ConnectionConnecting,
-  ConnectionConnected,
-  ConnectionError,
-])
-type ConnectionState = typeof ConnectionState.Type
+export const ConnectionState = defineTaggedUnion({
+  Disconnected: {},
+  Connecting: {},
+  Connected: {},
+  Error: { error: S.String },
+})
+export type ConnectionState = typeof ConnectionState.Type
 
 export const Model = S.Struct({
   connection: ConnectionState,
@@ -93,26 +88,26 @@ export const update = (model: Model, message: Message) =>
   Message.match<UpdateReturn>(message, {
     ClickedConnect: () => ({
       model: evo(model, {
-        connection: () => ConnectionConnecting(),
+        connection: () => ConnectionState.Connecting(),
       }),
     }),
 
     Connected: () => ({
       model: evo(model, {
-        connection: () => ConnectionConnected(),
+        connection: () => ConnectionState.Connected(),
       }),
     }),
 
     Disconnected: () => ({
       model: evo(model, {
-        connection: () => ConnectionDisconnected(),
+        connection: () => ConnectionState.Disconnected(),
         messages: () => [],
       }),
     }),
 
     FailedConnect: ({ error }) => ({
       model: evo(model, {
-        connection: () => ConnectionError({ error }),
+        connection: () => ConnectionState.Error({ error }),
       }),
     }),
 
@@ -131,7 +126,7 @@ export const update = (model: Model, message: Message) =>
 
       return M.value(model.connection).pipe(
         M.withReturnType<UpdateReturn>(),
-        M.tag('ConnectionConnected', () => ({
+        M.tag('Connected', () => ({
           model: evo(model, {
             messageInput: () => '',
           }),
@@ -166,7 +161,7 @@ export const update = (model: Model, message: Message) =>
 
 export const init: Runtime.ApplicationInit<Model, Message> = () => ({
   model: {
-    connection: ConnectionDisconnected(),
+    connection: ConnectionState.Disconnected(),
     messages: [],
     messageInput: '',
   },
@@ -224,8 +219,8 @@ export const managedResources = ManagedResource.make<Model, Message>()(
       resource: ChatSocket,
       modelToMaybeRequirements: model =>
         M.value(model.connection).pipe(
-          M.tag('ConnectionConnecting', () => Option.some(null)),
-          M.tag('ConnectionConnected', () => Option.some(null)),
+          M.tag('Connecting', () => Option.some(null)),
+          M.tag('Connected', () => Option.some(null)),
           M.orElse(() => Option.none()),
         ),
       acquire: () =>
@@ -321,7 +316,7 @@ export const subscriptions = Subscription.make<
     { isConnected: S.Boolean },
     {
       modelToDependencies: model => ({
-        isConnected: model.connection._tag === 'ConnectionConnected',
+        isConnected: model.connection._tag === 'Connected',
       }),
       dependenciesToStream: ({ isConnected }) =>
         Stream.when(
@@ -385,11 +380,10 @@ export const view = (model: Model, h: HtmlBuilder<Message>): Document => ({
 
           M.value(model.connection).pipe(
             M.tagsExhaustive({
-              ConnectionDisconnected: () => connectButtonView(h),
-              ConnectionConnecting: () => connectingView(h),
-              ConnectionConnected: () =>
-                messageInputView(model.messageInput, h),
-              ConnectionError: ({ error }) => errorView(error, h),
+              Disconnected: () => connectButtonView(h),
+              Connecting: () => connectingView(h),
+              Connected: () => messageInputView(model.messageInput, h),
+              Error: ({ error }) => errorView(error, h),
             }),
           ),
         ],
@@ -407,28 +401,26 @@ const connectionStatusView = (
     [
       M.value(connection).pipe(
         M.tagsExhaustive({
-          ConnectionDisconnected: () =>
+          Disconnected: () =>
             h.div([h.Class('w-3 h-3 rounded-full bg-red-500')]),
-          ConnectionConnecting: () =>
+          Connecting: () =>
             h.div([
               h.Class('w-3 h-3 rounded-full bg-yellow-500 animate-pulse'),
             ]),
-          ConnectionConnected: () =>
+          Connected: () =>
             h.div([h.Class('w-3 h-3 rounded-full bg-green-500')]),
-          ConnectionError: () =>
-            h.div([h.Class('w-3 h-3 rounded-full bg-red-500')]),
+          Error: () => h.div([h.Class('w-3 h-3 rounded-full bg-red-500')]),
         }),
       ),
       M.value(connection).pipe(
         M.tagsExhaustive({
-          ConnectionDisconnected: () =>
+          Disconnected: () =>
             h.span([h.Class('text-sm text-gray-600')], ['Disconnected']),
-          ConnectionConnecting: () =>
+          Connecting: () =>
             h.span([h.Class('text-sm text-gray-600')], ['Connecting...']),
-          ConnectionConnected: () =>
+          Connected: () =>
             h.span([h.Class('text-sm text-gray-600')], ['Connected']),
-          ConnectionError: () =>
-            h.span([h.Class('text-sm text-red-600')], ['Error']),
+          Error: () => h.span([h.Class('text-sm text-red-600')], ['Error']),
         }),
       ),
     ],

package/dist/templates/examples/websocket-chat/src/scene.test.ts

@@ -15,10 +15,7 @@ import {
 import { describe, test } from 'vitest'
 
 import {
-  ConnectionConnected,
-  ConnectionConnecting,
-  ConnectionDisconnected,
-  ConnectionError,
+  ConnectionState,
   Message,
   Model,
   SendMessage,
@@ -30,7 +27,7 @@ import {
 } from './main'
 
 const idleModel = Model.make({
-  connection: ConnectionDisconnected(),
+  connection: ConnectionState.Disconnected(),
   messages: [],
   messageInput: '',
 })
@@ -53,7 +50,10 @@ describe('view', () => {
   test('connecting state renders the Connecting message', () => {
     scene(
       { update, view },
-      given({ ...idleModel, connection: ConnectionConnecting() }),
+      given({
+        ...idleModel,
+        connection: ConnectionState.Connecting(),
+      }),
       expect(text('Connecting...')).toExist(),
     )
   })
@@ -61,7 +61,10 @@ describe('view', () => {
   test('connected state shows the message input and Send button', () => {
     scene(
       { update, view },
-      given({ ...idleModel, connection: ConnectionConnected() }),
+      given({
+        ...idleModel,
+        connection: ConnectionState.Connected(),
+      }),
       expect(placeholder('Type a message...')).toExist(),
       expect(role('button', { name: 'Send' })).toBeDisabled(),
       type(placeholder('Type a message...'), 'hi'),
@@ -74,7 +77,9 @@ describe('view', () => {
       { update, view },
       given({
         ...idleModel,
-        connection: ConnectionError({ error: 'Connection refused' }),
+        connection: ConnectionState.Error({
+          error: 'Connection refused',
+        }),
       }),
       expect(text('Connection Error')).toExist(),
       expect(text('Connection refused')).toExist(),
@@ -87,7 +92,7 @@ describe('view', () => {
       { update, view },
       given({
         ...idleModel,
-        connection: ConnectionConnected(),
+        connection: ConnectionState.Connected(),
         messages: [
           { text: 'Hello there', zoned: zonedAt(0), isSent: true },
           { text: 'General Kenobi', zoned: zonedAt(0), isSent: false },
@@ -146,7 +151,10 @@ describe('view', () => {
   test('a message arriving on the socket Subscription lands in the conversation', () => {
     scene(
       { update, view },
-      given({ ...idleModel, connection: ConnectionConnected() }),
+      given({
+        ...idleModel,
+        connection: ConnectionState.Connected(),
+      }),
       Subscription.emit(Message.ReceivedMessage({ text: 'hello from echo' })),
       Command.expectExact(
         TimestampReceivedMessage({ text: 'hello from echo' }),