create-foldkit-app 0.7.1 → 0.7.2

package/package.json

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

package/templates/base/AGENTS.md

@@ -49,13 +49,23 @@ Don't add type annotations to `evo` callbacks when the type can be inferred.
 
 ### View
 
-Call `html<Message>()` once in a dedicated `html.ts` file and import the destructured helpers everywhere else:
+Bind the `html` factory once per module by calling `html<Message>()`, then reach for `h.div`, `h.OnClick`, and the rest off the returned record. Each view module binds its own `h` against the Message type it dispatches:
 
 ```ts
-// html.ts
-export const { div, button, span, Class, OnClick } = html<Message>()
+const h = html<Message>()
+
+export const view = (model: Model): Html =>
+  h.div(
+    [h.Class('flex flex-col gap-2')],
+    [
+      h.h1([], [`Hello, ${model.name}`]),
+      h.button([h.OnClick(ClickedRefresh())], ['Refresh']),
+    ],
+  )
 ```
 
+For child views that should be agnostic to their parent, take `ParentMessage` as a function generic and bind `html<ParentMessage>()` inside. The view stays decoupled from any particular parent and composes through the `toParentMessage` callback the parent supplies.
+
 Use `empty` (not `null`) for conditional rendering. Use `M.value().pipe(M.tagsExhaustive({...}))` for rendering discriminated unions and `Array.match` for rendering lists that may be empty.
 
 Use `keyed` wrappers whenever the view branches into structurally different layouts based on route or model state. Without keying, the virtual DOM will try to diff one layout into another (e.g. a full-width landing page into a sidebar docs layout), which causes stale DOM, mismatched event handlers, and subtle rendering bugs. Key the outermost container of each layout branch with a stable string (e.g. `keyed('div')('landing', ...)` vs `keyed('div')('docs', ...)`). Within a single layout, key the content area on the route tag (e.g. `keyed('div')(model.route._tag, ...)`) so page transitions replace rather than patch.