@zvndev/darkmown 0.20.0 → 1.0.0

package/site/_/base.wd

@@ -0,0 +1,4 @@
+<!-- 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
+     the top and /footer.wd at the bottom. -->

package/site/_/footer.wd

@@ -0,0 +1,14 @@
+<footer class="sitefooter">
+  <div class="foot-inner">
+    <div>
+      <strong>Darkmown</strong> — Markdown that runs.
+      <div class="small">Zero JS on static pages · one ~7.4&nbsp;KB runtime when reactive.</div>
+    </div>
+    <nav class="foot-links">
+      <a href="/docs/">Docs</a>
+      <a href="/showcase/">Showcase</a>
+      <a href="https://github.com/ZVN-DEV/darkmown">GitHub</a>
+      <a href="https://www.npmjs.com/package/@zvndev/darkmown">npm</a>
+    </nav>
+  </div>
+</footer>

package/site/_/metrics.json

@@ -0,0 +1,13 @@
+{
+  "updated": "2026-06-26T05:00:00Z",
+  "services": [
+    { "id": "api",     "name": "API Gateway",    "status": "ok",      "latency": 42,  "uptime": 99.98, "region": "iad", "spark": [38,41,40,44,42,39,42] },
+    { "id": "web",     "name": "Web Frontend",   "status": "ok",      "latency": 18,  "uptime": 99.99, "region": "global", "spark": [16,18,17,19,18,18,18] },
+    { "id": "db",      "name": "Primary DB",     "status": "warn",    "latency": 137, "uptime": 99.82, "region": "iad", "spark": [90,110,120,150,140,137,137] },
+    { "id": "cache",   "name": "Edge Cache",     "status": "ok",      "latency": 4,   "uptime": 100.0, "region": "global", "spark": [4,3,4,5,4,4,4] },
+    { "id": "queue",   "name": "Job Queue",      "status": "ok",      "latency": 61,  "uptime": 99.95, "region": "sfo", "spark": [55,60,58,64,61,59,61] },
+    { "id": "search",  "name": "Search Index",   "status": "down",    "latency": 0,   "uptime": 97.40, "region": "sfo", "spark": [120,140,160,0,0,0,0] },
+    { "id": "auth",    "name": "Auth Service",   "status": "ok",      "latency": 33,  "uptime": 99.97, "region": "iad", "spark": [30,34,32,35,33,33,33] },
+    { "id": "mail",    "name": "Mail Relay",     "status": "warn",    "latency": 210, "uptime": 99.60, "region": "fra", "spark": [180,200,190,230,210,205,210] }
+  ]
+}

package/site/_/nav.skin

@@ -9,40 +9,63 @@ tokens
   codeink #ecf3ea
   radius 8px
 
+/* No `tokens dark` here on purpose. The shared nav loads on EVERY page,
+   including the older feature-demo pages (/reactive, /loops, …) whose bespoke
+   component styles were never designed for a dark palette — flipping their
+   shared tokens made buttons unreadable. Dark mode is therefore opt-in: it
+   lives in base.skin, which only the refreshed pages and showcase apps include.
+   On those pages base.skin's dark tokens drive the nav too, so it still goes
+   dark there. */
+
 .topnav
   display flex
   flex-wrap wrap
-  gap .5rem 1rem
+  gap .35rem 1.1rem
   align-items center
-  padding 1rem 2rem
+  padding .85rem 1.5rem
   max-width 100%
   box-sizing border-box
   border-bottom 1px solid $line
-  bg rgba(251,250,247,.85)
-  backdrop-filter blur(8px)
+  background color-mix(in srgb, $paper 82%, transparent)
+  backdrop-filter saturate(1.4) blur(10px)
   position sticky
   top 0
-  z-index 10
+  z-index 20
+  font-size .92rem
 
 @media (max-width: 600px)
   .topnav
-    padding .85rem 1rem
-    gap .4rem .85rem
+    padding .75rem 1rem
+    gap .3rem .8rem
 
-.topnav strong
+.topnav .brand
+  font-weight 700
+  font-size 1.08rem
+  letter-spacing -.02em
   color $warm
-  font-size 1.05rem
+  text-decoration none
   margin-right .5rem
 
+.topnav .nav-links
+  display inline-flex
+  flex-wrap wrap
+  gap .35rem 1.1rem
+  align-items center
+
 .topnav a
   color $accent
   text-decoration none
 
 .topnav a:hover
