@zvndev/darkmown 0.20.0 → 1.0.0

package/site/pages/compass/index.skin

@@ -0,0 +1,247 @@
+/* ===================================================================
+   Compass — a guided product-finder quiz.
+   Identity: playful & warm. A big friendly rounded card centered on a
+   soft gradient backdrop, large question type, satisfying pill answers,
+   a celebratory result. Distinct accent ($brand, warm amber) scoped to
+   .app-compass so it never leaks into the shared design system. Inherits
+   tokens + components from base.skin; dark overrides verified below.
+   =================================================================== */
+
+.app-compass
+  --brand #e0894a
+  --brand-deep #c46f33
+  --brand-soft #fbeede
+  --glow-1 #fcefe0
+  --glow-2 #f6e7f1
+  --glow-3 #f9f4ea
+
+@media (prefers-color-scheme: dark)
+  .app-compass
+    --brand #f0a868
+    --brand-deep #f6c08c
+    --brand-soft #2e2014
+    --glow-1 #1b1610
+    --glow-2 #181219
+    --glow-3 #14110d
+
+/* ── The stage: a soft gradient backdrop, card floated dead center ──── */
+
+.app-compass
+  max-width 100%
+  padding 0
+
+.compass-stage
+  min-height calc(100vh - 60px)
+  display flex
+  align-items center
+  justify-content center
+  padding 3rem 1.25rem 4rem
+  background radial-gradient(120% 90% at 15% 0%, var(--glow-1) 0%, transparent 55%), radial-gradient(110% 90% at 95% 10%, var(--glow-2) 0%, transparent 50%), radial-gradient(140% 120% at 50% 110%, var(--glow-3) 0%, transparent 60%)
+
+/* ── The card ───────────────────────────────────────────────────────── */
+
+.compass-card
+  width 100%
+  max-width 560px
+  background $panel
+  border 1px solid $line
+  border-radius 28px
+  padding 2.75rem 2.5rem 2.5rem
+  box-shadow 0 1px 0 rgba(255,255,255,.6) inset, 0 24px 60px -28px rgba(28,24,20,.45), 0 8px 22px -16px rgba(28,24,20,.3)
+  text-align center
+
+@media (prefers-color-scheme: dark)
+  .compass-card
+    box-shadow 0 1px 0 rgba(255,255,255,.04) inset, 0 28px 70px -30px rgba(0,0,0,.7)
+
+@media (max-width: 540px)
+  .compass-card
+    padding 2rem 1.4rem 1.75rem
+    border-radius 22px
+
+/* ── Top: eyebrow + progress rail ───────────────────────────────────── */
+
+.compass-top
+  margin-bottom 2rem
+
+.compass-eyebrow
+  display inline-block
+  text-transform uppercase
+  letter-spacing .16em
+  font-size .72rem
+  font-weight 700
+  color var(--brand-deep)
+  margin 0 0 1rem
+
+.compass-eyebrow.is-result
+  color var(--brand-deep)
+
+.compass-rail
+  position relative
+  height 8px
+  border-radius 999px
+  background $sunk
+  overflow hidden
+
+.compass-rail::after
+  content ""
+  position absolute
+  inset 0
+  width 25%
+  border-radius 999px
+  background linear-gradient(90deg, var(--brand) 0%, var(--brand-deep) 100%)
+  transition width .45s cubic-bezier(.34, 1.56, .64, 1)
+
+.compass-rail.at-1::after
+  width 25%
+
+.compass-rail.at-2::after
+  width 50%
+
+.compass-rail.at-3::after
+  width 75%
+
+.compass-rail.at-4::after
+  width 100%
+
+/* ── The question ───────────────────────────────────────────────────── */
+
+.compass-card h2
+  font-size clamp(1.7rem, 5vw, 2.3rem)
+  line-height 1.12
+  letter-spacing -.02em
+  margin .2rem 0 0
+
+.compass-lead
+  color $muted
+  font-size 1.02rem
+  margin .85rem auto 0
+  max-width 38ch
+
+/* ── Answers: big satisfying pills ──────────────────────────────────── */
+
+.compass-answers
+  display flex
+  flex-direction column
+  gap .7rem
+  margin 1.9rem 0 0
+
+.compass-answers button
+  display block
+  width 100%
+  margin 0
+  padding 1.05rem 1.3rem
+  font-family system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
+  font-size 1.05rem
+  font-weight 550
+  line-height 1.3
+  text-align left
+  color $ink
+  background $paper-2
+  border 1.5px solid $line
+  border-radius 16px
+  cursor pointer
+  transition transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .14s ease, border-color .14s ease, background .14s ease
+
+.compass-answers button:hover
+  transform translateY(-2px)
+  border-color var(--brand)
+  background var(--brand-soft)
+  box-shadow 0 12px 26px -16px rgba(196,111,51,.55)
+
+.compass-answers button:active
+  transform translateY(0) scale(.985)
+
+.compass-answers button:focus-visible
+  outline 3px solid var(--brand)
+  outline-offset 2px
+
+/* ── Result: a result that feels earned ─────────────────────────────── */
+
+.compass-result
+  padding .4rem 0 .2rem
+
+.compass-burst
+  font-size 3.4rem
+  line-height 1
+  margin 0 0 .4rem
+  animation pop .55s cubic-bezier(.34,1.56,.64,1) both
+
+.compass-result h1
+  font-size clamp(2rem, 7vw, 2.9rem)
+  line-height 1.05
+  letter-spacing -.025em
+  margin .15rem 0 0
+  background linear-gradient(100deg, var(--brand-deep), var(--brand))
+  -webkit-background-clip text
+  background-clip text
+  color transparent
+
+.compass-why
+  color $ink-soft
+  font-size 1.06rem
+  line-height 1.6
+  margin 1rem auto 0
+  max-width 40ch
+
+.compass-why strong
+  color var(--brand-deep)
+
+/* ── CTA: the styled shop link ──────────────────────────────────────── */
+
+.compass-cta
+  display inline-flex
+  align-items center
+  gap .45rem
+  margin 1.7rem 0 0
+  padding .95rem 1.7rem
+  font-family system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
+  font-size 1.02rem
+  font-weight 650
+  color #fff
+  text-decoration none
+  background linear-gradient(100deg, var(--brand) 0%, var(--brand-deep) 100%)
+  border-radius 999px
+  box-shadow 0 14px 30px -12px rgba(196,111,51,.6)
+  transition transform .14s ease, box-shadow .14s ease
+
+.compass-cta:hover
+  color #fff
+  transform translateY(-2px)
+  box-shadow 0 20px 38px -14px rgba(196,111,51,.7)
+
+.compass-cta:focus-visible
+  outline 3px solid var(--brand-deep)
+  outline-offset 3px
+
+/* ── Start over ─────────────────────────────────────────────────────── */
+
+.compass-restart
+  margin 1.7rem 0 0
+
+.compass-restart button
+  margin 0
+  padding .55rem 1.1rem
+  font-family system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
+  font-size .9rem
+  font-weight 550
+  color $muted
+  background transparent
+  border 1.5px solid $line
+  border-radius 999px
+  cursor pointer
+  transition color .14s ease, border-color .14s ease
+
+.compass-restart button:hover
+  color var(--brand-deep)
+  border-color var(--brand)
+
+.compass-restart button:focus-visible
+  outline 3px solid var(--brand)
+  outline-offset 2px
+
+/* ── Source reveal sits below the card, full-width-ish, calm ────────── */
+
+.app-compass .source-reveal
+  max-width 560px
+  margin 1.75rem auto 0

