create-foldkit-app 0.32.0 → 0.32.1

package/dist/templates/examples/ui-showcase/src/ui/view/animation.ts

@@ -3,7 +3,7 @@ import type { Html } from 'foldkit/html'
 
 import { Animation } from '@foldkit/ui'
 
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import type { UiModel } from '../model'
 
 const triggerClassName =
@@ -26,7 +26,7 @@ export const view = Submodel.defineView<UiModel, UiMessage>(
                 h.Class(triggerClassName),
                 h.OnClick(UiMessage.ToggledAnimationDemo()),
               ],
-              [model.isAnimationDemoShowing ? 'Hide Content' : 'Show Content'],
+              [model.animationDemo.isShowing ? 'Hide Content' : 'Show Content'],
             ),
           ],
         ),

package/dist/templates/examples/ui-showcase/src/ui/view/button.ts

@@ -3,7 +3,7 @@ import type { Html } from 'foldkit/html'
 
 import { Button } from '@foldkit/ui'
 
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import type { UiModel } from '../model'
 
 const buttonClassName =

package/dist/templates/examples/ui-showcase/src/ui/view/calendar.ts

@@ -1,11 +1,11 @@
-import { Match as M } from 'effect'
+import { Match } from 'effect'
 import { Submodel } from 'foldkit'
 import type { ChildAttribute, Html, HtmlBuilder } from 'foldkit/html'
 
 import { Calendar } from '@foldkit/ui'
 
 import * as Icon from '../../icon'
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import type { UiModel } from '../model'
 
 const containerClassName =