-  text-decoration underline
+  color $ink
+
+.topnav .nav-gh
+  margin-left auto
+  color $ink
+  font-weight 600
 
 code
-  bg $panel
+  background color-mix(in srgb, $paper 50%, $panel)
   border 1px solid $line
   padding .1rem .32rem
   radius 5px
@@ -78,7 +101,7 @@ th
   text-align left
   border 1px solid $line
   padding .5rem .9rem
-  bg #f1ede4
+  background color-mix(in srgb, $paper 60%, $line)
 
 td
   border 1px solid $line

package/site/_/nav.wd

@@ -1,12 +1,10 @@
 <nav class="topnav">
-  <strong>Darkmown</strong>
-  <a href="/">Home</a>
-  <a href="/docs/">Docs</a>
-  <a href="/markdown/">Plain Markdown</a>
-  <a href="/reactive/">Reactive</a>
-  <a href="/loops/">Loops</a>
-  <a href="/store/">Store</a>
-  <a href="/theme/">Theme</a>
-  <a href="/data/">Data &amp; Forms</a>
-  <a href="/app/">Live app</a>
+  <a class="brand" href="/">Darkmown</a>
+  <span class="nav-links">
+    <a href="/docs/">Docs</a>
+    <a href="/showcase/">Showcase</a>
+    <a href="/reactive/">Reactive</a>
+    <a href="/data/">Data</a>
+  </span>
+  <a class="nav-gh" href="https://github.com/ZVN-DEV/darkmown">GitHub ↗</a>
 </nav>

package/site/_/products.json

@@ -0,0 +1,10 @@
+[
+  { "id": "aurora",  "name": "Aurora Lamp",      "price": 149, "category": "Light",   "emoji": "🪔", "tint": "#f4d58d", "blurb": "A warm dimmable glow with a hand-turned oak base." },
+  { "id": "briza",   "name": "Briza Fan",        "price": 89,  "category": "Air",     "emoji": "🌀", "tint": "#bcd6e8", "blurb": "Whisper-quiet bladeless airflow, USB-C powered." },
+  { "id": "cove",    "name": "Cove Speaker",     "price": 199, "category": "Sound",   "emoji": "🔊", "tint": "#cbbfe6", "blurb": "Room-filling 360° sound in a palm-sized shell." },
+  { "id": "dune",    "name": "Dune Mug",         "price": 24,  "category": "Kitchen", "emoji": "☕", "tint": "#e8c9a8", "blurb": "Double-walled stoneware that keeps coffee hot for hours." },
+  { "id": "fjord",   "name": "Fjord Bottle",     "price": 39,  "category": "Kitchen", "emoji": "🧊", "tint": "#a8d8d0", "blurb": "Vacuum steel, 24h cold, sweat-proof matte finish." },
+  { "id": "glint",   "name": "Glint Desk Clock", "price": 69,  "category": "Light",   "emoji": "🕰️", "tint": "#f0c8c0", "blurb": "E-ink face, ambient backlight, three-month battery." },
+  { "id": "haven",   "name": "Haven Diffuser",   "price": 59,  "category": "Air",     "emoji": "🌿", "tint": "#c4e0b4", "blurb": "Ultrasonic mist with a refillable cedar reservoir." },
+  { "id": "isle",    "name": "Isle Earbuds",     "price": 129, "category": "Sound",   "emoji": "🎧", "tint": "#d8c4ec", "blurb": "Active noise cancelling, 30-hour case, tap controls." }
+]

package/site/pages/app.wd

@@ -19,7 +19,7 @@ This whole section is plain Markdown. The list below is unrolled **at build time
 - **{ feature.title }** — { feature.body }
 @endloop
 
-<aside class="boundary">If you deleted everything below this line, this page would ship <strong>zero</strong> bytes of JavaScript. Everything above is static HTML. Below is where the one ~5.7&nbsp;KB gzipped runtime loads (CI-enforced under 6 KB) — and only because the document asks for it.</aside>
+<aside class="boundary">If you deleted everything below this line, this page would ship <strong>zero</strong> bytes of JavaScript. Everything above is static HTML. Below is where the one ~7.4&nbsp;KB gzipped runtime loads (CI-enforced under 8 KB) — and only because the document asks for it.</aside>
 
 ## Fetched data, looped, with nested conditions
 

package/site/pages/carousel/index.js