package/site/pages/compass/index.wd

@@ -0,0 +1,194 @@
+---
+title: Compass — find your match
+description: A guided product-finder quiz built in one Markdown file. Four questions advance a state machine with :if branching, accumulate scores with :button actions, and a :computed recommendation lands the perfect pick. Zero hand-written JavaScript.
+image: https://darkmown.com/__wd/media/og-compass.png
+transitions: true
+---
+
+@include /nav.wd
+@include /base.wd
+
+<style>@keyframes pop { 0% { transform: scale(0) rotate(-18deg); opacity: 0 } 100% { transform: scale(1) rotate(0); opacity: 1 } }</style>
+
+<main class="app-compass">
+
+:state step = 1
+:state calm = 0
+:state bold = 0
+:state budget = 0
+
+::: section #quiz .compass-stage
+
+::: compass-card .compass-card
+
+:if step <= 4
+
+::: compass-top .compass-top
+
+::: eyebrow .compass-eyebrow
+Question { step } of 4
+:::
+
+::: compass-rail .compass-rail .at-1 when step == 1 .at-2 when step == 2 .at-3 when step == 3 .at-4 when step == 4
+:::
+
+:::
+
+:endif
+
+:if step == 1
+
+## Where should it live?
+
+::: lead .compass-lead
+Picture the spot you'd reach for it most. That tells us a lot.
+:::
+
+::: answers .compass-answers
+:button "🛋️  A cozy nook to unwind" -> calm += 2; step++
+:button "🎉  The room where people gather" -> bold += 2; step++
+:button "🧺  Wherever — it should just be useful" -> budget += 2; step++
+:::
+
+:else if step == 2
+
+## What's the mood you're after?
+
+::: lead .compass-lead
+No wrong answers. Go with your gut.
+:::
+
+::: answers .compass-answers
+:button "🌙  Soft, calm, a little dreamy" -> calm += 2; step++
+:button "⚡  Lively, bold, turn it up" -> bold += 2; step++
+:button "🧘  Fresh and easy — no fuss" -> calm += 1; budget += 1; step++
+:::
+
+:else if step == 3
+
+## How does it earn its keep?
+
+::: lead .compass-lead
+The thing it has to nail before anything else.
+:::
+
+::: answers .compass-answers
+:button "✨  It sets the whole vibe" -> calm += 2; step++
+:button "🔊  It fills the room" -> bold += 2; step++
+:button "💧  It quietly makes the day nicer" -> calm += 1; budget += 1; step++
+:::
+
+:else if step == 4
+
+## And the budget?
+
+::: lead .compass-lead
+Last one — then we'll find your match.
+:::
+
+::: answers .compass-answers
+:button "🌱  Keep it gentle" -> budget += 3; step++
+:button "⚖️  A fair middle" -> budget += 1; step++
+:button "💎  Splurge for the right one" -> bold += 2; step++
+:::
+
+:else
+
+::: result .compass-result
+
+::: burst .compass-burst
+🎉
+:::
+
+::: eyebrow .compass-eyebrow .is-result
+Your match
+:::
+
+:if bold > calm and bold > budget
+
+# The Cove Speaker
+
+::: why .compass-why
+You're here to fill the room. The **Cove Speaker** throws warm, room-filling 360° sound out of a palm-sized shell — the heart of every gathering, turned all the way up.
+:::
+
+[Shop this →](/folio/){.compass-cta}
+
+:else if calm > bold and calm > budget
+
+# The Aurora Lamp
+
+::: why .compass-why
+You want a space that *feels* like something. The **Aurora Lamp** pours a warm, dimmable glow from a hand-turned oak base — the quiet centerpiece of your cozy nook.
+:::
+
+[Shop this →](/folio/){.compass-cta}
+
+:else if budget > calm and budget > bold
+
+# The Haven Diffuser
+
+::: why .compass-why
+You like things that quietly make the day nicer — without the splurge. The **Haven Diffuser** breathes a soft cedar-scented mist into the room, refillable and easy to love.
+:::
+
+[Shop this →](/folio/){.compass-cta}
+
+:else
+
+# The Isle Earbuds
+
+::: why .compass-why
+You're a little of everything — calm, bold, and practical. The **Isle Earbuds** go anywhere you do: active noise cancelling, a 30-hour case, and tap controls for whatever the day brings.
+:::
+
+[Shop this →](/folio/){.compass-cta}
+
+:endif
+
+::: restart .compass-restart
+:button "↺  Start over" -> step reset; calm reset; bold reset; budget reset
+:::
+
+:::
+
+:endif
+
+:::
+
+:::
+
+<details class="source-reveal">
+<summary>View source — it's Markdown</summary>
+
+```wd
+:state step = 1
+:state calm = 0
+:state bold = 0
+:state budget = 0
+
+:if step <= 4
+Question { step } of 4
+:endif
+
+:if step == 1
+## Where should it live?
+:button "🛋️  A cozy nook to unwind" -> calm += 2; step++
+:button "🎉  The room where people gather" -> bold += 2; step++
+:else if step == 2
+## What's the mood you're after?
+:button "🌙  Soft, calm, a little dreamy" -> calm += 2; step++
+... three more questions ...
+:else
+:if bold > calm and bold > budget
+# The Cove Speaker
+:else if calm > bold and calm > budget
+# The Aurora Lamp
+:endif
+:button "↺  Start over" -> step reset; calm reset; bold reset; budget reset
+:endif
+```
+
+</details>
+
+</main>

