@zvndev/darkmown 1.3.0 → 1.5.0

package/site/pages/app.skin

@@ -57,20 +57,42 @@ h1
   color #9a2a2a
 
 button
+  display inline-flex
+  align-items center
+  justify-content center
+  gap .4rem
   background $accent
   color white
-  border 0
-  padding .55rem .9rem
+  border 1px solid $accent
+  padding .55rem 1rem
   margin .25rem .4rem .25rem 0
-  border-radius 8px
-  font-size .95rem
+  border-radius 999px
+  font-size .92rem
+  font-weight 560
   cursor pointer
+  appearance none
+  transition transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .14s ease
+
+button:hover
+  transform translateY(-1px)
+  box-shadow 0 8px 18px -8px rgba(15,107,94,.5)
+
+button:focus-visible
+  outline 2px solid $accent
+  outline-offset 2px
 
 input
   font-size 1rem
-  padding .6rem .7rem
+  padding .55rem .75rem
   border 1px solid $line
   border-radius 8px
   width 100%
   max-width 22rem
   margin .3rem 0
+  appearance none
+  transition border-color .14s ease, box-shadow .14s ease
+
+input:focus-visible
+  outline none
+  border-color $accent
+  box-shadow 0 0 0 3px rgba(15,107,94,.18)

package/site/pages/blog/_schema.wd

@@ -0,0 +1,15 @@
+---
+# Typed schema for the blog collection. Every post under site/pages/blog/ is
+# validated against these rules at build time — a missing required field, a
+# wrong type, or an unknown extra field fails the build with a file:line. Append
+# "?" to a type to make the field optional. Remove this file to turn validation
+# off (it is opt-in).
+title: string
+date: date
+description: string
+excerpt: string?
+tags: string[]?
+---
+
+The blog collection schema. Posts are plain `.md` files next to this file;
+their frontmatter must match the rules above.

package/site/pages/blog/collections-and-pagination.md