@@ -0,0 +1,82 @@
+// Carousel behavior — the escape hatch in action.
+//
+// Darkmown owns the reactive `slide` state, the indicator dots (`.active when`),
+// and the "Slide N of 5" readout. This colocated module adds exactly what a
+// deliberately tiny framework leaves out: arrow + keyboard + pointer-drag navigation
+// and the sliding transition. It never reaches into the framework's internals —
+// it reads and writes the same `slide` value through the public `window.wd` API.
+//
+// Module scripts run after /__wd/runtime.js (which defines window.wd) and in
+// document order, so `wd` is guaranteed ready here.
+
+const viewport = document.querySelector("[data-swiper]");
+
+if (viewport && window.wd) {
+  const track = viewport.querySelector("[data-swiper-track]");
+  const slides = [...track.children];
+  const N = slides.length;
+  const KEY = "slide";
+
+  const wrap = (i) => ((i % N) + N) % N;
+  const current = () => wrap(Number(window.wd.get(KEY)) || 0);
+  const go = (i) => window.wd.set(KEY, wrap(i));
+  const SETTLE = "transform .42s cubic-bezier(.22,.61,.36,1)";
+
+  // State → view. Primed immediately, then on every settled change. Because the
+  // arrows/keyboard/drag below always write a wrapped value, `slide` never leaves
+  // [0, N-1], so the declarative dots and readout stay valid every frame.
+  window.wd.subscribe(KEY, (raw) => {
+    const i = wrap(raw);
+    track.style.transition = SETTLE;
+    track.style.transform = `translateX(${-i * 100}%)`;
+    slides.forEach((s, k) => s.setAttribute("aria-hidden", k === i ? "false" : "true"));
+  });
+
+  // Arrow buttons (plain <button>s, wired here — not :button directives).
+  document.querySelector("[data-swiper-prev]")?.addEventListener("click", () => go(current() - 1));
+  document.querySelector("[data-swiper-next]")?.addEventListener("click", () => go(current() + 1));
+
+  // Keyboard: the viewport is focusable; ← / → step through.
+  viewport.addEventListener("keydown", (event) => {
+    if (event.key === "ArrowLeft") { event.preventDefault(); go(current() - 1); }
+    else if (event.key === "ArrowRight") { event.preventDefault(); go(current() + 1); }
+  });
+
+  // Pointer drag / touch swipe. Follow the finger while dragging (transition off),
+  // then either advance or snap back on release.
+  let startX = 0;
+  let dragging = false;
+  let width = 1;
+
+  viewport.addEventListener("pointerdown", (event) => {
+    if (event.button != null && event.button !== 0) return;
+    dragging = true;
+    startX = event.clientX;
+    width = viewport.clientWidth || 1;
+    track.style.transition = "none";
+    try { viewport.setPointerCapture(event.pointerId); } catch { /* capture is best-effort */ }
+  });
+
+  viewport.addEventListener("pointermove", (event) => {
+    if (!dragging) return;
+    const dx = event.clientX - startX;
+    track.style.transform = `translateX(calc(${-current() * 100}% + ${dx}px))`;
+  });
+
+  const release = (event) => {
+    if (!dragging) return;
+    dragging = false;
+    const dx = event.clientX - startX;
+    if (Math.abs(dx) > width * 0.18) {
+      go(current() + (dx < 0 ? 1 : -1));
+    } else {
+      // Below threshold: ease back to the current slide. The value didn't change,
+      // so subscribe won't re-fire — reset the transform directly.
+      track.style.transition = "transform .3s ease";
+      track.style.transform = `translateX(${-current() * 100}%)`;
+    }
+  };
+
+  viewport.addEventListener("pointerup", release);
+  viewport.addEventListener("pointercancel", release);
+}

package/site/pages/carousel/index.skin

