@zvndev/darkmown 0.20.0 → 1.1.0

package/site/_/base.skin

@@ -0,0 +1,372 @@
+/* ===================================================================
+   Darkmown design system — the refreshed brand foundation.
+   Warm, literary, premium. Serif for prose, system sans for chrome,
+   a refined mono for code. Ships zero JS; dark mode is OS-driven via
+   `tokens dark` (a pure CSS media query — no flash, no toggle script).
+   Every refreshed page and demo app includes this via /base.wd.
+   =================================================================== */
+
+tokens
+  ink #1c1814
+  ink-soft #4b4239
+  muted #756a5d
+  faint #9b9082
+  paper #faf8f3
+  paper-2 #f4f0e7
+  sunk #efe9dc
+  panel #ffffff
+  line #e7e1d4
+  line-soft #f0ebe0
+  accent #0f6b5e
+  accent-deep #0a4f45
+  accent-soft #e3f0ec
+  warm #b8462e
+  warm-soft #f8eae3
+  gold #b6822b
+  code-bg #1b2420
+  code-ink #e9efe7
+  code-line #2c3b34
+  ring #0f6b5e
+  radius 12px
+  radius-sm 8px
+  radius-lg 20px
+
+tokens dark
+  ink #ece6db
+  ink-soft #c3bbab
+  muted #9a9081
+  faint #6f6657
+  paper #14110d
+  paper-2 #1a1612
+  sunk #221d17
+  panel #1e1913
+  line #2f281f
+  line-soft #261f18
+  accent #5ccab4
+  accent-deep #8fe0cf
+  accent-soft #16302a
+  warm #e88a6f
+  warm-soft #2c1f18
+  gold #d6a24e
+  code-bg #100d0a
+  code-ink #e4ebe2
+  code-line #2a231b
+  ring #5ccab4
+
+/* ── Reset & base ───────────────────────────────────────────────── */
+
+*
+  box-sizing border-box
+
+page
+  margin 0
+  font-family ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, Cambria, serif
+  font-size 18px
+  line-height 1.65
+  color $ink
+  bg $paper
+  -webkit-font-smoothing antialiased
+  text-rendering optimizeLegibility
+
+::selection
+  bg $accent-soft
+  color $accent-deep
+
+/* ── Typography ─────────────────────────────────────────────────── */
+
+h1, h2, h3, h4
+  line-height 1.1
+  letter-spacing -.012em
+  color $ink
+  font-weight 600
+
+h1
+  font-size clamp(2.5rem, 6vw, 4.5rem)
+  letter-spacing -.025em
+  margin .2em 0 .35em
+
+h2
+  font-size clamp(1.6rem, 3vw, 2.25rem)
+  margin 2.4em 0 .6em
+
+h3
+  font-size 1.3rem
+  margin 1.8em 0 .4em
+
+p
+  margin 1em 0
+  max-width 68ch
+
+a
+  color $accent
+  text-underline-offset 2px
+  text-decoration-thickness 1px
+
+a:hover
+  color $accent-deep
+
+strong
+  font-weight 650
+  color $ink
+
+hr
+  border 0
+  border-top 1px solid $line
+  margin 3rem 0
+
+small, .small
+  font-size .82rem
+  color $muted
+
+/* Chrome (nav, buttons, labels, badges) leans on a clean sans for a
+   modern editorial contrast against the serif prose. */
+.topnav, .btn, .eyebrow, .pill, .tag, .badge, .kbd, .sitefooter, .source-reveal summary
+  font-family system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
+
+/* ── Layout ─────────────────────────────────────────────────────── */
+
+main
+  max-width 940px
+  margin 0 auto
+  padding 0 1.5rem 5rem
+
+.wide
+  max-width 1140px
+
+.eyebrow
+  display inline-block
+  text-transform uppercase
+  letter-spacing .14em
+  font-size .74rem
+  font-weight 600
+  color $accent
+  margin 0 0 .35rem
+
+/* ── Buttons ────────────────────────────────────────────────────── */
+
+.btn
+  display inline-flex
+  align-items center
+  gap .5rem
+  margin .4rem .5rem .4rem 0
+  padding .7rem 1.15rem
+  font-size .95rem
+  font-weight 550
+  line-height 1
+  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)
+
+.btn.primary
+  bg $accent
+  color #fff
+  border-color $accent
+
+.btn.primary:hover
+  bg $accent-deep
+  color #fff
+
+.btn.warm
+  bg $warm
+  color #fff
+  border-color $warm
+
+.btn.ghost
+  bg transparent
+
+/* ── Cards & surfaces ───────────────────────────────────────────── */
+
+.card
+  bg $panel
+  border 1px solid $line
+  radius $radius
+  padding 1.4rem
+  box-shadow 0 1px 2px rgba(28,24,20,.04)
+
+.grid
+  display grid
+  gap 1.1rem
+
+.grid.cols-2
+  grid-template-columns repeat(2, 1fr)
+
+.grid.cols-3
+  grid-template-columns repeat(3, 1fr)
+
+.grid.auto
+  grid-template-columns repeat(auto-fit, minmax(240px, 1fr))
+
+@media (max-width: 760px)
+  .grid.cols-2, .grid.cols-3
+    grid-template-columns 1fr
+
+/* ── Pills, tags, badges ────────────────────────────────────────── */
+
+.pill, .tag
+  display inline-flex
+  align-items center
+  gap .35rem
+  font-size .72rem
+  font-weight 600
+  text-transform uppercase
+  letter-spacing .06em
+  padding .28rem .6rem
+  radius 999px
+
+.pill
+  bg $accent-soft
+  color $accent-deep
+
+.tag
+  bg $sunk
+  color $muted
+
+.kbd
+  font-family ui-monospace, "SF Mono", Menlo, monospace
+  font-size .8rem
+  padding .15rem .4rem
+  radius 6px
+  bg $panel
+  border 1px solid $line
+  color $ink-soft
+
+/* ── Callout (the demo :note directive renders <aside class="note">) ─ */
+
+.note, .callout
+  margin 1.6rem 0
+  padding 1rem 1.25rem
+  border 1px solid $line
+  border-left 3px solid $accent
+  bg $panel
+  radius $radius-sm
+  color $ink-soft
+  font-size .96rem
+
+/* ── Code ───────────────────────────────────────────────────────── */
+
+code
+  font-family ui-monospace, "SF Mono", Menlo, Consolas, monospace
+  font-size .88em
+  bg $sunk
+  color $accent-deep
+  padding .12rem .36rem
+  radius 6px
+
+h1 code, h2 code, h3 code
+  font-size .82em
+
+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
+
+/* ── Tables ─────────────────────────────────────────────────────── */
+
+table
+  border-collapse collapse
+  width 100%
+  margin 1.5rem 0
+  font-size .95rem
+
+th
+  text-align left
+  padding .6rem .9rem
+  border-bottom 2px solid $line
+  color $muted
+  font-weight 600
+  font-size .82rem
+  text-transform uppercase
+  letter-spacing .04em
+
+td
+  padding .6rem .9rem
+  border-bottom 1px solid $line-soft
+
+blockquote
+  margin 1.6rem 0
+  padding .6rem 1.3rem
+  border-left 3px solid $accent
+  color $ink-soft
+  font-style italic
+
+/* ── "View source" reveal — the two-beat trick: a slick app, then the
+     Markdown it's made of. Wrap a fenced ```wd block in <details>. ── */
+
+.source-reveal
+  margin 1.5rem 0
+  border 1px solid $line
+  radius $radius
+  bg $panel
+  overflow hidden
+
+.source-reveal summary
+  cursor pointer
+  padding .85rem 1.1rem
+  font-size .9rem
+  font-weight 600
+  color $accent-deep
+  list-style none
+  display flex
+  align-items center
+  gap .5rem
+
+.source-reveal summary::-webkit-details-marker
+  display none
+
+.source-reveal summary::before
+  content "›"
+  font-size 1.1rem
+  transition transform .15s ease
+
+.source-reveal[open] summary::before
+  transform rotate(90deg)
+
+.source-reveal pre
+  margin 0
+  radius 0
+
+/* ── Footer ─────────────────────────────────────────────────────── */
+
+.sitefooter
+  border-top 1px solid $line
+  margin-top 4rem
+  padding 2.5rem 1.5rem
+  color $muted
+  font-size .9rem
+
+.sitefooter .foot-inner
+  max-width 940px
+  margin 0 auto
+  display flex
+  flex-wrap wrap
+  gap 1rem 2rem
+  align-items center
+  justify-content space-between
+
+.sitefooter a
+  color $muted
+  text-decoration none
+  margin-right 1.1rem
+
+.sitefooter a:hover
+  color $accent

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);
+}