@@ -0,0 +1,38 @@
+---
+title: Collections and pagination, with zero ceremony
+description: Any folder under site/pages is a queryable collection. Loop it by name, sort it, paginate it — all at build time, all zero-JS.
+date: 2026-06-28
+excerpt: This very page is an entry in a collection. The list you came from is one @loop over a folder — no content root, no marker file, no config.
+tags: [collections, content]
+---
+
+# Collections and pagination, with zero ceremony
+
+The page you came from is not a hand-maintained list of links. It is one
+`@loop` over a *collection* — and a collection is just a folder. Every `.md`
+and `.wd` file under `site/pages/blog/` is an entry, queryable by the folder's
+bare name:
+
+```wd
+@loop blog where draft == false sort by date desc paginate 3 into post
+- [{ post.title }]({ post.url }) — { post.date }
+@endloop
+```
+
+No `content/` root to opt into, no marker file to drop in, no config object.
+A folder of posts *is* the collection. Each entry's frontmatter becomes a row,
+plus three fields the framework derives for you: `url` (the entry's route),
+`slug` (its filename), and `excerpt` (the post's first paragraph when you don't
+write one).
+
+## It is the same loop you already know
+
+There is no second loop syntax. `where`, `sort by`, `reverse`, `offset`,
+`limit`, and the format pipes all work over a collection exactly as they do over
+a JSON file — because under the hood a collection resolves to the same array of
+rows. The only new word is `paginate N`, which slices the listing into static
+pages: page one keeps this listing's clean route, and pages two and up live at
+`/blog/page/2/`, `/blog/page/3/`, and so on. Every one is plain HTML.
+
+A pure listing like this ships **zero** framework JavaScript. The pager links —
+newer, older, numbered — are just `<a href>`s to the generated routes.

package/site/pages/blog/drafts-that-never-leak.md

@@ -2,6 +2,8 @@
 title: Drafts that never leak
 description: draft true excludes a page everywhere in a production build — dist, routes.json, sitemap, and rss.
 date: 2026-06-27
+excerpt: Set draft true on a post and it vanishes from a production build — dist, routes.json, the sitemap, and the feed — even with a date.
+tags: [drafts, workflow]
 ---
 
 # Drafts that never leak

package/site/pages/blog/index.skin

@@ -0,0 +1,144 @@
+/* The Darkmown blog index — a collection-driven, paginated listing. Thin layer
+   over /base.wd (tokens, typography, dark mode); only the post-card grid and the
+   pager live here. Namespaced under .app-blog so it can't leak. */
+
+.app-blog
+  max-width 52rem
+
+.app-blog .blog-head
+  margin 2.5rem 0 2rem
+
+.app-blog .blog-head .eyebrow
+  display inline-block
+  font-size .78rem
+  font-weight 600
+  text-transform uppercase
+  letter-spacing .12em
+  color var(--accent)
+  margin-bottom .6rem
+
+.app-blog .blog-head h1
+  margin .2rem 0 .8rem
+  line-height 1.1
+
+.app-blog .blog-head p
+  color var(--muted)
+  max-width 38rem
+
+/* The list of posts. */
+.app-blog .post-list
+  display flex
+  flex-direction column
+  gap 1.1rem
+  margin 2rem 0
+
+.app-blog .post-card
+  background var(--panel)
+  border 1px solid var(--line)
+  radius var(--radius-lg)
+  padding 1.5rem 1.6rem
+  transition border-color .15s ease, transform .15s ease, box-shadow .15s ease
+
+.app-blog .post-card:hover
+  border-color var(--accent)
+  transform translateY(-2px)
+  box-shadow 0 8px 24px -16px var(--accent-deep)
+
+.app-blog .post-meta
+  display flex
+  align-items center
+  flex-wrap wrap
+  gap .55rem
+  margin-bottom .55rem
+
+/* Each meta item (time / tag) renders as its own paragraph; strip the default
+   block margins so they sit inline in the flex row. */
+.app-blog .post-meta p
+  margin 0
+  display inline-flex
+
+.app-blog .post-meta time
+  font-size .82rem
+  font-weight 600
+  color var(--muted)
+  font-variant-numeric tabular-nums
+
+.app-blog .tag
+  font-size .72rem
+  font-weight 600
+  text-transform uppercase
+  letter-spacing .06em
+  color var(--accent-deep)
+  background var(--accent-soft)
+  border 1px solid color-mix(in srgb, var(--accent) 30%, transparent)
+  padding .15rem .5rem
+  radius 999px
+
+.app-blog .post-card h3
+  margin .1rem 0 .5rem
+  font-size 1.4rem
+  line-height 1.2
+
+.app-blog .post-card h3 a
+  color var(--ink)
+  text-decoration none
+
+.app-blog .post-card h3 a:hover
+  color var(--accent)
+
+.app-blog .post-excerpt
+  color var(--ink-soft)
+  margin 0 0 .8rem
+  line-height 1.55
+
+.app-blog .post-more a
+  font-size .88rem
+  font-weight 600
+  color var(--accent)
+  text-decoration none
+
+.app-blog .post-more a:hover
+  text-decoration underline
+
+.app-blog .empty-note
+  color var(--muted)
+  font-style italic
+  padding 2rem
+  text-align center
+  border 1px dashed var(--line)
+  radius var(--radius)
+
+/* The pager — plain links to the generated routes, zero JS. */
+.app-blog .pager
+  display flex
+  align-items center
+  justify-content space-between
+  gap 1rem
+  margin 2.5rem 0 3rem
+  padding-top 1.4rem
+  border-top 1px solid var(--line)
+
+.app-blog .pager-side
+  flex 1
+  min-width 0
+
+.app-blog .pager-side p
+  margin 0
+
+.app-blog .pager-side--end
+  text-align right
+
+.app-blog .pager-now
+  font-size .85rem
+  font-weight 600
+  color var(--muted)
+  white-space nowrap
+  font-variant-numeric tabular-nums
+
+.app-blog .pager-link
+  font-weight 600
+  color var(--accent)
+  text-decoration none
+
+.app-blog .pager-link:hover
+  text-decoration underline

package/site/pages/blog/index.wd

@@ -0,0 +1,73 @@
+---
+title: The Darkmown Blog
+description: Notes on shipping Markdown that runs — collections, feeds, drafts, and zero-JS releases. This whole index is one @loop over a folder.
+image: https://darkmown.com/__wd/media/og.png
+transitions: true
+---
+
+@include /nav.wd
+@include /base.wd
+
+<main class="wide app-blog">
+
+<header class="blog-head">
+  <span class="eyebrow">The Darkmown Blog</span>
+
+# Notes from the framework
+
+Every post below is a plain `.md` file in `site/pages/blog/`. This page is **one
+`@loop` over that folder** — sorted newest-first, paginated, and 100% static
+HTML. No hand-maintained list, no config, no JavaScript.
+
+</header>
+
+<section class="post-list">
+
+@loop blog into post sort by post.date desc paginate 3
+::: card .post-card
+::: post-meta
+<time>{ post.date }</time>
+@loop post.tags into tag
+<span class="tag">{ tag }</span>
+@endloop
+:::
+
+### [{ post.title }]({ post.url })
+
+::: post-excerpt
+{ post.excerpt }
+:::
+
+::: post-more
+[Read post → ]({ post.url })
+:::
+:::
+@empty
+::: empty-note
+No posts yet. Add a dated `.md` file to `site/pages/blog/`.
+:::
+@endloop
+
+</section>
+
+::: pager
+::: pager-side
+:if page.prev
+[← Newer posts]({ page.prev }){.pager-link}
+:endif
+:::
+
+::: pager-now
+Page { page.current } of { page.total }
+:::
+
+::: pager-side .pager-side--end
+:if page.next
+[Older posts →]({ page.next }){.pager-link}
+:endif
+:::
+:::
+
+</main>
+
+@include /footer.wd

package/site/pages/blog/shipping-feeds.md

@@ -3,6 +3,7 @@ title: Shipping feeds without a config file
 description: Site identity lives in the home page frontmatter — one site_url field turns on sitemap.xml and rss.xml.
 date: 2026-06-26
 excerpt: One reserved frontmatter field on the home page — site_url — turns on the whole feeds story. No config loader, no plugin.
+tags: [feeds, seo]
 ---
 
 # Shipping feeds without a config file

package/site/pages/blog/typed-frontmatter.md

@@ -0,0 +1,45 @@
+---
+title: Typed frontmatter with a four-line schema
+description: Drop a _schema.wd in a collection and every entry is validated at build time — missing fields, wrong types, and typos all fail the build.
+date: 2026-06-29
+excerpt: A typo'd frontmatter key used to ship silently. With a collection schema, titel instead of title fails the build with a file and line.
+tags: [collections, schema, dx]
+---
+
+# Typed frontmatter with a four-line schema
+
+Frontmatter is convenient until a typo bites. You write `titel:` instead of
+`title:`, the field silently becomes empty, and the bug surfaces as a blank
+heading in production. Darkmown closes that gap with an *optional* schema — one
+file at the collection root, frontmatter-shaped, written exactly like the
+frontmatter it checks:
+
+```wd
+---
+title: string
+date: date
+description: string
+excerpt: string?
+tags: string[]?
+---
+```
+
+The vocabulary is small and closed on purpose: `string`, `number`, `boolean`,
+`date`, and `string[]`, with a trailing `?` to make a field optional. That is
+the whole DSL. An unknown type token is a compile error in the schema file
+itself.
+
+## What it catches
+
+At build time, every entry in the collection is checked against the rules. A
+missing required field, a value of the wrong type, or an extra field the schema
+never declared each fails the build — and the error names the offending entry
+by path and the field by name, so the fix is obvious:
+
+```
+Missing required field "date" (date) in /blog/example/ (collection "blog").
+```
+
+Validation is opt-in. No `_schema.wd`, no validation — the same posture as
+`scoped` styles and the `draft` flag. Add the file when you want the guardrails;
+leave it out while you are still sketching.

package/site/pages/blog/zero-js-by-default.md

@@ -0,0 +1,31 @@
+---
+title: Zero JavaScript, by default
+description: A Darkmown page ships no framework JavaScript unless it declares reactive behavior. The blog you are reading proves it.
+date: 2026-06-25
+excerpt: View source on this page. There is no runtime script tag, because nothing on it is reactive — and the framework knows the difference.
+tags: [performance, philosophy]
+---
+
+# Zero JavaScript, by default
+
+Open your browser's view-source on this post. Look for a `<script>` that loads a
+framework runtime. There isn't one — and there isn't one on the blog index, or
+on any of its paginated pages either. None of them declare reactive behavior, so
+none of them pay for it.
+
+That is the whole bargain. A `.md` file is plain CommonMark. Rename it to `.wd`
+and you unlock directives — state, loops, conditionals — but you only ship the
+~7.4 KB runtime on the pages that actually use them. A listing built from a
+collection loop resolves entirely at build time, so it stays static HTML.
+
+## The extension is the feature gate
+
+There is no flag to toggle, no "static export" mode to remember. The compiler
+tracks whether a page declared anything reactive and emits `runtime: false` into
+`routes.json` when it didn't. A collection listing, a paginated archive, a page
+of prose with a code block — all static, all cacheable on a CDN forever, all
+fast on the first byte because there is nothing to hydrate.
+
+When you do want an island of interactivity — a search box, a cart, a sortable
+table — you declare it, and only that page loads the runtime. The rest of the
+site stays weightless.

package/site/pages/data.skin

@@ -29,18 +29,44 @@ h2
   padding-top 1.2rem
 
 button
-  border 1px solid $ink
-  bg $ink
+  display inline-flex
+  align-items center
+  justify-content center
+  gap .5rem
+  border 1px solid $accent
+  bg $accent
   color white
-  padding .72rem 1rem
+  padding .6rem 1.1rem
   margin .3rem .5rem .3rem 0
-  radius $radius
-  font inherit
+  radius 999px
+  font system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
+  font-size .92rem
+  font-weight 560
+  line-height 1.15
   cursor pointer
+  appearance none
+  box-shadow 0 1px 2px rgba(23,23,23,.08)
+  transition transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .14s ease, background .14s ease, border-color .14s ease
 
 button:hover
   bg $accent
   border-color $accent
+  transform translateY(-1px)
+  box-shadow 0 8px 18px -8px rgba(22,100,90,.5)
+
+button:active
+  transform translateY(0)
+  box-shadow 0 1px 2px rgba(23,23,23,.08)
+
+button:focus-visible
+  outline 2px solid $accent
+  outline-offset 2px
+
+button:disabled
+  opacity .5
+  cursor not-allowed
+  box-shadow none
+  transform none
 
 a
   color $accent
@@ -75,21 +101,36 @@ form
   margin 1rem 0
 
 input
-  padding .7rem .9rem
+  padding .62rem .85rem
   border 1px solid $line
   radius $radius
   font inherit
+  font-size .95rem
   bg $panel
+  appearance none
+  transition border-color .14s ease, box-shadow .14s ease
+
+input:hover
+  border-color $accent
+
+input:focus-visible
+  outline none
+  border-color $accent
+  box-shadow 0 0 0 3px rgba(22,100,90,.18)
 
 .pulse-button
-  border 0
+  border 1px solid $warm
   bg $warm
   color white
-  padding .85rem 1rem
-  radius $radius
+  padding .6rem 1.1rem
+  radius 999px
   font inherit
   cursor pointer
 
+.pulse-button:hover
+  transform translateY(-1px)
+  box-shadow 0 8px 18px -8px rgba(168,63,42,.5)
+
 .tally-card
   border 1px solid $line
   bg $panel

package/site/pages/docs/index.wd

@@ -148,6 +148,53 @@ Nothing left to do.
 
 These clauses stay build-time when the source and every argument are static — a sorted, limited loop over a JSON file ships zero JS. The loop turns reactive only when the source or a clause reads `:state`/`:store`/`:fetch` data.
 
+## Content collections
+
+Any folder under `site/pages/` is a **collection** — loop it by its bare name. No `content/` root, no marker file: a `site/pages/blog/` folder of posts *is* the `blog` collection. The whole [blog on this site](/blog/) is one such loop.
+
+```wd
+@loop blog into post sort by post.date desc
+- [{ post.title }]({ post.url }) — { post.date }
+@endloop
+```
+
+Each entry's frontmatter is a row, plus three derived fields: `{ post.url }` (the route), `{ post.slug }` (the filename), and `{ post.excerpt }` (the frontmatter `excerpt:`, else the first paragraph of a `.md` body). It's the same loop with the same clauses, resolved at build time — a pure listing ships zero JS. Drafts never appear in a default-build listing (only under `darkmown build --drafts`).
+
+### Typed schema — `_schema.wd`
+
+Drop a `_schema.wd` at a collection's root to validate every entry at build time. It's frontmatter-shaped, one `field: type` per line:
+
+```wd
+---
+title: string
+date: date
+excerpt: string?
+tags: string[]?
+---
+```
+
+Closed types: `string`, `number`, `boolean`, `date`, `string[]`, each with `?` for optional. A missing required field, a wrong type, an unknown extra field (typo guard), or an unknown type token fails the build with a `file:line`. No `_schema.wd` means no validation — it's opt-in.
+
+### Pagination — `paginate N`
+
+Add `paginate N` (collections only) to split a listing into static pages. Page 1 keeps the listing route; pages 2+ are at `/<route>/page/2/`, `/page/3/`, … all static HTML.
+
+```wd
+@loop blog into post sort by post.date desc paginate 5
+- [{ post.title }]({ post.url })
+@endloop
+
+Page { page.current } of { page.total }
+:if page.prev
+[← Newer]({ page.prev })
+:endif
+:if page.next
+[Older →]({ page.next })
+:endif
+```
+
+The pager — `{ page.current }`, `{ page.total }`, `{ page.prev }`, `{ page.next }` (URLs, empty at the ends) — is exposed to the whole page as plain links. Zero JS. `paginate` can't combine with `offset`/`limit` (it owns the slice).
+
 ## Interpolation
 
 One syntax everywhere: `{ name }` or `{ name.path }`.
@@ -414,6 +461,29 @@ For an explicit light/dark switch alongside the OS preference, declare `:theme`
 
 A single `tokens dark` block in your `.skin` already powers both the OS `prefers-color-scheme` query and this toggle — no extra block needed. `"auto"` clears the attribute and follows the OS again. See it on the [Ledger demo](/ledger/).
 
+## Scoped styles — `scoped`
+
+A colocated `.skin` is **global** by default. Make its **first line** `scoped` and its selectors only ever match the component it ships with — so two components can both use `.card` without colliding. It's pure compile time: a path-derived id (e.g. `wd-7c21`) is stamped onto the HTML and appended to each selector.
+
+```skin
+scoped
+
+.card
+  padding 1.5rem
+  bg $panel
+```
+
+compiles to `.card[data-wd-scope="wd-7c21"] { … }`, and the component's markup is stamped `data-wd-scope="wd-7c21"`. You still write `class="card"` — no renaming, no runtime, **zero JS** on a static page. A page skin scopes the page body; an **include** skin scopes just that include's subtree wherever it's used.
+
+| In a `scoped` skin | Result |
+|---|---|
+| A selector rule | Scoped — attribute on the subject, before any `:hover`/`::before` |
+| `tokens` / `tokens dark` | **Global** on `:root` — `$vars` and dark mode keep working site-wide |
+| `:global(.toast)` (whole selector) | Opts back out — plain unscoped `.toast { … }` |
+| `page` / `*` / `html` / `body` / `::selection` | Compile error — page-level styles belong in a global skin |
+
+Honest limits this release: only **whole-selector** `:global()` (no `.card :global(.x)` yet), and an **unused** scoped selector **warns but is not removed** (a colocated `.js` may add the class). See the side-by-side [Scoped demo](/scoped/).
+
 ## Media — `:video`, `:audio`, `:embed`
 
 Three compile-time-only directives (they emit no `data-wd-*`, so a media page stays zero-JS):

package/site/pages/loops.skin

@@ -32,28 +32,65 @@ a
   color $accent
 
 button
-  border 1px solid $ink
-  bg $ink
+  display inline-flex
+  align-items center
+  justify-content center
+  gap .5rem
+  border 1px solid $accent
+  bg $accent
   color white
-  padding .72rem 1rem
+  padding .6rem 1.1rem
   margin .3rem .5rem .3rem 0
-  radius $radius
-  font inherit
+  radius 999px
+  font system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
+  font-size .92rem
+  font-weight 560
+  line-height 1.15
   cursor pointer
+  appearance none
+  box-shadow 0 1px 2px rgba(23,23,23,.08)
+  transition transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .14s ease, background .14s ease, border-color .14s ease
 
 button:hover
   bg $accent
   border-color $accent
+  transform translateY(-1px)
+  box-shadow 0 8px 18px -8px rgba(22,100,90,.5)
+
+button:active
+  transform translateY(0)
+  box-shadow 0 1px 2px rgba(23,23,23,.08)
+
+button:focus-visible
+  outline 2px solid $accent
+  outline-offset 2px
+
+button:disabled
+  opacity .5
+  cursor not-allowed
+  box-shadow none
+  transform none
 
 input
-  padding .7rem .9rem
+  padding .62rem .85rem
   border 1px solid $line
   radius $radius
   font inherit
+  font-size .95rem
   bg $panel
   width 100%
   max-width 360px
   margin 1rem 0
+  appearance none
+  transition border-color .14s ease, box-shadow .14s ease
+
+input:hover
+  border-color $accent
+
+input:focus-visible
+  outline none
+  border-color $accent
+  box-shadow 0 0 0 3px rgba(22,100,90,.18)
 
 ul
   border 1px solid $line