@@ -0,0 +1,185 @@
+/* ── Swiper demo — layers on /base.wd. The viewport clips; the track is a flex
+   row the colocated index.js slides with a transform. Reuses base tokens. ──── */
+
+.app-swiper
+  max-width 56rem
+  margin 0 auto
+  padding 2.5rem 1.25rem 4rem
+
+.app-swiper .swiper-head
+  margin-bottom 1.75rem
+
+.app-swiper .swiper-eyebrow
+  font-size .72rem
+  font-weight 700
+  letter-spacing .14em
+  text-transform uppercase
+  color $accent
+
+.app-swiper h1
+  margin .4rem 0 0
+  font-size 2.4rem
+  letter-spacing -.02em
+  color $ink
+
+.app-swiper .swiper-tagline
+  margin .7rem 0 0
+  max-width 42rem
+  color $ink-soft
+  font-size 1rem
+  line-height 1.6
+
+.app-swiper .swiper-head code, .app-swiper .swiper-tagline code, .app-swiper .swiper-readout code
+  bg $code-bg
+  color $code-ink
+  padding .06rem .32rem
+  radius 6px
+  font-size .85em
+
+/* Stage */
+.app-swiper .swiper-stage
+  margin 0
+
+.app-swiper .swiper-viewport
+  overflow hidden
+  border 1px solid $line-soft
+  radius 18px
+  background $sunk
+  cursor grab
+  touch-action pan-y
+  outline none
+
+.app-swiper .swiper-viewport:focus-visible
+  box-shadow 0 0 0 3px $ring
+
+.app-swiper .swiper-viewport:active
+  cursor grabbing
+
+.app-swiper .swiper-track
+  display flex
+  /* transition is set by index.js so the very first paint doesn't animate */
+  will-change transform
+
+.app-swiper .swipe-slide
+  position relative
+  flex 0 0 100%
+  margin 0
+
+.app-swiper .swipe-slide img
+  display block
+  width 100%
+  height auto
+  aspect-ratio 16/9
+  object-fit cover
+  user-select none
+  -webkit-user-drag none
+  pointer-events none
+
+.app-swiper .swipe-slide figcaption
+  position absolute
+  left 0
+  right 0
+  bottom 0
+  display flex
+  flex-direction column
+  gap .15rem
+  padding 1.5rem 1.25rem 1rem
+  color #fff
+  background linear-gradient(to top, rgba(10,8,6,.72), rgba(10,8,6,0))
+
+.app-swiper .swipe-slide figcaption strong
+  color #fff
+  font-size 1.15rem
+  letter-spacing -.01em
+
+.app-swiper .swipe-slide figcaption span
+  font-size .82rem
+  opacity .85
+  font-variant-numeric tabular-nums
+
+/* Controls row: arrows flank the dots */
+.app-swiper .swiper-controls
+  display flex
+  align-items center
+  justify-content center
+  gap 1rem
+  margin 1.1rem 0 .25rem
+
+.app-swiper .swiper-arrow
+  flex 0 0 auto
+  width 2.6rem
+  height 2.6rem
+  display inline-flex
+  align-items center
+  justify-content center
+  border 1px solid $line
+  background $panel
+  color $ink-soft
+  font-size 1.4rem
+  line-height 1
+  radius 999px
+  cursor pointer
+  transition color .14s ease, border-color .14s ease, transform .14s ease
+
+.app-swiper .swiper-arrow:hover
+  color $ink
+  border-color $accent
+
+.app-swiper .swiper-arrow:active
+  transform scale(.94)
+
+/* Dots — each is a declarative container whose .active is reconciled by the
+   framework from `.active when slide == N`. */
+.app-swiper .swiper-dots
+  display inline-flex
+  align-items center
+  gap .4rem
+
+.app-swiper .dot button[data-wd-action]
+  width 1.6rem
+  height 1.6rem
+  display inline-flex
+  align-items center
+  justify-content center
+  border 0
+  background transparent
+  /* collapse the visible digit — it stays the button's accessible name */
+  font-size 0
+  border-radius 999px
+  cursor pointer
+  position relative
+
+.app-swiper .dot button[data-wd-action]::after
+  content ""
+  position absolute
+  width .5rem
+  height .5rem
+  border-radius 999px
+  background $line
+  transition background .18s ease, transform .18s ease
+
+.app-swiper .dot.active button[data-wd-action]::after
+  background $accent
+  transform scale(1.5)
+
+.app-swiper .dot button[data-wd-action]:hover::after
+  background $accent-deep
+
+.app-swiper .swiper-readout
+  margin 1rem 0 0
+  text-align center
+  font-size .9rem
+  color $muted
+
+.app-swiper .swiper-readout strong
+  color $ink
+
+.app-swiper .swiper-readout kbd
+  font-size .8em
+
+.app-swiper .source-reveal
+  margin-top 2rem
+
+@media (prefers-reduced-motion: reduce)
+  .app-swiper .swiper-track
+    transition none !important

package/site/pages/carousel/index.wd

