Long articles become a bounded composition: fluid text lanes with a side zone for marginalia, centered in vacant space that grows with the viewport instead of stretching the content.

render() now segments the body into .colseg wrappers and flags .multicol
itself, replacing the fragile colseg injection in pagerite.js. Columns
are capped at two; shrink-wrapped figures left-align inside columns.
New {.margin} breakout (and ::: aside) drops blocks into the left gutter
on wide viewports, falling back to in-column floats.

docs/analytics.md

@@ -20,11 +20,15 @@ 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
+  nothing, so bots never register (admin browsing does register, but
+  flagged `hide`; see **Admins** below). JS-running crawlers
   (Googlebot, GoogleOther, Applebot, ...) do ping, but their User-Agent
   gives them away: pings whose UA matches `_is_bot_ua` (anything calling
   itself a "bot", plus known exceptions such as GoogleOther) are ignored
@@ -34,7 +38,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
@@ -53,12 +58,18 @@ The client (`pagerite.js`) POSTs fire-and-forget pings to `/_a` with
   without the preload header, and without the ping that GET would flush to
   the crawler list.
 - **Admins**: when SSO is in use and the session is known to be an admin,
-  the client still pings but adds `hide=1`. The server then records
+  the client still pings but adds `hide=1`. The activity is recorded as
-  nothing — and if the same client session already had a visit from before
+  usual (navigations and all), but the `hide` flag is set on the **client
-  logging in, that visit is removed from the JSON along with every count
+  record** — so it covers everything that client ever did: visits and
-  it recorded — an in-memory per-visit log of count events makes full
+  crawler hits from before the login included. Hidden clients never appear
-  reversal possible. With no auth proxy (dev/test)
+  in the viewer payload: `Store.display()` drops their visits, crawler
-  "admin" is everyone's state, so `hide` stays 0 and everything is recorded.
+  hits, abuse hits and metadata, and computes every aggregate (site visits,
+  page views, transitions) from the visible visits only, so nothing needs
+  to be reversed or redacted. Pending crawler hits from a hidden client
+  are discarded when they expire, so admin browsing never lands in the
+  crawler list either. With no auth proxy
+  (dev/test) "admin" is everyone's state, so `hide` stays 0 and everything
+  is recorded.
 - The server validates `to`: internal paths must be valid slug paths
   ("/" or `[a-z0-9_-]` segments), external ones are re-derived to the
   https origin and accepted only when the client sent exactly that.
@@ -90,13 +101,14 @@ The client (`pagerite.js`) POSTs fire-and-forget pings to `/_a` with
   the header only hides a GET from the crawler stats, the path-based abuse
   classification is unaffected).  If a ping
   from the same client arrives within 10 seconds the hit is discarded;
-  otherwise it is written to `crawlers`.  Crawlers do not count as
+  otherwise it is written to `crawlers` — unless the client is hidden
+  (admin), in which case the hit is discarded on expiry too.  Crawlers do not count as
   visits or views.  The `Accept-Language` header is stored on the shared
   `Client` immediately; reverse-DNS host names and DB-IP geoip
   country/city are filled in asynchronously, just like for real visits.  In
   the analytics viewer, crawler hits are grouped by client hash and shown as
   a trail of internal pages that crawler visited; the crawler table lists
-  the most active crawlers first rather than the most recent hits.
+  the most recent crawler first, with the most active as a tie-breaker.
 - **Abuse (scanner) hits**: a 404 for a telltale path — any URL segment
   starting with a dot (`/.env`, `/.git/config`) or ending in `.php` —
   classifies the source IP as abuse immediately, and ten plain 404s from one
@@ -137,7 +149,10 @@ Each `Client` record:
 - `city` — city name from the DB-IP MMDB lookup, when available,
 - `ua` — raw `User-Agent` string,
 - `ua_pretty` — compact display form of the UA (browser/OS/device) when
-  parsable, otherwise the raw string.
+  parsable, otherwise the raw string,
+- `hide` — true for admin clients (`hide=1` ping): all their visits,
+  crawler hits and abuse hits are recorded but excluded from every
+  statistic and from the viewer payload.
 
 Each `Visit` record:
 
@@ -145,13 +160,16 @@ Each `Visit` record:
 - `entry` — first page (path) seen,
 - `referer` — external https origin of the initial load, `""` for direct,
 - `client` — 6-byte blake3 hash referencing `Analytics.clients`,
-- `trail` — everything seen afterwards in first-seen order: page paths and
+- `trail` — the entry page and everything seen afterwards, keyed by the
-  external exit URLs. Re-visiting an already seen page (incl. the entry)
+  timestamp of first sight (insertion order = first-seen order). Each item
-  does not append.
+  holds `to` (page path or external exit URL), the accumulated active
+  reading time in seconds (`read`) and the most recent HTTP status seen
+  for the target (`status`). Re-visiting an already seen target updates
+  its item instead of appending.
+- `navs` — every navigation ping (`fr`, `to`), keyed by its timestamp,
+  repeats included. The aggregates are computed from this log at display
+  time.
 - `utm` — `utm_*` query parameters from the landing URL, as a dict.
-- `read` — active reading time per path (seconds), keyed by path.
-- `statuses` — HTTP status of the response when each path was first seen
-  (200 or 404), keyed by path.
 
 Each `CrawlerHit` record:
 
@@ -186,10 +204,16 @@ to tell misses from real pages at a glance.
 
 ## Aggregates
 
+Aggregates are **not stored**; they are computed at display time by
+`Store.display()` from the visit records (entry + `navs` log), skipping
+hidden clients' visits. This is what allows a client to become hidden after
+navigations were already logged: no counts need reversing. The computed
+shapes, part of the WebSocket payload (`Display` struct alongside `visits`,
+`crawlers`, `abuse` and `clients`):
+
 - `transitions`: time series of page transitions, sparse nested dict
-  `from -> to -> bucket -> count` with the same 5-minute bucketing as
+  `from -> to -> bucket -> count` with 5-minute bucketing. `from` is the
-  `views`. `from` is the referer origin or `"(direct)"` for initial loads,
+  referer origin or `"(direct)"` for initial loads, a page path for pings.
-  a page path for pings.
 - `views`: time series of page loads, `path -> bucket -> count`, sparse: only
   non-zero 5-minute buckets exist (bucket key is its floored ISO timestamp).
   Every load counts, including repeats within a visit; external exit origins
@@ -198,7 +222,7 @@ to tell misses from real pages at a glance.
   5-minute bucketing.
 
 Sparseness keeps quiet sites small; dropping old data is a matter of deleting
-list/dict entries (`visits` is a plain append-only list, buckets plain keys).
+list entries (`visits` is a plain append-only list).
 
 ## Persistence
 
@@ -276,8 +300,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/backend.md

@@ -18,6 +18,8 @@ msgspec Structs for the kanta database. See `docs/content-model.md` for the full
 
 markdown-it-py renderer (html passthrough + attrs, footnote, deflist, tasklists, admon, gfm_autolink, sub/superscript plugins; typographer + breaks on). Custom image rule: relative srcs resolve against the page path; an image standing alone in its paragraph becomes a figure (captioned when titled), while inline-with-text images and raw `<img>` HTML stay plain. A `{dates}` line expands to the article's published/updated dateline (`p.dateline`, from `Node.created`/`modified`; left literal in previews of unsaved pages).
 
+`render()` returns a `Rendered(html, multicol)`: the body segmented for the column layout — h1/h2 headings, `.wide` blocks and margin-breakout blocks (`.margin`, `::: aside`) stand bare, the runs between them become `<div class="colseg">` (plus `.cols` on segments with enough text, `::: nocols` opting out), and `multicol` flags bodies long enough to columnize (visible-text thresholds, code excluded). `views.py` puts the class on the article; pagerite.css takes it from there (at most two columns, the left-margin breakout, all viewport adaptation).
+
 ## `views.py`
 
 The shared page layout as an html5tagger `Template` with placeholders (`Title`, `Brand`, `Banner`, `Nav`, `Sidebar`, `Main`), nav rendering straight from the `Data.menu` tree (siblings sorted by `Node.order`; nav links to content-less labels point at their first child via `first_leaf`, the first published descendant with content), and page/404 rendering.

docs/design-principles.md

@@ -19,8 +19,8 @@ Pagerite is a single-user CMS/blog. This document records the initial high-level
 
 - Content is written in **Markdown** with powerful extensions (tables, footnotes, code highlighting, etc.).
 - **Embedded HTML is passed through unfiltered**, including inline scripts and other dynamic content the author wants to post. This is safe by the single-trusted-author assumption above.
