create-foldkit-app 0.35.0 → 0.35.1

package/dist/templates/base/FOLDKIT.md

@@ -76,7 +76,7 @@ Pass optional Commands directly to APIs that accept them: `Command.mapMessages(h
 
 Use `Update.Return<Model, Message>` when an update cannot emit an OutMessage. It prevents a result containing an OutMessage from entering code that would keep only its Model and Commands. A result with no `outMessage` can still be used where `Update.ReturnWithOutMessage<Model, Message, OutMessage>` is expected. The missing field means that update emitted no OutMessage.
 
-Manual unpacking of a child result usually means the site should use `Update.foldChild` or `Update.foldChildStep`.
+Use `Update.foldChildInit` for one child `init` or `boot` result. Use `Update.foldChildInits` when several child results enter one parent Model. Both lift child Commands and handle child OutMessages. Use `Update.foldChild` for a child update that receives input, or `Update.foldChildStep` for a child helper that receives only its Model. Keep route-gated initialization or Model-only child construction separate when there is no shared set of child results to fold.
 
 Use `Update.combine` when a later Step should receive the Model produced by an earlier Step. It takes two or more Steps. Do not wrap one Step in `Update.combine`; call that operation directly. Name an inline Step parameter `stepModel`; it contains the Model produced by the preceding Step.
 
@@ -84,6 +84,8 @@ When the OutMessage is already known while constructing a new result, include it
 
 Add `toParentOutMessage` only when at least one child OutMessage should continue to the current Submodel's parent. For partial forwarding, match every child variant and return `undefined` for the variants that stop here. Omit `toParentOutMessage` when every variant stops here. `foldOutMessage` still handles each variant locally, including variants that continue upward. Never write `toParentOutMessage: () => undefined`.
 
+When a `foldChildInits` entry can derive or forward an OutMessage, add `resolveOutMessage` to construct one parent OutMessage from the named OutMessages after every local fold completes. Combine their information when both results matter; choosing one discards the other. The callback also receives the final Model. If that Model alone contains everything needed, use local folds and attach a parent OutMessage afterward with `Update.withOutMessage`.
+
 Use `evo()` from `foldkit/struct` for immutable model updates. Never spread or `Object.assign`.
 
 ### View

package/dist/templates/examples/generative-art/src/subscription.ts

@@ -28,7 +28,7 @@ const frameSubscription = Subscription.make<Model, Message>()(_entry => ({
   }),
 }))
 
-export const subscriptions = Subscription.aggregate<Model, Message>()(
+export const subscriptions = Subscription.aggregate(
   frameSubscription,
   flowStrengthSliderSubscriptions,
   noiseScaleSliderSubscriptions,

package/dist/templates/examples/job-application/src/message.ts

@@ -3,7 +3,6 @@ import { defineMessageUnion } from 'foldkit/message'
 
 import { Menu, Tabs } from '@foldkit/ui'
 
-import { Step } from './domain'
 import {
   Attachments,
   CoverLetter,
@@ -13,16 +12,6 @@ import {
   WorkHistory,
 } from './step'
 
-// STEP SUBMODELS
-
-// NAVIGATION
-
-// PREVIEW
-
-// SUBMISSION
-
-// UNION
-
 export const Message = defineMessageUnion({
   GotPersonalInfoMessage: { message: PersonalInfo.Message },
   GotWorkHistoryMessage: { message: WorkHistory.Message },
@@ -32,7 +21,6 @@ export const Message = defineMessageUnion({
   GotAttachmentsMessage: { message: Attachments.Message },
   GotStepMenuMessage: { message: Menu.Message },
   GotStepTabsMessage: { message: Tabs.Message },
-  NavigatedToStep: { step: Step.Step },
   ClickedNext: {},
   ClickedPrevious: {},
   ToggledPreview: {},

package/dist/templates/examples/job-application/src/story.test.ts

@@ -79,17 +79,6 @@ describe('update', () => {
       )
     })
 
-    test('NavigatedToStep jumps directly to a step', () => {
-      story(
-        update,
-        givenInitial,
-        message(Message.NavigatedToStep({ step: 'Skills' })),
-        model(model => {
-          expect(model.currentStep).toBe('Skills')
-        }),
-      )
-    })
-
     test('GotStepTabsMessage selects the matching step', () => {
       story(
         update,

package/dist/templates/examples/job-application/src/update.ts

@@ -139,10 +139,6 @@ export const update = (model: Model, message: Message) =>
 
     GotStepTabsMessage: ({ message }) => foldStepTabs(model, message),
 
-    NavigatedToStep: ({ step }) => ({
-      model: evo(model, { currentStep: () => step }),
-    }),
-
     ClickedNext: () => ({ model: evo(model, { currentStep: toNextStep }) }),
 
     ClickedPrevious: () => ({

package/dist/templates/examples/pixel-art/src/scene.test.ts

@@ -1,5 +1,14 @@
 import { Option } from 'effect'
-import { Command, click, expect, given, role, scene, text } from 'foldkit/scene'
+import {
+  Command,
+  Mount,
+  click,
+  expect,
+  given,
+  role,
+  scene,
+  text,
+} from 'foldkit/scene'
 import { evo } from 'foldkit/struct'
 import { describe, test } from 'vitest'
 
@@ -17,6 +26,11 @@ const resolveFocusOption = Command.resolve(
   RadioGroup.Message.CompletedFocusOption(),
 )
 
+const resolveDialogResources = Mount.resolve(
+  Dialog.AcquireResources,
+  Dialog.Message.SucceededAcquireResources(),
+)
+
 const createTestModel = (): Model => ({
   grid: createEmptyGrid(4),
   undoStack: [],
@@ -70,6 +84,7 @@ describe('export workflow', () => {
         Message.FailedExportPng({ error: 'Canvas 2D context not available' }),
       ),
       Command.resolve(Dialog.ShowDialog, Dialog.Message.SucceededShowDialog()),
+      resolveDialogResources,
       expect(text('Export Failed')).toExist(),
       expect(text('Canvas 2D context not available')).toExist(),
       expect(role('button', { name: 'Dismiss' })).toExist(),
@@ -86,12 +101,14 @@ describe('export workflow', () => {
         Message.FailedExportPng({ error: 'Canvas 2D context not available' }),
       ),
       Command.resolve(Dialog.ShowDialog, Dialog.Message.SucceededShowDialog()),
+      resolveDialogResources,
       expect(text('Export Failed')).toExist(),
       click(role('button', { name: 'Dismiss' })),
       Command.resolve(
         Dialog.CloseDialog,
         Dialog.Message.CompletedCloseDialog(),
       ),
+      Mount.expectEnded(Dialog.AcquireResources),
       expect(text('Export Failed')).toBeAbsent(),
     )
   })
@@ -200,6 +217,7 @@ describe('grid size change', () => {
       click(role('radio', { name: '8' })),
       resolveFocusOption,
       Command.resolve(Dialog.ShowDialog, Dialog.Message.SucceededShowDialog()),
+      resolveDialogResources,
       expect(text('Change to 8\u00d78?')).toExist(),
       expect(
         text('This will clear your canvas and reset undo history.'),
@@ -213,22 +231,23 @@ describe('grid size change', () => {
     const modelWithPendingResize: Model = evo(createTestModel(), {
       maybePendingGridSize: () => Option.some(8),
       gridSizeConfirmDialog: () =>
-        Dialog.init({
+        Dialog.boot({
           id: 'grid-size-confirm-dialog',
-          isOpen: true,
-        }),
+        }).model,
       undoStack: () => [createEmptyGrid(4)],
     })
 
     scene(
       { update, view },
       given(modelWithPendingResize),
+      resolveDialogResources,
       expect(text('Change to 8\u00d78?')).toExist(),
       click(role('button', { name: 'Clear and Resize' })),
       Command.resolve(
         Dialog.CloseDialog,
         Dialog.Message.CompletedCloseDialog(),
       ),
+      Mount.expectEnded(Dialog.AcquireResources),
       Command.resolve(SaveCanvas, Message.CompletedSaveCanvas()),
       expect(text('Change to 8\u00d78?')).toBeAbsent(),
     )
@@ -238,21 +257,22 @@ describe('grid size change', () => {
     const modelWithPendingResize: Model = evo(createTestModel(), {
       maybePendingGridSize: () => Option.some(8),
       gridSizeConfirmDialog: () =>
-        Dialog.init({
+        Dialog.boot({
           id: 'grid-size-confirm-dialog',
-          isOpen: true,
-        }),
+        }).model,
     })
 
     scene(
       { update, view },
       given(modelWithPendingResize),
+      resolveDialogResources,
       expect(text('Change to 8\u00d78?')).toExist(),
       click(role('button', { name: 'Cancel' })),
       Command.resolve(
         Dialog.CloseDialog,
         Dialog.Message.CompletedCloseDialog(),
       ),
+      Mount.expectEnded(Dialog.AcquireResources),
       expect(text('Change to 8\u00d78?')).toBeAbsent(),
     )
   })

package/dist/templates/examples/pixel-art/src/story.test.ts

@@ -316,10 +316,9 @@ describe('grid size', () => {
     const modelWithPending: Model = evo(emptyModel, {
       maybePendingGridSize: () => Option.some(8),
       gridSizeConfirmDialog: () =>
-        Dialog.init({
+        Dialog.boot({
           id: 'grid-size-confirm-dialog',
-          isOpen: true,
-        }),
+        }).model,
       undoStack: () => [createEmptyGrid(4)],
     })
 

package/dist/templates/examples/pixel-art/src/subscription.ts

@@ -40,7 +40,7 @@ const toToolMessage = (event: KeyboardEvent): Option.Option<Message> => {
 
 export const subscriptions = Subscription.make<Model, Message>()(entry => ({
   undoRedoKeys: Subscription.persistent(
-    Subscription.fromEventFilterMapPreventDefault<KeyboardEvent, Message>({
+    Subscription.fromEventFilterMapPreventDefault({
       target: document,
       type: 'keydown',
       toMessage: toUndoRedoMessage,
@@ -48,7 +48,7 @@ export const subscriptions = Subscription.make<Model, Message>()(entry => ({
   ),
 
   toolKeys: Subscription.persistent(
-    Subscription.fromEventFilterMap<KeyboardEvent, Message>({
+    Subscription.fromEventFilterMap({
       target: document,
       type: 'keydown',
       toMessage: toToolMessage,

package/dist/templates/examples/routing/src/entry.ts

@@ -1,12 +1,13 @@
 import { Runtime } from 'foldkit'
 
-import { Message, Model, init, update, view } from './main'
+import { Message, Model, init, subscriptions, update, view } from './main'
 
 const application = Runtime.makeApplication({
   Model,
   init,
   update,
   view,
+  subscriptions,
   container: document.getElementById('root'),
   routing: {
     onUrlRequest: request => Message.ClickedLink({ request }),

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

@@ -1,5 +1,5 @@
 import { Array, Effect, Match, Option, Schema } from 'effect'
-import { Command, Runtime, Update } from 'foldkit'
+import { Command, Runtime, Subscription, Update } from 'foldkit'
 import { Document, Html, HtmlBuilder } from 'foldkit/html'
 import { defineMessageUnion } from 'foldkit/message'
 import { UrlRequest, load, pushUrl } from 'foldkit/navigation'
@@ -37,11 +37,15 @@ export type Model = typeof Model.Type
 
 // MESSAGE
 
+const NavigationShortcut = Schema.Literals(['GH', 'GP', 'GF', 'GN'])
+type NavigationShortcut = typeof NavigationShortcut.Type
+
 export const Message = defineMessageUnion({
   CompletedNavigateInternal: {},
   CompletedLoadExternal: {},
   ClickedLink: { request: UrlRequest },
   ChangedUrl: { url: Url },
+  EnteredNavigationShortcut: { shortcut: NavigationShortcut },
   GotPeopleMessage: { message: People.Message },
 })
 
@@ -59,18 +63,15 @@ export const init: Runtime.RoutingApplicationInit<Model, Message> = (
     Match.orElse(() => AppRoute.People({ searchText: Option.none() })),
   )
 
-  const peopleInit = People.init(initialPeopleRoute)
-  return {
-    model: { route, peoplePage: peopleInit.model },
-    commands: Command.mapMessages(peopleInit.commands, childMessage =>
-      Message.GotPeopleMessage({ message: childMessage }),
-    ),
-  }
+  return Update.foldChildInit(People.init(initialPeopleRoute), {
+    toParentModel: peoplePage => ({ route, peoplePage }),
+    toParentMessage: message => Message.GotPeopleMessage({ message }),
+  })
 }
 
 // COMMAND
 
-const NavigateInternal = Command.define('NavigateInternal', {
+export const NavigateInternal = Command.define('NavigateInternal', {
   args: { url: Schema.String },
   messages: [Message.CompletedNavigateInternal],
   execute: ({ url }) =>
@@ -88,6 +89,15 @@ const LoadExternal = Command.define('LoadExternal', {
 
 type UpdateReturn = Update.Return<Model, Message>
 
+const navigationUrlByShortcut: Readonly<
+  Record<NavigationShortcut, () => string>
+> = {
+  GH: homeRouter,
+  GP: () => peopleRouter({ searchText: Option.none() }),
+  GF: filesIndexRouter,
+  GN: nestedRouter,
+}
+
 const foldPeopleEntry = <Input>(
   update: (peoplePage: People.Model, input: Input) => People.UpdateReturn,
 ): Update.Fold<Model, Message, Input> =>
@@ -138,9 +148,46 @@ export const update = (model: Model, message: Message) =>
       return Update.combine(model, [setRoute(nextRoute), ...routeSteps])
     },
 
+    EnteredNavigationShortcut: ({ shortcut }) => {
+      const url = navigationUrlByShortcut[shortcut]()
+
+      return { model, commands: [NavigateInternal({ url })] }
+    },
+
     GotPeopleMessage: ({ message }) => foldPeople(model, message),
   })
 
+// SUBSCRIPTION
+
+export const subscriptions = Subscription.make<Model, Message>()(() => ({
+  shortcuts: Subscription.persistent(
+    Subscription.keyboardShortcuts<Message>({
+      bindings: [
+        {
+          shortcut: ['G', 'H'],
+          toMessage: () =>
+            Message.EnteredNavigationShortcut({ shortcut: 'GH' }),
+        },
+        {
+          shortcut: ['G', 'P'],
+          toMessage: () =>
+            Message.EnteredNavigationShortcut({ shortcut: 'GP' }),
+        },
+        {
+          shortcut: ['G', 'F'],
+          toMessage: () =>
+            Message.EnteredNavigationShortcut({ shortcut: 'GF' }),
+        },
+        {
+          shortcut: ['G', 'N'],
+          toMessage: () =>
+            Message.EnteredNavigationShortcut({ shortcut: 'GN' }),
+        },
+      ],
+    }),
+  ),
+}))
+
 // VIEW
 
 const navigationView = (

package/dist/templates/examples/routing/src/story.test.ts

@@ -3,8 +3,14 @@ import { Command, given, message, model, story } from 'foldkit/story'
 import { fromString } from 'foldkit/url'
 import { describe, expect, test } from 'vitest'
 
-import { AppRoute, Message, Model, update } from './main'
+import { AppRoute, Message, Model, NavigateInternal, update } from './main'
 import { People } from './page'
+import {
+  filesIndexRouter,
+  homeRouter,
+  nestedRouter,
+  peopleRouter,
+} from './route'
 
 const peoplePageWith = (searchInput: string) =>
   People.Model.make({
@@ -47,6 +53,52 @@ const resolveFetch = (searchText: string) =>
   )
 
 describe('update', () => {
+  describe('EnteredNavigationShortcut', () => {
+    test('GH produces the Home navigation Command', () => {
+      story(
+        update,
+        given(home),
+        message(Message.EnteredNavigationShortcut({ shortcut: 'GH' })),
+        Command.expectHas(NavigateInternal({ url: homeRouter() })),
+        Command.resolve(NavigateInternal, Message.CompletedNavigateInternal()),
+      )
+    })
+
+    test('GP produces the People navigation Command', () => {
+      story(
+        update,
+        given(home),
+        message(Message.EnteredNavigationShortcut({ shortcut: 'GP' })),
+        Command.expectHas(
+          NavigateInternal({
+            url: peopleRouter({ searchText: Option.none() }),
+          }),
+        ),
+        Command.resolve(NavigateInternal, Message.CompletedNavigateInternal()),
+      )
+    })
+
+    test('GF produces the Files navigation Command', () => {
+      story(
+        update,
+        given(home),
+        message(Message.EnteredNavigationShortcut({ shortcut: 'GF' })),
+        Command.expectHas(NavigateInternal({ url: filesIndexRouter() })),
+        Command.resolve(NavigateInternal, Message.CompletedNavigateInternal()),
+      )
+    })
+
+    test('GN produces the Nested navigation Command', () => {
+      story(
+        update,
+        given(home),
+        message(Message.EnteredNavigationShortcut({ shortcut: 'GN' })),
+        Command.expectHas(NavigateInternal({ url: nestedRouter() })),
+        Command.resolve(NavigateInternal, Message.CompletedNavigateInternal()),
+      )
+    })
+  })
+
   describe('ChangedUrl', () => {
     test('navigating to /people parses to a People route', () => {
       story(

package/dist/templates/examples/slow-warnings/src/main.ts

@@ -61,7 +61,9 @@ export const Message = defineMessageUnion({
 
 export type Message = typeof Message.Type
 
-const slowWarningTarget = new EventTarget()
+const slowWarningTarget: Subscription.TypedEventTarget<{
+  [SLOW_WARNING_EVENT]: CustomEvent<SlowWarningReport>
+}> = new EventTarget()
 
 const burnCpu = (durationMs: number): number => {
   const stopAt = performance.now() + durationMs
@@ -218,10 +220,7 @@ export const init: Runtime.ApplicationInit<Model, Message> = () => ({
 
 export const subscriptions = Subscription.make<Model, Message>()(entry => ({
   slowWarnings: Subscription.persistent(
-    Subscription.fromEventFilterMap<
-      CustomEvent,
-      typeof Message.RecordedSlowWarning.Type
-    >({
+    Subscription.fromEventFilterMap({
       target: slowWarningTarget,
       type: SLOW_WARNING_EVENT,
       toMessage: event =>

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

@@ -252,7 +252,7 @@ export const subscriptions = Subscription.make<Model, Message>()(entry => ({
   ),
 
   keyboard: Subscription.persistent(
-    Subscription.fromEventFilterMapPreventDefault<KeyboardEvent, Message>({
+    Subscription.fromEventFilterMapPreventDefault({
       target: document,
       type: 'keydown',
       toMessage: keyboardEvent =>

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

@@ -197,17 +197,10 @@ export const init: Runtime.RoutingApplicationInit<Model, Message, Flags> = (
   flags: Flags,
   url: Url,
 ) => {
-  const uiInit_ = uiInit(flags.today)
-
-  return {
-    model: {
-      route: urlToAppRoute(url),
-      uiModel: uiInit_.model,
-    },
-    commands: Command.mapMessages(uiInit_.commands, message =>
-      Message.GotUiMessage({ message }),
-    ),
-  }
+  return Update.foldChildInit(uiInit(flags.today), {
+    toParentModel: uiModel => ({ route: urlToAppRoute(url), uiModel }),
+    toParentMessage: message => Message.GotUiMessage({ message }),
+  })
 }
 
 // UPDATE

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

@@ -1,5 +1,5 @@
 import { Calendar } from 'foldkit'
-import { expect, given, role, scene, text } from 'foldkit/scene'
+import { click, expect, given, role, scene, text } from 'foldkit/scene'
 import { describe, test } from 'vitest'
 
 import { AppRoute, type Model, update, view } from './main'
@@ -85,6 +85,18 @@ describe('view', () => {
     )
   })
 
+  test('the Disclosure collapsed preview expands from its own control', () => {
+    scene(
+      { update, view },
+      given(modelForRoute(AppRoute.Disclosure())),
+      expect(role('heading', { name: 'Basic' })).toExist(),
+      expect(role('heading', { name: 'Animated' })).toExist(),
+      expect(role('heading', { name: 'Collapsed preview' })).toExist(),
+      click(role('button', { name: 'Read more' })),
+      expect(role('button', { name: 'Show less' })).toExist(),
+    )
+  })
+
   test('the NotFound route renders the 404 panel and a Go Home link', () => {
     scene(
       { update, view },

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

@@ -101,10 +101,9 @@ describe('update', () => {
       const modelWithOpenMenu: Model = evo(initialModel, {
         uiModel: evo({
           mobileMenuDialog: () =>
-            Dialog.init({
+            Dialog.boot({
               id: 'mobile-menu',
-              isOpen: true,
-            }),
+            }).model,
         }),
       })
 

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

@@ -86,6 +86,7 @@ export const uiInit = (today: Calendar.CalendarDate): InitReturn => ({
     nestedDialogChildDemo: Dialog.init({ id: 'nested-dialog-child-demo' }),
     isDisclosureBasicDemoOpen: false,
     isDisclosureAnimatedDemoOpen: false,
+    isDisclosureCollapsedPreviewDemoOpen: false,
     dragAndDropDemo: DragAndDrop.init({ id: 'drag-and-drop-demo' }),
     dragAndDropDemoColumns: [
       {

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

@@ -54,6 +54,7 @@ export const Message = defineMessageUnion({
   ClickedOpenProjectSettings: {},
   ToggledDisclosureBasicDemo: { isOpen: Schema.Boolean },
   ToggledDisclosureAnimatedDemo: { isOpen: Schema.Boolean },
+  ToggledDisclosureCollapsedPreviewDemo: { isOpen: Schema.Boolean },
   GotCalendarBasicDemoMessage: { message: Calendar.Message },
   GotDatePickerBasicDemoMessage: { message: DatePicker.Message },
   GotDragAndDropDemoMessage: { message: DragAndDrop.Message },

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

@@ -102,6 +102,7 @@ export const UiModel = Schema.Struct({
   nestedDialogChildDemo: Dialog.Model,
   isDisclosureBasicDemoOpen: Schema.Boolean,
   isDisclosureAnimatedDemoOpen: Schema.Boolean,
+  isDisclosureCollapsedPreviewDemoOpen: Schema.Boolean,
   dragAndDropDemo: DragAndDrop.Model,
   dragAndDropDemoColumns: Schema.Array(DemoColumn),
   fileDropBasicDemo: FileDrop.Model,

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

@@ -46,7 +46,7 @@ const virtualListVariableDemoSubscriptions = Subscription.lift({
     UiMessage.GotVirtualListVariableDemoMessage({ message }),
 })
 
-export const subscriptions = Subscription.aggregate<UiModel, UiMessage>()(
+export const subscriptions = Subscription.aggregate(
   dragAndDropSubscriptions,
   sliderRatingSubscriptions,
   sliderVolumeSubscriptions,

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

@@ -1009,6 +1009,12 @@ export const uiUpdate = (model: UiModel, message: UiMessage) =>
       }),
     }),
 
+    ToggledDisclosureCollapsedPreviewDemo: ({ isOpen }) => ({
+      model: evo(model, {
+        isDisclosureCollapsedPreviewDemoOpen: () => isOpen,
+      }),
+    }),
+
     GotCalendarBasicDemoMessage: ({ message }) =>
       foldCalendarBasicDemo(model, message),
 

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

@@ -10,6 +10,8 @@ import type { UiModel } from '../model'
 
 const DISCLOSURE_BASIC_DEMO_ID = 'disclosure-basic-demo'
 const DISCLOSURE_ANIMATED_DEMO_ID = 'disclosure-animated-demo'
+const DISCLOSURE_COLLAPSED_PREVIEW_DEMO_ID = 'disclosure-collapsed-preview-demo'
+const COLLAPSED_PREVIEW_HEIGHT = '6rem'
 
 const PANEL_TEXT =
   'Foldkit is an Elm-inspired UI framework powered by Effect. It brings the Model-View-Update architecture to TypeScript with Schema-typed state, explicit side effects via commands, and composable headless UI components.'
@@ -32,6 +34,31 @@ const panelText = (h: HtmlBuilder<UiMessage>): Html => {
   return h.p([h.Class('text-gray-800')], [PANEL_TEXT])
 }
 
+const collapsedPreviewPanel = (h: HtmlBuilder<UiMessage>): Html =>
+  h.div(
+    [h.Class('space-y-3 text-base leading-6 text-gray-800')],
+    [
+      h.p(
+        [],
+        [
+          'Foldkit keeps application state in one Model. Messages record facts, and update decides how each fact changes that Model.',
+        ],
+      ),
+      h.p(
+        [],
+        [
+          'Commands describe one-time work for the Runtime, so network requests, focus changes, and storage writes stay outside state transitions.',
+        ],
+      ),
+      h.p(
+        [],
+        [
+          'That separation leaves every transition visible in one place and gives tests the same inputs and outputs the application uses.',
+        ],
+      ),
+    ],
+  )
+
 const subheading = (text: string, h: HtmlBuilder<UiMessage>): Html => {
   return h.h3(
     [h.Class('text-lg font-semibold text-gray-900 mt-8 mb-4')],
@@ -136,6 +163,89 @@ export const view = Submodel.defineView<UiModel, UiMessage>(
           },
           h,
         ),
+
+        subheading('Collapsed preview', h),
+        h.p(
+          [h.Class('mb-1.5 text-sm font-medium text-gray-900')],
+          ['Featured article'],
+        ),
+        Disclosure.view(
+          {
+            id: DISCLOSURE_COLLAPSED_PREVIEW_DEMO_ID,
+            isOpen: model.isDisclosureCollapsedPreviewDemoOpen,
+            onToggle: isOpen =>
+              UiMessage.ToggledDisclosureCollapsedPreviewDemo({ isOpen }),
+            toView: ({ button, panel, animatePanel }) =>
+              h.article(
+                [
+                  h.Class(
+                    'relative overflow-hidden rounded-lg border border-gray-300 bg-white',
+                  ),
+                ],
+                [
+                  h.h4(
+                    [h.Class('px-4 py-3 text-base font-normal text-gray-900')],
+                    ['Why the Elm Architecture scales'],
+                  ),
+                  h.div(
+                    [h.Class('relative')],
+                    [
+                      animatePanel(
+                        h.div(
+                          [
+                            ...panel,
+                            h.Class(
+                              clsx(
+                                'border-t border-gray-300 px-4 pt-3',
+                                model.isDisclosureCollapsedPreviewDemoOpen
+                                  ? 'pb-20'
+                                  : 'pb-3',
+                              ),
+                            ),
+                          ],
+                          [collapsedPreviewPanel(h)],
+                        ),
+                        { peek: COLLAPSED_PREVIEW_HEIGHT },
+                      ),
+                      ...(model.isDisclosureCollapsedPreviewDemoOpen
+                        ? []
+                        : [
+                            h.div([
+                              h.AriaHidden(true),
+                              h.Class(
+                                'pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-white to-transparent',
+                              ),
+                            ]),
+                          ]),
+                    ],
+                  ),
+                  h.div(
+                    [
+                      h.Class(
+                        'absolute inset-x-0 bottom-2.5 flex justify-center px-4',
+                      ),
+                    ],
+                    [
+                      h.button(
+                        [
+                          ...button,
+                          h.Class(
+                            'cursor-pointer whitespace-nowrap rounded-full border border-gray-300 bg-white px-5 py-2 text-sm font-medium text-gray-900 shadow-sm transition hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-600 select-none',
+                          ),
+                        ],
+                        [
+                          model.isDisclosureCollapsedPreviewDemoOpen
+                            ? 'Show less'
+                            : 'Read more',
+                        ],
+                      ),
+                    ],
+                  ),
+                ],
+              ),
+          },
+          h,
+        ),
       ],
     )
   },

package/dist/templates/release.json

@@ -1,22 +1,22 @@
 {
   "schemaVersion": 1,
   "channel": "stable",
-  "sourceCommit": "a124b3451a885f2e58b4477adcd04b2ef9e4795a",
+  "sourceCommit": "7a3180b90d4eff772fa22928f31009e7dda9ff8f",
   "packages": {
-    "create-foldkit-app": "0.35.0",
-    "@foldkit/devtools": "0.160.0",
-    "@foldkit/devtools-mcp": "0.20.0",
-    "foldkit": "0.160.0",
-    "@foldkit/markdown": "0.10.0",
-    "@foldkit/oxlint-plugin": "0.13.0",
-    "@foldkit/ui": "0.160.0",
-    "@foldkit/vite-plugin": "0.22.0"
+    "create-foldkit-app": "0.35.1",
+    "@foldkit/devtools": "0.161.0",
+    "@foldkit/devtools-mcp": "0.21.0",
+    "foldkit": "0.161.0",
+    "@foldkit/markdown": "0.11.0",
+    "@foldkit/oxlint-plugin": "0.14.0",
+    "@foldkit/ui": "0.161.0",
+    "@foldkit/vite-plugin": "0.23.0"
   },
   "dependencies": {
-    "@foldkit/devtools": "0.160.0",
-    "@foldkit/vite-plugin": "0.22.0",
-    "@foldkit/devtools-mcp": "0.20.0",
-    "@foldkit/oxlint-plugin": "0.13.0",
+    "@foldkit/devtools": "0.161.0",
+    "@foldkit/vite-plugin": "0.23.0",
+    "@foldkit/devtools-mcp": "0.21.0",
+    "@foldkit/oxlint-plugin": "0.14.0",
     "@types/node": "^26.4.0",
     "happy-dom": "^20.11.13",
     "oxfmt": "^0.66.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-foldkit-app",
-  "version": "0.35.0",
+  "version": "0.35.1",
   "description": "Create Foldkit applications",
   "type": "module",
   "main": "./dist/index.js",