@@ -0,0 +1,109 @@
+---
+title: Swiper — a draggable carousel wired to wd.subscribe
+description: An image carousel with arrow-key nav, pointer drag / swipe, and a sliding transition — the things a deliberately tiny framework leaves to you. Darkmown owns the reactive slide state, the dots, and the readout declaratively; a colocated index.js adds the gestures through window.wd.subscribe and window.wd.set.
+image: https://darkmown.com/__wd/media/og-showcase.png
+transitions: true
+---
+
+@include /nav.wd
+@include /base.wd
+
+<main class="wide app-swiper">
+
+<!-- No ::: section wrapper: `slide` stays a top-level state key, so the
+     declarative dots/readout and the colocated index.js share one `slide`. -->
+:state slide = 0
+:computed human = slide + 1
+
+::: swiper-head
+::: eyebrow .swiper-eyebrow
+The escape hatch
+:::
+
+# A *swiper*, wired to `wd.subscribe`
+
+::: swiper-tagline
+Darkmown owns the reactive `slide` state, the indicator dots, and the live readout —
+declaratively, with no hand-written JavaScript. The things a framework this small
+deliberately *doesn't* ship — arrow-key navigation, pointer **drag / swipe**, and the
+sliding transition — live in a colocated `index.js` that talks to the very same state
+through `window.wd.subscribe` and `window.wd.set`.
+:::
+:::
+
+::: swiper-stage
+
+<div class="swiper-viewport" data-swiper tabindex="0" role="group" aria-roledescription="carousel" aria-label="Project gallery — drag, or use the arrow keys">
+<div class="swiper-track" data-swiper-track>
+<figure class="swipe-slide"><img src="/carousel/slide-1.jpg" alt="Warm ember-to-charcoal gradient" width="1200" height="675"><figcaption><strong>Ember</strong><span>Warm dusk · #b8462e</span></figcaption></figure>
+<figure class="swipe-slide"><img src="/carousel/slide-2.jpg" alt="Teal-to-ink gradient" width="1200" height="675"><figcaption><strong>Pulse</strong><span>Signal teal · #18b89a</span></figcaption></figure>
+<figure class="swipe-slide"><img src="/carousel/slide-3.jpg" alt="Violet-to-midnight gradient" width="1200" height="675"><figcaption><strong>Forge</strong><span>Electric violet · #6d5ae6</span></figcaption></figure>
+<figure class="swipe-slide"><img src="/carousel/slide-4.jpg" alt="Amber-to-umber gradient" width="1200" height="675"><figcaption><strong>Compass</strong><span>Trail amber · #e0894a</span></figcaption></figure>
+<figure class="swipe-slide"><img src="/carousel/slide-5.jpg" alt="Gold-to-olive gradient" width="1200" height="675"><figcaption><strong>Ledger</strong><span>Ledger gold · #c79a3a</span></figcaption></figure>
+</div>
+</div>
+
+::: swiper-controls
+<button class="swiper-arrow" data-swiper-prev type="button" aria-label="Previous slide">‹</button>
+
+::: swiper-dots
+::: dot .active when slide == 0
+:button "1" -> slide = 0
+:::
+::: dot .active when slide == 1
+:button "2" -> slide = 1
+:::
+::: dot .active when slide == 2
+:button "3" -> slide = 2
+:::
+::: dot .active when slide == 3
+:button "4" -> slide = 3
+:::
+::: dot .active when slide == 4
+:button "5" -> slide = 4
+:::
+:::
+
+<button class="swiper-arrow" data-swiper-next type="button" aria-label="Next slide">›</button>
+:::
+
+::: swiper-readout
+Slide **{ human }** of 5 — drag it, press <kbd>←</kbd> / <kbd>→</kbd>, or tap a dot.
+:::
+
+:::
+
+<details class="source-reveal">
+<summary>View source — declarative core + a colocated behavior</summary>
+
+```wd
+:state slide = 0
+:computed human = slide + 1
+
+# the dots are declarative — Darkmown reconciles `.active` for you
+::: dot .active when slide == 0
+:button "1" -> slide = 0
+:::
+
+# … the readout, too
+Slide { human } of 5
+```
+
+```js
+// index.js, colocated next to the page. Loads after the runtime, so window.wd
+// is ready. Drag / keyboard / transition — the gestural layer the framework
+// deliberately leaves to you — all driven through the same `slide` state.
+window.wd.subscribe("slide", (i) => {
+  track.style.transform = `translateX(${-i * 100}%)`;
+});
+prevButton.onclick = () => window.wd.set("slide", current - 1);
+```
+
+The framework reconciles state, classes, and text; the escape hatch owns the
+gestures. They meet at one shared `slide` value.
+
+</details>
+
+</main>
+
+@include /footer.wd