-- Renderer: **markdown-it-py** with mdit-py-plugins (footnotes, definition lists, task lists, brace-attributes; tables and strikethrough from the default preset), with `html=True` for raw passthrough, `typographer=True` for SmartyPants-style replacements in body text (curly quotes, `--` / `---` → en / em dashes, `...` → ellipsis, `(c)` → ©, etc.), and `breaks=True` so single line breaks inside paragraphs become `<br>`. Code spans/blocks and raw HTML are left untouched. Fenced code blocks are highlighted server-side with **Pygments** (`nowrap` spans styled by `/_assets/pygments-*.css`, which maps every token class onto the `--code-*` variables; the base stylesheet defines light and dark palette sets resolved via `light-dark()`, so each theme gets the set matching its `color-scheme` and may only retint `--code-bg` to keep the well in the page's color family); a JS copy button appears on hover. Should this prove limiting, we implement our own renderer on top of html5tagger, which we already use for all HTML generation.
+- Renderer: **markdown-it-py** with mdit-py-plugins (footnotes, definition lists, task lists, brace-attributes, admonitions and `::: name` containers — generic `<div class="name">` wrappers (the name may be followed by brace attributes: `::: aside {.right}`), of which `::: aside` floats as a muted side box and `{.margin}` / `::: margin` marks any block a margin note — on all but phone widths they float in the side zone at the article's left (the region the nav sidebar overlays, or the sidebar's own track when the layout reserves one) and the text never moves — and `::: nocols` opts its section out of column layout; tables and strikethrough from the default preset), GitHub-style alerts (`> [!NOTE]` / TIP / IMPORTANT / WARNING / CAUTION, rendered in the admonition callout styling), with `html=True` for raw passthrough, `typographer=True` for SmartyPants-style replacements in body text (curly quotes, `--` / `---` → en / em dashes, `...` → ellipsis, `(c)` → ©, etc.), and `breaks=True` so single line breaks inside paragraphs become `<br>` — including inside blockquotes, where every newline is kept and a blank `>` line starts a new paragraph. Code spans/blocks and raw HTML are left untouched. Fenced code blocks are highlighted server-side with **Pygments** (`nowrap` spans styled by `/_assets/pygments-*.css`, which maps every token class onto the `--code-*` variables; the base stylesheet defines light and dark palette sets resolved via `light-dark()`, so each theme gets the set matching its `color-scheme` and may only retint `--code-bg` to keep the well in the page's color family); a JS copy button appears on hover. Should this prove limiting, we implement our own renderer on top of html5tagger, which we already use for all HTML generation.
-- **Files are content-addressed.** Uploads (`PUT /_api/files/{filename}`) are stored by content hash — blake3, first 6 bytes hex + original extension — and served immutable from `/_f/{hash}.ext`. Absolute URLs that survive page renames and dedupe identical content; pages no longer own files. An image standing alone in its paragraph becomes a block `<figure>` — with `<figcaption>` when it has a title; images inline with text and raw `<img>` HTML stay plain inline images. Positioning is by attribute classes: `![alt](/_f/….avif "Caption"){.right}` — `{.right}`, `{.left}` float at 30% of the text column (the caption wraps within it; an explicit `width=300` makes the figure shrink-wrap the image instead), `{.wide}` goes full bleed (viewport edge to edge, or up to the docked editor; the sidebar stacks on top of it); plain attributes like `width=300` work too. Headings (h1/h2) clear floats, so images never overflow into the next section.
+- **Files are content-addressed.** Uploads (`PUT /_api/files/{filename}`) are stored by content hash — blake3, first 6 bytes hex + original extension — and served immutable from `/_f/{hash}.ext`. Absolute URLs that survive page renames and dedupe identical content; pages no longer own files. An image standing alone in its paragraph becomes a block `<figure>` — with `<figcaption>` when it has a title; images inline with text and raw `<img>` HTML stay plain inline images. Positioning is by attribute classes: `![alt](/_f/….avif "Caption"){.right}` — `{.right}`, `{.left}` float at 30% of the text column (the caption wraps within it; an explicit `width=300` makes the figure shrink-wrap the image instead), `{.margin}` makes it a margin note, floating in the side zone left of the text on all but phone widths, `{.wide}` goes full bleed (viewport edge to edge, or up to the docked editor; the sidebar stacks on top of it); plain attributes like `width=300` work too. The same brace syntax on a block's last line (no blank line between) applies to the whole block: a paragraph ending with `{.wide}` becomes a full-width element that breaks out of the column layout; written on the line after a block it applies to that preceding block — this is how headings, `::: containers` and code fences take classes (a wide code fence goes full bleed like a wide figure). Headings (h1/h2) clear floats, so images never overflow into the next section.
 
 ## Page structure and navigation
 
@@ -34,7 +34,7 @@ Pagerite is a single-user CMS/blog. This document records the initial high-level
 
 ## Reading experience
 
-- The article column is sized by the **viewport, never by content**: a symmetric grid (`1fr minmax(0, 78rem) 1fr`) with flexible gutters keeps the layout stable across navigation. The sidebar occupies the left gutter, the right gutter balances it; wide screens get columns inside long articles without changing the article's width.
+- The article column is sized by the **viewport, never by content**: a symmetric grid (`1fr minmax(0, 78rem) 1fr`) with flexible gutters keeps the layout stable across navigation. The sidebar occupies the left gutter, the right gutter balances it. Long articles (flagged `.multicol` by the backend render) lift the cap and become a bounded **composition**, centered in the available space with the surplus left vacant: a fluid text lane (up to 42rem) plus a 16rem **side zone at the article's left** — the region the nav sidebar overlays — which hosts margin boxes (`.margin`, `::: aside`, margin figures) at all but phone widths, without the text ever moving. On pages with a sidebar below ~110rem (where the sidebar gets its own 12rem track) the track is the left lane instead: no in-article zone, the text lane runs fluid up to 86rem, and the boxes fall into the track, sliding under the translucent sticky nav. Once two lanes fit beside the zone (≥96rem available in `main`), the text flows in two fluid lanes (36rem minimum, capped at 102rem total — technical content wants the wider lanes, and wider windows just add vacant space). The stages step by the space actually available in `main` (container queries + `cqw` units, so the docked editor's inset is automatic). `.wide` figures on multicol pages bleed to the viewport edges measured from `main` (`cqw`), sliding under the sidebar. The backend splits the body into `.colseg` segments at h1/h2 headings, `.wide` elements and margin blocks (full-width separators or margin boxes, never inside columns), tagging segments that hold enough text with `.cols` — code blocks are excluded from that measure, and a `::: nocols` container opts its whole section out. On wide single-column pages (≥104rem), margin boxes lean into the vacant left gutter as well.
 - A gentle **scroll-reveal** of headings, figures and block-level elements (IntersectionObserver). It is layout-level: articles need no support for it, and `prefers-reduced-motion` disables all motion.
 
 ## Styling