package/site/pages/docs/index.skin

@@ -1,39 +1,59 @@
-tokens
-  ink #171717
-  paper #fbfaf7
-  panel #ffffff
-  line #dedbd3
-  accent #16645a
-  muted #666158
-  radius 8px
-
-page
-  margin 0
-  font ui-serif, Georgia, Cambria, serif
-  color $ink
-  bg $paper
-  line-height 1.7
+/* Docs — layers on /base.wd (tokens, type, code, dark mode). Refined,
+   readable single-column reference. Only docs-specific layout here. */
 
-main
-  max-width 820px
-  margin 0 auto
-  padding 3rem 2rem 5rem
+main.docs
+  max-width 760px
 
-h1
-  font-size 3rem
-  line-height 1
-  margin 1rem 0
+.docs-hero
+  padding 2rem 0 1.5rem
+  margin-bottom 1rem
+  border-bottom 1px solid $line
+
+.docs-hero h1
+  margin .2rem 0 .5rem
+
+.docs-hero p
+  font-size 1.12rem
+  color $ink-soft
+  max-width 60ch
 
-h2
-  margin-top 2.4rem
-  padding-top 1.2rem
+/* Section headings get a quiet rule above them so the long page scans. */
+main.docs h2
+  margin-top 3rem
+  padding-top 1.4rem
   border-top 1px solid $line
