@zvndev/darkmown 1.4.0 → 2.0.0

package/site/pages/docs/index.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Darkmown docs
 description: Learn Darkmown routing, directives, state, loops, forms, and the static-to-reactive model.
 transitions: true
@@ -17,6 +18,40 @@ transitions: true
 Darkmown is a Markdown-native framework for mostly-static sites with tiny reactive islands. Pages are plain files: `.md` stays pure CommonMark, and `.wd` ("whateverdown") is the same Markdown plus first-party directives.
 </header>
 
+<nav class="docs-toc" aria-label="On this page">
+
+**On this page**
+
+- [Install](#install)
+- [The two formats](#the-two-formats)
+- [Routing rules](#routing-rules)
+- [Includes](#includes)
+- [Loops](#loops)
+- [Content collections](#content-collections)
+- [Interpolation](#interpolation)
+- [Frontmatter](#frontmatter)
+- [SEO & feeds](#seo--feeds)
+- [Drafts](#drafts)
+- [Instant navigation](#instant-navigation)
+- [Images](#images)
+- [Sections](#sections)
+- [Reactive directives](#reactive-directives)
+- [Fetching data](#fetching-data)
+- [Global state — `:store`](#global-state--store)
+- [Forms and persistence](#forms-and-persistence)
+- [Backends & deploy](#backends--deploy)
+- [Interactions](#interactions--slider-sortable-carousel)
+- [Theme toggle — `:theme`](#theme-toggle--theme)
+- [Scoped styles — `scoped`](#scoped-styles--scoped)
+- [Media directives](#media--video-audio-embed)
+- [Syntax highlighting](#syntax-highlighting)
+- [Trust boundary](#trust-boundary)
+- [Colocation](#colocation)
+- [Spec status](#spec-status)
+</nav>
+
+Every heading on every page gets a stable, GitHub-style `id` at build time (lowercased, punctuation stripped, duplicates deduped), so the links above — and deep links into any Darkmown page — are plain `#` anchors with zero JavaScript.
+
 @include ./-relative-note.wd
 
 ## Install
@@ -30,6 +65,10 @@ npm run dev
 
 Or add Darkmown to an existing project with `npm install -D @zvndev/darkmown`. The package is scoped; the command it installs is plain `darkmown`.
 
+For editing, a [VS Code extension](https://github.com/ZVN-DEV/darkmown/tree/master/editors/vscode) gives `.wd` and `.skin` files syntax highlighting, snippets, and folding — install it from a `.vsix` built out of the framework repo (see its `editors/vscode` README; a Marketplace listing is pending).
+
+`darkmown dev` rebuilds incrementally: it tracks which routes depend on each file (includes, colocated assets, loop data, collections), so editing one page or include recompiles only the routes it affects — and falls back to a full rebuild whenever a file is added, removed, or renamed. `routes.json`, the sitemap, and the RSS feed are regenerated on every rebuild, so they always describe the whole site.
+
 ## The two formats
 
 - `.md` is strict CommonMark. Directives, includes, and `{ bindings }` stay plain text, and the build prints a hint if it spots `.wd` syntax in a `.md` file.
@@ -54,7 +93,7 @@ Or add Darkmown to an existing project with `npm install -D @zvndev/darkmown`. T
 
 `@loop <things> into <thing>` is the only loop. The body is normal Markdown (or more directives) and repeats once per row:
 
-```wd
+```wd-fragment
 @loop /features.json into card
 @include /feature-card.wd
 @endloop
@@ -72,7 +111,7 @@ Loops nest, and `{ card.title }` style dotted paths reach into each row.
 
 Add `where <predicate>` to filter a loop. Conditions join with `and` / `or`:
 
-```wd
+```wd-fragment
 @loop /products.json into p where p.featured == true and p.price < 80
 - { p.name }
 @endloop
@@ -100,12 +139,22 @@ The predicate decides reactivity exactly like the source does: read only the row
 A `:button` inside a reactive loop can act on its own row — the basis for carts and to-do lists:
 
 ```wd
+:state products = [{"id": 1, "name": "Aurora", "price": 49}]
+:state cart = []
+
 @loop products into product
+::: card
+**{ product.name }** — ${ product.price }
 :button "Add to cart" -> cart += product
 :::
+@endloop
+
 @loop cart into line
+::: card
+{ line.name }
 :button "Remove" -> cart remove line
 :::
+@endloop
 ```
 
 `cart += product` appends a copy of the current row to another `:state` list; `cart remove line` removes the current row from the list being looped. Both are checked against the enclosing loop at compile time — no JavaScript.
@@ -114,7 +163,7 @@ A `:button` inside a reactive loop can act on its own row — the basis for cart
 
 Shape a loop with clauses in a fixed order after `into`: `where`, then `sort by`, `reverse`, `offset`, `limit`.
 
-```wd
+```wd-fragment
 @loop /posts.json into post sort by post.date desc limit 5
 { $number }. { post.title }
 @endloop
@@ -125,7 +174,7 @@ Shape a loop with clauses in a fixed order after `into`: `where`, then `sort by`
 
 Every row exposes meta variables — `{ $index }` (0-based), `{ $number }` (1-based), `{ $first }`, `{ $last }`, `{ $count }` — usable in interpolation and `:if`:
 
-```wd
+```wd-fragment
 @loop products into product
 :if $first
 **Top pick:**
@@ -138,7 +187,7 @@ Every row exposes meta variables — `{ $index }` (0-based), `{ $number }` (1-ba
 
 Add an `@empty` branch to render a fallback when the loop produces no rows (after filtering and slicing):
 
-```wd
+```wd-fragment
 @loop todos into todo
 - { todo.title }
 @empty
@@ -146,8 +195,57 @@ Nothing left to do.
 @endloop
 ```
 
+A **missing** in-scope source is an empty list, not an error — `@loop meta.tags into tag` on a page whose frontmatter omits `tags` (an optional field) loops zero rows and renders the `@empty` branch. A value that is present but not a list is still a compile error with the file and line.
+
 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-fragment
+@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-fragment
+@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 }`.
@@ -161,6 +259,8 @@ One syntax everywhere: `{ name }` or `{ name.path }`.
 
 Shape a value for display with a pipe: `{ price | money }`, `{ joinedAt | date:"medium" }`, `{ ratio | percent }`. Pipes chain (`{ name | trim | capitalize }`) and take literal arguments (`{ total | money:"EUR" }`, `{ bio | truncate:80 }`). The same syntax works on static values (folded at build time, zero-JS) and live bindings (re-applied on render).
 
+The value being piped must be **in scope** — a loop variable, `:state`/`:store`, an include argument, or `meta`. A bare literal like `{ 89 | money }` is not a name in scope, so it stays literal text (braces and all), exactly like any unresolved `{ … }`. A date-only value (`"2026-06-22"`) formats in UTC, so `date` prints the written calendar date on any build machine.
+
 The whitelist: `money`, `number`, `percent`, `round`, `date` / `time` / `datetime` (Intl-backed; `short` / `medium` / `long`), `upper` / `lower` / `capitalize`, `truncate:n` / `trim`, `pluralize:"item"`, and `default:"—"`. The five aggregates double as list pipes — `{ cart | count }`, `{ cart | sum:"price" | money }`, plus `avg` / `min` / `max`. No custom functions, nothing `eval`'d; an unknown pipe is a compile error. There is deliberately no relative "time ago" formatter, so builds stay reproducible.
 
 ## Frontmatter
@@ -176,6 +276,8 @@ tags: [sales, revenue, "q1, q2"]
 
 `{ meta.title }` prints a scalar and `{ meta.tags }` joins an array with `, `. You can loop a frontmatter array at build time — `@loop meta.tags into tag` — and the page stays static. Arrays are inline flow only (`[a, b]`); quoted items keep their commas.
 
+`lang:` sets the document language on `<html lang>` per page (`lang: fr`, `lang: pt-BR`, …); it defaults to `en`. Every page also ships a visually-hidden-until-focused **skip-to-content link** targeting the main landmark — your own `<main>` is reused (an existing `id` wins as the target; an id-less one gets `id="main"`), and a page without one is wrapped in `<main id="main">`. Restyle it via `.wd-skip-link` in a skin. All compile-time — static pages stay zero-JS.
+
 ## SEO & feeds
 
 `darkmown build` writes `sitemap.xml`, `rss.xml`, and `robots.txt` — all build-time, zero client JS. There's no config file: the **home page** frontmatter carries the site's identity. Add `site_url` (absolute origin, no trailing slash) and the sitemap and feed switch on, prefixed with that origin and titled with the home `title`/`description`.
@@ -264,7 +366,7 @@ The aggregate's field is a bare row key (`price`, not `item.price`).
 
 A condition reads the same predicate grammar as `.class when` — a bare path (truthy), or the comparisons `==` `!=` `<` `<=` `>` `>=` `contains`, joined with `and`, `or`, and `not`. (`@loop … where` is the comparison-only subset.) Chain with `:else if` (any number; a bare `:else` must come last):
 
-```wd
+```wd-fragment
 :if plan == "pro" or seats >= 5
 Pro plan
 :else if trialDays > 0 and not expired
@@ -280,7 +382,7 @@ A whole chain compiles to nested conditional regions, so it folds at build time
 
 A container class can react to state or the loop item. Static `.class` tokens stay as-is; add `when <predicate>` for a reactive one:
 
-```wd
+```wd-fragment
 @loop products into p
 ::: card .product .on-sale when p.price < 50
 **{ p.name }** — ${ p.price }
@@ -315,7 +417,7 @@ A `:button "Label" -> action` mutates one `:state` or `:store` value. The vocabu
 
 Values are literals — a `"string"`, number, `true`/`false`/`null`, or inline JSON. Targets may be dotted paths (`cart.count++`), and one button can run several actions separated by `;` (applied in order, rendered once):
 
-```wd
+```wd-fragment
 :button "Add to cart" -> cart.count++ ; cart.total += 9
 ```
 
@@ -341,6 +443,8 @@ No team members yet.
 :endif
 ```
 
+The lifecycle regions announce themselves to assistive tech: a bare `:if name_loading` compiles with `role="status" aria-live="polite"` and `:if name_error` with `role="alert"` — compile-time attributes, no extra runtime JS. Write your own `role`/`aria-live` inside a region and nothing is added.
+
 Options after the URL: `method=` (default `GET`), `when=load|visible`, `timeout=<ms>`, `retry=<N>`, `headers=<key>`, and `body=<key>` (the last two name a `:state`/`:store` key). A URL can interpolate state (`"/api/users/{ userId }"`) and re-fetches automatically when that state changes; trigger a reload by hand with `:button "Reload" -> team refetch`. Loop a sub-path of fetched data with a dotted source — `@loop team.members into member`. URLs must be relative, `http(s)://`, or a leading `{ state }` interpolation — other schemes are rejected at compile time.
 
 ### Authenticated requests
@@ -483,10 +587,10 @@ The framework ships a small default `$code-*` set, so highlighting looks right o
 Darkmown is a trusted-author site generator: you compile content you wrote, the way you trust your own source. Three things define that boundary.
 
 - **Compile only content you authored.** Don't run `.md`/`.wd` you didn't write — user-generated content, third-party docs — through the compiler without sanitizing it first.
-- **Raw HTML passes through by default.** Markdown renders with `html: true`, so raw HTML is emitted verbatim and there is no built-in sanitizer. Set `html: false` in a page's frontmatter to drop raw HTML for untrusted content.
+- **Raw HTML is escaped by default.** Markdown renders with `html: false`, so a stray `<script>` in content becomes inert text — safe for multi-author collections out of the box. Set `html: true` in a page's frontmatter to pass your own raw HTML through verbatim; there is no built-in sanitizer, so keep it off pages with content you didn't write.
 - **`:fetch` and `:form action=` have no host allowlist, and reactive pages need `unsafe-eval`.** Fetch/form URLs come straight from the page source — the compiler rejects non-http(s) schemes but does not restrict which hosts you call, so SSRF/exfiltration protection is the author's responsibility. The runtime compiles `:computed` / `@loop … where` / `.class when` expressions via `new Function`, so a reactive page needs `script-src 'unsafe-eval'` in your CSP. Static pages need neither.
 
-See [SECURITY.md](https://github.com/ZVN-DEV/darkmown/blob/main/SECURITY.md) in the package for the full security model.
+See [SECURITY.md](https://github.com/ZVN-DEV/darkmown/blob/master/SECURITY.md) in the package for the full security model.
 
 ## Colocation
 
@@ -497,7 +601,7 @@ See [SECURITY.md](https://github.com/ZVN-DEV/darkmown/blob/main/SECURITY.md) in
 
 ## Spec status
 
-The implementation is faithful to the original core thesis: Markdown-first authoring, no component ceremony, zero runtime on static pages, and tiny direct-DOM reactivity only when declared. `:store`, the full `:fetch` lifecycle (loading/error/empty states, dynamic URLs, `refetch`, dotted loop sources, authenticated `headers=` + `refresh=` token renewal), `:form` (including server round-trips), loop ergonomics (`sort by`/`limit`/`offset`/`reverse`/`@empty` and `$index`/`$number`/`$first`/`$last`/`$count`), `:if … :else if … :else`, reactive `.class when …`, `:effect`, `:computed`, and `persist` are all shipped and live — try them on the [Data & Forms page](/data/) and the [Reactive page](/reactive/). Still on the roadmap: a first-party server runtime (`site/api/`) and HTML-fragment swaps. See `docs/spec-alignment.md` in the package for the full audit.
+The implementation is faithful to the original core thesis: Markdown-first authoring, no component ceremony, zero runtime on static pages, and tiny direct-DOM reactivity only when declared. `:store`, the full `:fetch` lifecycle (loading/error/empty states, dynamic URLs, `refetch`, dotted loop sources, authenticated `headers=` + `refresh=` token renewal), `:form` (including server round-trips), loop ergonomics (`sort by`/`limit`/`offset`/`reverse`/`@empty` and `$index`/`$number`/`$first`/`$last`/`$count`), `:if … :else if … :else`, reactive `.class when …`, `:effect`, `:computed`, and `persist` are all shipped and live — try them on the [Data & Forms page](/data/) and the [Reactive page](/reactive/). Still on the roadmap: HTML-fragment `swap` semantics and cart server sync. (The serverless `api/` model already shipped in 1.2.0 — see [Backends & deploy](#backends--deploy) above; a `.wd` backend DSL remains a deliberate non-goal.) See `docs/spec-alignment.md` in the package for the full audit.
 
 See these directives composed into real apps on the [showcase](/showcase/).
 

package/site/pages/folio/-style.wd

@@ -1,3 +1,7 @@
+---
+html: true
+---
+
 <!-- Folio — shared style carrier.
 
      Both the catalog (/folio/) and the cart (/folio/cart/) `@include ./style.wd`

package/site/pages/folio/cart.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Folio — your basket
 description: The Folio checkout. The same :store cart shared with the catalog, a per-row remove, and a form that round-trips to a server — all written in Markdown.
 image: https://darkmown.com/__wd/media/og-folio.png

package/site/pages/folio/index.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Folio — a boutique storefront
 description: A multi-page store written in pure Markdown. The cart persists across pages, reloads, and browser tabs; navigation is instant. No framework JavaScript written by hand.
 image: https://darkmown.com/__wd/media/og-folio.png

package/site/pages/forge/index.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Forge your plan — a live pricing configurator in Markdown
 description: Build your plan, toggle features, adjust the seat count, and watch the price, savings, and upsell hints update instantly. A classic "this needs React" interaction — written as one Markdown file with a reactive :computed pricing engine.
 image: https://darkmown.com/__wd/media/og-forge.png

package/site/pages/highlight/index.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Syntax highlighting — code that dark-modes for free
 description: Build-time syntax highlighting in plain Markdown. Fenced code blocks highlight at compile time (zero client JS) and recolor with your theme through the same tokens dark / :theme system — flip the toggle and watch every language recolor at once.
 image: https://darkmown.com/__wd/media/og-showcase.png

package/site/pages/index.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Darkmown — Markdown that runs, not Markdown that needs React
 description: A live store widget — search filter, add-to-cart, running total — written as one Markdown file that runs. The same outcome in Markdoc needs a React component, hydration, and a build step. Compare them side by side.
 image: https://darkmown.com/__wd/media/og.png

package/site/pages/interactions/index.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Interactions — sliders, drag & carousels in Markdown
 description: :slider, :sortable, and :carousel — rich interactions that compile to tiny pay-for-what-you-use modules, declared in plain Markdown. Sliders ship zero JS; sortable and carousel each load one small module, only on the pages that use them.
 image: https://darkmown.com/__wd/media/og-showcase.png

package/site/pages/ledger/index.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Ledger — a sortable expense table in Markdown
 description: A real data table written as one Markdown file — clickable-header sorting, a live filter, running totals, and a light/dark toggle. Format pipes (| money, | date), aggregates (sum, avg, max), reactive sort, and :theme — all declarative, no hand-written JavaScript.
 image: https://darkmown.com/__wd/media/og-showcase.png

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

package/site/pages/loops.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Loop ergonomics
 transitions: true
 ---

package/site/pages/media/index.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Media — video, audio, and embeds in Markdown
 description: Three one-line directives — :video, :audio, :embed — compile to hardened, accessible, privacy-friendly players. No framework JavaScript ships: a media page stays zero-JS, just like static Markdown.
 image: https://darkmown.com/__wd/media/og-showcase.png

package/site/pages/pulse/index.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Pulse — service status
 description: A calm, dark observability panel built in one Markdown file — a live :fetch board, build-time rollups, and a keyed services table, all with zero hand-written JavaScript.
 image: https://darkmown.com/__wd/media/og-pulse.png

package/site/pages/reactive.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
@@ -89,4 +115,10 @@ ul
   bg transparent
   color $warm
   border 1px solid $line
-  padding .35rem .8rem
+  padding .4rem .9rem
+  box-shadow none
+
+.card.line button:hover
+  bg $warm
+  border-color $warm
+  color white

package/site/pages/reactive.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Reactive Markdown
 transitions: true
 ---

package/site/pages/scoped/index.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Scoped styles — same class name, zero collision
 description: Two components reuse the class name .card and never clash. Compile-time scoped styles stamp each component's subtree with a path-derived id and rewrite its skin's selectors to match only there. Zero runtime JS — a static page stays static.
 transitions: true

package/site/pages/showcase/index.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Showcase — real apps built in Markdown
 description: Five complete, beautiful apps — a storefront, a live dashboard, a pricing configurator, a product-finder quiz, and a sortable expense ledger — each one a readable Markdown file. See the app, then view its source.
 image: https://darkmown.com/__wd/media/og-showcase.png

package/site/pages/store.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)
 
 #shop
   border 1px solid $line

package/site/pages/store.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Global store
 transitions: true
 ---

package/site/pages/theme.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Dark-mode tokens
 transitions: true
 ---