Fixes to eyes banner positioning.

docs/analytics.md

@@ -20,9 +20,12 @@ Struct dumped to disk — separate from the kanta content database, path from
 ## What is collected
 
 The client (`pagerite.js`) POSTs fire-and-forget pings to `/_a` with
-`{fr, to}` (`fr` = source path):
+`fr`, `to`, `hide` and `read` as query parameters (`fr` = source path;
+falsy values are omitted):
 
-- **Initial page load**: `to` is the loaded path. This ping is what starts
+- **Initial page load**: only `to` — the loaded path — is sent, never `fr`
+  (an `fr` equal to `to` would log a bogus self-transition when a session
+  already exists, e.g. a second tab). This ping is what starts
   the visit and counts the entry page view — the document GET alone records
   nothing, so bots and admin browsing never register. JS-running crawlers
   (Googlebot, GoogleOther, Applebot, ...) do ping, but their User-Agent
@@ -34,7 +37,8 @@ The client (`pagerite.js`) POSTs fire-and-forget pings to `/_a` with
   abuse rules regardless. Reloads are not
   visits: the ping is skipped (PerformanceNavigationTiming `reload`), so a
   refresh neither counts a second view nor logs a self-transition. The GET
-  handler stashes a cross-origin https `Referer` (origin part only) and any
+  handler stashes a cross-origin https `Referer` (origin part only —
+  unavailable to JS once the page has loaded) and any
   `utm_*` query parameters in in-memory IP tables, consumed by the ping that
   starts the visit; internal or absent referers never touch the referer table.
 - **Internal fetch-navigations**: `to` is the target path, sent only after
@@ -276,8 +280,8 @@ its end, disappearing under later pills when long — so the lanes reflect
 the path
 structure even where index pages are omitted — opposite transition
 directions joined into organic
-tapered connections whose middle width grows logarithmically with the
+tapered connections whose middle width grows logarithmically (base 2)
-count (uncapped), connections
+with the daily hit rate (uncapped), connections
 carrying less than 1% of the total traffic
 pruned, as are those whose thin middle would render below ~0.8 px —
 fainter strands are invisible and only their wide end flares would show; beads are simulated one by one in JS (requestAnimationFrame) and

docs/design-principles.md

@@ -45,7 +45,7 @@ Pagerite is a single-user CMS/blog. This document records the initial high-level
 ## Editing
 
 - Editing happens **in place**, in two modes opened by two pens:
