create-foldkit-app 0.32.0 → 0.32.1

package/dist/templates/examples/job-application/src/view/index.ts

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { Array, Equal, HashSet, Match as M, Option, pipe } from 'effect'
+import { Array, Equal, HashSet, Match, Option, pipe } from 'effect'
 import type { ChildAttribute, Document, Html, HtmlBuilder } from 'foldkit/html'
 
 import { Button, Tabs } from '@foldkit/ui'
@@ -23,23 +23,29 @@ const StepTabs = Tabs.create<Step.Step>()
 const stepHasErrors =
   (model: Model) =>
   (step: Step.Step): boolean =>
-    M.value(step).pipe(
-      M.when('PersonalInfo', () => PersonalInfo.hasErrors(model.personalInfo)),
-      M.when('WorkHistory', () => WorkHistory.hasErrors(model.workHistory)),
-      M.when('Education', () => Education.hasErrors(model.education)),
-      M.when('Skills', () => Skills.hasErrors(model.skills)),
-      M.orElse(() => false),
+    Match.value(step).pipe(
+      Match.when('PersonalInfo', () =>
+        PersonalInfo.hasErrors(model.personalInfo),
+      ),
+      Match.when('WorkHistory', () => WorkHistory.hasErrors(model.workHistory)),
+      Match.when('Education', () => Education.hasErrors(model.education)),
+      Match.when('Skills', () => Skills.hasErrors(model.skills)),
+      Match.orElse(() => false),
     )
 
 const stepIsComplete =
   (model: Model) =>
   (step: Step.Step): boolean =>
-    M.value(step).pipe(
-      M.when('PersonalInfo', () => PersonalInfo.isComplete(model.personalInfo)),
-      M.when('WorkHistory', () => WorkHistory.isComplete(model.workHistory)),
-      M.when('Education', () => Education.isComplete(model.education)),
-      M.when('Skills', () => Skills.isComplete(model.skills)),
-      M.orElse(() => true),
+    Match.value(step).pipe(
+      Match.when('PersonalInfo', () =>
+        PersonalInfo.isComplete(model.personalInfo),
+      ),
+      Match.when('WorkHistory', () =>
+        WorkHistory.isComplete(model.workHistory),
+      ),
+      Match.when('Education', () => Education.isComplete(model.education)),
+      Match.when('Skills', () => Skills.isComplete(model.skills)),
+      Match.orElse(() => true),
     )
 
 const stepNeedsAttention =
@@ -56,8 +62,8 @@ const stepContent = (
   attentionSteps: ReadonlyArray<Step.Step>,
   h: HtmlBuilder<Message>,
 ): Html =>
-  M.value(model.currentStep).pipe(
-    M.when('PersonalInfo', () =>
+  Match.value(model.currentStep).pipe(
+    Match.when('PersonalInfo', () =>
       h.submodel({
         slotId: 'personal-info',
         model: model.personalInfo,
@@ -65,7 +71,7 @@ const stepContent = (
         toParentMessage: message => Message.GotPersonalInfoMessage({ message }),
       }),
     ),
-    M.when('WorkHistory', () =>
+    Match.when('WorkHistory', () =>
       h.submodel({
         slotId: 'work-history',
         model: model.workHistory,
@@ -73,7 +79,7 @@ const stepContent = (
         toParentMessage: message => Message.GotWorkHistoryMessage({ message }),
       }),
     ),
-    M.when('Education', () =>
+    Match.when('Education', () =>
       h.submodel({
         slotId: 'education',
         model: model.education,
@@ -81,7 +87,7 @@ const stepContent = (
         toParentMessage: message => Message.GotEducationMessage({ message }),
       }),
     ),
-    M.when('Skills', () =>
+    Match.when('Skills', () =>
       h.submodel({
         slotId: 'skills',
         model: model.skills,
@@ -89,7 +95,7 @@ const stepContent = (
         toParentMessage: message => Message.GotSkillsMessage({ message }),
       }),
     ),
-    M.when('CoverLetter', () =>
+    Match.when('CoverLetter', () =>
       h.submodel({
         slotId: 'cover-letter',
         model: model.coverLetter,
@@ -97,7 +103,7 @@ const stepContent = (
         toParentMessage: message => Message.GotCoverLetterMessage({ message }),
       }),
     ),
-    M.when('Attachments', () =>
+    Match.when('Attachments', () =>
       h.submodel({
         slotId: 'attachments',
         model: model.attachments,
@@ -105,8 +111,8 @@ const stepContent = (
         toParentMessage: message => Message.GotAttachmentsMessage({ message }),
       }),
     ),
-    M.when('Review', () => review(model, attentionSteps, h)),
-    M.exhaustive,
+    Match.when('Review', () => review(model, attentionSteps, h)),
+    Match.exhaustive,
   )
 
 const isFirstStep = (model: Model): boolean =>

package/dist/templates/examples/kanban/src/command.ts

@@ -1,4 +1,4 @@
-import { Crypto, Effect, Schema as S } from 'effect'
+import { Crypto, Effect, Schema } from 'effect'
 import { KeyValueStore } from 'effect/unstable/persistence'
 import { Command, Dom } from 'foldkit'
 
@@ -10,7 +10,7 @@ import { Message } from './message'
 import { SavedBoardJsonString } from './model'
 
 export const GenerateCardId = Command.define('GenerateCardId', {
-  args: { columnId: S.String, title: S.String },
+  args: { columnId: Schema.String, title: Schema.String },
   messages: [Message.CompletedGenerateCardId],
   execute: ({ columnId, title }) =>
     Effect.gen(function* () {
@@ -21,14 +21,14 @@ export const GenerateCardId = Command.define('GenerateCardId', {
 })
 
 export const SaveBoard = Command.define('SaveBoard', {
-  args: { columns: S.Array(Column.Column) },
+  args: { columns: Schema.Array(Column.Column) },
   messages: [Message.CompletedSaveBoard],
   execute: ({ columns }) =>
     Effect.gen(function* () {
       const store = yield* KeyValueStore.KeyValueStore
       yield* store.set(
         STORAGE_KEY,
-        S.encodeSync(SavedBoardJsonString)({ columns }),
+        Schema.encodeSync(SavedBoardJsonString)({ columns }),
       )
       return Message.CompletedSaveBoard()
     }).pipe(

package/dist/templates/examples/kanban/src/domain/card.ts

@@ -1,10 +1,10 @@
-import { Schema as S } from 'effect'
+import { Schema } from 'effect'
 
-export const Card = S.Struct({
-  id: S.String,
-  title: S.String,
-  description: S.String,
-  sortKey: S.String,
+export const Card = Schema.Struct({
+  id: Schema.String,
+  title: Schema.String,
+  description: Schema.String,
+  sortKey: Schema.String,
 })
 
 export type Card = typeof Card.Type

package/dist/templates/examples/kanban/src/domain/column.ts

@@ -1,14 +1,14 @@
-import { Array, Match as M, Option, Schema as S, pipe } from 'effect'
+import { Array, Match, Option, Schema, pipe } from 'effect'
 import { evo } from 'foldkit/struct'
 import { generateKeyBetween } from 'fractional-indexing'
 
 import type { Card } from './card'
 import { Card as CardSchema } from './card'
 
-export const Column = S.Struct({
-  id: S.String,
-  name: S.String,
-  cards: S.Array(CardSchema),
+export const Column = Schema.Struct({
+  id: Schema.String,
+  name: Schema.String,
+  cards: Schema.Array(CardSchema),
 })
 
 export type Column = typeof Column.Type
@@ -105,10 +105,10 @@ export const reorder = (
     onNone: () => columns,
     onSome: card =>
       Array.map(columns, column =>
-        M.value(column.id).pipe(
-          M.when(fromContainerId, () => removeCard(column, itemId).column),
-          M.when(toContainerId, () => insertCard(column, card, toIndex)),
-          M.orElse(() => column),
+        Match.value(column.id).pipe(
+          Match.when(fromContainerId, () => removeCard(column, itemId).column),
+          Match.when(toContainerId, () => insertCard(column, card, toIndex)),
+          Match.orElse(() => column),
         ),
       ),
   })

package/dist/templates/examples/kanban/src/main.ts

@@ -1,4 +1,4 @@
-import { Effect, Option, Schema as S } from 'effect'
+import { Effect, Option, Schema } from 'effect'
 import { KeyValueStore } from 'effect/unstable/persistence'
 import { Runtime } from 'foldkit'
 
@@ -14,8 +14,8 @@ import { view } from './view'
 
 // FLAGS
 
-export const Flags = S.Struct({
-  maybeSavedBoard: S.Option(SavedBoard),
+export const Flags = Schema.Struct({
+  maybeSavedBoard: Schema.Option(SavedBoard),
 })
 export type Flags = typeof Flags.Type
 
@@ -24,7 +24,7 @@ export const flags: Effect.Effect<Flags> = Effect.gen(function* () {
   const json = yield* Effect.fromOption(
     Option.fromNullishOr(yield* store.get(STORAGE_KEY)),
   )
-  const decoded = yield* S.decodeEffect(SavedBoardJsonString)(json)
+  const decoded = yield* Schema.decodeEffect(SavedBoardJsonString)(json)
   return Flags.make({ maybeSavedBoard: Option.some(decoded) })
 }).pipe(
   Effect.catch(() =>

package/dist/templates/examples/kanban/src/message.ts

@@ -1,18 +1,18 @@
-import { Schema as S } from 'effect'
+import { Schema } from 'effect'
 import { defineMessageUnion } from 'foldkit/message'
 
 import { DragAndDrop } from '@foldkit/ui'
 
 export const Message = defineMessageUnion({
   GotDragAndDropMessage: { message: DragAndDrop.Message },
-  ClickedAddCard: { columnId: S.String },
-  ChangedNewCardTitle: { value: S.String },
+  ClickedAddCard: { columnId: Schema.String },
+  ChangedNewCardTitle: { value: Schema.String },
   SubmittedNewCard: {},
   CancelledNewCard: {},
   CompletedGenerateCardId: {
-    cardId: S.String,
-    columnId: S.String,
-    title: S.String,
+    cardId: Schema.String,
+    columnId: Schema.String,
+    title: Schema.String,
   },
   CompletedSaveBoard: {},
   CompletedFocusAddCardInput: {},

package/dist/templates/examples/kanban/src/model.ts

@@ -1,23 +1,25 @@
-import { Schema as S } from 'effect'
+import { Schema } from 'effect'
 
 import { DragAndDrop } from '@foldkit/ui'
 
 import { Column } from './domain'
 
-export const SavedBoard = S.Struct({
-  columns: S.Array(Column.Column),
+export const SavedBoard = Schema.Struct({
+  columns: Schema.Array(Column.Column),
 })
 
 export type SavedBoard = typeof SavedBoard.Type
 
-export const SavedBoardJsonString = S.fromJsonString(S.toCodecJson(SavedBoard))
+export const SavedBoardJsonString = Schema.fromJsonString(
+  Schema.toCodecJson(SavedBoard),
+)
 
-export const Model = S.Struct({
-  columns: S.Array(Column.Column),
+export const Model = Schema.Struct({
+  columns: Schema.Array(Column.Column),
   dragAndDrop: DragAndDrop.Model,
-  maybeNewCardColumnId: S.Option(S.String),
-  newCardTitle: S.String,
-  announcement: S.String,
+  maybeNewCardColumnId: Schema.Option(Schema.String),
+  newCardTitle: Schema.String,
+  announcement: Schema.String,
 })
 
 export type Model = typeof Model.Type

package/dist/templates/examples/kanban/src/update.ts

@@ -1,4 +1,4 @@
-import { Array, Match as M, Option, String, pipe } from 'effect'
+import { Array, Match, Option, String, pipe } from 'effect'
 import { Update } from 'foldkit'
 import { evo } from 'foldkit/struct'
 
@@ -42,9 +42,9 @@ const announceKeyboardDrag = (
   model: Model,
   nextDragAndDrop: DragAndDrop.Model,
 ): string =>
-  M.value(nextDragAndDrop.dragState).pipe(
-    M.withReturnType<string>(),
-    M.tag('KeyboardDragging', nextState => {
+  Match.value(nextDragAndDrop.dragState).pipe(
+    Match.withReturnType<string>(),
+    Match.tag('KeyboardDragging', nextState => {
       const wasIdle = model.dragAndDrop.dragState._tag === 'Idle'
       if (wasIdle) {
         const title = findCardTitle(model.columns, nextState.itemId)
@@ -70,7 +70,7 @@ const announceKeyboardDrag = (
 
       return model.announcement
     }),
-    M.orElse(() => model.announcement),
+    Match.orElse(() => model.announcement),
   )
 
 const screenReaderTextForDrop = (

package/dist/templates/examples/managed-resource-layer/src/main.ts

@@ -3,10 +3,10 @@ import {
   Crypto,
   Effect,
   Layer,
-  Match as M,
+  Match,
   Number,
   Option,
-  Schema as S,
+  Schema,
 } from 'effect'
 import { Command, ManagedResource, Runtime, type Update } from 'foldkit'
 import { Document, Html, HtmlBuilder } from 'foldkit/html'
@@ -50,15 +50,15 @@ type EngineService = ManagedResource.ServiceOf<typeof Engine>
 export const EngineState = defineTaggedUnion({
   Off: {},
   Booting: {},
-  Ready: { engineId: S.String },
-  Failed: { reason: S.String },
+  Ready: { engineId: Schema.String },
+  Failed: { reason: Schema.String },
 })
 type EngineState = typeof EngineState.Type
 
-export const Model = S.Struct({
+export const Model = Schema.Struct({
   engine: EngineState,
-  computeCount: S.Number,
-  maybeSquareResult: S.Option(S.Number),
+  computeCount: Schema.Number,
+  maybeSquareResult: Schema.Option(Schema.Number),
 })
 export type Model = typeof Model.Type
 
@@ -67,11 +67,11 @@ export type Model = typeof Model.Type
 export const Message = defineMessageUnion({
   ClickedStartEngine: {},
   ClickedStopEngine: {},
-  StartedEngine: { engineId: S.String },
+  StartedEngine: { engineId: Schema.String },
   StoppedEngine: {},
-  FailedStartEngine: { reason: S.String },
+  FailedStartEngine: { reason: Schema.String },
   ClickedCompute: {},
-  CompletedCompute: { result: S.Number },
+  CompletedCompute: { result: Schema.Number },
   SkippedCompute: {},
 })
 
@@ -80,7 +80,7 @@ export type Message = typeof Message.Type
 // COMMAND
 
 export const Compute = Command.define('Compute', {
-  args: { value: S.Number },
+  args: { value: Schema.Number },
   messages: [Message.CompletedCompute, Message.SkippedCompute],
   execute: ({ value }) =>
     Effect.gen(function* () {
@@ -146,13 +146,13 @@ export const init: Runtime.ApplicationInit<Model, Message> = () => ({
 
 export const managedResources = ManagedResource.make<Model, Message>()(
   entry => ({
-    engine: entry(S.Option(S.Null), {
+    engine: entry(Schema.Option(Schema.Null), {
       resource: Engine,
       modelToMaybeRequirements: model =>
-        M.value(model.engine).pipe(
-          M.tag('Booting', 'Ready', () => Option.some(null)),
-          M.tag('Off', 'Failed', () => Option.none()),
-          M.exhaustive,
+        Match.value(model.engine).pipe(
+          Match.tag('Booting', 'Ready', () => Option.some(null)),
+          Match.tag('Off', 'Failed', () => Option.none()),
+          Match.exhaustive,
         ),
       acquire: () =>
         Layer.build(engineLayer).pipe(
@@ -225,18 +225,18 @@ const engineControlsView = (
   engine: EngineState,
   h: HtmlBuilder<Message>,
 ): Html => {
-  const controls = M.value(engine).pipe(
-    M.tag('Booting', 'Ready', () => ({
+  const controls = Match.value(engine).pipe(
+    Match.tag('Booting', 'Ready', () => ({
       label: 'Stop engine',
       message: Message.ClickedStopEngine(),
       colorClassName: 'bg-red-500 hover:bg-red-600',
     })),
-    M.tag('Off', 'Failed', () => ({
+    Match.tag('Off', 'Failed', () => ({
       label: 'Start engine',
       message: Message.ClickedStartEngine(),
       colorClassName: 'bg-green-500 hover:bg-green-600',
     })),
-    M.exhaustive,
+    Match.exhaustive,
   )
 
   return h.div(

package/dist/templates/examples/map/src/locations.ts

@@ -1,11 +1,11 @@
-import { Schema as S } from 'effect'
+import { Schema } from 'effect'
 
-export const Location = S.Struct({
-  id: S.String,
-  name: S.String,
-  region: S.String,
-  lng: S.Number,
-  lat: S.Number,
+export const Location = Schema.Struct({
+  id: Schema.String,
+  name: Schema.String,
+  region: Schema.String,
+  lng: Schema.Number,
+  lat: Schema.Number,
 })
 export type Location = typeof Location.Type
 

package/dist/templates/examples/map/src/main.ts

@@ -6,7 +6,7 @@ import {
   Function,
   Option,
   Queue,
-  Schema as S,
+  Schema,
   Stream,
   String,
 } from 'effect'
@@ -34,32 +34,32 @@ const GEOLOCATION_TIMEOUT_MS = 10_000
 
 // MODEL
 
-const Bounds = S.Struct({
-  west: S.Number,
-  south: S.Number,
-  east: S.Number,
-  north: S.Number,
+const Bounds = Schema.Struct({
+  west: Schema.Number,
+  south: Schema.Number,
+  east: Schema.Number,
+  north: Schema.Number,
 })
 type Bounds = typeof Bounds.Type
 
-const LngLat = S.Struct({ lng: S.Number, lat: S.Number })
+const LngLat = Schema.Struct({ lng: Schema.Number, lat: Schema.Number })
 type LngLat = typeof LngLat.Type
 
 export const GeolocateState = defineTaggedUnion({
   Idle: {},
   Locating: {},
-  Failed: { reason: S.String },
+  Failed: { reason: Schema.String },
 })
 export type GeolocateState = typeof GeolocateState.Type
 
-export const Model = S.Struct({
-  locations: S.Array(Location),
-  searchQuery: S.String,
-  maybeMapHostId: S.Option(S.String),
-  maybeMapError: S.Option(S.String),
-  maybeBounds: S.Option(Bounds),
-  maybeSelectedLocationId: S.Option(S.String),
-  maybeUserLocation: S.Option(LngLat),
+export const Model = Schema.Struct({
+  locations: Schema.Array(Location),
+  searchQuery: Schema.String,
+  maybeMapHostId: Schema.Option(Schema.String),
+  maybeMapError: Schema.Option(Schema.String),
+  maybeBounds: Schema.Option(Bounds),
+  maybeSelectedLocationId: Schema.Option(Schema.String),
+  maybeUserLocation: Schema.Option(LngLat),
   geolocateState: GeolocateState,
 })
 export type Model = typeof Model.Type
@@ -67,21 +67,21 @@ export type Model = typeof Model.Type
 // MESSAGE
 
 export const Message = defineMessageUnion({
-  SucceededMountMap: { hostId: S.String },
-  FailedMountMap: { reason: S.String },
+  SucceededMountMap: { hostId: Schema.String },
+  FailedMountMap: { reason: Schema.String },
   MovedMap: { bounds: Bounds },
-  ClickedMarker: { locationId: S.String },
-  ClickedLocation: { locationId: S.String },
-  UpdatedSearchQuery: { value: S.String },
+  ClickedMarker: { locationId: Schema.String },
+  ClickedLocation: { locationId: Schema.String },
+  UpdatedSearchQuery: { value: Schema.String },
   ClickedFindMe: {},
   DismissedGeolocate: {},
   SucceededGeolocate: {
-    lng: S.Number,
-    lat: S.Number,
+    lng: Schema.Number,
+    lat: Schema.Number,
   },
-  FailedGeolocate: { reason: S.String },
+  FailedGeolocate: { reason: Schema.String },
   SucceededFlyTo: {},
-  FailedFlyTo: { reason: S.String },
+  FailedFlyTo: { reason: Schema.String },
   CompletedFocusSearchInput: {},
   CompletedLockBodyScroll: {},
   CompletedUnlockBodyScroll: {},
@@ -115,10 +115,10 @@ const flyToMap = (
 
 export const FlyTo = Command.define('FlyTo', {
   args: {
-    maybeHostId: S.Option(S.String),
-    lng: S.Number,
-    lat: S.Number,
-    zoom: S.Number,
+    maybeHostId: Schema.Option(Schema.String),
+    lng: Schema.Number,
+    lat: Schema.Number,
+    zoom: Schema.Number,
   },
   messages: [Message.SucceededFlyTo, Message.FailedFlyTo],
   execute: ({ maybeHostId, lng, lat, zoom }) =>
@@ -310,7 +310,34 @@ export const init: Runtime.ApplicationInit<Model, Message> = () => ({
 
 // MAP MOUNT
 
-const mountMap = (element: Element, hostId: string) =>
+type MountedMap = Readonly<{
+  map: MapInstance
+  markerElements: ReadonlyArray<HTMLButtonElement>
+}>
+
+const applyMapViewState = (
+  { map, markerElements }: MountedMap,
+  viewState: Mount.ViewState,
+): Effect.Effect<void> =>
+  Effect.sync(() => {
+    const isLive = viewState === 'Live'
+
+    if (isLive) {
+      map.keyboard.enable()
+    } else {
+      map.keyboard.disable()
+    }
+
+    Array.forEach(markerElements, markerElement => {
+      markerElement.disabled = !isLive
+    })
+  })
+
+const mountMap = (
+  element: Element,
+  hostId: string,
+  viewStateChanges: Stream.Stream<Mount.ViewState>,
+) =>
   Effect.gen(function* () {
     if (!(element instanceof HTMLElement)) {
       return Message.FailedMountMap({
@@ -319,7 +346,7 @@ const mountMap = (element: Element, hostId: string) =>
     }
 
     return yield* Effect.gen(function* () {
-      yield* Effect.acquireRelease(
+      const mountedMap = yield* Effect.acquireRelease(
         Effect.gen(function* () {
           const maplibre = yield* Effect.tryPromise(() => import('maplibre-gl'))
           maplibre.setWorkerUrl(maplibreWorkerUrl)
@@ -330,22 +357,33 @@ const mountMap = (element: Element, hostId: string) =>
             zoom: INITIAL_MAP_ZOOM,
           })
 
-          Array.forEach(featuredLocations, ({ id, lng, lat }) => {
-            const markerElement = document.createElement('button')
-            markerElement.setAttribute('data-location-id', id)
-            markerElement.setAttribute('aria-label', `Marker: ${id}`)
-            markerElement.className = markerStyle
-            new maplibre.Marker({ element: markerElement })
-              .setLngLat([lng, lat])
-              .addTo(map)
-          })
+          const markerElements = Array.map(
+            featuredLocations,
+            ({ id, lng, lat }) => {
+              const markerElement = document.createElement('button')
+              markerElement.setAttribute('data-location-id', id)
+              markerElement.setAttribute('aria-label', `Marker: ${id}`)
+              markerElement.className = markerStyle
+              new maplibre.Marker({ element: markerElement })
+                .setLngLat([lng, lat])
+                .addTo(map)
+              return markerElement
+            },
+          )
 
           setMap(hostId, map)
-          return map
+          return { map, markerElements }
         }),
         () => Effect.sync(() => removeMap(hostId)),
       )
 
+      yield* viewStateChanges.pipe(
+        Stream.runForEach(viewState =>
+          applyMapViewState(mountedMap, viewState),
+        ),
+        Effect.forkScoped,
+      )
+
       return Message.SucceededMountMap({ hostId })
     }).pipe(
       Effect.catch(error =>
@@ -359,9 +397,10 @@ const mountMap = (element: Element, hostId: string) =>
   })
 
 export const MountMap = Mount.define('MountMap', {
-  args: { hostId: S.String },
+  args: { hostId: Schema.String },
   messages: [Message.SucceededMountMap, Message.FailedMountMap],
-  execute: ({ element, hostId }) => mountMap(element, hostId),
+  execute: ({ element, hostId, viewStateChanges }) =>
+    mountMap(element, hostId, viewStateChanges),
 })
 
 // SUBSCRIPTIONS
@@ -428,7 +467,7 @@ const streamMapEvents = (hostId: string) =>
 
 export const subscriptions = Subscription.make<Model, Message>()(entry => ({
   mapEvents: entry(
-    { maybeMapHostId: S.Option(S.String) },
+    { maybeMapHostId: Schema.Option(Schema.String) },
     {
       modelToDependencies: model => ({
         maybeMapHostId: model.maybeMapHostId,