rose-ash/sx/sx/layouts.sx

;; SX docs layout defcomps + in-page navigation.
;; Layout = root header only. Nav is in-page via ~layouts/doc wrapper.

;; ---------------------------------------------------------------------------
;; Nav components — logo header, sibling arrows, children links
;; ---------------------------------------------------------------------------

;; Styling via cssx-style utility tokens (cssx.sx) — same format as ~cssx/tw

;; Logo + tagline + copyright — always shown at top of page area.
;; The header itself is an island so the "reactive" word can cycle colours
;; on click — demonstrates inline signals without a separate component.
;;
;; Lakes (server-morphable slots) wrap the static content: logo and copyright.
;; The server can update these during navigation morphs without disturbing
;; the reactive colour-cycling state. This is Level 2-3: the water (server
;; content) flows through the island, around the rocks (reactive signals).
(defisland ~layouts/header (&key path)
  (let ((families (list "violet" "rose" "blue" "emerald" "amber" "cyan" "red" "teal" "pink" "indigo"))
        (idx (signal 0))
        (shade (signal 500))
        (current-family (computed (fn ()
          (nth families (mod (deref idx) (len families)))))))
    (div (~cssx/tw :tokens "block max-w-3xl mx-auto px-4 pt-8 pb-4 text-center")
      ;; Logo — only this navigates home
      (a :href "/sx/"
         :sx-get "/sx/" :sx-target "#main-panel" :sx-select "#main-panel"
         :sx-swap "outerHTML" :sx-push-url "true"
        (~cssx/tw :tokens "block no-underline")
        (lake :id "logo"
          (span (~cssx/tw :tokens "block mb-2 text-violet-699 text-4xl font-bold font-mono")
            "(<sx>)")))
      ;; Tagline — clicking "reactive" cycles colour.
      (p (~cssx/tw :tokens "mb-1 text-stone-500 text-lg")
        "The framework-free "
        (span
          (~cssx/tw :tokens "font-bold")
          :style (str "color:" (colour (deref current-family) (deref shade)) ";"
                      "cursor:pointer;transition:color 0.3s,font-weight 0.3s;")
          :on-click (fn (e)
            (batch (fn ()
              (swap! idx inc)
              (reset! shade (+ 400 (* (mod (* (deref idx) 137) 5) 50))))))
          "reactive")
        " hypermedium")
      ;; Lake: server morphs copyright on navigation without disturbing signals.
      (lake :id "copyright"
        (p (~cssx/tw :tokens "text-stone-400 text-xs")
          "© Giles Bradshaw 2026"
          (when path
            (span (~cssx/tw :tokens "text-stone-300 text-xs") :style "margin-left:0.5em;"
              (str "· " path))))))))


;; @css grid grid-cols-3

;; Current section with prev/next siblings.
;; 3-column grid: prev is right-aligned, current centered, next left-aligned.
;; Current page is larger in the leaf (bottom) row.
(defcomp ~layouts/nav-sibling-row (&key node siblings is-leaf level depth)
  (let* ((sibs (or siblings (list)))
         (count (len sibs))
         ;; opacity = (n/x * 3/4) + 1/4
         (row-opacity (if (and level depth (> depth 0))
                        (+ (* (/ level depth) 0.75) 0.25)
                        1)))
    (when (> count 0)
      (let* ((idx (find-nav-index sibs node))
             (prev-idx (mod (+ (- idx 1) count) count))
             (next-idx (mod (+ idx 1) count))
             (prev-node (nth sibs prev-idx))
             (next-node (nth sibs next-idx)))
        (div :class "max-w-3xl mx-auto px-4 py-2 grid grid-cols-3 items-center"
             :style (str "opacity:" row-opacity ";transition:opacity 0.3s;")
          (a :href (get prev-node "href")
             :sx-get (get prev-node "href") :sx-target "#main-panel"
             :sx-select "#main-panel" :sx-swap "outerHTML"
             :sx-push-url "true"
             :class "text-right"
             :style (tw "text-stone-500 text-sm")
            (str "← " (get prev-node "label")))
          (a :href (get node "href")
             :sx-get (get node "href") :sx-target "#main-panel"
             :sx-select "#main-panel" :sx-swap "outerHTML"
             :sx-push-url "true"
             :class "text-center px-4"
             :style (if is-leaf
                      (tw "text-violet-700 text-2xl font-bold")
                      (tw "text-violet-700 text-lg font-semibold"))
            (get node "label"))
          (a :href (get next-node "href")
             :sx-get (get next-node "href") :sx-target "#main-panel"
             :sx-select "#main-panel" :sx-swap "outerHTML"
             :sx-push-url "true"
             :class "text-left"
             :style (tw "text-stone-500 text-sm")
            (str (get next-node "label") " →")))))))