-  - **Page mode** — the 🖊️ next to a page's heading (including 404s, which is how new pages start) opens a CodeMirror Markdown editor docked to the left of the article: the host sits inside `#content` (below the banner, never over the footer), the content shifts right and the sidebar hides while editing. Preview renders server-side per keystroke (no debouncing) straight into the visible article's heading and body.
+  - **Page mode** — the 🖊️ next to a page's heading (including 404s, which is how new pages start) opens a CodeMirror Markdown editor docked to the left of the article: the panel is fixed to the viewport's left edge (its top tracks the banner's bottom until the banner scrolls away), the content shifts right and the sidebar hides while editing. Preview renders server-side per keystroke (no debouncing) straight into the visible article's heading and body.
   - **Site mode** — the 🖊️ on the banner opens a panel with the site **brand** (applied to the header live), a **theme** selector (swapping the theme stylesheet in place), **font** picks (heading/body/brand — stored as plain `:root` rows inside the custom CSS, referencing the base stylesheet's per-family font variables), a **site-wide custom CSS** field (injected into `<style id="pagerite-user">` in the live page head and swapped during fetch-navigation), the page's **banner design** selector (inherit / none / any design found on disk, inherited by children), the page's **banner HTML** field (supplementing the design, previewed into the real banner region, so you see exactly which banner you're editing) and the **structure tree**. Everything saves immediately as you edit — no save button, no edit mode.
 - Clicking a pen again closes the editor (without saving; a dirty preview reloads the page). The pens are `<button>`s wired up by `pagerite.js` — editing is an action, not a navigation. The editor's WebSocket **reconnects automatically** with local text and pending saves preserved. (All users are trusted authors for now; access control later with SSO.)
 - **CodeMirror 6** for Markdown editing (no WYSIWYG), title/published controls. Images can be pasted straight into the editor or chosen via a file input: they upload to the content store (`PUT /_api/files/...`) and insert `![alt](/_f/hash.ext)` at the cursor.

docs/editing.md

@@ -6,18 +6,18 @@ The Vue editor is a single tabbed `EditorShell.vue` mounted in a host div create
 
 The shell hosts four kept-alive tabs (ordered site-wide first — site, structure — then, after a visual break, the per-page tabs — article, banner):
 
-- `PageEditor.vue` — CodeMirror + server-rendered preview over WebSocket `/_api/ws/editor`, previewing into the visible article; editor scroll drives the article scroll — while any editor is open the window scroll is locked (`body.editing`), the panel exactly fills the available window height, and only `#main` scrolls; a format bar offers Markdown helpers — bold/italic/code/link/table/image upload, with Ctrl/Cmd-B/I/S bindings — for the hard-to-remember syntax. Edits content and title only, never the path.
+- `PageEditor.vue` — CodeMirror + server-rendered preview over WebSocket `/_api/ws/editor`, previewing into the visible article; editor and article scrolls are linked proportionally both ways, applied instantly (the window keeps scrolling normally while any editor is open — the panel is fixed to the viewport's left edge, its top tracking the banner's bottom edge until the banner scrolls away — and the panel scrolls internally); a format bar offers Markdown helpers — bold/italic/code/link/table/image upload, with Ctrl/Cmd-B/I/S bindings — for the hard-to-remember syntax. Edits content and title only, never the path.
 - `BannerEditor.vue` — per-page banner HTML + banner design selector, previewed into `#page-banner`.
 - `SiteEditor.vue` — site brand + optional custom brand HTML with image/video upload + theme selector + font picker + favicon upload — clicking the preview tile picks a new one — + site-wide custom CSS, CSS injected into `<head id="pagerite-user">`.
 - `StructureEditor.vue` — the vue-draggable structure tree with always-editable title/slug inputs per row.
 
 Media uploads everywhere use the image icon buttons (pasting into the editor works too). The article, banner and site-settings pens are shorthands that open the shell on the matching tab; once open, clicking a pen switches tabs (and retargets the editors to the current page) instead of closing/remounting. The close button in the tab bar closes the shell (Escape too); tabs have no close buttons of their own. Closing only HIDES the shell — the Vue app stays mounted, so page-editor state (unsaved text included) survives until a real page reload; saving there is explicit (Ctrl+S) and refreshes the page regions in place. Admin panels never reload the page.
 
-In-place page re-rendering shared by the banner/site/structure tabs lives in `swapdoc.js` (`runScripts`/`loadPlain`: fetch a page, swap the dynamic regions, replaceState). Placeholder texts are reserved for showing the actual default in effect when a field is left empty (e.g. the pending row's slug derived from its title); labels and help are real elements or tooltips, never placeholders.
+In-place page re-rendering shared by the banner/site/structure tabs lives in `swapdoc.js` (`runScripts`/`loadPlain`: fetch a page, swap the dynamic regions, replaceState). It also exports `dropPageCache`, which the editor tabs call after any save that can alter the rendered HTML of other pages (theme, headings, structure, banners, site brand/CSS, favicon). Dropping the cache while editing avoids re-fetching every page immediately; the public runtime re-preloads visible links once the editor panel closes.
 
 ## Saving behavior
 
-Everything saves immediately as you edit (brand/title/CSS debounced, slug on commit since it renames the path), theme change swaps the stylesheet in place, tree rows navigate in place without transitions when focused, and the front page is a root-only row whose empty slug is editable like any other.
+Everything saves immediately as you edit (brand/title/CSS debounced, slug on commit since it renames the path), theme change swaps the stylesheet in place, tree rows navigate in place without transitions when focused, and the front page is a root-only row whose empty slug is editable like any other. Saves that can affect other pages drop the prefetch cache; the cache is rebuilt when the editor panel closes so navigation stays instant.
 
 Every non-empty list (and the root) ends with a non-draggable plus footer row (vuedraggable `#footer` slot): clicking it starts a new pending page at that level (its slug placeholder shows the slug derived live from the title being typed), and while dragging it is the list's "end of list" drop target. Committing a pending page PUTs it with empty markdown (creates an empty page that renders with its title — saving never deletes; deletion is the page editor's explicit choice: saving trimmed-empty text issues a REST DELETE), then switches to the page editor tab for the actual writing.
 

docs/frontend-runtime.md

@@ -8,7 +8,7 @@ Vue editor app entry, mounts the tabbed `EditorShell`. See `docs/editing.md` for
 
 ## `pagerite.js`
 
-Public page entry; runs fetch-navigation (backed by an in-memory page cache: every visible internal link is fetched once at load and clicks are then served from JS with no fetch — the current page itself is not refetched, it enters the cache when navigated to — and the editors' `loadPlain` keeps the cache current via a `pagerite:page-fetched` event; articles are `cache-control: no-cache` on the wire), scroll-reveal, OverlayScrollbars on `document.body` (floating, auto-hiding scrollbars that never reserve layout space or shift the page when appearing; native scroll APIs like `window.scrollTo` keep working; themed via the `--os-*` variables in pagerite.css), brand shrink-to-fit (the themed size is the maximum; JS reduces the font-size so a long brand or narrow viewport still fits one line), nav condense-to-fit (the top nav stays on one row: link gaps shrink first, then the side padding, then the font size; `flex-wrap: wrap` remains the no-JS fallback), code copy buttons, and the auth check.
+Public page entry; runs fetch-navigation (backed by an in-memory page cache: every visible internal link is fetched once at load and clicks are then served from JS with no fetch — the current page itself is not refetched, it enters the cache when navigated to — and the editors' `loadPlain` keeps the cache current via a `pagerite:page-fetched` event; articles are `cache-control: no-cache` on the wire). Editors can drop the entire cache with the `pagerite:drop-page-cache` event when site-wide or page changes (theme, headings, structure, banners, etc.) invalidate the cached HTML of other pages; `main.js` triggers a fresh `pagerite:preload-pages` pass when the editor panel closes so navigation is fast again. Navigation that starts while the editor is open bypasses the cache and fetches the target page on demand. Also runs scroll-reveal, OverlayScrollbars on `document.body` (floating, auto-hiding scrollbars that never reserve layout space or shift the page when appearing; native scroll APIs like `window.scrollTo` keep working; themed via the `--os-*` variables in pagerite.css), brand shrink-to-fit (the themed size is the maximum; JS reduces the font-size so a long brand or narrow viewport still fits one line), nav condense-to-fit (the top nav stays on one row: link gaps shrink first, then the side padding, then the font size; `flex-wrap: wrap` remains the no-JS fallback), code copy buttons, and the auth check.
 
 It first probes `GET /auth/api/settings` to detect whether Paskia SSO is available, then `GET /_api/settings` to learn the current session's admin status. The same reverse proxy that gates `/_api` returns 401 for anonymous users, 403 for users without the admin permission, and 200 for admins. When Paskia is detected, a login link (anonymous) or profile link (logged in) is shown in the banner corner; both are plain `<a href="/auth/">` links (Paskia does not support being iframed, so we navigate normally), and a `pageshow` handler re-probes auth when history navigation restores a cached page. Admins also get the page/banner edit pens and a site-settings pen, plus a `modulepreload` warm-up of the editor bundle (the hashed asset is immutable, so it costs nothing). If no Paskia SSO is detected (dev/no proxy), editing is left open. Pages themselves render identically for everyone; the real gate is the auth proxy in front of all of `/_api`.
 

frontend/src/AnalyticsView.vue

@@ -233,7 +233,6 @@ const abuseRows = computed(() => formatAbuseRows(rangeData.value?.abuse || [], c
               </tbody>
             </table>
           </div>
-          <p v-else class="empty">no crawler hits recorded yet</p>
 
           <div v-if="abuseRows.length" class="visit-table-wrap">
             <table class="visit-table">

frontend/src/BannerEditor.vue

@@ -6,7 +6,7 @@ import { EditorView, basicSetup } from 'codemirror'
 import { EditorState } from '@codemirror/state'
 import { html } from '@codemirror/lang-html'
 import { cmHighlight, cmTheme } from './cmtheme'
-import { loadPlain, runScripts } from './swapdoc'
+import { dropPageCache, loadPlain, runScripts } from './swapdoc'
 
 const props = defineProps({
   pagePath: { type: String, default: '' },
@@ -215,6 +215,8 @@ function onMessage(ev) {
   } else if (msg.type === 'saved') {
     saveError.value = ''
     pendingSave = null
+    // Banner HTML/design changes affect the rendered page; invalidate prefetches.
+    dropPageCache()
     refreshOnSave?.()
     refreshOnSave = null
   } else if (msg.type === 'error') {

frontend/src/PageEditor.vue

@@ -4,9 +4,9 @@
 // (/_api/ws/editor). Docked left of the article on the page itself.
 // The socket connects when the editor is opened and reconnects with
 // exponential backoff after a failure; unsaved text and pending saves
-// survive a disconnect. Editor scroll drives the article scroll (while
+// survive a disconnect. Editor and article (window) scrolls are linked
-// editing the window scroll is locked and only #main scrolls), keeping the
+// proportionally both ways (syncWindowToEditor / syncEditorToWindow).
-// rendered article at the cursor's position. Saving (💾 / Ctrl+S) is explicit
+// Saving (💾 / Ctrl+S) is explicit
 // and refreshes the page regions in place — never a reload — so the editor
 // state (unsaved text included) also survives closing the shell; it is lost
 // only on a real page reload.
@@ -15,7 +15,7 @@ import { EditorView, basicSetup } from 'codemirror'
 import { EditorState } from '@codemirror/state'
 import { markdown } from '@codemirror/lang-markdown'
 import { cmHighlight, cmTheme } from './cmtheme'
-import { loadPlain } from './swapdoc'
+import { dropPageCache, loadPlain } from './swapdoc'
 
 const props = defineProps({
   pagePath: { type: String, default: '' },
@@ -113,7 +113,9 @@ async function saveAndRefresh() {
   await save()
   dirty.value = false
   // Refresh the page regions from the server so nav/sidebar changes apply
-  // (never a reload: the editor keeps its state).
+  // (never a reload: the editor keeps its state). Drop the prefetch cache
+  // first: heading/title changes affect navigation on every page.
+  dropPageCache()
   loadPlain(path.value)
 }
 
@@ -307,20 +309,42 @@ function onEditorShown() {
   if (dirty.value) requestRender()
 }
 
-function syncScroll() {
+// Bidirectional proportional scroll sync between the CodeMirror scroller
-  // Editor scroll drives the article: keep the rendered page at the same
+// and the window (the article's scroller, also while editing). Both
-  // proportional position as the cursor area in the editor. While editing
+// directions apply instantly (never smooth — a smooth window scroll feeds
-  // the window scroll is locked and #main is the scrolling element.
+// its intermediate positions back into the editor and fights the user's
+// scrolling) and coalesce to one update per frame. Loops are broken two
+// ways: a driver flag held until one frame AFTER the write (the scroll
+// event a programmatic write dispatches arrives asynchronously — clearing
+// the flag in the writing frame would let the echo through and the two
+// directions would chase each other, which showed up as random jumping
+// whenever layout shifted the proportional targets mid-scroll), and a 1px
+// tolerance so residual rounding is a no-op. When the panel's height
+// changes mid-scroll (its top tracks the banner), the page is the driver:
+// the editor is re-matched to the page's position, never vice versa.
+function syncWindowToEditor() {
   if (syncingScroll || !view) return
-  const main = document.getElementById('main')
-  if (!main) return
   syncingScroll = true
   requestAnimationFrame(() => {
     const scroller = view.scrollDOM
     const max = scroller.scrollHeight - scroller.clientHeight
     const pct = max > 0 ? scroller.scrollTop / max : 0
-    main.scrollTop = pct * (main.scrollHeight - main.clientHeight)
+    const y = pct * Math.max(0, document.documentElement.scrollHeight - innerHeight)
-    syncingScroll = false
+    if (Math.abs(scrollY - y) > 1) scrollTo({ top: y, behavior: 'instant' })
+    requestAnimationFrame(() => { syncingScroll = false })
+  })
+}
+
+function syncEditorToWindow() {
+  if (syncingScroll || !view) return
+  syncingScroll = true
+  requestAnimationFrame(() => {
+    const scroller = view.scrollDOM
+    const pageMax = Math.max(0, document.documentElement.scrollHeight - innerHeight)
+    const pct = pageMax > 0 ? scrollY / pageMax : 0
+    const top = pct * Math.max(0, scroller.scrollHeight - scroller.clientHeight)
+    if (Math.abs(scroller.scrollTop - top) > 1) scroller.scrollTop = top
+    requestAnimationFrame(() => { syncingScroll = false })
   })
 }
 
@@ -379,7 +403,11 @@ onMounted(() => {
     }),
     parent: editorEl.value,
   })
-  view.scrollDOM.addEventListener('scroll', syncScroll)
+  view.scrollDOM.addEventListener('scroll', syncWindowToEditor)
+  // Page → editor: window scroll (and resizes, e.g. the panel growing when
+  // the banner scrolls away) re-match the editor to the page's position.
+  addEventListener('scroll', syncEditorToWindow, { passive: true })
+  addEventListener('resize', syncEditorToWindow)
   // Opening the editor means you want to write: start focused.
   view.focus()
   window.__pageritePageEditor = {
@@ -399,6 +427,8 @@ onUnmounted(() => {
   }
   view?.destroy()
   delete window.__pageritePageEditor
+  removeEventListener('scroll', syncEditorToWindow)
+  removeEventListener('resize', syncEditorToWindow)
   removeEventListener('keydown', onKeydown)
   removeEventListener('pagerite:editor-shown', onEditorShown)
 })
@@ -606,7 +636,7 @@ onUnmounted(() => {
 
 /* CodeMirror sits inside a bordered box, like a dialog's input area, with
    a slight margin to the panel edges. Wheel scroll stays in the editor and
-   drives the article (syncScroll) instead of double-scrolling. */
+   drives the article (syncWindowToEditor) instead of double-scrolling. */
 .editor {
   flex: 1;
   min-width: 0;

frontend/src/SiteEditor.vue

@@ -8,7 +8,7 @@ import { EditorState } from '@codemirror/state'
 import { css } from '@codemirror/lang-css'
 import { html } from '@codemirror/lang-html'
 import { cmHighlight, cmTheme } from './cmtheme'
-import { loadPlain, runScripts } from './swapdoc'
+import { dropPageCache, loadPlain, runScripts } from './swapdoc'
 
 const props = defineProps({
   pagePath: { type: String, default: '' },
@@ -110,6 +110,7 @@ async function uploadFavicon(file) {
     const { path: url } = await res.json()
     favicon.value = url
     applyFavicon(url)
+    dropPageCache()
   } else {
     saveError.value = `⚠️ ${await errorDetail(res)}`
   }
@@ -234,6 +235,7 @@ async function saveSettings(opts = {}) {
   })
   if (res.ok) {
     saveError.value = ''
+    dropPageCache()
   } else {
     saveError.value = '⚠️ changes could not be saved'
   }

frontend/src/StructureEditor.vue

@@ -10,7 +10,7 @@
 import { inject, onActivated, onMounted, onUnmounted, provide, ref, watch } from 'vue'
 import StructureTree from './StructureTree.vue'
 import { slugify } from './slugify'
-import { loadPlain } from './swapdoc'
+import { dropPageCache, loadPlain } from './swapdoc'
 
 const props = defineProps({
   pagePath: { type: String, default: '' },
@@ -144,6 +144,7 @@ async function commitPending() {
   }
   pending.value = null
   await refreshPages()
+  dropPageCache()
   await navigate(newPath)
   // Hand over to the page editor tab for the actual writing.
   shell?.switchMode('page')
@@ -171,6 +172,8 @@ async function postStructure(op) {
   })
   if (res.ok) {
     saveError.value = ''
+    // Structure changes alter navigation on every page; drop prefetches.
+    dropPageCache()
     loadPlain(path.value) // refresh menus and content from the server
   } else {
     saveError.value = `⚠️ ${await errorDetail(res)}`
@@ -234,6 +237,7 @@ async function removePage(node) {
   if (res.ok) {
     saveError.value = ''
     refreshPages()
+    dropPageCache()
     const p = node.path
     if (p === path.value || (p && path.value.startsWith(`${p}/`))) {
       // The current page was deleted — or reduced to a category, which now

frontend/src/TransitionGraph.vue

@@ -7,7 +7,7 @@
  * so the visual scale can normalize against a one-week reference.
  */
 import { computed, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'
-import { DAY, WEEK } from './analytics/time.js'
+import { DAY } from './analytics/time.js'
 import { formatCount } from './analytics/format.js'
 import {
   TNODE_W,
@@ -22,9 +22,10 @@ const props = defineProps({
   pageTree: { type: Array, default: null },
 })
 
-const visualScale = computed(() => {
+const dayScale = computed(() => {
   const { t0, t1 } = props.window
-  if (t0 != null && t1 != null) return WEEK / (t1 - t0)
+  // Convert raw counts to a daily hit rate (hits/day).
+  if (t0 != null && t1 != null) return DAY / (t1 - t0)
   // 'all': scale by the actual data span, but never less than the 30-day
   // minimum the plot enforces, so sparse young data is not over-amplified.
   const times = new Set()
@@ -34,12 +35,12 @@ const visualScale = computed(() => {
   const arr = [...times]
   if (arr.length < 2) return 1
   const span = Math.max(...arr) - Math.min(...arr)
-  return WEEK / Math.max(span, 30 * DAY)
+  return DAY / Math.max(span, 30 * DAY)
 })
 
 const graph = computed(() =>
   props.data
-    ? buildTransitionGraph(props.data, props.pageTree, props.data.visits || [], visualScale.value)
+    ? buildTransitionGraph(props.data, props.pageTree, props.data.visits || [], dayScale.value)
     : null,
 )
 
@@ -58,7 +59,7 @@ const live = [] // { e, p } — beads in flight, p = progress 0..1
 let lastTick = 0
 
 const MAX_BEAD_RATE = 120 // upper bound on total beads per second
-const TRAVERSAL_S = 1.5 // seconds to cross any segment, end to end
+const TRAVERSAL_S = 0.4 // seconds to cross any segment, end to end
 
 const syncBeads = (flows) => {
   const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches

frontend/src/VisitorCharts.vue

@@ -68,8 +68,8 @@ const viewChart = computed(() => buildChart(viewSeries.value, now.value))
 
 <template>
   <section v-for="c in [
-      { ylabel: 'visits', chart: visitChart, legend: true, empty: 'no visits recorded yet' },
+      { ylabel: 'visits', chart: visitChart, legend: true },
-      { ylabel: 'views', chart: viewChart, legend: false, empty: 'no views recorded yet' },
+      { ylabel: 'views', chart: viewChart, legend: false },
     ]" :key="c.ylabel">
     <template v-if="c.chart">
       <svg class="chart" :viewBox="`${-MARGIN_L} 0 ${VIEW_W} ${VIEW_H}`"
@@ -116,7 +116,6 @@ const viewChart = computed(() => buildChart(viewSeries.value, now.value))
         </g>
       </svg>
     </template>
-    <p v-else class="empty">{{ c.empty }}</p>
   </section>
 </template>
 

frontend/src/analytics/chart.js

@@ -48,8 +48,10 @@ export function yScale(maxValue) {
  * and each run of candidates keeps only its best-scoring bucket as an
  * edge). Each edge-delimited segment is then smoothed independently: every
  * bucket spreads its count with a fixed Gaussian sigma chosen so N events
- * in a single bucket peak at N events per unit, clipped to the segment and
+ * in a single bucket peak at N events per unit. Mass past a detected change
- * renormalized so total visitor count is preserved exactly. The unit is
+ * point is dropped (kernel renormalized); mass past a true series edge is
+ * mirrored back, so the curve doesn't fall where data simply ends. Either
+ * way total visitor count is preserved exactly. The unit is
  * one hour on the week view and one day on the month+ views, so the
  * smoothing time scale follows the range. The raw series is drawn faintly
  * behind the curve for reference. Operates on raw counts.
@@ -110,28 +112,42 @@ export function smooth(counts, binMinutes, unitMinutes, {
 
   // Process each discontinuity-delimited regime independently so the
   // Gaussian cannot see through a detected boundary. Each input bin spreads
-  // its count with the fixed sigma; the kernel is renormalized after
+  // its count with the fixed sigma. Mass that would fall past a detected
-  // clipping to the segment, preserving total visitor count apart from
+  // change point is dropped and the kernel renormalized; mass that would
-  // floating-point error.
+  // fall past a true series edge (first/last bin) is mirrored back into the
+  // segment, as if the data continued as its own reflection, so constant or
+  // rising data doesn't produce a spurious falling edge. Total visitor count
+  // is preserved apart from floating-point error.
   const bounds = [0, ...edges, n]
   const smoothed = new Float64Array(n)
   for (let b = 0; b < bounds.length - 1; b++) {
     const lo = bounds[b]
     const length = bounds[b + 1] - lo
+    const mirrorLeft = lo === 0
+    const mirrorRight = lo + length === n
     const segment = counts.slice(lo, lo + length)
     for (let j = 0; j < length; j++) {
       const count = segment[j]
       if (!count) continue
-      const start = Math.max(0, j - radius)
+      // Collect (target bin, weight) pairs over the full kernel, folding
-      const end = Math.min(length, j + radius + 1)
+      // mirrored mass at series edges and dropping mass past change points.
+      const spread = new Map()
       let weightSum = 0
-      for (let i = start; i < end; i++) {
+      for (let i = j - radius; i <= j + radius; i++) {
-        const d = i - j
+        let k = i
-        weightSum += Math.exp(-0.5 * (d / sigmaBins) ** 2)
+        // Fold repeatedly for segments shorter than the kernel radius.
+        while (k < 0 || k >= length) {
+          if (k < 0 && mirrorLeft) k = -k - 1
+          else if (k >= length && mirrorRight) k = 2 * length - 1 - k
+          else { k = null; break }
+        }
+        if (k === null) continue
+        const w = Math.exp(-0.5 * ((i - j) / sigmaBins) ** 2)
+        spread.set(k, (spread.get(k) || 0) + w)
+        weightSum += w
       }
-      for (let i = start; i < end; i++) {
+      for (const [k, w] of spread) {
-        const d = i - j
+        smoothed[lo + k] += count * w / weightSum
-        smoothed[lo + i] += count * Math.exp(-0.5 * (d / sigmaBins) ** 2) / weightSum
       }
     }
   }

frontend/src/analytics/time.js

@@ -63,9 +63,24 @@ export function sumRange(raw, t0, t1) {
 export function weeklySeries(buckets) {
   const raw = rawTimes(buckets)
   const times = Object.keys(raw).map(Number)
-  if (!times.length) return null
   const now = Date.now()
   const thisMonday = mondayUTC(now)
+  if (!times.length) {
+    const points = []
+    const end = Math.min(thisMonday + WEEK, Math.floor(now / MIN5) * MIN5 + MIN5)
+    for (let t = thisMonday; t < end; t += MIN5) {
+      points.push({ t, count: 0 })
+    }
+    return {
+      series: [{ points, label: `Week ${isoWeek(thisMonday)}`, opacity: 1, area: true }],
+      t0: thisMonday,
+      t1: thisMonday + WEEK,
+      rate: HOUR / MIN5,
+      binMinutes: 5,
+      unitMinutes: 60,
+      unit: 'hour',
+    }
+  }
   const oldest = Math.min(...times)
   // Weeks back as far as the data reaches: difference in Monday indices.
   const available = (thisMonday - mondayUTC(oldest)) / WEEK + 1
@@ -113,13 +128,27 @@ export function weeklySeries(buckets) {
 export function rollingSeries(buckets, rangeKey) {
   const raw = rawTimes(buckets)
   const times = Object.keys(raw).map(Number)
-  if (!times.length) return null
   const { span, bucket, minSpan = 0 } = RANGES[rangeKey]
   const t1 = Date.now()
-  const earliest = Math.min(...times)
   const t0 = Math.floor((span != null
     ? t1 - span
-    : Math.min(earliest, t1 - minSpan)) / DAY) * DAY
+    : Math.min(times.length ? Math.min(...times) : Infinity, t1 - minSpan)) / DAY) * DAY
+  if (!times.length) {
+    const bucketMs = t1 - t0 <= 31 * DAY ? Math.min(bucket, 6 * HOUR) : bucket
+    const points = []
+    for (let t = t0; t < t1; t += bucketMs) {
+      points.push({ t, count: 0 })
+    }
+    return {
+      series: [{ points, label: '', opacity: 1, area: true }],
+      t0,
+      t1,
+      rate: DAY / bucketMs,
+      binMinutes: bucketMs / 60e3,
+      unitMinutes: 24 * 60,
+      unit: 'day',
+    }
+  }
   // The bucket follows the actual window length, not the range key: when
   // "all" is capped to its 30-day minimum it covers the very window "month"
   // does, and daily bins would draw a different curve over the same data

frontend/src/analytics/transitions.js

@@ -11,8 +11,9 @@
  * directions into straight connections (middle width = total
  * count; connectors flare into the node pills at both ends and wrap
  * around their backs, surrounding them; the pills are drawn on top). Connection width grows
- * logarithmically with the count (a single count renders as a ~1 px
+ * logarithmically with the daily hit rate (base-2 log, one hit/day
- * line, uncapped growth); connections carrying less than 1% of the total
+ * renders zero width, each doubling adds a fixed step, uncapped);
+ * connections carrying less than 1% of the total
  * traffic are pruned, which naturally keeps the graph under ~100
  * connections. Animated beads flow along every edge in each direction,
  * emitted at time intervals inversely proportional (linear) to the
@@ -122,26 +123,28 @@ const pillTangent = (s, margin = 0) => {
   return [(x2 - x1) / m, (y2 - y1) / m]
 }
 
-// Edge width (half-width of the thin middle) grows logarithmically with
+// Edge width: half-width = WIDTH_GROWTH * log2(daily / DAILY_REF),
-// the count. The constants are scaled down by ~10× so busy ranges (day,
+// where `daily` is the connection's hit rate in hits/day (callers scale
-// year) do not overwhelm the graph with fat connectors. Connections whose
+// raw counts by DAY / range). DAILY_REF hits/day renders zero width;
-// thin middle would render below MIN_WMID are culled entirely: fainter
+// WIDTH_GROWTH is the half-width added per doubling of the rate.
-// strands are practically invisible and only their wide end flares would
+// Connections whose thin middle would render below MIN_WMID are culled
-// show. Connections carrying less than PRUNE_FRACTION of the total traffic
+// entirely (fainter strands are practically invisible), as are those
-// are likewise not drawn (this also keeps the graph under ~100 connections).
+// carrying less than PRUNE_FRACTION of the total traffic (this also
-const WMID_MIN = 0.2
+// keeps the graph under ~100 connections).
-const WIDTH_GROWTH = 0.15
+const WIDTH_GROWTH = 1.4 // half-width px per doubling of the daily rate
+const DAILY_REF = 0.8 // hits/day at which the width is zero
 const PRUNE_FRACTION = 0.01
 // ~0.8 px full width at natural size (1 viewBox unit = 1 px).
 const MIN_WMID = 0.4
 
-// Beads: each edge direction emits beads at count * BEAD_RATE beads per
+// Beads: each edge direction emits beads at dailyRate * BEAD_RATE beads
-// second (linear in the count). The rate is reduced ~10× across all time
+// per second (linear in the daily hit rate). The rate is much reduced
-// scales to keep the animation lightweight. The component simulates every
+// from real time to keep the animation lightweight. The component
-// bead independently in JS with a constant traversal time per edge (speed
+// simulates every bead independently in JS with a constant traversal
-// relative to span length), with no limit on beads in flight.
+// time per edge (speed relative to span length), with no limit on beads
+// in flight.
 export const BEAD_R = 3.2
-const BEAD_RATE = 0.012 // beads per second per recorded transition
+const BEAD_RATE = 0.0084 // beads per second per hit/day
 const FLOW_OFFSET = 3 // lane offset to the right of the travel direction
 
 const MAX_EXT_IN = 8 // referer nodes in the top row
@@ -262,7 +265,7 @@ function buildReadMinutes(visits) {
   for (const v of visits || []) {
     for (const [path, sec] of Object.entries(v.read || {})) {
       if (sec >= MIN_READ_SECONDS) {
-        ;(times[path] || (times[path] = [])).push(sec)
+        ; (times[path] || (times[path] = [])).push(sec)
       }
     }
   }
@@ -621,12 +624,12 @@ function buildRibbon(a, b, ab, ba, wMid, external = false) {
  * to inside the target node (beads render under the node pills, so
  * they emerge from and vanish beneath the nodes rather than popping in
  * at the surround), plus the emission interval (seconds between beads,
- * inverse of count * BEAD_RATE). Each segment is offset to the
+ * inverse of the daily hit rate * BEAD_RATE). Each segment is offset to the
  * right-hand side of its travel direction, so opposing flows on the same
  * edge run on parallel lanes instead of colliding. The component turns
  * these into independently simulated beads.
  */
-function buildFlows(a, b, ab, ba, visualScale = 1) {
+function buildFlows(a, b, ab, ba, dayScale = 1) {
   const len = Math.hypot(b.x - a.x, b.y - a.y) || 1
   const ux = (b.x - a.x) / len
   const uy = (b.y - a.y) / len
@@ -649,7 +652,7 @@ function buildFlows(a, b, ab, ba, visualScale = 1) {
       x2: a.x + toT * ux + s * rx,
       y2: a.y + toT * uy + s * ry,
       len: span,
-      interval: 1 / (count * BEAD_RATE * visualScale),
+      interval: 1 / (count * BEAD_RATE * dayScale),
     }
   }
   const flows = []
@@ -661,14 +664,14 @@ function buildFlows(a, b, ab, ba, visualScale = 1) {
 }
 
 /**
- * Half-width for a connection middle: logarithmic in the count, anchored
+ * Half-width for a connection middle: base-2 logarithmic in the daily
- * at WMID_MIN, uncapped. Absolute on purpose — cool routes stay visible
+ * hit rate, zero at DAILY_REF hits/day, uncapped. Absolute on purpose —
- * regardless of how hot the hottest connection is. Callers cull results
+ * cool routes stay visible regardless of how hot the hottest connection
- * below MIN_WMID.
+ * is. Callers cull results below MIN_WMID.
  */
-const scaledWidth = (count) => {
+const scaledWidth = (daily) => {
-  if (count <= 0) return 0
+  if (daily <= 0) return 0
-  return WMID_MIN + WIDTH_GROWTH * Math.log1p(count - 1)
+  return WIDTH_GROWTH * Math.log2(daily / DAILY_REF)
 }
 
 /**
@@ -676,7 +679,7 @@ const scaledWidth = (count) => {
  * pair. Pairs carrying less than PRUNE_FRACTION of the total internal
  * traffic are pruned (this naturally bounds the graph to ~100 edges).
  */
-function buildInternalEdges(pairs, byPath, visualScale = 1) {
+function buildInternalEdges(pairs, byPath, dayScale = 1) {
   let total = 0
   for (const [, [ab, ba]] of pairs) total += ab + ba
   const minCount = total * PRUNE_FRACTION
@@ -689,10 +692,10 @@ function buildInternalEdges(pairs, byPath, visualScale = 1) {
     const a = byPath.get(pf)
     const b = byPath.get(pt)
     if (a.hidden || b.hidden) continue // unplaced index pages are omitted
-    const wMid = scaledWidth((ab + ba) * visualScale)
+    const wMid = scaledWidth((ab + ba) * dayScale)
     if (wMid < MIN_WMID) continue
     edges.push(buildRibbon(a, b, ab, ba, wMid))
-    flows.push(...buildFlows(a, b, ab, ba, visualScale))
+    flows.push(...buildFlows(a, b, ab, ba, dayScale))
   }
   return { edges, flows }
 }
@@ -768,7 +771,7 @@ function collectSourcePairs(visits) {
  * Widths and pruning use the same log scale and traffic-share rule as
  * internal connections.
  */
-function buildExternal({ sources, exits }, byPath, innerBounds, visualScale = 1) {
+function buildExternal({ sources, exits }, byPath, innerBounds, dayScale = 1) {
   const extNodes = []
   const edges = []
   const flows = []
@@ -780,7 +783,7 @@ function buildExternal({ sources, exits }, byPath, innerBounds, visualScale = 1)
   const liveExits = exits.filter((p) => byPath.has(p.page))
   if (!liveSources.length && !liveExits.length) return { extNodes, edges, flows }
 
-  const width = (count) => scaledWidth(count * visualScale)
+  const width = (count) => scaledWidth(count * dayScale)
 
   // Incoming: one source node per identified source, in a row centered
   // above the map, with an edge to each page that source led to. A source
@@ -826,7 +829,7 @@ function buildExternal({ sources, exits }, byPath, innerBounds, visualScale = 1)
         const wMid = width(p.in)
         if (wMid < MIN_WMID) continue
         edges.push(buildRibbon(xn, page, p.in, 0, wMid, true))
-        flows.push(...buildFlows(xn, page, p.in, 0, visualScale))
+        flows.push(...buildFlows(xn, page, p.in, 0, dayScale))
       }
     })
   }
@@ -871,7 +874,7 @@ function buildExternal({ sources, exits }, byPath, innerBounds, visualScale = 1)
         const wMid = width(p.out)
         if (wMid < MIN_WMID) continue
         edges.push(buildRibbon(page, xn, p.out, 0, wMid, true))
-        flows.push(...buildFlows(page, xn, p.out, 0, visualScale))
+        flows.push(...buildFlows(page, xn, p.out, 0, dayScale))
       }
     })
   }
@@ -883,9 +886,10 @@ function buildExternal({ sources, exits }, byPath, innerBounds, visualScale = 1)
  * Build the transition map model.
  * Returns { nodes, edges, flows, extNodes, arcs, bounds } or null when
  * there is nothing to show. `arcs` holds the branch curves; `nodes` only
- * contains placed (visible) nodes.
+ * contains placed (visible) nodes. `dayScale` converts raw counts to a
+ * daily hit rate (DAY / range ms) for edge widths and bead rates.
  */
-export function buildTransitionGraph(data, pageTree, visits = [], visualScale = 1) {
+export function buildTransitionGraph(data, pageTree, visits = [], dayScale = 1) {
   const internal = collectInternalTransitions(data?.transitions)
   const sources = collectSourcePairs(visits)
   const exits = collectExitPairs(data?.transitions)
@@ -901,7 +905,7 @@ export function buildTransitionGraph(data, pageTree, visits = [], visualScale =
   const { arcs, arcLeft } = layoutGroups(root)
   const placed = nodes.filter((n) => !n.hidden)
   const pairs = aggregatePairs(internal)
-  const { edges, flows } = buildInternalEdges(pairs, byPath, visualScale)
+  const { edges, flows } = buildInternalEdges(pairs, byPath, dayScale)
 
   // Tight bounding box of the placed page nodes, extended to cover the
   // branch curves running left of the pills; external nodes extend it.
@@ -920,7 +924,7 @@ export function buildTransitionGraph(data, pageTree, visits = [], visualScale =
     y1: Math.max(...ys) + MY,
   }
 
-  const ext = buildExternal({ sources, exits }, byPath, bounds, visualScale)
+  const ext = buildExternal({ sources, exits }, byPath, bounds, dayScale)
   for (const xn of ext.extNodes) {
     bounds.x0 = Math.min(bounds.x0, xn.x - MX)
     bounds.y0 = Math.min(bounds.y0, xn.y - MY)

frontend/src/assets/pagerite.css

@@ -73,6 +73,10 @@ a {
 
 html {
   scroll-behavior: smooth;
+  /* No rubber-band bounce past the page ends (macOS trackpads): the banner
+     parallax in --pry is driven by scrollY and overscroll would let the
+     artwork drift beyond its designed range. */
+  overscroll-behavior: none;
   /* Native-scrollbar fallback styling (JS off or before pagerite.js runs):
      thin, theme-muted thumb on a transparent track. With JS the scrollbars
      are replaced by OverlayScrollbars (see pagerite.js) — floating,
@@ -122,7 +126,8 @@ body {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  min-height: 11rem;
+  height: 13rem;
+  box-sizing: content-box;
   background: linear-gradient(135deg, var(--surface), var(--bg));
   border-bottom: 1px solid var(--line);
 }
@@ -253,8 +258,6 @@ body {
   position: relative;
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 78rem) minmax(0, 1fr);
-  /* The docked editor pushes the content (not the header) right. */
-  transition: margin-left 0.25s ease;
 }
 
 /* Long articles (.multicol is added by pagerite.js based on content length)
@@ -269,10 +272,9 @@ body:has(.multicol) #content {
 
 body.editing #content {
   margin-left: var(--editor-w);
-  padding-left: 1rem;
+  /* No padding/gap here: the article area starts flush at the panel's right
-  /* gap between the docked editor and the content */
+     edge so that full-bleed .wide images (anchored to that edge below) line
-  /* No overflow clipping here: .editor-host lives outside this box
+     up with it exactly. */
-     (negative left), and .wide shrink-wraps to the remaining space. */
 }
 
 /* The sidebar's gutter space is needed by the editor instead. */
@@ -280,34 +282,22 @@ body.editing #sidebar {
   display: none;
 }
 
-/* While editing, the window itself does not scroll: the editor panel is
+/* While editing, the window keeps scrolling normally (the overlay
-   exactly the remaining window height, and only the article area (#main)
+   scrollbars take no layout space, so the vw-based .wide bleed stays exact
-   scrolls. Without the editor, normal full-page scroll applies. */
+   and no horizontal scrollbar appears). The editor panel is fixed to the
-body.editing {
+   viewport's left edge; main.js sets its top each scroll frame — the
-  height: 100vh;
+   banner's bottom edge while the banner is visible, else the viewport top.
-  overflow: hidden;
+   The panel scrolls internally. */
-}
-
-body.editing #content {
-  min-height: 0;
-  grid-template-rows: 100%;
-}
-
-body.editing #main {
-  height: 100%;
-  min-height: 0;
-  overflow-y: auto;
-}
-
-/* The editor host lives inside #content: it starts below the banner and
-   ends above the footer. With the page scroll locked while editing, the
-   panel exactly fills that space — the full available window height. */
 .editor-host {
-  position: absolute;
+  position: fixed;
   top: 0;
+  /* main.js: banner bottom while visible, else 0 */
   bottom: 0;
-  left: calc(0px - var(--editor-w));
+  left: 0;
   width: var(--editor-w);
+  /* Above the sidebar and .edit-link while sliding in/out (the host now
+     lives at the end of <body>, so it needs its own stacking level). */
+  z-index: 3;
 }
 
 .editor-root.overlay {
@@ -385,7 +375,7 @@ body.editing #main {
 #sidebar ul ul {
   gap: 0.5em;
   margin-top: 0.5em;
-  padding-inline-start: 1em;
+  padding-inline-start: 1.8em;
 }
 
 #sidebar ul ul li::before {
@@ -452,7 +442,7 @@ article h3 {
    lines align. */
 article ul {
   list-style: none;
-  padding-inline-start: 1em;
+  padding-inline-start: 1.8em;
 }
 
 article ul li::before {
@@ -550,6 +540,13 @@ article dd {
 .multicol .colseg {
   margin-bottom: 1rem;
 
+  h3,
+  h4,
+  h5,
+  h6 {
+    break-after: avoid-column;
+  }
+
   p,
   li {
     break-inside: avoid-column;
@@ -809,8 +806,6 @@ div.wide {
   width: 100vw;
   max-width: none;
   margin-inline: calc(50% - 50vw);
-  /* Follow the docked editor's margin-left transition smoothly. */
-  transition: margin-left 0.25s ease;
 }
 
 /* Full bleed means edge to edge — no rounded corners. */
@@ -826,18 +821,18 @@ body:has(.multicol) figure:has(.wide) {
   margin-inline: calc(-20vw - 1.25rem) 0;
 }
 
-/* Editing: shrink the bleed to the space right of the docked editor. */
+/* Editing: shrink the bleed to the space right of the docked editor. The
+   window keeps its overlay scrollbars while editing, so — unlike a classic
+   scrollbar — they take no layout space and the vw math stays exact. */
 body.editing figure:has(.wide) {
   width: calc(100vw - var(--editor-w));
   margin-inline: calc(50% - (100vw - var(--editor-w)) / 2);
 }
 
 /* Editing + multicol: the left gutter is 1/5 of the space right of the
-   editor, and the bleed also crosses #content's 1rem editing gap plus
+   editor, and the bleed also crosses main's 1.25rem left padding. */
-   main's 1.25rem left padding (the gutter shrink from the padding roughly
-   cancels the rounding): −2rem in total. */
 body.editing:has(.multicol) figure:has(.wide) {
-  margin-inline: calc((100vw - var(--editor-w)) / -5 - 2rem) 0;
+  margin-inline: calc((100vw - var(--editor-w)) / -5 - 1.25rem) 0;
 }
 
 /* Narrow windows with a sidebar: below 102rem the symmetric gutters can no
@@ -911,6 +906,7 @@ article h2 {
    (explicit img widths still shrink-wrap), while .wide keeps its full
    viewport bleed. */
 @media (max-width: 48rem) {
+
   /* Nav type shrinks fluidly as space runs out. The nav font-size is
      em-based both in base and in every theme override, so scaling the
      banner's font-size (nothing else in the banner is em-sized — brand and
@@ -955,7 +951,7 @@ article h2 {
 
   /* Only the main level becomes a horizontal wrapping strip; submenus stay
      vertical blocks attached under their parent item. */
-  #sidebar > ul {
+  #sidebar>ul {
     flex-direction: row;
     flex-wrap: wrap;
     gap: 0.3rem 0.75rem;
@@ -1033,11 +1029,11 @@ footer {
   padding: 0;
 }
 
-/* Rotating-cube page transition, adapted from termotohtori.fi.
+/* Rotating-cube page transition. */
-   FRAGILE: do not tweak; the view-transition pseudo-tree is picky. */
 ::view-transition {
   perspective: 1000px;
   inset: 0;
+  background: color-mix(var(--bg) 50%, black 50%);
 }
 
 ::view-transition-group(root),

frontend/src/main.js

@@ -22,6 +22,52 @@ let host = null
 let app = null
 let savedTitle = null
 let visible = false
+let slideAnimation = null
+
+const SLIDE_MS = 250  // keep in sync with the panel slide in pagerite.css
+
+// The layout switches instantly when .editing toggles — no margin/width
+// transitions anywhere, so viewport resizes (and the vw-based .wide bleed)
+// always stay instant. The visible slide is a compositor-only FLIP
+// transform on #content, running in sync with the panel's own slide
+// (editor-slide-in / .closing in pagerite.css): both move by --editor-w
+// over the same duration and easing, so .wide's left edge tracks the
+// panel's right edge exactly throughout.
+function setEditingClass(enable) {
+  const content = document.getElementById('content')
+  const before = content.getBoundingClientRect().left
+  document.body.classList.toggle('editing', enable)
+  const delta = before - content.getBoundingClientRect().left
+  slideAnimation?.cancel()
+  if (delta) {
+    slideAnimation = content.animate(
+      { transform: [`translateX(${delta}px)`, 'translateX(0)'] },
+      { duration: SLIDE_MS, easing: 'ease' }
+    )
+  }
+}
+
+// The panel is fixed to the viewport's left edge (pagerite.css) but tracks
+// the page: its top is the banner's bottom edge while the banner is visible
+// (= #content's top edge), and the viewport top once the banner has
+// scrolled away. The window keeps scrolling normally while editing.
+function trackPanelTop() {
+  const content = document.getElementById('content')
+  if (host && content) {
+    host.style.top = `${Math.max(0, content.getBoundingClientRect().top)}px`
+  }
+}
+
+function startTrackingPanel() {
+  trackPanelTop()
+  addEventListener('scroll', trackPanelTop, { passive: true })
+  addEventListener('resize', trackPanelTop)
+}
+
+function stopTrackingPanel() {
+  removeEventListener('scroll', trackPanelTop)
+  removeEventListener('resize', trackPanelTop)
+}
 
 export function openEditor(path, { mode = 'page' } = {}) {
   if (app) {
@@ -36,9 +82,13 @@ export function openEditor(path, { mode = 'page' } = {}) {
   savedTitle = document.title
   host = document.createElement('div')
   host.className = 'editor-host'
-  // Docked inside #content: below the banner, next to the article only.
+  // Appended to <body>, not #content: the open/close slide transforms
-  document.getElementById('content').prepend(host)
+  // #content (setEditingClass), and a transformed element becomes the
-  document.body.classList.add('editing')
+  // containing block for fixed-position descendants — the panel would be
+  // dragged along with the content instead of sliding on its own.
+  document.body.append(host)
+  setEditingClass(true)
+  startTrackingPanel()
   // Which tab is active; pagerite.js uses this to decide whether a pen click
   // closes the panel or switches tabs.
   document.body.dataset.editorMode = mode
@@ -64,7 +114,8 @@ function showEditor() {
   savedTitle = document.title
   host.style.display = ''
   host.firstElementChild?.classList.remove('closing')
-  document.body.classList.add('editing')
+  setEditingClass(true)
+  startTrackingPanel()
   visible = true
   dispatchEvent(new CustomEvent('pagerite:editor-shown'))
 }
@@ -72,7 +123,8 @@ function showEditor() {
 export function closeEditor() {
   if (!visible) return
   visible = false
-  document.body.classList.remove('editing')
+  stopTrackingPanel()
+  setEditingClass(false)
   // dataset.editorMode is kept while hidden: the tabs use it to tell whether
   // a pagerite:editor-shown event targets them.
   // Slide the panel out in sync with the page shifting back, then hide it.
@@ -80,6 +132,9 @@ export function closeEditor() {
   const h = host
   setTimeout(() => { h.style.display = 'none' }, 250)
   dispatchEvent(new CustomEvent('pagerite:editor-hidden'))
+  // The editor may have dropped the prefetch cache; warm it again for the
+  // now-final page so navigation stays instant.
+  dispatchEvent(new CustomEvent('pagerite:preload-pages'))
   // Restore the server-rendered title for the current URL. Re-fetching makes
   // sure a brand change in the site editor or an in-place navigation leaves
   // the correct public title behind.

frontend/src/pagerite.js

@@ -53,6 +53,7 @@ import "overlayscrollbars/overlayscrollbars.css";
   // pageshow handler below re-probes auth to refresh the pens).
   let ssoAvailable = false;
   let isAdmin = false;
+  let authReady = false;
   let editorMeta = null;
 
   // Asset URLs for the on-demand bundles. Dev renders them as
@@ -106,7 +107,19 @@ import "overlayscrollbars/overlayscrollbars.css";
     return a;
   }
 
+  function removePens() {
+    document.querySelectorAll(".editor-pens, #main article button.edit-link")
+      .forEach((el) => el.remove());
+  }
+
   function renderAuthUi() {
+    // Always start from a clean slate: if the auth probe is still running we
+    // must not show any admin UI, and if it came back negative we must drop
+    // pens that may have been injected while the browser cache made us look
+    // authenticated.
+    removePens();
+    if (!authReady) return;
+
     // Editing is open for admins and, as a dev/no-proxy fallback, when no
     // Paskia SSO is detected at all.
     const canEdit = isAdmin || !ssoAvailable;
@@ -115,8 +128,6 @@ import "overlayscrollbars/overlayscrollbars.css";
     const onAnalytics = currentPath === "/_a";
     const banner = document.getElementById("page-banner");
     if (banner) {
-      const old = banner.parentElement.querySelector(".editor-pens");
-      if (old) old.remove();
       const pens = document.createElement("div");
       pens.className = "editor-pens";
       if (canEdit && !onAnalytics) {
@@ -137,8 +148,11 @@ import "overlayscrollbars/overlayscrollbars.css";
   }
 
   async function setupAuth() {
+    authReady = false;
+    renderAuthUi();
+
     const src = assets["pagerite:editor-src"];
-    if (!src) { pingEntryOnce(); return; }
+    if (!src) { authReady = true; renderAuthUi(); pingEntryOnce(); return; }
     editorMeta = {
       src,
       css: assets["pagerite:editor-css"],
@@ -180,7 +194,9 @@ import "overlayscrollbars/overlayscrollbars.css";
       }
     }
 
+    authReady = true;
     renderAuthUi();
+    placeEditPen();
     pingEntryOnce();
   }
 
@@ -253,8 +269,53 @@ import "overlayscrollbars/overlayscrollbars.css";
     // created page has no pen for commitPending's handover click.
     renderAuthUi();
     placeEditPen();
+    // Preview swaps also wipe the .colseg wrappers (the server render has
+    // none), which would drop the multi-column layout until a full reload;
+    // re-split so columns survive both live editing and closing the editor.
+    const main = document.getElementById("main");
+    if (main) applyMulticol(main);
   });
 
+  // Multi-column layout only when there is enough text to justify it.
+  // Split the body into columned segments: h1s, h2s and wide figures are
+  // full-width separators and never go inside columns.
+  function applyMulticol(main) {
+    const article = main.querySelector("article");
+    if (!article) return;
+    const body = article.querySelector(".body");
+    article.classList.toggle(
+      "multicol",
+      !!body && body.textContent.trim().length > 1800,
+    );
+    if (body && article.classList.contains("multicol")
+        && !body.querySelector(".colseg")) {
+      // h1s, h2s and anything holding a wide image are full-width
+      // separators
+      const isSeparator = (el) =>
+        el.tagName === "H1" || el.tagName === "H2"
+        || el.querySelector("img.wide") !== null;
+      let seg = null;
+      for (const el of [...body.children]) {
+        if (isSeparator(el)) {
+          seg = null;
+          body.append(el);
+        } else {
+          if (!seg) {
+            seg = document.createElement("div");
+            seg.className = "colseg";
+            body.append(seg);
+          }
+          seg.append(el);
+        }
+      }
+      // Columns are per section: only segments with enough text get them,
+      // so a short ingress or a brief section stays single-column.
+      for (const s of body.querySelectorAll(".colseg")) {
+        s.classList.toggle("cols", s.textContent.trim().length > 600);
+      }
+    }
+  }
+
   function applyEffects() {
     (window.requestIdleCallback || setTimeout)(preload);
     const main = document.getElementById("main");
@@ -264,44 +325,7 @@ import "overlayscrollbars/overlayscrollbars.css";
     renderAuthUi();
     placeEditPen();
     fitNav();
-    // Multi-column layout only when there is enough text to justify it.
+    applyMulticol(main);
-    // Split the body into columned segments: h1s, h2s and wide figures are
-    // full-width separators and never go inside columns.
-    const article = main.querySelector("article");
-    if (article) {
-      const body = article.querySelector(".body");
-      article.classList.toggle(
-        "multicol",
-        !!body && body.textContent.trim().length > 1800,
-      );
-      if (body && article.classList.contains("multicol")
-          && !body.querySelector(".colseg")) {
-        // h1s, h2s and anything holding a wide image are full-width
-        // separators
-        const isSeparator = (el) =>
-          el.tagName === "H1" || el.tagName === "H2"
-          || el.querySelector("img.wide") !== null;
-        let seg = null;
-        for (const el of [...body.children]) {
-          if (isSeparator(el)) {
-            seg = null;
-            body.append(el);
-          } else {
-            if (!seg) {
-              seg = document.createElement("div");
-              seg.className = "colseg";
-              body.append(seg);
-            }
-            seg.append(el);
-          }
-        }
-        // Columns are per section: only segments with enough text get them,
-        // so a short ingress or a brief section stays single-column.
-        for (const s of body.querySelectorAll(".colseg")) {
-          s.classList.toggle("cols", s.textContent.trim().length > 600);
-        }
-      }
-    }
     if (reduceMotion.matches) return;
     for (const el of main.querySelectorAll(
       "h2, h3, figure, img, pre, blockquote, table, dl, .task-list-item",
@@ -328,6 +352,21 @@ import "overlayscrollbars/overlayscrollbars.css";
     pageCache.set(new URL(ev.detail.url, location.href).pathname, ev.detail.html);
   });
 
+  // Editors mutate site-wide state (theme, structure, headings, banners),
+  // which can change the rendered HTML of every cached page. Drop the whole
+  // cache so stale prefetches are never served; the current page is re-fetched
+  // by the editor's own loadPlain and re-cached afterwards. Re-preloading is
+  // deferred until the editor panel closes to avoid hammering the server.
+  addEventListener("pagerite:drop-page-cache", () => {
+    pageCache.clear();
+  });
+
+  // When the editor panel closes, warm the cache again for the visible links
+  // on the (now final) page so subsequent navigation stays instant.
+  addEventListener("pagerite:preload-pages", () => {
+    preload();
+  });
+
   function preload() {
     const urls = new Set();
     for (const a of document.querySelectorAll(
@@ -362,26 +401,37 @@ import "overlayscrollbars/overlayscrollbars.css";
   // themes for their own effects (e.g. the purple sun rising faster than
   // the drift). Event-driven only: perfectly still when the page is idle.
   if (!reduceMotion.matches) {
-    let ticking = false;
+    // rAF loop that eases the value toward the live scroll position. Reading
+    // scrollY every frame (rather than only on scroll events) also picks up
+    // the in-between positions of Chrome/macOS momentum scrolling, whose
+    // scroll events fire late and coarsely. The loop idles once settled.
+    let value = Math.min(scrollY * 0.1, 30);
+    let running = false;
     const drift = () => {
-      ticking = false;
+      const target = Math.min(scrollY * 0.1, 30);
-      document.documentElement.style.setProperty(
+      value += (target - value) * 0.12;
-        "--pry", `${Math.min(scrollY * 0.1, 30)}px`,
+      if (Math.abs(target - value) < 0.05) {
-      );
+        value = target;
+        running = false;
+      }
+      document.documentElement.style.setProperty("--pry", `${value}px`);
+      if (running) requestAnimationFrame(drift);
     };
     addEventListener("scroll", () => {
-      if (!ticking) {
+      if (!running) {
-        ticking = true;
+        running = true;
         requestAnimationFrame(drift);
       }
     }, { passive: true });
   }
 
   // --- Analytics pings ---------------------------------------------------
-  // Fire-and-forget POST /_a {fr, to, read}: on the initial page load
+  // Fire-and-forget POSTs to /_a with the fields as query parameters (a
-  // (starts the visit — the server counts nothing from the document GET
+  // beacon can carry no body, and query args show in server logs next to
-  // alone), for internal fetch-navigations, for external https exits, and
+  // the document GET they refer to): on the initial page load (starts the
-  // on window close. ``read`` is the active time (ms) spent on ``fr``.
+  // visit — the server counts nothing from the document GET alone), for
+  // internal fetch-navigations, for external https exits, and on window
+  // close. ``read`` is the active time (ms) spent on ``fr``.
   // Reading time pauses after 1 minute of inactivity and resumes on the
   // next mouse/touch/scroll/keyboard event.
   // Excluded: back/forward (popstate never pings), everything while the
@@ -395,24 +445,32 @@ import "overlayscrollbars/overlayscrollbars.css";
   // records nothing and scrubs any session the same browser accumulated
   // before logging in, so admins never show up as visits or crawlers.
   // See docs/analytics.md.
-  function ping(to, fr = currentPath, read = 0) {
+
-    if (document.body.classList.contains("editing")) return;
+  // fetch wrapper: every key of ``params`` becomes a query arg on /_a
-    if (to && to === "/_a") return;
+  // (falsy values are omitted). Admins get hide=1. ``beacon`` uses
-    const hide = ssoAvailable && isAdmin ? 1 : 0;
+  // sendBeacon when available, for unload-time pings.
-    const body = JSON.stringify({
+  function pingFetch(params, { beacon = false } = {}) {
-      fr, to, hide,
+    const query = new URLSearchParams();
-      read: Math.max(0, Math.round(read / 1000)),
+    if (ssoAvailable && isAdmin) params = { ...params, hide: 1 };
-    });
+    for (const [key, value] of Object.entries(params)) {
+      if (value) query.set(key, value);
+    }
+    const url = `/_a?${query}`;
     try {
-      fetch("/_a", {
+      if (beacon && navigator.sendBeacon) {
-        method: "POST",
+        navigator.sendBeacon(url);
-        keepalive: true,
+      } else {
-        headers: { "content-type": "application/json" },
+        fetch(url, { method: "POST", keepalive: true });
-        body,
+      }
-      });
     } catch { /* analytics must never break navigation */ }
   }
 
+  function ping({ to, fr = currentPath, read = 0, beacon = false } = {}) {
+    if (document.body.classList.contains("editing")) return;
+    if (to === "/_a") return;
+    pingFetch({ fr, to, read: Math.round(read / 1000) }, { beacon });
+  }
+
   // Active reading time for the current page. The clock stops after 1 minute
   // without activity and restarts on the next mouse/touch/scroll/keyboard
   // event.
@@ -456,24 +514,10 @@ import "overlayscrollbars/overlayscrollbars.css";
 
   function sendClosePing() {
     if (closePingedFor === currentPath) return;
-    const read = Math.max(0, Math.round(takeReadTime() / 1000));
-    if (read <= 0) return;
-    const hide = ssoAvailable && isAdmin ? 1 : 0;
-    const body = JSON.stringify({ fr: currentPath, hide, read });
-    const blob = new Blob([body], { type: "application/json" });
-    try {
-      if (navigator.sendBeacon) {
-        navigator.sendBeacon("/_a", blob);
-      } else {
-        fetch("/_a", {
-          method: "POST",
-          keepalive: true,
-          headers: { "content-type": "application/json" },
-          body,
-        });
-      }
-    } catch { /* analytics must never break navigation */ }
     closePingedFor = currentPath;
+    const read = takeReadTime();
+    if (Math.round(read / 1000) <= 0) return;
+    ping({ read, beacon: true });
   }
 
   for (const ev of ["mousemove", "mousedown", "touchstart", "touchmove", "scroll", "keydown"]) {
@@ -483,6 +527,10 @@ import "overlayscrollbars/overlayscrollbars.css";
 
   // The initial page load pings too — it is what starts the visit and
   // counts the entry page view (the document GET alone records nothing).
+  // It carries only ``to``: the server attributes the entry to the referer
+  // it saw on the document GET (unavailable to JS once loaded), and an
+  // ``fr`` equal to ``to`` would log a bogus self-transition when a
+  // session already exists (e.g. a second tab).
   // Sent once per load, after the auth probes so the admin gate applies;
   // the pageshow re-probe must not ping again. Reloads are not visits:
   // pinging them would double-count the view and log a self-transition.
@@ -492,7 +540,7 @@ import "overlayscrollbars/overlayscrollbars.css";
     entryPinged = true;
     const nav = performance.getEntriesByType?.("navigation")[0];
     if (nav ? nav.type === "reload" : performance.navigation?.type === 1) return;
-    ping(currentPath);
+    ping({ to: currentPath, fr: "" });
   }
 
   // --- Analytics page mount/unmount --------------------------------------
@@ -538,14 +586,17 @@ import "overlayscrollbars/overlayscrollbars.css";
   // --- Fetch navigation ------------------------------------------------
   async function load(url, push = true, back = false) {
     // Navigating with the editor open closes it; unsaved edits are lost
-    // (the region swap discards the previewed changes anyway).
+    // (the region swap discards the previewed changes anyway). Cache must be
-    if (document.body.classList.contains("editing")) {
+    // bypassed for this navigation because the editor may have invalidated
+    // the prefetched copies of other pages.
+    const editing = document.body.classList.contains("editing");
+    if (editing) {
       editorModule?.then((m) => m.closeEditor());
     }
     teardownAnalytics();
     let doc;
     let finalUrl = url;
-    const cached = pageCache.get(new URL(url, location.href).pathname);
+    const cached = !editing && pageCache.get(new URL(url, location.href).pathname);
     if (cached) {
       doc = new DOMParser().parseFromString(cached, "text/html");
     } else {
@@ -690,7 +741,7 @@ import "overlayscrollbars/overlayscrollbars.css";
       // different links to the same domain stay distinct in analytics.
       if (url.protocol === "https:") {
         closePingedFor = currentPath;
-        ping(url.href, currentPath, takeReadTime());
+        ping({ to: url.href, read: takeReadTime() });
       }
       return;
     }
@@ -706,7 +757,7 @@ import "overlayscrollbars/overlayscrollbars.css";
     load(url).then((ok) => {
       if (!ok) return;
       closePingedFor = null;
-      ping(url.pathname, from, takeReadTime());
+      ping({ to: url.pathname, fr: from, read: takeReadTime() });
       resetReadTime();
     });
   });

frontend/src/swapdoc.js

@@ -3,6 +3,14 @@
 // Used by BannerEditor (banner design changes), SiteEditor (theme changes)
 // and StructureEditor (tree navigation).
 
+// Drop the public page runtime's in-memory prefetch cache. Editors call this
+// whenever a site-wide or page change invalidates the cached HTML of other
+// pages (theme, headings, structure, banner, etc.). The cache is rebuilt by
+// re-preloading visible links once the editor panel closes.
+export function dropPageCache() {
+  dispatchEvent(new CustomEvent('pagerite:drop-page-cache'))
+}
+
 export function runScripts(root) {
   // Scripts injected via innerHTML do not execute; re-create them.
   if (!root) return

pagerite/__main__.py

@@ -92,6 +92,7 @@ def main() -> None:
         "pagerite.app:app",
         listen=args.listen,
         default_port=DEFAULT_PORT,
+        server_header=False,
         **dev,
     )
 

pagerite/app.py

@@ -31,7 +31,14 @@ from xml.sax.saxutils import escape as xml_escape
 
 import blake3
 import msgspec
-from fastapi import FastAPI, HTTPException, Request, WebSocket, WebSocketDisconnect
+from fastapi import (
+    FastAPI,
+    HTTPException,
+    Query,
+    Request,
+    WebSocket,
+    WebSocketDisconnect,
+)
 from fastapi.responses import RedirectResponse, Response
 from fastapi_vue import Frontend
 from kanta import Kanta
@@ -802,17 +809,6 @@ def _schedule_analytics_broadcast() -> None:
     )
 
 
-class AnalyticsPing(BaseModel):
-    """Navigation ping from pagerite.js (see docs/analytics.md)."""
-
-    fr: str = ""
-    to: str | None = None
-    #: 1 from admin clients: scrub the session instead of recording it.
-    hide: int = 0
-    #: Active reading time on ``fr`` (ms), if any.
-    read: int = 0
-
-
 @app.get("/_a", response_model=None)
 async def analytics_page(request: Request) -> Response:
     """Render the analytics viewer as a normal site page at /_a.
@@ -831,21 +827,31 @@ async def analytics_page(request: Request) -> Response:
 
 
 @app.post("/_a", status_code=204)
-async def analytics_ping(ping: AnalyticsPing, request: Request) -> None:
+async def analytics_ping(
-    """Record a navigation ping ({fr, to}); fire-and-forget, never fails.
+    request: Request,
+    fr: str = Query(""),
+    to: str | None = Query(None),
+    hide: int = Query(0),
+    read: int = Query(0),
+) -> None:
+    """Record a navigation ping (?fr=&to=&hide=&read=); fire-and-forget.
+
+    The initial page-load ping carries only ``to``: the entry is attributed
+    to the referer/UTM tags stashed by the document GET (see _track_entry),
+    which JS cannot see once the page has loaded.
 
     The reverse-DNS and DB-IP geoip lookups happen in a background task so
     the response is never delayed by slow DNS or the first MMDB decompress.
     """
     ip = _client_ip(request)
     visit_index, flushed_clients = analytics_store.ping(
-        ping.fr,
+        fr,
-        ping.to,
+        to,
         ip,
         request.headers.get("user-agent", ""),
         request.headers.get("accept-language", ""),
-        hide=bool(ping.hide),
+        hide=bool(hide),
-        read=ping.read,
+        read=read,
     )
     if visit_index is not None:
         visit = analytics_store.data.visits[visit_index]

pagerite/themes/corporate/banner.css

@@ -3,11 +3,6 @@
    SVG from the active palette (var(--accent)), so one SVG serves light
    and dark — and other themes too. */
 
-#banner {
-  min-height: 15rem;
-  border-bottom: none;
-}
-
 /* Artwork colors, light mode */
 .cb-bg0 {
   stop-color: #ffffff;

pagerite/themes/corporate/theme.css

@@ -43,7 +43,7 @@
   font-size: clamp(4rem, 11vw, 8.5rem);
   font-weight: 800;
   letter-spacing: -0.04em;
-  line-height: 1;
+  line-height: 1.1;
   white-space: nowrap;
   color: var(--accent2);
   filter: drop-shadow(0 0.4rem 1.4rem rgb(10 92 255 / 0.3));
@@ -140,7 +140,3 @@ pre {
 img {
   border-radius: 4px;
 }
-
-::view-transition {
-  background: var(--bg);
-}

pagerite/themes/eyes/banner.css

@@ -1,7 +1,13 @@
 /* Eyes banner design: a canvas critter watching the cursor from the
    grass (banner.html — markup + styles + script inlined by the backend
-   into #page-banner). Fixed-height stage matching the canvas. */
+   into #page-banner). The canvas fills the banner; the scene composes
+   against the 13rem layout box and extends flat grass into any overflow
+   a theme adds below (summer's cross-fade strip). */
 
-#banner {
+/* Opt out of the base parallax (scale overscan + --pry drift): it lands on
-  height: 240px;
+   the design wrapper the backend puts around banner.html, and scaling from
+   the bottom edge would crop the top of the composed scene — pushing the
+   critter out of view — while this canvas animates on its own. */
+#page-banner>[data-design="eyes"] {
+  transform: none;
 }

pagerite/themes/eyes/banner.html

@@ -2,7 +2,13 @@
 <style>
   #eyes {
     width: 100%;
-    height: 240px;
+    /* 13rem — the banner's layout height, correct from the first frame,
+       before any external stylesheet has sized #page-banner. Themes that
+       extend the banner past the layout box (summer's overflow fade) raise
+       --eyes-h to 100% so the canvas follows the taller stage; the script
+       still composes the scene against the 13rem box and only extends the
+       meadow, so the scene itself never shifts. */
+    height: var(--eyes-h, 13rem);
     display: block;
   }
 </style>
@@ -10,19 +16,23 @@
 (() => {
   const c = document.getElementById('eyes')
   const ctx = c.getContext('2d')
-  const DPR = devicePixelRatio || 1
 
-  const fit = () => {
+  // Sync the backing store to the canvas' laid-out size. Checked every
-    const w = Math.max(1, c.clientWidth)
+  // frame: this inline script runs before the stylesheets that size
-    const h = Math.max(1, c.clientHeight)
+  // #page-banner, so observers/load events can still miss the transition.
-    c.width = Math.round(w * DPR)
+  // Assigning width/height also clears the canvas. DPR is read here, not
-    c.height = Math.round(h * DPR)
+  // captured: it changes with browser zoom.
+  const syncSize = () => {
+    const DPR = devicePixelRatio || 1
+    const w = Math.round(Math.max(1, c.clientWidth) * DPR)
+    const h = Math.round(Math.max(1, c.clientHeight) * DPR)
+    if (c.width !== w || c.height !== h) {
+      c.width = w
+      c.height = h
+    }
     ctx.setTransform(DPR, 0, 0, DPR, 0, 0)
   }
 
-  fit()
-  addEventListener('resize', fit)
-
   let mx = 0
   let my = 0
   let lastMove = 0
@@ -69,7 +79,7 @@
   ]
 
   const ridgeY = (x, w, h) =>
-    h * 0.72 +
+    h * 0.83 +
     Math.sin(x * 0.012) * 10 +
     Math.sin(x * 0.003 + 1.4) * 16 +
     Math.sin(x * 0.02 + 0.7) * 3
@@ -129,7 +139,7 @@
 
     for (let i = 0; i < 5; i++) {
       const x = (i + 0.5) * w / 5
-      const y = h * 0.58 + Math.sin(i * 1.7) * 8
+      const y = h * 0.69 + Math.sin(i * 1.7) * 8
 
       ctx.fillStyle = '#5f8d4e'
       ctx.beginPath()
@@ -322,7 +332,10 @@
     ctx.moveTo(0, h)
     ctx.lineTo(0, ridgeY(0, w, h))
 
-    for (let x = 0; x <= w; x += 8)
+    // Sample one step PAST the right edge (x <= w + 8): stopping at w would
+    // leave the path closing with a visible vertical drop at the edge
+    // whenever the width isn't a multiple of the 8px step.
+    for (let x = 0; x <= w + 8; x += 8)
       ctx.lineTo(x, ridgeY(x, w, h))
 
     ctx.lineTo(w, h)
@@ -334,7 +347,7 @@
     ctx.moveTo(0, h)
     ctx.lineTo(0, ridgeY(0, w, h) + 10)
 
-    for (let x = 0; x <= w; x += 8)
+    for (let x = 0; x <= w + 8; x += 8)
       ctx.lineTo(x, ridgeY(x, w, h) + 10)
 
     ctx.lineTo(w, h)
@@ -377,8 +390,17 @@
     const dt = Math.min(now - prev, 100) / 16.7
     prev = now
 
+    syncSize()
+
     const w = c.clientWidth
-    const h = c.clientHeight
+    // Compose the scene against the banner's layout box, not the canvas:
+    // a theme may extend #page-banner past #banner (e.g. summer overflows
+    // the artwork into the page for a masked cross-fade), and the critter
+    // must stay in the visible part. The overflow strip is filled with the
+    // flat meadow color below — a hard canvas edge would show through the
+    // fade, a grass extension just blends.
+    const h = Math.min(c.clientHeight,
+      c.closest('#banner')?.clientHeight || c.clientHeight)
     const R = Math.min(h * 0.11, 38)
 
     if (now > nextMove && !hidePhase) {
@@ -414,6 +436,16 @@
     vy *= Math.pow(0.85, dt)
     yoff += vy * dt
 
+    // Clip the scene to the composed area: the ducking critter travels
+    // below it, and the overflow strip is only flat meadow painted after —
+    // without the clip the critter would leave trails there as it sinks.
+    // Clipping against grass-on-grass is invisible, so the duck still
+    // reads as sinking into the meadow.
+    ctx.save()
+    ctx.beginPath()
+    ctx.rect(0, 0, w, h)
+    ctx.clip()
+
     drawBackground(w, h)
 
     const cx0 = gx * w
@@ -430,6 +462,18 @@
     drawCritter(cx0, eyeY, R, now, dt)
     drawForeground(w, h)
 
+    ctx.restore()
+
+    // Extend the meadow into any overflow below the composed scene, with
+    // the same two layers drawForeground leaves at the bottom (base grass
+    // plus the dark under-band) so the joint is invisible.
+    if (c.clientHeight > h) {
+      ctx.fillStyle = '#69ae4b'
+      ctx.fillRect(0, h, w, c.clientHeight - h)
+      ctx.fillStyle = 'rgba(48,102,34,0.18)'
+      ctx.fillRect(0, h, w, c.clientHeight - h)
+    }
+
     requestAnimationFrame(frame)
   }
 

pagerite/themes/nitro/banner.css

@@ -5,7 +5,6 @@
 /* Bezier-swept banner with wide orange stripes (inlined SVG), separated
    from the page by a straight orange blade. */
 #banner {
-  height: 13rem;
   border-bottom: 4px solid var(--accent);
 }
 
@@ -44,6 +43,7 @@
 }
 
 @media (prefers-color-scheme: dark) {
+
   /* Banner dark tones tinted to the same violet family as the page. */
   .nb-base {
     fill: #100d18;

pagerite/themes/nitro/theme.css

@@ -206,7 +206,3 @@ pre {
 img {
   border-radius: 3px;
 }
-
-::view-transition {
-  background: var(--bg);
-}

pagerite/themes/purple/banner.css

@@ -15,7 +15,3 @@
 .banner-fade {
   stop-color: var(--bg);
 }
-
-#banner {
-  min-height: 13rem;
-}

pagerite/themes/purple/theme.css

@@ -91,7 +91,3 @@ blockquote {
 pre {
   --code-bg: var(--surface);
 }
-
-::view-transition {
-  background: #000;
-}

pagerite/themes/stars/banner.css

@@ -1,7 +1,7 @@
 /* Stars banner design: a drifting starfield (banner.html — canvas + script
-   inlined by the backend into #page-banner). Fixed-height stage matching
+   inlined by the backend into #page-banner). The canvas takes the banner's
-   the canvas. */
+   13rem layout height directly so it never renders unclipped before the
-
+   main stylesheet loads; the starfield scales to any height. The design's
-#banner {
+   opt-out of theme banner overflow/fade effects also lives in banner.html's
-  height: 240px;
+   inline <style>, so it applies atomically with the markup (this file would
-}
+   load a beat later and let the overflow flash through mid-transition). */

pagerite/themes/stars/banner.html

@@ -2,27 +2,47 @@
 <style>
   #stars {
     width: 100%;
-    height: 240px;
+    /* 13rem — the banner's layout height, not 100%: a percentage only
+       resolves after the main stylesheet sizes #page-banner, and until
+       then the canvas would render at its intrinsic height, unclipped,
+       over the page. (This design always opts out of theme overflows —
+       below — so the layout height is always the right one.) */
+    height: 13rem;
     display: block;
   }
+
+  /* The night sky stays a windowed stage: undo the summer theme's banner
+     overflow/cross-fade — a starfield must not bleed into a daylit page.
+     Kept in this inlined <style> (not banner.css) so the opt-out applies
+     atomically with the markup; a separate stylesheet can arrive a beat
+     later and let the overflow flash through mid-transition. Later in
+     document order than theme.css, so same-specificity rules win. */
+  #page-banner {
+    inset: 0;
+    mask-image: none;
+  }
 </style>
 <script><!--
 (() => {
   const c = document.getElementById('stars')
   const ctx = c.getContext('2d')
-  const DPR = devicePixelRatio || 1
 
-  const fit = () => {
+  // Sync the backing store to the canvas' laid-out size. Checked every
-    const w = Math.max(1, c.clientWidth)
+  // frame: this inline script runs before the stylesheets that size
-    const h = Math.max(1, c.clientHeight)
+  // #page-banner, so observers/load events can still miss the transition.
-    c.width = Math.round(w * DPR)
+  // Assigning width/height also clears the canvas. DPR is read here, not
-    c.height = Math.round(h * DPR)
+  // captured: it changes with browser zoom.
+  const syncSize = () => {
+    const DPR = devicePixelRatio || 1
+    const w = Math.round(Math.max(1, c.clientWidth) * DPR)
+    const h = Math.round(Math.max(1, c.clientHeight) * DPR)
+    if (c.width !== w || c.height !== h) {
+      c.width = w
+      c.height = h
+    }
     ctx.setTransform(DPR, 0, 0, DPR, 0, 0)
   }
 
-  fit()
-  addEventListener('resize', fit)
-
   const stars = Array.from({ length: 110 }, () => ({
     x: Math.random(),
     y: Math.random(),
@@ -33,6 +53,7 @@
   let prev = performance.now()
   ;(function frame(now) {
     if (!c.isConnected) return
+    syncSize()
     const w = c.clientWidth
     const h = c.clientHeight
     const dt = Math.min(now - prev, 100)

pagerite/themes/summer/banner.css

@@ -2,10 +2,6 @@
    backend into #page-banner) — rolling hills, leafy bushes, swaying
    flowers, drifting clouds and a sun that rises as you scroll. */
 
-#banner {
-  min-height: 15rem;
-}
-
 /* The artwork fades into the page background at its bottom edge. */
 .summer-fade {
   stop-color: var(--bg);
@@ -44,9 +40,17 @@
     animation: summer-sun 9s ease-in-out infinite alternate;
   }
 
-  #page-banner .cloud-a { animation: summer-drift 56s ease-in-out infinite alternate; }
+  #page-banner .cloud-a {
-  #page-banner .cloud-b { animation: summer-drift 73s ease-in-out infinite alternate-reverse; }
+    animation: summer-drift 56s ease-in-out infinite alternate;
-  #page-banner .cloud-c { animation: summer-drift 64s ease-in-out infinite alternate; }
+  }
+
+  #page-banner .cloud-b {
+    animation: summer-drift 73s ease-in-out infinite alternate-reverse;
+  }
+
+  #page-banner .cloud-c {
+    animation: summer-drift 64s ease-in-out infinite alternate;
+  }
 
   #page-banner .flower {
     transform-box: fill-box;
@@ -55,21 +59,42 @@
   }
 
   /* Stagger the sway so the meadow doesn't move in lockstep. */
-  #page-banner .flower:nth-child(3n) { animation-delay: -1.7s; }
+  #page-banner .flower:nth-child(3n) {
-  #page-banner .flower:nth-child(3n + 1) { animation-delay: -3.1s; animation-duration: 6s; }
+    animation-delay: -1.7s;
+  }
+
+  #page-banner .flower:nth-child(3n + 1) {
+    animation-delay: -3.1s;
+    animation-duration: 6s;
+  }
 }
 
 @keyframes summer-sun {
-  from { opacity: 0.22; }
+  from {
-  to { opacity: 0.38; }
+    opacity: 0.22;
+  }
+
+  to {
+    opacity: 0.38;
+  }
 }
 
 @keyframes summer-drift {
-  from { transform: translateX(-1.6%); }
+  from {
-  to { transform: translateX(1.6%); }
+    transform: translateX(-1.6%);
+  }
+
+  to {
+    transform: translateX(1.6%);
+  }
 }
 
 @keyframes summer-sway {
-  from { transform: rotate(-2.6deg); }
+  from {
-  to { transform: rotate(2.6deg); }
+    transform: rotate(-2.6deg);
+  }
+
+  to {
+    transform: rotate(2.6deg);
+  }
 }

pagerite/themes/summer/theme.css

@@ -8,6 +8,7 @@
 
   /* Every color is sampled (or text-darkened) from banner.svg. */
   --bg: #e6f4cf;
+  --sky: #d9f1ff;
   /* pale meadow — the banner fades into this */
   --surface: #f8fbf0;
   --text: #2c4a2f;
@@ -61,10 +62,33 @@ body {
   color: #3d5223;
 }
 
-/* The banner frame ties into the meadow beneath it. */
+/* No separation between banner and page: the frame loses its background,
+   border and shadow, and the artwork overflows into the document below,
+   masked by a transparency gradient so it cross-fades into the body's fixed
+   meadow gradient. A plain color match is impossible — both sides are
+   gradients, and the parallax drift keeps the banner side moving. */
 #banner {
-  border-bottom-color: #4f913b30;
+  background: none;
-  box-shadow: 0 0.3rem 1rem #4f913b22;
+  border-bottom: 0;
+  box-shadow: none;
+}
+
+#page-banner {
+  inset: 0 0 -6rem;
+  /* Paints over the page background in the overlap, but never swallows its
+     clicks. */
+  pointer-events: none;
+  mask-image: linear-gradient(180deg, #000 calc(100% - 6rem), transparent);
+  /* Canvas banner designs (eyes) default to the 13rem layout height; here
+     they must fill the taller overflow stage so their meadow extension
+     reaches through the fade strip. */
+  --eyes-h: 100%;
+}
+
+/* The mask above replaced the SVG's flat-color bottom fade (meadowFade) —
+   fading to a single --bg would reintroduce a seam against the gradient. */
+#page-banner .summer-fade {
+  stop-opacity: 0;
 }
 
 /* Cheerful oversized tilted brand in a sky→grass→flower gradient. */
@@ -114,14 +138,26 @@ body {
 }
 
 /* Content sits in a soft wash of sunlit meadow rather than on a white
-   card. */
+   card. The wash lives on a pseudo-element so it can carry a vertical
+   mask: it fades in from transparent over the strip where the banner
+   artwork overflows into the page, so the two never fight — no matter
+   which side paints on top. */
 main {
+  position: relative;
+}
+
+main::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
   background: linear-gradient(90deg,
       transparent,
       #f0f8dc80 15%,
       #f0f8dc8c 50%,
       #f0f8dc80 85%,
       transparent);
+  mask-image: linear-gradient(180deg, transparent, #000 6rem);
 }
 
 /* The sidebar is a piece of the same meadow: glassy green with a light
@@ -131,6 +167,8 @@ main {
   border-right: 1px solid #ffffff80;
   border-bottom: 1px solid var(--line);
   box-shadow: 0 0.3rem 1rem #4f913b1f;
+  border-radius: 1rem;
+  margin-inline: 0.5rem;
 }
 
 #sidebar a {
@@ -260,8 +298,7 @@ figcaption,
   background: linear-gradient(160deg, #eef7dd, #d9eec5);
 }
 
-/* The page transition exposes summer color around the rotating
-   snapshots. */
 ::view-transition {
-  background: var(--bg);
+  /* Override to mid sky shade instead of the darker --bg we otherwise get */
+  background: var(--sky);
 }