@zvndev/darkmown 1.4.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zvndev/darkmown",
-  "version": "1.4.0",
+  "version": "2.0.0",
   "private": false,
   "publishConfig": {
     "access": "public"

package/site/_/base.skin

@@ -37,6 +37,13 @@ tokens
   radius 12px
   radius-sm 8px
   radius-lg 20px
+  field-bg #ffffff
+  field-line #d9d2c4
+  field-line-strong #c4baa8
+  control-shadow 0 1px 2px rgba(28,24,20,.06)
+  control-shadow-hover 0 6px 18px -8px rgba(28,24,20,.45)
+  accent-press #094339
+  on-accent #ffffff
 
 tokens dark
   ink #ece6db
@@ -66,6 +73,13 @@ tokens dark
   code-number #f2bb8a
   code-punctuation #b6c2bc
   ring #5ccab4
+  field-bg #1a1612
+  field-line #38301f
+  field-line-strong #4a3f2c
+  control-shadow 0 1px 2px rgba(0,0,0,.4)
+  control-shadow-hover 0 8px 22px -10px rgba(0,0,0,.7)
+  accent-press #b6ecdc
+  on-accent #0c1310
 
 /* ── Reset & base ───────────────────────────────────────────────── */
 
@@ -156,45 +170,242 @@ main
   color $accent
   margin 0 0 .35rem
 
-/* ── Buttons ────────────────────────────────────────────────────── */
-
-.btn
+/* ── Buttons ────────────────────────────────────────────────────────
+   Two ways to get a button, ONE consistent look:
+   1. The `.btn` class (for link-styled buttons: <a class="btn">).
+   2. A bare <button> — what the `:button`/`:submit` directives emit with
+      no class. Both share the same sizing, states, and tokens so a demo,
+      a scaffold, or a docs page looks designed without per-page styling.
+   The bare-button default is the ACCENT (filled) treatment, because a
+   directive button is almost always the page's primary action. Opt down
+   to a quieter look with class="secondary" / class="ghost".
+   ─────────────────────────────────────────────────────────────────── */
+
+/* Shared geometry + motion for every button-shaped thing. One-line comma
+   selector (multi-line comma lists silently drop all but the last). */
+.btn, button, button[data-wd-action], button[data-wd-actions], [type=submit], [type=button], [type=reset]
   display inline-flex
   align-items center
+  justify-content center
   gap .5rem
   margin .4rem .5rem .4rem 0
-  padding .7rem 1.15rem
-  font-size .95rem
-  font-weight 550
-  line-height 1
+  padding .62rem 1.15rem
+  font-family system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
+  font-size .94rem
+  font-weight 560
+  line-height 1.15
+  letter-spacing -.005em
   color $ink
   bg $panel
   border 1px solid $line
   radius 999px
   text-decoration none
   cursor pointer
-  transition transform .12s ease, box-shadow .12s ease, background .12s ease
-
-.btn:hover
-  transform translateY(-1px)
-  box-shadow 0 6px 18px -8px rgba(28,24,20,.35)
+  -webkit-appearance none
+  appearance none
+  transition transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .14s ease, background .14s ease, border-color .14s ease, color .14s ease
 
-.btn.primary
+/* The filled accent default — applies to bare directive buttons and to
+   the opt-in `.btn.primary` / `.btn.warm` link variants. One-line list. */
+button, button[data-wd-action], button[data-wd-actions], [type=submit], .btn.primary
   bg $accent
-  color #fff
+  color $on-accent
   border-color $accent
+  box-shadow $control-shadow
 
-.btn.primary:hover
+button:hover, button[data-wd-action]:hover, button[data-wd-actions]:hover, [type=submit]:hover, .btn.primary:hover
   bg $accent-deep
-  color #fff
+  border-color $accent-deep
+  color $on-accent
+  transform translateY(-1px)
+  box-shadow $control-shadow-hover
+
+button:active, button[data-wd-action]:active, button[data-wd-actions]:active, [type=submit]:active, .btn.primary:active
+  bg $accent-press
+  border-color $accent-press
+  transform translateY(0)
+  box-shadow $control-shadow
+
+/* Visible keyboard focus on every interactive control — accessibility. */
+.btn:focus-visible, button:focus-visible, [type=submit]:focus-visible, [type=button]:focus-visible, [type=reset]:focus-visible
+  outline 2px solid $ring
+  outline-offset 2px
+
+/* Skip-to-content link (emitted by the page shell) — themed reveal on focus. */
+.wd-skip-link:focus
+  bg $accent
+  color $on-accent
+  border-radius 0 0 $radius-sm 0
+  outline 2px solid $ring
+  outline-offset 2px
+
+button:disabled, [type=submit]:disabled, .btn[aria-disabled=true], [type=button]:disabled
+  opacity .5
+  cursor not-allowed
+  box-shadow none
+  transform none
+
+/* Quieter, neutral button — a secondary/cancel action. One-line list. */
+.btn, button.secondary, button.ghost, .btn.secondary, .btn.ghost
+  bg $panel
+  color $ink
+  border-color $line
+
+.btn:hover
+  transform translateY(-1px)
+  box-shadow $control-shadow-hover
+
+button.secondary:hover, .btn.secondary:hover
+  bg $sunk
+  border-color $line
+  color $ink
+  transform translateY(-1px)
+  box-shadow $control-shadow-hover
+
+button.ghost, .btn.ghost
+  bg transparent
+  border-color transparent
+  box-shadow none
+
+button.ghost:hover, .btn.ghost:hover
+  bg $sunk
+  box-shadow none
+  transform none
 
 .btn.warm
   bg $warm
   color #fff
   border-color $warm
 
-.btn.ghost
-  bg transparent
+.btn.warm:hover
+  bg $warm
+  color #fff
+
+/* ── Form controls ──────────────────────────────────────────────────
+   `:input`/`:bind`/`:textarea`/`:select` emit bare <input>/<textarea>/
+   <select> — style them here so forms look designed by default. ─────── */
+
+input, textarea, select
+  font-family system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
+  font-size .95rem
+  line-height 1.4
+  color $ink
+  bg $field-bg
+  border 1px solid $field-line
+  radius $radius-sm
+  padding .58rem .8rem
+  margin .35rem 0
+  width 100%
+  max-width 28rem
+  -webkit-appearance none
+  appearance none
+  transition border-color .14s ease, box-shadow .14s ease, background .14s ease
+
+input::placeholder, textarea::placeholder
+  color $faint
+
+input:hover, textarea:hover, select:hover
+  border-color $field-line-strong
+
+input:focus-visible, textarea:focus-visible, select:focus-visible
+  outline none
+  border-color $accent
+  box-shadow 0 0 0 3px $accent-soft
+
+input:disabled, textarea:disabled, select:disabled
+  opacity .55
+  cursor not-allowed
+  bg $sunk
+
+textarea
+  min-height 6.5rem
+  resize vertical
+
+/* Native select chevron (the appearance reset hides the default arrow). */
+select
+  background-image url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23756a5d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
+  background-repeat no-repeat
+  background-position right .75rem center
+  padding-right 2.25rem
+  cursor pointer
+
+/* Checkbox / radio — accent-tinted, comfortable hit target. The directive
+   emits <label><input type=checkbox|radio> Text</label> in .wd-checkboxes /
+   .wd-radios groups. One-line comma list. */
+.wd-checkboxes, .wd-radios
+  display flex
+  flex-direction column
+  gap .55rem
+  margin .5rem 0
+
+.wd-checkboxes label, .wd-radios label
+  display flex
+  align-items center
+  gap .55rem
+  cursor pointer
+
+[type=checkbox], [type=radio]
+  width 1.1rem
+  height 1.1rem
+  min-width 1.1rem
+  margin 0
+  max-width none
+  padding 0
+  accent-color $accent
+  cursor pointer
+
+[type=checkbox]:focus-visible, [type=radio]:focus-visible
+  outline 2px solid $ring
+  outline-offset 2px
+
+label
+  font-size .95rem
+  color $ink-soft
+
+/* The range slider (`:slider`) — tint the track to the brand accent. */
+[type=range]
+  accent-color $accent
+  cursor pointer
+  padding 0
+
+/* Framework control buttons (`:carousel` injects these at runtime). They
+   must NOT inherit the big accent pill above — reset them to a compact,
+   neutral round control. Page skins can still override. One-line lists. */
+.wd-carousel-prev, .wd-carousel-next
+  width 2.25rem
+  height 2.25rem
+  padding 0
+  margin 0
+  bg $panel
+  color $ink
+  border 1px solid $line
+  radius 999px
+  box-shadow $control-shadow
+
+.wd-carousel-prev:hover, .wd-carousel-next:hover
+  bg $panel
+  border-color $accent
+  color $accent
+  transform none
+  box-shadow $control-shadow-hover
+
+.wd-carousel-dot
+  width .6rem
+  height .6rem
+  padding 0
+  margin 0
+  border 0
+  radius 999px
+  bg $line
+  box-shadow none
+
+.wd-carousel-dot:hover
+  bg $faint
+  transform none
+  box-shadow none
+
+.wd-carousel-dot[aria-current=true]
+  bg $accent
 
 /* ── Cards & surfaces ───────────────────────────────────────────── */
 
@@ -359,6 +570,16 @@ blockquote
   margin 0
   radius 0
 
+/* ── Motion preference ──────────────────────────────────────────────
+   Honour users who ask for less motion: drop the button lift/transition.
+   (@media must be indented in a .skin — its rules wrap automatically.) ── */
+
+@media (prefers-reduced-motion: reduce)
+  .btn, button, [type=submit], [type=button], input, textarea, select
+    transition none
+  .btn:hover, button:hover, [type=submit]:hover
+    transform none
+
 /* ── Footer ─────────────────────────────────────────────────────── */
 
 .sitefooter

package/site/_/base.wd

@@ -1,3 +1,7 @@
+---
+html: true
+---
+
 <!-- Shared design-system carrier. Including this file injects base.skin (the
      refreshed Darkmown brand foundation: tokens, typography, components, dark
      mode) into the page. It renders no markup of its own. Pair with /nav.wd at

package/site/_/feature-card.wd

@@ -1,3 +1,7 @@
+---
+html: true
+---
+
 <section class="feature-card">
 
 **{ card.title }**

package/site/_/footer.wd

@@ -1,3 +1,7 @@
+---
+html: true
+---
+
 <footer class="sitefooter">
   <div class="foot-inner">
     <div>

package/site/_/nav.wd

@@ -1,11 +1,15 @@
+---
+html: true
+---
+
 <nav class="topnav">
   <a class="brand" href="/">Darkmown</a>
   <span class="nav-links">
     <a href="/docs/">Docs</a>
+    <a href="/blog/">Blog</a>
     <a href="/showcase/">Showcase</a>
     <a href="/reactive/">Reactive</a>
     <a href="/data/">Data</a>
-    <a href="/highlight/">Highlight</a>
   </span>
   <a class="nav-gh" href="https://github.com/ZVN-DEV/darkmown">GitHub ↗</a>
 </nav>

package/site/_/scoped-promo.wd

@@ -1,3 +1,7 @@
+---
+html: true
+---
+
 <!-- Scoped component A. Its colocated scoped-promo.skin opts into scoping, so the
      `.card` here gets its OWN look — a warm, accent-bordered promo — without
      clashing with the identically-named `.card` in scoped-stat.wd. handleInclude

package/site/_/scoped-stat.wd

@@ -1,3 +1,7 @@
+---
+html: true
+---
+
 <!-- Scoped component B. Reuses the SAME class names as scoped-promo.wd
      (.card / .title / .body) but its colocated scoped-stat.skin scopes them to a
      dark, centered stat tile. Proof the leak is gone: two `.card` definitions on

package/site/pages/404.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: Page not found — Darkmown
 description: That route does not exist. Head back to the Darkmown homepage.
 ---

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/app.wd

@@ -1,4 +1,5 @@
 ---
+html: true
 title: A live app in one Markdown file
 description: One .wd file — static prose, fetched data, looped results with nested conditionals, a persistent counter, and a form that round-trips to a real server. No JavaScript written, no components, no build config.
 ---

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/collections-and-pagination.skin

@@ -0,0 +1,127 @@
+/* Colocated post styling — a .skin next to a .md attaches automatically, so
+   these prose pages stay static (zero JS) yet still read on-brand. A .md can't
+   @include /base.wd, so this reading skin carries the site's tokens itself.
+   Kept in sync with site/_/base.skin; copy it beside each new post. */
+
+tokens
+  ink #1c1814
+  ink-soft #4b4239
+  muted #756a5d
+  paper #faf8f3
+  panel #ffffff
+  sunk #efe9dc
+  line #e7e1d4
+  accent #0f6b5e
+  accent-deep #0a4f45
+  accent-soft #e3f0ec
+  code-bg #1b2420
+  code-ink #e9efe7
+  code-line #2c3b34
+  radius 12px
+
+tokens dark
+  ink #ece6db
+  ink-soft #c3bbab
+  muted #9a9081
+  paper #14110d
+  panel #1e1913
+  sunk #221d17
+  line #2f281f
+  accent #5ccab4
+  accent-deep #8fe0cf
+  accent-soft #16302a
+  code-bg #100d0a
+  code-ink #e4ebe2
+  code-line #2a231b
+
+html
+  bg $paper
+
+page
+  max-width 720px
+  margin 0 auto
+  padding 3rem 1.5rem 5rem
+  font-family ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, Cambria, serif
+  font-size 18px
+  line-height 1.7
+  color $ink
+  bg $paper
+  -webkit-font-smoothing antialiased
+  text-rendering optimizeLegibility
+
+h1
+  font-size clamp(2rem, 5vw, 2.8rem)
+  line-height 1.12
+  letter-spacing -.022em
+  margin 1rem 0 1.25rem
+  color $ink
+
+h2
+  font-size 1.5rem
+  line-height 1.2
+  letter-spacing -.012em
+  margin 2.4rem 0 .6rem
+  color $ink
+
+h3
+  font-size 1.2rem
+  margin 1.8rem 0 .4rem
+  color $ink
+
+p
+  margin 1.1rem 0
+
+a
+  color $accent
+  text-underline-offset 2px
+
+a:hover
+  color $accent-deep
+
+strong
+  font-weight 650
+  color $ink
+
+hr
+  border 0
+  border-top 1px solid $line
+  margin 2.5rem 0
+
+ul, ol
+  margin 1.1rem 0
+  padding-left 1.4rem
+
+li
+  margin .35rem 0
+
+code
+  font-family ui-monospace, "SF Mono", Menlo, Consolas, monospace
+  font-size .88em
+  bg $sunk
+  color $accent-deep
+  padding .12rem .36rem
+  radius 6px
+
+pre
+  bg $code-bg
+  color $code-ink
+  padding 1.2rem 1.35rem
+  margin 1.5rem 0
+  radius $radius
+  overflow-x auto
+  line-height 1.62
+  font-size .87rem
+  box-shadow inset 0 0 0 1px $code-line
+
+pre code
+  bg transparent
+  color inherit
+  padding 0
+  font-size 1em
+
+blockquote
+  margin 1.6rem 0
+  padding .6rem 1.3rem
+  border-left 3px solid $accent
+  color $ink-soft
+  font-style italic

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