+  font-size 1.55rem
 
-a
+main.docs h3
+  margin-top 2rem
+  color $accent-deep
+
+main.docs p, main.docs li
+  color $ink-soft
+
+main.docs strong
+  color $ink
+
+main.docs a
   color $accent
+  font-weight 550
+
+/* Tight, legible lists for the rule-heavy reference sections. */
+main.docs ul
+  padding-left 1.2rem
+
+main.docs li
+  margin .35rem 0
+
+main.docs li code
+  white-space nowrap
 
 .feature-card
   border 1px solid $line
   bg $panel
-  padding 1rem
+  padding 1.1rem 1.25rem
   radius $radius
+  margin 1rem 0
+
+.feature-card strong
+  color $warm

package/site/pages/docs/index.wd

@@ -5,12 +5,17 @@ transitions: true
 ---
 
 @include /nav.wd
+@include /base.wd
 
-<main>
+<main class="docs">
 
-# Docs
+<header class="docs-hero">
+<span class="eyebrow">Documentation</span>
+
+# The Darkmown docs
 
 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>
 
 @include ./-relative-note.wd
 
@@ -152,6 +157,12 @@ One syntax everywhere: `{ name }` or `{ name.path }`.
 - The page's frontmatter is in scope as `meta` — `{ meta.title }` prints a field.
 - Otherwise the text is left exactly as written — braces in prose never break a page or pull in the runtime.
 
+### Format pipes — `{ value | name:arg }`
+
+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 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
 
 Frontmatter sits between `---` fences. Values are strings, plus inline arrays:
@@ -179,7 +190,7 @@ You don't size images by hand. Every `<img>` the compiler emits gets its intrins
 
 ## Reactive directives
 