@@ -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`.
 

docs/themes-and-assets.md

@@ -34,4 +34,4 @@ The banner artwork has scroll parallax: pagerite.js sets the `--pry` scroll para
 
 ## Stylesheet order
 
-The backend emits the stylesheets in a fixed order — base (Vite build), theme, banner design, entry sheets, custom CSS last — each with a stable id so fetch-navigation and the site editor can sync them in place. In dev they are `<link>`s (the base is Vite-injected from JS instead); in production they are inlined as `<style>` elements. The base stylesheet's `--font-brand` defaults to `var(--font-heading)`.
+The backend emits the stylesheets in a fixed order — base (Vite build), theme, banner design, entry sheets, custom CSS last — each with a stable id so fetch-navigation and the site editor can sync them in place. In dev they are `<link>`s (the base is Vite-injected from JS instead); in production they are inlined as `<style>` elements. The base stylesheet's `--font-brand` defaults to `var(--font-heading)`. Code text (Fira Code by default) is optically matched to the body font by x-height: `font-size-adjust: ex-height var(--code-x-height)` scales whatever code font is in use, so a theme that switches its body font sets `--code-x-height` to that font's x-height ratio (base: 0.478 for Source Sans 3; themes ship values for Inter, Montserrat, Literata and Cause).

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)
 }
 
@@ -238,9 +240,13 @@ function runScripts(root) {
   }
 }
 
-function previewIntoArticle(html, hasH1) {
+function previewIntoArticle(html, hasH1, multicol) {
   const article = document.querySelector('#main article')
   if (!article) return
+  // The server render owns the column layout: .multicol on the article,
+  // the segmented .colseg/.cols structure inside .body. Both arrive with
+  // the preview and must stay in sync as edits cross the thresholds.
+  article.classList.toggle('multicol', multicol)
   const h1 = article.querySelector('h1')
   const body = article.querySelector('.body')
   // The edit pen may be tucked inside an h1 (title or markdown-owned);
@@ -268,7 +274,7 @@ function onMessage(ev) {
     requestRender()
     dirty.value = false // just loaded from the server, nothing unsaved
   } else if (msg.type === 'html' && msg.path === path.value) {
-    previewIntoArticle(msg.html, msg.has_h1)
+    previewIntoArticle(msg.html, msg.has_h1, msg.multicol)
   } else if (msg.type === 'saved') {
     saveError.value = ''
     pendingSave = null
@@ -307,20 +313,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 +407,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 +431,8 @@ onUnmounted(() => {
   }
   view?.destroy()
   delete window.__pageritePageEditor
+  removeEventListener('scroll', syncEditorToWindow)
+  removeEventListener('resize', syncEditorToWindow)
   removeEventListener('keydown', onKeydown)
   removeEventListener('pagerite:editor-shown', onEditorShown)
 })
@@ -606,7 +640,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,8 +7,8 @@
  * 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 { formatCount, formatReadTime } from './analytics/format.js'
 import {
   TNODE_W,
   TNODE_H,
@@ -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
@@ -150,7 +151,7 @@ onBeforeUnmount(() => cancelAnimationFrame(rafId))
 const fitsPill = (label, fontPx = 19) => label.length * 0.52 * fontPx <= TNODE_W - 16
 
 const countLabel = (n) =>
-  n.readMin ? `${formatCount(n.views)}×${n.readMin}m` : formatCount(n.views)
+  n.readSec ? `${formatCount(n.views)}×${formatReadTime(n.readSec)}` : formatCount(n.views)
 </script>
 
 <template>

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/format.js

@@ -80,17 +80,27 @@ export function calcTotalViews(views) {
 // Very short reads are navigation/skims, not real reading time.
 export const MIN_READ_SECONDS = 10
 
+/** path -> accumulated read seconds for a visit, derived from its trail. */
+export function readMapOf(v) {
+  const map = {}
+  for (const item of Object.values(v.trail || {})) {
+    if (item.read) map[item.to] = (map[item.to] || 0) + item.read
+  }
+  return map
+}
+
 /** Average minutes per visit and average of per-article median read minutes. */
 export function calcReadStats(visits) {
   const perArticle = {}
   let totalVisitSeconds = 0
   let visitCount = 0
   for (const v of visits || []) {
-    const secs = Object.values(v.read || {}).filter((s) => s >= MIN_READ_SECONDS)
+    const read = readMapOf(v)
+    const secs = Object.values(read).filter((s) => s >= MIN_READ_SECONDS)
     if (!secs.length) continue
     visitCount++
     totalVisitSeconds += secs.reduce((a, b) => a + b, 0)
-    for (const [path, s] of Object.entries(v.read || {})) {
+    for (const [path, s] of Object.entries(read)) {
       if (s >= MIN_READ_SECONDS) {
         ; (perArticle[path] || (perArticle[path] = [])).push(s)
       }
@@ -271,7 +281,7 @@ export function formatRecentVisits(visits, pageTree, limit = 50) {
     .reverse()
     .map((v) => ({
       when: new Date(v.start).toLocaleString(),
-      steps: [v.referer, v.entry, ...(v.trail || [])]
+      steps: [v.referer, ...Object.values(v.trail || {}).map((t) => t.to)]
         .map((p) => stepOf(p, titles))
         .filter(Boolean),
     }))
@@ -349,8 +359,8 @@ export function mainDomain(host, limit = 24) {
 
 /**
  * Group raw crawler hits by client hash and format each group as a row showing
- * every internal page that crawler visited.  Rows are sorted by total hits,
+ * every internal page that crawler visited.  Rows are sorted by most recent hit
- * most active crawler first, rather than by most recent hit.
+ * first, with total hits as a tie-breaker.
  * ``clients`` maps client hashes to client records.
  */
 export function formatCrawlerRows(crawlers, clients, pageTree, now = Date.now()) {
@@ -380,7 +390,7 @@ export function formatCrawlerRows(crawlers, clients, pageTree, now = Date.now())
     return n
   }
   return [...groups.values()]
-    .sort((a, b) => totalHits(b) - totalHits(a) || b.lastStart - a.lastStart)
+    .sort((a, b) => b.lastStart - a.lastStart || totalHits(b) - totalHits(a))
     .slice(0, 10)
     .map((g) => {
       const client = g.client || {}
@@ -510,14 +520,12 @@ export function formatVisitRows(visits, clients, pageTree, now = Date.now()) {
   const titles = buildTitleMap(pageTree)
   return [...(visits || [])].reverse().slice(0, 20).map((v) => {
     const client = (clients || {})[v.client] || {}
-    const read = v.read || {}
+    const trail = Object.values(v.trail || {})
-    const statuses = v.statuses || {}
+      .map((item) => {
-    const trail = [v.entry, ...(v.trail || [])]
+        const step = stepOf(item.to, titles)
-      .map((p) => {
-        const step = stepOf(p, titles)
         if (step) {
-          if (read[p]) step.readSeconds = read[p]
+          if (item.read) step.readSeconds = item.read
-          if (statuses[p]) step.status = statuses[p]
+          if (item.status) step.status = item.status
         }
         return step
       })

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
@@ -28,7 +29,7 @@
  * pings) are skipped.
  */
 
-import { MIN_READ_SECONDS } from './format.js'
+import { MIN_READ_SECONDS, readMapOf } from './format.js'
 
 // Nodes are constant-size pills (stadium rects) holding the slug and the
 // view count on two centered lines. TNODE_BOUND is the pill's bounding
@@ -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
@@ -256,29 +259,29 @@ function sortByNav(root, navOrder) {
   walk(root)
 }
 
-/** Compute median reading time per article in whole minutes. */
+/** Compute median reading time per article in seconds. */
-function buildReadMinutes(visits) {
+function buildReadSeconds(visits) {
   const times = {}
   for (const v of visits || []) {
-    for (const [path, sec] of Object.entries(v.read || {})) {
+    for (const [path, sec] of Object.entries(readMapOf(v))) {
       if (sec >= MIN_READ_SECONDS) {
-        ;(times[path] || (times[path] = [])).push(sec)
+        ; (times[path] || (times[path] = [])).push(sec)
       }
     }
   }
-  const minutes = {}
+  const seconds = {}
   for (const [path, arr] of Object.entries(times)) {
     arr.sort((a, b) => a - b)
     const mid = Math.floor(arr.length / 2)
     const median =
       arr.length % 2 ? arr[mid] : (arr[mid - 1] + arr[mid]) / 2
-    minutes[path] = Math.max(1, Math.round(median / 60))
+    seconds[path] = Math.round(median)
   }
-  return minutes
+  return seconds
 }
 
 /** Compute view counts, labels and hidden flags for each node. */
-function annotateNodes(nodes, viewsData, titles, readMinutes) {
+function annotateNodes(nodes, viewsData, titles, readSeconds) {
   const viewCount = (p) => {
     let n = 0
     for (const c of Object.values(viewsData?.[p] || {})) n += c
@@ -287,7 +290,7 @@ function annotateNodes(nodes, viewsData, titles, readMinutes) {
 
   for (const n of nodes) {
     n.views = viewCount(n.path)
-    n.readMin = readMinutes[n.path] || 0
+    n.readSec = readSeconds[n.path] || 0
     // Article title inside the pill (clipped at the pill border on
     // render), slug as fallback for pages missing from the site tree.
     n.label = titles.get(n.path) || (n.path === '/' ? '🏠︎' : n.path.split('/').pop())
@@ -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,25 +886,26 @@ 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)
   const navOrder = buildNavigationOrder(pageTree)
   const titles = buildTitleMap(pageTree)
-  const readMinutes = buildReadMinutes(visits)
+  const readSeconds = buildReadSeconds(visits)
 
   if (!internal.length && !navOrder.size) return null
 
   const { nodes, byPath, root } = buildNodeTree(internal, navOrder)
   sortByNav(root, navOrder)
-  annotateNodes(nodes, data?.views, titles, readMinutes)
+  annotateNodes(nodes, data?.views, titles, readSeconds)
   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

@@ -56,6 +56,11 @@
   /* The brand follows the heading font unless overridden separately. */
   --font-brand: var(--font-heading);
   --font-code: var(--font-fira-code);
+  /* Target x-height ratio for code text: set to the body font's ratio
+     (here Source Sans 3's 0.478) so font-size-adjust can scale the code
+     font to the same optical height. Themes retune it to their body font
+     (measured: Literata 0.507, Inter 0.546, Montserrat 0.517, Cause 0.5). */
+  --code-x-height: 0.478;
   /* Width of the docked editor panel (used both here for shifting the page
      and in the Vue editor's own styles). */
   --editor-w: min(46rem, 50vw);
@@ -65,6 +70,11 @@
   box-sizing: border-box;
 }
 
+::selection {
+  background: color-mix(var(--accent) 30%, transparent);
+  color: inherit;
+}
+
 /* Links never underline — including SVG link text, which the UA stylesheet
    underlines by default. */
 a {
@@ -73,6 +83,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 +136,11 @@ body {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  min-height: 11rem;
+  /* Height scales down proportionally on small screens: 13rem at 800px
+     (50rem) viewport, shrinking with the smaller of viewport width/height
+     (vmin) below that, floored at 8rem. */
+  height: clamp(8rem, 26vmin, 13rem);
+  box-sizing: content-box;
   background: linear-gradient(135deg, var(--surface), var(--bg));
   border-bottom: 1px solid var(--line);
 }
@@ -187,7 +205,9 @@ body {
 #brand {
   font-family: var(--font-brand);
   font-weight: 700;
-  font-size: 2.4rem;
+  /* Scales down proportionally on small screens, same curve as the banner
+     height: 2.4rem at 800px, shrinking with vmin below that. */
+  font-size: clamp(1.4rem, 4.8vmin, 2.4rem);
   text-decoration: none;
   /* One line always: pagerite.js shrinks the font size to fit instead of
      wrapping (the themed size is the maximum). */
@@ -253,26 +273,34 @@ 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)
+/* Long articles (.multicol comes from the backend render, based on
-   lift the 78rem cap and scrap the right gutter: a 1fr left gutter (which
+   content length — code excluded) lift the 78rem cap: main takes the full
-   holds the overlaying sidebar) and the article taking all the rest, out
+   width and the article composes itself inside it — fluid, bounded text
-   to the right viewport edge. The column count follows the width (see the
+   lanes, centered, with the surplus left vacant (see the article layout
-   `columns: 30rem` rule below). The .wide breakout is re-anchored to the
+   rules below). The left track — main always sits in column 2 — collapses
-   left gutter below (the article is no longer viewport-centered). */
+   to zero when the page has no sidebar; the sidebar then simply overlays
+   the vacant zone, as it does on single-column pages. */
 body:has(.multicol) #content {
-  grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
+  grid-template-columns: 0 minmax(0, 1fr);
+}
+
+/* Only when the vacant zone cannot hold the sidebar does it get its own
+   12rem track — the same compromise single-column pages make below
+   102rem. Above that, a sidebar's presence changes nothing about the
+   article. */
+@media (max-width: 110rem) {
+  body:has(#sidebar):has(.multicol):not(.editing) #content {
+    grid-template-columns: 12rem minmax(0, 1fr);
+  }
 }
 
 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 +308,23 @@ 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, .edit-link and the banner's top-right pens
+     (z-index 10) while sliding in/out (the host now lives at the end of
+     <body>, so it needs its own stacking level). */
+  z-index: 10;
 }
 
 .editor-root.overlay {
@@ -385,7 +402,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 {
@@ -414,11 +431,19 @@ main {
   /* No top padding: a leading wide image sits flush under the banner, and
      text-first pages get their spacing from the h1's top margin instead. */
   padding: 0 1.25rem 3rem;
+  /* The layout container for the article composition: the multicol stage
+     (lane count), the margin fall and the .wide bleed respond to the
+     actual available width here — editor inset included — via container
+     queries and cqw units. */
+  container-type: inline-size;
 }
 
 article h1,
 article h2,
-article h3 {
+article h3,
+article h4,
+article h5,
+article h6 {
   font-family: var(--font-heading);
   font-weight: 600;
   line-height: 1.25;
@@ -438,13 +463,31 @@ article dl,
 article blockquote,
 article pre,
 article figure,
-article table {
+article table,
+article h3,
+article h4,
+article h5,
+article h6 {
   margin-top: 0;
   margin-bottom: 1rem;
 }
 
-article h3 {
+/* Headings separate from the text above via a top margin on the sibling
-  margin: 1.4rem 0 0.4rem;
+   combinator: a heading that is the first child of a container (e.g. the
+   top of a .colseg column segment) gets no gap, and browsers truncate the
+   margin at column breaks, so column tops stay aligned. */
+article h3,
+article h4,
+article h5,
+article h6 {
+  margin-bottom: 0.4rem;
+}
+
+article * + h3,
+article * + h4,
+article * + h5,
+article * + h6 {
+  margin-top: 1.4rem;
 }
 
 /* Lists: small diamond emoji markers — blue 🔹 on odd nesting levels,
@@ -452,7 +495,7 @@ article h3 {
    lines align. */
 article ul {
   list-style: none;
-  padding-inline-start: 1em;
+  padding-inline-start: 1.8em;
 }
 
 article ul li::before {
@@ -534,22 +577,119 @@ article dd {
   hyphens: auto;
 }
 
-/* Multi-column reading, but only for long articles (pagerite.js adds
+/* The long-article composition (.multicol): a fluid but bounded text
-   .multicol based on content length and splits the body into .colseg segments
+   lane with a 16rem side zone at the article's left, centered in main —
-   separated by full-width h2s and wide figures; only segments with enough
+   surplus width becomes vacant space, never endless text. (The backend
-   text get .cols). No fixed breakpoint: `columns: 30rem` lets CSS fit as
+   render splits the body into .colseg segments separated by full-width
-   many columns of at least 30rem as the article's current width allows —
+   h2s and .wide elements, tags text-heavy segments .cols — a ::: nocols
-   since .multicol also uncaps the article width (see #content above), a
+   container opts its section out — and flags the article .multicol; CSS
-   wider window simply yields more columns. */
+   owns the geometry.) Technical content wants a wide lane: up to 42rem
-.multicol .colseg.cols {
+   single, or two fluid lanes (36rem minimum, never more than two) once
-  columns: 30rem;
+   they fit beside the zone, capped at 102rem total. The zone — the
-  column-gap: 3.5rem;
+   region the nav sidebar overlays — is a margin indent on the lane
-  column-rule: 1px solid var(--line);
+   content; margin boxes float into it, and the text never moves. */
+article.multicol {
+  margin-inline: auto;
+  max-width: 58rem; /* 42rem lane + 16rem zone */
+}
+
+@container (min-width: 45rem) {
+  /* The side zone (not on phones): lane content indents 16rem; margin
+     boxes ({.margin} / ::: margin blocks, ::: aside, {.margin} figures)
+     float at the article's left edge — the same region the nav sidebar
+     overlays. Scoped to direct .body children (the backend render keeps
+     margin blocks out of the column segments); nested ones keep the
+     in-column float fallback. */
+  .multicol .body>.colseg,
+  .multicol .body>h1,
+  .multicol .body>h2,
+  article.multicol>h1 {
+    margin-left: 16rem;
+  }
+
+  .multicol .body>.margin,
+  .multicol .body>.aside,
+  .multicol .body>figure:has(.margin) {
+    float: left;
+    clear: left;
+    width: 14rem;
+    max-width: none;
+    margin: 0.3rem 2rem 1rem 0;
+  }
+
+  /* Wide separators start below any margin box — their bleed must not
+     wrap around it. */
+  .multicol .body>figure:has(.wide),
+  .multicol .body>div.wide,
+  .multicol .body>pre.wide {
+    clear: left;
+  }
+}
+
+@container (min-width: 96rem) {
+  article.multicol {
+    max-width: 102rem;
+  }
+
+  /* Two fluid lanes (36rem minimum) beside the zone, up to the 102rem
+     cap — wider windows just add vacant space. */
+  .multicol .colseg.cols {
+    columns: 36rem 2;
+    column-gap: 3.5rem;
+    column-rule: 1px solid var(--line);
+  }
+}
+
+/* With a sidebar, below 110rem the sidebar gets its own 12rem track (see
+   #content). The track IS the left lane then: no in-article zone, the
+   text lane runs fluid (up to 86rem), and margin boxes fall all the way
+   left into the track — sliding under the translucent sticky nav, which
+   only ever occupies its top. (The track never exists once the container
+   reaches 96rem, so the two-lane rules above never meet it. Not below
+   48rem: there the sidebar becomes a link strip above the article and
+   there is no track to fall into.) */
+@media (min-width: 48rem) and (max-width: 110rem) {
+  body:has(#sidebar):has(.multicol):not(.editing) article.multicol {
+    max-width: 86rem;
+  }
+
+  body:has(#sidebar):has(.multicol):not(.editing) .multicol .body>.colseg,
+  body:has(#sidebar):has(.multicol):not(.editing) .multicol .body>h1,
+  body:has(#sidebar):has(.multicol):not(.editing) .multicol .body>h2,
+  body:has(#sidebar):has(.multicol):not(.editing) article.multicol>h1 {
+    margin-left: 0;
+  }
+
+  body:has(#sidebar):has(.multicol):not(.editing) .multicol .body>.margin,
+  body:has(#sidebar):has(.multicol):not(.editing) .multicol .body>.aside,
+  body:has(#sidebar):has(.multicol):not(.editing) .multicol .body>figure:has(.margin) {
+    float: left;
+    clear: left;
+    width: 12rem;
+    max-width: none;
+    /* From the text's left edge to the page's left edge: half the
+       centering difference plus the track and main's padding. */
+    margin: 0.3rem 0 1rem calc(50% - 50cqw - 13.25rem);
+  }
+}
+
+/* A shrink-wrapped figure (explicit image width) centers in the plain
+   layout; inside a column the centering looks adrift — left-align.
+   Floated figures keep their own margins (the text gap). */
+.multicol .colseg.cols figure:has(img[width]):not(:has(.left), :has(.right), :has(.margin)) {
+  margin-inline: 0;
 }
 
 .multicol .colseg {
   margin-bottom: 1rem;
 
+  h3,
+  h4,
+  h5,
+  h6 {
+    break-after: avoid-column;
+  }
+
   p,
   li {
     break-inside: avoid-column;
@@ -559,7 +699,11 @@ article dd {
   pre,
   blockquote,
   table,
-  dl {
+  ul,
+  ol,
+  dl,
+  .admonition,
+  .markdown-alert {
     break-inside: avoid;
   }
 }
@@ -579,10 +723,11 @@ article a:hover {
   color: var(--accent);
 }
 
-/* Blockquotes: inner paragraphs carry no margins (spacing comes from the
+/* Blockquotes: spacing comes from the blockquote itself (bottom-only like
-   blockquote itself, bottom-only like everything else in articles). The
+   everything else in articles); inner paragraphs keep only the gap between
-   negative left margin pushes the bar out past the text edge, so quoted
+   them. The negative left margin pushes the bar out past the text edge, so
-   text aligns with the surrounding paragraphs — same trick as code blocks. */
+   quoted text aligns with the surrounding paragraphs — same trick as code
+   blocks. */
 blockquote {
   margin: 0 0 1rem -0.5rem;
   padding: 0 0 0 0.25rem;
@@ -594,42 +739,133 @@ blockquote p {
   margin: 0;
 }
 
-/* Admonitions (markdown !!! note/warning/...): a lightweight callout in
+blockquote p + p {
-   the blockquote idiom — accent bar and a faint wash, recolored per type.
+  margin-top: 0.6rem;
+}
+
+/* Admonitions (markdown !!! note/warning/...) and GitHub-style alerts
+   (> [!NOTE] ...): a lightweight callout in the blockquote idiom — accent
+   bar and a faint wash, recolored per type, with a type emoji on the
+   title. The negative left margin pushes bar and wash out past the text
+   edge so the inner text aligns with surrounding paragraphs — same trick
+   as blockquotes and code blocks (margin-left = border + padding-left).
    Bottom-only margins like everything else in articles; inner paragraphs
    carry no margins of their own. */
-.admonition {
+.admonition,
-  margin: 0 0 1rem;
+.markdown-alert {
+  margin: 0 0 1rem -1.15rem;
   padding: 0.4rem 0.9rem;
   border-left: 0.25rem solid var(--admonition-color, var(--accent));
   border-radius: 0 0.3rem 0.3rem 0;
   background: color-mix(in srgb, var(--admonition-color, var(--accent)) 7%, transparent);
 }
 
-.admonition> :last-child {
+.admonition> :last-child,
+.markdown-alert> :last-child {
   margin-bottom: 0;
 }
 
-.admonition-title {
+.admonition-title,
+.markdown-alert-title {
   margin: 0 0 0.2rem;
   font-weight: 600;
   color: var(--admonition-color, var(--accent));
 }
 
+.admonition-title::before,
+.markdown-alert-title::before {
+  padding-right: 0.35em;
+}
+
+.admonition.note .admonition-title::before,
+.markdown-alert-note .markdown-alert-title::before {
+  content: "ℹ️";
+}
+
+.admonition.tip .admonition-title::before,
+.admonition.hint .admonition-title::before,
+.markdown-alert-tip .markdown-alert-title::before {
+  content: "✨";
+}
+
+.admonition.important .admonition-title::before,
+.markdown-alert-important .markdown-alert-title::before {
+  content: "❗";
+}
+
+.admonition.success .admonition-title::before {
+  content: "✅";
+}
+
+.admonition.warning .admonition-title::before,
+.markdown-alert-warning .markdown-alert-title::before {
+  content: "⚠️";
+}
+
+.admonition.caution .admonition-title::before,
+.markdown-alert-caution .markdown-alert-title::before {
+  content: "🔥";
+}
+
+.admonition.danger .admonition-title::before,
+.admonition.failure .admonition-title::before {
+  content: "⛔";
+}
+
 .admonition.tip,
 .admonition.important,
 .admonition.hint,
-.admonition.success {
+.admonition.success,
+.markdown-alert-tip,
+.markdown-alert-important {
   --admonition-color: var(--accent2);
 }
 
 .admonition.warning,
 .admonition.caution,
 .admonition.danger,
-.admonition.failure {
+.admonition.failure,
+.markdown-alert-warning,
+.markdown-alert-caution {
   --admonition-color: var(--accent3);
 }
 
+/* Side boxes: ::: aside is a muted floated box (consecutive asides stack
+   via clear: left); {.margin} / ::: margin is a plainer margin note, and
+   figures take {.margin} like {.left}. On multicol pages they float in
+   the composition's left side zone — or in the sidebar's track when the
+   layout reserves one (see the article section); on wide single-column
+   pages they lean into the left gutter (with the figure rules below);
+   otherwise they stay in-column left floats. Headings already clear
+   floats, so boxes never bleed into the next section. */
+.aside {
+  float: left;
+  clear: left;
+  width: 30%;
+  max-width: 20rem;
+  margin: 0.3rem 1.2rem 1rem 0;
+  padding: 0.6rem 0.9rem;
+  font-size: 0.9rem;
+  color: var(--muted);
+  background: color-mix(in srgb, var(--accent) 6%, transparent);
+  border-radius: 0.3rem;
+}
+
+.aside> :last-child,
+.margin> :last-child {
+  margin-bottom: 0;
+}
+
+.margin {
+  float: left;
+  clear: left;
+  width: 30%;
+  max-width: 20rem;
+  margin: 0.3rem 1.2rem 1rem 0;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
 pre {
   overflow-x: auto;
   padding: 0.5rem 0.8rem;
@@ -643,10 +879,15 @@ pre {
   position: relative;
 }
 
-/* Inline code integrates with the text, no box of its own */
+/* Inline code integrates with the text, no box of its own. Instead of a
-p code,
+   fixed em shrink (which can't fit every body/code font pairing — Fira
-li code {
+   Code's x-height ratio 0.525 is taller than Source Sans 3's 0.478 yet
-  font-size: 0.85em;
+   shorter than Inter's 0.546), font-size-adjust scales whatever code font
+   is in use so its x-height matches the body font's ratio. Browsers
+   without font-size-adjust get unadjusted 1em code, which is fine. */
+code {
+  font-family: var(--font-code);
+  font-size-adjust: ex-height var(--code-x-height);
 }
 
 /* Click-to-copy button (added by pagerite.js) */
@@ -675,11 +916,6 @@ pre:hover .copy,
   color: var(--accent);
 }
 
-code {
-  font-family: var(--font-code);
-  font-size: 0.88em;
-}
-
 /* Tables separate by color, not lines: the header is a soft vertical
    gradient tinted with the theme's accent (themes can override the
    --table-head-* stops outright), body cells carry a very faint diagonal
@@ -791,6 +1027,31 @@ figure:has(img[width]) {
   width: fit-content;
 }
 
+/* {.margin} figures float left like {.left} ones — until they fall into
+   the side zone (see the composition rules up in the article section). */
+figure:has(.margin) {
+  float: left;
+  width: 30%;
+  max-width: 50%;
+  margin: 0.3rem 1em 1rem 0;
+}
+
+/* Wide single-column pages: margin boxes lean into the vacant left
+   gutter instead (below 104rem the gutter cannot hold the box, and while
+   editing the docked panel reshapes the gutters — in both they stay
+   plain floats). */
+@media (min-width: 104rem) {
+  body:not(.editing):not(:has(.multicol)) .body>.margin,
+  body:not(.editing):not(:has(.multicol)) .body>.aside,
+  body:not(.editing):not(:has(.multicol)) .body>figure:has(.margin) {
+    float: left;
+    clear: left;
+    width: 12rem;
+    max-width: none;
+    margin: 0.3rem 0 1rem -13.25rem;
+  }
+}
+
 /* .wide is full bleed: edge to edge of the viewport (or of the space right
    of the docked editor), while staying in flow so it keeps its vertical
    space. The article column is centered in the available space, so negative
@@ -803,53 +1064,69 @@ figure:has(img[width]) {
    is not viewport-centered; each just overrides width/margin-inline, and
    later rules win at equal specificity. The analytics dashboard uses the
    same breakout directly on its container (div.wide — it is the page's
-   whole content, not a figure). */
+   whole content, not a figure), and code blocks via a trailing {.wide}
+   line (fence block attrs land on <pre> itself). */
 figure:has(.wide),
-div.wide {
+div.wide,
+pre.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. */
-figure:has(.wide) img {
+figure:has(.wide) img,
+pre.wide {
   border-radius: 0;
 }
 
-/* .wide on multicol pages: the article is not viewport-centered (no right
+/* Editing: shrink the bleed to the space right of the docked editor. The
-   gutter), so the bleed anchors at the left gutter — the 1fr share of the
+   window keeps its overlay scrollbars while editing, so — unlike a classic
-   1fr + 4fr grid, i.e. 20vw — plus main's padding, and spans on to the
+   scrollbar — they take no layout space and the vw math stays exact.
-   right viewport edge. */
+   Multicol pages measure the bleed from main instead (cqw rules below),
-body:has(.multicol) figure:has(.wide) {
+   which insets for the editor automatically. */
-  margin-inline: calc(-20vw - 1.25rem) 0;
+body.editing figure:has(.wide),
-}
+body.editing pre.wide {
-
-/* Editing: shrink the bleed to the space right of the docked editor. */
-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
+/* Narrow single-column pages with a sidebar: below 102rem the symmetric
-   editor, and the bleed also crosses #content's 1rem editing gap plus
+   gutters can no longer both hold the 12rem sidebar, so #content reserves
-   main's 1.25rem left padding (the gutter shrink from the padding roughly
+   it with a fixed left track (see the matching media query below) and the
-   cancels the rounding): −2rem in total. */
+   article always starts at 12rem (+ main's 1.25rem padding) — the bleed
-body.editing:has(.multicol) figure:has(.wide) {
+   margin is a plain constant. Scoped by :has(#sidebar) since the sidebar
-  margin-inline: calc((100vw - var(--editor-w)) / -5 - 2rem) 0;
+   element is omitted entirely on pages without sub-navigation, and
+   excluded while editing, where the editing rules above apply instead.
+   (Multicol pages use the same fixed track below 110rem — their rules
+   are below.) */
+@media (max-width: 102rem) {
+  body:has(#sidebar):not(.editing):not(:has(.multicol)) figure:has(.wide),
+  body:has(#sidebar):not(.editing):not(:has(.multicol)) pre.wide {
+    margin-inline: -13.25rem 0;
+  }
 }
 
-/* Narrow windows with a sidebar: below 102rem the symmetric gutters can no
+/* .wide on multicol pages: the same edge-to-edge bleed, but measured from
-   longer both hold the 12rem sidebar, so #content reserves it with a fixed
+   main (the container) instead of the viewport — cqw includes the editor
-   left track (see the matching media query below) and the article always
+   inset automatically, so no editing override is needed. The 2.5rem
-   starts at 12rem (+ main's 1.25rem padding) — the bleed margin is a plain
+   covers main's side padding. */
-   constant. Scoped by :has(#sidebar) since the sidebar element is omitted
+body:has(.multicol) figure:has(.wide),
-   entirely on pages without sub-navigation, and excluded while editing,
+body:has(.multicol) div.wide,
-   where the editing rules above apply instead. */
+body:has(.multicol) pre.wide {
-@media (max-width: 102rem) {
+  width: calc(100cqw + 2.5rem);
-  body:has(#sidebar):not(.editing) figure:has(.wide) {
+  margin-inline: calc(50% - 50cqw - 1.25rem);
-    margin-inline: -13.25rem 0;
+}
+
+/* Multicol with a sidebar track (≤110rem, see #content): main starts
+   12rem in, so the bleed extends left past the track to the true viewport
+   edge — sliding under the translucent sidebar. */
+@media (max-width: 110rem) {
+  body:has(#sidebar):has(.multicol):not(.editing) figure:has(.wide),
+  body:has(#sidebar):has(.multicol):not(.editing) div.wide,
+  body:has(#sidebar):has(.multicol):not(.editing) pre.wide {
+    width: calc(100cqw + 14.5rem);
+    margin-inline: calc(50% - 50cqw - 13.25rem) 0;
   }
 }
 
@@ -886,31 +1163,25 @@ article h2 {
 
 /* Narrow windows with a sidebar: below 102rem the symmetric gutters can no
    longer both hold the 12rem sidebar, so reserve its space with a fixed
-   left track instead of letting it overlap the article. The article then
+   left track instead of letting it overlap the article (multicol pages use
-   always starts at 12rem (+ main's 1.25rem padding), which the matching
+   this same track at every width — see the #content rules above). The
-   .wide breakout rule in the images section relies on. Scoped by
+   article then always starts at 12rem (+ main's 1.25rem padding), which
-   :has(#sidebar) since the sidebar element is omitted entirely on pages
+   the matching .wide breakout rule in the images section relies on.
-   without sub-navigation. */
+   Scoped by :has(#sidebar) since the sidebar element is omitted entirely
+   on pages without sub-navigation. */
 @media (max-width: 102rem) {
   body:has(#sidebar):not(.editing) #content {
     grid-template-columns: 12rem minmax(0, 78rem) minmax(0, 1fr);
   }
-
-  /* Long articles stay fluid here too: same 12rem reservation for the
-     sidebar, then the article takes everything to the right viewport
-     edge. The article's left edge stays at 12rem either way, so the
-     constant .wide breakout margin remains correct. */
-  body:has(#sidebar):has(.multicol):not(.editing) #content {
-    grid-template-columns: 12rem minmax(0, 1fr);
-  }
 }
 
 /* Phones and other narrow viewports: single-column layout with the
    sidebar lifted above the article as a wrapping link strip, and no
-   floated figures — .left/.right fall back to plain centered figures
+   floats at all — .left/.right/.margin figures fall back to plain
-   (explicit img widths still shrink-wrap), while .wide keeps its full
+   centered figures (explicit img widths still shrink-wrap), margin boxes
-   viewport bleed. */
+   go full width, 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
@@ -935,6 +1206,17 @@ article h2 {
     gap: 0.15rem 0.9rem;
   }
 
+  /* The editor panel takes over the entire viewport: no space left for
+     the banner or the page content (main.js pins its top to 0 at these
+     widths). */
+  body.editing #content {
+    margin-left: 0;
+  }
+
+  .editor-host {
+    width: 100vw;
+  }
+
   #content {
     display: flex;
     flex-direction: column;
@@ -955,31 +1237,42 @@ 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;
   }
 
   figure:has(.right),
-  figure:has(.left) {
+  figure:has(.left),
+  figure:has(.margin) {
     float: none;
     width: 100%;
     max-width: none;
     margin: 0 auto 1.5rem;
   }
 
+  /* Margin boxes go full width too — no room for side floats on a
+     phone. */
+  .aside,
+  .margin {
+    float: none;
+    width: auto;
+    max-width: none;
+    margin: 0 0 1rem;
+  }
+
   /* An explicit img width still shrink-wraps the figure (redeclared: this
      block comes after the desktop rule at equal specificity). */
   figure:has(img[width]) {
     width: fit-content;
   }
 
-  /* The 102rem sidebar/multicol .wide margins assume a left sidebar
+  /* The single-column sidebar .wide margins assume a left sidebar column;
-     column; with the sidebar on top the article is viewport-wide and the
+     with the sidebar on top the article is viewport-wide and the plain
-     plain centered bleed applies again. */
+     centered bleed applies again. (Multicol pages need no override: their
-  body:has(#sidebar):not(.editing) figure:has(.wide),
+     cqw bleed is exact at any width.) */
-  body:has(.multicol) figure:has(.wide) {
+  body:has(#sidebar):not(.editing):not(:has(.multicol)) figure:has(.wide) {
     margin-inline: calc(50% - 50vw);
   }
 }
@@ -1033,11 +1326,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,57 @@ 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.
+// Below 48rem the panel covers the entire viewport (pagerite.css), so its
+// top stays 0 regardless of the banner.
+const narrow = matchMedia('(max-width: 48rem)')
+function trackPanelTop() {
+  const content = document.getElementById('content')
+  if (host && content) {
+    host.style.top = narrow.matches
+      ? '0px'
+      : `${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 +87,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 +119,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 +128,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 +137,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();
   }
 