@@ -185,8 +185,8 @@ export const view = Submodel.defineView<UiModel, UiMessage>(
           view: Calendar.view,
           viewInputs: {
             maybeSelectedDate: model.maybeCalendarBasicDemoSelectedDate,
-            toView: M.type<Calendar.CalendarAttributes>().pipe(
-              M.tagsExhaustive({
+            toView: Match.type<Calendar.CalendarAttributes>().pipe(
+              Match.tagsExhaustive({
                 Days: days => daysView(days, h),
                 Months: months => monthsView(months, h),
                 Years: years => yearsView(years, h),

package/dist/templates/examples/ui-showcase/src/ui/view/checkbox.ts

@@ -3,7 +3,7 @@ import type { Html, HtmlBuilder } from 'foldkit/html'
 
 import { Checkbox } from '@foldkit/ui'
 
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import type { UiModel } from '../model'
 
 const CHECKBOX_BASIC_DEMO_ID = 'checkbox-basic-demo'

package/dist/templates/examples/ui-showcase/src/ui/view/combobox.ts

@@ -7,7 +7,7 @@ import { Combobox } from '@foldkit/ui'
 import type { AnchorConfig } from '@foldkit/ui/combobox'
 
 import * as Icon from '../../icon'
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import type { City, UiModel } from '../model'
 
 export const CityCombobox = Combobox.create<City>()

package/dist/templates/examples/ui-showcase/src/ui/view/datePicker.ts

@@ -1,4 +1,4 @@
-import { Match as M, Option } from 'effect'
+import { Match, Option } from 'effect'
 import { Submodel } from 'foldkit'
 import type { ChildAttribute, Html, HtmlBuilder } from 'foldkit/html'
 
@@ -6,7 +6,7 @@ import { Calendar, DatePicker } from '@foldkit/ui'
 import type { AnchorConfig } from '@foldkit/ui/popover'
 
 import * as Icon from '../../icon'
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import type { UiModel } from '../model'
 
 const triggerClassName =
@@ -246,8 +246,8 @@ export const view = Submodel.defineView<UiModel, UiMessage>(
             panelClassName,
             backdropClassName,
             className: wrapperClassName,
-            toCalendarView: M.type<Calendar.CalendarAttributes>().pipe(
-              M.tagsExhaustive({
+            toCalendarView: Match.type<Calendar.CalendarAttributes>().pipe(
+              Match.tagsExhaustive({
                 Days: days => daysView(days, h),
                 Months: months => monthsView(months, h),
                 Years: years => yearsView(years, h),

package/dist/templates/examples/ui-showcase/src/ui/view/dialog.ts

@@ -4,7 +4,7 @@ import type { Html, HtmlBuilder } from 'foldkit/html'
 
 import { Combobox, Dialog } from '@foldkit/ui'
 
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import type { City, UiModel } from '../model'
 import { CityCombobox, comboboxInputs } from './combobox'
 

package/dist/templates/examples/ui-showcase/src/ui/view/disclosure.ts

@@ -5,7 +5,7 @@ import type { Html, HtmlBuilder } from 'foldkit/html'
 import { Disclosure } from '@foldkit/ui'
 
 import * as Icon from '../../icon'
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import type { UiModel } from '../model'
 
 const DISCLOSURE_BASIC_DEMO_ID = 'disclosure-basic-demo'

package/dist/templates/examples/ui-showcase/src/ui/view/dragAndDrop.ts

@@ -5,7 +5,7 @@ import type { Html, HtmlBuilder } from 'foldkit/html'
 
 import { DragAndDrop } from '@foldkit/ui'
 
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import type { DemoCard, DemoColumn, UiModel } from '../model'
 
 const cardClassName =

package/dist/templates/examples/ui-showcase/src/ui/view/fieldset.ts

@@ -3,7 +3,7 @@ import type { Html, HtmlBuilder } from 'foldkit/html'
 
 import { Checkbox, Fieldset, Input, Textarea } from '@foldkit/ui'
 
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import type { UiModel } from '../model'
 
 const FIELDSET_CHECKBOX_DEMO_ID = 'fieldset-checkbox-demo'

package/dist/templates/examples/ui-showcase/src/ui/view/fileDrop.ts

@@ -1,10 +1,10 @@
-import { Array, Match as M, Number } from 'effect'
+import { Array, Match, Number } from 'effect'
 import { File, Submodel } from 'foldkit'
 import type { Html } from 'foldkit/html'
 
 import { FileDrop } from '@foldkit/ui'
 
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import type { UiModel } from '../model'
 
 const dropZoneClassName =
@@ -28,13 +28,13 @@ const BYTES_PER_KB = 1024
 const BYTES_PER_MB = BYTES_PER_KB * BYTES_PER_KB
 
 const formatFileSize = (bytes: number): string =>
-  M.value(bytes).pipe(
-    M.when(Number.isLessThan(BYTES_PER_KB), () => `${bytes} B`),
-    M.when(
+  Match.value(bytes).pipe(
+    Match.when(Number.isLessThan(BYTES_PER_KB), () => `${bytes} B`),
+    Match.when(
       Number.isLessThan(BYTES_PER_MB),
       () => `${(bytes / BYTES_PER_KB).toFixed(1)} KB`,
     ),
-    M.orElse(() => `${(bytes / BYTES_PER_MB).toFixed(1)} MB`),
+    Match.orElse(() => `${(bytes / BYTES_PER_MB).toFixed(1)} MB`),
   )
 
 const fileKey = (file: File.File): string =>

package/dist/templates/examples/ui-showcase/src/ui/view/hoverIntent.ts

@@ -3,11 +3,11 @@ import type { Html } from 'foldkit/html'
 
 import { HoverIntent } from '@foldkit/ui'
 
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import type { UiModel } from '../model'
 
 const triggerClassName =
-  'rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-900 transition hover:border-accent-500 hover:text-accent-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-600'
+  'inline-flex cursor-pointer items-center rounded-lg bg-accent-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-accent-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-600'
 
 const panelClassName =
   'absolute left-0 top-full z-10 mt-2 w-72 rounded-lg border border-gray-200 bg-white p-4 shadow-lg'
@@ -26,7 +26,7 @@ export const view = Submodel.defineView<UiModel, UiMessage>((model, h): Html =>
       h.p(
         [h.Class('mb-4 max-w-xl text-sm text-gray-600')],
         [
-          'Hover or focus the trigger, then move into the interactive panel. Press Escape to return focus to the trigger.',
+          'Hover over or focus the “More information” trigger, then move the pointer into the card. Move the pointer or focus away from both elements, or press Escape, to close it.',
         ],
       ),
       h.submodel({
@@ -42,12 +42,13 @@ export const view = Submodel.defineView<UiModel, UiMessage>((model, h): Html =>
                 h.button(
                   [
                     ...trigger,
+                    h.Type('button'),
                     h.Id(TRIGGER_ID),
                     h.AriaControls(PANEL_ID),
                     h.AriaExpanded(isVisible),
                     h.Class(triggerClassName),
                   ],
-                  ['Preview account'],
+                  ['More information'],
                 ),
                 ...(isVisible
                   ? [
@@ -55,24 +56,12 @@ export const view = Submodel.defineView<UiModel, UiMessage>((model, h): Html =>
                         [...panel, h.Id(PANEL_ID), h.Class(panelClassName)],
                         [
                           h.h3(
-                            [
-                              h.Id('hover-intent-showcase-details'),
-                              h.Class('font-semibold text-gray-900'),
-                            ],
-                            ['Account summary'],
+                            [h.Class('text-sm font-medium text-gray-900')],
+                            ['Details'],
                           ),
                           h.p(
-                            [h.Class('mt-2 text-sm text-gray-600')],
-                            ['Review your profile and recent activity.'],
-                          ),
-                          h.a(
-                            [
-                              h.Href('#hover-intent-showcase-details'),
-                              h.Class(
-                                'mt-3 inline-block text-sm font-medium text-accent-700 underline underline-offset-4',
-                              ),
-                            ],
-                            ['View account details'],
+                            [h.Class('mt-1 text-sm leading-5 text-gray-600')],
+                            ['A short description can provide useful context.'],
                           ),
                         ],
                       ),

package/dist/templates/examples/ui-showcase/src/ui/view/input.ts

@@ -3,7 +3,7 @@ import type { Html } from 'foldkit/html'
 
 import { Input } from '@foldkit/ui'
 
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import type { UiModel } from '../model'
 
 const inputClassName =

package/dist/templates/examples/ui-showcase/src/ui/view/listbox.ts

@@ -5,7 +5,7 @@ import { type Html, type HtmlBuilder, childAttributes } from 'foldkit/html'
 import { Listbox } from '@foldkit/ui'
 
 import * as Icon from '../../icon'
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import type { ListboxItem, UiModel } from '../model'
 
 const LISTBOX_ITEMS: ReadonlyArray<ListboxItem> = [

package/dist/templates/examples/ui-showcase/src/ui/view/menu.ts

@@ -1,11 +1,11 @@
-import { Match as M } from 'effect'
+import { Match } from 'effect'
 import { Submodel } from 'foldkit'
 import { type Html, type HtmlBuilder, childAttributes } from 'foldkit/html'
 
 import { Menu } from '@foldkit/ui'
 
 import * as Icon from '../../icon'
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import type { UiModel } from '../model'
 
 const triggerClassName =
@@ -42,33 +42,33 @@ const MENU_ITEMS: ReadonlyArray<MenuItem> = [
 ]
 
 const menuItemIcon = (item: MenuItem): Html =>
-  M.value(item).pipe(
-    M.when('Edit', () => Icon.pencil(ICON_SIZE)),
-    M.when('Duplicate', () => Icon.documentDuplicate(ICON_SIZE)),
-    M.when('Archive', () => Icon.archiveBox(ICON_SIZE)),
-    M.when('Move', () => Icon.arrowRight(ICON_SIZE)),
-    M.when('Delete', () => Icon.trash(ICON_SIZE)),
-    M.exhaustive,
+  Match.value(item).pipe(
+    Match.when('Edit', () => Icon.pencil(ICON_SIZE)),
+    Match.when('Duplicate', () => Icon.documentDuplicate(ICON_SIZE)),
+    Match.when('Archive', () => Icon.archiveBox(ICON_SIZE)),
+    Match.when('Move', () => Icon.arrowRight(ICON_SIZE)),
+    Match.when('Delete', () => Icon.trash(ICON_SIZE)),
+    Match.exhaustive,
   )
 
 const isItemDisabled = (item: MenuItem): boolean => item === 'Archive'
 
 const itemGroupKey = (item: MenuItem): string =>
-  M.value(item).pipe(
-    M.when('Delete', () => 'Danger'),
-    M.orElse(() => 'Actions'),
+  Match.value(item).pipe(
+    Match.when('Delete', () => 'Danger'),
+    Match.orElse(() => 'Actions'),
   )
 
 const groupToHeading = (
   groupKey: string,
   h: HtmlBuilder<UiMessage>,
 ): Menu.GroupHeading | undefined => {
-  return M.value(groupKey).pipe(
-    M.when('Danger', () => ({
+  return Match.value(groupKey).pipe(
+    Match.when('Danger', () => ({
       content: h.span([], ['Danger Zone']),
       className: headingClassName,
     })),
-    M.orElse(() => undefined),
+    Match.orElse(() => undefined),
   )
 }
 

package/dist/templates/examples/ui-showcase/src/ui/view/popover.ts

@@ -3,7 +3,7 @@ import type { Html, HtmlBuilder } from 'foldkit/html'
 
 import { Popover } from '@foldkit/ui'
 
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import type { UiModel } from '../model'
 
 const triggerClassName =

package/dist/templates/examples/ui-showcase/src/ui/view/radioGroup.ts

@@ -3,7 +3,7 @@ import type { Html, HtmlBuilder } from 'foldkit/html'
 
 import { RadioGroup } from '@foldkit/ui'
 
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import { type Plan, type UiModel } from '../model'
 
 export const PlanRadioGroup = RadioGroup.create<Plan>()

package/dist/templates/examples/ui-showcase/src/ui/view/select.ts

@@ -4,7 +4,7 @@ import type { Html } from 'foldkit/html'
 import { Select } from '@foldkit/ui'
 
 import * as Icon from '../../icon'
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import type { UiModel } from '../model'
 
 const selectClassName =

package/dist/templates/examples/ui-showcase/src/ui/view/slider.ts

@@ -3,7 +3,7 @@ import type { Html } from 'foldkit/html'
 
 import { Slider } from '@foldkit/ui'
 
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import type { UiModel } from '../model'
 
 const rowClassName = 'flex flex-col gap-2 w-full max-w-sm'

package/dist/templates/examples/ui-showcase/src/ui/view/switch.ts

@@ -4,7 +4,7 @@ import type { Html, HtmlBuilder } from 'foldkit/html'
 
 import { Switch } from '@foldkit/ui'
 
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import type { UiModel } from '../model'
 
 const SWITCH_DEMO_ID = 'switch-demo'

package/dist/templates/examples/ui-showcase/src/ui/view/tabs.ts

@@ -1,10 +1,10 @@
-import { Array, Match as M } from 'effect'
+import { Array, Match } from 'effect'
 import { Submodel } from 'foldkit'
 import type { Html, HtmlBuilder } from 'foldkit/html'
 
 import { Tabs } from '@foldkit/ui'
 
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import { type DemoTab, type UiModel } from '../model'
 
 const demoTabs: ReadonlyArray<DemoTab> = ['Foldkit', 'React', 'Elm']
@@ -87,11 +87,11 @@ const elmPanel = (h: HtmlBuilder<UiMessage>): Html => {
 }
 
 const panelFor = (tab: DemoTab, h: HtmlBuilder<UiMessage>): Html =>
-  M.value(tab).pipe(
-    M.when('Foldkit', () => foldkitPanel(h)),
-    M.when('React', () => reactPanel(h)),
-    M.when('Elm', () => elmPanel(h)),
-    M.exhaustive,
+  Match.value(tab).pipe(
+    Match.when('Foldkit', () => foldkitPanel(h)),
+    Match.when('React', () => reactPanel(h)),
+    Match.when('Elm', () => elmPanel(h)),
+    Match.exhaustive,
   )
 
 export const view = Submodel.defineView<UiModel, UiMessage>(

package/dist/templates/examples/ui-showcase/src/ui/view/textarea.ts

@@ -3,7 +3,7 @@ import type { Html } from 'foldkit/html'
 
 import { Textarea } from '@foldkit/ui'
 
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import type { UiModel } from '../model'
 
 const textareaClassName =

package/dist/templates/examples/ui-showcase/src/ui/view/toast.ts

@@ -1,26 +1,26 @@
-import { Match as M, Option } from 'effect'
+import { Match, Option } from 'effect'
 import { Submodel } from 'foldkit'
 import type { Html, HtmlBuilder } from 'foldkit/html'
 
 import type { EntryHandlers, Variant } from '@foldkit/ui/toast'
 
 import * as Icon from '../../icon'
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import type { UiModel } from '../model'
 import { Toast } from '../toast'
 
 type Entry = typeof Toast.Entry.Type
 
 const variantClassName = (variant: Variant): string =>
-  M.value(variant).pipe(
-    M.when('Info', () => 'border-gray-300 bg-white text-gray-900'),
-    M.when(
+  Match.value(variant).pipe(
+    Match.when('Info', () => 'border-gray-300 bg-white text-gray-900'),
+    Match.when(
       'Success',
       () => 'border-emerald-300 bg-emerald-50 text-emerald-900',
     ),
-    M.when('Warning', () => 'border-amber-300 bg-amber-50 text-amber-900'),
-    M.when('Error', () => 'border-red-300 bg-red-50 text-red-900'),
-    M.exhaustive,
+    Match.when('Warning', () => 'border-amber-300 bg-amber-50 text-amber-900'),
+    Match.when('Error', () => 'border-red-300 bg-red-50 text-red-900'),
+    Match.exhaustive,
   )
 
 const entryClassName = 'w-80'

package/dist/templates/examples/ui-showcase/src/ui/view/tooltip.ts

@@ -4,7 +4,7 @@ import type { Html } from 'foldkit/html'
 import { Tooltip } from '@foldkit/ui'
 import type { AnchorConfig } from '@foldkit/ui/tooltip'
 
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import type { UiModel } from '../model'
 
 const triggerClassName =

package/dist/templates/examples/ui-showcase/src/ui/view/virtualList.ts

@@ -1,10 +1,10 @@
-import { Array, Match as M, Option, pipe } from 'effect'
+import { Array, Match, Option, pipe } from 'effect'
 import { Submodel } from 'foldkit'
 import type { Html, HtmlBuilder } from 'foldkit/html'
 
 import { VirtualList } from '@foldkit/ui'
 
-import { UiMessage } from '../message'
+import { Message as UiMessage } from '../message'
 import type { UiModel } from '../model'
 
 type Activity = Readonly<{
@@ -88,11 +88,11 @@ const formatTimeAgo = (hours: number): string => {
 
 const targetForVerb = (verb: string, index: number): string => {
   const number = ((index * 13) % 9999) + 1
-  return M.value(verb).pipe(
-    M.withReturnType<string>(),
-    M.when('pushed to', () => cycle(branchNames, index)),
-    M.whenOr('opened', 'closed', 'reopened', () => `issue #${number}`),
-    M.orElse(() => `PR #${number}`),
+  return Match.value(verb).pipe(
+    Match.withReturnType<string>(),
+    Match.when('pushed to', () => cycle(branchNames, index)),
+    Match.whenOr('opened', 'closed', 'reopened', () => `issue #${number}`),
+    Match.orElse(() => `PR #${number}`),
   )
 }
 

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

@@ -1,11 +1,11 @@
-import { Array, Option, Schema as S } from 'effect'
+import { Array, Option, Schema } from 'effect'
 
-export const Artwork = S.Struct({
-  id: S.Number,
-  title: S.String,
-  medium: S.String,
-  description: S.String,
-  gradientClassName: S.String,
+export const Artwork = Schema.Struct({
+  id: Schema.Number,
+  title: Schema.String,
+  medium: Schema.String,
+  description: Schema.String,
+  gradientClassName: Schema.String,
 })
 export type Artwork = typeof Artwork.Type
 

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

@@ -1,4 +1,4 @@
-import { Array, Effect, Option, Schema as S, String } from 'effect'
+import { Array, Effect, Option, Schema, String } from 'effect'
 import { Command, Runtime, type Update } from 'foldkit'
 import { Document, Html, HtmlBuilder } from 'foldkit/html'
 import { defineMessageUnion } from 'foldkit/message'
@@ -14,9 +14,9 @@ export { AppRoute } from './route'
 
 // MODEL
 
-export const Model = S.Struct({
+export const Model = Schema.Struct({
   route: AppRoute,
-  filterText: S.String,
+  filterText: Schema.String,
 })
 export type Model = typeof Model.Type
 
@@ -27,7 +27,7 @@ export const Message = defineMessageUnion({
   CompletedLoadExternal: {},
   ClickedLink: { request: UrlRequest },
   ChangedUrl: { url: Url },
-  UpdatedFilterText: { filterText: S.String },
+  UpdatedFilterText: { filterText: Schema.String },
 })
 
 export type Message = typeof Message.Type
@@ -41,14 +41,14 @@ export const init: Runtime.RoutingApplicationInit<Model, Message> = (
 // COMMAND
 
 const NavigateInternal = Command.define('NavigateInternal', {
-  args: { url: S.String },
+  args: { url: Schema.String },
   messages: [Message.CompletedNavigateInternal],
   execute: ({ url }) =>
     pushUrl(url).pipe(Effect.as(Message.CompletedNavigateInternal())),
 })
 
 const LoadExternal = Command.define('LoadExternal', {
-  args: { href: S.String },
+  args: { href: Schema.String },
   messages: [Message.CompletedLoadExternal],
   execute: ({ href }) =>
     load(href).pipe(Effect.as(Message.CompletedLoadExternal())),

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

@@ -1,11 +1,11 @@
-import { Schema as S, pipe } from 'effect'
+import { Schema, pipe } from 'effect'
 import { Route } from 'foldkit'
 import { defineRouteUnion, int, literal, slash } from 'foldkit/route'
 
 export const AppRoute = defineRouteUnion({
   Gallery: {},
-  Artwork: { artworkId: S.Number },
-  NotFound: { path: S.String },
+  Artwork: { artworkId: Schema.Number },
+  NotFound: { path: Schema.String },
 })
 
 export type AppRoute = typeof AppRoute.Type