-Reactive pages opt into `/__wd/runtime.js` (~5.7 KB gzipped, under a CI-enforced 6 KB budget). Static pages do not.
+Reactive pages opt into `/__wd/runtime.js` (~7.4 KB gzipped, under a CI-enforced 8 KB budget). Static pages do not.
 
 ```wd
 :state count = 0
@@ -205,6 +216,32 @@ Count is still zero.
 
 Directive actions are intentionally narrow and compile-time checked. Arbitrary JavaScript belongs in a colocated `.js` file.
 
+### Computed values and aggregates
+
+`:computed name = expr` derives state from state — arithmetic, comparisons, and the five list aggregates `sum` / `avg` / `min` / `max` / `count`. It recomputes when an input changes and reads like any binding, so it pairs with format pipes:
+
+```wd
+:store cart = [{"price": 89}, {"price": 12}]
+:computed subtotal = sum(cart, price)
+:computed total = subtotal * 1.08
+
+Total: { total | money }
+```
+
+The aggregate's field is a bare row key (`price`, not `item.price`).
+
+### Timers — `:every`
+
+`:every <duration> -> <actions>` runs a `:button`-style action on an interval (`ms` / `s` / `m`). Intervals pause while the tab is hidden and resume on return.
+
+```wd
+:fetch board from "/status.json"
+:every 10s -> board refetch
+
+:state secs = 0
+:every 1s -> secs++
+```
+
 ### Multi-branch conditionals
 
 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):
@@ -320,10 +357,35 @@ You have { cart } items.
 - `:input field placeholder="…" required` and `:submit "Label"` build the form body.
 - `:state cart = [] persist` survives reloads via localStorage on a single page; use `:store` for state shared across pages and tabs.
 - `:if item.path` works inside reactive loops for per-row branches, and conditionals nest — an inner `:if` resolves after the outer branch, staying reactive.
-- Reactive pages expose `window.wd` (`get`, `set`, `state`, `render`) so colocated `.js` can do anything directives can't. Section state is addressed as `sectionId:name`.
+- Reactive pages expose `window.wd` (`get`, `set`, `subscribe`, `state`, `render`) so colocated `.js` can do anything directives can't. Section state is addressed as `sectionId:name`.
 
 See it all live on the [Data & Forms page](/data/).
 
+## Theme toggle — `:theme`
+
+For an explicit light/dark switch alongside the OS preference, declare `:theme` once and drive it with buttons. It registers a durable `theme` store and reflects onto `<html data-theme>`:
+
+```wd
+:theme
+:button "Auto"  -> theme = "auto"
+:button "Light" -> theme = "light"
+:button "Dark"  -> theme = "dark"
+```
+
+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/).
+
+## Media — `:video`, `:audio`, `:embed`
+
+Three compile-time-only directives (they emit no `data-wd-*`, so a media page stays zero-JS):
+
+```wd
+:video /clip.mp4 poster=/clip.jpg controls
+:audio /track.mp3 controls
+:embed https://youtu.be/aqz-KE-bpKQ title="Big Buck Bunny"
+```
+
+`:video`/`:audio` emit a hardened HTML5 player — `preload="metadata"` and `controls` by default, whitelisted flags (`autoplay` implies `muted`), and the `:fetch` URL scheme guard. `:embed` rewrites a YouTube/Vimeo link to its no-cookie/player form in a lazy, responsive `16/9` iframe. See the zero-JS [Media demo](/media/).
+
 ## Trust boundary
 
 Darkmown is a trusted-author site generator: you compile content you wrote, the way you trust your own source. Three things define that boundary.
@@ -337,7 +399,7 @@ See [SECURITY.md](https://github.com/ZVN-DEV/darkmown/blob/main/SECURITY.md) in
 ## Colocation
 
 - A matching `.skin` file attaches CSS to the page (indentation-based, compiles to real CSS).
-- A matching `.js` file attaches page behavior.
+- A matching `.js` file attaches page behavior. It loads **after** the runtime, so `window.wd` is ready: `wd.get(key)`, `wd.set(key, value)`, and `wd.subscribe(key, cb)` (runs now and on every settled change) bridge declarative state to imperative widgets — the gestures the framework leaves out (keyboard, drag/touch, canvas). The [Swiper demo](/carousel/) is a draggable carousel built this way.
 - Both work for included fragments too, by basename.
 - Any other file under `site/pages/` (an image, font, PDF — anything that isn't a `.md`/`.wd` route or a basename-matched `.skin`/`.js`) copies to `dist/` at its own path with the right content-type. So `site/pages/logo.svg` is served at `/logo.svg`. Assets below hidden path segments (`.`, `-`, or `_`) and symlinked page assets are skipped, matching the routing privacy rule. Use the `site/_/` shelf for assets shared across pages; colocate the ones a single page owns.
 
@@ -345,4 +407,8 @@ See [SECURITY.md](https://github.com/ZVN-DEV/darkmown/blob/main/SECURITY.md) in
 
 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.
 
+See these directives composed into real apps on the [showcase](/showcase/).
+
 </main>
+
+@include /footer.wd