@@ -219,9 +235,26 @@ import "overlayscrollbars/overlayscrollbars.css";
       btn.textContent = "copy";
       btn.addEventListener("click", async () => {
         const code = pre.querySelector("code");
-        await navigator.clipboard.writeText(
+        const text = (code || pre).textContent.replace(/\n$/, "");
-          (code || pre).textContent.replace(/\n$/, ""),
+        // navigator.clipboard exists only in secure contexts (https or
-        );
+        // localhost); viewing over plain http needs the textarea fallback.
+        try {
+          if (navigator.clipboard) {
+            await navigator.clipboard.writeText(text);
+          } else {
+            const ta = document.createElement("textarea");
+            ta.value = text;
+            ta.style.cssText = "position:fixed;opacity:0";
+            document.body.append(ta);
+            ta.select();
+            document.execCommand("copy");
+            ta.remove();
+          }
+        } catch {
+          btn.textContent = "failed";
+          setTimeout(() => (btn.textContent = "copy"), 1500);
+          return;
+        }
         btn.textContent = "copied";
         btn.classList.add("copied");
         setTimeout(() => {
@@ -264,44 +297,6 @@ import "overlayscrollbars/overlayscrollbars.css";
     renderAuthUi();
     placeEditPen();
     fitNav();
-    // 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.
-    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 +323,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 +372,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 +416,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 +485,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 +498,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 +511,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 +557,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 +712,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 +728,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/analytics.py

@@ -12,8 +12,13 @@ away (``_is_bot_ua``) and their pings are ignored, so they land in the
 crawler list too.  Idle-time link preloads from pagerite.js carry an
 ``x-pagerite-preload`` header and are not tracked at all — the ping sent
 when the user actually navigates does the counting.
-Admin clients ping with ``hide=1``, which records nothing and removes any
+Admin clients ping with ``hide=1``: the client record is flagged ``hide``,
-visit the session accumulated before logging in.  Scanner telltale 404s
+which covers everything that client ever did — visits and crawler hits
+from before the login included.  Aggregates (site visits, page views,
+transitions) are not stored; they are computed at display time from the
+visit records, excluding hidden clients, and hidden clients' visits,
+crawler hits, abuse hits and metadata are left out of the viewer payload
+entirely.  Scanner telltale 404s
 (dotpaths, *.php) classify the source IP as abuse; its hits — including
 earlier crawler hits — are moved to the abuse list, which the viewer
 groups by IP with full request paths.  Client metadata (IP, UA, language,
@@ -87,15 +92,47 @@ class Client(msgspec.Struct, omit_defaults=True):
     ua: str = ""
     #: Compact display form of ``ua`` (browser/OS/device) when parsable.
     ua_pretty: str = ""
+    #: True for admin clients (hide=1 ping): their visits, crawler hits and
+    #: abuse hits are recorded but excluded from all statistics and from
+    #: the viewer payload.
+    hide: bool = False
+
+
+class Nav(msgspec.Struct, omit_defaults=True):
+    """One navigation inside a visit: from ``fr`` to ``to``.
+
+    ``to`` is an internal page path or an external https exit URL.  Every
+    navigation is logged (repeats included), keyed by its timestamp in
+    ``Visit.navs``, so display-time aggregates can count views and
+    transitions; ``Visit.trail`` keeps the first-seen order.
+    """
+
+    fr: str
+    to: str
+
+
+class TrailItem(msgspec.Struct, omit_defaults=True):
+    """One first-seen target in a visit trail: a page or external exit URL.
+
+    ``read`` accumulates active reading time (seconds) across the whole
+    visit; ``status`` is the most recent HTTP status seen for the target.
+    """
+
+    to: str
+    #: Accumulated active reading time in seconds.
+    read: int = 0
+    #: Most recent HTTP status of the response (200 or 404).
+    status: int = 200
 
 
 class Visit(msgspec.Struct, omit_defaults=True):
     """One visit: the initial-load data plus everything seen afterwards.
 
-    ``trail`` holds page paths and external exit URLs in first-seen
+    ``trail`` holds the entry page and everything seen afterwards, keyed by
-    order; re-visiting an already seen page does not append. The entry
+    the timestamp of first sight (insertion order = first-seen order);
-    page itself is in ``entry``, not in the trail.  Client metadata is
+    re-visiting an already seen target updates its item instead of
-    held in ``Analytics.clients`` keyed by ``client``.
+    appending.  Client metadata is held in ``Analytics.clients`` keyed by
+    ``client``.
     """
 
     start: datetime
@@ -104,13 +141,13 @@ class Visit(msgspec.Struct, omit_defaults=True):
     referer: str = ""
     #: 6-byte blake3 hash referencing ``Analytics.clients``.
     client: bytes = b""
-    trail: list[str] = []
+    #: First-seen targets keyed by their timestamp (entry included).
+    trail: dict[datetime, TrailItem] = {}
+    #: Every navigation ping (repeats included) keyed by its timestamp; the
+    #: aggregates are computed from this log at display time.
+    navs: dict[datetime, Nav] = {}
     #: UTM query parameters from the landing URL, keyed by parameter name.
     utm: dict[str, str] = {}
-    #: Active reading time per path (seconds), keyed by path.
-    read: dict[str, int] = {}
-    #: HTTP status of the response when the path was first seen (200 or 404).
-    statuses: dict[str, int] = {}
 
 
 class CrawlerHit(msgspec.Struct, omit_defaults=True):
@@ -166,6 +203,22 @@ class Analytics(msgspec.Struct, omit_defaults=True):
     clients: dict[bytes, Client] = {}
     #: IPs classified as scanners/abusers (keys; values always True).
     abuse_ips: dict[str, bool] = {}
+
+
+class Display(msgspec.Struct, omit_defaults=True):
+    """The viewer payload: visible data plus display-time aggregates.
+
+    Hidden clients are excluded everywhere: their visits, crawler hits,
+    abuse hits and metadata are dropped, and the aggregates are computed
+    from the visible visits only.
+    The aggregate shapes match what the viewer consumes: sparse 5-minute
+    buckets keyed by their floored ISO timestamp.
+    """
+
+    visits: list[Visit] = []
+    crawlers: list[CrawlerHit] = []
+    abuse: list[AbuseHit] = []
+    clients: dict[bytes, Client] = {}
     #: Page transitions per 5-minute bucket (sparse):
     #: from -> to -> bucket ISO -> count. ``from`` is the referer origin or
     #: "(direct)" for initial loads, a page path for pings.
@@ -316,10 +369,6 @@ class Store:
                 pass  # legacy schema / corrupt or unreadable file: start fresh
         #: client hash -> index of the current visit in data.visits
         self.sessions: dict[bytes, int] = {}
-        #: visit index -> count events recorded for that visit, so
-        #: ``_remove_visit`` can reverse all of them — not just the ones
-        #: from the visit's creation.  In-memory only, like ``sessions``.
-        self._count_log: dict[int, list[tuple]] = {}
         #: ip -> external https origin of the latest document GET carrying
         #: one, stashed for the visit the client's initial ping starts.
         #: Internal or absent referers never touch the table.
@@ -373,6 +422,9 @@ class Store:
     def _flush_crawlers(self, now: datetime | None = None) -> list[bytes]:
         """Move expired pending crawler hits into persistent ``data.crawlers``.
 
+        Hits from a hidden client (admin) are discarded instead of
+        persisted — admin browsing must not land in the crawler list.
+
         Returns the client hashes of the newly flushed hits so callers can
         schedule async enrichment.
         """
@@ -383,68 +435,63 @@ class Store:
         expired: list[CrawlerHit] = []
         remaining: list[CrawlerHit] = []
         for hit in self.pending_crawlers:
-            (expired if hit.start <= cutoff else remaining).append(hit)
+            if hit.start > cutoff:
+                remaining.append(hit)
+                continue
+            client = self.data.clients.get(hit.client)
+            if client is not None and client.hide:
+                continue  # hidden admin client: not a crawler
+            expired.append(hit)
         if not expired:
+            self.pending_crawlers = remaining
             return []
         self.pending_crawlers = remaining
         self.data.crawlers.extend(expired)
         self._save()
         return [hit.client for hit in expired]
 
-    def _count(self, table: dict[str, int], key: str) -> None:
+    def _hidden(self, client_hash: bytes) -> bool:
-        table[key] = table.get(key, 0) + 1
+        """True when the client record is flagged hidden (admin)."""
+        client = self.data.clients.get(client_hash)
+        return client is not None and client.hide
 
-    def _count_transition(self, fr: str, to: str, now: datetime) -> None:
+    def display(self) -> Display:
-        """Count one transition in its 5-minute bucket (sparse matrix)."""
+        """Build the viewer payload, excluding hidden clients.
-        buckets = self.data.transitions.setdefault(fr, {}).setdefault(to, {})
-        self._count(buckets, _bucket(now))
 
-    def _uncount(self, table: dict[str, int], key: str) -> None:
+        The aggregates (site visits, page views, transitions) are computed
-        """Reverse one ``_count``: decrement and drop empty keys."""
+        here from the visit records rather than stored, so a client that
-        if key in table:
+        becomes hidden after navigations were already logged disappears
-            table[key] -= 1
+        from every statistic.  Internal-path navigations count as page
-            if table[key] <= 0:
+        views; external https targets are transitions only.
-                del table[key]
-
-    def _remove_visit(self, index: int) -> None:
-        """Delete a visit and reverse every count it recorded.
-
-        Used when a known visitor turns out to be an admin (hide=1 ping):
-        the session is scrubbed from the stats.  The in-memory
-        ``_count_log`` tracks each site-visit/view/transition count the
-        visit produced, so the scrub reverses all of them — including the
-        ones logged by later pings inside the visit.
         """
-        for event in self._count_log.pop(index, ()):
+        visits = [v for v in self.data.visits if not self._hidden(v.client)]
-            kind = event[0]
+        display = Display(
-            if kind == "site":
+            visits=visits,
-                self._uncount(self.data.site_visits, event[1])
+            crawlers=[h for h in self.data.crawlers if not self._hidden(h.client)],
-            elif kind == "view":
+            abuse=[h for h in self.data.abuse if not self._hidden(h.client)],
-                views = self.data.views.get(event[1])
+            clients={h: c for h, c in self.data.clients.items() if not c.hide},
-                if views is not None:
+        )
-                    self._uncount(views, event[2])
+        for visit in visits:
-                    if not views:
+            bucket = _bucket(visit.start)
-                        del self.data.views[event[1]]
+            site = display.site_visits
-            else:  # transition
+            site[bucket] = site.get(bucket, 0) + 1
-                _, fr, to, bucket = event
+            entry_views = display.views.setdefault(visit.entry, {})
-                fr_map = self.data.transitions.get(fr)
+            entry_views[bucket] = entry_views.get(bucket, 0) + 1
-                if fr_map is not None:
+            fr = visit.referer or "(direct)"
-                    buckets = fr_map.get(to)
+            buckets = display.transitions.setdefault(fr, {}).setdefault(visit.entry, {})
-                    if buckets is not None:
+            buckets[bucket] = buckets.get(bucket, 0) + 1
-                        self._uncount(buckets, bucket)
+            for t, nav in visit.navs.items():
-                        if not buckets:
+                nb = _bucket(t)
-                            del fr_map[to]
+                if nav.to.startswith("/"):
-                    if not fr_map:
+                    nav_views = display.views.setdefault(nav.to, {})
-                        del self.data.transitions[fr]
+                    nav_views[nb] = nav_views.get(nb, 0) + 1
-        del self.data.visits[index]
+                nbuckets = display.transitions.setdefault(nav.fr, {}).setdefault(nav.to, {})
-        # Sessions and count logs store list indices; shift the ones past
+                nbuckets[nb] = nbuckets.get(nb, 0) + 1
-        # the removed visit.
+        return display
-        for key, i in list(self.sessions.items()):
+
-            if i > index:
+    def display_json(self) -> str:
-                self.sessions[key] = i - 1
+        """The ``display()`` payload as a JSON string for the WebSocket."""
-        self._count_log = {
+        return msgspec.json.encode(self.display()).decode()
-            i - 1 if i > index else i: log for i, log in self._count_log.items()
-        }
 
     def _client_ip(self, client_hash: bytes) -> str:
         """Return the IP stored for ``client_hash``, or "" if missing."""
@@ -601,20 +648,9 @@ class Store:
             client=client_hash,
             utm=utm or {},
         )
-        visit.statuses[entry] = status
+        visit.trail[now] = TrailItem(to=entry, status=status)
         self.data.visits.append(visit)
-        index = len(self.data.visits) - 1
+        self.sessions[client_hash] = len(self.data.visits) - 1
-        self.sessions[client_hash] = index
-        bucket = _bucket(now)
-        fr = referer or "(direct)"
-        self._count(self.data.site_visits, bucket)
-        self._count(self.data.views.setdefault(entry, {}), bucket)
-        self._count_transition(fr, entry, now)
-        self._count_log[index] = [
-            ("site", bucket),
-            ("view", entry, bucket),
-            ("transition", fr, entry, bucket),
-        ]
         return visit
 
     def track_entry(
@@ -688,7 +724,10 @@ class Store:
         if index is None or index >= len(self.data.visits):
             return
         visit = self.data.visits[index]
-        visit.read[path] = visit.read.get(path, 0) + seconds
+        for item in visit.trail.values():
+            if item.to == path:
+                item.read += seconds
+                return
 
     def ping(
         self,
@@ -711,10 +750,11 @@ class Store:
         A ping with no known session starts a fresh visit, consuming the
         referer and UTM tags stashed by the document GET if there are any.
 
-        ``hide`` is set by admin clients: the ping cancels pending crawler
+        ``hide`` is set by admin clients: the client record is flagged
-        hits as usual, and any existing visit for this client session is
+        ``hide`` — which covers everything it ever did, including visits and
-        removed from the stats (the admin browsed anonymously before logging
+        crawler hits from before the login — and the navigation is recorded
-        in).  Nothing new is recorded.
+        normally.  Hidden clients are excluded from every statistic and list
+        at display time, and their pending crawler hits are discarded.
 
         Pings from IPs classified as abuse, and pings whose User-Agent
         claims a JS-running crawler identity (``_is_bot_ua``), are ignored
@@ -727,34 +767,35 @@ class Store:
         """
         flushed = self._flush_crawlers()
         lang, country = _parse_accept_language(accept_language)
-        client_hash = _client_hash(ip, ua, lang)
         if hide:
-            # Admin ping: cancel pending crawler hits and scrub the session.
+            # Admin ping: flag the client hidden and never a crawler hit.
+            # The flag lives on the client record, so it covers visits and
+            # crawler hits from before the login too; display-time
+            # aggregation excludes hidden clients from every statistic.
+            client_hash = self._ensure_client(ip, ua, lang, country=country)
+            self.data.clients[client_hash].hide = True
+            self.pending_crawlers = [
+                hit for hit in self.pending_crawlers if hit.client != client_hash
+            ]
+        else:
+            client_hash = _client_hash(ip, ua, lang)
+            if ip in self.data.abuse_ips:
+                return None, flushed
+            if _is_bot_ua(ua):
+                # A JS-running crawler (Googlebot, GoogleOther, Applebot
+                # execute JS and ping): never a visit.  Its pending crawler
+                # hits are kept and flush to ``data.crawlers`` normally.
+                return None, flushed
+            # A real visitor ping cancels any pending crawler hits from
+            # this client.
             self.pending_crawlers = [
                 hit for hit in self.pending_crawlers if hit.client != client_hash
             ]
-            self.pending_statuses.pop(client_hash, None)
-            index = self.sessions.pop(client_hash, None)
-            if index is not None and index < len(self.data.visits):
-                self._remove_visit(index)
-                self._save()
-            return None, flushed
-        if ip in self.data.abuse_ips:
-            return None, flushed
-        if _is_bot_ua(ua):
-            # A JS-running crawler (Googlebot, GoogleOther, Applebot execute
-            # JS and ping): never a visit.  Its pending crawler hits are
-            # kept and flush to ``data.crawlers`` normally.
-            return None, flushed
-        # A real visitor ping cancels any pending crawler hits from this client.
-        self.pending_crawlers = [
-            hit for hit in self.pending_crawlers if hit.client != client_hash
-        ]
         fr_path = _internal_path(from_) if from_ else ""
         if fr_path and read > 0:
             self._add_read(client_hash, fr_path, read)
         if not to:
-            if read > 0:
+            if read > 0 or hide:
                 self._save()
             return None, flushed
         if to.startswith("/") and not to.startswith("//"):
@@ -784,17 +825,15 @@ class Store:
         else:
             visit = self.data.visits[index]
             now = datetime.now(UTC)
-            bucket = _bucket(now)
+            visit.navs[now] = Nav(fr=fr, to=target)
-            log = self._count_log.setdefault(index, [])
+            # First-seen only: repeat pages and repeated exits update the
-            if target.startswith("/"):
+            # existing trail item (most recent status) instead of appending.
-                self._count(self.data.views.setdefault(target, {}), bucket)
+            for item in visit.trail.values():
-                log.append(("view", target, bucket))
+                if item.to == target:
-            self._count_transition(fr, target, now)
+                    item.status = target_status
-            log.append(("transition", fr, target, bucket))
+                    break
-            # First-seen only: repeat pages and repeated exits don't append.
+            else:
-            if visit.entry != target and target not in visit.trail:
+                visit.trail[now] = TrailItem(to=target, status=target_status)
-                visit.trail.append(target)
-            visit.statuses[target] = target_status
         self._save()
         visit_index = index if index is not None and index < len(self.data.visits) else None
         return visit_index, flushed

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
@@ -775,7 +782,7 @@ async def _broadcast_analytics() -> None:
     """Send the current analytics snapshot to every connected WS client."""
     if not _analytics_ws_clients:
         return
-    payload = msgspec.json.encode(analytics_store.data).decode()
+    payload = analytics_store.display_json()
     closed = set()
     for ws in _analytics_ws_clients:
         try:
@@ -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]
@@ -859,7 +865,8 @@ def _track_entry(path: str, request: Request, *, status: int = 200) -> list[byte
     Nothing is counted on the GET itself — the client's /_a ping starts the
     visit, so bots never register as visits (JS-running crawlers ping too,
     but the ping handler ignores known bot UAs).  (Admin clients ping too,
-    but with hide=1, which scrubs their session instead of recording it.)
+    but with hide=1, which flags their visit hidden: it is recorded but
+    excluded from all statistics and from the crawler list.)
 
     The devserver's health probe (``GET /?from=devserver.py`` from
     ``127.0.0.1``) is ignored: it is not real traffic and would otherwise be
@@ -935,7 +942,7 @@ async def analytics_websocket(ws: WebSocket) -> None:
     endpoint. Powers the analytics viewer rendered at /_a.
     """
     await ws.accept()
-    await ws.send_text(msgspec.json.encode(analytics_store.data).decode())
+    await ws.send_text(analytics_store.display_json())
     _analytics_ws_clients.add(ws)
     try:
         while True:
@@ -1008,15 +1015,20 @@ async def editor_ws(ws: WebSocket) -> None:
                     markdown = msg.get("markdown", "")
                     chain = resolve(data.menu, path)
                     node = chain[-1] if chain else None
+                    rendered = render(
+                        markdown,
+                        path,
+                        node.created if node else None,
+                        node.modified if node else None,
+                    )
                     await ws.send_json({
                         "type": "html",
                         "path": path,
-                        "html": render(
+                        "html": rendered.html,
-                            markdown,
+                        # Column-layout flags: the preview toggles the
-                            path,
+                        # article's .multicol class and swaps in the
-                            node.created if node else None,
+                        # segmented (.colseg/.cols) body html.
-                            node.modified if node else None,
+                        "multicol": rendered.multicol,
-                        ),
                         "has_h1": has_h1(markdown),
                     })
                 case "save":

pagerite/markdown.py

@@ -4,12 +4,36 @@ Raw HTML (including inline scripts) is passed through unfiltered: the
 single author is trusted. Extensions: tables and strikethrough (from the
 "default" preset), footnotes, definition lists, task lists,
 brace-attributes (`{.class width=300}` on any element, images in
-particular) and admonitions (``!!! note Title`` with an indented body —
+particular), admonitions (``!!! note Title`` with an indented body —
-note/tip/warning/etc., the title optional). Bare URLs autolink (GFM), with
+note/tip/warning/etc., the title optional) and GitHub-style alerts
+(``> [!NOTE]`` / TIP / IMPORTANT / WARNING / CAUTION, rendered in the
+same callout styling). ``::: name`` opens a generic container rendered
+as ``<div class="name">`` and closed by a matching ``:::`` (nest by
+giving the outer container more colons, e.g. `::::`); the name may be
+followed by brace attributes (``::: aside {.right}``). ``::: aside``
+floats as a muted side box, floating in the side zone at the article's
+left on all but phone widths — the same margin float ``{.margin}`` (or
+``::: margin``) gives any block — and ``::: nocols`` opts its section out
+of the column layout. A brace-attribute
+line as a block's last line (no blank line between) applies to the whole
+block, e.g. a paragraph ending with ``{.wide}`` breaks out of the column
+layout as a full-width element; written after a block (code fence,
+heading, container, ...) it applies to that preceding block. Bare URLs autolink (GFM), with
 the ``https://`` scheme hidden in the link text (``http://`` and other
 schemes stay visible; manually labelled links are untouched), and
 ``H~2~O`` / ``x^2^`` give sub/superscripts.
 
+render() also builds the layout structure: the top-level blocks are
+segmented for the column layout — h1/h2 headings, ``.wide`` blocks and
+margin-breakout blocks (``.margin``, ``::: aside``) stand on their own,
+the runs between them are wrapped in ``<div class="colseg">`` (tagged
+``.cols`` when the segment holds enough text, unless a ``::: nocols``
+container opts it out). The result carries ``multicol`` when the whole
+body justifies columns (views.py puts the class on the article); how
+many columns (never more than two), whether the margin breakout applies
+and every other viewport adaptation is then pagerite.css's call. The
+thresholds measure visible text, code blocks excluded.
+
 markdown-it's typographer is enabled, so body text gets SmartyPants-style
 replacements: straight quotes become curly, ``--`` / ``---`` become en / em
 dashes, ``...`` becomes an ellipsis, ``(c)`` becomes ©, and so on. Single
@@ -27,12 +51,15 @@ classes, e.g. `![alt](photo.avif "Caption"){.right}`.
 
 import re
 from datetime import datetime, timedelta
+from typing import NamedTuple
 
 from markdown_it import MarkdownIt
 from markdown_it.common.utils import escapeHtml
 from markdown_it.renderer import RendererHTML
 from mdit_py_plugins.admon import admon_plugin
 from mdit_py_plugins.attrs import attrs_plugin
+from mdit_py_plugins.attrs.parse import ParseError, parse as parse_attrs
+from mdit_py_plugins.container import container_plugin
 from mdit_py_plugins.deflist import deflist_plugin
 from mdit_py_plugins.footnote import footnote_plugin
 from mdit_py_plugins.gfm_autolink import gfm_autolink_plugin
@@ -65,6 +92,31 @@ def _highlight(text: str, lang: str, _attrs: str) -> str:
     return highlight(text, lexer, _formatter)
 
 
+def _fence_rule(
+    self: RendererHTML,
+    tokens,
+    idx: int,
+    options,
+    env: dict,
+) -> str:
+    """Render a fenced code block.
+
+    Like the default fence rule, but block attributes (a trailing `{...}`
+    line, applied to the fence token by _block_attrs) go on the <pre> — the
+    block element — instead of the <code>, which keeps only the language
+    class. This is what makes e.g. `{.wide}` or `{style="..."}` after a
+    code fence style the block itself.
+    """
+    token = tokens[idx]
+    info = token.info.strip() if token.info else ""
+    lang = info.split(maxsplit=1)[0] if info else ""
+    highlighted = (_highlight(token.content, lang, "")
+                   or escapeHtml(token.content))
+    code_class = f' class="{options.langPrefix}{lang}"' if lang else ""
+    return (f"<pre{self.renderAttrs(token)}><code{code_class}>"
+            f"{highlighted}</code></pre>\n")
+
+
 def _image_rule(
     self: RendererHTML,
     tokens,
@@ -107,6 +159,10 @@ def _unwrap_lone_figures(state) -> None:
         if child and child.type == "image":
             if (tokens[i - 1].type == "paragraph_open"
                     and tokens[i + 1].type == "paragraph_close"):
+                # A lone image becomes a <figure> (see _image_rule); block
+                # attrs on the paragraph (e.g. a trailing {.wide} line) move
+                # onto the image so they survive the unwrap.
+                _apply_attrs(child, tokens[i - 1].attrs or {})
                 tokens[i - 1].hidden = True
                 tokens[i + 1].hidden = True
 
@@ -149,6 +205,111 @@ def _shorten_autolinks(state) -> None:
                     text.content = text.content.removeprefix("https://")
 
 
+_CONTAINER_NAME_RE = re.compile(r"[a-zA-Z][\w-]*")
+
+
+def _apply_attrs(token, attrs: dict) -> None:
+    """Join/set parsed brace attributes (`{.class key=value}`) on a token."""
+    for key, value in attrs.items():
+        if key == "class":
+            token.attrJoin("class", value)
+        else:
+            token.attrSet(key, value)
+
+
+def _container_validate(params: str, _markup: str) -> bool:
+    """`::: name`, optionally followed by brace attrs (`::: aside {.right}`)."""
+    name, _, rest = params.strip().partition(" ")
+    if not _CONTAINER_NAME_RE.fullmatch(name):
+        return False
+    rest = rest.strip()
+    if not rest:
+        return True
+    try:
+        pos, _ = parse_attrs(rest)
+    except ParseError:
+        return False
+    # parse() stops at (returns the index of) the closing brace.
+    return pos == len(rest) - 1
+
+
+def _container_attrs(state) -> None:
+    """Apply `::: name {attrs}` classes to container tokens at parse time.
+
+    The container plugin's default render is a plain renderToken, so the
+    name and brace attributes must live on the token itself — and being a
+    core rule (rather than a render rule) lets the segmentation in
+    render() see the classes (::: aside's margin breakout, the ::: nocols
+    opt-out, {.wide} containers).
+    """
+    for token in state.tokens:
+        if token.type != "container_block_open":
+            continue
+        name, _, rest = token.info.strip().partition(" ")
+        token.attrJoin("class", name)
+        if rest.strip():
+            _, attrs = parse_attrs(rest.strip())
+            _apply_attrs(token, attrs)
+
+
+def _block_attrs(state) -> None:
+    """Apply `{.class key=value}` on a block's last line to the block.
+
+    The inline attrs plugin only covers attributes right after an image,
+    code span or link; this extends the same brace syntax to whole blocks,
+    e.g. a paragraph ending with a `{.wide}` line (no blank line between)
+    gets the `wide` class and thereby breaks out of the column layout.
+    A lone `{...}` paragraph applies to the previous block instead (this
+    is how headings take attributes, since a heading's next line always
+    starts a new paragraph). Runs before the typographer so quotes inside
+    attributes stay straight.
+    """
+    tokens = state.tokens
+    for i, token in enumerate(tokens):
+        if token.type != "inline" or not token.children:
+            continue
+        text = token.children[-1]
+        if (text.type != "text" or not text.content.startswith("{")
+                or not text.content.endswith("}")):
+            continue
+        try:
+            _, attrs = parse_attrs(text.content.strip())
+        except ParseError:
+            continue
+        standalone = len(token.children) == 1
+        if not standalone and token.children[-2].type != "softbreak":
+            continue
+        # The target: the enclosing block for a trailing attrs line, or the
+        # previous same-level block for a standalone attrs paragraph —
+        # including self-contained blocks like code fences and <hr>. Never
+        # a hidden token (tight-list paragraphs render no tag to hold the
+        # attributes) — in that case leave the text untouched instead of
+        # silently swallowing it.
+        own = i - 1  # standalone: the attrs paragraph's own opening token
+        j = i - 1
+        while j >= 0:
+            target = tokens[j]
+            if target.hidden:
+                pass
+            elif standalone:
+                if (j != own and target.level == tokens[own].level
+                        and (target.nesting == 1
+                             or target.type in ("fence", "code_block", "hr"))):
+                    break
+            elif target.nesting == 1:
+                break
+            j -= 1
+        if j < 0:
+            continue
+        _apply_attrs(tokens[j], attrs)
+        if standalone:
+            tokens[own].hidden = True
+            token.children = []
+            tokens[i + 1].hidden = True
+        else:
+            del token.children[-2:]
+
+
 md = (
     MarkdownIt(
         "default",
@@ -161,6 +322,7 @@ md = (
     )
     .use(attrs_plugin)
     .use(admon_plugin)
+    .use(container_plugin, "block", validate=_container_validate)
     .use(footnote_plugin)
     .use(deflist_plugin)
     .use(tasklists_plugin, enabled=True)
@@ -169,28 +331,145 @@ md = (
     .use(superscript_plugin)
 )
 md.add_render_rule("image", _image_rule)
+md.add_render_rule("fence", _fence_rule)
+# GFM alerts (`> [!NOTE]` etc.), built into markdown-it-py's blockquote rule.
+md.options["alerts"] = True
+# Block attrs must be stripped before the typographer curlifies their quotes.
+md.core.ruler.before("replacements", "block_attrs", _block_attrs)
+md.core.ruler.push("container_attrs", _container_attrs)
 md.core.ruler.push("unwrap_lone_figures", _unwrap_lone_figures)
 md.core.ruler.push("tag_task_checkboxes", _tag_task_checkboxes)
 md.core.ruler.push("shorten_autolinks", _shorten_autolinks)
 
 
+# Text-length thresholds (visible characters, code blocks excluded) for the
+# column layout: the article goes .multicol past MULTICOL_TEXT, and a column
+# segment gets .cols past COLS_TEXT.
+MULTICOL_TEXT = 1800
+COLS_TEXT = 600
+
+_PRE_BLOCK_RE = re.compile(r"<pre\b.*?</pre>", re.S)
+_TAG_RE = re.compile(r"<[^>]+>")
+
+# Classes that take their block out of the column flow: .wide is a
+# full-width separator, .margin/.aside float in the side zone at the
+# article's left (they must be direct .body children for that — the zone
+# rules key off it — never inside a column).
+_WIDE = "wide"
+_BREAKOUT = ("margin", "aside")
+
+
+class Rendered(NamedTuple):
+    """render() result: the segmented body HTML, and whether the article
+    should carry .multicol (enough visible text to justify columns)."""
+
+    html: str
+    multicol: bool
+
+
+def _classes(token) -> set[str]:
+    return set((token.attrGet("class") or "").split())
+
+
+def _text_len(html: str) -> int:
+    """Visible-text length of rendered HTML, code blocks excluded."""
+    return len(_TAG_RE.sub("", _PRE_BLOCK_RE.sub("", html)).strip())
+
+
+def _top_level_blocks(tokens: list) -> list[list]:
+    """Split the token stream into its top-level blocks.
+
+    A new block starts at each level-0 opening/self-contained token;
+    closing and nested tokens (inline children, sub-containers) belong to
+    the current block, so every slice is balanced and renders on its own.
+    """
+    blocks = []
+    for token in tokens:
+        if token.level == 0 and token.nesting >= 0:
+            blocks.append([token])
+        elif blocks:
+            blocks[-1].append(token)
+    return blocks
+
+
+def _is_boundary(block: list) -> bool:
+    """True for blocks that never go inside a column segment (see the
+    _WIDE/_BREAKOUT comment above): h1/h2 headings, anything carrying
+    .wide, and blocks whose own element carries .margin/.aside — for a
+    lone-image paragraph (which renders as a <figure>) the image's classes
+    count as the block's own."""
+    first = block[0]
+    if first.type == "heading_open" and first.tag in ("h1", "h2"):
+        return True
+    own = _classes(first)
+    for token in block:
+        if _WIDE in _classes(token):
+            return True
+        if token.type == "inline":
+            children = token.children or []
+            if any(_WIDE in _classes(c) for c in children):
+                return True
+            if len(children) == 1 and children[0].type == "image":
+                own |= _classes(children[0])
+    return bool(own & set(_BREAKOUT))
+
+
 def render(
     text: str,
     page_path: str = "",
     created: datetime | None = None,
     modified: datetime | None = None,
-) -> str:
+) -> Rendered:
-    """Render Markdown text to an HTML string.
+    """Render Markdown text to the article body's HTML and layout flags.
+
+    The top-level blocks are grouped into column segments: boundary blocks
+    (h1/h2 headings, .wide, margin-breakout blocks — see _is_boundary) are
+    rendered bare, the runs between them wrapped in <div class="colseg">.
+    A segment is tagged .cols when it holds enough text (COLS_TEXT) and no
+    ::: nocols container; the article is .multicol when the whole body
+    exceeds MULTICOL_TEXT. pagerite.css keys all column and margin-breakout
+    layout off these classes.
 
     A ``{dates}`` line expands to the article's published/updated dateline
     (needs ``created``/``modified``; left as-is in contexts without them,
     e.g. the editor preview). Position is the author's choice — typically
     right after the article's h1.
     """
-    html = md.render(text, {"page_path": page_path})
+    env = {"page_path": page_path}
+    blocks = _top_level_blocks(md.parse(text, env))
+    # Group consecutive non-boundary blocks into segments (is_segment,
+    # flat tokens); boundary blocks stand on their own between them.
+    groups: list[tuple[bool, list]] = []
+    for block in blocks:
+        if _is_boundary(block):
+            groups.append((False, block))
+        elif groups and groups[-1][0]:
+            groups[-1][1].extend(block)
+        else:
+            groups.append((True, list(block)))
+
+    parts = []
+    total = 0
+    for is_segment, group in groups:
+        html = md.renderer.render(group, md.options, env)
+        if not html.strip():
+            continue  # e.g. a consumed standalone-attrs paragraph
+        text_len = _text_len(html)
+        total += text_len
+        if not is_segment:
+            parts.append(html)
+            continue
+        nocols = any(
+            "nocols" in _classes(t)
+            for t in group
+            if t.type == "container_block_open"
+        )
+        cols = " cols" if text_len > COLS_TEXT and not nocols else ""
+        parts.append(f'<div class="colseg{cols}">{html}</div>')
+    html = "".join(parts)
     if created is not None and "<p>{dates}</p>" in html:
         html = html.replace("<p>{dates}</p>", _dateline(created, modified))
-    return html
+    return Rendered(html, total > MULTICOL_TEXT)
 
 
 def _dateline(created: datetime, modified: datetime | None) -> str:

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

@@ -16,6 +16,7 @@
   --line: #12203f14;
   --font-body: var(--font-inter);
   --font-heading: var(--font-montserrat);
+  --code-x-height: 0.546; /* Inter's x-height ratio */
 }
 
 @media (prefers-color-scheme: dark) {
@@ -32,18 +33,13 @@
   }
 }
 
-::selection {
-  background: var(--accent);
-  color: #fff;
-}
-
 /* Genuinely large solid brand with a soft blue shadow overlapping the
    artwork — conservative, but unmissable. */
 #brand {
   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));
@@ -112,7 +108,6 @@ article h3 {
   font-weight: 700;
   font-size: 0.95rem;
   letter-spacing: 0.08em;
-  text-transform: uppercase;
   color: var(--muted);
 }
 
@@ -140,7 +135,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

@@ -2,13 +2,6 @@
    (inlined by the backend into #page-banner), in neutral dark greys that
    follow the page's color scheme. */
 
-/* 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);
-}
-
 /* Banner artwork dark tones: neutral greys in light mode (retinted to the
    page's violet family by the dark-scheme block below). */
 .nb-base {
@@ -44,6 +37,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

@@ -41,6 +41,7 @@
 
   --font-body: var(--font-montserrat);
   --font-heading: var(--font-literata);
+  --code-x-height: 0.517; /* Montserrat's x-height ratio */
 }
 
 /* Dark scheme: same identity, but the page goes deep violet (never muddy
@@ -63,13 +64,19 @@
 
 ::selection {
   background: var(--accent);
-  color: var(--ink);
+}
+
+/* Any banner used is separated from page by a thick orange line */
+#banner {
+  border-bottom: 4px solid var(--accent);
 }
 
 /* Oversized outlined brand, spilling off the banner edge: orange stroke,
    solid black fill. */
 #brand {
-  font-size: 10rem;
+  /* Scales down proportionally below ~1000px: 10rem at a 62.5rem viewport,
+     shrinking with vmin (smaller of viewport width/height) below that. */
+  font-size: clamp(2.5rem, 16vmin, 10rem);
   line-height: 1.2;
   font-weight: 700;
   letter-spacing: 0.04em;
@@ -131,14 +138,9 @@
 
 /* Console-style headings: uppercase monospace. h1 in the page text color
    with a hazard-stripe underline, h2 deep orange, h3 cyan. */
-article h1,
+article h1 {
-article h2,
-article h3 {
   text-transform: uppercase;
   letter-spacing: 0.02em;
-}
-
-article h1 {
   color: var(--text);
   font-weight: 700;
   padding-bottom: 0.5rem;
@@ -206,7 +208,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

@@ -17,11 +17,7 @@
   --line: #ffffff1c;
   --font-body: var(--font-literata);
   --font-heading: var(--font-fraunces);
-}
+  --code-x-height: 0.507; /* Literata's x-height ratio */
-
-::selection {
-  background: var(--accent2);
-  color: #fff;
 }
 
 /* Oversized tilted brand in the sky→violet gradient. */
@@ -91,7 +87,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;
@@ -28,6 +29,7 @@
   --font-body: var(--font-cause);
   --font-heading: var(--font-new-rocker);
   --font-brand: var(--font-cause);
+  --code-x-height: 0.5; /* Cause's x-height ratio */
 }
 
 /* The page is the same landscape the banner paints: hazy sky light up top
@@ -56,15 +58,33 @@ body {
   color: var(--text);
 }
 
-::selection {
+/* No separation between banner and page: the frame loses its background,
-  background: var(--sun);
+   border and shadow, and the artwork overflows into the document below,
-  color: #3d5223;
+   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 {
+  background: none;
+  border-bottom: 0;
+  box-shadow: none;
 }
 
-/* The banner frame ties into the meadow beneath it. */
+#page-banner {
-#banner {
+  inset: 0 0 -6rem;
-  border-bottom-color: #4f913b30;
+  /* Paints over the page background in the overlap, but never swallows its
-  box-shadow: 0 0.3rem 1rem #4f913b22;
+     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 +134,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 +163,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 +294,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);
 }

pagerite/views.py

@@ -513,16 +513,18 @@ def banner_source(menu: dict[str, Node], path: str) -> str | None:
 def page_content(menu: dict[str, Node], path: str) -> HTML:
     """Render the contents of the #main element for a page."""
     node = resolve(menu, path)[-1]
-    doc = E.article
+    rendered = render(node.content or "", path, node.created, node.modified)
+    # Long articles get .multicol: the article column cap lifts (see the
+    # #content grid in pagerite.css) and the body's .cols segments lay out
+    # in at most two columns. The .body html is already segmented by
+    # render() — the whole layout is driven by these classes.
+    doc = E.article(class_="multicol") if rendered.multicol else E.article
     with doc:
         # An h1 in the markdown owns the article heading; the title is
         # only rendered as h1 when the markdown has none of its own.
         if not has_h1(node.content or ""):
             doc.h1(node.title)
-        doc.div(
+        doc.div(HTML(rendered.html), class_="body")
-            HTML(render(node.content or "", path, node.created, node.modified)),
-            class_="body",
-        )
     return HTML(str(doc))