@zvndev/darkmown 0.20.0 → 1.1.0

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

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