;; Children links — shown as clearly clickable buttons.
(defcomp ~layouts/nav-children (&key items)
  (div :class "max-w-3xl mx-auto px-4 py-3"
    (div :class "flex flex-wrap justify-center gap-2"
      (map (fn (item)
        (a :href (get item "href")
           :sx-get (get item "href") :sx-target "#main-panel"
           :sx-select "#main-panel" :sx-swap "outerHTML"
           :sx-push-url "true"
           :class "px-3 py-1.5 rounded border transition-colors"
           :style (tw "text-violet-700 text-sm border-violet-200")
          (get item "label")))
        items))))

;; ---------------------------------------------------------------------------
;; ~layouts/doc — in-page content wrapper with nav
;; Used by every defpage :content to embed nav inside the page content area.
;; ---------------------------------------------------------------------------

(defcomp ~layouts/doc (&key path &rest children) :affinity :server
  (let* ((nav-state (resolve-nav-path sx-nav-tree (or path "/")))
         (trail (or (get nav-state "trail") (list)))
         (trail-len (len trail))
         ;; Total nav levels: logo (1) + trail rows
         (depth (+ trail-len 1)))
    (<>
      (div :id "sx-nav" :class "mb-6"
        ;; Logo opacity = (1/depth * 3/4) + 1/4
        ;; Wrapper is outside the island so the server morphs it directly
        (div :id "logo-opacity"
             :style (str "opacity:" (+ (* (/ 1 depth) 0.75) 0.25) ";"
                         "transition:opacity 0.3s;")
          (~layouts/header :path (or path "/")))
        ;; Sibling arrows for EVERY level in the trail
        ;; Trail row i is level (i+2) of depth — opacity = (i+2)/depth
        ;; Last row (leaf) gets is-leaf for larger current page title
        (map-indexed (fn (i crumb)
          (~layouts/nav-sibling-row
            :node (get crumb "node")
            :siblings (get crumb "siblings")
            :is-leaf (= i (- trail-len 1))
            :level (+ i 2)
            :depth depth))
          trail)
        ;; Children as button links
        (when (get nav-state "children")
          (~layouts/nav-children :items (get nav-state "children"))))
      ;; Page content
      children
      ;; Flush CSSX rules after all content has rendered
      (~cssx/flush))))

;; ---------------------------------------------------------------------------
;; SX docs layouts — root header only (nav is in page content via ~layouts/doc)
;; ---------------------------------------------------------------------------

(defcomp ~layouts/docs-layout-full ()
  nil)

(defcomp ~layouts/docs-layout-oob ()
  nil)

(defcomp ~layouts/docs-layout-mobile ()
  nil)

;; ---------------------------------------------------------------------------
;; Standalone layouts (no root header — for sx-web.org)
;; ---------------------------------------------------------------------------

(defcomp ~layouts/standalone-docs-layout-full ()
  nil)

;; Standalone OOB: nothing needed — nav is in content.
(defcomp ~layouts/standalone-docs-layout-oob ()
  nil)

;; Standalone mobile: nothing — nav is in content.
(defcomp ~layouts/standalone-docs-layout-mobile ()
  nil)