Insert images and tables as block-level fresh lines

uploadImage and insertTable no longer inject at the cursor: on a
non-empty line (e.g. inside an existing image tag) the block goes on a
fresh blank-separated line after it, never into it.

.gitignore

@@ -1,7 +1,8 @@
 .*
 !.gitignore
 *.lock
-*.kantadb
+/localhost
+dbip-*.mmdb*
 /pagerite/frontend-build
 package-lock.json
 

AGENTS.md

@@ -5,288 +5,39 @@
 
 Please instead ask the user to see from dev tools what you need, e.g. to look up something in DOM or log. Use console.log for debugging where needed (and otherwise for permanently kept useful messages in the app).
 
-## What this is
-
-Pagerite: a single-user CMS/blog. FastAPI serves HTML rendered in Python
-with html5tagger; content is persisted in a kanta database and rendered on
-the fly per request. Vue is used only for interactive bits (editing tools),
-not for the public pages. See `docs/design-principles.md` for the design.
-
 ## Layout
 
-- `pagerite/` — the Python backend package (hatchling build target).
-  - Server run by CLI entry point `uv run pagerite` (no auto reloads, build needed)
-  - Dev mode `scripts/devserver.py` (which the user mostly uses for auto reloads, no build needed)
-  - Avoid running the server yourself, ask the user to test
-  - `app.py` — the FastAPI app. FastAPI's built-in API docs are disabled
-    (`docs_url`/`redoc_url`/`openapi_url=None`) because `/docs` belongs to
-    our content. Our own routes (content pages, `/_api/...`, `/_f/...`) are
-    registered BEFORE `frontend.route(app, "/")` is called: fastapi-vue
-    inserts its file routes at the position where
-    `route()` was called (during `load()` in the lifespan), so anything
-    defined earlier wins. The one exception is the content catch-all
-    `/{path:path}`, registered AFTER `frontend.route()` so that built
-    frontend assets still take priority over content slugs. The `Frontend`
-    is constructed with `spa=False` explicitly: it only serves the built
-    files without a catch-all. The build mirrors the URL space — hashed
-    immutable assets under `/_assets/`, `favicon.ico` at the site root —
-    and an `index.html` in the build would become a `/` route, so leave it
-    out of the build to keep `/` ours.
-  - `data.py` — msgspec Structs for the kanta database. The site structure
-    is a tree: `Data.menu` maps top-level slugs to `Node`s, each with
-    `children` keyed by slug — the URL path is the slug chain. The front
-    page is whichever top-level node has slug "" (parallel to the other
-    main level pages, not their parent); it cannot have children, and
-    renaming its slug away leaves no front page ("/" redirects to the
-    first nav item). `Node.content` is
-    the Markdown page, or None for a pure category label whose URL renders
-    a placeholder page (while nav links to it point at its first child);
-    every label's title and slug are editable. Siblings order by the fractional `Node.order` key: a moved
-    item gets a fresh key relative to its new siblings, all others keep
-    theirs. `resolve`/`find_slot` walk the tree by path; moves are slot
-    detach/attach carrying the whole subtree. Legacy flat `Data.pages`
-    (pre-tree databases) migrates into `menu` on startup. The app owns
-    the `Data` object; reads are plain attribute access, writes in
-    `kanta.transaction(...)`.
-    `Data.files` is a content-addressed store (blake3[:12] + extension)
-    mapping file names to bytes, served at `/_f/{name}` with immutable
-    caching; pages reference files by absolute `/_f/` URLs so hierarchy
-    moves never break them. `Node.banner` is a raw trusted HTML snippet
-    for the header banner (img, styled div, canvas+script...); empty
-    inherits from the node's ancestors (front page last). It is rendered
-    AFTER the banner design's artwork, so author code (e.g. a `<style>`
-    override) always wins over the design's own styles.
-    `Node.banner_design` picks a banner design: a theme folder name whose
-    `banner.css` styles it and whose `banner.html` (arbitrary markup:
-    canvas + style + script) or `banner.svg` supplies the inline artwork
-    (wrapped in `div[data-design]`); "" = explicitly no design, None =
-    inherit (nearest ancestor, front page last, then the active theme's
-    own design if it ships banner.css/banner.svg/banner.html). The design's banner.css
-    is linked in `<head>` (id `pagerite-banner`) between the theme and the
-    custom CSS.
-    `Data.version` is bumped on every write
-    and embedded in page ETags so nav-affecting changes invalidate caches.
-    `Data.brand` is the site name (header link + `<title>` suffix), editable
-    in the site editor via `/_api/settings`; empty = no header link and
-    no `<title>` suffix. `Data.brand_html` is raw trusted HTML replacing the
-    brand link entirely (rendered in a `#brand` div on top of the banner,
-    next to the nav) — site-wide, not per-page like banners; edited in the
-    site editor with image/video upload into `Data.files`. `Data.theme` is
-    the active theme name (empty =
-    none/base only); themes are folders in `pagerite/themes/{name}`
-    containing `theme.css` and/or `banner.css` (+ `banner.svg` artwork and
-    any extra assets the CSS references, like summer's `grass.svg`),
-    served by the backend at `/_themes/{name}/...` — read from disk per
-    request (etag by mtime), never built, so on-disk edits show on the
-    next page load even in prod. The theme selector and banner-design
-    selector enumerate these folders via `GET /_api/settings`.
-    `Data.custom_css` is raw trusted CSS injected inline in every page
-    `<head>` (id `pagerite-user`) and swapped during fetch-navigation;
-    editable in the site editor. Font picks (heading/body/brand) in the
-    site editor are stored as plain `:root` rows in `custom_css`
-    (`--font-body: var(--font-source-sans);` format — parsed out and
-    rewritten on change, the `:root` block added/removed as needed),
-    referencing the per-family variables (`--font-source-sans` etc.) from
-    pagerite.css;
-    the base stylesheet's `--font-brand` defaults to `var(--font-heading)`.
-    `Data.favicon` names a file in the content-addressed `files` store,
-    uploaded/cleared in the site editor via `PUT`/`DELETE
-    /_api/settings/favicon`; when set it is linked as `<link rel="icon">`
-    on every page, otherwise browsers fall back to the build's
-    `/favicon.ico` by convention.
-  - `markdown.py` — 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).
-  - `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. If the markdown contains its own h1, the page title
-    is NOT rendered as an additional h1 (it still supplies <title> and nav
-    labels). The navbar holds
-    top-level items only; the current section's subitems go to a left
-    `#sidebar` as a nested list (the section's direct children plain,
-    deeper levels indented with article-list-style markers), which is
-    rendered when the section offers at least two
-    published items, or exactly one while viewing anything other than that
-    only page — the section index, a 404, a grandchild (so those pages can
-    reach the child), and also on that only page itself when it has
-    published children of its own; no aside element at all on the front
-    page, leaf
-    pages and the sole childless page of a one-page section. Also,
-    category labels are nodes without content — None *or* empty markdown —
-    and their nav links point at their first child page. Dynamic regions have stable ids
-    (`#page-banner`, `#nav`, `#sidebar`, `#main`) for fetch-navigation swaps
-    (`#sidebar` may be absent on either side of a swap).
-  - `seed.py` — demo content written on startup for paths missing from the
-    database (never overwrites existing pages).
-  - `frontend/src/` — the Vue editor and public-page entries.
-    - `main.js` — Vue editor app entry, mounts the tabbed EditorShell.
-    - `pagerite.js` — public page entry; runs fetch-navigation, 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),
-      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 button (anonymous) or 🔐 profile button (logged in) is shown in
-      the banner corner; both open Paskia's iframe dialog via `showAuthIframe`
-      instead of navigating away. Admins also get the 🖊️ page/banner edit pens
-      and a ⚙️ site-settings pen (asset URLs from the
-      `pagerite:editor-src`/`-css` meta tags). 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`. The backend links the stylesheets in a fixed order —
-      base (Vite build), theme, banner design, custom CSS last — each with
-      a stable id so the site editor can swap them in place.
-    - `assets/` — shared styles and data files built by Vite and served hashed
-      under `/_assets/`: `pagerite.css` (base layout + conservative
-      variables), `pygments.css`,
-      and `fonts/` (self-hosted Source
-      Sans 3/Source Serif 4/Fraunces/Literata/Cormorant/Playfair
-      Display/Inter/Montserrat/Fira Code/Cause/Exo 2/New Rocker
-      variable woff2). The `::view-transition*` block at the end of `pagerite.css` (from
-      termotohtori.fi) is fragile — do not tweak. Themes are NOT built:
-      `pagerite/themes/{name}/theme.css` (theme overrides and font picks:
-      `purple` = dark dusk palette with Fraunces/Literata and a tilted
-      oversized gradient brand; `corporate` = light-first with automatic
-      `prefers-color-scheme` dark mode, Montserrat/Inter and a huge solid
-      brand; `nitro` = racing/HUD style following `prefers-color-scheme`
-      (warm light-grey page, deep violet in dark), Montserrat/Literata,
-      black as an accent only, a straight orange blade under the banner, and
-      an orange racing-tab nav clipped with a bezier `shape()`; `summer` =
-      light playful meadow, one palette sampled from its illustrated
-      `banner.svg` (sky/grass/sun/flower pink), Fraunces/Literata, a tilted
-      gradient brand, flower bullets, and a layered-parallax banner (sun
-      rises, clouds drift, nearer hills move less) with idle animations
-      (swaying flowers, floating clouds, breathing sun glow) wrapped in
-      `prefers-reduced-motion: no-preference`) and the
-      companion `banner.css` banner designs are served by the backend.
-    - Vite builds ES-module `.js` outputs; the backend renders `<script
-      type="module">` for them (module scripts defer by default).
-  - The database file is `pagerite.kantadb` in the cwd (`PAGERITE_DB`
-    overrides); gitignored. Do not delete it without asking.
-- `scripts/fastapi-vue/` — helper scripts from the fastapi-vue template
-  (build hook etc.), do not edit.
-- `frontend/` — the Vue editor as a single tabbed `EditorShell.vue` mounted
-  in a host div created inside the static document. 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 — `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">`), and `StructureEditor.vue` (the
-  vue-draggable structure tree with
-  always-editable title/slug inputs per row). Media uploads everywhere use
-  🖼️ 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 ✕ 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.
-  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. Every
-  non-empty list (and the root) ends with a non-draggable ➕ 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. Dropping ON the lower part of a row moves the page
-  under that row (the child list's container invisibly overlaps its own
-  row's bottom via negative margin — Sortable inserts it as the first child
-  natively), while a row's exposed top edge inserts a sibling before it. Row
-  indentation is structural (each nested list margin-indents itself), so a
-  dragged row previews its whole subtree at the target list's depth. The
-  shell is dynamic-imported onto the content page by pagerite.js when an edit
-  pen is clicked (the pens are injected by pagerite.js after the session
-  validates; they carry `data-editor-src`/`data-editor-css`/`data-editor-mode`).
-  In dev, modules load from the Vite dev server (`PAGERITE_VITE_URL`),
-  in prod from the hashed build assets resolved via
-  `frontend-build/.vite/manifest.json`. `vite.config.js` sets
-  `appType: 'mpa'` (no SPA fallback) and builds with `manifest: true`,
-  `assetsDir: '_/assets'` (so the build mirrors the URL space;
-  `frontend/public/favicon.ico` lands at the build root and is served at
-  `/favicon.ico`). JS inputs are `src/main.js` and `src/pagerite.js`, plus
-  `src/assets/pagerite.css` as a separate stylesheet entry; theme and
-  banner-design CSS are NOT built — they live in `pagerite/themes/{name}/`
-  and are served by the backend. There
-  is no `index.html` source (it would shadow `/` and turn missing dev paths
-  into an empty Vue shell). All outputs are ES modules. The build sets
-  `preserveEntrySignatures: 'exports-only'` because main.js is consumed
-  via dynamic `import()` for its `openEditor`/`closeEditor` exports — Vite
-  app builds otherwise strip unused entry exports, leaving dead edit pens.
-  In dev the backend links theme/banner-design stylesheets like in prod
-  (`/_themes/...`); only the base CSS is Vite-injected from JS, and
-  pagerite.js then re-appends the `#pagerite-theme`/`#pagerite-banner`/
-  `#pagerite-user` elements to restore the canonical order (base < theme <
-  design < custom CSS). Theme switches in the site editor simply swap the
-  `#pagerite-theme` link href, identically in dev and prod.
-  vite-plugin-fastapi.js has an
-  auto-upgrade marker — edit `vite.config.js`, not the plugin.
-- `docs/` — design documentation.
+Pagerite is a CMS. See `docs` for the full design and implementation details. Key files for code changes:
+
+- `pagerite/` — Python backend package (hatchling build target).
+  - `app.py` — FastAPI app and route registration.
+  - `data.py` — msgspec Structs for the kanta database.
+  - `migrations.py` — kanta schema migrations (`migrate_vN`), e.g. v1 moves legacy in-db file blobs to the on-disk store.
+  - `markdown.py` — markdown-it-py renderer.
+  - `views.py` — shared page layout and rendering; theme/user-font resolution across `THEME_DIRS` / `FONT_DIRS` (cwd, site, platform data roots, then built-in `pagerite/themes/`, see `docs/themes-and-assets.md`).
+  - `seed.py` — demo content, written only on first database creation.
+  - `analytics.py` — visit analytics collection (see `docs/analytics.md`).
+- `frontend/src/` — Vue editor and public-page JS entries.
+  - `main.js` — Vue editor app entry.
+  - `analytics-main.js` — analytics page entry (mounts `AnalyticsView` at `/_a`).
+  - `pagerite.js` — public page entry.
+  - `assets/` — base CSS, Pygments styles, fonts.
+- `scripts/devserver.py` — dev server with auto reload (the user mostly uses this; avoid running the server yourself, ask the user to test).
+
+Server run by CLI entry point `uv run pagerite` (no auto reloads, build needed). Dev mode is `scripts/devserver.py` (auto reloads, no build needed).
 
 ## Toolchain
 
-- Python >= 3.14, managed with **uv**. Dependencies: `fastapi[standard]`,
-  `fastapi-vue`, `html5tagger`, `kanta`, `markdown-it-py`, `mdit-py-plugins`,
-  `pygments`, `tracerite`; dev group has `httpx`. Run anything via
-  `uv run ...` (the venv is `.venv`).
+- Python >= 3.14, managed with **uv**. Dependencies: `fastapi[standard]`, `fastapi-vue`, `html5tagger`, `kanta`, `markdown-it-py`, `mdit-py-plugins`, `platformdirs`, `pygments`, `tracerite`; dev group has `httpx`. Run anything via `uv run ...` (the venv is `.venv`).
 - Key libraries:
-  - **html5tagger** — all HTML generation (`E`, `Document`, `Template`,
-    `HTML` for trusted/raw HTML).
+  - **html5tagger** — all HTML generation (`E`, `Document`, `Template`, `HTML` for trusted/raw HTML).
     - To create stand alone pages, begin with `doc = Document(...)` that gives a HTML5 page header
     - Chain with `doc.p("text").br`: every attribute access creates element to doc (returning self), calls add content to current element.
     - Closing tags are not used where optional, e.g. no `</p>` or `</li>` is ever included in output. Due to this proper "nesting" of content is NOT required and should be avoided. Where needed, () directly after tag define attributes and content INSIDE the element, then close the element. `with doc.ul:` and such may be used for larger chunks.
-    - Prefer building directly on one builder with `with` blocks (recursing
-      inside a with block for hierarchies) over preparing `E.` snippets into
-      variables and composing them. Note `with doc.li:` alone fails (`li`
-      has an optional end tag) — use `with doc.li.ul:` style chains, or
-      `doc.li.a(...)` followed by a nested `with doc.ul:` block.
-    - `Template(builder)` freezes a builder with **Capitalized** attribute
-      placeholders (e.g. `E.Title`, `doc.main(E.Main, id="main")`); calling
-      it fills the slots with escaping — pass `HTML(...)` for raw HTML.
-      Passing a list to a template slot expands it; passing a list to a
-      normal builder call does NOT (spread it: `E.ul(*items)`).
+    - Prefer building directly on one builder with `with` blocks (recursing inside a with block for hierarchies) over preparing `E.` snippets into variables and composing them. Note `with doc.li:` alone fails (`li` has an optional end tag) — use `with doc.li.ul:` style chains, or `doc.li.a(...)` followed by a nested `with doc.ul:` block.
+    - `Template(builder)` freezes a builder with **Capitalized** attribute placeholders (e.g. `E.Title`, `doc.main(E.Main, id="main")`); calling it fills the slots with escaping — pass `HTML(...)` for raw HTML. Passing a list to a template slot expands it; passing a list to a normal builder call does NOT (spread it: `E.ul(*items)`).
     - To create plain HTML snippets use `E.div(E.p("content"))` etc using the `E` empty builder.
-  - **kanta** — asyncio-native embedded database: `Kanta(filename, data)`
-    root object, `transaction`, `flush`, snapshot/replay-log persistence.
+  - **kanta** — asyncio-native embedded database: `Kanta(filename, data)` root object, `transaction`, `flush`, snapshot/replay-log persistence.
     - `async with Kanta(Data(),...) as kanta:` (or await kanta.open/close)
     - `with kanta.transaction(...) as data:` - transactions only for writes
     - `data` may be referenced directly to read anywhere and to modify in transactions (`as data` is just a shorthand access)
@@ -294,32 +45,13 @@ not for the public pages. See `docs/design-principles.md` for the design.
       - We prefer objects rather than lists, as this works better in change diffs. E.g. `dict[str, True]` where the keys indicate presence and always have value `True`.
     - Maintaining and owning the app's own `Data` object is preferable; Kanta never copies this, only edits in place
     - Note: besides opening it every access is immediate direct variable access: no `await`, no locks, no delays
-  - **fastapi-vue** — template glue for serving/building the Vue frontend;
-    keep its integration points (`Frontend`, build hook) intact.
-  - **markdown-it-py** — Markdown rendering with `html=True` raw
-    passthrough; mdit-py-plugins for footnote/deflist/tasklists/attrs;
-    **Pygments** for server-side code highlighting (`nowrap` spans, styled
-    by `frontend/src/assets/pygments.css` which maps token classes 1:1 onto
-    the `--code-*` variables; light/dark palette sets live in
-    `pagerite.css` and resolve via `light-dark()` from the theme's
-    `color-scheme` — themes pick a set, not individual colors).
+  - **fastapi-vue** — template glue for serving/building the Vue frontend; keep its integration points (`Frontend`, build hook) intact.
+  - **platformdirs** — platform user/system data dirs for the theme and font search roots (`views.THEME_DIRS` / `views.FONT_DIRS`; use `site_data_dir(..., multipath=True)`, not `site_data_path`, which collapses multipath).
+  - **markdown-it-py** — Markdown rendering with `html=True` raw passthrough; mdit-py-plugins for footnote/deflist/tasklists/attrs; in-body h1/h2 headings get auto slug ids + self-links when the body has 3+ of them (`python-slugify`, mirroring `slugify.js`); **Pygments** for server-side code highlighting (`nowrap` spans, styled by `frontend/src/assets/pygments.css` which maps token classes 1:1 onto the `--code-*` variables; light/dark palette sets live in `pagerite.css` and resolve via `light-dark()` from the theme's `color-scheme` — themes pick a set, not individual colors).
 
 ## Conventions
 
 - Keep dependencies minimal; add via `uv add` and mention it.
-- The public URL space belongs to content (pretty slugs at root). Reserve
-  only `/_` for the machinery (`/_api/`, `/_f/`, `/_assets/`), plus
-  `/favicon.ico` from the build. Slugs are lowercase ASCII letters, digits,
-  hyphens and underscores `[a-z0-9_-]` (the site editor filters input live
-  via `slugify.js`, built on the `transliteration` npm package — unicode
-  folds to ASCII, spaces become hyphens; an empty slug on a new page is
-  derived from its title), may not begin with `_` or `.`, and such URLs are
-  never looked up as content.
-- No auth in core code; the SSO/reverse proxy gates all of `/_api`
-  (forward-auth) and owns `/auth/` (login/logout, session validation).
-  Pages render identically for everyone; pagerite.js adds the editing UI
-  only after the auth server validates the session. Never add output
-  sanitization "for safety" against the author — embedded HTML/scripts in
-  Markdown are passed through deliberately.
-- Update this file and `docs/design-principles.md` when architecture,
-  tooling, or conventions change.
+- The public URL space belongs to content (pretty slugs at root). Reserve only `/_` for the machinery (`/_api/`, `/_f/`, `/_assets/`), plus `/favicon.ico` from the build. Slugs are lowercase ASCII letters, digits, hyphens and underscores `[a-z0-9_-]` (the site editor filters input live via `slugify.js`, built on the `transliteration` npm package — unicode folds to ASCII, spaces become hyphens; an empty slug on a new page is derived from its title), may not begin with `_` or `.`, and such URLs are never looked up as content.
+- No auth in core code; the SSO/reverse proxy gates all of `/_api` (forward-auth) and owns `/auth/` (login/logout, session validation). Pages render identically for everyone; pagerite.js adds the editing UI only after the auth server validates the session.
+- Update the relevant MarkDown files when architecture, tooling, or conventions change.

README.md

@@ -1,5 +1,34 @@
+![The same site in five themes](https://git.zi.fi/LeoVasanko/pagerite/raw/branch/main/docs/screenshots/themes.webp)
+
 # Pagerite
 
-A single-user CMS/blog. FastAPI serves HTML rendered in Python with html5tagger,
-content is persisted in a kanta database and rendered on the fly per request.
-Vue is used only for the interactive editing tools, not for the public pages.
+A CMS for people who are done patching WordPress. There's no PHP or Node.js to exploit — the whole editing surface sits behind your own SSO proxy, so the server the internet can talk to just renders plain pages that search engines and social media can read too.
+
+The articles have rich layout and don't look boxed in like with most web publishing platforms. The software is lightweight and fast enough to serve any number of visitors you have. We run our own site [vasanko.com](https://vasanko.com/) on it, in case you wish to have a quick look.
+
+## Run it
+
+```sh
+uvx pagerite localhost
+```
+
+That serves a demo site on localhost using [uv](https://docs.astral.sh/uv/getting-started/installation/). When you take it to production, pass your domain name instead. Our [setup guide](https://git.zi.fi/LeoVasanko/pagerite/src/branch/main/docs/setup.md) walks through the whole production arrangement. **Read it before running this online.**
+
+## What it's like
+
+**You write, Pagerite renders.** Articles are Markdown with the extensions that matter — tables, footnotes, task lists, callouts, highlighted code, aside boxes — and raw HTML goes through untouched when Markdown runs out. Long articles reflow into a proper two-column composition on wide screens without you doing anything.
+
+**Editing happens on the page.** Click the pen next to a heading and an editor docks beside the live article, previewing server-side as you type. Site name, theme, fonts, banner, custom CSS — changed in a panel, applied immediately. New pages grow from a ➕ in the structure tree; drag or rename rows to reorder your whole navigational hierarchy. Entirely custom or premade top banner designs per category or page are available, animations included.
+
+Full scripting and styling is available for editors who wish to implement more complex functionality on their articles. This also means you should only let trusted users write on your site: this is by no means a public blog platform.
+
+The worst case scenario when a hacker gains access to your admin accounts (say if you didn't read the setup guide): they can take over the entire site and run scripts on users' browsers, but the damage is limited to same domain. All your articles can be restored to the state prior to that hack or that one user's edits undone, and no data is irrecoverably lost. This is much better than other platforms that also let hackers run code on your server (WordPress).
+
+![Live editing](https://git.zi.fi/LeoVasanko/pagerite/raw/branch/main/docs/screenshots/editor.webp)
+
+**Theme just every part to your liking.** Themes, banner designs and page transitions are included — pick one from the site editor or copy a folder and make it yours. Several high quality fonts are included among with other assets: your site never phones a third party or us for anything. And if after all you need to customize, additional site and banner code may be provided by the admin panel.
+
+**Search engines and social cards come free.** Every page gets a proper description, canonical link and Open Graph/Twitter card metadata derived from the article — including a share image picked from your own figures — without a single "SEO plugin". Category index pages, if you wish to have those, also get their sub pages shown automatically in card format.
+
+![Graphs showing visitor stats and navigation across site branches.](https://git.zi.fi/LeoVasanko/pagerite/raw/branch/main/docs/screenshots/analytics.webp)
+_You can see your readers. Built-in analytics need no cookies and no third-party tracker: visits, referers, reading time and a live map of how people move between your pages, plus separate ledgers for crawlers and the abusers probing for wordpress PHP files — who are, of course, wasting their time here._

docs/analytics.md

@@ -0,0 +1,338 @@
+# Analytics
+
+Server-side visit analytics. Data lives in a plain JSON file — a msgspec
+Struct dumped to disk — separate from the kanta content database, path from
+`PAGERITE_ANALYTICS` (default: `analytics.json` in the per-site data
+directory, e.g. `localhost/analytics.json`).
+
+- `pagerite/analytics.py` — data model (`Analytics`, `Client`, `Visit`,
+  `CrawlerHit`, `AbuseHit`, `Favicon`) and the `Store` (in-memory data + session map,
+  atomic JSON persistence).
+- `pagerite/app.py` — entry-referer stashing in `show_page` (`_track_entry`),
+  the `POST /_a` ping endpoint, and `WebSocket /_api/ws/analytics`
+  (admin-gated like every `/_api` endpoint).
+- `frontend/src/pagerite.js` — client navigation pings and the 📊 pen.
+- `frontend/src/AnalyticsView.vue` — viewer component rendered inside the
+  normal site layout on the `/_a` analytics page.
+- `frontend/src/analytics-main.js` — page entry that mounts `AnalyticsView`
+  into `#analytics-app` inside `#main`.
+
+## What is collected
+
+The client (`pagerite.js`) POSTs fire-and-forget pings to `/_a` with
+`fr`, `to`, `hide` and `read` as query parameters (`fr` = source path;
+falsy values are omitted):
+
+- **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 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
+  server-side, and their document GETs land in the crawler list instead.
+  No source-IP verification is done: a spoofed bot UA merely lands in the
+  crawler stats, and scanners that probe telltale paths are caught by the
+  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 —
+  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
+  the swap actually happened (a failed swap falls back to a full load,
+  whose initial ping counts the view instead — no gap, no double count).
+- **External links** (`https` only): `to` is the link's full URL. This is the
+  exit-link record; the user may continue navigating afterwards (new tab,
+  back), so the exit URL is not necessarily the last trail entry. Outbound
+  links are stored by full URL so several links to the same domain remain
+  distinct.
+- **Excluded**: back/forward (popstate) navigations, navigating *to* the
+  analytics page (`/_a` — its GET is untracked, and the server rejects it
+  as a ping target anyway), and everything while the user has the editor
+  open (`body.editing`). Admin noise, not visits. Navigating *away* from
+  `/_a` does ping: the fetch-navigation already GET-ed the target page
+  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 activity is recorded as
+  usual (navigations and all), but the `hide` flag is set on the **client
+  record** — so it covers everything that client ever did: visits and
+  crawler hits from before the login included. Hidden clients never appear
+  in the viewer payload: `Store.display()` drops their visits, crawler
+  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.
+- **External-site favicons**: for every external https origin seen as a visit
+  referer or an exit link, the server fetches `{origin}/favicon.ico` in a
+  background task (httpx, 8 s timeout, ≤ 64 KB, image content-types only —
+  SVG is sniffed from the body when served without an image type) and stores
+  the icon content-hashed on disk in the FileStore (served at `/_f/{name}`,
+  extension matching the actual MIME).  The origin → file name mapping is
+  recorded in `Analytics.favicons` (`Favicon.file`/`fetched`); misses are
+  recorded too and retried only after 7 days.  Fetches are scheduled after
+  each ping and once at startup, which backfills icons for already-recorded
+  data.  The viewer payload carries `favicons` (origin → `/_f/...` path),
+  and the viewer shows the icon wherever an external site is mentioned:
+  referer/exit trail links in the visit table and the source/exit pills of
+  the transition map (UTM-attributed source nodes without an https origin
+  stay text-only).
+- **Client records**: the visitor's IP (IPv4 or IPv6 /64 network), raw
+  `User-Agent` and extracted `Accept-Language` tag are hashed with blake3;
+  the first 6 bytes identify a shared `Client` record.  The `Client` stores
+  the full IP, `User-Agent`, compact `ua_pretty`, `lang`, initial
+  `country` from the language-region subtag, and asynchronously-filled
+  `country`/`city` from DB-IP geoip plus reverse-DNS `host`.  Visits,
+  crawler hits and abuse hits all reference this record by its hash, so
+  client metadata is stored once instead of repeated per event.
+- The visitor IP is stored in the `Client`.  A reverse-DNS lookup is
+  attempted for each new client and the result, when available, is stored as
+  `host`; local/reserved/multicast addresses are skipped.  If a DB-IP MMDB
+  file (`dbip-*.mmdb` or `dbip-*.mmdb.gz`) is present in the repository
+  root, it is loaded at startup and used to look up `country`/`city`.  These
+  lookups run in background tasks after the event is stored, so the `/_a`
+  response is never delayed.  The decompressed `dbip-*.mmdb` file is kept in
+  the repository root and ignored by git.  The CLI flag `--dbip`
+  (`uv run pagerite --dbip`) downloads the latest
+  `dbip-city-lite-YYYY-MM.mmdb.gz` from DB-IP before the server starts,
+  skipping the download when the local database is already current and
+  removing older versions after an update; without the flag only an existing
+  file is used.
+- **Crawler hits**: every document GET is queued in RAM as a pending crawler
+  hit — except idle-time link preloads from pagerite.js, which carry an
+  `x-pagerite-preload` header and are not tracked at all (the ping sent when
+  the user actually navigates to a preloaded page does the counting; forging
+  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` — 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 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
+  IP do too.  Classification reclassifies history: all earlier crawler hits
+  from that IP (persisted and pending) move to the `abuse` list, so a
+  random-UA scanner no longer pollutes the crawler stats of the legitimate
+  bot it impersonates.  Once classified, every document GET and 404 from the
+  IP is recorded as an abuse hit with the full request path (query string
+  included), and its pings are ignored.  The classified IP set (`abuse_ips`)
+  is persisted in the JSON file; the plain-404 counters are RAM-only.  In the
+  viewer, abuse hits are grouped by IP (never by client/UA — scanners
+  randomize theirs) in a separate "Abuse" table.  Identical paths are
+  collapsed into one entry with their hit count; flagged paths that
+  triggered classification are lifted to the top, followed by other 404s and
+  then document GETs from the abuser.  Raw User-Agent strings are shown one
+  per line with their occurrence counts, and the full lists are click-to-copy.
+
+## Visits and sessions
+
+There are no cookies. A visit is tied together by a client hash — the first
+6 bytes of a blake3 digest over the prettified IP (IPv4 unchanged, IPv6
+/64 network), the raw `User-Agent` string and the extracted
+`Accept-Language` tag.  The first ping from a client hash starts a new
+visit; subsequent pings extend it.  Pings arriving with no known session
+(server restart) start a fresh visit from the first ping — treated as
+missing data rather than dropped.  The client-hash → visit map and the IP →
+entry-referer/UTM tables are in-memory only; client metadata is stored in
+`Analytics.clients` keyed by the client hash.
+
+Each `Client` record:
+
+- `ip` — visitor IP address (first `X-Forwarded-For` hop, or direct peer),
+- `host` — reverse-DNS host name for `ip` when resolvable, else `""`,
+- `lang` — first `Accept-Language` tag, lowercased (e.g. `"en-us"`),
+- `country` — two-letter country code.  Initially derived from the
+  `Accept-Language` region subtag, but overwritten by the DB-IP MMDB result
+  when a database is available,
+- `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,
+- `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:
+
+- `start` — timestamp of the first event,
+- `entry` — first page (path) seen,
+- `referer` — external https origin of the initial load, `""` for direct,
+- `client` — 6-byte blake3 hash referencing `Analytics.clients`,
+- `trail` — the entry page and everything seen afterwards, keyed by the
+  timestamp of first sight (insertion order = first-seen order). Each item
+  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.
+
+Each `CrawlerHit` record:
+
+- `start` — timestamp of the document GET,
+- `entry` — page path requested,
+- `client` — 6-byte blake3 hash referencing `Analytics.clients`,
+- `referer` — external https origin of the request, `""` for direct/none,
+- `query` — raw query string of the request,
+- `status` — HTTP status of the served response (200 for a real page, 404
+  for a category placeholder or missing page).
+
+Each `AbuseHit` record:
+
+- `start` — timestamp of the request,
+- `path` — full request path including the query string (e.g. `/.env?x=1`),
+- `client` — 6-byte blake3 hash referencing `Analytics.clients`,
+- `flag` — true for the path that triggered abuse classification (telltale
+  path or the 404 that crossed the threshold),
+- `is_404` — true for 404 responses, false for document GETs from the
+  abuser.
+
+Crawler hits are grouped by client hash in the analytics viewer; abuse hits
+are grouped by IP alone (resolved from the referenced `Client`).  In the
+Abuse table identical paths are collapsed with their counts; flagged paths
+that triggered classification are lifted to the top, followed by other 404s
+and then document GETs from the abuser.  Within each category paths are
+sorted by count descending, then by their earliest hit.
+
+In the visitor and crawler tables, internal paths that returned a 404 status
+are shown in red and the link title includes the status code, so it is easy
+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 5-minute bucketing. `from` is the
+  referer origin or `"(direct)"` for initial loads, 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
+  are not page views and are not counted here.
+- `site_visits`: `bucket -> count` of new visits started, same sparse
+  5-minute bucketing.
+
+Sparseness keeps quiet sites small; dropping old data is a matter of deleting
+list entries (`visits` is a plain append-only list).
+
+## Persistence
+
+The whole `Analytics` struct is JSON-encoded and written atomically
+(temp file + rename) on every recorded event. Traffic on a small CMS makes
+this cheap enough; batching can be added later without changing the format.
+
+## Viewing
+
+The 📊 pen in the banner corner (admins only, injected by pagerite.js next to
+the edit pens) links to `/_a`, the analytics page. It is a normal site page:
+the standard banner, navigation and footer stay in place, and the analytics
+content is rendered inside `#main`. The page itself is public, but the data
+stream comes from `WebSocket /_api/ws/analytics`, which remains admin-gated
+like the rest of the management API; visitors without access see the viewer
+with a "could not be loaded" message.
+
+Because it is a real page, fetch-navigation handles it like any other internal
+link: clicking the 📊 pen (or any link to `/_a`) fetches the server-rendered
+HTML, swaps the dynamic regions and mounts the Vue analytics app in place. The
+range selector updates the URL hash (`#week` etc.) so links to a specific
+range can be shared. When the URL has no hash, the client derives the
+default from the first analytics snapshot: `day` if the recorded history
+spans less than 24 hours, otherwise `week`.
+
+`AnalyticsView.vue` is no longer a full-screen overlay; the `body.analytics-open`
+page-chrome hiding and `#/analytics/<range>` hash routing have been removed.
+
+Charts are SVG curves (Catmull-Rom over an edge-aware Gaussian — a
+change-point detector splits the series at traffic-level shifts, then each
+segment is smoothed independently with a fixed sigma chosen so N events in
+a single bucket peak at N events per unit. The raw series is drawn faint
+underneath). Values are
+**per-unit rates** — per hour on the week view (5-minute bucket counts × 12,
+plotted at native 5-minute resolution), per day on the month+ ranges — and
+the smoothing time scale follows the unit: the month+ sigmas are 24× the
+hourly ones. The y max is derived from the smoothed curves so single-bucket
+spikes don't blow up the scale, and raw spikes are clamped into the plot.
+Axes always start at 0 and end at a multiple of a 1-2-5 major step (max 5
+labeled intervals, minor lines at fifths when integral; the minimum y-axis
+range is 10 so tiny values such as a single visit are not stretched to a
+fractional scale).
+The week range is aligned to Monday 00:00 UTC and overlays up to 8 previous
+weeks in the muted color at decreasing opacity (the current week keeps the
+accent color and is
+truncated at the current bucket, never drawing fake zeroes for the future);
+a compact legend inside the top right of the visits chart marks the current
+ISO week in accent and the overlaid past weeks as "Week M" or "Week M–N" on
+a muted specimen. Its x labels are weekday names centered at midday UTC, without
+vertical grid
+lines (day boundaries would be misleading in the viewer's timezone). The
+month view labels days the same lineless way — day numbers at noon UTC,
+with the month name substituted for the 1st. Month, year and all are
+rolling windows ending at now, aligned to UTC day boundaries at the start
+so the labels span the whole range; the bucket size follows the window —
+6 hours up to 31 days, daily beyond — with boundary lines at months/years
+on the longer ranges.  All uses the full data reach, but keeps
+at least the past 30 days (identical to the month view when the site is
+younger than that, bucket size included) so the chart never collapses to a
+tiny sliver when the site is young. Below the charts: a **transition map** (all pages from
+`/_api/pages` — top-level menu items on a large-radius circular arc whose
+bottom point is the last item (each earlier item a bit higher), connected
+by a top lane labeled 🏠︎ beside the home pill (50% thicker than
+the branch lanes, its label font and guide offset scaled along), each item's
+subtree fanning out below it in menu order along a large-radius circular
+arc that leaves heading
+straight down and gradually bends right, index pages without views omitted
+and their children promoted in their place. The submenu structure is drawn
+as wide branch lanes: one per path prefix with at least two visible
+nodes, running behind the branch's node pills as circle arcs concentric
+with the fan (parent levels one radius step outward, so all lanes of a
+group share exactly one form), each labeled with its branch slug
+left-aligned just past the first pill and allowed to run along the lane to
+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 (base 2)
+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
+flow along each edge, persisting across data reloads (emitters are keyed
+per edge direction and beads tracked by progress, so an unrelated count
+change never reshuffles them), emitted at a rate linearly proportional
+to the directional count with no in-flight limit, opposing directions
+offset onto parallel lanes. External sources and exits whose connectors are
+all culled by the width threshold are dropped from their rows themselves
+(the site's own page nodes always stay, connected or not). External sources show as a node row above the
+map: each visit is attributed to `utm_campaign`, then `utm_source`, then the
+referer origin, then any other `utm_*` tag, so UTM-tagged visits are grouped
+under their campaign/source value rather than the referer domain. A UTM
+source node only links to its referer when every visit carrying that tag
+came from the same origin. External exits are full-size nodes in a matching
+row centered below the map, so the site itself stays in the middle), per-page view
+counts, the top transitions and the 50 most recent visit trails. Data is
+streamed live over `WebSocket /_api/ws/analytics`, which pushes the latest
+JSON snapshot on connect and again whenever the analytics file is updated
+(with a small server-side debounce to avoid flooding under high traffic).

docs/backend.md

@@ -0,0 +1,37 @@
+# Backend
+
+The Python backend lives in `pagerite/`.
+
+## `app.py`
+
+The FastAPI app. FastAPI's built-in API docs are disabled (`docs_url`/`redoc_url`/`openapi_url=None`) because `/docs` belongs to our content. Our own routes (content pages, `/_api/...`, `/_f/...`) are registered BEFORE `frontend.route(app, "/")` is called: fastapi-vue inserts its file routes at the position where `route()` was called (during `load()` in the lifespan), so anything defined earlier wins. The one exception is the content catch-all `/{path:path}`, registered AFTER `frontend.route()` so that built frontend assets still take priority over content slugs. The `Frontend` is constructed with `spa=False` explicitly: it only serves the built files without a catch-all.
+
+The build mirrors the URL space — hashed immutable assets under `/_assets/`, `favicon.ico` at the site root — and an `index.html` in the build would become a `/` route, so leave it out of the build to keep `/` ours.
+
+Generated HTML pages (content pages, category/404 placeholders, `/_a`) go through `_html_response`: zstd-compressed per request at level 9 when the client sends `accept-encoding: zstd` (no gzip fallback; static assets are pre-compressed by the `Frontend`), with `vary: accept-encoding` set and the ETag kept identical across encodings so `if-none-match` revalidation still works. In production the rendered bodies are cached in an LRU keyed by everything the output depends on — page kind, path, the site origin (social meta), encoding, and `data.version`, which bumps on every content/settings change and so transparently invalidates the whole cache. The cache is bypassed in dev, where theme/design CSS is re-read from disk per request. Content pages carry an ETag built from the node's modified timestamp and `data.version`; `/_a` instead gets a blake3 hash of the rendered body (it has no Node), with matching `if-none-match` revalidations answered by a 304.
+
+Uploaded files, seed assets and fetched external-site favicons live in the `FileStore`: content-addressed files on disk under `<hostname>/files/` (`PAGERITE_FILES`), fully cached in RAM at startup — both the raw body and a zstd-compressed copy (kept only when smaller). `GET /_f/{name}` serves from the RAM cache with immutable caching, answering the zstd variant when the client accepts it; the name is the ETag. Legacy databases that still carry blobs in a `files` kanta field are migrated to disk by `pagerite/migrations.py::migrate_v1` (kanta's `migrate_vN` mechanism, wired via `Kanta(..., migrations="pagerite.migrations")`), which pops the field from the raw state before struct decoding.
+
+## `data.py`
+
+msgspec Structs for the kanta database. See `docs/content-model.md` for the full data model.
+
+## `markdown.py`
+
+markdown-it-py renderer (html passthrough + attrs, footnote, deflist, tasklists, admon, gfm_autolink, sub/superscript plugins; typographer + breaks on). In bodies with at least three top-level h1/h2 headings (nested ones, e.g. inside `::: aside`, never participate), each gets a slug id (`python-slugify`, mirroring the editor's `slugify.js` — unicode folds to ASCII, separators become single hyphens) unless the author set `{#id}`, and their text is wrapped in a self-link (`a.anchor`) so section links are copyable; anchored headings also carry `data-line` with their markdown source line (the page editor's section pens and piecewise scroll sync key off it); the first in-body h1 is the article title — when the markdown has no h1, `render(title=...)` injects it as `# {title}` so implicit and explicit titles take the same path — it gets no id and doesn't count toward the three, its self-link is `href=""` (scroll to top); shorter articles stay anchor-free, h3+ is never navigable, and duplicates get `-2`/`-3` suffixes. 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). Code fences take pandoc-style brace attributes on the info line (` ```{.python .wide #id key=val} ` — the first class is the language when no bare language word precedes the braces) as well as a trailing `{...}` line; both land on the `<pre>`, the `<code>` keeps only the language class.
+
+`render()` returns a `Rendered(html, multicol)`: the article content segmented for the column layout (there is no wrapper div — segments and bare blocks are direct `<article>` children) — 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 in at least two paragraphs or one long enough to split across columns, `::: nocols` opting out; in column segments, paragraphs past `BREAKABLE_TEXT` visible characters are marked `.breakable` so they may split across columns), 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.
+
+Content pages get SEO/social meta (description, canonical link, Open Graph + twitter card) from heuristics over the rendered article: the description is the first paragraph's text, the share image prefers a `{.hero}`-classed image, then the first raster `<img>`, then the first SVG; the first `<video>` yields `og:video`; URLs are made absolute with the site origin (`SITE_URL` — `https://<hostname>` from the CLI hostname argument; on localhost the request's own base URL is the fallback); `article:published/modified_time` come from `Node.created`/`modified`. The page title is injected as `# {title}` when the markdown has no h1 of its own, so it never appears twice (it always supplies `<title>` and nav labels).
+
+The navbar holds top-level items only; the current section's subitems go to a left `#sidebar` as a nested list (the section's direct children plain, deeper levels indented with article-list-style markers), rendered only from the second level down — main-level pages list their children as cards after the content instead. Below that, the sidebar renders when the section offers at least two published items, or exactly one while viewing anything other than that only page — the section index, a 404, a grandchild (so those pages can reach the child), and also on that only page itself when it has published children of its own; no aside element at all on the front page, main-level pages, leaf pages and the sole childless page of a one-page section. Also, category labels are nodes without content — None *or* empty markdown — and their nav links point at their first child page. Dynamic regions have stable ids (`#page-banner`, `#nav`, `#sidebar`, `#main`) for fetch-navigation swaps (`#sidebar` may be absent on either side of a swap).
+
+Any page with published children — a category page — lists them as a card grid (`nav.cards`) after the markdown content, as does the content-less category 404. Each card links to the child page (a content-less child to its first leaf) and shows the child's share image (the same hero → first raster → first SVG heuristics as `og:image`) as a full-card cover with the title overlaid.
+
+## `seed.py`
+
+Demo content written only when the database is first created, via a `@kanta.bootstrap` handler in `app.py`.

docs/content-model.md

@@ -0,0 +1,37 @@
+# Content model
+
+The site structure is stored in the kanta database managed by `pagerite/data.py`.
+
+## Site tree
+
+`Data.menu` maps top-level slugs to `Node`s, each with `children` keyed by slug — the URL path is the slug chain. The front page is whichever top-level node has slug "" (parallel to the other main level pages, not their parent); it cannot have children, and renaming its slug away leaves no front page ("/" redirects to the first nav item).
+
+`Node.content` is the Markdown page, or None for a pure category label whose URL renders a 404 listing its children as cards (while nav links to it point at its first child); every label's title and slug are editable. A page with published children — a category page — lists them as cards after its markdown content; the sidebar sub-navigation renders only from the second level down, never on main-level pages.
+
+Siblings order by the fractional `Node.order` key: a moved item gets a fresh key relative to its new siblings, all others keep theirs. `resolve`/`find_slot` walk the tree by path; moves are slot detach/attach carrying the whole subtree. Legacy flat `Data.pages` (pre-tree databases) migrates into `menu` on startup. The app owns the `Data` object; reads are plain attribute access, writes in `kanta.transaction(...)`.
+
+`Data.version` is bumped on every write and embedded in page ETags so nav-affecting changes invalidate caches.
+
+## Files
+
+Files are content-addressed (blake3[:12] + extension) and stored **on disk** under `<hostname>/files/` (path from `PAGERITE_FILES`), served at `/_f/{name}` with immutable caching. Uploaded raster images (except SVG/GIF) are stored as a pair: the untouched original under `<hash>.orig<ext>` and a mediapreview-recompressed AVIF derivative (`<hash>.avif`, thumbnailed to `IMAGE_MAXSIZE` at `IMAGE_QUALITY`) which is the externally linked file; deleting either name removes the pair. the `FileStore` in app.py caches every file in RAM, both uncompressed and zstd-compressed (the compressed copy only when smaller), so `/_f` answers both encodings without disk reads. Pages reference files by absolute `/_f/` URLs so hierarchy moves never break them. Pre-refactor databases kept the blobs in a `Data.files` kanta field; the kanta migration `pagerite/migrations.py::migrate_v1` writes them to disk on open and drops the field (removed from `Data`). Fetched favicons of external analytics sites live in the same store (see `docs/analytics.md`).
+
+## Banners
+
+`Node.banner` is a raw trusted HTML snippet for the header banner (img, styled div, canvas+script...); empty inherits from the node's ancestors (front page last). It is rendered AFTER the banner design's artwork, so author code (e.g. a `<style>` override) always wins over the design's own styles.
+
+`Node.banner_design` picks a banner design: a theme folder name whose `banner.css` styles it and whose `banner.html` (arbitrary markup: canvas + style + script) or `banner.svg` supplies the inline artwork (wrapped in `div[data-design]`); "" = explicitly no design, None = inherit (nearest ancestor, front page last, then the active theme's own design if it ships banner.css/banner.svg/banner.html). The design's banner.css lives in `<head>` (id `pagerite-banner`) between the theme and the custom CSS — a `<link>` in dev, an inline `<style>` in production.
+
+## Site settings
+
+`Data.brand` is the site name (header link + `<title>` suffix), editable in the site editor via `/_api/settings`; empty = no header link and no `<title>` suffix.
+
+`Data.brand_html` is raw trusted HTML replacing the brand link entirely (rendered in a `#brand` div on top of the banner, next to the nav) — site-wide, not per-page like banners; edited in the site editor with image/video upload into the content-addressed file store.
+
+`Data.theme` is the active theme name (empty = none/base only); themes are folders in `pagerite/themes/{name}` containing `theme.css` and/or `banner.css` (+ `banner.svg` artwork and any extra assets the CSS references, like summer's `grass.svg`), served by the backend at `/_themes/{name}/...` — read from disk per request (etag by mtime), never built, so on-disk edits show on the next page load even in prod. The theme selector and banner-design selector enumerate these folders via `GET /_api/settings`.
+
+`Data.transition` is the page-transition design name (default `cube`): a theme folder shipping `transition.css`, injected as `#pagerite-transition` on every page and selected in the site editor (the selector enumerates `transition.css` folders via `GET /_api/settings`). See `docs/themes-and-assets.md`.
+
+`Data.custom_css` is raw trusted CSS injected inline in every page `<head>` (id `pagerite-user`) and swapped during fetch-navigation; editable in the site editor. Font picks (heading/body/brand) in the site editor are stored as plain `:root` rows in `custom_css` (`--font-body: var(--font-source-sans);` format — parsed out and rewritten on change, the `:root` block added/removed as needed), referencing the per-family variables (`--font-source-sans` etc.) from `pagerite.css`; the base stylesheet's `--font-brand` defaults to `var(--font-heading)`.
+
+`Data.favicon` names a file in the content-addressed store (on disk under `<hostname>/files/`), uploaded/cleared in the site editor via `PUT`/`DELETE /_api/settings/favicon`; when set it is linked as `<link rel="icon">` on every page, otherwise browsers fall back to the build's `/favicon.ico` by convention.

docs/design-principles.md

@@ -1,253 +1,55 @@
 # Pagerite Design Principles
 
-Pagerite is a single-user CMS/blog. This document records the initial
-high-level design decisions; it will be refined as the implementation
-evolves.
+Pagerite is a single-user CMS/blog. This document records the initial high-level design decisions; it will be refined as the implementation evolves.
 
 ## Architecture
 
-- **Server-side rendered.** FastAPI serves complete HTML pages, generated in
-  Python with **html5tagger**. There is no client-side templating or SPA for
-  the public site.
-- **Vue only where interactivity demands it.** Small interactive islands
-  (editing tools mainly) are Vue components mounted into specific elements of
-  the server-rendered pages. The public reading experience has no scripting
-  requirement.
-- **Persistence via kanta.** Content is stored in an asyncio-friendly kanta
-  database. Rendering happens on the fly on each request — there are no
-  pre-built static artifacts.
+- **Server-side rendered.** FastAPI serves complete HTML pages, generated in Python with **html5tagger**. There is no client-side templating or SPA for the public site.
+- **Vue only where interactivity demands it.** Small interactive islands (editing tools mainly) are Vue components mounted into specific elements of the server-rendered pages. The public reading experience has no scripting requirement.
+- **Persistence via kanta.** Content is stored in an asyncio-friendly kanta database. Rendering happens on the fly on each request — there are no pre-built static artifacts.
 
 ## Content model
 
-- Pages and blog articles are fundamentally the same kind of thing: named
-  pieces of content. The blog/website distinction is blurred; an article is
-  just a page (possibly with metadata such as a publication date and
-  listing in a feed).
-- **Pretty URLs.** Content is addressed by its name (slug), not by technical
-  constructs — no `/cms/...` or `/blog/post1` prefixes. Slugs usually live
-  directly at the site root; structured content may nest
-  (`/docs/design-principles`-style). The URL space is the author's, so
-  reserved prefixes must be kept few and deliberate: everything internal
-  lives under `/_` (`/_api/`, `/_f/`, `/_assets/`). The only
-  other reserved root path is `/favicon.ico`, served from the build.
-  Slugs are lowercase ASCII letters, digits, hyphens and underscores
-  (`[a-z0-9_-]`; input is transliterated and filtered as you type, and a
-  new page's empty slug is derived from its title), may not begin with
-  `_` or `.`, and such URLs are never looked up as content.
-- **Single user, trusted author.** No auth concerns in the core design.
-  Everything published is public; only editing tools will later sit behind
-  access control (external SSO when that time comes). The author is trusted
-  to create well-meaning slugs and content — no sanitization for safety,
-  only for correctness.
-- **Commenting** is not planned now but the model should not preclude it
-  later.
+- Pages and blog articles are fundamentally the same kind of thing: named pieces of content. The blog/website distinction is blurred; an article is just a page (possibly with metadata such as a publication date and listing in a feed).
+- **Pretty URLs.** Content is addressed by its name (slug), not by technical constructs — no `/cms/...` or `/blog/post1` prefixes. Slugs usually live directly at the site root; structured content may nest (`/docs/design-principles`-style). The URL space is the author's, so reserved prefixes must be kept few and deliberate: everything internal lives under `/_` (`/_api/`, `/_f/`, `/_assets/`). The only other reserved root path is `/favicon.ico`, served from the build. Slugs are lowercase ASCII letters, digits, hyphens and underscores (`[a-z0-9_-]`; input is transliterated and filtered as you type, and a new page's empty slug is derived from its title), may not begin with `_` or `.`, and such URLs are never looked up as content.
+- **Single user, trusted author.** No auth concerns in the core design. Everything published is public; only editing tools will later sit behind access control (external SSO when that time comes). The author is trusted to create well-meaning slugs and content — no sanitization for safety, only for correctness.
+- **Commenting** is not planned now but the model should not preclude it later.
 
 ## Authoring format
 
-- 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.
-- **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.
+- 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, 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 on disk (`<hostname>/files/`, RAM-cached uncompressed + zstd) by content hash — blake3, first 6 bytes hex + original extension — and served immutable from `/_f/{hash}.ext`. Raster images (not SVG/GIF) are recompressed via mediapreview: the original is kept as `/_f/{hash}.orig{ext}` while pages link the thumbnailed AVIF derivative `/_f/{hash}.avif`. 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, and space-separated at the end of a text line (`some text {.small}`) the braces likewise belong to the block — a space is what keeps them off an image or link ending the line, which keep their own directly-attached attrs; text size classes `{.small}` / `{.large}` / `{.huge}` (em-based) work on any block; 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
 
-- All pages share one static layout, defined once as an **html5tagger
-  Template** with capitalized placeholders (`Title`, `Banner`, `Nav`,
-  `Sidebar`, `Main`) filled per request. The dynamic regions carry stable
-  ids (`#page-banner`, `#nav`, `#sidebar`, `#main`).
-- The page top is a **full-width banner header** with the site name and the
-  navigation bar overlaid on it — no separate chrome header. The banner
-  combines two layers, stacked in `#page-banner` (a grid, so they overlay):
-  first the **banner design** — a named design living in a theme folder
-  (`pagerite/themes/{name}/banner.css` plus artwork as `banner.html` —
-  arbitrary markup like canvas + style + script — or `banner.svg`),
-  chosen per page via
-  `Node.banner_design` (a design name, "" for none, None to inherit from
-  the nearest ancestor, then the front page, then the active theme's own
-  design). The artwork is inlined into a `div[data-design]` wrapper: SVG
-  artwork can be recolored from the theme stylesheet (corporate's single
-  SVG serves both light and dark mode via `var()`-driven stops). Second,
-  **per-page author code**: `Node.banner` holds an arbitrary trusted HTML
-  snippet (an image, a styled div, canvas + script — anything), resolved by
-  walking up the node's ancestors to the front page and rendered **after**
-  the design artwork, so author styles always win over the design's own.
-  The base stylesheet falls back to a plain gradient. There is deliberately
-  no scrim fading the banner into the page background — any such fade would
-  ruin user-supplied designs; themes that want one bake it into their SVG
-  (purple does).
-- **Fetch-navigation.** Links are plain `<a href>`; a small script
-  (`frontend/src/pagerite.js`) intercepts same-origin clicks, fetches the
-  page, and swaps the `#page-banner`, `#nav`, `#sidebar` and `#main` regions,
-  the document title, and the site-wide custom CSS (`<style id="pagerite-user">`
-  in `<head>`), keeping the rest of `<head>` and the layout chrome. Without JS
-  everything works as normal page loads. Scripts inside fetched banner and
-  content regions are re-created so they execute. Swaps run inside `document.startViewTransition` for a rotating
-  cube page transition (CSS adapted from termotohtori.fi — the
-  `::view-transition*` block is fragile, do not tweak; skipped under
-  `prefers-reduced-motion`). Navigation within the same top-level section
-  crossfades instead of rotating; browser back navigation rotates in
-  reverse.
-- **The site structure is a tree of labels.** `Data.menu` holds the
-  top-level items by slug, each with `children` keyed by slug — the URL
-  path is the slug chain. The front page is a top-level node with slug ""
-  (an item *parallel* to the other main level pages, not their parent) and
-  cannot have children. The header navbar holds only the top level; a
-  top-level item is highlighted when viewing any of its subpages. When the
-  current page is inside a main level section with children, those direct
-  children are listed in a **left sidebar** (`#sidebar`), one level deep.
-  The sidebar exists only when there is something to navigate — sections
-  with fewer than two published items, leaf pages and the front page render
-  no aside element at all. Other sections' subitems
-  are never shown without navigating into them first.
-- **Landing pages are optional.** Every label can either have content
-  (`Node.content`, a Markdown page) or none — a content-less label renders
-  a placeholder page (404 with a pen to create it) instead of redirecting,
-  while nav links to it point straight at its first child, so categories
-  need no filler content and normal navigation never sees the placeholder.
-  Title and slug of every label are editable; renaming a
-  slug moves the whole subtree. The sidebar never lists the section
-  itself, avoiding title duplication with the navbar.
-- **Menu order is manual.** Each node has a fractional `order` key among
-  its siblings; reordering/moving writes only the moved node (it takes a
-  fresh value halfway between its new siblings; all other items keep
-  theirs). New pages append at the end of their menu. Structure edits
-  (reorder, move/rename with the whole subtree, retitle) go through
-  `POST /_api/structure` and the editor's structure panel.
+- All pages share one static layout, defined once as an **html5tagger Template** with capitalized placeholders (`Title`, `Banner`, `Nav`, `Sidebar`, `Main`) filled per request. The dynamic regions carry stable ids (`#page-banner`, `#nav`, `#sidebar`, `#main`).
+- The page top is a **full-width banner header** with the site name and the navigation bar overlaid on it — no separate chrome header. The banner combines two layers, stacked in `#page-banner` (a grid, so they overlay): first the **banner design** — a named design living in a theme folder (`pagerite/themes/{name}/banner.css` plus artwork as `banner.html` — arbitrary markup like canvas + style + script — or `banner.svg`), chosen per page via `Node.banner_design` (a design name, "" for none, None to inherit from the nearest ancestor, then the front page, then the active theme's own design). The artwork is inlined into a `div[data-design]` wrapper: SVG artwork can be recolored from the theme stylesheet (corporate's single SVG serves both light and dark mode via `var()`-driven stops). Second, **per-page author code**: `Node.banner` holds an arbitrary trusted HTML snippet (an image, a styled div, canvas + script — anything), resolved by walking up the node's ancestors to the front page and rendered **after** the design artwork, so author styles always win over the design's own. The base stylesheet falls back to a plain gradient. There is deliberately no scrim fading the banner into the page background — any such fade would ruin user-supplied designs; themes that want one bake it into their SVG (purple does).
+- **Fetch-navigation.** Links are plain `<a href>`; a small script (`frontend/src/pagerite.js`) intercepts same-origin clicks, fetches the page, and swaps the `#page-banner`, `#nav`, `#sidebar` and `#main` regions, the document title, and the site-wide custom CSS (`<style id="pagerite-user">` in `<head>`), keeping the rest of `<head>` and the layout chrome. Without JS everything works as normal page loads. Scripts inside fetched banner and content regions are re-created so they execute. Swaps run inside `document.startViewTransition` for the page transition selected in the site settings (`Data.transition`; the `cube` design — CSS adapted from termotohtori.fi, fragile, do not tweak — rotates, mirrored on browser back; `crossfade` fades; both skipped under `prefers-reduced-motion`). With `cube`, navigation within the same top-level section crossfades instead of rotating.
+- **The site structure is a tree of labels.** `Data.menu` holds the top-level items by slug, each with `children` keyed by slug — the URL path is the slug chain. The front page is a top-level node with slug "" (an item *parallel* to the other main level pages, not their parent) and cannot have children. The header navbar holds only the top level; a top-level item is highlighted when viewing any of its subpages. A page with published children lists them as **cards** after its content (the child page's share image as the cover, like the og tags, with the title overlaid); a **left sidebar** (`#sidebar`) with the section's sub-navigation appears only from the second level down, when there is something to navigate — main-level pages, sections with fewer than two published items, leaf pages and the front page render no aside element at all. Other sections' subitems are never shown without navigating into them first.
+- **Landing pages are optional.** Every label can either have content (`Node.content`, a Markdown page) or none — a content-less label renders a 404 page listing its children as cards (with a pen to create the landing page) instead of redirecting, while nav links to it point straight at its first child, so categories need no filler content and normal navigation never sees the 404. Title and slug of every label are editable; renaming a slug moves the whole subtree. The sidebar never lists the section itself, avoiding title duplication with the navbar.
+- **Menu order is manual.** Each node has a fractional `order` key among its siblings; reordering/moving writes only the moved node (it takes a fresh value halfway between its new siblings; all other items keep theirs). New pages append at the end of their menu. Structure edits (reorder, move/rename with the whole subtree, retitle) go through `POST /_api/structure` and the editor's structure panel.
 - Unpublished pages are hidden from both nav and URL access (404).
 
 ## 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.
-- 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.
+- 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, the sidebar gets its own track at every width — flexible, 12rem when space is tight and growing up to 150% (18rem) once the viewport has room beyond the article, the sidebar keeping its left side on the viewport's edge — and the track is the left lane instead: no in-article zone, the text lane runs fluid up to 86rem leaning on the viewport's right edge (surplus extends the left lane), and the boxes hang into the lane off the article's left border (growing leftward with it, up to 18rem), 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 in at least two paragraphs (or one long enough to split) with `.cols` — code blocks are excluded from that measure, a `::: nocols` container opts its whole section out, and column-filling paragraphs are marked `.breakable` so they may split across the column gap (shorter paragraphs stay whole). On wide single-column pages (≥104rem), margin boxes lean into the vacant left gutter as well, growing with it up to 18rem.
+- 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
 
-- The base stylesheet `frontend/src/assets/pagerite.css` provides the layout,
-  typography and interaction rules with conservative CSS variables. A theme layer
-  (`pagerite/themes/{name}/theme.css` — currently `purple`, `corporate`
-  and `nitro`, served by the backend at `/_themes/{name}/theme.css` straight
-  from disk, never built) overrides those variables and
-  adds the visual styling; `Data.theme` selects the active theme (empty = none/base
-  only) and the site editor can switch it, choosing from the theme folders
-  found on disk. Vue may add per-component styles on top
-  where needed. The corporate and nitro themes switch palettes automatically via
-  `prefers-color-scheme` (corporate is light-first with a matching dark palette;
-  nitro a warm light-grey page or, in dark mode, a deep violet one — its dark
-  banner and orange accents carry over unchanged); purple (dusk) uses one
-  fixed palette for everyone. Themes may restyle structural details the base
-  leaves plain — heading colors and underlines, list markers, nav treatment,
-  brand sizing. A theme folder may also ship a **banner design**
-  (`banner.css` + `banner.svg`), selectable per page independently of the
-  active theme. The banner artwork has scroll parallax: pagerite.js sets the
-  `--pry` scroll parameter on `<html>` (event-driven, so it is still when the
-  page is idle), the banner contents drift within their window (with scale
-  overscan so no edge shows), and designs may key their own effects off the
-  same parameter — purple's sun rises as you scroll.
-- Fonts, the shared stylesheet and pygments styles
-  live under `frontend/src/assets/` and are emitted as hashed assets under
-  `/_assets/`
-  (Source Serif 4 for headings, Source Sans 3 for body, Fira Code for code
-  by default; Fraunces, Literata, Cormorant, Playfair Display, Inter,
-  Montserrat, Cause, Exo 2 and New Rocker kept as woff2 options with
-  local `@font-face`, variable-weight where available). No third-party
-  requests.
+- The base stylesheet `frontend/src/assets/pagerite.css` provides the layout, typography and interaction rules with conservative CSS variables. A theme layer (`pagerite/themes/{name}/theme.css` — currently `purple`, `corporate` and `nitro`, served by the backend at `/_themes/{name}/theme.css` straight from disk, never built) overrides those variables and adds the visual styling; `Data.theme` selects the active theme (empty = none/base only) and the site editor can switch it, choosing from the theme folders found on disk. Vue may add per-component styles on top where needed. The corporate and nitro themes switch palettes automatically via `prefers-color-scheme` (corporate is light-first with a matching dark palette; nitro a warm light-grey page or, in dark mode, a deep violet one — its dark banner and orange accents carry over unchanged); purple (dusk) uses one fixed palette for everyone. Themes may restyle structural details the base leaves plain — heading colors and underlines, list markers, nav treatment, brand sizing. A theme folder may also ship a **banner design** (`banner.css` + `banner.svg`), selectable per page independently of the active theme. The banner artwork has scroll parallax: pagerite.js sets the `--pry` scroll parameter on `<html>` (event-driven, so it is still when the page is idle), the banner contents drift within their window (with scale overscan so no edge shows), and designs may key their own effects off the same parameter — purple's sun rises as you scroll.
+- Fonts, the shared stylesheet and pygments styles live under `frontend/src/assets/` and are emitted as hashed assets under `/_assets/` (Source Serif 4 for headings, Source Sans 3 for body, Fira Code for code by default; Fraunces, Literata, Cormorant, Playfair Display, Inter, Montserrat, Cause, Exo 2 and New Rocker kept as woff2 options with local `@font-face`, variable-weight where available). No third-party requests.
 
 ## 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.
-  - **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.
-- The **structure panel** (vue-draggable tree of the whole site, in site
-  mode) covers page management: reorder any menu level, drag across
-  sections, add, delete (two clicks: the button arms, then deletes — no
-  dialogs). Every node is a real label — content-less category rows offer
-  a ➕ to give them a landing page.
-  Deleting a category removes only its landing page (the label and its
-  subpages stay). Every non-empty list ends with a ➕ row that starts a
-  new page as a local-only tree row at that level; the row can be dragged
-  into place before its title and slug are filled in and is persisted only
-  on commit. While dragging, these ➕ rows double as "end of this list"
-  drop targets; dropping ON the lower part of a row makes the page that
-  row's first child (even a leaf's, creating a sublist), while a row's
-  exposed top edge inserts a sibling before it. A dragged row's
-  indentation previews the target list's depth. Rows are always
-  editable: titles save while typing, slug edits commit on blur/Enter
-  since they rename the path (moving the whole subtree). The front page
-  is the root row with an empty slug — renaming it away leaves no front
-  page ("/" redirects to the first nav item), and giving another
-  top-level row the empty slug makes it the front page.
-- Preview and saving go over a **WebSocket** (`/_api/ws/editor`) with a
-  stateless JSON protocol (`open`/`render`/`save`; on save all fields are
-  optional and absent ones keep their old values, `move_from` renames),
-  avoiding REST polling and races. Rendering always stays server-side.
-- A REST API also exists for scripting, all under `/_api/`:
-  `GET pages` (the full tree), `PUT/DELETE pages/{path}`,
-  `GET/PUT settings` (site brand, theme and custom CSS), `POST structure`
-  (reorder/move/retitle), file upload/removal via `PUT/DELETE files/{name}`.
-- On startup, seed pages from `pagerite/seed.py` are added **only if
-  missing** — existing user content is never overwritten.
+  - **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) and swaps the whole visible article content in one go (the edit pen and category cards survive the swap).
+  - **Site mode** — the ⚙️ at the top right (after the 📊 analytics link, before login) opens a panel with the site **brand** (applied to the header live), a **theme** selector (swapping the theme stylesheet in place), a **page transition** selector (`cube`/`crossfade`, swapping `#pagerite-transition` 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.
+- The **structure panel** (vue-draggable tree of the whole site, in site mode) covers page management: reorder any menu level, drag across sections, add, delete (two clicks: the button arms, then deletes — no dialogs). Every node is a real label — content-less category rows offer a ➕ to give them a landing page. Deleting a category removes only its landing page (the label and its subpages stay). Every non-empty list ends with a ➕ row that starts a new page as a local-only tree row at that level; the row can be dragged into place before its title and slug are filled in and is persisted only on commit. While dragging, these ➕ rows double as "end of this list" drop targets; dropping ON the lower part of a row makes the page that row's first child (even a leaf's, creating a sublist), while a row's exposed top edge inserts a sibling before it. A dragged row's indentation previews the target list's depth. Rows are always editable: titles save while typing, slug edits commit on blur/Enter since they rename the path (moving the whole subtree). The front page is the root row with an empty slug — renaming it away leaves no front page ("/" redirects to the first nav item), and giving another top-level row the empty slug makes it the front page.
+- Preview and saving go over a **WebSocket** (`/_api/ws/editor`) with a stateless JSON protocol (`open`/`render`/`save`; on save all fields are optional and absent ones keep their old values, `move_from` renames), avoiding REST polling and races. Rendering always stays server-side.
+- A REST API also exists for scripting, all under `/_api/`: `GET pages` (the full tree), `PUT/DELETE pages/{path}`, `GET/PUT settings` (site brand, theme and custom CSS), `POST structure` (reorder/move/retitle), file upload/removal via `PUT/DELETE files/{name}`.
+- On startup, seed pages from `pagerite/seed.py` are added **only if missing** — existing user content is never overwritten.

docs/editing.md

@@ -0,0 +1,30 @@
+# Editing interface
+
+The Vue editor is a single tabbed `EditorShell.vue` mounted in a host div created inside the static document.
+
+## Tabs
+
+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 and article scrolls are linked piecewise-linearly, keyed on the section anchors' `data-line` (markdown source line the backend stamps on top-level anchored h1/h2s): the page follows the cursor (fractional, wrap-aware, scrolling only when the cursor's page position leaves the viewport, with an edge margin), the editor follows page scroll with a progress-based viewport anchor, 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); anchored h2s carry their own edit pens that open the editor scrolled to that section; a format bar offers Markdown helpers — bold/italic/code/link/table/image upload (always block-level on a fresh blank-separated line of its own — a cursor on a non-empty line, e.g. inside an existing image tag, inserts after that line, never into it; always with an empty `""` caption, cursor inside the quotes), toggling fences (` ``` ` code blocks and `::: aside` containers share the same machinery: clicked inside one they remove it and select the content, otherwise they wrap the selection or the cursor's line, keeping it selected), and `.left`/`.right`/`.wide`/`.margin` placement toggles plus `.small`/`.large`/`.huge` text-size toggles (brace attributes on the block at the cursor, mutually exclusive within each group; on `:::` containers a placement class replaces the container name instead — `::: aside` → `::: margin`), 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 + page-transition 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 (deliberately NOT Escape — it fired too easily by accident); 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; the editor always follows the URL, so fetch-navigating with the shell open (or before re-opening it) retargets it to the new page — unsaved text is stashed per path for the session and restored when returning, cleared on save. 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). 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. 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.
+
+Dropping ON the lower part of a row moves the page under that row (the child list's container invisibly overlaps its own row's bottom via negative margin — Sortable inserts it as the first child natively), while a row's exposed top edge inserts a sibling before it. Row indentation is structural (each nested list margin-indents itself), so a dragged row previews its whole subtree at the target list's depth.
+
+The shell is dynamic-imported onto the content page by pagerite.js when an edit pen is clicked (the pens are injected by pagerite.js after the session validates; they carry `data-editor-src`/`data-editor-css`/`data-editor-mode`). In dev, modules load from the Vite dev server (`PAGERITE_VITE_URL`), in prod from the hashed build assets resolved via `frontend-build/.vite/manifest.json`.
+
+`vite.config.js` sets `appType: 'mpa'` (no SPA fallback) and builds with `manifest: true`, `assetsDir: '_/assets'` (so the build mirrors the URL space; `frontend/public/favicon.ico` lands at the build root and is served at `/favicon.ico`). JS inputs are `src/main.js` and `src/pagerite.js`, plus `src/assets/pagerite.css` as a separate stylesheet entry; theme, banner-design and transition CSS are NOT built — they live in `pagerite/themes/{name}/` and are served by the backend. There is no `index.html` source (it would shadow `/` and turn missing dev paths into an empty Vue shell). All outputs are ES modules. The build sets `preserveEntrySignatures: 'exports-only'` because main.js is consumed via dynamic `import()` for its `openEditor`/`closeEditor` exports — Vite app builds otherwise strip unused entry exports, leaving dead edit pens. In dev the backend links theme/banner-design stylesheets like in prod (`/_themes/...`); only the base CSS is Vite-injected from JS, and pagerite.js then re-appends the `#pagerite-theme`/`#pagerite-banner`/`#pagerite-transition`/`#pagerite-user` elements to restore the canonical order (base < theme < design < transition < custom CSS). In production all page assets are inlined instead (styles as `<style id="pagerite-…">` in `<head>`, scripts at the end of the body). Theme switches in the site editor swap the `#pagerite-theme` element in place — the link href in dev, the inline style's text (fetched from `/_themes/...`) in prod.
+
+`vite-plugin-fastapi.js` has an auto-upgrade marker — edit `vite.config.js`, not the plugin.

docs/frontend-runtime.md

@@ -0,0 +1,31 @@
+# Frontend runtime
+
+The public page runtime lives in `frontend/src/`.
+
+## `main.js`
+
+Vue editor app entry, mounts the tabbed `EditorShell`. See `docs/editing.md` for the editor UI.
+
+## `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). 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, a scroll-driven section hash (the location hash tracks the h1/h2 above the viewport middle via replaceState — removed above the first tagged heading and at the very top, never set on unscrollable pages), 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`.
+
+Asset wiring differs by mode. In dev the backend links the Vite dev-server URLs (`pagerite:editor-src`/`-css`/`pagerite:analytics-src` meta tags, `<link>` stylesheets) and Vite injects the entry CSS from JS for hot reloads. In production there are no pagerite meta tags: all page assets are inlined into the document — stylesheets as `<style>` elements in `<head>` (fixed order: base, theme, banner design, page transition, entry sheets, custom CSS last), module scripts as inline `<script>`s at the end of the body (relative chunk imports are rewritten to absolute `/_assets/` paths) — and the on-demand bundles' URLs ride in a `<script type="application/json" id="pagerite-assets">` config. The editor bundle always stays external, imported on demand when a pen is opened. Every stylesheet element carries a stable id so fetch-navigation and the site editor can sync `<head>` positionally across swaps (the analytics sheet exists on `/_a` only and is added/removed as you navigate). The analytics entry is inlined into the `/_a` page itself; pagerite.js re-creates that script element after fetch-navigating there (inline scripts don't execute on a DOM swap) and calls the module's exposed unmount before swapping away.
+
+## `assets/`
+
+Shared styles and data files built by Vite and served hashed under `/_assets/`: `pagerite.css` (base layout + conservative variables), `pygments.css`, and `fonts/` (self-hosted Source Sans 3/Source Serif 4/Fraunces/Literata/Cormorant/Playfair Display/Inter/Montserrat/Fira Code/Cause/Exo 2/New Rocker variable woff2).
+
+The `::view-transition*` rules live in the page-transition designs (`pagerite/themes/{cube,crossfade}/transition.css`), not in the base stylesheet. Themes, banner designs and transitions are NOT built — they live in `pagerite/themes/{name}/` and are served by the backend. See `docs/themes-and-assets.md` for details.
+
+Vite builds ES-module `.js` outputs; in dev the backend links them as `<script type="module">` (module scripts defer by default), in production it inlines them at the end of the body.
+
+## Data directory
+
+All site data lives under `<hostname>/` in the cwd — `content.kantadb`,
+`analytics.json` and `files/` — where `<hostname>` is the CLI's first
+positional argument (default `localhost`, exported as `PAGERITE_HOSTNAME`;
+`PAGERITE_DB`/`PAGERITE_ANALYTICS`/`PAGERITE_FILES` override individual
+paths). gitignored. Do not delete it without asking.

docs/overview.md

@@ -0,0 +1,5 @@
+# Pagerite overview
+
+Pagerite is a single-user CMS/blog. FastAPI serves HTML rendered in Python with html5tagger; content is persisted in a kanta database and rendered on the fly per request. Vue is used only for interactive bits (editing tools), not for the public pages.
+
+See `docs/design-principles.md` for the high-level design and the other `docs/*.md` files for implementation details.

docs/setup.md

@@ -0,0 +1,91 @@
+# Production setup
+
+From a local demo to a real site: run Pagerite as a systemd service behind
+a reverse proxy that terminates HTTPS, with Paskia guarding the editing API.
+
+The moving parts:
+
+- **Pagerite** — serves the public site on `localhost:8100` and the editing
+  API under `/_api`.
+- **Paskia** — the SSO server; owns `/auth/` and answers forward-auth
+  subrequests.
+- **A reverse proxy** — Caddy below, but nginx or anything with
+  forward-auth support works the same way.
+
+## Pagerite as a systemd service
+
+Install [uv](https://docs.astral.sh/uv/getting-started/installation/) on the
+system, create a user, and add a template unit:
+
+```sh
+sudo useradd --system --home-dir /srv/pagerite --create-home pagerite
+curl -LsSf https://astral.sh/uv/install.sh | sudo env UV_INSTALL_DIR=/usr/local/bin sh
+sudo systemctl edit --force --full pagerite.service
+```
+
+```ini
+[Unit]
+Description=Pagerite CMS
+
+[Service]
+Type=simple
+User=pagerite
+SyslogIdentifier=pagerite
+WorkingDirectory=/srv/pagerite
+ExecStart=uvx pagerite example.com --dbip
+
+[Install]
+WantedBy=multi-user.target
+```
+
+Replace `example.com` with your actual domain name. `--dbip` keeps the local GeoIP database up to date: leave out if you don't want DBIP data for analytics.
+
+```sh
+sudo systemctl enable --now pagerite
+sudo journalctl -ocat -fu pagerite
+```
+
+## Running it on internet
+
+We recommend Caddy for making your site publicly visible on the Internet. Presumably you already have some proxy, perhaps Nginx, but our setup is not much different of any other service you might already be running. ChatGPT and the likes can also help with the configuration because online documentation is limited. Note that Paskia also has extensive documentation on [running on various proxy servers](https://git.zi.fi/LeoVasanko/paskia/src/branch/main/docs/proxy/index.md)
+
+Install [Caddy](https://caddyserver.com/) and follow the [Paskia setup guide](https://git.zi.fi/LeoVasanko/paskia) to get the SSO server running and its `auth` snippets copied to `/etc/caddy/auth` — that guide covers Paskia's own configuration and admin registration in detail.
+
+Then the site config. Only the editing API needs gating; the site itself is public:
+
+```caddyfile
+example.com {
+    import auth/setup
+
+    reverse_proxy /auth/* localhost:4401
+
+    @api path /_api/*
+    handle @api {
+        import auth/require perm=pagerite:admin
+        reverse_proxy localhost:8100
+    }
+
+    handle {
+        reverse_proxy localhost:8100
+    }
+}
+```
+
+Reload Caddy, then create a permission with scope `pagerite:admin` in the
+Paskia admin panel (`/auth/admin/`) and assign it to yourself, as the Paskia
+guide describes. Anonymous visitors now get 401 from `/_api`, logged-in
+users without the permission get 403, and admins get the editing pens.
+
+## nginx or another proxy
+
+The shape is identical everywhere:
+
+- `/auth/` proxies to Paskia (`localhost:4401`).
+- `/_api` requires a forward-auth subrequest against Paskia — on nginx that
+  is `auth_request` against Paskia's verify endpoint — before proxying to
+  Pagerite (`localhost:8100`).
+- Everything else proxies straight to Pagerite.
+
+Paskia ships per-proxy forward-auth guides covering
+[Caddy, nginx and others](https://git.zi.fi/LeoVasanko/paskia/src/branch/main/docs/proxy/index.md);
+adapt the matcher to `/auth/` and `/_api` as above and leave the rest public.

docs/themes-and-assets.md

@@ -0,0 +1,71 @@
+# Themes and assets
+
+## Built assets
+
+Files under `frontend/src/assets/` are built by Vite and served hashed under `/_assets/`:
+
+- `pagerite.css` — base layout + conservative variables.
+- `pygments.css` — Pygments token styles mapped onto the `--code-*` variables.
+- `fonts/` — self-hosted variable woff2 files for Source Sans 3, Source Serif 4, Fraunces, Literata, Cormorant, Playfair Display, Inter, Montserrat, Fira Code, Cause, Exo 2 and New Rocker.
+
+The `::view-transition*` rules are not in the base stylesheet: they live in the page-transition designs (`pagerite/themes/{name}/transition.css`, see below).
+
+## Themes
+
+Themes are folders in `pagerite/themes/{name}/` containing `theme.css` and/or `banner.css` (+ `banner.svg` artwork and any extra assets the CSS references, like summer's `grass.svg`). They are served by the backend at `/_themes/{name}/...` — read from disk per request (etag by mtime), never built, so on-disk edits show on the next page load even in prod.
+
+Themes are searched across several roots, most specific first (see `views.THEME_DIRS`):
+
+1. `themes/` under the current working directory
+2. `<site-dir>/themes/` (the site's own folder, e.g. `localhost/themes/`)
+3. The platform user data dir's `pagerite/themes/` (Linux: `~/.local/share/pagerite/themes/`, Windows: `%LOCALAPPDATA%\pagerite\themes\`)
+4. The platform system data dirs' `pagerite/themes/` (Linux: `/usr/local/share/pagerite/themes/`, `/usr/share/pagerite/themes/`, ...; Windows: `%PROGRAMDATA%\pagerite\themes\`) — several combine
+5. `pagerite/themes/` (built-in package dir, fallback)
+
+The data dirs come from `platformdirs` (`views._data_roots`).
+
+All roots combine: listings are the union of folder names, and each file resolves from the first root that has it. So users can add completely new themes in any root, shadow a built-in file with their own (`<site>/themes/corporate/theme.css`), or extend a built-in theme with extra files (any files the user folder doesn't provide still come from the built-in). Since everything is read per request, new or changed folders take effect without a server restart.
+
+`Data.theme` selects the active theme (empty = none/base only) and the site editor can switch it, choosing from the theme folders found on disk. Vue may add per-component styles on top where needed.
+
+The site editor shows a light/dark-mode indicator in front of each theme name, read from the theme's `color-scheme` declaration in `theme.css`: ☀️ for light-only, 🌙 for dark-only, and 🌓 for themes that support both. The base theme (`none`) is light-only.
+
+Current themes:
+
+- `purple` — dark dusk palette with Fraunces/Literata and a tilted oversized gradient brand.
+- `corporate` — light-first with automatic `prefers-color-scheme` dark mode, Montserrat/Inter and a huge solid brand.
+- `nitro` — racing/HUD style following `prefers-color-scheme` (warm light-grey page, deep violet in dark), Montserrat/Literata, black as an accent only, a straight orange blade under the banner, and an orange racing-tab nav clipped with a bezier `shape()`.
+- `summer` — light playful meadow, one palette sampled from its illustrated `banner.svg` (sky/grass/sun/flower pink), Fraunces/Literata, a tilted gradient brand, flower bullets, and a layered-parallax banner (sun rises, clouds drift, nearer hills move less) with idle animations (swaying flowers, floating clouds, breathing sun glow) wrapped in `prefers-reduced-motion: no-preference`.
+
+## User fonts
+
+Fonts are shared across themes, so user fonts live in `fonts/` folders next to the theme roots (same list minus the built-in fallback: `views.FONT_DIRS`, e.g. `localhost/fonts/` for the site; built-in fonts ship with the Vite build). A font is a folder `fonts/{name}/` with:
+
+- `font.css` — `@font-face` rules with URLs relative to the folder (files served at `/_fonts/{name}/...`, per request like themes), plus a `:root { --font-{name}: "Family Name", serif; }` stack variable so themes and custom CSS reference it like the built-in `--font-*` variables.
+- the font files the CSS references (e.g. `{name}.woff2`).
+
+Every font.css is linked on all pages (after the base stylesheet, before the theme). The site editor's font picker lists user fonts too, with label and serif/sans grouping parsed from the `--font-{name}` stack. Everything is read per request, so new fonts appear without a restart.
+
+## Banner designs
+
+A theme folder may also ship a banner design (`banner.css` + `banner.html` arbitrary markup or `banner.svg`), selectable per page independently of the active theme. Standalone banner designs (no theme.css) ship as:
+
+- `eyes` — a canvas critter in the grass.
+- `stars` — a drifting starfield.
+
+The banner artwork has scroll parallax: pagerite.js sets the `--pry` scroll parameter on `<html>` (event-driven, so it is still when the page is idle), the banner contents drift within their window (with scale overscan so no edge shows), and designs may key their own effects off the same parameter.
+
+## Page transitions
+
+A theme folder may ship a page transition (`transition.css`, `::view-transition*` rules), selected site-wide by `Data.transition` in the site settings and injected as `#pagerite-transition` (after the banner design). Standalone transition designs ship as:
+
+- `cube` — rotating cube (from termotohtori.fi; the block is fragile — do not tweak), mirrored on history-back (`html.nav-back`), crossfading within a section (`html.nav-fade`).
+- `slide` — plain sideways slide, old and new pages moving together; mirrored on history-back, crossfading within a section.
+- `reveal` — clip-path wipe revealing the new page over the stationary old one; mirrored on history-back, crossfading within a section.
+- `crossfade` — plain crossfade for all navigations.
+
+pagerite.js toggles the `nav-back`/`nav-fade` classes on `<html>` around `document.startViewTransition` (skipped under `prefers-reduced-motion`); a transition design keys its `::view-transition*` rules off them as needed.
+
+## Stylesheet order
+
+The backend emits the stylesheets in a fixed order — base (Vite build), theme, banner design, page transition, 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/package.json

@@ -18,8 +18,8 @@
     "@codemirror/view": "^6.43.8",
     "@lezer/highlight": "^1.2.3",
     "codemirror": "^6.0.2",
+    "country-flag-icons": "^1.6.20",
     "overlayscrollbars": "^2.16.0",
-    "paskia": "file:../../paskia/paskia-js",
     "transliteration": "^2.6.1",
     "vue": "^3.5.26",
     "vuedraggable": "^4.1.0"

frontend/src/AnalyticsView.vue

@@ -0,0 +1,500 @@
+<script setup>
+// Analytics viewer rendered as a normal page inside #main. Receives live
+// analytics data over /_api/ws/analytics (admin-gated by the auth proxy) and
+// renders totals, smoothed visit/views curves, a transition map, and recent
+// visit/crawler tables. Read-only.
+// See docs/analytics.md for the data format.
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import {
+  RANGES,
+  rangeWindow,
+  filterRecordsByRange,
+  filterTransitionsByRange,
+  filterViewsByRange,
+} from './analytics/time.js'
+import {
+  calcReadStats,
+  calcTotalViews,
+  copyIp,
+  copyList,
+  formatCount,
+  formatAbuseRows,
+  formatCrawlerRows,
+  formatVisitRows,
+} from './analytics/format.js'
+import TrailLink from './TrailLink.vue'
+import VisitorCell from './VisitorCell.vue'
+import TransitionGraph from './TransitionGraph.vue'
+import VisitorCharts from './VisitorCharts.vue'
+import { VIEW_W } from './analytics/chart.js'
+
+// Same centering margin as the charts, so the totals row's left edge
+// aligns with the chart svg above the natural width.
+const CHART_MARGIN = `max(0px, calc(50% - ${VIEW_W / 2}px))`
+
+const ABUSE_MAX_LINES = 5
+
+const data = ref(null)
+const pageTree = ref(null)
+const error = ref('')
+const now = ref(Date.now())
+let ws = null
+let reconnectTimeout = null
+let timeInterval = null
+
+// The initial range comes from the URL hash (shareable links); without one,
+// it is derived from the first analytics snapshot: day when the recorded
+// history is shorter than 24 h, week otherwise.
+const hashRange = location.hash.slice(1)
+const range = ref(RANGES[hashRange] ? hashRange : 'week')
+let rangePinned = Boolean(RANGES[hashRange])
+
+function connectAnalytics() {
+  if (ws) return
+  const proto = location.protocol === 'https:' ? 'wss:' : 'ws:'
+  ws = new WebSocket(`${proto}//${location.host}/_api/ws/analytics`)
+  ws.onopen = () => { error.value = '' }
+  ws.onmessage = (event) => {
+    try {
+      data.value = JSON.parse(event.data)
+      if (!rangePinned) {
+        rangePinned = true
+        const starts = (data.value?.visits || [])
+          .map((v) => Date.parse(v.start))
+          .filter((t) => !Number.isNaN(t))
+        if (starts.length && Date.now() - Math.min(...starts) < 24 * 3600 * 1000) {
+          range.value = 'day'
+        }
+      }
+    } catch {
+      error.value = 'analytics data could not be loaded'
+    }
+  }
+  ws.onerror = () => {
+    error.value = 'analytics data could not be loaded'
+  }
+  ws.onclose = () => {
+    ws = null
+    reconnectTimeout = setTimeout(connectAnalytics, 2000)
+  }
+}
+
+onMounted(async () => {
+  connectAnalytics()
+  now.value = Date.now()
+  timeInterval = setInterval(() => { now.value = Date.now() }, 1000)
+  // The site tree for the transition map (all pages in menu order). Not
+  // fatal: without it the map just narrows to pages seen in transitions.
+  try {
+    const res = await fetch('/_api/pages')
+    if (res.ok) pageTree.value = await res.json()
+  } catch { /* map just narrows to pages seen in transitions */ }
+})
+
+onUnmounted(() => {
+  if (reconnectTimeout) clearTimeout(reconnectTimeout)
+  if (timeInterval) clearInterval(timeInterval)
+  if (ws) {
+    ws.onclose = null
+    ws.close()
+    ws = null
+  }
+})
+
+const window = computed(() => rangeWindow(range.value))
+
+// All non-chart stats follow the selected range; the charts keep their own
+// range-specific x windows (week overlays previous weeks aligned to Monday).
+const rangeData = computed(() => {
+  if (!data.value) return null
+  const { t0, t1 } = window.value
+  return {
+    ...data.value,
+    transitions: filterTransitionsByRange(data.value.transitions, t0, t1),
+    views: filterViewsByRange(data.value.views, t0, t1),
+    visits: filterRecordsByRange(data.value.visits, t0, t1),
+    crawlers: filterRecordsByRange(data.value.crawlers, t0, t1),
+    abuse: filterRecordsByRange(data.value.abuse, t0, t1),
+  }
+})
+
+const visits = computed(() => rangeData.value?.visits || [])
+const totalViews = computed(() => calcTotalViews(rangeData.value?.views))
+const readStats = computed(() => calcReadStats(visits.value))
+
+// Keep the URL shareable when the range changes.
+watch(range, (r) => {
+  const url = new URL(location.href)
+  url.hash = r
+  history.replaceState(history.state, '', url)
+})
+
+const clients = computed(() => data.value?.clients || {})
+const favicons = computed(() => data.value?.favicons || {})
+const visitRows = computed(() => formatVisitRows(visits.value, clients.value, pageTree.value, now.value))
+const crawlers = computed(() => rangeData.value?.crawlers || [])
+const crawlerRows = computed(() => formatCrawlerRows(crawlers.value, clients.value, pageTree.value, now.value))
+const abuseRows = computed(() => formatAbuseRows(rangeData.value?.abuse || [], clients.value, now.value))
+
+</script>
+
+<template>
+  <div class="analytics-view">
+    <div class="analytics-panel">
+      <header>
+        <h1>Analytics</h1>
+        <nav class="ranges">
+          <button v-for="(r, key) in RANGES" :key="key" type="button"
+                  :class="{ active: range === key }" @click="range = key">
+            {{ r.label }}
+          </button>
+        </nav>
+        <a href="/" class="close" title="home">✕</a>
+      </header>
+      <p v-if="error" class="error">⚠️ {{ error }}</p>
+      <p v-else-if="!data" class="loading">loading…</p>
+      <template v-else>
+        <section class="totals" :style="{ marginLeft: CHART_MARGIN }">
+          <div><strong :title="String(visits.length)">{{ formatCount(visits.length) }}</strong> visits</div>
+          <div><strong :title="String(totalViews)">{{ formatCount(totalViews) }}</strong> page views</div>
+          <div><strong>{{ readStats.avgMinPerVisit }}</strong> min/visit</div>
+          <div><strong>{{ readStats.avgArticleMedianMin }}</strong> min/read</div>
+        </section>
+
+        <VisitorCharts :data="data" :range="range" />
+        <TransitionGraph :data="rangeData" :window="window" :page-tree="pageTree" :favicons="favicons" />
+
+        <section>
+          <h2>Recent visits</h2>
+          <div v-if="visitRows.length" class="visit-table-wrap">
+            <table class="visit-table">
+              <thead>
+                <tr>
+                  <th>trail</th>
+                  <th>visitor</th>
+                  <th class="last-seen">last seen</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(v, i) in visitRows" :key="i">
+                  <td class="trail">
+                    <TrailLink v-if="v.refererStep" :step="v.refererStep" :favicons="favicons" @close="$emit('close')" />
+                    <span v-if="v.utm && v.utm !== '—'" class="utm-tag small muted" :title="v.utmTitle">{{ v.utm }}</span>
+                    <TrailLink v-for="(s, si) in v.trail" :key="si" :step="s" :favicons="favicons" @close="$emit('close')" />
+                  </td>
+                  <VisitorCell
+                    :ip="v.ip"
+                    :ip-display="v.ipDisplay"
+                    :ua="v.ua"
+                    :ua-raw="v.uaRaw"
+                    :country="v.country"
+                    :city="v.city"
+                    :lang="v.lang"
+                    :lang-display="v.langDisplay"
+                    :is-host="v.isHost"
+                  />
+                  <td class="last-seen muted"
+                      :title="v.lastSeenLocal"
+                      @click="copyList(v.lastSeenIso, $event)">{{ v.lastSeen }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <p v-else class="empty">no visits recorded yet</p>
+
+          <div v-if="crawlerRows.length" class="visit-table-wrap">
+            <table class="visit-table">
+              <thead>
+                <tr>
+                  <th>pages crawled</th>
+                  <th>visitor</th>
+                  <th class="last-seen">last seen</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(c, i) in crawlerRows" :key="i">
+                  <td class="trail">
+                    <TrailLink v-for="(s, si) in c.pages" :key="si" :step="s" :count="s.count" @close="$emit('close')" />
+                  </td>
+                  <VisitorCell
+                    :ip="c.ip"
+                    :ip-display="c.ipDisplay"
+                    :ua="c.ua"
+                    :ua-raw="c.uaRaw"
+                    :country="c.country"
+                    :city="c.city"
+                    :lang="c.lang"
+                    :lang-display="c.langDisplay"
+                    :is-host="c.isHost"
+                  />
+                  <td class="last-seen muted"
+                      :title="c.lastSeenLocal"
+                      @click="copyList(c.lastSeenIso, $event)">{{ c.lastSeen }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div v-if="abuseRows.length" class="visit-table-wrap">
+            <table class="visit-table">
+              <thead>
+                <tr>
+                  <th>paths abused</th>
+                  <th>visitor</th>
+                  <th class="last-seen">last seen</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(a, i) in abuseRows" :key="i">
+                  <td class="trail abuse-list clickable-list"
+                      @click="copyList(a.allPaths, $event)">
+                    <div class="abuse-items">
+                      <span v-for="(p, pi) in a.paths.slice(0, ABUSE_MAX_LINES)" :key="pi"
+                            class="inline-item">
+                        <small v-if="p.count > 1" class="muted">{{ formatCount(p.count) }}×</small>{{ p.path }}
+                      </span>
+                      <small v-if="a.paths.length > ABUSE_MAX_LINES" class="muted">+{{ a.paths.length - ABUSE_MAX_LINES }} more</small>
+                    </div>
+                  </td>
+                  <VisitorCell
+                    :ip="a.ip"
+                    :ip-display="a.ipDisplay"
+                    :ua="a.ua"
+                    :ua-raw="a.uaRaw"
+                    :country="a.country"
+                    :city="a.city"
+                    :lang="a.lang"
+                    :lang-display="a.langDisplay"
+                    :is-host="a.isHost"
+                    :variant-count="a.clientCount"
+                  />
+                  <td class="last-seen muted"
+                      :title="a.lastSeenLocal"
+                      @click="copyList(a.lastSeenIso, $event)">{{ a.lastSeen }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </section>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.analytics-view {
+  min-height: 100vh;
+  background: var(--bg, Canvas);
+  color: var(--text, CanvasText);
+}
+
+.analytics-panel {
+  margin: 0;
+  width: 100%;
+  /* Same 1.25rem side spacing as main's article padding. */
+  padding: 1.5rem 1.25rem 4rem;
+  /* Container for cqw-based shrink-to-fit (see .totals). */
+  container-type: inline-size;
+}
+
+.analytics-panel header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.analytics-panel h1 {
+  margin: 0;
+  font-size: 1.4rem;
+}
+
+.ranges {
+  display: flex;
+  gap: 0.25rem;
+  margin-left: auto;
+}
+
+.ranges button {
+  padding: 0.2rem 0.7rem;
+  font: inherit;
+  font-size: 0.9rem;
+  color: var(--muted);
+  background: none;
+  border: 1px solid var(--line);
+  border-radius: 1rem;
+  cursor: pointer;
+}
+
+.ranges button:hover { color: var(--text); }
+
+.ranges button.active {
+  color: var(--text);
+  border-color: var(--accent);
+}
+
+.close {
+  padding: 0 0.3rem;
+  background: none;
+  border: none;
+  color: var(--muted);
+  font-size: 1.2rem;
+  cursor: pointer;
+}
+.close:hover { color: var(--text); }
+
+.analytics-panel h2 {
+  margin: 0 0 0.6rem;
+  font-size: 1rem;
+  color: var(--muted);
+}
+
+.analytics-panel section {
+  margin-top: 1.8rem;
+}
+
+.analytics-view a {
+  color: var(--text);
+  text-decoration: none;
+}
+.analytics-view a:hover { color: var(--accent); }
+
+.analytics-view :deep(.muted) { color: var(--muted); }
+.analytics-view :deep(.small) { font-size: 0.75em; }
+
+/* One line at any width: the gap shrinks first, then the font (the number
+   scales along in em), both following the panel's container width. */
+.totals {
+  display: flex;
+  gap: clamp(0.5rem, 3cqw, 2rem);
+  font-size: clamp(0.6rem, 2.2cqw, 1.1rem);
+  white-space: nowrap;
+}
+.totals strong { font-size: 1.36em; }
+
+.visit-table-wrap {
+  overflow-x: auto;
+}
+
+.visit-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+  line-height: 1.3;
+}
+
+.visit-table th,
+.visit-table td {
+  padding: 0.25rem 0.5rem;
+  border-bottom: 1px solid var(--line);
+  text-align: left;
+  vertical-align: top;
+}
+
+.visit-table th {
+  color: var(--muted);
+  font-weight: normal;
+  text-transform: lowercase;
+  position: sticky;
+  top: 0;
+  background: var(--bg, Canvas);
+}
+
+.visit-table .last-seen {
+  width: 6rem;
+  text-align: right;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.visit-table .trail {
+  max-width: 20rem;
+  overflow-wrap: break-word;
+}
+
+.visit-table .trail a,
+.visit-table .trail-link {
+  display: inline-block;
+  max-width: 8rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+}
+
+.visit-table .trail > * + * {
+  margin-left: 0.5rem;
+}
+
+.analytics-view :deep(.trail-link.error),
+.analytics-view :deep(.trail-link.error:hover) {
+  color: var(--error, #c00);
+}
+
+.visit-table .utm-tag {
+  display: inline-block;
+  max-width: 100%;
+  padding: 0.05rem 0.4rem;
+  border: 1px solid var(--line);
+  border-radius: 0.25rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+}
+
+.visit-table .clickable-list {
+  cursor: pointer;
+  max-width: 22rem;
+}
+
+.visit-table .abuse-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.15rem 0.5rem;
+  align-items: baseline;
+}
+
+.visit-table .inline-item {
+  max-width: 18rem;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: keep-all;
+  hyphens: none;
+}
+
+.visit-table :deep(.clickable-ip),
+.visit-table .clickable-list,
+.visit-table .last-seen {
+  cursor: pointer;
+  position: relative;
+}
+
+.visit-table :deep(.copy-popup) {
+  position: absolute;
+  bottom: calc(100% + 0.25rem);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0.15rem 0.4rem;
+  background: var(--text, CanvasText);
+  color: var(--bg, Canvas);
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.crawler-top-uas {
+  font-size: 0.9rem;
+  margin-bottom: 0.6rem;
+}
+
+.crawler-top-uas strong {
+  color: var(--muted);
+}
+
+.empty, .loading, .error { color: var(--muted); }
+.error { color: var(--error, #c00); }
+</style>

frontend/src/BannerEditor.vue

@@ -4,9 +4,11 @@
 import { computed, onActivated, onMounted, onUnmounted, ref, watch } from 'vue'
 import { EditorView, basicSetup } from 'codemirror'
 import { EditorState } from '@codemirror/state'
+import { keymap } from '@codemirror/view'
+import { indentWithTab } from '@codemirror/commands'
 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 +217,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') {
@@ -259,6 +263,8 @@ onMounted(async () => {
       doc: '',
       extensions: [
         basicSetup,
+        // Tab/Shift-Tab indent and dedent instead of moving focus.
+        keymap.of([indentWithTab]),
         html(),
         cmTheme,
         cmHighlight,

frontend/src/EditorShell.vue

@@ -54,20 +54,16 @@ function onSwitchEvent(ev) {
 // Closing the shell hides it but keeps it mounted (main.js); the tabs stay
 // cached in KeepAlive the whole time, so no state is ever lost until a real
 // page reload. On re-show each active tab re-applies its window title and
-// preview via its own pagerite:editor-shown listener.
-function onKeydown(ev) {
-  if (ev.key === 'Escape' && document.body.classList.contains('editing')) close()
-}
+// preview via its own pagerite:editor-shown listener. No Escape-to-close:
+// it fired too easily by accident (e.g. dismissing an editor popup).
 
 onMounted(() => {
   document.body.dataset.editorMode = activeMode.value
   addEventListener('pagerite:switch-editor', onSwitchEvent)
-  addEventListener('keydown', onKeydown)
 })
 
 onUnmounted(() => {
   removeEventListener('pagerite:switch-editor', onSwitchEvent)
-  removeEventListener('keydown', onKeydown)
 })
 </script>
 

frontend/src/PageEditor.vue

@@ -4,18 +4,23 @@
 // (/_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
-// editing the window scroll is locked and only #main scrolls), keeping the
-// rendered article at the cursor's position. Saving (💾 / Ctrl+S) is explicit
+// survive a disconnect. Editor and article (window) scrolls are linked
+// piecewise-linearly both ways, keyed on the section anchors' data-line
+// (syncWindowToEditor / syncEditorToWindow).
+// 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.
+// state (unsaved text included) also survives closing the shell. The editor
+// always follows the URL: navigating away retargets it to the new page,
+// stashing unsaved text per path (unsavedStash) so returning to the page
+// restores the working draft; stashes clear on save and on real reload.
 import { onActivated, onMounted, onUnmounted, ref, watch } from 'vue'
 import { EditorView, basicSetup } from 'codemirror'
 import { EditorState } from '@codemirror/state'
+import { keymap } from '@codemirror/view'
+import { indentWithTab } from '@codemirror/commands'
 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: '' },
@@ -83,7 +88,7 @@ function requestRender() {
   // No debounce: server-side rendering is fast enough per keystroke.
   if (!view) return
   dirty.value = true
-  send({ type: 'render', path: path.value, markdown: view.state.doc.toString() })
+  send({ type: 'render', path: path.value, title: title.value, markdown: view.state.doc.toString() })
 }
 
 function save() {
@@ -95,6 +100,7 @@ function save() {
     // editor; the save APIs (REST PUT / WS save) never delete on empty.
     return fetch(`/_api/pages/${path.value}`, { method: 'DELETE' }).then((res) => {
       saveError.value = res.ok ? '' : '⚠️ changes could not be saved'
+      if (res.ok) unsavedStash.delete(path.value)
     })
   }
   const msg = {
@@ -113,7 +119,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)
 }
 
@@ -125,11 +133,6 @@ function close() {
   if (dirty.value) loadPlain(path.value)
 }
 
-function insertAtCursor(text) {
-  view.dispatch(view.state.replaceSelection(text))
-  view.focus()
-}
-
 async function uploadImage(file) {
   if (!file) return
   const name = file.name.replace(/[^\w.-]/g, '-')
@@ -137,7 +140,31 @@ async function uploadImage(file) {
   if (res.ok) {
     const { path: stored } = await res.json()
     const alt = name.replace(/\.[^.]+$/, '')
-    insertAtCursor(`![${alt}](${stored})`)
+    // Always include an empty caption (""), cursor inside the quotes: a
+    // lone image with a title renders as a captioned figure, and an empty
+    // caption is as good as none.
+    const insert = `![${alt}](${stored} "")`
+    // Images are never inline: the image always goes on a fresh line of
+    // its own, blank-separated from other content. On a non-empty line —
+    // notably when the cursor sits inside an existing image tag — the new
+    // image goes AFTER that line, never into it.
+    const doc = view.state.doc
+    const line = doc.lineAt(view.state.selection.main.from)
+    const prevNonEmpty = line.number > 1 && doc.line(line.number - 1).text.trim()
+    const nextNonEmpty = line.number < doc.lines && doc.line(line.number + 1).text.trim()
+    let pos, text
+    if (line.text.trim()) {
+      pos = line.to
+      text = '\n' + insert + (nextNonEmpty ? '\n' : '')
+    } else {
+      pos = line.from
+      text = (prevNonEmpty ? '\n' : '') + insert + (nextNonEmpty ? '\n' : '')
+    }
+    view.dispatch({
+      changes: { from: pos, insert: text },
+      selection: { anchor: pos + text.indexOf(insert) + insert.length - 2 },
+    })
+    view.focus()
   }
 }
 
@@ -164,26 +191,165 @@ function wrapInline(mark) {
   view.focus()
 }
 
-function insertCode() {
-  // On an empty line with no selection: a fenced code block, cursor inside.
-  // Otherwise an inline code wrap (toggling).
+// --- Fenced blocks (``` code, ::: containers) ------------------------------
+// Fences are never nested, and both kinds behave identically in the
+// toolbar: clicked with the cursor/selection inside a fence of its kind,
+// the button REMOVES the fence lines and selects the whole content;
+// otherwise it wraps the selection — expanded to whole lines, so partial
+// line selections and a bare cursor on a line count as that line — in a
+// fence, keeping the content selected. A cursor on an empty line inserts
+// an empty fence with the cursor inside.
+
+// Find the fence block around a line range by parity (no nesting): an odd
+// count of marker lines above the range means it is inside a block. The
+// range's own first/last lines may be the fence lines themselves.
+function enclosingFence(fromNo, toNo, markerRe) {
+  const doc = view.state.doc
+  const isFence = (n) => markerRe.test(doc.line(n).text.trimStart())
+  let above = 0
+  for (let n = 1; n < fromNo; n++) if (isFence(n)) above++
+  let openNo = null
+  if (above % 2 === 1) {
+    for (let n = fromNo - 1; n >= 1; n--) {
+      if (isFence(n)) { openNo = n; break }
+    }
+  } else if (isFence(fromNo)) {
+    openNo = fromNo
+  }
+  if (openNo === null) return null
+  for (let n = Math.max(toNo, openNo + 1); n <= doc.lines; n++) {
+    if (isFence(n)) return { open: doc.line(openNo), close: doc.line(n) }
+  }
+  return null
+}
+
+// Remove the fence block enclosing the selection, selecting its whole
+// content. Returns true when there was one.
+function removeEnclosingFence(markerRe) {
+  const doc = view.state.doc
   const { from, to } = view.state.selection.main
-  const line = view.state.doc.lineAt(from)
-  if (from === to && !line.text.trim()) {
+  const fence = enclosingFence(doc.lineAt(from).number, doc.lineAt(to).number, markerRe)
+  if (!fence) return false
+  const { open, close } = fence
+  // One atomic replace: fences out, content stays where it lands.
+  const hasAfter = close.to < doc.length
+  const end = hasAfter ? close.to + 1 : doc.length
+  const content = hasAfter
+    ? doc.sliceString(open.to + 1, close.from) // trailing newline kept
+    : doc.sliceString(open.to + 1, Math.max(open.to + 1, close.from - 1))
+  const head = content.endsWith('\n') ? content.length - 1 : content.length
+  view.dispatch({
+    changes: { from: open.from, to: end, insert: content },
+    selection: { anchor: open.from, head: open.from + Math.max(0, head) },
+  })
+  view.focus()
+  return true
+}
+
+// Wrap the selection — expanded to whole lines (a bare cursor counts as
+// its line) — in a fence, cursor left at the end of the opener line. On
+// an empty line with no selection, insert an empty fence with the cursor
+// at the END of the opener line (no blank content line): for ``` a
+// language word can be typed right away, for ::: the container name
+// (aside) can be rewritten.
+function wrapInFence(openText, closeText) {
+  const doc = view.state.doc
+  const { from, to } = view.state.selection.main
+  const fromLine = doc.lineAt(from)
+  if (from === to && !fromLine.text.trim()) {
     view.dispatch({
-      changes: { from: line.from, to: line.to, insert: '```\n\n```' },
-      selection: { anchor: line.from + 4 },
+      changes: { from: fromLine.from, to: fromLine.to, insert: `${openText}\n${closeText}` },
+      selection: { anchor: fromLine.from + openText.length },
     })
-    view.focus()
+  } else {
+    const bf = fromLine.from
+    // A selection ending exactly at a line start excludes that (possibly
+    // empty) line — only the selected lines go inside the fence.
+    let lastLine = doc.lineAt(to)
+    if (to === lastLine.from && to > from) lastLine = doc.line(lastLine.number - 1)
+    const bt = lastLine.to
+    view.dispatch({
+      changes: [
+        { from: bt, insert: `\n${closeText}` },
+        { from: bf, insert: `${openText}\n` },
+      ],
+      // Cursor at the end of the opening fence line, selection cleared —
+      // a language word (or container name) can be typed right away.
+      selection: { anchor: bf + openText.length },
+    })
+  }
+  view.focus()
+}
+
+function insertCode() {
+  // Toggling, selection-preserving code helper:
+  // - inside a fenced block: remove the fences, content selected (above)
+  // - selection covering whole line(s) or spanning lines: fenced block
+  // - empty line, no selection: a fenced block, cursor inside
+  // - otherwise an inline wrap; the inner text stays selected both ways,
+  //   and a repeated click removes the backtick run around it
+  const state = view.state
+  const doc = state.doc
+  const { from, to } = state.selection.main
+  const fromLine = doc.lineAt(from)
+  const toLine = doc.lineAt(to)
+  const inline = from !== to && fromLine.number === toLine.number
+    && !(from === fromLine.from && to === toLine.to)
+  if (!inline && removeEnclosingFence(/^```/)) return
+  if (from === to) {
+    if (!fromLine.text.trim()) wrapInFence('```', '```')
+    else wrapInline('`')
     return
   }
-  wrapInline('`')
+  if (!inline) {
+    wrapInFence('```', '```')
+    return
+  }
+  // Inline: a matching backtick run on both sides unwraps; otherwise wrap
+  // (double ticks when the text itself contains a backtick).
+  let l = 0
+  while (l < from && doc.sliceString(from - l - 1, from - l) === '`') l++
+  let r = 0
+  while (doc.sliceString(to + r, to + r + 1) === '`') r++
+  if (l > 0 && l === r) {
+    view.dispatch({
+      changes: [{ from: to, to: to + r }, { from: from - l, to: from }],
+      selection: { anchor: from - l, head: to - l },
+    })
+  } else {
+    const mark = doc.sliceString(from, to).includes('`') ? '``' : '`'
+    view.dispatch({
+      changes: { from, to, insert: mark + doc.sliceString(from, to) + mark },
+      selection: { anchor: from + mark.length, head: to + mark.length },
+    })
+  }
+  view.focus()
 }
 
 function insertLink() {
-  // Selected text becomes the link label — or the URL if it looks like one.
+  // Toggle: with the cursor or selection anywhere inside an existing
+  // [label](url) on this line, unwrap it (the label stays selected).
+  // Otherwise the selected text becomes the label — or the URL if it
+  // looks like one.
   const { from, to } = view.state.selection.main
-  const text = view.state.sliceDoc(from, to)
+  const doc = view.state.doc
+  const line = doc.lineAt(from)
+  const linkRe = /\[([^\]]*)\]\(([^)]*)\)/g
+  let m
+  while ((m = linkRe.exec(line.text))) {
+    if (line.text[m.index - 1] === '!') continue // image, not a link
+    const start = line.from + m.index
+    if (from >= start && to <= start + m[0].length) {
+      const label = m[1]
+      view.dispatch({
+        changes: { from: start, to: start + m[0].length, insert: label },
+        selection: { anchor: start, head: start + label.length },
+      })
+      view.focus()
+      return
+    }
+  }
+  const text = doc.sliceString(from, to)
   const isUrl = /^https?:\/\/\S+$/.test(text)
   const insert = isUrl ? `[](${text})` : `[${text}]()`
   const urlStart = from + insert.length - 1 // inside the parens
@@ -194,30 +360,228 @@ function insertLink() {
   view.focus()
 }
 
+// ::: aside container, toggling like code fences (shared machinery above):
+// inside one it is removed (content selected); otherwise the selection —
+// or the cursor's line — becomes the content, selected. The placement
+// buttons below work on the ::: line itself.
+function insertAside() {
+  if (!removeEnclosingFence(/^:::/)) wrapInFence('::: aside', ':::')
+}
+
+// Block placement classes: .left/.right float, .wide full bleed, .margin
+// a margin note; plus the text size classes .small/.large/.huge. The
+// button toggles the class in the brace attributes of the block at the
+// cursor (figure/image line, paragraph, code fence); classes within one
+// group are mutually exclusive. ::: containers are the exception: a
+// placement class replaces the container name (::: margin, etc.), a size
+// class takes braces (::: aside {.small}). A blank cursor line targets
+// the block above (a trailing {...} line applies there).
+const PLACEMENTS = ['left', 'right', 'wide', 'margin']
+const SIZES = ['small', 'large', 'huge']
+
+// Toggle .cls in a line's trailing brace attributes, preserving the other
+// tokens (language, #id, other groups' classes) and the original spacing;
+// returns the new text.
+function toggleAttrClass(text, cls, group) {
+  const m = text.match(/(\s*)\{([^{}]*)\}(\s*)$/)
+  if (!m) {
+    // A lone image takes the braces directly attached, others spaced.
+    const tight = /^\s*!\[[^\]]*\]\([^)]*\)$/.test(text.trimEnd()) ? '' : ' '
+    return text.trimEnd() + tight + `{.${cls}}`
+  }
+  const tokens = m[2].trim() ? m[2].trim().split(/\s+/) : []
+  const tok = `.${cls}`
+  let next
+  if (tokens.includes(tok)) {
+    next = tokens.filter((t) => t !== tok)
+  } else {
+    next = tokens.filter((t) => !group.some((c) => t === `.${c}`))
+    next.push(tok)
+  }
+  const base = text.slice(0, m.index).trimEnd()
+  return next.length ? base + (m[1] || ' ') + `{${next.join(' ')}}` : base
+}
+
+// Locate where block classes live for the block at the cursor:
+// { line } — trailing brace attributes on that line (paragraph, image,
+// fence info line); { container } — a ::: container's opener line; or
+// { fence, attrLine } — a code fence, whose classes live on a line of
+// their own after the closing fence (attrLine null when not written yet).
+// A blank cursor line targets the block above. Shared by the class
+// toggles and the pickers' current-class indicator.
+function classTarget() {
+  const doc = view.state.doc
+  let line = doc.lineAt(view.state.selection.main.head)
+  while (!line.text.trim() && line.number > 1) line = doc.line(line.number - 1)
+  if (!line.text.trim()) return null
+  // ``` fence context: an odd count of fence lines above means the cursor
+  // is inside the fence or on its closing fence.
+  let open = false
+  for (let n = 1; n < line.number; n++) {
+    if (doc.line(n).text.trimStart().startsWith('```')) open = !open
+  }
+  if (open) {
+    let n = line.number
+    while (n <= doc.lines && !doc.line(n).text.trimStart().startsWith('```')) n++
+    if (n > doc.lines) return null // unclosed fence — nothing to attach to
+    const fence = doc.line(n)
+    const after = fence.number < doc.lines ? doc.line(fence.number + 1) : null
+    return {
+      fence,
+      attrLine: after && /^\s*\{[^{}]*\}\s*$/.test(after.text) ? after : null,
+    }
+  }
+  // ::: container context: same parity (containers are not nested) — on
+  // the opener, inside, or on the closing fence.
+  let above = 0
+  for (let n = 1; n < line.number; n++) {
+    if (doc.line(n).text.trimStart().startsWith(':::')) above++
+  }
+  if (above % 2 === 1) {
+    for (let n = line.number - 1; n >= 1; n--) {
+      if (doc.line(n).text.trimStart().startsWith(':::')) {
+        return { container: doc.line(n) }
+      }
+    }
+    return null
+  }
+  if (/^\s*:::\s*\w/.test(line.text)) return { container: line }
+  return { line }
+}
+
+function togglePlacement(cls, group = PLACEMENTS) {
+  const t = classTarget()
+  if (!t) {
+    view.focus()
+    return
+  }
+  let line
+  if (t.container) {
+    // Placement replaces the container name (clicking the active one
+    // reverts to aside); sizes and other classes take brace attributes.
+    if (PLACEMENTS.includes(cls)) {
+      const m = t.container.text.match(/^(\s*:::\s*)(\w+)/)
+      const name = m[2] === cls ? 'aside' : cls
+      view.dispatch({
+        changes: { from: t.container.from, to: t.container.to, insert: `${m[1]}${name}` },
+      })
+      view.focus()
+      return
+    }
+    line = t.container
+  } else if (t.fence) {
+    if (!t.attrLine) {
+      view.dispatch({ changes: { from: t.fence.to, insert: `\n{.${cls}}` } })
+      view.focus()
+      return
+    }
+    line = t.attrLine
+  } else {
+    line = t.line
+  }
+  const text = toggleAttrClass(line.text, cls, group)
+  if (text !== line.text) {
+    view.dispatch({ changes: { from: line.from, to: line.to, insert: text } })
+  }
+  view.focus()
+}
+
+// The class set of the block at the cursor (names without the dot): brace
+// tokens, plus the container name when it is a placement (::: margin).
+function braceClasses(text) {
+  const m = text.match(/\{([^{}]*)\}\s*$/)
+  if (!m) return new Set()
+  return new Set(
+    m[1].split(/\s+/).filter((tok) => tok.startsWith('.')).map((tok) => tok.slice(1)),
+  )
+}
+
+function currentClasses() {
+  const t = classTarget()
+  if (!t) return new Set()
+  if (t.container) {
+    const s = braceClasses(t.container.text)
+    const name = t.container.text.match(/^\s*:::\s*(\w+)/)?.[1]
+    if (PLACEMENTS.includes(name)) s.add(name)
+    return s
+  }
+  if (t.fence) return t.attrLine ? braceClasses(t.attrLine.text) : new Set()
+  return braceClasses(t.line.text)
+}
+
 // Table size picker: a hover grid popup (cols × rows) under the toolbar.
 const tablePicker = ref(false)
 const tableSize = ref({ cols: 0, rows: 0 })
 const TABLE_MAX_COLS = 8
 const TABLE_MAX_ROWS = 6
 
+// Class pickers: popup listing the block class toggles (placement ↔︎,
+// text size AA), closed after applying. The block's current class of the
+// group is marked; choosing "normal" (or the current class) removes it.
+const classPicker = ref(null) // 'place' | 'size' | null
+const activeClasses = ref(new Set())
+
+function openClassPicker(which) {
+  classPicker.value = classPicker.value === which ? null : which
+  if (classPicker.value) activeClasses.value = currentClasses()
+}
+
+function isClassActive(cls, group) {
+  return cls === 'normal'
+    ? !group.some((c) => activeClasses.value.has(c))
+    : activeClasses.value.has(cls)
+}
+
+function applyClass(cls, group) {
+  if (cls === 'normal') {
+    const cur = group.find((c) => activeClasses.value.has(c))
+    if (cur) togglePlacement(cur, group) // present → toggles off
+  } else {
+    togglePlacement(cls, group)
+  }
+  classPicker.value = null
+}
+
 function insertTable(cols, rows) {
   // A GFM table on its own blank-separated block, first header cell
-  // selected.
-  const { from, to } = view.state.selection.main
-  const before = from > 0 && view.state.doc.sliceString(from - 1, from) !== '\n' ? '\n\n' : ''
+  // selected. Like images, a table is block-level: on a fresh line of its
+  // own — a cursor on a non-empty line (e.g. inside an image tag) inserts
+  // after that line, never into it.
+  const doc = view.state.doc
+  const line = doc.lineAt(view.state.selection.main.from)
+  const prevNonEmpty = line.number > 1 && doc.line(line.number - 1).text.trim()
+  const nextNonEmpty = line.number < doc.lines && doc.line(line.number + 1).text.trim()
   const row = (cells) => `| ${cells.join(' | ')} |`
-  const table = `${before}${row(Array(cols).fill('column'))}\n`
+  const grid = `${row(Array(cols).fill('column'))}\n`
     + `${row(Array(cols).fill('---'))}\n`
-    + `${Array(rows).fill(row(Array(cols).fill(''))).join('\n')}\n`
+    + `${Array(rows).fill(row(Array(cols).fill(''))).join('\n')}`
+  let pos, text
+  if (line.text.trim()) {
+    pos = line.to
+    text = '\n' + grid + (nextNonEmpty ? '\n' : '')
+  } else {
+    pos = line.from
+    text = (prevNonEmpty ? '\n' : '') + grid + (nextNonEmpty ? '\n' : '')
+  }
+  const anchor = pos + text.indexOf(grid) + 2
   view.dispatch({
-    changes: { from, to, insert: table },
-    selection: { anchor: from + before.length + 2, head: from + before.length + 8 },
+    changes: { from: pos, insert: text },
+    selection: { anchor, head: anchor + 6 },
   })
   tablePicker.value = false
   view.focus()
 }
 
+// Unsaved edits survive navigation within the session: leaving a page
+// stashes its working text here, returning restores it (the server doc
+// still arrives, for title/published and as the base underneath).
+// Entries clear on save and on real reload (the shell is in-memory only).
+const unsavedStash = new Map()
+
 function openPath(p) {
+  if (dirty.value && path.value && p !== path.value) {
+    unsavedStash.set(path.value, view.state.doc.toString())
+  }
   path.value = p
   send({ type: 'open', path: p })
 }
@@ -238,25 +602,24 @@ function runScripts(root) {
   }
 }
 
-function previewIntoArticle(html, hasH1) {
+function previewIntoArticle(html, multicol) {
   const article = document.querySelector('#main article')
   if (!article) return
-  const h1 = article.querySelector('h1')
-  const body = article.querySelector('.body')
-  // The edit pen may be tucked inside an h1 (title or markdown-owned);
-  // detach it before textContent/innerHTML wipes destroy the element.
-  // pagerite.js re-places it into the first visible h1 on pagerite:preview.
+  // The server render owns the article completely — the injected title h1,
+  // the column layout (.multicol on the article, the .colseg/.cols
+  // segments) — so the whole article content swaps as one. Only the edit
+  // pen and the category cards survive: detach them before innerHTML wipes
+  // them. pagerite.js re-places the pen into the first visible h1 on
+  // pagerite:preview.
+  article.classList.toggle('multicol', multicol)
   const pen = article.querySelector('button.edit-link')
-  if (pen && (h1?.contains(pen) || body?.contains(pen))) article.prepend(pen)
-  if (h1) {
-    h1.style.display = hasH1 ? 'none' : ''
-    h1.textContent = title.value
-  }
-  if (body) {
-    body.innerHTML = html
-    runScripts(body)
-    dispatchEvent(new CustomEvent('pagerite:preview'))
-  }
+  if (pen) pen.remove()
+  const cards = article.querySelector(':scope > .cards')
+  if (cards) cards.remove()
+  article.innerHTML = html
+  if (cards) article.append(cards)
+  runScripts(article)
+  dispatchEvent(new CustomEvent('pagerite:preview'))
 }
 
 function onMessage(ev) {
@@ -264,15 +627,21 @@ function onMessage(ev) {
   if (msg.type === 'doc' && msg.path === path.value) {
     title.value = msg.title
     published.value = msg.published
-    setDocument(msg.markdown)
+    // Restore stashed unsaved edits over the server doc when returning
+    // to a page left dirty.
+    const stashed = unsavedStash.get(msg.path)
+    setDocument(stashed ?? msg.markdown)
+    dirty.value = stashed != null
     requestRender()
-    dirty.value = false // just loaded from the server, nothing unsaved
+    // A section pen's target line survives the open/path-switch here.
+    consumePendingLine()
   } else if (msg.type === 'html' && msg.path === path.value) {
-    previewIntoArticle(msg.html, msg.has_h1)
+    previewIntoArticle(msg.html, msg.multicol)
   } else if (msg.type === 'saved') {
     saveError.value = ''
     pendingSave = null
     dirty.value = false
+    unsavedStash.delete(path.value)
     savedResolve?.()
     savedResolve = null
   } else if (msg.type === 'error') {
@@ -304,26 +673,163 @@ function onKeydown(ev) {
 function onEditorShown() {
   if (document.body.dataset.editorMode !== 'page') return
   updateWindowTitle()
-  if (dirty.value) requestRender()
+  // Always follow the URL: if the user navigated while the editor was
+  // hidden or on another tab, retarget (discarding unsaved text — its
+  // preview page is gone); otherwise restore the working preview.
+  const p = normPath(props.pagePath)
+  if (p !== path.value) openPath(p)
+  else if (dirty.value) requestRender()
+  consumePendingLine()
 }
 
-function syncScroll() {
-  // Editor scroll drives the article: keep the rendered page at the same
-  // proportional position as the cursor area in the editor. While editing
-  // the window scroll is locked and #main is the scrolling element.
+// Piecewise-linear scroll sync between the CodeMirror scroller and the
+// window (the article's scroller, also while editing), keyed on the
+// section anchors: the backend tags anchored h1/h2 headings with
+// data-line (markdown source line), so each heading pairs a document
+// position with a page position, and positions interpolate linearly
+// between neighbouring headings. Endpoints are the article top (line 1)
+// and the document bottom (last line).
+//
+// Editor → page follows the CURSOR, not the editor viewport: the cursor's
+// fractional line (soft-wrap included, so moving inside a wrapped
+// paragraph tracks smoothly) maps to its page position. The page only
+// scrolls when that position leaves the viewport (with an edge margin),
+// and then just enough to bring it back inside — cursor movement within
+// view never drags the page along. Only cursor/selection changes drive
+// this direction: editor wheel-scrolling repositions the text, not the
+// page, which removes the scroll→scroll echo entirely.
+// Page → editor anchors a viewport fraction that grows with page progress
+// (0 = heading at viewport top when the page is at the top, 1 = viewport
+// bottom at the page's end), so both document ends line up exactly.
+//
+// Both directions apply instantly (never smooth — a smooth window scroll
+// feeds 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 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.
+
+// [markdown line (1-based), window Y] control points, ascending in both.
+function syncPoints() {
+  const article = document.querySelector('#main article')
+  if (!article || !view) return null
+  const pts = [[1, article.getBoundingClientRect().top + scrollY]]
+  for (const h of article.querySelectorAll('[data-line]')) {
+    pts.push([+h.dataset.line + 1, h.getBoundingClientRect().top + scrollY])
+  }
+  pts.push([view.state.doc.lines, document.documentElement.scrollHeight])
+  return pts.sort((a, b) => a[0] - b[0])
+}
+
+// Piecewise-linear map of v from column `from` to column `to`, clamped to
+// the segment ends.
+function interp(pts, v, from, to) {
+  let i = 1
+  while (i < pts.length - 1 && pts[i][from] < v) i++
+  const [a0, b0] = [pts[i - 1][from], pts[i - 1][to]]
+  const [a1, b1] = [pts[i][from], pts[i][to]]
+  const t = a1 > a0 ? (v - a0) / (a1 - a0) : 0
+  return b0 + Math.max(0, Math.min(1, t)) * (b1 - b0)
+}
+
+// Editor scroller top showing the fractional markdown line.
+function editorTopFor(line) {
+  const scroller = view.scrollDOM
+  const max = Math.max(0, scroller.scrollHeight - scroller.clientHeight)
+  if (line >= view.state.doc.lines) return max
+  const n = Math.max(1, Math.floor(line))
+  const block = view.lineBlockAt(view.state.doc.line(n).from)
+  return Math.min(max, block.top + (line - n) * block.height)
+}
+
+//: Edge margin (window height fraction) for cursor-driven page scrolls.
+const CURSOR_MARGIN = 1 / 8
+
+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)
-    syncingScroll = false
+    const pts = syncPoints()
+    if (pts) {
+      // Scroll the page only when the cursor's page position leaves the
+      // viewport (minus an edge margin): while it stays visible the page
+      // keeps its position, so cursor movement does not drag the page
+      // along; crossing an edge scrolls just enough to bring it back.
+      const pos = view.state.selection.main.head
+      const coords = view.coordsAtPos(pos)
+      if (coords) {
+        const scroller = view.scrollDOM
+        const block = view.lineBlockAt(pos)
+        const docY = coords.top - scroller.getBoundingClientRect().top + scroller.scrollTop
+        const frac = block.height > 0
+          ? Math.max(0, Math.min(1, (docY - block.top) / block.height))
+          : 0
+        const line = view.state.doc.lineAt(pos).number + frac
+        const y = interp(pts, line, 0, 1)
+        const margin = CURSOR_MARGIN * innerHeight
+        let target = null
+        if (y < scrollY + margin) target = y - margin
+        else if (y > scrollY + innerHeight - margin) target = y - innerHeight + margin
+        if (target !== null && Math.abs(scrollY - target) > 1) {
+          scrollTo({ top: Math.max(0, target), behavior: 'instant' })
+        }
+      }
+    }
+    requestAnimationFrame(() => { syncingScroll = false })
   })
 }
 
+function syncEditorToWindow() {
+  if (syncingScroll || !view) return
+  syncingScroll = true
+  requestAnimationFrame(() => {
+    const pts = syncPoints()
+    if (pts) {
+      // Anchor fraction grows with page progress: the mapped line sits at
+      // the viewport top when the page is at its top, at the bottom when
+      // scrolled all the way down.
+      const pageMax = Math.max(0, document.documentElement.scrollHeight - innerHeight)
+      const a = pageMax > 0 ? scrollY / pageMax : 0
+      const line = interp(pts, scrollY + a * innerHeight, 1, 0)
+      const scroller = view.scrollDOM
+      const top = editorTopFor(line) - a * scroller.clientHeight
+      const max = Math.max(0, scroller.scrollHeight - scroller.clientHeight)
+      const clamped = Math.max(0, Math.min(max, top))
+      if (Math.abs(scroller.scrollTop - clamped) > 1) scroller.scrollTop = clamped
+    }
+    requestAnimationFrame(() => { syncingScroll = false })
+  })
+}
+
+// Jump both views to a markdown source line (0-based, as carried by the
+// section pens' data-line / window.__pageriteEditLine).
+function scrollToSourceLine(line) {
+  if (!view || line == null) return
+  const n = Math.max(1, Math.min(line + 1, view.state.doc.lines))
+  const pos = view.state.doc.line(n).from
+  view.dispatch({
+    selection: { anchor: pos },
+    effects: EditorView.scrollIntoView(pos, { y: 'start', yMargin: 8 }),
+  })
+  const h = document.querySelector(`#main article [data-line="${line}"]`)
+  if (h) scrollTo({ top: h.getBoundingClientRect().top + scrollY, behavior: 'instant' })
+}
+
+// A section pen carries its line in window.__pageriteEditLine; consume it
+// once the document is here (fresh open, path switch, re-shown shell).
+function consumePendingLine() {
+  const line = window.__pageriteEditLine
+  if (line == null) return
+  delete window.__pageriteEditLine
+  scrollToSourceLine(line)
+}
+
 function connect() {
   ws = new WebSocket(
     `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/_api/ws/editor`,
@@ -359,11 +865,17 @@ onMounted(() => {
       doc: '',
       extensions: [
         basicSetup,
+        // Tab/Shift-Tab indent and dedent instead of moving focus.
+        keymap.of([indentWithTab]),
         markdown(),
         cmTheme,
         cmHighlight,
         EditorView.lineWrapping, // Markdown lines are long: soft-wrap them
-        EditorView.updateListener.of((u) => { if (u.docChanged) requestRender() }),
+        EditorView.updateListener.of((u) => {
+          if (u.docChanged) requestRender()
+          // Cursor moves (typing included) drive the page scroll sync.
+          if (u.selectionSet) syncWindowToEditor()
+        }),
         EditorView.domEventHandlers({
           paste(ev) {
             // Paste an image straight into the article: upload + insert
@@ -379,7 +891,12 @@ onMounted(() => {
     }),
     parent: editorEl.value,
   })
-  view.scrollDOM.addEventListener('scroll', syncScroll)
+  // 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.
+  // The other direction is cursor-driven (updateListener above), never
+  // scroll-driven — an editor scroll moves text, not the page.
+  addEventListener('scroll', syncEditorToWindow, { passive: true })
+  addEventListener('resize', syncEditorToWindow)
   // Opening the editor means you want to write: start focused.
   view.focus()
   window.__pageritePageEditor = {
@@ -389,6 +906,8 @@ onMounted(() => {
   }
   addEventListener('keydown', onKeydown)
   addEventListener('pagerite:editor-shown', onEditorShown)
+  // A section pen clicked while the page editor is already open.
+  addEventListener('pagerite:edit-section', consumePendingLine)
 })
 
 onUnmounted(() => {
@@ -399,8 +918,11 @@ onUnmounted(() => {
   }
   view?.destroy()
   delete window.__pageritePageEditor
+  removeEventListener('scroll', syncEditorToWindow)
+  removeEventListener('resize', syncEditorToWindow)
   removeEventListener('keydown', onKeydown)
   removeEventListener('pagerite:editor-shown', onEditorShown)
+  removeEventListener('pagerite:edit-section', consumePendingLine)
 })
 </script>
 
@@ -428,17 +950,59 @@ onUnmounted(() => {
       >💾</button>
     </header>
     <div class="format-bar">
-      <button type="button" title="bold" @click="wrapInline('**')"><b>B</b></button>
-      <button type="button" title="italic" @click="wrapInline('*')"><i>I</i></button>
-      <button type="button" title="code (empty line: code block)" @click="insertCode"><code>&lt;/&gt;</code></button>
-      <button type="button" title="link" @click="insertLink">🔗</button>
+      <button type="button" class="code-btn" title="code — inline wrap, or a fenced block for line-spanning selections; click again to unwrap" @click="insertCode"><code>&lt;/&gt;</code></button>
+      <button type="button" title="link (toggle: click inside a link to unwrap it)" @click="insertLink">🔗︎</button>
       <button
         type="button"
         title="table"
         :class="{ active: tablePicker }"
         @click="tablePicker = !tablePicker"
-      >▦</button>
-      <button type="button" title="insert image (upload) — pasting works too" @click="fileInput.click()">🖼️</button>
+      >⊞</button>
+      <button type="button" title="insert image (upload) — pasting works too" @click="fileInput.click()">🖼︎</button>
+      <button type="button" title="aside box (::: aside) — wraps the selection or the cursor's line; clicked inside one, removes it" @click="insertAside">◧</button>
+      <span class="picker">
+        <button
+          type="button"
+          title="block placement class"
+          :class="{ active: classPicker === 'place' }"
+          @click="openClassPicker('place')"
+        >↔︎</button>
+        <span v-if="classPicker === 'place'" class="picker-pop">
+          <button
+            v-for="c in ['normal', ...PLACEMENTS]"
+            :key="c"
+            type="button"
+            :class="{ active: isClassActive(c, PLACEMENTS), normal: c === 'normal' }"
+            :title="c === 'normal'
+              ? 'remove the block\'s placement class'
+              : `${c} on the block at the cursor`"
+            @click="applyClass(c, PLACEMENTS)"
+          >{{ c }}</button>
+        </span>
+      </span>
+      <button type="button" title="bold" @click="wrapInline('**')"><b>B</b></button>
+      <button type="button" title="italic" @click="wrapInline('*')"><i>i</i></button>
+      <span class="picker">
+        <button
+          type="button"
+          title="text size class"
+          class="aa"
+          :class="{ active: classPicker === 'size' }"
+          @click="openClassPicker('size')"
+        ><span>A</span>A</button>
+        <span v-if="classPicker === 'size'" class="picker-pop">
+          <button
+            v-for="c in ['small', 'normal', 'large', 'huge']"
+            :key="c"
+            type="button"
+            :class="{ active: isClassActive(c, SIZES), normal: c === 'normal' }"
+            :title="c === 'normal'
+              ? 'remove the block\'s size class'
+              : `${c} on the block at the cursor`"
+            @click="applyClass(c, SIZES)"
+          >{{ c }}</button>
+        </span>
+      </span>
       <div v-if="tablePicker" class="table-picker" @mouseleave="tableSize = { cols: 0, rows: 0 }">
         <div class="tp-grid" :style="{ gridTemplateColumns: `repeat(${TABLE_MAX_COLS}, 1fr)` }">
           <button
@@ -538,9 +1102,9 @@ onUnmounted(() => {
 
 .format-bar button {
   min-width: 1.7rem;
-  padding: 0.15rem 0.3rem;
+  padding: 0.05rem 0.2rem;
   font: inherit;
-  font-size: 0.85rem;
+  font-size: 1.05rem;
   color: var(--muted);
   background: none;
   border: 1px solid transparent;
@@ -548,10 +1112,58 @@ onUnmounted(() => {
   cursor: pointer;
 }
 
+/* Hover and selected (active) states: text color alone, no borders. */
 .format-bar button:hover,
 .format-bar button.active {
   color: var(--text);
-  border-color: var(--line);
+}
+
+/* The glyphs are small relative to the button boxes; scaling them up
+   (transform, so layout is unaffected) fills the empty space between
+   symbols. The code symbol is larger than the rest, so it scales less. */
+.format-bar > button,
+.picker > button {
+  transform: scale(1.5);
+}
+
+.format-bar > button.code-btn {
+  transform: scale(1.25);
+}
+
+/* Class pickers: a button opening a small popup of class toggles (like
+   the table picker), anchored under its own button. */
+.picker {
+  position: relative;
+  display: flex;
+}
+
+/* The size icon: two capital As at different sizes. */
+.aa span {
+  font-size: 0.65em;
+}
+
+.picker-pop {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 20;
+  display: flex;
+  gap: 0.15rem;
+  padding: 0.3rem;
+  background: var(--bg);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px #0004;
+}
+
+.picker-pop button {
+  font-family: var(--font-code, monospace);
+  font-size: 0.85rem;
+}
+
+/* "normal" (the reset entry) reads as text, not a class name. */
+.picker-pop button.normal {
+  font-family: inherit;
 }
 
 /* Table size picker: hover grid popup below the format bar; the hovered
@@ -605,8 +1217,8 @@ 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. */
+   a slight margin to the panel edges. Wheel scroll stays in the editor
+   (overscroll-behavior) instead of double-scrolling the page. */
 .editor {
   flex: 1;
   min-width: 0;

frontend/src/SiteEditor.vue

@@ -5,10 +5,12 @@
 import { computed, onActivated, onMounted, onUnmounted, ref, watch } from 'vue'
 import { EditorView, basicSetup } from 'codemirror'
 import { EditorState } from '@codemirror/state'
+import { keymap } from '@codemirror/view'
+import { indentWithTab } from '@codemirror/commands'
 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: '' },
@@ -56,7 +58,18 @@ const brand = ref('')
 const theme = ref('')
 // Theme options come from the backend (theme folders on disk, see GET
 // /_api/settings), so added themes need no frontend changes.
-const themeOptions = ref([{ value: '', label: 'none' }])
+const themeOptions = ref([{ value: '', label: '☀️ none' }])
+// Page transition (cube, crossfade, ...): a design folder with
+// transition.css under pagerite/themes/, injected as #pagerite-transition.
+const transition = ref('cube')
+const transitionOptions = ref([])
+
+// Mode icons match the ones used in the Paskia auth frontend.
+const MODE_ICONS = { light: '☀️', dark: '🌙', both: '🌓' }
+
+function themeLabel(t) {
+  return `${MODE_ICONS[t.mode] || MODE_ICONS.light} ${t.name}`
+}
 
 async function loadSettings() {
   try {
@@ -69,8 +82,18 @@ async function loadSettings() {
     customCss.value = s.custom_css || ''
     favicon.value = s.favicon || ''
     themeOptions.value = [
-      { value: '', label: 'none' },
-      ...(s.themes || []).map((t) => ({ value: t, label: t })),
+      { value: '', label: `${MODE_ICONS.light} none` },
+      ...(s.themes || []).map((t) => ({ value: t.name, label: themeLabel(t) })),
+    ]
+    transition.value = s.transition || 'cube'
+    transitionOptions.value = s.transitions || []
+    fontOptions.value = [
+      ...BASE_FONT_OPTIONS,
+      ...(s.fonts || []).map((f) => ({
+        value: `var(--font-${f.name})`,
+        label: f.label,
+        serif: f.serif,
+      })),
     ]
   } catch { /* keep default */ }
 }
@@ -110,6 +133,7 @@ async function uploadFavicon(file) {
     const { path: url } = await res.json()
     favicon.value = url
     applyFavicon(url)
+    dropPageCache()
   } else {
     saveError.value = `⚠️ ${await errorDetail(res)}`
   }
@@ -229,11 +253,13 @@ async function saveSettings(opts = {}) {
       theme: theme.value,
       custom_css: customCss.value,
       brand_html: brandHtml.value,
+      transition: transition.value,
       ...opts,
     }),
   })
   if (res.ok) {
     saveError.value = ''
+    dropPageCache()
   } else {
     saveError.value = '⚠️ changes could not be saved'
   }
@@ -242,34 +268,78 @@ async function saveSettings(opts = {}) {
 async function onThemeChange() {
   await saveSettings()
   // Theme CSS is backend-served at /_themes/{theme}/theme.css in both dev
-  // and prod: swap the link in place, then re-render (the theme's default
-  // banner design and the page's stylesheet links may change with it).
-  let link = document.getElementById('pagerite-theme')
+  // and prod, but rendered differently: a <link> in dev, an inline <style>
+  // in prod. Swap it in place, then re-render (the theme's default banner
+  // design and the page's stylesheets may change with it).
+  let el = document.getElementById('pagerite-theme')
+  const url = `/_themes/${theme.value}/theme.css`
   if (theme.value) {
-    const href = `/_themes/${theme.value}/theme.css`
-    if (link) {
-      link.href = href
-    } else {
+    if (el?.tagName === 'STYLE') {
+      el.textContent = await (await fetch(url)).text()
+    } else if (el) {
+      el.href = url
+    } else if (import.meta.env.DEV) {
       // Re-create after "none": keep base < theme < design < custom CSS.
-      // In dev there is no #pagerite-base link (the base is a
+      // In dev there is no #pagerite-base element (the base is a
       // Vite-injected <style>), so anchor to the next sheet instead of
       // prepending before the base styles.
-      link = document.createElement('link')
-      link.rel = 'stylesheet'
-      link.id = 'pagerite-theme'
-      link.href = href
+      el = document.createElement('link')
+      el.rel = 'stylesheet'
+      el.id = 'pagerite-theme'
+      el.href = url
       const before = document.getElementById('pagerite-base')?.nextSibling
         ?? document.getElementById('pagerite-banner')
         ?? document.getElementById('pagerite-user')
-      if (before) before.before(link)
-      else document.head.append(link)
+      if (before) before.before(el)
+      else document.head.append(el)
+    } else {
+      // Prod: inline <style>, fetched from the backend-served URL.
+      el = document.createElement('style')
+      el.id = 'pagerite-theme'
+      el.textContent = await (await fetch(url)).text()
+      const before = document.getElementById('pagerite-base')?.nextSibling
+        ?? document.getElementById('pagerite-banner')
+        ?? document.getElementById('pagerite-user')
+      if (before) before.before(el)
+      else document.head.append(el)
     }
-  } else if (link) {
-    link.remove()
+  } else if (el) {
+    el.remove()
   }
   loadPlain(path.value)
 }
 
+async function onTransitionChange() {
+  await saveSettings()
+  // Transition CSS is backend-served at /_themes/{name}/transition.css in
+  // both dev and prod (<link> in dev, inline <style> in prod), like the
+  // theme. Swap #pagerite-transition in place — it only styles view
+  // transitions, so no re-render of the page regions is needed.
+  let el = document.getElementById('pagerite-transition')
+  const url = `/_themes/${transition.value}/transition.css`
+  if (el?.tagName === 'STYLE') {
+    el.textContent = await (await fetch(url)).text()
+  } else if (el) {
+    el.href = url
+  } else {
+    // Missing (created before this feature, or "none" saved directly):
+    // re-create, keeping base < theme < design < transition < custom CSS.
+    if (import.meta.env.DEV) {
+      el = document.createElement('link')
+      el.rel = 'stylesheet'
+      el.href = url
+    } else {
+      el = document.createElement('style')
+      el.textContent = await (await fetch(url)).text()
+    }
+    el.id = 'pagerite-transition'
+    const before = document.getElementById('pagerite-banner')?.nextSibling
+      ?? document.getElementById('pagerite-user')
+    if (before) before.before(el)
+    else document.head.append(el)
+  }
+}
+
 // --- Site-wide custom CSS --------------------------------------------------
 // Edits apply to the live page immediately and save while typing.
 function applyCustomCss(css) {
@@ -314,7 +384,7 @@ function setCssDocument(text) {
 // inline with other content, and those must be stripped/parsed too or
 // re-picking a font would insert a duplicate row.
 const FONT_DECL = /--font-(?:body|heading|brand)\s*:\s*var\(--font-[a-z0-9-]+\)\s*;/g
-const FONT_OPTIONS = [
+const BASE_FONT_OPTIONS = [
   { value: 'var(--font-source-serif)', label: 'Source Serif 4', serif: true },
   { value: 'var(--font-fraunces)', label: 'Fraunces', serif: true },
   { value: 'var(--font-literata)', label: 'Literata', serif: true },
@@ -328,6 +398,10 @@ const FONT_OPTIONS = [
   { value: 'var(--font-exo2)', label: 'Exo 2', serif: false },
   { value: 'var(--font-fira-code)', label: 'Fira Code', serif: false },
 ]
+// Built-in options plus user fonts reported by the backend (fonts/
+// folders on disk, see GET /_api/settings), so added fonts need no
+// frontend changes.
+const fontOptions = ref(BASE_FONT_OPTIONS)
 const fontHeading = ref('')
 const fontBody = ref('')
 const fontBrand = ref('')
@@ -337,8 +411,8 @@ const fontBrand = ref('')
 // the candidate font at the size and weight of the element being styled.
 const fontPicker = ref(null) // open tab: 'heading' | 'body' | 'brand' | null
 let fontTabLast = 'body'
-const serifFonts = computed(() => FONT_OPTIONS.filter((o) => o.serif))
-const sansFonts = computed(() => FONT_OPTIONS.filter((o) => !o.serif))
+const serifFonts = computed(() => fontOptions.value.filter((o) => o.serif))
+const sansFonts = computed(() => fontOptions.value.filter((o) => !o.serif))
 
 function toggleFontPanel() {
   if (fontPicker.value) {
@@ -415,6 +489,8 @@ onMounted(async () => {
       doc: '',
       extensions: [
         basicSetup,
+        // Tab/Shift-Tab indent and dedent instead of moving focus.
+        keymap.of([indentWithTab]),
         css(),
         cmTheme,
         cmHighlight,
@@ -434,6 +510,8 @@ onMounted(async () => {
       doc: '',
       extensions: [
         basicSetup,
+        // Tab/Shift-Tab indent and dedent instead of moving focus.
+        keymap.of([indentWithTab]),
         html(),
         cmTheme,
         cmHighlight,
@@ -468,36 +546,70 @@ onUnmounted(() => {
     <div v-if="saveError">{{ saveError }}</div>
 
     <section class="block">
-      <label class="field">
-        <span class="field-label">site name</span>
-        <input
-          v-model="brand"
-          class="text-input"
-          title="Site name (header link and window title)"
-          @input="onBrandInput"
-        />
-      </label>
-      <div class="field">
-        <span class="field-label">theme</span>
-        <select
-          v-model="theme"
-          class="text-input theme-select"
-          title="Theme"
-          @change="onThemeChange"
-        >
-          <option v-for="opt in themeOptions" :key="opt.value" :value="opt.value">
-            {{ opt.label }}
-          </option>
-        </select>
-        <button
-          type="button"
-          class="font-btn"
-          :class="{ active: !!fontPicker }"
-          title="Fonts"
-          @click="toggleFontPanel"
-        >
-          A
-        </button>
+      <div class="field-grid">
+        <label class="field">
+          <span class="field-label">site name</span>
+          <input
+            v-model="brand"
+            class="text-input"
+            title="Site name (header link and window title)"
+            @input="onBrandInput"
+          />
+        </label>
+        <div class="field">
+          <span class="field-label">favicon</span>
+          <button
+            type="button"
+            class="favicon-tile"
+            title="upload favicon (ico, png, svg...)"
+            @click="faviconInput.click()"
+          >
+            <img v-if="favicon" :src="favicon" alt="current favicon" />
+            <span v-else>?</span>
+          </button>
+          <input
+            ref="faviconInput"
+            type="file"
+            accept="image/*"
+            hidden
+            @change="(ev) => { uploadFavicon(ev.target.files[0]); ev.target.value = '' }"
+          />
+        </div>
+        <div class="field">
+          <span class="field-label">theme</span>
+          <select
+            v-model="theme"
+            class="text-input theme-select"
+            title="Theme"
+            @change="onThemeChange"
+          >
+            <option v-for="opt in themeOptions" :key="opt.value" :value="opt.value">
+              {{ opt.label }}
+            </option>
+          </select>
+          <button
+            type="button"
+            class="font-btn"
+            :class="{ active: !!fontPicker }"
+            title="Fonts"
+            @click="toggleFontPanel"
+          >
+            A
+          </button>
+        </div>
+        <label class="field">
+          <span class="field-label">transition</span>
+          <select
+            v-model="transition"
+            class="text-input theme-select"
+            title="Page transition"
+            @change="onTransitionChange"
+          >
+            <option v-for="t in transitionOptions" :key="t" :value="t">
+              {{ t }}
+            </option>
+          </select>
+        </label>
       </div>
       <div v-if="fontPicker" class="font-picker">
         <div class="font-tabs">
@@ -540,28 +652,9 @@ onUnmounted(() => {
           </div>
         </div>
       </div>
-      <div class="field">
-        <span class="field-label">favicon</span>
-        <button
-          type="button"
-          class="favicon-tile"
-          title="upload favicon (ico, png, svg...)"
-          @click="faviconInput.click()"
-        >
-          <img v-if="favicon" :src="favicon" alt="current favicon" />
-          <span v-else>?</span>
-        </button>
-        <input
-          ref="faviconInput"
-          type="file"
-          accept="image/*"
-          hidden
-          @change="(ev) => { uploadFavicon(ev.target.files[0]); ev.target.value = '' }"
-        />
-      </div>
     </section>
 
-    <section class="block" @paste="onBrandPaste">
+    <section class="block grow" @paste="onBrandPaste">
       <div class="block-head">
         <span class="field-label">brand code (replaces the brand link)</span>
         <button
@@ -581,7 +674,7 @@ onUnmounted(() => {
       <div ref="brandEl" class="brand-cm" />
     </section>
 
-    <section class="block">
+    <section class="block grow">
       <div class="block-head">
         <span class="field-label">custom CSS (applies to every page, on top of the theme)</span>
       </div>
@@ -595,6 +688,7 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
+  background: var(--surface);
 }
 
 .block {
@@ -606,6 +700,13 @@ onUnmounted(() => {
   background: var(--surface);
 }
 
+/* Editor blocks (brand HTML, custom CSS) share the leftover panel height
+   equally; their CodeMirror windows fill the block and scroll internally. */
+.block.grow {
+  flex: 1;
+  min-height: 7rem;
+}
+
 .block-head {
   display: flex;
   align-items: center;
@@ -618,6 +719,26 @@ onUnmounted(() => {
   gap: 0.5rem;
 }
 
+/* Two-column grid (site name + favicon, theme + transition) so the rows
+   and labels align with each other. */
+.field-grid {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 0.4rem 1.5rem;
+}
+
+/* Labels share one narrow track per field, sized to the longest label
+   ("transition"), so they line up across rows without excess space. */
+.field-grid > .field {
+  display: grid;
+  grid-template-columns: 4.3rem 1fr auto;
+}
+
+.field-grid .field-label {
+  min-width: 0;
+}
+
 /* Fixed-width labels keep the settings rows aligned. */
 .field > .field-label {
   min-width: 5rem;
@@ -775,42 +896,29 @@ onUnmounted(() => {
   border-color: var(--accent);
 }
 
-/* Small CodeMirror window for the custom brand HTML; scrolls internally. */
-.brand-cm {
-  border: 1px solid var(--line);
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.brand-cm :deep(.cm-editor) {
-  max-height: 7rem;
-  font-size: 0.85rem;
-}
-
-.brand-cm :deep(.cm-scroller) {
-  overflow: auto;
-}
-
-.brand-cm :deep(.cm-gutters) {
-  display: none;
-}
-
-/* CodeMirror window for site-wide custom CSS. */
+/* CodeMirror windows for the brand HTML and custom CSS: fill the growing
+   block, scroll internally. */
+.brand-cm,
 .css-cm {
+  flex: 1;
+  min-height: 0;
   border: 1px solid var(--line);
   border-radius: 4px;
   overflow: hidden;
 }
 
+.brand-cm :deep(.cm-editor),
 .css-cm :deep(.cm-editor) {
-  max-height: 12rem;
+  height: 100%;
   font-size: 0.85rem;
 }
 
+.brand-cm :deep(.cm-scroller),
 .css-cm :deep(.cm-scroller) {
   overflow: auto;
 }
 
+.brand-cm :deep(.cm-gutters),
 .css-cm :deep(.cm-gutters) {
   display: none;
 }

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: '' },
@@ -106,7 +106,8 @@ function discardPending() {
 async function commitPending() {
   const node = pending.value
   if (!node) return
-  // Empty slug: derive one from the title (transliterated to ASCII).
+  // The typed slug is slugified at commit; empty derives one from the
+  // title (transliterated to ASCII).
   const slug = slugify(node.slug.trim()) || slugify(node.title)
   if (!slug) {
     return
@@ -144,6 +145,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 +173,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)}`
@@ -213,10 +217,13 @@ function onTitleInput(node, ev) {
   })
 }
 
-// The slug inputs are filtered as you type (StructureTree onSlugInput,
-// see slugify.js); the server re-validates and its reason is shown.
+// Slug inputs are typed freely (spaces become hyphens live, see
+// StructureTree onSlugInput); the value is slugified here at commit
+// (blur/Enter) before talking to the server, which re-validates (e.g.
+// reserved names) and its reason is shown.
 async function commitSlug(node, ev) {
-  const slug = ev.target.value.trim()
+  const slug = slugify(ev.target.value.trim())
+  ev.target.value = slug
   if (slug === node.slug) return
   const parent = node.path.split('/').slice(0, -1).join('/')
   // Empty slug at top level = the front page (path "").
@@ -228,28 +235,13 @@ async function commitSlug(node, ev) {
   }
 }
 
-// Two-step delete (no dialogs): the first click arms the row's button for
-// a few seconds, the second actually deletes.
-const arming = ref(null)
-let armTimer = null
-
-function armRemove(node) {
-  if (arming.value === node.path) {
-    clearTimeout(armTimer)
-    arming.value = null
-    removePage(node)
-  } else {
-    arming.value = node.path
-    clearTimeout(armTimer)
-    armTimer = setTimeout(() => { arming.value = null }, 3000)
-  }
-}
-
+// Deletion is immediate, no confirmation.
 async function removePage(node) {
   const res = await fetch(`/_api/pages/${node.path}`, { method: 'DELETE' })
   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
@@ -267,8 +259,7 @@ async function removePage(node) {
 provide('structureHandlers', {
   current: () => path.value,
   open: navigate,
-  arming: () => arming.value,
-  armRemove,
+  removePage,
   reorder: onReorder,
   titleInput: onTitleInput,
   commitSlug,
@@ -284,7 +275,6 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  clearTimeout(armTimer)
   for (const t of Object.values(timers)) clearTimeout(t)
   removeEventListener('pagerite:editor-shown', onEditorShown)
 })

frontend/src/StructureTree.vue

@@ -34,16 +34,17 @@ const props = defineProps({
 
 const handlers = inject('structureHandlers')
 
-// Live-filter the slug inputs as they are typed (oninput): invalid
-// characters are simply not accepted, spaces become hyphens and unicode
-// folds to ASCII (see slugify.js). Existing rows commit on change, the
-// pending row is v-modeled.
-function onSlugInput(ev) {
-  ev.target.value = slugify(ev.target.value)
-}
-
-function onPendingSlugInput(element, ev) {
-  element.slug = slugify(ev.target.value)
+// Slug inputs accept free typing; the only live rewrites are turning
+// spaces into hyphens and lowercasing (both keep the length for ASCII,
+// so the cursor stays put). Anything else (unicode folding, stripping,
+// collapsing) is left for commit time, where the value is run through
+// slugify before talking to the server (StructureEditor). `element` is
+// the pending row (v-modeled), null for existing rows (plain :value
+// binding, read back on commit).
+function onSlugInput(element, ev) {
+  const v = ev.target.value.replace(/\s/g, '-').toLowerCase()
+  ev.target.value = v
+  if (element) element.slug = v
 }
 
 // Focus the title input of a fresh pending row.
@@ -113,7 +114,7 @@ function onEnd() {
               class="edit slug-edit"
               :placeholder="slugify(element.title)"
               title="Slug (last path segment) — empty: derived from the title"
-              @input="onPendingSlugInput(element, $event)"
+              @input="onSlugInput(element, $event)"
               @keyup.enter="handlers.commitPending()"
               @keyup.esc="handlers.discardPending()"
             />
@@ -135,7 +136,7 @@ function onEnd() {
               :value="element.slug"
               placeholder="front page"
               title="Slug (last path segment) — renames move the whole subtree. Empty at top level = front page"
-              @input="onSlugInput"
+              @input="onSlugInput(null, $event)"
               @change="handlers.commitSlug(element, $event)"
             />
             <span class="acts">
@@ -144,12 +145,11 @@ function onEnd() {
                 v-if="element.has_content || !element.children.length"
                 type="button"
                 class="act del"
-                :class="{ armed: handlers.arming() === element.path }"
                 :title="element.children.length
                   ? 'delete the landing page (the category keeps its subpages)'
                   : 'delete page'"
-                @click="handlers.armRemove(element)"
-              >{{ handlers.arming() === element.path ? 'delete?' : '✕' }}</button>
+                @click="handlers.removePage(element)"
+              >✕</button>
             </span>
           </template>
         </div>
@@ -300,12 +300,6 @@ body.tree-dragging .treelist {
   white-space: nowrap;
 }
 
-/* Two-step delete: the first click arms the button, the second deletes. */
-.act.armed {
-  color: #e06c75;
-  font-weight: 600;
-}
-
 .del:hover {
   color: #e06c75;
 }

frontend/src/TrailLink.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { computed } from 'vue'
+import { formatCount, formatReadTime } from './analytics/format.js'
+
+const props = defineProps({
+  step: { type: Object, required: true },
+  count: { type: Number, default: 0 },
+  favicons: { type: Object, default: null },
+})
+
+defineEmits(['close'])
+
+const hasError = computed(() => props.step.status >= 400)
+const favicon = computed(() =>
+  props.step.external && props.step.origin ? props.favicons?.[props.step.origin] : null,
+)
+
+const title = computed(() => {
+  const parts = [props.step.title]
+  if (props.step.readSeconds > 0) {
+    parts.push(formatReadTime(props.step.readSeconds))
+  }
+  if (hasError.value) {
+    parts.push(`${props.step.status}`)
+  }
+  return parts.filter(Boolean).join(' — ')
+})
+</script>
+
+<template>
+  <a class="trail-link"
+     :class="{ error: hasError }"
+     :href="step.path"
+     :title="title"
+     :target="step.external ? '_blank' : undefined"
+     :rel="step.external ? 'noopener' : undefined"
+     @click="(e) => { if (!step.external) $emit('close') }">
+    <small v-if="count > 1" class="muted">{{ formatCount(count) }}×</small>
+    <img v-if="favicon" class="favicon" :src="favicon" alt="" />
+    <span>{{ step.slug }}</span>
+  </a>
+</template>
+
+<style scoped>
+.favicon {
+  width: 1em;
+  height: 1em;
+  margin-right: 0.25em;
+  vertical-align: -0.1em;
+}
+</style>

frontend/src/TransitionGraph.vue

@@ -0,0 +1,307 @@
+<script setup>
+/**
+ * Radial transition map for a pre-filtered time range.
+ *
+ * The parent filters transitions, views and visits to the selected range
+ * before passing them in; `window` carries the absolute [t0, t1) window
+ * so the visual scale can normalize against a one-week reference.
+ */
+import { computed, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'
+import { DAY } from './analytics/time.js'
+import { formatCount, formatReadTime } from './analytics/format.js'
+import {
+  TNODE_W,
+  TNODE_H,
+  BEAD_R,
+  buildTransitionGraph,
+} from './analytics/transitions.js'
+
+const props = defineProps({
+  data: { type: Object, default: null },
+  window: { type: Object, required: true },
+  pageTree: { type: Array, default: null },
+  favicons: { type: Object, default: null },
+})
+
+// origin -> /_f/... icon URL, keyed by the node's origin (source/exit
+// pills only; UTM-tagged source nodes without an https origin stay
+// text-only).
+const extFavicon = (x) => {
+  if (!x.path?.startsWith('https://')) return null
+  try {
+    return props.favicons?.[new URL(x.path).origin] || null
+  } catch {
+    return null
+  }
+}
+
+const dayScale = computed(() => {
+  const { t0, t1 } = props.window
+  // 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()
+  for (const buckets of Object.values(props.data?.views || {})) {
+    for (const k of Object.keys(buckets)) times.add(Date.parse(k))
+  }
+  const arr = [...times]
+  if (arr.length < 2) return 1
+  const span = Math.max(...arr) - Math.min(...arr)
+  return DAY / Math.max(span, 30 * DAY)
+})
+
+const graph = computed(() =>
+  props.data
+    ? buildTransitionGraph(props.data, props.pageTree, props.data.visits || [], dayScale.value)
+    : null,
+)
+
+// Bead animation: every bead is simulated independently in JS. Each flow
+// (one per edge direction) emits a bead every `interval` seconds; beads
+// cross their segment in a constant TRAVERSAL_S seconds (speed relative
+// to span length) and are dropped at the end.
+// There is deliberately no cap on beads in flight.
+// Emitters persist across data reloads, keyed by flow.key: an unchanged
+// link keeps its emission phase and in-flight beads (tracked by progress,
+// not absolute time), so a count change elsewhere never reshuffles them.
+const beads = shallowRef([])
+let rafId = 0
+const emitters = new Map() // flow.key -> { flow, interval, next, alive }
+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 = 0.4 // seconds to cross any segment, end to end
+
+const syncBeads = (flows) => {
+  const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
+  if (!flows?.length || reduced) {
+    emitters.clear()
+    live.length = 0
+    beads.value = []
+    return
+  }
+  // Cap the total bead emission rate so a busy range cannot spawn enough
+  // beads to kill the page. Existing per-range time scaling is preserved;
+  // this is only a proportional emergency throttle when the limit is hit.
+  const totalRate = flows.reduce((s, f) => s + 1 / f.interval, 0)
+  const scale = totalRate > MAX_BEAD_RATE ? MAX_BEAD_RATE / totalRate : 1
+
+  const now = performance.now()
+  const seen = new Set()
+  for (const flow of flows) {
+    seen.add(flow.key)
+    const interval = (flow.interval / scale) * 1000
+    const e = emitters.get(flow.key)
+    if (e) {
+      e.flow = flow // pick up new geometry/rate, keep the phase
+      e.interval = interval
+      continue
+    }
+    // New emitter: pre-fill the traversal with evenly spaced beads (random
+    // phase), so the flow appears already running instead of empty.
+    const phase = Math.random() * interval
+    const dp = interval / 1000 / TRAVERSAL_S
+    const ne = { flow, interval, next: now + phase, alive: true }
+    for (let p = 1 - phase / 1000 / TRAVERSAL_S; p > 0; p -= dp) {
+      live.push({ e: ne, p })
+    }
+    emitters.set(flow.key, ne)
+  }
+  for (const [key, e] of emitters) {
+    if (!seen.has(key)) {
+      e.alive = false
+      emitters.delete(key)
+    }
+  }
+  for (let i = live.length - 1; i >= 0; i--) {
+    if (!live[i].e.alive) live.splice(i, 1)
+  }
+}
+
+const tick = (t) => {
+  const dt = lastTick ? (t - lastTick) / 1000 : 0
+  lastTick = t
+  for (const e of emitters.values()) {
+    while (e.next <= t) {
+      live.push({ e, p: 0 })
+      e.next += e.interval
+    }
+  }
+  const out = []
+  for (let i = live.length - 1; i >= 0; i--) {
+    const b = live[i]
+    b.p += dt / TRAVERSAL_S
+    if (b.p >= 1) {
+      live.splice(i, 1)
+      continue
+    }
+    const f = b.e.flow
+    out.push({ x: f.x1 + (f.x2 - f.x1) * b.p, y: f.y1 + (f.y2 - f.y1) * b.p })
+  }
+  beads.value = out
+  rafId = requestAnimationFrame(tick)
+}
+
+watch(() => graph.value?.flows, syncBeads, { immediate: true })
+onMounted(() => {
+  if (!matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    rafId = requestAnimationFrame(tick)
+  }
+})
+onBeforeUnmount(() => cancelAnimationFrame(rafId))
+
+// The svg never renders larger than its natural size (1 viewBox unit = 1
+// px, max-width below): the layout geometry is designed in pixel-like
+// units, and upscaling would blow up the pills around their text. Narrow
+// panels scale the graph down to fit (width: 100%), text along with it.
+
+// Pill text is not truncated: text is clipped at the pill's rounded border
+// (clipPath per node, inset a few units for padding). Captions center when
+// they fit; overlong ones anchor left so their beginning (not their
+// middle) survives the clip. Width estimate: ~0.52 em per glyph.
+const fitsPill = (label, fontPx = 19) => label.length * 0.52 * fontPx <= TNODE_W - 16
+
+// With a favicon the label leaves room for the icon at the pill's left
+// and is always left-anchored past it.
+const labelX = (x) =>
+  extFavicon(x) ? x.x - TNODE_W / 2 + 36 : fitsPill(x.label) ? x.x : x.x - TNODE_W / 2 + 8
+const labelAnchor = (x) => (!extFavicon(x) && fitsPill(x.label) ? 'middle' : 'start')
+
+const countLabel = (n) =>
+  n.readSec ? `${formatCount(n.views)}×${formatReadTime(n.readSec)}` : formatCount(n.views)
+</script>
+
+<template>
+  <section v-if="graph">
+    <svg class="tmap" :style="{ maxWidth: `${graph.bounds.x1 - graph.bounds.x0}px` }" :viewBox="`${graph.bounds.x0} ${graph.bounds.y0} ${graph.bounds.x1 - graph.bounds.x0} ${graph.bounds.y1 - graph.bounds.y0}`"
+         role="img" aria-label="map of transitions between pages">
+      <path v-for="(a, i) in graph.arcs" :key="'a' + i"
+            :id="`tarc${i}`" :d="a.d" :class="['tarc', a.top && 'tarc-top']" />
+      <template v-for="(a, i) in graph.arcs" :key="'t' + i">
+        <path v-if="a.ld" :id="`tarcl${i}`" :d="a.ld" fill="none" stroke="none" />
+        <text v-if="a.ld" class="tarclabel" :class="{ 'tarclabel-top': a.top }"><textPath :href="`#tarcl${i}`" startOffset="0">{{ a.label }}</textPath></text>
+      </template>
+      <path v-for="(e, i) in graph.edges" :key="'e' + i"
+            :d="e.d" :class="['tconn', e.external && 'tconn-exit']">
+        <title>{{ e.title }}</title>
+      </path>
+      <circle v-for="(b, i) in beads" :key="'b' + i"
+              :cx="b.x" :cy="b.y" :r="BEAD_R" class="tbead" />
+      <g v-for="(x, i) in graph.extNodes" :key="'x' + i">
+        <clipPath :id="`xclip${i}`">
+          <rect :x="x.x - TNODE_W/2 + 6" :y="x.y - TNODE_H/2" :width="TNODE_W - 12"
+                :height="TNODE_H" :rx="TNODE_H/2 - 4" />
+        </clipPath>
+        <a v-if="x.href" :href="x.href" target="_blank" rel="noopener">
+          <title>{{ x.path }}</title>
+          <rect :x="x.x - TNODE_W/2" :y="x.y - TNODE_H/2" :width="TNODE_W" :height="TNODE_H" :rx="TNODE_H/2"
+                :class="['txnode', x.kind === 'source' ? 'txnode-source' : 'txnode-exit']" />
+          <g :clip-path="`url(#xclip${i})`">
+            <image v-if="extFavicon(x)" :href="extFavicon(x)" :x="x.x - TNODE_W/2 + 12" :y="x.y - TNODE_H*0.16 - 11" width="22" height="22" />
+            <text :x="labelX(x)" :y="x.y - TNODE_H*0.16" class="tnodeslug" dominant-baseline="middle" :style="{ textAnchor: labelAnchor(x) }">{{ x.label }}</text>
+            <text :x="x.x" :y="x.y + TNODE_H*0.24" class="tnodecount" dominant-baseline="middle">{{ formatCount(x.count) }}</text>
+          </g>
+        </a>
+        <g v-else>
+          <title>{{ x.path }}</title>
+          <rect :x="x.x - TNODE_W/2" :y="x.y - TNODE_H/2" :width="TNODE_W" :height="TNODE_H" :rx="TNODE_H/2"
+                :class="['txnode', x.kind === 'source' ? 'txnode-source' : 'txnode-exit']" />
+          <g :clip-path="`url(#xclip${i})`">
+            <image v-if="extFavicon(x)" :href="extFavicon(x)" :x="x.x - TNODE_W/2 + 12" :y="x.y - TNODE_H*0.16 - 11" width="22" height="22" />
+            <text :x="labelX(x)" :y="x.y - TNODE_H*0.16" class="tnodeslug" dominant-baseline="middle" :style="{ textAnchor: labelAnchor(x) }">{{ x.label }}</text>
+            <text :x="x.x" :y="x.y + TNODE_H*0.24" class="tnodecount" dominant-baseline="middle">{{ formatCount(x.count) }}</text>
+          </g>
+        </g>
+      </g>
+      <g v-for="(n, i) in graph.nodes" :key="n.path">
+        <clipPath :id="`nclip${i}`">
+          <rect :x="n.x - TNODE_W/2 + 6" :y="n.y - TNODE_H/2" :width="TNODE_W - 12"
+                :height="TNODE_H" :rx="TNODE_H/2 - 4" />
+        </clipPath>
+        <a :href="n.path">
+          <title>{{ n.title }}</title>
+          <rect :x="n.x - TNODE_W/2" :y="n.y - TNODE_H/2" :width="TNODE_W" :height="TNODE_H" :rx="TNODE_H/2" class="tnode" />
+          <g :clip-path="`url(#nclip${i})`">
+            <text :x="fitsPill(n.label) ? n.x : n.x - TNODE_W/2 + 8" :y="n.y - TNODE_H*0.16" class="tnodeslug" dominant-baseline="middle" :style="{ textAnchor: fitsPill(n.label) ? 'middle' : 'start' }">{{ n.label }}</text>
+            <text :x="n.x" :y="n.y + TNODE_H*0.24" class="tnodecount" dominant-baseline="middle">
+              {{ countLabel(n) }}
+            </text>
+          </g>
+        </a>
+      </g>
+    </svg>
+  </section>
+</template>
+
+<style scoped>
+/* Transition map: radial graph of internal page-to-page transitions. */
+.tmap {
+  display: block;
+  width: 100%;
+  /* max-width is set inline to the natural content width (px = viewBox
+     units), so wide panels never upscale the graph beyond 1:1. */
+  margin: 0 auto;
+}
+.tmap .tconn {
+  fill: var(--accent);
+  opacity: 0.4; /* uniform, not strength-encoded: width carries that */
+}
+.tmap .tconn-exit {
+  fill: var(--text);
+}
+.tmap .tbead {
+  fill: var(--accent);
+  opacity: 0.85;
+  filter: drop-shadow(0 0 2.5px var(--accent));
+}
+.tmap .txnode {
+  fill: var(--text);
+  stroke: none;
+}
+.tmap .txnode-source { fill: var(--text); }
+.tmap .txnode-exit { fill: var(--text); }
+/* Branch lanes: one wide concentric arc per path prefix, running behind
+   the node pills around the fan's circle center; parent levels sit one
+   indent (radius step) outward. Each lane's label follows a short guide
+   arc across the first inter-node gap (the part pills never cover). */
+.tmap .tarc {
+  fill: none;
+  stroke: var(--muted);
+  stroke-width: 16;
+  opacity: 0.25;
+}
+.tmap .tarc-top { stroke-width: 24; }
+/* Lane labels are left-aligned: each guide arc starts just past the source
+   pill's edge, the earliest point where the text is visible. */
+.tmap .tarclabel {
+  fill: var(--muted);
+  font-size: 13px;
+  text-anchor: start;
+}
+/* The top lane is 50% thicker; its 🏠︎ label scales along. */
+.tmap .tarclabel-top {
+  font-size: 19.5px;
+}
+.tmap .tnode {
+  fill: var(--accent);
+  stroke: none;
+}
+/* Text sizes are viewBox units: they shrink along with the graph on
+   narrow panels. Overlong labels are clipped at the pill border. */
+.tmap .tnodeslug {
+  fill: var(--bg, Canvas);
+  font-size: 19px;
+  text-anchor: start;
+}
+.tmap a { cursor: pointer; }
+.tmap .tnodecount {
+  fill: var(--bg, Canvas);
+  opacity: 0.75;
+  font-size: 15px;
+  text-anchor: middle;
+}
+
+section { margin-top: 1.8rem; }
+</style>

frontend/src/VisitorCell.vue

@@ -0,0 +1,156 @@
+<script setup>
+// Visitor metadata cell shared by the recent-visits, crawlers, and abuse tables.
+// Displays IP/network/host, country flag/city, UA, and language when available.
+// Clicking the IP copies the full address to the clipboard.
+// ``variantCount`` overrides the UA line to warn when multiple client
+// fingerprints share the same IP (e.g. a scanner rotating UAs).
+import { computed } from 'vue'
+import * as flagSvgs from 'country-flag-icons/string/3x2'
+import { copyIp, formatLang } from './analytics/format.js'
+
+const props = defineProps({
+  ip: { type: String, default: '' },
+  ipDisplay: { type: String, default: '—' },
+  ua: { type: String, default: '' },
+  uaRaw: { type: String, default: '' },
+  country: { type: String, default: '' },
+  city: { type: String, default: '' },
+  lang: { type: String, default: '' },
+  langDisplay: { type: String, default: '' },
+  isHost: { type: Boolean, default: false },
+  variantCount: { type: Number, default: 1 },
+})
+
+const hasCountry = computed(() => !!(props.country && props.country !== '—'))
+const hasCity = computed(() => !!(props.city && props.city !== '—'))
+const hasLocale = computed(() => hasCountry.value || hasCity.value)
+const langValue = computed(() => props.langDisplay || formatLang(props.lang))
+const showLang = computed(() => langValue.value && langValue.value !== '—')
+
+function flagSvg(code) {
+  return flagSvgs[code?.toUpperCase()] || ''
+}
+
+function countryName(code) {
+  if (!code) return ''
+  try {
+    return new Intl.DisplayNames(['en'], { type: 'region' }).of(code.toUpperCase())
+  } catch {
+    return ''
+  }
+}
+</script>
+
+<template>
+  <td class="visitor-cell" :class="{ 'host-cell': isHost }">
+    <div class="visitor-rows">
+      <div class="visitor-row">
+        <div class="locale-line">
+          <span v-if="flagSvg(country)" class="flag" v-html="flagSvg(country)" :title="countryName(country) || country"></span>
+          <template v-if="hasCity"><small class="city-name muted">{{ city }}</small></template>
+          <template v-else-if="!hasLocale">—</template>
+        </div>
+        <div class="ip-line">
+          <span class="clickable-ip small muted"
+                :title="ip"
+                @click="copyIp(ip, $event)">{{ ipDisplay }}</span>
+        </div>
+      </div>
+      <div class="visitor-row">
+        <div class="ua-line">
+          <small v-if="variantCount > 1" class="muted variant-hint">{{ variantCount }} client variations</small>
+          <small v-else class="muted" :title="uaRaw">{{ ua || '—' }}</small>
+        </div>
+        <div v-if="showLang && variantCount <= 1" class="locale-lang"><small class="muted">{{ langValue }}</small></div>
+      </div>
+    </div>
+  </td>
+</template>
+
+<style scoped>
+.visitor-cell {
+  width: 18em;
+  max-width: 18em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+}
+
+.visitor-cell.host-cell {
+  text-align: right;
+}
+
+.visitor-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.visitor-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.visitor-row > * {
+  min-width: 0;
+}
+
+.locale-line,
+.ip-line,
+.ua-line {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.locale-line {
+  text-align: left;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.ip-line {
+  text-align: right;
+}
+
+.ua-line {
+  text-align: left;
+}
+
+.locale-lang {
+  flex: 0 0 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: right;
+}
+
+.city-name {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.flag {
+  display: inline-flex;
+  width: 18px;
+  height: 12px;
+  border-radius: 2px;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
+  vertical-align: middle;
+}
+
+.flag :deep(svg) {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+</style>

frontend/src/VisitorCharts.vue

@@ -0,0 +1,201 @@
+<script setup>
+/**
+ * Visitor and page-view smoothed curves for a single shared time range.
+ */
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { makeSeries } from './analytics/time.js'
+import {
+  CHART_H,
+  CHART_W,
+  MARGIN_B,
+  MARGIN_L,
+  VIEW_H,
+  VIEW_W,
+  buildChart,
+} from './analytics/chart.js'
+
+const DAY_REFRESH_MS = 15000
+
+// Keep the whole svg within page bounds: full width below the natural
+// size, centered with equal side margins above it (max() clamps the
+// centering margin to 0 at the breakpoint, so the rule is continuous).
+const CHART_MARGIN = `max(0px, calc(50% - ${VIEW_W / 2}px))`
+
+const props = defineProps({
+  data: { type: Object, default: null },
+  range: { type: String, required: true },
+})
+
+// Views across all pages combined into one raw bucket map.
+const allViews = computed(() => {
+  const all = {}
+  for (const buckets of Object.values(props.data?.views || {})) {
+    for (const [k, c] of Object.entries(buckets)) all[k] = (all[k] || 0) + c
+  }
+  return all
+})
+
+const visitSeries = computed(() => makeSeries(props.data?.site_visits, props.range))
+const viewSeries = computed(() => makeSeries(allViews.value, props.range))
+
+function freqLabel(unit) {
+  return unit === '5min' ? '5 min' : unit === 'hour' ? 'hourly' : 'daily'
+}
+
+/** Vertical axis caption: "visits / 5 min" on the day view, else "hourly visits" style. */
+function axisLabel(unit, ylabel) {
+  return unit === '5min' ? `${ylabel} / 5 min` : `${freqLabel(unit)} ${ylabel}`
+}
+
+/** Legend label for the overlaid past weeks: "Week M" or "Week M–N". */
+function pastLabel(series) {
+  const oldest = series.at(-1).label.slice(5) // strip "Week "
+  return series.length > 2 ? `Week ${oldest}–${series[1].label.slice(5)}` : `Week ${oldest}`
+}
+
+const now = ref(Date.now())
+let refreshInterval = null
+onMounted(() => {
+  refreshInterval = setInterval(() => { now.value = Date.now() }, DAY_REFRESH_MS)
+})
+onUnmounted(() => {
+  if (refreshInterval) clearInterval(refreshInterval)
+})
+
+const visitChart = computed(() => buildChart(visitSeries.value, now.value))
+const viewChart = computed(() => buildChart(viewSeries.value, now.value))
+</script>
+
+<template>
+  <section v-for="c in [
+      { ylabel: 'visits', chart: visitChart, legend: true },
+      { 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}`"
+           :style="{ maxWidth: `${VIEW_W}px`, marginLeft: CHART_MARGIN }"
+           role="img" :aria-label="axisLabel(c.chart.unit, c.ylabel)">
+        <line v-for="g in c.chart.majors.slice(1)" :key="'j' + g.value"
+              :x1="0" :x2="CHART_W" :y1="g.y" :y2="g.y" class="major" />
+        <template v-for="t in c.chart.xticks" :key="'t' + t.x">
+          <line v-if="t.line" :x1="t.x" :x2="t.x" :y1="0" :y2="CHART_H"
+                class="minor vertical" />
+        </template>
+        <template v-if="c.chart.bars">
+          <rect v-for="(b, i) in c.chart.bars" :key="'b' + i"
+                :x="b.x" :y="b.y" :width="b.width" :height="b.height" class="bar" />
+          <path :d="c.chart.skyline" class="line" />
+        </template>
+        <template v-else>
+          <!-- Oldest overlay weeks first so the current week paints on top. -->
+          <template v-for="(s, i) in [...c.chart.series].reverse()" :key="i">
+            <path v-if="s.area" :d="s.area" class="area" />
+            <path :d="s.line" class="line" :class="{ past: s.past }"
+                  :style="{ opacity: s.opacity }" />
+          </template>
+        </template>
+        <line :x1="0" :x2="CHART_W" :y1="CHART_H - 0.5" :y2="CHART_H - 0.5"
+              class="axis" />
+        <text v-for="g in c.chart.majors" :key="'y' + g.value" x="-5" :y="g.y"
+              text-anchor="end" dominant-baseline="middle" class="ylab">{{ g.label }}</text>
+        <text :x="-(MARGIN_L - 10)" :y="CHART_H / 2" text-anchor="middle"
+              :transform="`rotate(-90 ${-(MARGIN_L - 10)} ${CHART_H / 2})`"
+              class="yaxis-label">{{ axisLabel(c.chart.unit, c.ylabel) }}</text>
+        <text v-for="t in c.chart.xticks" :key="'x' + t.x" :x="t.x" :y="CHART_H + MARGIN_B - 8"
+              text-anchor="middle" class="xlab">{{ t.label }}</text>
+        <!-- Week overlay legend, top right inside the plot: current week in
+             accent, one muted specimen for the whole past range. -->
+        <g v-if="c.legend && c.chart.series.length > 1">
+          <line :x1="CHART_W - 98" :x2="CHART_W - 78" y1="10" y2="10" class="line" />
+          <text :x="CHART_W - 72" y="10" dominant-baseline="middle"
+                class="leglab">{{ c.chart.series[0].label }}</text>
+          <line :x1="CHART_W - 98" :x2="CHART_W - 78" y1="25" y2="25"
+                class="line past" style="opacity: 0.6" />
+          <text :x="CHART_W - 72" y="25" dominant-baseline="middle"
+                class="leglab">{{ pastLabel(c.chart.series) }}</text>
+        </g>
+      </svg>
+    </template>
+  </section>
+</template>
+
+<style scoped>
+/* Each chart is a self-contained SVG: the viewBox includes the axis label
+   margins, so nothing is positioned with HTML overlays. Never upscale past
+   the natural size (1 viewBox unit = 1 px, max-width set inline) — that
+   would blow up the constant-size text; smaller panels still scale the
+   chart down to fit. The margin-left (set inline) centers the chart above
+   its natural width; the svg always stays within page bounds.
+   overflow: visible lets wider fonts extend past the viewBox instead of
+   clipping. */
+.chart {
+  display: block;
+  width: 100%;
+  height: auto;
+  overflow: visible;
+}
+
+.chart .ylab,
+.chart .xlab,
+.chart .yaxis-label,
+.chart .leglab {
+  font-family: system-ui, sans-serif; /* theme fonts can be overly styled */
+  font-size: 11px;
+  fill: var(--muted);
+}
+
+.chart .ylab {
+  font-variant-numeric: tabular-nums;
+}
+
+.chart .minor {
+  stroke: var(--line);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+  opacity: 0.35;
+}
+
+.chart .minor.vertical {
+  opacity: 0.25;
+}
+
+.chart .major {
+  stroke: var(--line);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+  stroke-dasharray: 3 4;
+  opacity: 0.8;
+}
+
+.chart .axis {
+  stroke: var(--line);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.chart .area {
+  fill: var(--accent);
+  opacity: 0.15;
+}
+
+.chart .bar {
+  fill: var(--accent);
+  opacity: 0.15;
+}
+
+.chart .line {
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+/* Past overlay weeks contrast with the current week's accent color. */
+.chart .line.past {
+  stroke: var(--muted);
+}
+
+.empty { color: var(--muted); }
+</style>

frontend/src/analytics-main.js

@@ -0,0 +1,30 @@
+// Analytics page entry: mounts AnalyticsView inside the normal page layout.
+// In production the backend inlines this module into the /_a page (and
+// pagerite.js re-creates the script element after fetch-navigations there);
+// in dev pagerite.js imports it from the Vite dev server on demand. Either
+// way it auto-mounts on #analytics-app when it evaluates, and unmounts when
+// pagerite.js announces a swap away from /_a.
+import { createApp } from 'vue'
+import AnalyticsView from './AnalyticsView.vue'
+
+let app = null
+
+export function mount(container) {
+  if (app) return
+  app = createApp(AnalyticsView)
+  app.mount(container)
+}
+
+export function unmount() {
+  app?.unmount()
+  app = null
+}
+
+// pagerite.js calls this before swapping away from /_a; each evaluation
+// (the inlined production module evaluates fresh on every visit) replaces
+// the handle.
+window.__pageriteAnalyticsUnmount = unmount
+
+// Auto-mount when the page holding #analytics-app is present.
+const container = document.getElementById('analytics-app')
+if (container) mount(container)

frontend/src/analytics/chart.js

@@ -0,0 +1,388 @@
+/**
+ * Chart geometry, smoothing, and SVG path generation for analytics charts.
+ *
+ * Fixed 720x180 plot area inside a larger viewBox that also holds the axis
+ * labels, so each chart SVG is self-contained; values are per-unit rates
+ * (hour on the week view, day on month+).
+ */
+
+import { DAY, HOUR, MIN5, WEEK, mondayUTC } from './time.js'
+import { formatCount } from './format.js'
+
+export const CHART_W = 1000
+export const CHART_H = 150
+export const PAD_TOP = 14 // room above the highest point
+export const MARGIN_L = 40 // y tick labels + vertical axis label
+export const MARGIN_B = 24 // x tick labels
+export const VIEW_W = MARGIN_L + CHART_W + 8
+export const VIEW_H = CHART_H + MARGIN_B
+
+/**
+ * Y always starts at 0; the max is a multiple of a 1-2-5 major step with at
+ * most 5 intervals, so labeled ticks are always round and evenly divided.
+ * A minimum range of 10 keeps tiny near-zero values (e.g. a single visit)
+ * from being enlarged to a fractional scale; minor lines subdivide each
+ * major step in five when that yields integers.
+ */
+export function yScale(maxValue) {
+  let step = 1
+  outer: for (let exp = -3; exp < 8; exp++) {
+    for (const base of [1, 2, 5]) {
+      step = base * 10 ** exp
+      if (Math.ceil(maxValue / step) <= 5) break outer
+    }
+  }
+  let max = Math.ceil(maxValue / step) * step
+  if (max < 10) {
+    max = 10
+    step = 2
+  }
+  const minor = step >= 5 && step % 5 === 0 ? step / 5 : null
+  return { max, step, minor }
+}
+
+/**
+ * Edge-aware Gaussian smoothing with a fixed bandwidth. A change-point
+ * detector first finds traffic-level shifts (two-unit totals compared on
+ * both sides of each bucket; strong ratio + significance marks a candidate,
+ * 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. Mass past a detected change
+ * 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.
+ */
+export function smooth(counts, binMinutes, unitMinutes, {
+  detectorWindowMinutes = 2 * unitMinutes,
+  // Count thresholds are defined per hour and scale with the unit, so
+  // "low traffic" means the same thing on hourly and daily views
+  // (5-20 events/hour = 120-480/day on the month+ ranges).
+  highTrafficEvents = 10 * unitMinutes / 60,
+  minRatio = 2.5,
+  minSignificance = 4,
+} = {}) {
+  const n = counts.length
+  if (!n) return counts
+  const detectorWindowBins = Math.max(1, Math.round(detectorWindowMinutes / binMinutes))
+
+  const cumsum = new Float64Array(n + 1)
+  for (let i = 0; i < n; i++) cumsum[i + 1] = cumsum[i] + counts[i]
+
+  // Detect abrupt regime changes from aggregated traffic on both sides.
+  // Individual bins are deliberately ignored because even high traffic
+  // produces many 0-1 count bins at five-minute resolution.
+  const score = new Float64Array(n)
+  const candidate = new Uint8Array(n)
+  for (let i = detectorWindowBins; i < n - detectorWindowBins; i++) {
+    const left = cumsum[i] - cumsum[i - detectorWindowBins]
+    const right = cumsum[i + detectorWindowBins] - cumsum[i]
+    const high = Math.max(left, right)
+    const low = Math.min(left, right)
+    if (high < highTrafficEvents) continue
+    const ratio = (high + 1) / (low + 1)
+    const significance = (high - low) / Math.sqrt(high + low + 1)
+    if (ratio >= minRatio && significance >= minSignificance) {
+      candidate[i] = 1
+      score[i] = significance * Math.log(ratio)
+    }
+  }
+
+  // Collapse each continuous detector region to its strongest boundary.
+  const edges = []
+  for (let i = 0; i < n;) {
+    if (!candidate[i]) { i++; continue }
+    let j = i + 1
+    while (j < n && candidate[j]) j++
+    let best = i
+    for (let k = i + 1; k < j; k++) {
+      if (score[k] > score[best]) best = k
+    }
+    edges.push(best)
+    i = j
+  }
+
+  // Fixed sigma: N events in one bucket peak at N events per unit.
+  // sigma_bins * sqrt(2*pi) = rate = unitMinutes / binMinutes.
+  const sigmaBins = unitMinutes / (binMinutes * Math.sqrt(2 * Math.PI))
+  const radius = Math.ceil(4 * sigmaBins)
+
+  // 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. Mass that would fall past a detected
+  // change point is dropped and the kernel renormalized; mass that would
+  // 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
+      // Collect (target bin, weight) pairs over the full kernel, folding
+      // mirrored mass at series edges and dropping mass past change points.
+      const spread = new Map()
+      let weightSum = 0
+      for (let i = j - radius; i <= j + radius; i++) {
+        let k = i
+        // 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 (const [k, w] of spread) {
+        smoothed[lo + k] += count * w / weightSum
+      }
+    }
+  }
+  return [...smoothed]
+}
+
+/**
+ * Catmull-Rom spline through the (smoothed) points, control points clamped
+ * to the plot area so the curve can never dip below zero or above the max.
+ */
+export function spline(pts) {
+  if (pts.length < 3) {
+    return `M${pts.map((p) => `${p.x},${p.y}`).join('L')}`
+  }
+  const clampY = (y) => Math.min(CHART_H, Math.max(PAD_TOP, y))
+  let d = `M${pts[0].x},${pts[0].y}`
+  for (let i = 0; i < pts.length - 1; i++) {
+    const p0 = pts[i - 1] || pts[i]
+    const p1 = pts[i]
+    const p2 = pts[i + 1]
+    const p3 = pts[i + 2] || p2
+    const c1y = clampY(p1.y + (p2.y - p0.y) / 6)
+    const c2y = clampY(p2.y - (p3.y - p1.y) / 6)
+    d += `C${p1.x + (p2.x - p0.x) / 6},${c1y} `
+      + `${p2.x - (p3.x - p1.x) / 6},${c2y} ${p2.x},${p2.y}`
+  }
+  return d
+}
+
+/** Build a full chart model from a series descriptor produced by time.js. */
+export function buildChart(input, now = Date.now()) {
+  if (!input || !input.series.length) return null
+  if (input.unit === '5min') return buildDayChart(input, now)
+  const { series, t0, t1, rate, binMinutes, unitMinutes, unit } = input
+  // Values are per-unit rates (hour on the week view, day on month+); the
+  // y max is derived from the *smoothed* curves so random single-bucket
+  // spikes don't blow up the scale. Smoothing works on raw counts (its edge
+  // detector thresholds are count-based), the result is scaled back to rates.
+  const smoothed = series.map((s) =>
+    smooth(s.points.map((p) => p.count), binMinutes, unitMinutes).map((v) => v * rate))
+  // Scale from the current/primary series only; older overlay weeks are drawn
+  // with the same scale and allowed to overflow if they are busier.
+  const highest = Math.max(0, ...smoothed[0])
+  const { max, step, minor } = yScale(highest)
+  const x = (t) => ((t - t0) / (t1 - t0)) * CHART_W
+  const y = (v) => PAD_TOP + (1 - Math.max(0, v) / max) * (CHART_H - PAD_TOP)
+  const drawn = series.map((s, si) => {
+    const pts = s.points.map((p, i) => ({ x: x(p.t), y: y(smoothed[si][i]) }))
+    const line = spline(pts)
+    const first = pts[0]
+    const last = pts.at(-1)
+    return {
+      ...s,
+      line,
+      area: s.area ? `${line}L${last.x},${CHART_H}L${first.x},${CHART_H}Z` : null,
+    }
+  })
+  // Major (labeled) and minor (hairline) y grid ticks.
+  const majors = []
+  const minors = []
+  const nMajor = Math.round(max / step)
+  for (let k = 0; k <= nMajor; k++) {
+    const v = k * step
+    majors.push({ value: v, y: y(v), label: fmtY(v) })
+  }
+  if (minor) {
+    for (let v = minor; v < max; v += minor) {
+      if (v % step !== 0) minors.push({ y: y(v) })
+    }
+  }
+  // X ticks. Week view: weekday labels centered at midday UTC, no vertical
+  // lines (day boundaries would be misleading in the viewer's timezone).
+  // Month view: likewise lineless, day numbers at noon UTC with the month
+  // name substituted for the 1st (marking the month change). Longer
+  // ranges: boundary lines at Mondays / months / years.
+  const isWeek = t1 - t0 === WEEK
+  const isMonth = !isWeek && t1 - t0 <= 31 * DAY
+  let xticks
+  if (isWeek) {
+    xticks = Array.from({ length: 7 }, (_, d) => {
+      const t = t0 + d * DAY + 12 * HOUR
+      return {
+        x: x(t),
+        label: new Date(t).toLocaleDateString(undefined, {
+          weekday: 'short', timeZone: 'UTC',
+        }),
+        line: false,
+      }
+    })
+  } else if (isMonth) {
+    // t0 is day-aligned; label every day whose noon falls inside the range.
+    xticks = []
+    for (let day = t0; day + 12 * HOUR < t1; day += DAY) {
+      const date = new Date(day)
+      const t = day + 12 * HOUR
+      xticks.push({
+        x: x(t),
+        label: date.getUTCDate() === 1
+          ? date.toLocaleDateString(undefined, { month: 'short', timeZone: 'UTC' })
+          : String(date.getUTCDate()),
+        line: false,
+      })
+    }
+  } else {
+    xticks = xticksFor(t0, t1).map((t) => ({
+      x: x(t), label: fmtTick(t, t1 - t0), line: true,
+    }))
+  }
+  return { max, majors, minors, series: drawn, xticks, unit }
+}
+
+/**
+ * Day view: 5-minute bars for the last 24 hours. Bars are drawn at raw
+ * counts; the skyline uses a projected full-bucket value for the still-open
+ * final bucket. The y scale is derived from the projected skyline maximum.
+ */
+export function buildDayChart(input, now = Date.now()) {
+  const { series, t0, t1 } = input
+  const points = series[0]?.points || []
+  const n = points.length
+  if (!n) return null
+  const bucketMs = (t1 - t0) / n
+  const bucketWidth = CHART_W / n
+  const gap = 0.2
+  const barWidth = Math.max(0.2, bucketWidth - gap)
+
+  const x = (i) => i * bucketWidth + gap / 2
+  const prevRaw = n > 1 ? points[n - 2].count : 0
+  const projected = points.map((p, i) => {
+    if (i !== n - 1) return p.count
+    const bucketStart = t0 + i * bucketMs
+    const elapsed = Math.max(1, Math.min(bucketMs, now - bucketStart))
+    // Blend the observed partial bucket with the previous full bucket:
+    // the longer the current bucket has run, the less we borrow from it.
+    const share = elapsed / bucketMs
+    return p.count + prevRaw * (1 - share)
+  })
+  const highest = Math.max(0, ...projected)
+  const { max, step, minor } = yScale(highest)
+  const y = (v) => PAD_TOP + (1 - Math.max(0, v) / max) * (CHART_H - PAD_TOP)
+
+  const bars = points.map((p, i) => {
+    const bx = x(i)
+    const by = y(p.count)
+    return {
+      x: bx,
+      y: by,
+      width: barWidth,
+      height: CHART_H - by,
+      raw: p.count,
+      projected: projected[i],
+    }
+  })
+
+  let skyline = ''
+  for (let i = 0; i < bars.length; i++) {
+    const b = bars[i]
+    const top = y(b.projected)
+    if (i === 0) {
+      skyline += `M${b.x},${top} H${b.x + b.width}`
+    } else {
+      skyline += ` V${top} H${b.x + b.width}`
+    }
+  }
+
+  const majors = []
+  const minors = []
+  const nMajor = Math.round(max / step)
+  for (let k = 0; k <= nMajor; k++) {
+    const v = k * step
+    majors.push({ value: v, y: y(v), label: fmtY(v) })
+  }
+  if (minor) {
+    for (let v = minor; v < max; v += minor) {
+      if (v % step !== 0) minors.push({ y: y(v) })
+    }
+  }
+
+  const xticks = []
+  const tickStep = 3 * HOUR
+  const firstTick = Math.ceil(t0 / tickStep) * tickStep
+  for (let t = firstTick; t < t1; t += tickStep) {
+    if (t < t0) continue
+    const d = new Date(t)
+    xticks.push({
+      x: ((t - t0) / (t1 - t0)) * CHART_W,
+      label: `${String(d.getUTCHours()).padStart(2, '0')}:00`,
+      line: false,
+    })
+  }
+  return { bars, skyline: skyline.trim(), max, majors, minors, xticks, unit: '5min', series: [] }
+}
+
+/** X ticks for year/all: Monday boundaries up to a quarter, UTC month
+ *  boundaries up to a few years, then years. */
+export function xticksFor(t0, t1) {
+  const span = t1 - t0
+  const ticks = []
+  if (span <= 100 * DAY) {
+    for (let t = mondayUTC(t0); t <= t1; t += WEEK) {
+      if (t >= t0) ticks.push(t)
+    }
+    return ticks
+  }
+  if (span <= 4 * 365 * DAY) {
+    const d = new Date(t0)
+    let t = Date.UTC(d.getUTCFullYear(), d.getUTCMonth() + 1, 1)
+    for (; t <= t1;) {
+      ticks.push(t)
+      const m = new Date(t)
+      t = Date.UTC(m.getUTCFullYear(), m.getUTCMonth() + 1, 1)
+    }
+    return ticks
+  }
+  const d = new Date(t0)
+  for (let yr = d.getUTCFullYear() + 1; Date.UTC(yr, 0, 1) <= t1; yr++) {
+    ticks.push(Date.UTC(yr, 0, 1))
+  }
+  return ticks
+}
+
+export function fmtTick(t, span) {
+  const d = new Date(t)
+  if (span <= 100 * DAY) {
+    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', timeZone: 'UTC' })
+  }
+  if (span <= 4 * 365 * DAY) {
+    return d.getUTCMonth() === 0
+      ? d.toLocaleDateString(undefined, { year: 'numeric', timeZone: 'UTC' })
+      : d.toLocaleDateString(undefined, { month: 'short', timeZone: 'UTC' })
+  }
+  return d.toLocaleDateString(undefined, { year: 'numeric', timeZone: 'UTC' })
+}
+
+/** Y labels use the same compact formatter as text labels. */
+export function fmtY(v) {
+  return formatCount(v)
+}

frontend/src/analytics/format.js

@@ -0,0 +1,572 @@
+/**
+ * Formatters and aggregators for summary sections: totals and the recent
+ * visit trail.
+ */
+
+/**
+ * IPv4 unchanged, IPv6 returns the /64 network prefix in compact form.
+ * Falls back to the original value when parsing fails.
+ */
+export const hostIP = (ip) => {
+  try {
+    if (!ip || !ip.includes(':')) return ip
+    const strip = (s) => s.replace(/^\[|\]$/g, '')
+    const norm = strip(new URL(`http://[${ip}]/`).hostname)
+    const [l, r] = norm.split('::').map((s) => (s ? s.split(':') : []))
+    const full = r
+      ? [...l, ...Array(8 - l.length - r.length).fill('0'), ...r]
+      : l
+    return strip(
+      new URL(`http://[${full.slice(0, 4).join(':')}::]/`).hostname,
+    ).replace(/::$/, '')
+  } catch (e) {
+    console.error('hostIP processing failed for:', ip, e)
+    return ip
+  }
+}
+
+function showCopiedFeedback(el) {
+  if (!el || typeof document === 'undefined') return
+  const popup = document.createElement('span')
+  popup.textContent = 'Copied!'
+  popup.className = 'copy-popup'
+  popup.style.cssText =
+    'position:absolute;bottom:calc(100% + 0.25rem);left:50%;' +
+    'transform:translateX(-50%);padding:0.15rem 0.4rem;' +
+    'background:var(--text, CanvasText);color:var(--bg, Canvas);' +
+    'border-radius:0.25rem;font-size:0.75rem;white-space:nowrap;' +
+    'pointer-events:none;z-index:10;'
+  el.classList.add('has-copy-popup')
+  el.appendChild(popup)
+  setTimeout(() => {
+    popup.remove()
+    el.classList.remove('has-copy-popup')
+  }, 1200)
+}
+
+/** Copy the full IP to the clipboard and show a brief "Copied!" popup. */
+export async function copyIp(ip, event) {
+  if (!ip) return
+  const el = event?.currentTarget
+  try {
+    await navigator.clipboard.writeText(ip)
+    showCopiedFeedback(el)
+  } catch {
+    /* ignore */
+  }
+}
+
+/** Copy arbitrary text to the clipboard and show a brief "Copied!" popup. */
+export async function copyList(text, event) {
+  if (!text) return
+  const el = event?.currentTarget
+  try {
+    await navigator.clipboard.writeText(text)
+    showCopiedFeedback(el)
+  } catch {
+    /* ignore */
+  }
+}
+
+/** Total page views across every page and every bucket. */
+export function calcTotalViews(views) {
+  let n = 0
+  for (const buckets of Object.values(views || {})) {
+    for (const c of Object.values(buckets)) n += c
+  }
+  return n
+}
+
+// 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 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(read)) {
+      if (s >= MIN_READ_SECONDS) {
+        ; (perArticle[path] || (perArticle[path] = [])).push(s)
+      }
+    }
+  }
+  const avgMinPerVisit = visitCount
+    ? Math.max(1, Math.round(totalVisitSeconds / visitCount / 60))
+    : 0
+
+  let articleMedianSum = 0
+  const articleCount = Object.keys(perArticle).length
+  for (const arr of Object.values(perArticle)) {
+    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
+    articleMedianSum += Math.max(MIN_READ_SECONDS, median)
+  }
+  const avgArticleMedianMin = articleCount
+    ? Math.max(1, Math.round(articleMedianSum / articleCount / 60))
+    : 0
+
+  return { avgMinPerVisit, avgArticleMedianMin }
+}
+
+/** Build a path -> page title lookup from the site tree. */
+function buildTitleMap(pageTree) {
+  const titles = new Map()
+  const walk = (items) => {
+    for (const item of items || []) {
+      titles.set(`/${item.path}`, item.title)
+      walk(item.children)
+    }
+  }
+  walk(pageTree)
+  return titles
+}
+
+/** Last path segment for display; front page becomes a house icon. */
+function slugOf(path) {
+  return path === '/' ? '🏠︎' : path.split('/').pop()
+}
+
+/** Host name of an external https origin, with scheme and www. stripped. */
+function externalSlug(origin) {
+  try {
+    return new URL(origin).host.replace(/^www\./, '')
+  } catch {
+    return origin.replace(/^https?:\/\//, '').replace(/^www\./, '')
+  }
+}
+
+/** Origin (scheme://host) of an external https URL, for favicon lookup. */
+function externalOrigin(url) {
+  try {
+    return new URL(url).origin
+  } catch {
+    return ''
+  }
+}
+
+/** Format one trail step: an internal page or an external https origin. */
+function stepOf(path, titles) {
+  if (path?.startsWith('/')) {
+    return { path, slug: slugOf(path), title: titles.get(path) || '', external: false, home: path === '/' }
+  }
+  if (path?.startsWith('https://')) {
+    return {
+      path,
+      slug: externalSlug(path),
+      title: 'External site',
+      external: true,
+      origin: externalOrigin(path),
+    }
+  }
+  return null
+}
+
+/**
+ * Human-readable relative timestamp.  Adapted from cista-storage: uses
+ * ``Intl.RelativeTimeFormat`` for short intervals and a compact date for
+ * anything older than a week.
+ */
+export function formatWhen(ts, now = Date.now()) {
+  const date = new Date(ts)
+  const diff = date.getTime() - now
+  const adiff = Math.abs(diff)
+  const formatter = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
+  if (adiff <= 5000) return 'now'
+  if (adiff <= 60000) {
+    return formatter
+      .format(Math.round(diff / 1000), 'second')
+      .replace(' ago', '')
+      .replaceAll(' ', '\u202F')
+  }
+  if (adiff <= 3600000) {
+    return formatter
+      .format(Math.round(diff / 60000), 'minute')
+      .replace('utes', '')
+      .replace('ute', '')
+      .replaceAll(' ', '\u202F')
+  }
+  if (adiff <= 86400000) {
+    return formatter
+      .format(Math.round(diff / 3600000), 'hour')
+      .replace('hours', 'h')
+      .replace('hour', 'h')
+      .replaceAll(' ', '\u202F')
+  }
+  if (adiff <= 604800000) {
+    return formatter
+      .format(Math.round(diff / 86400000), 'day')
+      .replaceAll(' ', '\u202F')
+  }
+  let d = date
+    .toLocaleDateString('en-ie', {
+      weekday: 'short',
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    })
+    .replace('Sept', 'Sep')
+  if (d.length === 14) d = d.replace(' ', ' \u2007')
+  d = d.replaceAll(' ', '\u202F').replace('\u202F', '\u00A0')
+  d = d.slice(0, -4) + d.slice(-2)
+  return d
+}
+
+/** Full UTC timestamp for tooltips, e.g. "2026-08-21 00:20:48 UTC". */
+export function formatWhenTooltip(ts) {
+  return new Date(ts).toISOString().replace('T', ' ').replace('Z', ' UTC')
+}
+
+/** Full local timestamp for tooltips, e.g. "21 Aug 2026, 17:38:48". */
+export function formatWhenLocal(ts) {
+  return new Date(ts).toLocaleString('en-ie', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  })
+}
+
+/** Preserve locale case with the region/country subtag upper-cased. */
+export function formatLang(value) {
+  if (!value || value === '—') return value
+  const parts = value.split('-')
+  if (parts.length > 1) {
+    parts[parts.length - 1] = parts[parts.length - 1].toUpperCase()
+  }
+  return parts.join('-')
+}
+
+/** ISO 8601 UTC timestamp without subseconds, e.g. "2026-08-21T00:20:48Z". */
+export function formatWhenIso(ts) {
+  return `${new Date(ts).toISOString().split('.')[0]}Z`
+}
+
+/**
+ * Compact read time for tooltips: "50s" under a minute, "1m23s" otherwise.
+ */
+export function formatReadTime(seconds) {
+  if (seconds < 60) return `${seconds}s`
+  return `${Math.floor(seconds / 60)}m${seconds % 60}s`
+}
+
+/**
+ * Compact visitor counts: plain below 1k, then 1.2k / 10k / 1.2M.
+ * Truncated, not rounded.
+ */
+export function formatCount(n) {
+  if (n < 1000) return String(n)
+  if (n < 10000) return `${Math.trunc(n / 1000)}.${Math.trunc((n % 1000) / 100)}k`
+  if (n < 1_000_000) return `${Math.trunc(n / 1000)}k`
+  return `${Math.trunc(n / 1_000_000)}.${Math.trunc((n % 1_000_000) / 100_000)}M`
+}
+
+/**
+ * Format recent visits for display, newest first. Each step is a linked slug
+ * pointing to its article; external referers/origins are shown as their
+ * domain name with the full origin as the link href. The link title shows the
+ * article heading when known, or "External site" for origins.
+ */
+export function formatRecentVisits(visits, pageTree, limit = 50) {
+  const titles = buildTitleMap(pageTree)
+  return [...visits]
+    .reverse()
+    .map((v) => ({
+      when: new Date(v.start).toLocaleString(),
+      steps: [v.referer, ...Object.values(v.trail || {}).map((t) => t.to)]
+        .map((p) => stepOf(p, titles))
+        .filter(Boolean),
+    }))
+    .filter((v) => v.steps.length)
+    .slice(0, limit)
+}
+
+/**
+ * Count distinct values of a visit field, sorted most-common first.
+ * Returns an array of [value, count] pairs.
+ */
+export function countByField(visits, field) {
+  const counts = {}
+  for (const v of visits || []) {
+    const value = v[field]
+    if (!value) continue
+    counts[value] = (counts[value] || 0) + 1
+  }
+  return Object.entries(counts).sort((a, b) => b[1] - a[1])
+}
+
+/**
+ * Count UTM parameter occurrences across visits.  Each distinct
+ * ``parameter: value`` pair is counted separately.  Returns [pair, count].
+ */
+export function countUtmTags(visits) {
+  const counts = {}
+  for (const v of visits || []) {
+    for (const [key, value] of Object.entries(v.utm || {})) {
+      const label = `${key}: ${value}`
+      counts[label] = (counts[label] || 0) + 1
+    }
+  }
+  return Object.entries(counts).sort((a, b) => b[1] - a[1])
+}
+
+/** Format a list of [value, count] pairs for inline display. */
+export function formatCounts(entries) {
+  return entries.map(([value, count]) => `${value} (${count})`).join(', ')
+}
+
+/**
+ * Count distinct User-Agent strings among crawler hits, most common first.
+ * Returns an array of [ua, count] pairs.  ``clients`` maps client hashes to
+ * client records.
+ */
+export function countCrawlerUas(crawlers, clients) {
+  const counts = {}
+  for (const c of crawlers || []) {
+    const client = (clients || {})[c.client] || {}
+    const value = client.ua_pretty || client.ua || '(no UA)'
+    counts[value] = (counts[value] || 0) + 1
+  }
+  return Object.entries(counts).sort((a, b) => b[1] - a[1])
+}
+
+/**
+ * Reduce a reverse-DNS hostname to its right-most components that fit
+ * within ``limit`` characters.  This keeps the meaningful main domain
+ * while avoiding absurdly long subdomains like ``xxx.yyy.zzz...provider.net``.
+ */
+export function mainDomain(host, limit = 24) {
+  if (!host) return host
+  const labels = host.split('.').filter(Boolean)
+  if (!labels.length) return host
+  const parts = [labels.pop()]
+  while (labels.length) {
+    const next = labels[labels.length - 1]
+    const candidate = `${next}.${parts.join('.')}`
+    if (candidate.length > limit) break
+    parts.unshift(labels.pop())
+  }
+  return parts.join('.')
+}
+
+/**
+ * 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 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()) {
+  const titles = buildTitleMap(pageTree)
+  const groups = new Map()
+  for (const c of crawlers || []) {
+    const client = (clients || {})[c.client] || {}
+    const g = groups.get(c.client) || {
+      clientHash: c.client,
+      client,
+      lastStart: 0,
+      pages: new Map(),
+    }
+    const start = new Date(c.start).getTime()
+    if (start > g.lastStart) g.lastStart = start
+    if (c.entry?.startsWith('/')) {
+      const existing = g.pages.get(c.entry) || { count: 0, status: c.status || 200 }
+      existing.count += 1
+      if (c.status != null) existing.status = c.status
+      g.pages.set(c.entry, existing)
+    }
+    groups.set(c.client, g)
+  }
+  const totalHits = (g) => {
+    let n = 0
+    for (const p of g.pages.values()) n += p.count
+    return n
+  }
+  return [...groups.values()]
+    .sort((a, b) => b.lastStart - a.lastStart || totalHits(b) - totalHits(a))
+    .slice(0, 10)
+    .map((g) => {
+      const client = g.client || {}
+      const host = client.host || ''
+      const isHost = !!host
+      return {
+        lastSeen: formatWhen(g.lastStart, now),
+        lastSeenIso: formatWhenIso(g.lastStart),
+        lastSeenLocal: formatWhenLocal(g.lastStart),
+        pages: [...g.pages.entries()]
+          .sort((a, b) => b[1].count - a[1].count)
+          .map(([path, info]) => ({ ...stepOf(path, titles), count: info.count, status: info.status })),
+        ip: client.ip || '',
+        ipDisplay: isHost ? mainDomain(host) : hostIP(client.ip) || client.ip || '—',
+        isHost,
+        ua: client.ua_pretty || client.ua || '—',
+        uaRaw: client.ua || '',
+        lang: client.lang || '—',
+        langDisplay: formatLang(client.lang),
+        country: client.country || '—',
+        city: client.city || '—',
+        total: totalHits(g),
+      }
+    })
+}
+
+/**
+ * Group abuse hits by IP and format each group as a row with the full paths
+ * probed.  Identical paths are collapsed into one entry with their hit count.
+ * Flagged paths (the ones that triggered abuse classification) are lifted to
+ * the top, followed by other 404s, then document GETs from the abuser.  Within
+ * each category paths are sorted by count descending, then earliest first.
+ * Rows are sorted by most recent hit first.  Visitor metadata comes from the
+ * latest client hash seen for the IP; ``clientCount`` tells the visitor cell
+ * how many distinct client variations the IP produced.  Paths are shown
+ * verbatim (query string included), not resolved against the page tree.
+ * ``clients`` maps client hashes to client records.
+ */
+export function formatAbuseRows(abuse, clients, now = Date.now()) {
+  const groups = new Map()
+  for (const a of abuse || []) {
+    const client = (clients || {})[a.client] || {}
+    const ip = client.ip || ''
+    const g = groups.get(ip) || {
+      ip,
+      pathCounts: new Map(),
+      clientHashes: new Set(),
+      lastStart: 0,
+      lastClient: a.client,
+    }
+    const start = new Date(a.start).getTime()
+    if (start > g.lastStart) {
+      g.lastStart = start
+      g.lastClient = a.client
+    }
+    const path = a.path || ''
+    const existing = g.pathCounts.get(path) || {
+      path,
+      count: 0,
+      firstStart: start,
+      flag: a.flag || false,
+      is_404: a.is_404 || false,
+    }
+    existing.count += 1
+    if (start < existing.firstStart) existing.firstStart = start
+    if (a.flag) existing.flag = true
+    if (!a.is_404) existing.is_404 = false
+    g.pathCounts.set(path, existing)
+    g.clientHashes.add(a.client)
+    groups.set(ip, g)
+  }
+  const totalHits = (g) => {
+    let n = 0
+    for (const p of g.pathCounts.values()) n += p.count
+    return n
+  }
+  return [...groups.values()]
+    .sort((a, b) => b.lastStart - a.lastStart)
+    .slice(0, 10)
+    .map((g) => {
+      const pathCategory = (p) => (p.flag ? 0 : p.is_404 ? 1 : 2)
+      const paths = [...g.pathCounts.values()].sort(
+        (a, b) =>
+          pathCategory(a) - pathCategory(b) ||
+          b.count - a.count ||
+          a.firstStart - b.firstStart,
+      )
+      const client = (clients || {})[g.lastClient] || {}
+      const host = client.host || ''
+      const isHost = !!host
+      return {
+        lastSeen: formatWhen(g.lastStart, now),
+        lastSeenIso: formatWhenIso(g.lastStart),
+        lastSeenLocal: formatWhenLocal(g.lastStart),
+        paths: paths.map((p) => ({
+          path: p.path,
+          count: p.count,
+          flag: p.flag,
+          is_404: p.is_404,
+        })),
+        allPaths: paths
+          .map((p) => (p.count > 1 ? `${p.count}× ${p.path}` : p.path))
+          .join('\n'),
+        clientCount: g.clientHashes.size,
+        ip: client.ip || g.ip,
+        ipDisplay: isHost ? mainDomain(host) : hostIP(client.ip || g.ip) || client.ip || g.ip || '—',
+        isHost,
+        ua: client.ua_pretty || client.ua || '—',
+        uaRaw: client.ua || '',
+        lang: client.lang || '—',
+        langDisplay: formatLang(client.lang),
+        country: client.country || '—',
+        city: client.city || '—',
+        total: totalHits(g),
+      }
+    })
+}
+
+/**
+ * Format raw visit records as rows for a technical table.  Returns objects
+ * with display strings; missing values become "—".  ``trail`` starts with the
+ * external referer (when present), then the entry page and any further internal
+ * pages or external exit origins. Only the 20 most recent visits are shown.
+ * ``clients`` maps client hashes to client records.
+ */
+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 trail = Object.values(v.trail || {})
+      .map((item) => {
+        const step = stepOf(item.to, titles)
+        if (step) {
+          if (item.read) step.readSeconds = item.read
+          if (item.status) step.status = item.status
+        }
+        return step
+      })
+      .filter(Boolean)
+    const utmKeys = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content']
+    const utmValues = utmKeys.map((k) => (v.utm || {})[k]).filter(Boolean)
+    const utm = utmValues.length ? utmValues.join(' · ') : ''
+    const utmTitle = Object.entries(v.utm || {})
+      .map(([k, value]) => `${k}=${value}`)
+      .join(', ')
+    const dash = (s) => (s || '—')
+    const host = client.host || ''
+    const isHost = !!host
+    return {
+      lastSeen: formatWhen(v.start, now),
+      lastSeenIso: formatWhenIso(v.start),
+      lastSeenLocal: formatWhenLocal(v.start),
+      langDisplay: formatLang(client.lang),
+      trail,
+      refererStep: stepOf(v.referer, titles),
+      referer: dash(v.referer),
+      ip: client.ip || '',
+      ipDisplay: isHost ? mainDomain(host) : hostIP(client.ip) || client.ip || '—',
+      isHost,
+      lang: dash(client.lang),
+      country: dash(client.country),
+      city: dash(client.city),
+      ua: client.ua_pretty || client.ua || '—',
+      uaRaw: client.ua || '',
+      utm: utm || '—',
+      utmTitle,
+    }
+  })
+}

frontend/src/analytics/time.js

@@ -0,0 +1,267 @@
+/**
+ * Time ranges, week alignment and re-bucketing for analytics charts.
+ *
+ * Raw data comes as sparse 5-minute buckets; the range picks the x window
+ * and a coarser bucket size to keep point counts sane. The week range is
+ * aligned to Monday 00:00 UTC and overlays previous weeks' curves (fading
+ * with age), so weekly patterns compare directly.
+ */
+
+export const MIN5 = 5 * 60e3
+export const HOUR = 3600e3
+export const DAY = 86400e3
+export const WEEK = 7 * DAY
+
+export const RANGES = {
+  day: { label: 'day', span: DAY, bucket: MIN5 },
+  week: { label: 'week' },
+  month: { label: 'month', span: 30 * DAY, bucket: 6 * HOUR },
+  year: { label: 'year', span: 365 * DAY, bucket: DAY },
+  all: { label: 'all', span: null, bucket: DAY, minSpan: 30 * DAY },
+}
+
+/** Monday 00:00 UTC of the week containing t (epoch day 0 was a Thursday). */
+export function mondayUTC(t) {
+  const d = Math.floor(t / DAY)
+  return (d - ((d + 3) % 7)) * DAY
+}
+
+/** ISO 8601 week number of the week containing t (via its Thursday). */
+export function isoWeek(t) {
+  const d = new Date(t)
+  d.setUTCHours(0, 0, 0, 0)
+  d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7))
+  const yearStart = Date.UTC(d.getUTCFullYear(), 0, 1)
+  return Math.ceil(((d - yearStart) / DAY + 1) / 7)
+}
+
+/** Parse sparse timestamp buckets into a { epochMs: count } map. */
+export function rawTimes(buckets) {
+  const raw = {}
+  // Key by parsed timestamp: Python writes "+00:00", JS ISO uses "Z".
+  for (const [k, c] of Object.entries(buckets || {})) raw[Date.parse(k)] = c
+  return raw
+}
+
+/** Sum counts from raw 5-minute buckets between t0 (inclusive) and t1 (exclusive). */
+export function sumRange(raw, t0, t1) {
+  let n = 0
+  for (let s = t0; s < t1; s += MIN5) n += raw[s] || 0
+  return n
+}
+
+/**
+ * One series per overlaid week: [this week, 1 week ago, ...], at native
+ * 5-minute resolution, up to 8 weeks back (and only weeks that overlap the
+ * recorded data at all). Each older week's timestamps are shifted forward
+ * onto the current week's axis so all curves overlay inside the plot.
+ * The current week is truncated at the current bucket
+ * — no fake zeroes drawn for the future. Counts are rates per hour
+ * (bucket count * 12): a lone visit in a 5-minute bucket reads as "12/h".
+ * The coarser ranges use per-day rates instead (unitMinutes = 24*60).
+ */
+export function weeklySeries(buckets) {
+  const raw = rawTimes(buckets)
+  const times = Object.keys(raw).map(Number)
+  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
+  const count = Math.min(available, 8)
+  const out = []
+  for (let back = 0; back < count; back++) {
+    const start = thisMonday - back * WEEK
+    const end = back === 0
+      ? Math.min(start + WEEK, Math.floor(now / MIN5) * MIN5 + MIN5)
+      : start + WEEK
+    const points = []
+    for (let t = start; t < end; t += MIN5) {
+      points.push({ t: t + back * WEEK, count: raw[t] || 0 })
+    }
+    out.push({
+      points,
+      label: `Week ${isoWeek(start)}`,
+      opacity: Math.max(0.15, 1 - back * 0.25),
+      past: back > 0,
+      area: back === 0,
+    })
+  }
+  return {
+    series: out,
+    t0: thisMonday,
+    t1: thisMonday + WEEK,
+    rate: HOUR / MIN5,
+    binMinutes: 5,
+    unitMinutes: 60,
+    unit: 'hour',
+  }
+}
+
+/**
+ * Rolling window for the non-week ranges (x max = now), counts converted
+ * to per-day rates (the unit the month+ charts are read in).
+ * Ranges without a fixed span use the full data reach, but never less than
+ * their configured minSpan so the chart keeps a readable minimum x scale.
+ * t0 is aligned to the UTC day so the x labels cover the whole range;
+ * t1 is now, so the scale never extends into the future. The bucket size
+ * follows the resulting window (6h up to 31 days, daily beyond), so ranges
+ * covering the same window — "all" at its 30-day minimum vs "month" —
+ * render the identical curve.
+ */
+export function rollingSeries(buckets, rangeKey) {
+  const raw = rawTimes(buckets)
+  const times = Object.keys(raw).map(Number)
+  const { span, bucket, minSpan = 0 } = RANGES[rangeKey]
+  const t1 = Date.now()
+  const t0 = Math.floor((span != null
+    ? t1 - span
+    : 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
+  // (coarser edge detection, points a day apart plotted at bin starts, the
+  // last point stuck at today's midnight instead of reaching now).
+  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: sumRange(raw, t, t + bucketMs) })
+  }
+  return {
+    series: [{ points, label: '', opacity: 1, area: true }],
+    t0,
+    t1,
+    rate: DAY / bucketMs,
+    binMinutes: bucketMs / 60e3,
+    unitMinutes: 24 * 60,
+    unit: 'day',
+  }
+}
+
+/**
+ * Day view: raw 5-minute bucket counts for the current 24-hour window.
+ * No smoothing or rate conversion is applied; counts are used as-is.
+ */
+export function daySeries(buckets) {
+  const raw = rawTimes(buckets)
+  const now = Date.now()
+  const { span, bucket } = RANGES.day
+  const t1 = Math.floor(now / bucket) * bucket + bucket
+  const t0 = t1 - span
+  const points = []
+  for (let t = t0; t < t1; t += bucket) {
+    points.push({ t, count: raw[t] || 0 })
+  }
+  return {
+    series: [{ points, label: '', opacity: 1, area: false }],
+    t0,
+    t1,
+    rate: 1,
+    binMinutes: bucket / 60e3,
+    unitMinutes: bucket / 60e3,
+    unit: '5min',
+  }
+}
+
+/** Dispatch to daily, weekly or rolling series based on the selected range. */
+export function makeSeries(buckets, rangeKey) {
+  if (rangeKey === 'day') return daySeries(buckets)
+  if (rangeKey === 'week') return weeklySeries(buckets)
+  return rollingSeries(buckets, rangeKey)
+}
+
+/**
+ * Absolute UTC time window for a given range key. Used to filter visits,
+ * transitions and views for the non-chart stats on the analytics page.
+ * Every bounded range is a rolling span ending at now; the charts instead
+ * align week to Monday 00:00 UTC (overlaying previous weeks) and month+
+ * to UTC day boundaries, so their x windows differ from the stats range
+ * on purpose.
+ * Returns { t0, t1 } where null means unbounded.
+ */
+export function rangeWindow(rangeKey) {
+  const now = Date.now()
+  if (rangeKey === 'all') {
+    return { t0: null, t1: null }
+  }
+  const span = rangeKey === 'week' ? WEEK : RANGES[rangeKey].span
+  return { t0: now - span, t1: now }
+}
+
+/**
+ * Sum the bucketed transition matrix (from -> to -> bucket ISO -> count)
+ * into a plain from -> to -> count matrix for the window [t0, t1).
+ */
+export function filterTransitionsByRange(transitions, t0, t1) {
+  const out = {}
+  for (const [fr, tos] of Object.entries(transitions || {})) {
+    for (const [to, buckets] of Object.entries(tos)) {
+      let n = 0
+      for (const [k, c] of Object.entries(buckets)) {
+        const t = Date.parse(k)
+        if ((t0 == null || t >= t0) && (t1 == null || t < t1)) n += c
+      }
+      if (n) {
+        out[fr] = out[fr] || {}
+        out[fr][to] = n
+      }
+    }
+  }
+  return out
+}
+
+/** Keep only the 5-minute view buckets that fall inside [t0, t1). */
+export function filterViewsByRange(views, t0, t1) {
+  const filtered = {}
+  for (const [path, buckets] of Object.entries(views || {})) {
+    const out = {}
+    for (const [k, c] of Object.entries(buckets)) {
+      const t = Date.parse(k)
+      if ((t0 == null || t >= t0) && (t1 == null || t < t1)) out[k] = c
+    }
+    if (Object.keys(out).length) filtered[path] = out
+  }
+  return filtered
+}
+
+/** Keep only records whose start time falls inside [t0, t1). */
+export function filterRecordsByRange(records, t0, t1) {
+  const out = []
+  for (const r of records || []) {
+    const t = Date.parse(r.start)
+    if ((t0 == null || t >= t0) && (t1 == null || t < t1)) out.push(r)
+  }
+  return out
+}

frontend/src/analytics/transitions.js

@@ -0,0 +1,943 @@
+/**
+ * Radial transition map and helpers.
+ *
+ * Site map following the menu structure: top-level items in a row at the
+ * top (below the external source row), each item's subtree fanning out
+ * below it in menu order along a slightly circular downward arc. Index
+ * pages with no views are omitted, their children moving up in their
+ * place. All pages of the site are shown (from /_api/pages), plus any
+ * extra paths seen in transitions (deleted pages); these form their own
+ * top-level groups. Internal path -> path transitions join opposite
+ * 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 daily hit rate (base-2 log, one hit/day
+ * 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
+ * directional count.
+ * External sources appear as nodes in a row above the map. Sources are
+ * identified from visit records in this order: utm_campaign, utm_source,
+ * referer, then other utm_* tags. Visits with a UTM tag are grouped under
+ * that tag's value, not under the referer domain. A UTM source node only
+ * becomes a clickable link when every visit carrying that UTM tag came
+ * from the same referer. External exits are full-size nodes in a row below
+ * the map, mirroring the source row, so the site itself stays in the
+ * middle. Each distinct full exit URL is its own node. Self-loops (reload
+ * pings) are skipped.
+ */
+
+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
+// radius, used for layout clearance and placement; connectors and flows
+// use the exact outline geometry instead (pillContact below).
+export const TNODE_W = 160
+export const TNODE_H = 54
+const TNODE_BOUND = Math.hypot(TNODE_W, TNODE_H) / 2
+
+const PILL_R = TNODE_H / 2 // cap radius and straight-section half-height
+const PILL_OFF = TNODE_W / 2 - PILL_R // x offset of the cap centers
+
+/**
+ * Where the ray from a node center along (ux, uy) exits the pill outline
+ * (a capsule: straight top/bottom plus semicircular caps), enlarged by
+ * `margin`. Returns the distance `t` to the contact point and the outline
+ * arc position `s` of that point (see pillPointAt).
+ */
+const pillContact = (ux, uy, margin = 0) => {
+  const r = PILL_R + margin
+  const off = PILL_OFF + margin
+  const q = (Math.PI / 2) * r
+  // Straight top/bottom: valid when the crossing lands on the flat section.
+  let tf = Infinity
+  if (Math.abs(uy) > 1e-9) {
+    const t = r / Math.abs(uy)
+    if (Math.abs(t * ux) <= off + 1e-9) tf = t
+  }
+  // Rounded cap on the side the ray points to.
+  const cx = off * (ux >= 0 ? 1 : -1)
+  const disc = r * r - (cx * uy) ** 2
+  const tc = disc >= 0 ? cx * ux + Math.sqrt(disc) : Infinity
+  if (tf <= tc) {
+    const x = tf * ux
+    return { t: tf, s: uy > 0 ? q + off - x : q + 2 * off + Math.PI * r + x + off }
+  }
+  if (tc < Infinity) {
+    let th = Math.atan2(tc * uy, tc * ux - cx)
+    if (th < 0) th += 2 * Math.PI
+    const s = cx > 0
+      ? th <= Math.PI / 2
+        ? th * r
+        : q + 4 * off + Math.PI * r + (th - (3 * Math.PI) / 2) * r
+      : q + 2 * off + (th - Math.PI / 2) * r
+    return { t: tc, s }
+  }
+  return { t: TNODE_BOUND + margin, s: 0 }
+}
+
+/** Total perimeter of the (margined) pill outline. */
+const pillPerimeter = (margin = 0) =>
+  4 * (PILL_OFF + margin) + 2 * Math.PI * (PILL_R + margin)
+
+/**
+ * Point on the pill outline at arc position `s`, counterclockwise from the
+ * right cap tip: right cap up, top flat right-to-left, left cap down,
+ * bottom flat left-to-right, right cap up to the tip. Pills are never
+ * rotated, so the returned offset from the node center is in absolute
+ * coordinates.
+ */
+const pillPointAt = (s, margin = 0) => {
+  const r = PILL_R + margin
+  const off = PILL_OFF + margin
+  const P = pillPerimeter(margin)
+  const q = (Math.PI / 2) * r
+  s = ((s % P) + P) % P
+  if (s < q) {
+    const th = s / r
+    return [off + r * Math.cos(th), r * Math.sin(th)]
+  }
+  s -= q
+  if (s < 2 * off) return [off - s, r]
+  s -= 2 * off
+  if (s < Math.PI * r) {
+    const th = Math.PI / 2 + s / r
+    return [-off + r * Math.cos(th), r * Math.sin(th)]
+  }
+  s -= Math.PI * r
+  if (s < 2 * off) return [-off + s, -r]
+  s -= 2 * off
+  const th = (3 * Math.PI) / 2 + s / r
+  return [off + r * Math.cos(th), r * Math.sin(th)]
+}
+
+/** Unit tangent to the pill outline at arc position `s`, in the direction
+ * of increasing `s` (numeric; exact on both flats and caps). */
+const pillTangent = (s, margin = 0) => {
+  const [x1, y1] = pillPointAt(s - 0.5, margin)
+  const [x2, y2] = pillPointAt(s + 0.5, margin)
+  const m = Math.hypot(x2 - x1, y2 - y1) || 1
+  return [(x2 - x1) / m, (y2 - y1) / m]
+}
+
+// Edge width: half-width = WIDTH_GROWTH * log2(daily / DAILY_REF),
+// where `daily` is the connection's hit rate in hits/day (callers scale
+// raw counts by DAY / range). DAILY_REF hits/day renders zero width;
+// WIDTH_GROWTH is the half-width added per doubling of the rate.
+// Connections whose thin middle would render below MIN_WMID are culled
+// entirely (fainter strands are practically invisible), as are those
+// carrying less than PRUNE_FRACTION of the total traffic (this also
+// keeps the graph under ~100 connections).
+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 dailyRate * BEAD_RATE beads
+// per second (linear in the daily hit rate). The rate is much reduced
+// from real time to keep the animation lightweight. The component
+// simulates every bead independently in JS with a constant traversal
+// 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.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
+const MAX_EXT_OUT = 12 // exit nodes in the bottom row
+const EXT_GAP = 12 // vertical margin of the source/exit rows to the map
+
+/** Flatten the site tree into navigation order via DFS. */
+function buildNavigationOrder(pageTree) {
+  const order = new Map()
+  const walk = (items) => {
+    for (const item of items || []) {
+      const p = `/${item.path}`
+      if (!order.has(p)) order.set(p, order.size)
+      walk(item.children)
+    }
+  }
+  walk(pageTree)
+  return order
+}
+
+/** Map page paths to their article titles from the site tree. */
+function buildTitleMap(pageTree) {
+  const titles = new Map()
+  const walk = (items) => {
+    for (const item of items || []) {
+      titles.set(`/${item.path}`, item.title)
+      walk(item.children)
+    }
+  }
+  walk(pageTree)
+  return titles
+}
+
+/** Extract internal page-to-page transitions, excluding self-loops. */
+function collectInternalTransitions(transitions) {
+  const internal = []
+  for (const [fr, tos] of Object.entries(transitions || {})) {
+    if (!fr.startsWith('/')) continue
+    for (const [to, count] of Object.entries(tos)) {
+      if (to.startsWith('/') && to !== fr) internal.push({ fr, to, count })
+    }
+  }
+  return internal
+}
+
+/** Domain-only label for an external origin (path and www. removed).
+ *  Pills clip the text at their border; no length cap needed. */
+function extLabel(ext) {
+  try {
+    return new URL(ext).hostname.replace(/^www\./, '')
+  } catch {
+    return ext.replace(/^https?:\/\//, '').replace(/^www\./, '').split('/')[0]
+  }
+}
+
+/**
+ * Collect outgoing external transitions: page path -> full exit URL.
+ * Aggregated per (URL, page) pair. Incoming external links are now derived
+ * from visit records (which carry UTM tags), so only exits remain here.
+ */
+function collectExitPairs(transitions) {
+  const pairs = new Map() // `${ext} ${page}` -> {ext, page, out}
+  for (const [fr, tos] of Object.entries(transitions || {})) {
+    if (!fr.startsWith('/')) continue // ignore external -> anything
+    for (const [to, count] of Object.entries(tos)) {
+      if (!to.startsWith('http')) continue
+      const k = `${to} ${fr}`
+      const p = pairs.get(k) || { ext: to, page: fr, out: 0 }
+      p.out += count
+      pairs.set(k, p)
+    }
+  }
+  return [...pairs.values()]
+}
+
+/** Build nodes with depth and a path lookup map; children are wired to parents. */
+function buildNodeTree(internal, navOrder) {
+  const paths = new Set(['/', ...navOrder.keys()])
+  for (const e of internal) { paths.add(e.fr); paths.add(e.to) }
+
+  const depth = (p) => (p === '/' ? 0 : p.split('/').length - 1)
+  const nodes = [...paths].map((p) => ({
+    path: p, depth: depth(p), angle: 0, children: [],
+  }))
+  const byPath = new Map(nodes.map((n) => [n.path, n]))
+
+  // Parent is the nearest ancestor present in the map, front page last.
+  const parentOf = (p) => {
+    let q = p
+    while (q !== '/') {
+      q = q.slice(0, q.lastIndexOf('/')) || '/'
+      if (byPath.has(q)) return byPath.get(q)
+    }
+    return byPath.get('/')
+  }
+  for (const n of nodes) {
+    if (n.path !== '/') parentOf(n.path).children.push(n)
+  }
+
+  return { nodes, byPath, root: byPath.get('/') }
+}
+
+/** Sort each node's children by navigation order, recursively. */
+function sortByNav(root, navOrder) {
+  const byNav = (a, b) =>
+    (navOrder.get(a.path) ?? Infinity) - (navOrder.get(b.path) ?? Infinity)
+    || a.path.localeCompare(b.path)
+  const walk = (n) => {
+    n.children.sort(byNav)
+    n.children.forEach(walk)
+  }
+  walk(root)
+}
+
+/** Compute median reading time per article in seconds. */
+function buildReadSeconds(visits) {
+  const times = {}
+  for (const v of visits || []) {
+    for (const [path, sec] of Object.entries(readMapOf(v))) {
+      if (sec >= MIN_READ_SECONDS) {
+        ; (times[path] || (times[path] = [])).push(sec)
+      }
+    }
+  }
+  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
+    seconds[path] = Math.round(median)
+  }
+  return seconds
+}
+
+/** Compute view counts, labels and hidden flags for each node. */
+function annotateNodes(nodes, viewsData, titles, readSeconds) {
+  const viewCount = (p) => {
+    let n = 0
+    for (const c of Object.values(viewsData?.[p] || {})) n += c
+    return n
+  }
+
+  for (const n of nodes) {
+    n.views = viewCount(n.path)
+    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())
+    n.title = titles.get(n.path) || ''
+    // Category (non-leaf) pages with no views in this window are omitted:
+    // their children move up in their place (see layoutGroups).
+    n.hidden = n.children.length > 0 && n.views === 0
+  }
+}
+
+/**
+ * Top-down layout following the menu structure: top-level items in an
+ * equally spaced row at the top (right below the external source row),
+ * the row following a shallow circular sag (center lowest) so connections
+ * between neighbors do not overlap the pills in between. Each top item's
+ * whole subtree fans out from it in menu (DFS preorder) order along a
+ * large-radius circular arc that leaves the parent heading straight down
+ * and gradually bends to the right — no horizontal space is reserved for fans, they
+ * extend under the slots to their right. Hidden index pages are omitted
+ * from the fan; when the top item itself is hidden, the fan shifts one
+ * slot up, the first visible child taking the top position. Branch lanes
+ * labeled with the branch slug (see the branch-lane pass at the end)
+ * keep the omitted menu levels visible.
+ */
+function layoutGroups(root) {
+  // Top slots are spaced well over one pill width apart regardless of
+  // fan sizes.
+  const SLOT = TNODE_W + 100
+  const CLEAR = TNODE_W * 0.8 // fan spacing per member along the curve
+
+  // First pass: visible members per group, in menu order. Hidden index
+  // pages are skipped, but their children still appear. The front page
+  // forms its own group. groupRoots keeps each group's subtree root for
+  // the branch-curve pass below.
+  const groups = []
+  const groupRoots = []
+  for (const g of [root, ...root.children]) {
+    const members = []
+    if (g === root) {
+      if (!g.hidden) members.push(g)
+    } else {
+      const walk = (n) => {
+        if (!n.hidden) members.push(n)
+        n.children.forEach(walk)
+      }
+      walk(g)
+    }
+    if (members.length) {
+      groups.push(members)
+      groupRoots.push(g)
+    }
+  }
+
+  // Top row on a large-radius circular arc whose bottom point is the
+  // LAST top item: each earlier item sits a bit higher (drop = 15% of
+  // the row span). Flat row when there is a single group.
+  const half = ((groups.length - 1) * SLOT) / 2 || 1
+  const span = (groups.length - 1) * SLOT
+  const topD = span * 0.15
+  const R_T = span ? (span * span + topD * topD) / (2 * topD) : 0
+  const topY = span
+    ? (x) => topD - R_T + Math.sqrt(R_T * R_T - (x - half) * (x - half))
+    : () => 0
+
+  // Second pass: place groups. Fan members follow a circular arc of
+  // large radius FAN_R centered at (gx + FAN_R, y0): the trail leaves
+  // the top node heading straight down (vertical tangent) and bends
+  // right gently, member i at arc angle π − i·CLEAR/FAN_R (spaced by
+  // arc length CLEAR). A circle — not a spline — so the branch lanes
+  // below can be concentric arcs: identical forms, only radii differ.
+  const FAN_R = 1000
+  groups.forEach((members, gi) => {
+    const gx = gi * SLOT - half
+    const y0 = topY(gx)
+    members[0].x = gx
+    members[0].y = y0
+    for (let i = 1; i < members.length; i++) {
+      const th = Math.PI - (i * CLEAR) / FAN_R
+      members[i].x = gx + FAN_R * (1 + Math.cos(th))
+      members[i].y = y0 + FAN_R * Math.sin(th)
+    }
+  })
+
+  // Branch lanes: one wide arc per path prefix (slug depth ≥ 1) whose
+  // subtree holds at least two visible nodes (a branch's visible nodes
+  // form one contiguous run in the fan's DFS preorder). Every lane of a
+  // group is an arc around the group's fan center with a radius one
+  // INDENT larger per parent level — concentric circles, so all lanes
+  // share exactly one form. Lanes span their branch's nodes plus a
+  // little extra tucked under the first/last pill (so the line caps are
+  // never visible) and run behind the pills. A label arc carries the
+  // branch slug, left-aligned just past the first pill and free to run
+  // to the lane's end — longer text simply passes under later pills,
+  // which are drawn on top. Hidden (unplaced) index pages still
+  // define a lane: it follows their promoted children, so lanes reflect
+  // the path structure rather than page existence.
+  const INDENT = 20 // lane spacing (radius) per nesting level (> lane width)
+  const END_TUCK = 22 // arc units tucked under the first/last pill
+  const GAP_TRIM = 32 // label arc clearance from the pills
+  // Labels are left-aligned on their guide: the guide starts just past the
+  // source pill's edge, the earliest point where the text is visible.
+  const LABEL_PAD = 6
+  // The label guide rides GUIDE_OFF outward of the lane centerline: the
+  // text's alphabetic baseline sits on the guide, so this puts the
+  // glyph middle (not the baseline) on the lane center at any zoom —
+  // dominant-baseline tricks are em-based and break under downscale.
+  const GUIDE_OFF = 3.5
+  const branches = []
+  groups.forEach((members, gi) => {
+    const g = groupRoots[gi]
+    if (g === root || members.length < 2) return
+    const idx = new Map(members.map((n, i) => [n, i]))
+    const C = [gi * SLOT - half + FAN_R, topY(gi * SLOT - half)]
+    const walk = (n) => {
+      let first = Infinity
+      let last = -1
+      const span = (m) => {
+        const k = idx.get(m)
+        if (k !== undefined) {
+          first = Math.min(first, k)
+          last = Math.max(last, k)
+        }
+        m.children.forEach(span)
+      }
+      span(n)
+      if (n.depth >= 1 && last > first) {
+        branches.push({ depth: n.depth, name: n.path.split('/').pop(), C, first, last })
+      }
+      n.children.forEach(walk)
+    }
+    walk(g)
+  })
+  const depthMax = branches.reduce((d, b) => Math.max(d, b.depth), 1)
+  let arcLeft = Infinity // leftmost lane point, for the bounding box
+  const arcs = branches.map(({ depth, name, C, first, last }) => {
+    const R = FAN_R + (depthMax - depth) * INDENT
+    const th = (i) => Math.PI - (i * CLEAR) / FAN_R
+    const pt = (a, r) => [C[0] + r * Math.cos(a), C[1] + r * Math.sin(a)]
+    // Arc from angle a down to angle b (a > b; visually counterclockwise
+    // from the west point downward, hence sweep flag 0).
+    const arc = (a, b, r) => {
+      const [x0, y0] = pt(a, r)
+      const [x1, y1] = pt(b, r)
+      return `M ${x0.toFixed(2)} ${y0.toFixed(2)} A ${r.toFixed(2)} ${r.toFixed(2)} 0 0 0 ${x1.toFixed(2)} ${y1.toFixed(2)}`
+    }
+    const d = arc(th(first) + END_TUCK / R, th(last) - END_TUCK / R, R)
+    // Start just past the first pill: lanes leave the source node nearly
+    // vertically, so the pill's extent along the arc is its half height.
+    // The guide runs to the lane's end so long slugs are never cut off.
+    const ld = arc(th(first) - (TNODE_H / 2 + LABEL_PAD) / R,
+      th(last) - END_TUCK / R, R + GUIDE_OFF)
+    arcLeft = Math.min(arcLeft, pt(th(first) + END_TUCK / R, R)[0])
+    return { d, ld, label: name }
+  })
+  // Top lane: an arc along the top row's own circle, connecting
+  // the top nodes of all groups and tucked under the first and last of
+  // them (the arc bottoms at the last item, so it continues rightward
+  // under its pill). Drawn 50% thicker than branch lanes. A 🏠︎ label
+  // marks the lane right after the home pill, on a guide arc like
+  // the branch labels but with the offset and clearance scaled up by the
+  // same 50% to keep the glyph centered on the wider lane.
+  if (span) {
+    const d = `M ${(-half - END_TUCK).toFixed(2)} ${topY(-half - END_TUCK).toFixed(2)} `
+      + `A ${R_T.toFixed(2)} ${R_T.toFixed(2)} 0 0 0 ${(half + END_TUCK).toFixed(2)} ${topY(half + END_TUCK).toFixed(2)}`
+    const rG = R_T + GUIDE_OFF * 1.5
+    const ptG = (x) => [x, topD - R_T + Math.sqrt(rG * rG - (x - half) ** 2)]
+    // Left-aligned like the branch labels: the guide starts just past the
+    // home pill's edge (scaled with the lane thickness).
+    const g0 = -half + TNODE_W / 2 + LABEL_PAD * 1.5
+    const g1 = SLOT - half - TNODE_W / 2 - GAP_TRIM * 1.5
+    const [gx0, gy0] = ptG(g0)
+    const [gx1, gy1] = ptG(g1)
+    arcs.unshift({
+      d,
+      ld: `M ${gx0.toFixed(2)} ${gy0.toFixed(2)} A ${rG.toFixed(2)} ${rG.toFixed(2)} 0 0 0 ${gx1.toFixed(2)} ${gy1.toFixed(2)}`,
+      label: '🏠︎',
+      top: true,
+    })
+  }
+  return { arcs, arcLeft }
+}
+
+/** Collapse opposite transition directions into one unordered pair per page pair. */
+function aggregatePairs(internal) {
+  const pairs = new Map() // unordered pair key -> [countAB, countBA]
+  for (const e of internal) {
+    const forward = e.fr < e.to
+    const k = forward ? `${e.fr} ${e.to}` : `${e.to} ${e.fr}`
+    const c = pairs.get(k) || [0, 0]
+    c[forward ? 0 : 1] += e.count
+    pairs.set(k, c)
+  }
+  return pairs
+}
+
+const fmtPt = (p) => `${p[0].toFixed(2)} ${p[1].toFixed(2)}`
+
+/**
+ * Build one ribbon edge between two nodes with counts ab and ba.
+ * `wMid` is the half-width of the thin middle (already strength-scaled by
+ * the caller). Each end flares into the node's pill surround (the outline
+ * enlarged by margin S): the flare contact points follow the pill outline
+ * a constant arc distance to each side of the direct contact point, and
+ * the back of the ribbon wraps all the way around the pill between them,
+ * surrounding the node. The pills themselves are drawn on top.
+ */
+function buildRibbon(a, b, ab, ba, wMid, external = false) {
+  const count = ab + ba
+  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
+  const nx = -uy
+  const ny = ux
+
+  // Direct contact: where the centerline exits each pill's surround.
+  const S = 4
+  const cA = pillContact(ux, uy, S)
+  const cB = pillContact(-ux, -uy, S)
+
+  // Flares take a fair share of the free span while leaving the
+  // count-scaled thin middle a visible share of the connection length.
+  // The maximum flare length scales with the contact distance so wide
+  // approach angles still show a wide connector end.
+  const free = Math.max(0, len - cA.t - cB.t)
+  const FLARE = Math.min(Math.max(cA.t, cB.t) * 1.2, free * 0.4)
+
+  // Flare endpoints: walk the outline a constant arc distance to each
+  // side of the direct contact point (spanning flats and caps alike).
+  const D = (Math.PI / 4) * (PILL_R + S)
+  // Per node: endpoints for the +n (left) and -n (right) flare sides,
+  // each with its arc position, absolute point, and an outline tangent
+  // oriented back toward the direct contact point.
+  const ends = (cx, cy, contact) => {
+    const pick = (s) => {
+      const [px, py] = pillPointAt(s, S)
+      // Outline tangent oriented back toward the direct contact point
+      // (the flare side sweeps from the contact point around to its
+      // endpoint and into the connection), so it can never fork outward.
+      const tan = pillTangent(s, S)
+      if (s > contact.s) { tan[0] = -tan[0]; tan[1] = -tan[1] }
+      return { s, p: [cx + px, cy + py], tan, side: px * nx + py * ny }
+    }
+    const plus = pick(contact.s + D)
+    const minus = pick(contact.s - D)
+    return plus.side >= 0 ? [plus, minus] : [minus, plus]
+  }
+  const [aLeftEnd, aRightEnd] = ends(a.x, a.y, cA)
+  const [bLeftEnd, bRightEnd] = ends(b.x, b.y, cB)
+
+  // Point on the connection centerline at distance t from A, offset s
+  // perpendicular to it.
+  const P = (t, s) => [
+    a.x + t * ux + s * nx,
+    a.y + t * uy + s * ny,
+  ]
+
+  // One side of a flare: from the outline endpoint, leaving tangent to
+  // the pill outline, to the connection middle arriving parallel with
+  // the centerline. The tangent pull is clamped so the control point
+  // stays well on its own side of the centerline — otherwise a long
+  // flare on a rounded cap crosses the opposite side.
+  const flarePoints = (end, midT, s, dir) => {
+    let hEnd = FLARE * 0.65
+    const hMid = FLARE * 0.4
+    const tanS = end.tan[0] * nx + end.tan[1] * ny // inward rate
+    if (tanS * end.side < 0) {
+      hEnd = Math.min(hEnd, (Math.abs(end.side) * 0.6) / Math.abs(tanS))
+    }
+    return {
+      pEnd: end.p,
+      cEnd: [end.p[0] + end.tan[0] * hEnd, end.p[1] + end.tan[1] * hEnd],
+      cMid: P(midT - dir * hMid, s * wMid),
+      pMid: P(midT, s * wMid),
+    }
+  }
+
+  // Emit a cubic in either traversal direction. Reversing a cubic requires
+  // swapping its control points, rather than recalculating the geometry.
+  const curve = (f, reverse = false) => {
+    if (!reverse) {
+      return `C ${fmtPt(f.cEnd)} ${fmtPt(f.cMid)} ${fmtPt(f.pMid)} `
+    }
+    return `C ${fmtPt(f.cMid)} ${fmtPt(f.cEnd)} ${fmtPt(f.pEnd)} `
+  }
+
+  // Trace the surround outline the long way around (behind the node) from
+  // arc s1 to arc s2. Sampled as a polyline: the visible result is a thin
+  // halo hugging the pill, so exact arc segments are unnecessary.
+  const outlineWrap = (cx, cy, s1, s2) => {
+    const per = pillPerimeter(S)
+    const dPlus = ((s2 - s1) % per + per) % per
+    const total = dPlus > per / 2 ? dPlus : per - dPlus
+    const dir = dPlus > per / 2 ? 1 : -1
+    const n = Math.max(4, Math.ceil(total / 6))
+    let out = ''
+    for (let i = 1; i <= n; i++) {
+      const [x, y] = pillPointAt(s1 + (dir * total * i) / n, S)
+      out += `L ${(cx + x).toFixed(2)} ${(cy + y).toFixed(2)} `
+    }
+    return out
+  }
+
+  const aLeft = flarePoints(aLeftEnd, cA.t + FLARE, 1, 1)
+  const bLeft = flarePoints(bLeftEnd, len - cB.t - FLARE, 1, -1)
+  const bRight = flarePoints(bRightEnd, len - cB.t - FLARE, -1, -1)
+  const aRight = flarePoints(aRightEnd, cA.t + FLARE, -1, 1)
+
+  // Each end wraps the full back of the node pill between its two flare
+  // contact points (bLeft -> bRight around B, aRight -> aLeft around A).
+  const d = `M ${fmtPt(aLeft.pEnd)} `
+    + curve(aLeft)
+    + `L ${fmtPt(bLeft.pMid)} `
+    + curve(bLeft, true)
+    + outlineWrap(b.x, b.y, bLeftEnd.s, bRightEnd.s)
+    + curve(bRight)
+    + `L ${fmtPt(aRight.pMid)} `
+    + curve(aRight, true)
+    + outlineWrap(a.x, a.y, aRightEnd.s, aLeftEnd.s)
+    + 'Z'
+
+  return {
+    d,
+    title: `${a.path} ↔ ${b.path}: ${count} (${ab} / ${ba})`,
+    external,
+  }
+}
+
+/**
+ * Flow descriptors for the bead animation, one per edge direction with a
+ * nonzero count: a straight segment running from inside the source node
+ * 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 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, 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
+  const rA = pillContact(ux, uy).t
+  const rB = pillContact(-ux, -uy).t
+  const t0 = rA / 3
+  const t1 = len - rB / 3
+  if (t1 - t0 < 12) return []
+
+  // Unit normal pointing to the visual right of the A -> B direction.
+  const rx = -uy
+  const ry = ux
+  const span = t1 - t0
+  const flow = (count, fromT, toT) => {
+    // Each direction shifts to its own right, away from the opposing lane.
+    const s = fromT < toT ? FLOW_OFFSET : -FLOW_OFFSET
+    return {
+      x1: a.x + fromT * ux + s * rx,
+      y1: a.y + fromT * uy + s * ry,
+      x2: a.x + toT * ux + s * rx,
+      y2: a.y + toT * uy + s * ry,
+      len: span,
+      interval: 1 / (count * BEAD_RATE * dayScale),
+    }
+  }
+  const flows = []
+  // Stable key per edge direction so the component's bead simulation can
+  // match flows across data reloads and keep bead phases/positions.
+  if (ab) flows.push({ ...flow(ab, t0, t1), key: `${a.path} ${b.path}` })
+  if (ba) flows.push({ ...flow(ba, t1, t0), key: `${b.path} ${a.path}` })
+  return flows
+}
+
+/**
+ * Half-width for a connection middle: base-2 logarithmic in the daily
+ * hit rate, zero at DAILY_REF hits/day, uncapped. Absolute on purpose —
+ * cool routes stay visible regardless of how hot the hottest connection
+ * is. Callers cull results below MIN_WMID.
+ */
+const scaledWidth = (daily) => {
+  if (daily <= 0) return 0
+  return WIDTH_GROWTH * Math.log2(daily / DAILY_REF)
+}
+
+/**
+ * Build ribbon edges and bead flows for every aggregated page-to-page
+ * 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, dayScale = 1) {
+  let total = 0
+  for (const [, [ab, ba]] of pairs) total += ab + ba
+  const minCount = total * PRUNE_FRACTION
+
+  const edges = []
+  const flows = []
+  for (const [k, [ab, ba]] of pairs) {
+    if (ab + ba < minCount) continue
+    const [pf, pt] = k.split(' ')
+    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) * dayScale)
+    if (wMid < MIN_WMID) continue
+    edges.push(buildRibbon(a, b, ab, ba, wMid))
+    flows.push(...buildFlows(a, b, ab, ba, dayScale))
+  }
+  return { edges, flows }
+}
+
+const UTM_PRIORITY = ['utm_campaign', 'utm_source']
+const UTM_FALLBACK = ['utm_medium', 'utm_content', 'utm_term', 'utm_id']
+
+/** Identify the source of a visit according to the requested priority. */
+function identifySource(visit) {
+  const utm = visit.utm || {}
+  for (const k of UTM_PRIORITY) {
+    const v = utm[k]
+    if (v) return { value: v, isUtm: true }
+  }
+  if (visit.referer?.startsWith('http')) {
+    return { value: visit.referer, isUtm: false }
+  }
+  for (const k of UTM_FALLBACK) {
+    const v = utm[k]
+    if (v) return { value: v, isUtm: true }
+  }
+  return null
+}
+
+/**
+ * Collect source -> entry page pairs from visit records. Sources are
+ * identified by UTM campaign/source (then referer, then other UTM tags).
+ * A UTM source only gets a link href when every visit using that source
+ * came from the same referer; referer sources always link to their origin.
+ */
+function collectSourcePairs(visits) {
+  const groups = new Map() // `${source}\0${page}` -> pair
+  for (const v of visits || []) {
+    const src = identifySource(v)
+    if (!src) continue
+    const k = `${src.value}\0${v.entry}`
+    const p = groups.get(k) || {
+      source: src.value,
+      page: v.entry,
+      in: 0,
+      refs: new Set(),
+      missingRef: false,
+      href: null,
+      isUtm: src.isUtm,
+    }
+    p.in += 1
+    if (v.referer?.startsWith('http')) {
+      p.refs.add(v.referer)
+    } else {
+      p.missingRef = true
+    }
+    groups.set(k, p)
+  }
+  for (const p of groups.values()) {
+    if (p.isUtm && !p.missingRef && p.refs.size === 1) {
+      const ref = [...p.refs][0]
+      if (ref.startsWith('http')) p.href = ref
+    } else if (!p.isUtm && p.source.startsWith('http')) {
+      p.href = p.source
+    }
+  }
+  return [...groups.values()]
+}
+
+/**
+ * Place external source and exit nodes and build their edges and bead
+ * flows.
+ * Sources (incoming links) are derived from visit UTM/referer data and form
+ * a row centered above the map, hottest first; exits come from the
+ * transition matrix and form a matching row centered below the map, so
+ * the site itself stays in the middle. Both rows sit EXT_GAP beyond the
+ * map's bounds.
+ * Widths and pruning use the same log scale and traffic-share rule as
+ * internal connections.
+ */
+function buildExternal({ sources, exits }, byPath, innerBounds, dayScale = 1) {
+  const extNodes = []
+  const edges = []
+  const flows = []
+  let extTotal = 0
+  for (const p of sources) extTotal += p.in
+  for (const p of exits) extTotal += p.out
+  const minCount = extTotal * PRUNE_FRACTION
+  const liveSources = sources.filter((p) => byPath.has(p.page))
+  const liveExits = exits.filter((p) => byPath.has(p.page))
+  if (!liveSources.length && !liveExits.length) return { extNodes, edges, flows }
+
+  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
+  // whose connectors are all culled (below MIN_WMID) is dropped itself.
+  const bySource = new Map() // source -> pairs, sorted by total incoming count
+  for (const p of liveSources.filter((p) => p.in >= minCount)) {
+    const g = bySource.get(p.source) || []
+    g.push(p)
+    bySource.set(p.source, g)
+  }
+  const origins = [...bySource]
+    .map(([source, ps]) => ({
+      source,
+      ps,
+      total: ps.reduce((s, p) => s + p.in, 0),
+      href: ps[0].href,
+      isUtm: ps[0].isUtm,
+    }))
+    .sort((a, b) => b.total - a.total)
+    .slice(0, MAX_EXT_IN)
+    .filter(({ ps }) =>
+      ps.some((p) => !byPath.get(p.page).hidden && width(p.in) >= MIN_WMID))
+  if (origins.length) {
+    const cx = (innerBounds.x0 + innerBounds.x1) / 2
+    const y = innerBounds.y0 - TNODE_BOUND - EXT_GAP
+    const spacing = TNODE_W + 44
+    const x0 = cx - ((origins.length - 1) * spacing) / 2
+    origins.forEach(({ source, ps, total, href, isUtm }, i) => {
+      const label = isUtm ? source : extLabel(source)
+      const xn = {
+        path: source,
+        href,
+        label, // clipped at the pill border on render
+        x: x0 + i * spacing,
+        y,
+        count: total,
+        kind: 'source',
+      }
+      extNodes.push(xn)
+      for (const p of ps) {
+        const page = byPath.get(p.page)
+        if (page.hidden) continue
+        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, dayScale))
+      }
+    })
+  }
+
+  // Outgoing: one exit node per distinct full URL (so several links to
+  // the same domain stay distinct), showing the total count across all
+  // pages linking to it, in a row centered below the map (hottest
+  // first), mirroring the source row above. Each (URL, page) pair
+  // contributes an edge from that page. An exit whose connectors are all
+  // culled (below MIN_WMID) is dropped itself.
+  const byExt = new Map() // full URL -> { ext, out, pairs }
+  for (const p of liveExits.filter((p) => p.out >= minCount)) {
+    const g = byExt.get(p.ext) || { ext: p.ext, out: 0, pairs: [] }
+    g.out += p.out
+    g.pairs.push(p)
+    byExt.set(p.ext, g)
+  }
+  const targets = [...byExt.values()]
+    .sort((a, b) => b.out - a.out)
+    .slice(0, MAX_EXT_OUT)
+    .filter(({ pairs }) =>
+      pairs.some((p) => !byPath.get(p.page).hidden && width(p.out) >= MIN_WMID))
+  if (targets.length) {
+    const cx = (innerBounds.x0 + innerBounds.x1) / 2
+    const y = innerBounds.y1 + TNODE_BOUND + EXT_GAP
+    const spacing = TNODE_W + 44
+    const x0 = cx - ((targets.length - 1) * spacing) / 2
+    targets.forEach(({ ext, out, pairs }, i) => {
+      const xn = {
+        path: ext,
+        href: ext,
+        label: extLabel(ext),
+        x: x0 + i * spacing,
+        y,
+        count: out,
+        kind: 'exit',
+      }
+      extNodes.push(xn)
+      for (const p of pairs) {
+        const page = byPath.get(p.page)
+        if (page.hidden) continue
+        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, dayScale))
+      }
+    })
+  }
+
+  return { extNodes, edges, flows }
+}
+
+/**
+ * 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. `dayScale` converts raw counts to a
+ * daily hit rate (DAY / range ms) for edge widths and bead rates.
+ */
+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 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, readSeconds)
+  const { arcs, arcLeft } = layoutGroups(root)
+  const placed = nodes.filter((n) => !n.hidden)
+  const pairs = aggregatePairs(internal)
+  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.
+  // Margins cover just the ribbon surround (pill outline + flare margin
+  // S=4) plus a small pad: the pill's half width/height, not its diagonal
+  // radius, so the map crops tight especially at top and bottom.
+  const pad = 8
+  const MX = TNODE_W / 2 + 4 + pad
+  const MY = TNODE_H / 2 + 4 + pad
+  const xs = placed.map((n) => n.x)
+  const ys = placed.map((n) => n.y)
+  const bounds = {
+    x0: Math.min(Math.min(...xs) - MX, arcLeft - pad),
+    y0: Math.min(...ys) - MY,
+    x1: Math.max(...xs) + MX,
+    y1: Math.max(...ys) + MY,
+  }
+
+  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)
+    bounds.x1 = Math.max(bounds.x1, xn.x + MX)
+    bounds.y1 = Math.max(bounds.y1, xn.y + MY)
+  }
+
+  return {
+    nodes: placed,
+    edges: [...edges, ...ext.edges],
+    flows: [...flows, ...ext.flows],
+    extNodes: ext.extNodes,
+    arcs,
+    bounds,
+  }
+}

frontend/src/cmtheme.js

@@ -8,21 +8,50 @@ import { tags } from '@lezer/highlight'
 
 // The base theme sets monospace on .cm-scroller, so the font must be set
 // there, not on "&".
-export const cmTheme = EditorView.theme({
+const cmEditorTheme = EditorView.theme({
   "&": {
     backgroundColor: "var(--bg)",
     color: "var(--text)",
   },
   ".cm-scroller": { fontFamily: '"Fira Code", monospace' },
-  ".cm-content": { caretColor: "var(--text)" },
+  // Fira Code in CodeMirror: set the font on .cm-content (not only the
+  // scroller) and force every span inside to inherit it, so highlighting
+  // spans can't drift to a different font/metrics. Ligatures are disabled
+  // entirely — CodeMirror measures per character, and ligature glyphs
+  // render wider than the measured sum of their parts.
+  ".cm-content": {
+    caretColor: "var(--text)",
+    fontFamily: '"Fira Code", monospace',
+    fontVariantLigatures: "none",
+    fontFeatureSettings: '"calt" 0',
+    letterSpacing: "normal",
+  },
+  ".cm-content *": {
+    fontFamily: "inherit",
+    letterSpacing: "inherit",
+  },
   ".cm-cursor": { borderLeftColor: "var(--text)" },
   // basicSetup's active-line highlight assumes a dark theme.
   ".cm-activeLine": { backgroundColor: "transparent" },
-  "&.cm-focused .cm-selectionBackground, .cm-selectionBackground":
-    { backgroundColor: "var(--line)" },
   "&.cm-focused": { outline: "none" },
 })
 
+// Selection color needs a baseTheme: only base themes support the
+// &light/&dark selectors, and @codemirror/view's own selection rules use
+// them — we must match its selectors exactly (equal specificity) and rely
+// on mounting later to win. Focused: the page's --selection-bg (the base
+// accents tint; themes may override it). Unfocused: hidden, like a normal
+// input (CodeMirror greys it by default).
+const cmSelection = EditorView.baseTheme({
+  "&light .cm-selectionBackground, &dark .cm-selectionBackground":
+    { backgroundColor: "transparent" },
+  "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, &dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground":
+    { backgroundColor: "var(--selection-bg)" },
+})
+
+// Exported as one extension so the editors just list `cmTheme`.
+export const cmTheme = [cmEditorTheme, cmSelection]
+
 export const cmHighlight = syntaxHighlighting(HighlightStyle.define([
   { tag: tags.heading, fontWeight: "600", color: "var(--accent)" },
   { tag: tags.strong, fontWeight: "700" },

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.
-  document.getElementById('content').prepend(host)
-  document.body.classList.add('editing')
+  // Appended to <body>, not #content: the open/close slide transforms
+  // #content (setEditingClass), and a transformed element becomes the
+  // 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.
@@ -96,3 +156,5 @@ export function closeEditor() {
       if (!visible && restoreTitle != null) document.title = restoreTitle
     })
 }
+
+

frontend/src/pagerite.js

@@ -4,7 +4,6 @@
 //
 // Also: scroll-reveal effects and code copy buttons. These need no
 // support from the article itself and are re-applied after each swap.
-import { showAuthIframe } from 'paskia'
 import { OverlayScrollbars } from "overlayscrollbars";
 import "overlayscrollbars/overlayscrollbars.css";
 
@@ -28,7 +27,7 @@ import "overlayscrollbars/overlayscrollbars.css";
     // canonical order: base < theme < banner design < custom CSS (whose
     // equal-specificity :root rules — font variables — must win by order).
     import("./assets/pagerite.css").then(() => {
-      for (const id of ["pagerite-theme", "pagerite-banner", "pagerite-user"]) {
+      for (const id of ["pagerite-theme", "pagerite-banner", "pagerite-transition", "pagerite-user"]) {
         const el = document.getElementById(id);
         if (el) document.head.append(el);
       }
@@ -47,29 +46,45 @@ import "overlayscrollbars/overlayscrollbars.css";
   // /_api/settings endpoint: the same reverse proxy that gates /_api returns
   // 401/403 here, and a 200 means the permission is present.
   //
-  // When Paskia SSO is in use, 401/403 responses carry `auth.iframe`, which
-  // we use to open the login/profile dialogs inline instead of navigating
-  // away. A separate probe to /auth/api/settings tells us whether Paskia is
-  // available at all; if it isn't, we treat the site as dev/no-proxy and
-  // leave editing open.
+  // When Paskia SSO is in use (probed via /auth/api/settings), the banner
+  // corner gets a plain link to /auth/ — 🔑 log in for anonymous visitors,
+  // 🔐 profile when logged in. Normal navigation: Paskia does not support
+  // being iframed, and history.back() returns to the page as-is (the
+  // pageshow handler below re-probes auth to refresh the pens).
   let ssoAvailable = false;
   let isAdmin = false;
-  let loginIframeUrl = null;
+  let authReady = false;
   let editorMeta = null;
 
-  function makePen(mode) {
+  // Asset URLs for the on-demand bundles. Dev renders them as
+  // pagerite:* meta tags (Vite dev-server URLs); production inlines all
+  // page assets and carries the on-demand URLs in a JSON script instead.
+  const assets = (() => {
+    const el = document.getElementById("pagerite-assets");
+    if (el) return JSON.parse(el.textContent);
+    const map = {};
+    for (const m of document.querySelectorAll('meta[name^="pagerite:"]')) {
+      map[m.name] = m.content;
+    }
+    return map;
+  })();
+
+  function makePen(mode, line) {
     const btn = document.createElement("button");
     btn.type = "button";
     btn.dataset.editorSrc = editorMeta.src;
     btn.dataset.editorCss = editorMeta.css || "";
     btn.dataset.editorMode = mode;
-    if (mode === "page") {
-      btn.className = "edit-link";
-      btn.title = "edit page";
+    if (line != null) {
+      // Section pen on an anchored h2: opens the page editor at the
+      // section's markdown source line (data-line, from the backend).
+      btn.className = "edit-link edit-section";
+      btn.title = "edit section";
       btn.textContent = "🖊️";
-    } else if (mode === "banner") {
-      btn.className = "edit-link";
-      btn.title = "edit banner";
+      btn.dataset.editorLine = line;
+    } else if (mode === "page") {
+      btn.className = "edit-link edit-page";
+      btn.title = "edit page";
       btn.textContent = "🖊️";
     } else {
       btn.className = "edit-link site-edit-link";
@@ -81,73 +96,76 @@ import "overlayscrollbars/overlayscrollbars.css";
 
   function injectPagePen() {
     const article = document.querySelector("#main article");
-    if (article && !article.querySelector("button.edit-link")) {
+    if (!article) return;
+    if (!article.querySelector("button.edit-page")) {
       article.prepend(makePen("page"));
     }
+    // Section pens on the anchored h2s (long articles only — the backend
+    // adds data-line to those headings), for editor access mid-document.
+    for (const h2 of article.querySelectorAll("h2[data-line]")) {
+      if (!h2.querySelector("button.edit-section")) {
+        h2.append(makePen("page", h2.dataset.line));
+      }
+    }
   }
 
-  function makeLoginButton(url) {
-    const btn = document.createElement("button");
-    btn.type = "button";
-    btn.className = "login-link";
-    btn.title = "log in";
-    btn.textContent = "🔑";
-    btn.addEventListener("click", async () => {
-      try {
-        await showAuthIframe(url);
-        // Successful login: refresh the auth UI (may now show edit pens).
-        setupAuth();
-      } catch {
-        // Cancelled or error: leave the button in place.
-      }
-    });
-    return btn;
+  function makeAuthLink(admin) {
+    const a = document.createElement("a");
+    a.className = admin ? "profile-link" : "login-link";
+    a.href = "/auth/";
+    a.title = admin ? "profile" : "log in";
+    a.textContent = admin ? "\u{1F510}" : "\u{1F511}";
+    return a;
   }
 
-  function makeProfileButton() {
-    const btn = document.createElement("button");
-    btn.type = "button";
-    btn.className = "profile-link";
-    btn.title = "profile";
-    btn.textContent = "🔐";
-    btn.addEventListener("click", () => {
-      showAuthIframe("/auth/").catch(() => {});
-    });
-    return btn;
+  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;
+    // The analytics page is a read-only dashboard: editing pens and the side
+    // panel do not apply there. Login/logout links are still useful.
+    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) {
-        pens.append(makePen("banner"));
+      if (canEdit && !onAnalytics) {
+        // Analytics viewer is now a normal page at /_a.
+        const a = document.createElement("a");
+        a.className = "edit-link analytics-link";
+        a.href = "/_a";
+        a.title = "analytics";
+        a.textContent = "📊";
+        pens.append(a);
         pens.append(makePen("site"));
       }
-      if (isAdmin && ssoAvailable) {
-        pens.append(makeProfileButton());
-      } else if (!isAdmin && ssoAvailable && loginIframeUrl) {
-        pens.append(makeLoginButton(loginIframeUrl));
-      } else if (!isAdmin && ssoAvailable) {
-        pens.append(makeProfileButton());
-      }
+      if (ssoAvailable) pens.append(makeAuthLink(isAdmin));
       banner.after(pens);
     }
-    if (canEdit) injectPagePen();
+    if (canEdit && !onAnalytics) injectPagePen();
   }
 
   async function setupAuth() {
-    const src = document.querySelector('meta[name="pagerite:editor-src"]')?.content;
-    if (!src) return;
+    authReady = false;
+    renderAuthUi();
+
+    const src = assets["pagerite:editor-src"];
+    if (!src) { authReady = true; renderAuthUi(); pingEntryOnce(); return; }
     editorMeta = {
       src,
-      css: document.querySelector('meta[name="pagerite:editor-css"]')?.content,
+      css: assets["pagerite:editor-css"],
     };
 
     // Detect whether Paskia SSO is available on this site.
@@ -160,23 +178,36 @@ import "overlayscrollbars/overlayscrollbars.css";
 
     // Check whether the current session has pagerite:admin.
     isAdmin = false;
-    loginIframeUrl = null;
-    let status = 0;
     try {
-      const res = await fetch("/_api/settings");
-      status = res.status;
-      if (status === 401) {
-        const data = await res.json().catch(() => ({}));
-        loginIframeUrl = data.auth?.iframe || null;
-      }
+      isAdmin = (await fetch("/_api/settings")).status === 200;
     } catch {
       // No auth proxy / dev.
     }
-    if (status === 200) isAdmin = true;
 
+    if (isAdmin) {
+      // Warm the cache with the editor bundle: the hashed asset is
+      // immutable, so preloading costs nothing and the pens then open
+      // instantly. The analytics page has no editor.
+      if (currentPath !== "/_a" && !import.meta.env.DEV) {
+        const preload = document.createElement("link");
+        preload.rel = "modulepreload";
+        preload.href = src;
+        document.head.append(preload);
+      }
+    }
+
+    authReady = true;
     renderAuthUi();
+    placeEditPen();
+    pingEntryOnce();
   }
 
+  // Returning to the page via history back/forward may restore a cached
+  // copy whose auth UI predates a login/logout — re-probe and re-render.
+  addEventListener("pageshow", (ev) => {
+    if (ev.persisted) setupAuth();
+  });
+
   function runScripts(root) {
     // Scripts inserted via DOM swapping do not execute; re-create them.
     for (const old of root.querySelectorAll("script")) {
@@ -206,9 +237,26 @@ import "overlayscrollbars/overlayscrollbars.css";
       btn.textContent = "copy";
       btn.addEventListener("click", async () => {
         const code = pre.querySelector("code");
-        await navigator.clipboard.writeText(
-          (code || pre).textContent.replace(/\n$/, ""),
-        );
+        const text = (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(() => {
@@ -222,14 +270,11 @@ import "overlayscrollbars/overlayscrollbars.css";
 
   // Tuck the article edit pen at the end of the first h1 (which may come
   // from the markdown itself). Re-runs when the editor replaces the
-  // previewed body, since that wipes elements inside it.
+  // previewed article, since that wipes elements inside it.
   function placeEditPen() {
     const article = document.querySelector("#main article");
-    const btn = article?.querySelector("button.edit-link");
-    // First visible h1: the title h1 may be display:none when the
-    // markdown owns its heading (editor preview state).
-    const h1 = [...(article?.querySelectorAll("h1") || [])]
-      .find((h) => h.offsetParent !== null);
+    const btn = article?.querySelector("button.edit-page");
+    const h1 = article?.querySelector("h1");
     if (btn && h1 && btn.parentElement !== h1) h1.append(btn);
   }
 
@@ -250,44 +295,7 @@ import "overlayscrollbars/overlayscrollbars.css";
     // buttons; re-add whichever auth UI is appropriate for this session.
     renderAuthUi();
     placeEditPen();
-    // 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);
-        }
-      }
-    }
+    fitNav();
     if (reduceMotion.matches) return;
     for (const el of main.querySelectorAll(
       "h2, h3, figure, img, pre, blockquote, table, dl, .task-list-item",
@@ -299,29 +307,52 @@ import "overlayscrollbars/overlayscrollbars.css";
     }
   }
 
-  // --- Preloading ------------------------------------------------------
-  // Warm the HTTP cache with all linked pages and their resources, so
-  // navigation (and the cube transition) is instant. Pages carry ETags,
-  // so re-running this after each navigation revalidates cheaply (304)
-  // and picks up changed content and images.
+  // --- Page cache / preloading ------------------------------------------
+  // Articles are deliberately NOT HTTP-cacheable, so speed comes from an
+  // in-memory cache instead: at load (and after each swap) every visible
+  // internal link is fetched exactly once, and navigation is served from
+  // memory with no fetch at all. Editor re-renders (swapdoc.loadPlain)
+  // announce their fresh copies via pagerite:page-fetched, keeping the
+  // cache in sync after edits. The current page is NOT preloaded: we just
+  // received it as the document (re-fetching would be redundant, and
+  // browser heuristics may send it without if-none-match, defeating the
+  // conditional request); it enters the cache when navigated to.
+  const pageCache = new Map(); // pathname -> HTML text
+  addEventListener("pagerite:page-fetched", (ev) => {
+    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('#nav a[href^="/"], #main a[href^="/"]')) {
+    for (const a of document.querySelectorAll(
+      '#nav a[href^="/"], #sidebar a[href^="/"], #main a[href^="/"]',
+    )) {
       urls.add(a.pathname);
     }
     for (const url of urls) {
-      if (url === location.pathname) continue;
-      fetch(url)
-        .then((r) => (r.ok ? r.text() : ""))
-        .then((html) => {
-          if (!html) return;
-          // Off-screen parse: load the page's images and other resources
-          const doc = new DOMParser().parseFromString(html, "text/html");
-          for (const img of doc.querySelectorAll("img")) {
-            const i = new Image();
-            i.src = img.src;
-          }
-        })
+      if (pageCache.has(url)) continue;
+      // x-pagerite-preload: idle cache warm-up, not a page view — the
+      // server excludes these GETs from analytics (the ping sent on actual
+      // navigation does the counting).
+      fetch(url, { headers: { "x-pagerite-preload": "1" } })
+        .then((r) => (r.ok && (r.headers.get("content-type") || "").includes("text/html")
+          ? r.text() : ""))
+        .then((html) => { if (html) pageCache.set(url, html); })
         .catch(() => {});
     }
   }
@@ -334,50 +365,267 @@ import "overlayscrollbars/overlayscrollbars.css";
     currentPath = location.pathname;
   });
 
+  // History position marker: every entry we create carries an incrementing
+  // idx so popstate can tell forward navigation from back (needed for the
+  // mirrored cube transition). replaceState calls below must preserve this
+  // state object instead of passing null.
+  let historyIdx = history.state?.idx ?? 0;
+  history.replaceState({ idx: historyIdx }, "");
+
   // --- Banner parallax ----------------------------------------------------
   // The banner artwork stays windowed in place while its contents drift
   // against the scroll. The --pry scroll parameter is also available to
   // 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;
-      document.documentElement.style.setProperty(
-        "--pry", `${Math.min(scrollY * 0.1, 30)}px`,
-      );
+      const target = Math.min(scrollY * 0.1, 30);
+      value += (target - value) * 0.12;
+      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) {
-        ticking = true;
+      if (!running) {
+        running = true;
         requestAnimationFrame(drift);
       }
     }, { passive: true });
   }
 
+  // --- Section hash -------------------------------------------------------
+  // Reflect the section being read in the location hash: the last h1/h2
+  // above the middle of the viewport is current, even when already
+  // scrolled out of view. Above the first tagged heading the hash is
+  // removed — including at the very top of the document, where an early
+  // heading may sit in the top half. Pages too short to scroll never get
+  // a hash, and articles with few headings have no ids at all (the
+  // backend only anchors h1/h2 in bodies of 3+ such headings).
+  // replaceState keeps this out of history; fetch-navigation already
+  // handles anchor scrolling itself.
+  let hashQueued = false;
+  addEventListener("scroll", () => {
+    if (hashQueued) return;
+    hashQueued = true;
+    requestAnimationFrame(() => {
+      hashQueued = false;
+      const mid = innerHeight / 2;
+      let current = null;
+      for (const h of document.querySelectorAll("article :is(h1, h2)[id]")) {
+        if (h.getBoundingClientRect().top < mid) current = h;
+        else break;
+      }
+      const scrollable = document.documentElement.scrollHeight > innerHeight;
+      const want = !scrollable || scrollY === 0 || !current ? "" : `#${current.id}`;
+      if (want !== location.hash) {
+        history.replaceState(history.state, "", want || location.pathname + location.search);
+      }
+    });
+  }, { passive: true });
+
+  // --- Analytics pings ---------------------------------------------------
+  // Fire-and-forget POSTs to /_a with the fields as query parameters (a
+  // beacon can carry no body, and query args show in server logs next to
+  // the document GET they refer to): on the initial page load (starts the
+  // 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
+  // editor is open (body.editing — admin noise, not visits), and
+  // navigations TO the analytics page (/_a — admin machinery, and the
+  // server rejects it as a ping target anyway). Navigations AWAY from /_a
+  // must ping: load() already fetched the target page without the preload
+  // header, and without the ping that GET would flush to the crawler list.
+  // Admins (when SSO is actually in use — with no auth proxy "admin" is
+  // everyone's state) ping normally but with hide=1: the server then
+  // 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.
+
+  // fetch wrapper: every key of ``params`` becomes a query arg on /_a
+  // (falsy values are omitted). Admins get hide=1. ``beacon`` uses
+  // sendBeacon when available, for unload-time pings.
+  function pingFetch(params, { beacon = false } = {}) {
+    const query = new URLSearchParams();
+    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 {
+      if (beacon && navigator.sendBeacon) {
+        navigator.sendBeacon(url);
+      } else {
+        fetch(url, { method: "POST", keepalive: true });
+      }
+    } 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.
+  const INACTIVE_MS = 60_000;
+  let readStart = performance.now();
+  let readElapsed = 0;
+  let reading = true;
+  let readInactivityTimer = null;
+  let closePingedFor = null;
+
+  function markReadActivity() {
+    if (!reading) {
+      reading = true;
+      readStart = performance.now();
+    }
+    clearTimeout(readInactivityTimer);
+    readInactivityTimer = setTimeout(() => {
+      if (reading) {
+        readElapsed += performance.now() - readStart;
+        reading = false;
+      }
+    }, INACTIVE_MS);
+  }
+
+  function takeReadTime() {
+    if (reading) {
+      readElapsed += performance.now() - readStart;
+      readStart = performance.now();
+    }
+    const ms = Math.max(0, Math.round(readElapsed));
+    readElapsed = 0;
+    return ms;
+  }
+
+  function resetReadTime() {
+    readElapsed = 0;
+    reading = true;
+    readStart = performance.now();
+    clearTimeout(readInactivityTimer);
+  }
+
+  function sendClosePing() {
+    if (closePingedFor === currentPath) return;
+    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"]) {
+    addEventListener(ev, markReadActivity, { passive: true });
+  }
+  addEventListener("pagehide", sendClosePing);
+
+  // 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.
+  let entryPinged = false;
+  function pingEntryOnce() {
+    if (entryPinged) return;
+    entryPinged = true;
+    const nav = performance.getEntriesByType?.("navigation")[0];
+    if (nav ? nav.type === "reload" : performance.navigation?.type === 1) return;
+    ping({ to: currentPath, fr: "" });
+  }
+
+  // --- Analytics page mount/unmount --------------------------------------
+  // The analytics page is a normal page whose body is rendered by the server
+  // but whose content is a Vue app. In dev the entry module is imported from
+  // the Vite dev server on demand; in production it is inlined into the /_a
+  // page as script#pagerite-js-analytics, which a fetch-navigation swap does
+  // not execute — re-create the element so the fresh module auto-mounts on
+  // #analytics-app (see analytics-main.js). The module exposes its unmount
+  // as window.__pageriteAnalyticsUnmount.
+  function teardownAnalytics() {
+    // Remove even the server-rendered script element so a later return to
+    // /_a re-mounts from a fresh copy (the module has torn itself down).
+    document.getElementById("pagerite-js-analytics")?.remove();
+    window.__pageriteAnalyticsUnmount?.();
+    window.__pageriteAnalyticsUnmount = null;
+  }
+
+  async function mountAnalytics(doc) {
+    if (!doc.getElementById("analytics-app")) return;
+    // Already mounted: on a full /_a load the inline script has run.
+    if (document.getElementById("pagerite-js-analytics")) return;
+    const inline = doc.getElementById("pagerite-js-analytics");
+    if (inline) {
+      const s = document.createElement("script");
+      for (const a of inline.attributes) s.setAttribute(a.name, a.value);
+      s.textContent = inline.textContent;
+      document.body.append(s);
+      return;
+    }
+    try {
+      // Dev: the cached module auto-mounts only on its first evaluation,
+      // so call mount() explicitly for repeat visits (it no-ops when the
+      // app is already up).
+      const mod = await import(/* @vite-ignore */ assets["pagerite:analytics-src"]);
+      const container = document.getElementById("analytics-app");
+      if (container) mod.mount(container);
+    } catch (e) {
+      console.error("analytics mount failed:", e);
+    }
+  }
+
   // --- 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).
-    if (document.body.classList.contains("editing")) {
+    // (the region swap discards the previewed changes anyway). Cache must be
+    // 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;
-    try {
-      const res = await fetch(url);
-      const type = res.headers.get("content-type") || "";
-      if (!res.ok || !type.includes("text/html")) throw new Error("not a page");
-      // Reflect any redirect the server issued.
-      if (res.redirected) finalUrl = res.url;
-      doc = new DOMParser().parseFromString(await res.text(), "text/html");
-    } catch {
-      location.href = url; // fall back to a normal navigation
-      return;
+    const cached = !editing && pageCache.get(new URL(url, location.href).pathname);
+    if (cached) {
+      doc = new DOMParser().parseFromString(cached, "text/html");
+    } else {
+      try {
+        const res = await fetch(url);
+        const type = res.headers.get("content-type") || "";
+        if (!res.ok || !type.includes("text/html")) throw new Error("not a page");
+        // Reflect any redirect the server issued.
+        if (res.redirected) finalUrl = res.url;
+        const html = await res.text();
+        // Populate the cache too, so returning here (back/forward, or a
+        // self-link in the nav) is served from memory.
+        pageCache.set(new URL(finalUrl, location.href).pathname, html);
+        doc = new DOMParser().parseFromString(html, "text/html");
+      } catch {
+        location.href = url; // fall back to a normal navigation
+        return false;
+      }
     }
     if (REGIONS.some((id) => !doc.getElementById(id))) {
       location.href = url;
-      return;
+      return false;
     }
     const doit = () => {
       for (const id of REGIONS) {
@@ -396,27 +644,51 @@ import "overlayscrollbars/overlayscrollbars.css";
       } else if (oldSidebar) {
         oldSidebar.remove();
       }
-      // Site-wide custom CSS lives in <head id="pagerite-user"> and must be
-      // kept in sync across fetch-navigations. It is kept last in <head>:
-      // in dev Vite injects the base stylesheet after the server-rendered
-      // tag, and equal-specificity :root rules are decided by order.
-      const oldUserStyle = document.getElementById("pagerite-user");
-      const newUserStyle = doc.getElementById("pagerite-user");
-      if (oldUserStyle && newUserStyle) {
-        oldUserStyle.textContent = newUserStyle.textContent;
-        document.head.appendChild(oldUserStyle);
-      } else if (newUserStyle) {
-        document.head.appendChild(document.importNode(newUserStyle, true));
-      } else if (oldUserStyle) {
-        oldUserStyle.remove();
+      // Stylesheets live in <head> with stable ids — links in dev, inline
+      // <style> elements in production — and must follow the swap: the
+      // analytics sheet exists on /_a only, and theme/banner/custom CSS
+      // may have changed since this page was loaded. Diff by id, keeping
+      // the fresh document's order; unchanged sheets keep their elements
+      // so their @keyframes are never torn down. Editor-injected sheets
+      // (data-pagerite, no id) and Vite's dev styles (no id) are left
+      // alone. Mirrors the head sync in swapdoc.js.
+      const sel = 'link[rel="stylesheet"][id], style[id]';
+      const fresh = [...doc.head.querySelectorAll(sel)];
+      const freshIds = new Set(fresh.map((el) => el.id));
+      for (const el of [...document.head.querySelectorAll(sel)]) {
+        if (!freshIds.has(el.id)) el.remove();
       }
+      let anchor = null;
+      for (const el of fresh) {
+        const cur = document.getElementById(el.id);
+        if (cur && cur.outerHTML === el.outerHTML) {
+          anchor = cur;
+          continue;
+        }
+        const imported = document.importNode(el, true);
+        if (cur) cur.replaceWith(imported);
+        else if (anchor) anchor.after(imported);
+        else {
+          const base = document.getElementById("pagerite-base");
+          if (base) base.after(imported);
+          else document.head.append(imported);
+        }
+        anchor = imported;
+      }
+      // Custom CSS must stay last: equal-specificity :root rules (font
+      // variables) are decided by order, and in dev Vite injects the base
+      // stylesheet after the server-rendered tag.
+      const userStyle = document.getElementById("pagerite-user");
+      if (userStyle) document.head.appendChild(userStyle);
       document.title = doc.title;
       // Banners may contain scripts (canvas etc.), content pages may too.
       runScripts(document.getElementById("page-banner"));
       runScripts(document.getElementById("main"));
       applyEffects();
+      mountAnalytics(doc);
     };
-    // Rotating cube page transition (see the FRAGILE block in pagerite.css);
+    // Rotating cube page transition (styles injected as #pagerite-transition
+    // from the selected design's transition.css, e.g. themes/cube/);
     // mirrored when navigating back through history. Navigation within the
     // same top-level section crossfades instead, in either direction.
     if (document.startViewTransition && !reduceMotion.matches) {
@@ -432,8 +704,21 @@ import "overlayscrollbars/overlayscrollbars.css";
       doit();
     }
     currentPath = new URL(finalUrl, location.href).pathname;
-    if (push) history.pushState(null, "", finalUrl);
-    scrollTo(0, 0);
+    if (push) history.pushState({ idx: ++historyIdx }, "", finalUrl);
+    // The open editor follows the URL: retarget the per-page tabs to the
+    // navigated-to page (unsaved text of the previous page is discarded —
+    // the article it previewed into is gone).
+    if (document.body.classList.contains("editing")) {
+      const p = currentPath.replace(/^\/+|\/+$/g, "");
+      dispatchEvent(new CustomEvent("pagerite:switch-editor", { detail: { path: p } }));
+    }
+    // Cross-page anchor links scroll to the section after the swap (the
+    // browser only does this itself on full page loads).
+    const hash = new URL(finalUrl, location.href).hash;
+    const target = hash && document.getElementById(hash.slice(1));
+    if (target) target.scrollIntoView();
+    else scrollTo(0, 0);
+    return true;
   }
 
   addEventListener("click", (ev) => {
@@ -447,9 +732,19 @@ import "overlayscrollbars/overlayscrollbars.css";
     if (editBtn && editBtn.dataset.editorSrc) {
       ev.preventDefault();
       const mode = editBtn.dataset.editorMode || "page";
+      const line = editBtn.dataset.editorLine;
+      // A section pen remembers its markdown source line: the page editor
+      // opens (or jumps, when already open) scrolled to that section.
+      // Clicking the plain page pen of the open tab closes the shell.
+      if (line != null) window.__pageriteEditLine = +line;
+      else delete window.__pageriteEditLine;
       if (document.body.classList.contains("editing")
           && document.body.dataset.editorMode === mode) {
-        editorModule?.then((m) => m.closeEditor());
+        if (line != null) {
+          dispatchEvent(new CustomEvent("pagerite:edit-section"));
+        } else {
+          editorModule?.then((m) => m.closeEditor());
+        }
         return;
       }
       for (const css of (editBtn.dataset.editorCss || "").split(",")) {
@@ -471,16 +766,50 @@ import "overlayscrollbars/overlayscrollbars.css";
     const a = ev.target.closest("a[href]");
     if (!a || a.target || a.hasAttribute("download")) return;
     const url = new URL(a.href, location.href);
-    if (url.origin !== location.origin) return;
+    if (url.origin !== location.origin) {
+      // External link: the browser navigates; record the full https URL so
+      // different links to the same domain stay distinct in analytics.
+      if (url.protocol === "https:") {
+        closePingedFor = currentPath;
+        ping({ to: url.href, read: takeReadTime() });
+      }
+      return;
+    }
     // Same-page anchor links (footnotes etc.): let the browser handle them
     if (url.pathname === location.pathname && url.hash) return;
-    // Machinery and auth endpoints are never fetch-navigated.
-    if (url.pathname.startsWith("/_") || url.pathname.startsWith("/auth")) return;
+    // The first in-body h1 self-links with href="": scroll to the top and
+    // drop the section hash — not a navigation, no analytics ping.
+    if (a.getAttribute("href") === "" && url.pathname === location.pathname) {
+      ev.preventDefault();
+      history.replaceState(history.state, "", location.pathname + location.search);
+      scrollTo({ top: 0, behavior: reduceMotion.matches ? "instant" : "smooth" });
+      return;
+    }
+    // Machinery and auth endpoints are never fetch-navigated, except the
+    // public analytics viewer page at /_a.
+    if ((url.pathname.startsWith("/_") && url.pathname !== "/_a")
+        || url.pathname.startsWith("/auth")) return;
     ev.preventDefault();
-    load(url);
+    // Capture the source now: load() updates currentPath before pinging.
+    const from = currentPath;
+    load(url).then((ok) => {
+      if (!ok) return;
+      closePingedFor = null;
+      ping({ to: url.pathname, fr: from, read: takeReadTime() });
+      resetReadTime();
+    });
   });
 
-  addEventListener("popstate", () => load(location.href, false, true));
+  addEventListener("popstate", (ev) => {
+    // Hash-only history entries are not navigations.
+    if (location.pathname === currentPath) return;
+    // Direction from the entry idx: forward navigation animates like an
+    // ordinary navigation; only actually going back mirrors the cube.
+    const target = ev.state?.idx ?? historyIdx - 1;
+    const back = target < historyIdx;
+    historyIdx = target;
+    load(location.href, false, back);
+  });
 
   // --- Task-list checkboxes ------------------------------------------------
   // Checkboxes in the rendered article are live: toggling them edits the
@@ -544,6 +873,45 @@ import "overlayscrollbars/overlayscrollbars.css";
     fit();
   }
 
+  // --- Nav condense-to-fit -------------------------------------------------
+  // The top nav stays on one row even on too-narrow screens: first the link
+  // gaps shrink, then the nav's side padding, and only in extreme cases the
+  // font size. #nav is replaced on fetch-navigation swaps, so this re-runs
+  // from applyEffects (fresh elements each time); CSS keeps flex-wrap: wrap
+  // as the no-JS fallback.
+  function fitNav() {
+    const nav = document.getElementById("nav");
+    const ul = nav?.querySelector("ul");
+    if (!ul) return;
+    // Restore the themed defaults before measuring.
+    nav.style.fontSize = "";
+    nav.style.paddingInline = "";
+    ul.style.columnGap = "";
+    ul.style.flexWrap = "nowrap";
+    const overflow = () => ul.scrollWidth - ul.clientWidth;
+    if (overflow() <= 0) return;
+    // 1) shrink the gaps between items (down to a fifth of the themed gap)
+    const gap = parseFloat(getComputedStyle(ul).columnGap) || 0;
+    const joints = Math.max(ul.children.length - 1, 1);
+    if (gap > 0) {
+      ul.style.columnGap = `${Math.max(0.2 * gap, gap - overflow() / joints)}px`;
+    }
+    // 2) shrink the nav's side padding (down to 0.4x)
+    if (overflow() > 0) {
+      const pad = parseFloat(getComputedStyle(nav).paddingInlineStart) || 0;
+      nav.style.paddingInline = `${Math.max(0.4 * pad, pad - overflow() / 2)}px`;
+    }
+    // 3) shrink the font to fit what remains
+    if (overflow() > 0) {
+      const fs = parseFloat(getComputedStyle(nav).fontSize);
+      nav.style.fontSize = `${fs * ul.clientWidth / ul.scrollWidth}px`;
+    }
+  }
+
+  addEventListener("resize", fitNav);
+  document.fonts?.ready.then(fitNav);
+
   setupAuth();
   applyEffects();
+  mountAnalytics(document);
 })();

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
@@ -59,32 +67,39 @@ function swapRegions(doc) {
     curUserStyle.remove()
   }
   // Theme and other public stylesheets live in <head>, rendered with stable
-  // ids by the backend; sync them positionally so the custom CSS (rendered
-  // last) always keeps winning by order. Diff-based: unchanged sheets keep
-  // their elements, so their @keyframes are never torn down (re-creating
-  // keyframes would replay the editor's slide-in animation).
-  const freshLinks = [...doc.head.querySelectorAll('link[rel="stylesheet"]')]
-  const freshIds = new Set(freshLinks.map((l) => l.id))
-  for (const link of [...document.head.querySelectorAll('link[rel="stylesheet"]')]) {
-    if (!link.dataset.pagerite && !freshIds.has(link.id)) link.remove()
+  // ids by the backend (links in dev, inline <style> elements in prod);
+  // sync them positionally so the custom CSS (rendered last) always keeps
+  // winning by order. Diff-based: unchanged sheets keep their elements, so
+  // their @keyframes are never torn down (re-creating keyframes would
+  // replay the editor's slide-in animation).
+  const sel = 'link[rel="stylesheet"][id], style[id]'
+  const freshEls = [...doc.head.querySelectorAll(sel)]
+  const freshIds = new Set(freshEls.map((el) => el.id))
+  for (const el of [...document.head.querySelectorAll(sel)]) {
+    if (!freshIds.has(el.id)) el.remove()
   }
   // Insert missing sheets in the fresh document's order, each right after
   // its predecessor's element. The first sheet rendered is always the base
-  // CSS, so its link doubles as the fallback anchor when nothing matched yet
-  // (e.g. no theme was selected before and the position is otherwise lost).
+  // CSS, so its element doubles as the fallback anchor when nothing matched
+  // yet (e.g. no theme was selected before and the position is otherwise
+  // lost).
   let anchor = null
-  for (const link of freshLinks) {
-    const cur = link.id && document.getElementById(link.id)
-    if (cur && cur.href === link.href) {
+  for (const el of freshEls) {
+    const cur = el.id && document.getElementById(el.id)
+    if (cur && cur.outerHTML === el.outerHTML) {
       anchor = cur
       continue
     }
-    const el = document.importNode(link, true)
-    // Same id, new URL (theme switch): replace in place, keeping position.
-    if (cur) cur.replaceWith(el)
-    else if (anchor) anchor.after(el)
-    else document.getElementById('pagerite-base')?.after(el) ?? document.head.append(el)
-    anchor = el
+    const imported = document.importNode(el, true)
+    // Same id, new content (theme switch): replace in place, keeping position.
+    if (cur) cur.replaceWith(imported)
+    else if (anchor) anchor.after(imported)
+    else {
+      const base = document.getElementById('pagerite-base')
+      if (base) base.after(imported)
+      else document.head.append(imported)
+    }
+    anchor = imported
   }
   // The editor keeps its own title while open; only inherit the server title
   // when navigating outside the editor (e.g. fetch-navigation swaps).
@@ -100,18 +115,22 @@ function swapRegions(doc) {
 export async function loadPlain(p) {
   let doc
   let finalUrl = `/${p}`
+  let html
   try {
     const res = await fetch(finalUrl)
     const type = res.headers.get('content-type') || ''
     if (!type.includes('text/html')) return null
     if (res.redirected) finalUrl = res.url
-    doc = new DOMParser().parseFromString(await res.text(), 'text/html')
+    html = await res.text()
+    doc = new DOMParser().parseFromString(html, 'text/html')
   } catch { return null }
   if (!doc.getElementById('main')) return null
   swapRegions(doc)
-  history.replaceState(null, '', finalUrl)
+  history.replaceState(history.state, '', finalUrl)
   runScripts(document.getElementById('page-banner'))
   runScripts(document.getElementById('main'))
+  // Keep pagerite.js's in-memory page cache in sync with the fresh copy.
+  dispatchEvent(new CustomEvent('pagerite:page-fetched', { detail: { url: finalUrl, html } }))
   dispatchEvent(new CustomEvent('pagerite:preview')) // re-inject + re-tuck the edit pens
   return finalUrl
 }

frontend/vite-plugin-fastapi.js

@@ -11,7 +11,7 @@
  */
 
 export default function fastapiVue({ paths = ["/api"] } = {}) {
-  const backendUrl = process.env.PAGERITE_BACKEND_URL || "http://localhost:3200"
+  const backendUrl = process.env.PAGERITE_BACKEND_URL || "http://localhost:8210"
 
   // Build proxy configuration for each path
   const proxy = {}

frontend/vite.config.js

@@ -7,15 +7,16 @@ import vueDevTools from 'vite-plugin-vue-devtools'
 
 const backendUrl = process.env.PAGERITE_BACKEND_URL || 'http://localhost:3200'
 
-// Proxy content pages (/slug, /path/to/slug) to the FastAPI backend in dev.
-// Excludes Vite internals (/@..., /src, /node_modules, /__...) and the
-// backend's /_ prefix. /_api and /_f are handled by the fastapi-vue plugin.
-const CONTENT_PROXY = '^\\/(?!_|@|src|node_modules|__)(?:[^./?]+(?:\\/[^./?]+)*)?(?:\\?.*)?$'
+// Proxy everything except Vite's own dev-time paths and the backend machinery
+// to the FastAPI backend in dev. /_api, /_f, /_themes, /_fonts and /_a are
+// handled by the fastapi-vue plugin, and /@..., /src, /node_modules, /__...
+// stay with Vite.
+const CONTENT_PROXY = '^(?!/_|/@|/src|/node_modules|/__).*$'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
-    fastapiVue({ paths: ["/_api", "/_f", "/_themes"] }),
+    fastapiVue({ paths: ["/_api", "/_f", "/_themes", "/_fonts", "/_a"] }),
     vue(),
     vueDevTools(),
   ],
@@ -39,6 +40,7 @@ export default defineConfig({
       input: {
         main: fileURLToPath(new URL('./src/main.js', import.meta.url)),
         pagerite: fileURLToPath(new URL('./src/pagerite.js', import.meta.url)),
+        analytics: fileURLToPath(new URL('./src/analytics-main.js', import.meta.url)),
         // Only the base CSS is built; theme/banner-design stylesheets live
         // in pagerite/themes/{name}/ and are served by the backend as-is.
         pagerite_base: fileURLToPath(new URL('./src/assets/pagerite.css', import.meta.url)),

pagerite/__main__.py

@@ -1,30 +1,109 @@
-# auto-upgrade@fastapi-vue-setup - remove this if you modify this file
 """Command-line entry point for running the backend server."""
 
 import argparse
+import gzip
 import os
+import sys
+from datetime import date
+from pathlib import Path
 
+import httpx
 from fastapi_vue import server
 
-DEFAULT_PORT = 3100
+DEFAULT_PORT = 8100
 DEVMODE = os.getenv("PAGERITE_DEV") == "1"
 
+# Repository root (pagerite/__main__.py -> ..), where the MMDB lives.
+_REPO_ROOT = Path(__file__).resolve().parent.parent
+
+DBIP_URL = "https://download.db-ip.com/free/dbip-city-lite-{month}.mmdb.gz"
+
+
+def _download_dbip() -> None:
+    """Download the latest dbip-city-lite MMDB if ours is missing or older."""
+    today = date.today()
+    months = [f"{today:%Y-%m}"]
+    # The current month's file may not be published yet; fall back to last month.
+    prev = (today.replace(day=1) - date.resolution).replace(day=1)
+    months.append(f"{prev:%Y-%m}")
+
+    existing = sorted(
+        p.stem.removeprefix("dbip-city-lite-").removesuffix(".mmdb")
+        for p in _REPO_ROOT.glob("dbip-city-lite-*.mmdb*")
+    )
+    if existing and existing[-1] >= months[0]:
+        print(f"pagerite: DB-IP database is current ({existing[-1]}), skipping download")
+        return
+
+    for month in months:
+        url = DBIP_URL.format(month=month)
+        target = _REPO_ROOT / f"dbip-city-lite-{month}.mmdb.gz"
+        tmp = target.with_suffix(".mmdb.gz.tmp")
+        print(f"pagerite: downloading {url}")
+        try:
+            with httpx.stream("GET", url, follow_redirects=True, timeout=120) as r:
+                if r.status_code == 404:
+                    continue
+                r.raise_for_status()
+                with open(tmp, "wb") as f:
+                    for chunk in r.iter_bytes():
+                        f.write(chunk)
+        except httpx.HTTPError as e:
+            print(f"pagerite: DB-IP download failed: {e}", file=sys.stderr)
+            tmp.unlink(missing_ok=True)
+            continue
+        # Verify it is actually gzip data before installing it.
+        try:
+            with gzip.open(tmp, "rb") as f:
+                f.read(1)
+        except OSError:
+            print(f"pagerite: DB-IP download for {month} was not valid gzip", file=sys.stderr)
+            tmp.unlink(missing_ok=True)
+            continue
+        os.replace(tmp, target)
+        # Drop older databases so the app never picks up a stale one.
+        for old in _REPO_ROOT.glob("dbip-city-lite-*.mmdb*"):
+            if old.name != target.name:
+                old.unlink()
+        print(f"pagerite: DB-IP database updated to {target.name}")
+        return
+    print("pagerite: could not download a DB-IP database", file=sys.stderr)
+
 
 def main() -> None:
     """Run the backend server with optional arguments."""
     parser = argparse.ArgumentParser(description="Run the pagerite server.")
+    parser.add_argument(
+        "hostname",
+        nargs="?",
+        default="localhost",
+        help=("Public hostname of the site; names the data directory "
+              "<hostname>/{content.kantadb, analytics.json, files} under the "
+              "cwd (default: localhost)."),
+    )
     parser.add_argument(
         "-l",
         "--listen",
         action="append",
         help=(f"Endpoint (default: localhost:{DEFAULT_PORT})."),
     )
+    parser.add_argument(
+        "--dbip",
+        action="store_true",
+        help="Download/update the DB-IP city lite database before starting.",
+    )
     args = parser.parse_args()
+    # Export the hostname before pagerite.app is imported: it derives the
+    # data directory and public origin from it at import time.
+    os.environ["PAGERITE_HOSTNAME"] = args.hostname
+    if args.dbip:
+        _download_dbip()
     dev = {"reload": True, "reload_dirs": ["pagerite"]} if DEVMODE else {}
     server.run(
         "pagerite.app:app",
         listen=args.listen,
         default_port=DEFAULT_PORT,
+        server_header=False,
         **dev,
     )
 

pagerite/analytics.py

@@ -0,0 +1,894 @@
+"""Server-side visit analytics (collection only; see docs/analytics.md).
+
+Events come from navigation pings POSTed to /_a by pagerite.js: the first
+ping on page load starts a visit, later pings extend it, and pings with no
+known session start a fresh one (missing data, not dropped). The document
+GET handler stashes the entry referer (external https origin) and any
+utm_* query parameters in in-memory IP tables, consumed when the ping
+starts the visit; nothing is counted without a ping (plain bots that only
+fetch documents end up in the crawler list).  JS-running crawlers
+(Googlebot, GoogleOther, Applebot, ...) do ping, but their UA gives them
+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``: the client record is flagged ``hide``,
+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,
+country/city, host) is stored once per unique client hash and referenced
+from visits, crawler hits and abuse hits.  The session map is in-memory
+only.
+
+Data is a msgspec Struct JSON-dumped to its own file (not the kanta db),
+rewritten atomically on every recorded event.
+"""
+
+import ipaddress
+import os
+import re
+import tempfile
+from collections.abc import Callable
+from contextlib import suppress
+from datetime import UTC, datetime, timedelta
+from pathlib import Path
+from urllib.parse import parse_qs, urlparse
+
+import blake3
+import msgspec
+from ua_parser import parse
+
+
+def _compact_user_agent(ua: str) -> str:
+    """Format a User-Agent string into a compact display form.
+
+    Returns the original UA when the parser cannot identify the browser/OS.
+    """
+    if not ua or not ua.strip() or ua == "-":
+        return ""
+    r = parse(ua)
+    browser = r.user_agent.family if r.user_agent else None
+    ver = r.user_agent.major if r.user_agent else ""
+    os_name = r.os.family if r.os else None
+    dev = r.device.family if r.device else None
+    if browser in (None, "Other") and os_name in (None, "Other"):
+        return ua
+    if browser and browser != "Other":
+        browser = browser.split()[0]
+    else:
+        browser = ""
+    os_name = os_name if os_name and os_name != "Other" else ""
+    if dev in (None, "Other") or dev == browser:
+        dev = ""
+    parts = [f"{browser}/{ver}" if browser else "", os_name, dev]
+    return " ".join(p for p in parts if p).strip()
+
+
+class Client(msgspec.Struct, omit_defaults=True):
+    """Client metadata shared by visits, crawler hits and abuse hits.
+
+    Identified by a 6-byte blake3 hash of the IPv4 address or IPv6 /64
+    network, the full User-Agent string and the extracted language tag.
+    Country/city/host are filled in asynchronously after the first event.
+    """
+
+    #: Visitor IP address (first X-Forwarded-For hop or direct peer).
+    ip: str = ""
+    #: Reverse-DNS host name for ``ip`` when resolvable, else "".
+    host: str = ""
+    #: First Accept-Language tag, lowercased (e.g. "en-us").
+    lang: str = ""
+    #: Two-letter country code from the DB-IP geoip lookup, or "".
+    country: str = ""
+    #: City name from the DB-IP geoip lookup, or "".
+    city: str = ""
+    #: Raw User-Agent header.
+    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 the entry page and everything seen afterwards, keyed by
+    the timestamp of first sight (insertion order = first-seen order);
+    re-visiting an already seen target updates its item instead of
+    appending.  Client metadata is held in ``Analytics.clients`` keyed by
+    ``client``.
+    """
+
+    start: datetime
+    entry: str
+    #: External https origin of the initial load, "" for direct visits.
+    referer: str = ""
+    #: 6-byte blake3 hash referencing ``Analytics.clients``.
+    client: bytes = b""
+    #: 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] = {}
+
+
+class CrawlerHit(msgspec.Struct, omit_defaults=True):
+    """A document GET that was never followed by an analytics ping.
+
+    Client metadata is held in ``Analytics.clients`` keyed by ``client``.
+    """
+
+    start: datetime
+    entry: str
+    #: 6-byte blake3 hash referencing ``Analytics.clients``.
+    client: bytes = b""
+    #: External https origin of the initial load, "" for direct/none.
+    referer: str = ""
+    #: Raw query string of the landing URL (UTM tags can be parsed from it).
+    query: str = ""
+    #: HTTP status of the served response (200 or 404 for content pages).
+    status: int = 200
+
+
+class AbuseHit(msgspec.Struct, omit_defaults=True):
+    """A request from an IP classified as a scanner/abuser.
+
+    Unlike crawler hits the full request path (query string included) is
+    kept: the interesting part is exactly which paths were probed.
+    ``flag`` marks the path that triggered classification; ``is_404``
+    distinguishes 404 responses from document GETs made by the abuser.
+    Client metadata is held in ``Analytics.clients`` keyed by ``client``.
+    """
+
+    start: datetime
+    #: Full request path including the query string (e.g. "/.env?x=1").
+    path: str
+    #: 6-byte blake3 hash referencing ``Analytics.clients``.
+    client: bytes = b""
+    #: True when this path triggered abuse classification (telltale path
+    #: or the 404 that crossed the threshold).
+    flag: bool = False
+    #: True for 404 responses; false for document GETs from the abuser.
+    is_404: bool = False
+
+
+class Favicon(msgspec.Struct, omit_defaults=True):
+    """Favicon fetch record for one external https origin.
+
+    The icon itself is stored on disk under a content-hashed name (like
+    uploads, but outside the kanta db), referenced here by ``file``; an
+    empty ``file`` is a known miss, retried after ``_FAVICON_RETRY``.
+    """
+
+    #: Content-hashed file name of the stored icon, "" when the fetch failed.
+    file: str = ""
+    #: When the fetch was last attempted.
+    fetched: datetime | None = None
+
+
+class Analytics(msgspec.Struct, omit_defaults=True):
+    """Root of the analytics JSON file. Append-only by design: old data is
+    dropped by deleting list entries / bucket keys."""
+
+    visits: list[Visit] = []
+    #: Favicon fetch records keyed by external https origin.
+    favicons: dict[str, Favicon] = {}
+    #: Document GETs that never produced a ping, treated as crawler/bot hits.
+    crawlers: list[CrawlerHit] = []
+    #: Requests from abusive IPs (see AbuseHit), grouped by IP in the viewer.
+    abuse: list[AbuseHit] = []
+    #: Client metadata keyed by 6-byte blake3 hash.
+    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] = {}
+    #: origin -> URL path of the stored favicon ("/_favicons/<file>"),
+    #: only for origins whose icon was fetched successfully.
+    favicons: dict[str, str] = {}
+    #: 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.
+    transitions: dict[str, dict[str, dict[str, int]]] = {}
+    #: Page views per 5-minute bucket: path -> bucket ISO -> count (sparse).
+    views: dict[str, dict[str, int]] = {}
+    #: New visits per 5-minute bucket: bucket ISO -> count (sparse).
+    site_visits: dict[str, int] = {}
+
+
+def _bucket(now: datetime) -> str:
+    """Start of the 5-minute interval containing ``now``, as ISO string."""
+    return now.replace(minute=now.minute // 5 * 5, second=0, microsecond=0).isoformat()
+
+
+def _origin(url: str) -> str | None:
+    """The origin part of an https URL (scheme://host[:port]), else None."""
+    try:
+        parsed = urlparse(url)
+    except ValueError:
+        return None
+    if parsed.scheme != "https" or not parsed.netloc:
+        return None
+    return f"https://{parsed.netloc}"
+
+
+def _external_target(url: str) -> str | None:
+    """A valid https URL (origin or full page), else None."""
+    try:
+        parsed = urlparse(url)
+    except ValueError:
+        return None
+    if parsed.scheme != "https" or not parsed.netloc:
+        return None
+    return url
+
+
+_SEGMENT = re.compile(r"[a-z0-9][a-z0-9_-]*")
+
+
+def _internal_path(to: str) -> str | None:
+    """A valid internal page path ("/" or slug segments), else None."""
+    path = to.split("?")[0].split("#")[0].strip("/")
+    if not path:
+        return "/"
+    if all(_SEGMENT.fullmatch(seg) for seg in path.split("/")):
+        return f"/{path}"
+    return None
+
+
+def _parse_accept_language(value: str) -> tuple[str, str]:
+    """First Accept-Language tag and the region/country subtag if present.
+
+    ``en-US, fr;q=0.9`` -> ("en-us", "US").  Wildcards and missing regions
+    produce an empty country.  The region is intentionally approximate:
+    it reflects the browser's language preference, not geo-location.
+    """
+    if not value:
+        return "", ""
+    tag = value.split(",")[0].split(";")[0].strip()
+    if not tag or tag == "*":
+        return "", ""
+    lang = tag.lower()
+    country = ""
+    # Region subtags follow the initial language tag (en-US, zh-Hans-CN).
+    # A bare two-letter tag such as "fr" is a language code, not a region.
+    for part in reversed(tag.split("-")[1:]):
+        if len(part) == 2 and part.isalpha():
+            country = part.upper()
+            break
+    return lang, country
+
+
+def _utm_tags(query: str) -> dict[str, str]:
+    """UTM parameters from a query string, keeping only the first value."""
+    if not query:
+        return {}
+    parsed = parse_qs(query, keep_blank_values=True)
+    return {k: v[0] for k, v in parsed.items() if k.startswith("utm_")}
+
+
+_CRAWLER_TIMEOUT = timedelta(seconds=10)
+
+#: How long a failed favicon fetch suppresses retries for the same origin.
+_FAVICON_RETRY = timedelta(days=7)
+
+#: UAs of JS-running crawlers, which would register as visitors on their
+#: ping.  Anything calling itself a "bot" or "spider" matches; known crawlers
+#: without those tokens (GoogleOther) are listed as extra alternates.  No
+#: source verification: a spoofed bot UA just lands in the crawler list, and
+#: scanners that probe telltale paths are caught by the abuse rules anyway.
+_BOT_UA = re.compile(r"bot|spider|googleother", re.IGNORECASE)
+
+
+def _is_bot_ua(ua: str) -> bool:
+    """True when the UA claims a crawler identity (bot or spider)."""
+    return bool(_BOT_UA.search(ua))
+
+#: Plain-404 count per IP that classifies it as abuse even without a
+#: telltale path hit.
+_ABUSE_404_THRESHOLD = 10
+
+#: Paths that instantly classify an IP as abuse when they 404: any segment
+#: starting with a dot ("/.env", "/.git/config") or ending in ".php".
+_ABUSE_PATH = re.compile(r"(^|/)\.|\.php$", re.IGNORECASE)
+
+
+def _is_abuse_path(path: str) -> bool:
+    """Telltale scanner path: dot segment or *.php."""
+    return bool(_ABUSE_PATH.search(path.split("?")[0]))
+
+
+def _network_ip(ip: str) -> str:
+    """IPv4 address unchanged, IPv6 collapsed to its /64 network address.
+
+    We hash the network rather than the full address so that clients in the
+    same /64 (a typical end-user allocation) are treated as one visitor.
+    """
+    if not ip:
+        return ip
+    try:
+        addr = ipaddress.ip_address(ip)
+    except ValueError:
+        return ip
+    if isinstance(addr, ipaddress.IPv6Address):
+        return str(ipaddress.IPv6Network(f"{ip}/64", strict=False).network_address)
+    return ip
+
+
+def _client_hash(ip: str, ua: str, lang: str) -> bytes:
+    """6-byte blake3 digest identifying a visitor/client tuple.
+
+    The key is the prettified IP (IPv6 /64), the raw UA string and the
+    extracted language tag, separated by null bytes.
+    """
+    return blake3.blake3(
+        f"{_network_ip(ip)}\0{ua}\0{lang}".encode()
+    ).digest()[:6]
+
+
+class Store:
+    """In-memory analytics data plus the client-hash -> visit session map."""
+
+    def __init__(self, path: Path) -> None:
+        self.path = path
+        self.data = Analytics()
+        if path.exists():
+            try:
+                self.data = msgspec.json.decode(path.read_bytes(), type=Analytics)
+            except msgspec.DecodeError, OSError:
+                pass  # legacy schema / corrupt or unreadable file: start fresh
+        #: client hash -> index of the current visit in data.visits
+        self.sessions: dict[bytes, int] = {}
+        #: 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.
+        self.pending_referers: dict[str, str] = {}
+        #: ip -> utm_* query parameters from the latest document GET that
+        #: carried any, stashed for the visit the client's initial ping starts.
+        #: Only non-empty sets are stored, so a later parameter-less page
+        #: does not overwrite an earlier tagged landing URL.
+        self.pending_utms: dict[str, dict[str, str]] = {}
+        #: Document GETs that have not yet been matched by a ping.  Kept
+        #: in RAM only; expired entries are written to ``data.crawlers``.
+        self.pending_crawlers: list[CrawlerHit] = []
+        #: client hash -> {path: status} for recent document GETs, consumed
+        #: by the matching ping to record the status of each visited path.
+        self.pending_statuses: dict[bytes, dict[str, int]] = {}
+        #: ip -> number of plain (non-telltale) 404s seen, in RAM only;
+        #: reaching ``_ABUSE_404_THRESHOLD`` classifies the IP as abuse.
+        self.not_found_counts: dict[str, int] = {}
+        #: Callables to notify when persisted data changes.  Registered by the
+        #: analytics WebSocket broadcaster.
+        self._on_change: list[Callable[[], None]] = []
+
+    def subscribe(self, callback: Callable[[], None]) -> None:
+        """Register a callback to be called after every persisted change."""
+        if callback not in self._on_change:
+            self._on_change.append(callback)
+
+    def unsubscribe(self, callback: Callable[[], None]) -> None:
+        """Remove a previously registered change callback."""
+        with suppress(ValueError):
+            self._on_change.remove(callback)
+
+    def _notify(self) -> None:
+        for callback in self._on_change:
+            callback()
+
+    def _save(self) -> None:
+        """Rewrite the JSON file atomically (temp file + rename)."""
+        try:
+            fd, tmp = tempfile.mkstemp(
+                dir=self.path.parent, prefix=self.path.name, suffix=".tmp"
+            )
+            with os.fdopen(fd, "wb") as f:
+                f.write(msgspec.json.encode(self.data))
+            os.replace(tmp, self.path)
+        except OSError:
+            pass  # analytics must never break page serving
+        else:
+            self._notify()
+
+    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.
+        """
+        if not self.pending_crawlers:
+            return []
+        now = now or datetime.now(UTC)
+        cutoff = now - _CRAWLER_TIMEOUT
+        expired: list[CrawlerHit] = []
+        remaining: list[CrawlerHit] = []
+        for hit in self.pending_crawlers:
+            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 _hidden(self, client_hash: bytes) -> bool:
+        """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 display(self) -> Display:
+        """Build the viewer payload, excluding hidden clients.
+
+        The aggregates (site visits, page views, transitions) are computed
+        here from the visit records rather than stored, so a client that
+        becomes hidden after navigations were already logged disappears
+        from every statistic.  Internal-path navigations count as page
+        views; external https targets are transitions only.
+        """
+        visits = [v for v in self.data.visits if not self._hidden(v.client)]
+        display = Display(
+            visits=visits,
+            crawlers=[h for h in self.data.crawlers if not self._hidden(h.client)],
+            abuse=[h for h in self.data.abuse if not self._hidden(h.client)],
+            clients={h: c for h, c in self.data.clients.items() if not c.hide},
+            favicons={
+                origin: f"/_f/{f.file}"
+                for origin, f in self.data.favicons.items()
+                if f.file
+            },
+        )
+        for visit in visits:
+            bucket = _bucket(visit.start)
+            site = display.site_visits
+            site[bucket] = site.get(bucket, 0) + 1
+            entry_views = display.views.setdefault(visit.entry, {})
+            entry_views[bucket] = entry_views.get(bucket, 0) + 1
+            fr = visit.referer or "(direct)"
+            buckets = display.transitions.setdefault(fr, {}).setdefault(visit.entry, {})
+            buckets[bucket] = buckets.get(bucket, 0) + 1
+            for t, nav in visit.navs.items():
+                nb = _bucket(t)
+                if nav.to.startswith("/"):
+                    nav_views = display.views.setdefault(nav.to, {})
+                    nav_views[nb] = nav_views.get(nb, 0) + 1
+                nbuckets = display.transitions.setdefault(nav.fr, {}).setdefault(nav.to, {})
+                nbuckets[nb] = nbuckets.get(nb, 0) + 1
+        return display
+
+    def display_json(self) -> str:
+        """The ``display()`` payload as a JSON string for the WebSocket."""
+        return msgspec.json.encode(self.display()).decode()
+
+    def _client_ip(self, client_hash: bytes) -> str:
+        """Return the IP stored for ``client_hash``, or "" if missing."""
+        client = self.data.clients.get(client_hash)
+        return client.ip if client else ""
+
+    def _ensure_client(
+        self,
+        ip: str,
+        ua: str,
+        lang: str,
+        *,
+        country: str = "",
+    ) -> bytes:
+        """Get or create a ``Client`` record; return its 6-byte hash."""
+        h = _client_hash(ip, ua, lang)
+        if h not in self.data.clients:
+            self.data.clients[h] = Client(
+                ip=ip,
+                ua=ua,
+                ua_pretty=_compact_user_agent(ua),
+                lang=lang,
+                country=country,
+            )
+            self._save()
+        return h
+
+    def enrich_client(
+        self,
+        client_hash: bytes,
+        *,
+        host: str = "",
+        country: str = "",
+        city: str = "",
+    ) -> None:
+        """Fill in host/geoip fields on a client record after async lookups."""
+        client = self.data.clients.get(client_hash)
+        if client is None:
+            return
+        changed = False
+        if host and not client.host:
+            client.host = host
+            changed = True
+        if country:
+            client.country = country
+            changed = True
+        if city:
+            client.city = city
+            changed = True
+        if changed:
+            self._save()
+
+    def favicon_origins_needed(self) -> list[str]:
+        """External https origins seen in visits whose favicon needs fetching.
+
+        Covers visit referers and external exit targets (trail and navs).
+        Origins with a stored icon, or a miss younger than
+        ``_FAVICON_RETRY``, are skipped.
+        """
+        origins: set[str] = set()
+        for visit in self.data.visits:
+            if visit.referer:
+                origins.add(visit.referer)
+            for target in list(visit.trail.values()) + list(visit.navs.values()):
+                origin = _origin(target.to)
+                if origin is not None:
+                    origins.add(origin)
+        now = datetime.now(UTC)
+        return [
+            origin
+            for origin in origins
+            if (f := self.data.favicons.get(origin)) is None
+            or (not f.file and (f.fetched is None or now - f.fetched > _FAVICON_RETRY))
+        ]
+
+    def record_favicon(self, origin: str, file: str = "") -> None:
+        """Store the favicon fetch result for ``origin`` ("" = miss)."""
+        self.data.favicons[origin] = Favicon(file=file, fetched=datetime.now(UTC))
+        self._save()
+
+    def _abuse_hit(
+        self,
+        client_hash: bytes,
+        path: str,
+        start: datetime | None = None,
+        *,
+        flag: bool = False,
+        is_404: bool = False,
+    ) -> None:
+        """Append one abuse hit referencing a client by hash."""
+        self.data.abuse.append(
+            AbuseHit(
+                start=start or datetime.now(UTC),
+                path=path,
+                client=client_hash,
+                flag=flag,
+                is_404=is_404,
+            )
+        )
+
+    def classify_abuse(
+        self,
+        ip: str,
+        client_hash: bytes,
+        path: str,
+        *,
+        flag: bool = False,
+        is_404: bool = False,
+    ) -> None:
+        """Classify an IP as a scanner/abuser and record the triggering hit.
+
+        All earlier crawler hits from the same IP (persisted and pending)
+        are moved to the abuse list — a random-UA scanner must not pollute
+        the crawler stats of the legitimate bots it impersonates.
+        """
+        if ip not in self.data.abuse_ips:
+            self.data.abuse_ips[ip] = True
+            moved = [h for h in self.data.crawlers if self._client_ip(h.client) == ip]
+            if moved:
+                self.data.crawlers = [h for h in self.data.crawlers if self._client_ip(h.client) != ip]
+                for h in moved:
+                    self._abuse_hit(
+                        h.client,
+                        h.entry + (f"?{h.query}" if h.query else ""),
+                        start=h.start,
+                    )
+            pending = [h for h in self.pending_crawlers if self._client_ip(h.client) == ip]
+            if pending:
+                self.pending_crawlers = [h for h in self.pending_crawlers if self._client_ip(h.client) != ip]
+                for h in pending:
+                    self._abuse_hit(
+                        h.client,
+                        h.entry + (f"?{h.query}" if h.query else ""),
+                        start=h.start,
+                    )
+        self._abuse_hit(client_hash, path, flag=flag, is_404=is_404)
+        self._save()
+
+    def track_404(
+        self,
+        ip: str,
+        ua: str,
+        path: str,
+        accept_language: str = "",
+    ) -> bytes:
+        """Record a 404 response for ``path`` (full path, query included).
+
+        A telltale path (dot segment or *.php) classifies the IP as abuse
+        immediately; enough plain 404s from one IP do too.  Hits from
+        already-classified IPs go straight to the abuse list.
+
+        Returns the client hash so callers can schedule async enrichment.
+        """
+        lang, country = _parse_accept_language(accept_language)
+        client_hash = self._ensure_client(ip, ua, lang, country=country)
+        if ip in self.data.abuse_ips:
+            self._abuse_hit(client_hash, path, flag=_is_abuse_path(path), is_404=True)
+            self._save()
+            return client_hash
+        if _is_abuse_path(path):
+            self.classify_abuse(ip, client_hash, path, flag=True, is_404=True)
+            return client_hash
+        self.not_found_counts[ip] = self.not_found_counts.get(ip, 0) + 1
+        if self.not_found_counts[ip] >= _ABUSE_404_THRESHOLD:
+            self.classify_abuse(ip, client_hash, path, flag=True, is_404=True)
+            return client_hash
+        return client_hash
+
+    def _new_visit(
+        self,
+        entry: str,
+        referer: str,
+        client_hash: bytes,
+        utm: dict[str, str] | None = None,
+        status: int = 200,
+    ) -> Visit:
+        now = datetime.now(UTC)
+        visit = Visit(
+            start=now,
+            entry=entry,
+            referer=referer,
+            client=client_hash,
+            utm=utm or {},
+        )
+        visit.trail[now] = TrailItem(to=entry, status=status)
+        self.data.visits.append(visit)
+        self.sessions[client_hash] = len(self.data.visits) - 1
+        return visit
+
+    def track_entry(
+        self,
+        referer: str,
+        own_origin: str,
+        ip: str,
+        ua: str,
+        full_path: str,
+        accept_language: str = "",
+        *,
+        status: int = 200,
+    ) -> list[bytes]:
+        """Stash the entry referer/UTM tags and queue a pending crawler hit.
+
+        Nothing is counted here — the client's initial /_a ping starts the
+        visit (only non-admin clients ping). Only a cross-origin https
+        referer updates the table; an internal or absent referer leaves any
+        stashed origin untouched.  UTM parameters are kept only when the
+        landing URL actually carries them, so a subsequent parameter-less page
+        does not erase an earlier tagged landing.
+
+        Every document GET is also queued as a pending crawler hit.  If a ping
+        from the same client arrives within ``_CRAWLER_TIMEOUT``, the hit is
+        discarded; otherwise it is flushed to ``data.crawlers``.  The
+        Accept-Language header is stored on the client record immediately;
+        host/geoip are filled in later by async enrichment.
+
+        GETs from IPs already classified as abuse are recorded as abuse hits
+        with the full request path (query string included).
+
+        Returns the client hashes of any hits flushed to persistent storage,
+        so callers can schedule async enrichment.
+        """
+        entry = full_path.split("?")[0]
+        query = full_path.split("?", 1)[1] if "?" in full_path else ""
+        lang, country = _parse_accept_language(accept_language)
+        client_hash = self._ensure_client(ip, ua, lang, country=country)
+        if ip in self.data.abuse_ips:
+            flushed = self._flush_crawlers()
+            self._abuse_hit(client_hash, full_path, is_404=False, flag=False)
+            self._save()
+            return flushed
+        now = datetime.now(UTC)
+        flushed = self._flush_crawlers(now)
+        if referer:
+            origin = _origin(referer)
+            if origin is not None and origin != own_origin:
+                self.pending_referers[ip] = origin
+        utms = _utm_tags(query)
+        if utms:
+            self.pending_utms[ip] = utms
+        self.pending_crawlers.append(
+            CrawlerHit(
+                start=now,
+                entry=entry,
+                client=client_hash,
+                referer=self.pending_referers.get(ip, ""),
+                query=query,
+                status=status,
+            )
+        )
+        self.pending_statuses.setdefault(client_hash, {})[entry] = status
+        return flushed
+
+    def _add_read(self, client_hash: bytes, path: str, seconds: int) -> None:
+        """Add ``seconds`` of reading time for ``path`` to the current visit."""
+        if seconds <= 0:
+            return
+        index = self.sessions.get(client_hash)
+        if index is None or index >= len(self.data.visits):
+            return
+        visit = self.data.visits[index]
+        for item in visit.trail.values():
+            if item.to == path:
+                item.read += seconds
+                return
+
+    def ping(
+        self,
+        from_: str,
+        to: str | None,
+        ip: str,
+        ua: str,
+        accept_language: str = "",
+        hide: bool = False,
+        read: int = 0,
+    ) -> tuple[int | None, list[bytes]]:
+        """Record a client navigation ping ({from, to, read} from pagerite.js).
+
+        ``to`` is an internal path ("/...") or an https URL for exit links; a
+        missing/empty ``to`` means the page is being closed and only the
+        ``read`` time should be recorded. The transition is always counted when
+        ``to`` is present; the trail only grows on first sight of a page within
+        the visit. ``read`` is the active time (seconds) spent on ``from_``.
+
+        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 client record is flagged
+        ``hide`` — which covers everything it ever did, including visits and
+        crawler hits from before the login — and the navigation 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
+        entirely — the crawler's pending hits stay queued and flush to
+        ``data.crawlers`` normally.
+
+        Returns the index of the new visit when one is created (or None) and
+        the client hashes of any crawler hits flushed by this call, so callers
+        can schedule async enrichment (host, geoip country/city).
+        """
+        flushed = self._flush_crawlers()
+        lang, country = _parse_accept_language(accept_language)
+        if hide:
+            # 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
+            ]
+        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 or hide:
+                self._save()
+            return None, flushed
+        if to.startswith("/") and not to.startswith("//"):
+            target = _internal_path(to) or ""
+        else:
+            target = _external_target(to) or ""
+        if not target:
+            return None, flushed
+        index = self.sessions.get(client_hash)
+        fr = fr_path or "(direct)"
+        statuses = self.pending_statuses.setdefault(client_hash, {})
+        target_status = statuses.pop(target, None) or 200
+        if not statuses:
+            self.pending_statuses.pop(client_hash, None)
+        if index is None or index >= len(self.data.visits):
+            # No known session: the initial ping of a fresh page load (or
+            # missing data after a server restart) — start a visit.
+            index = len(self.data.visits)
+            self._ensure_client(ip, ua, lang, country=country)
+            self._new_visit(
+                target,
+                self.pending_referers.pop(ip, ""),
+                client_hash,
+                utm=self.pending_utms.pop(ip, {}),
+                status=target_status,
+            )
+        else:
+            visit = self.data.visits[index]
+            now = datetime.now(UTC)
+            visit.navs[now] = Nav(fr=fr, to=target)
+            # First-seen only: repeat pages and repeated exits update the
+            # existing trail item (most recent status) instead of appending.
+            for item in visit.trail.values():
+                if item.to == target:
+                    item.status = target_status
+                    break
+            else:
+                visit.trail[now] = TrailItem(to=target, status=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/data.py

@@ -75,10 +75,6 @@ class Data(msgspec.Struct):
 
     #: Top-level menu items by slug; "" is the front page.
     menu: dict[str, Node] = {}
-    #: Content-addressed file store: name (blake3 hash prefix + extension)
-    #: -> bytes, served immutable at "/_f/{name}". Absolute URLs that stay
-    #: valid when pages move.
-    files: dict[str, bytes] = {}
     #: Bumped on every structure/content write, so page ETags (which embed
     #: it) invalidate cached copies when navigation-affecting changes happen.
     version: int = 0
@@ -91,14 +87,19 @@ class Data(msgspec.Struct):
     #: banner artwork, next to the nav. Empty = the plain brand link.
     brand_html: str = ""
     #: Active theme name (empty = none/base only). Themes live in
-    #: frontend/src/assets/themes/{theme}/theme.css, with their banner
-    #: artwork at pagerite/themes/{theme}/banner.svg (inlined server-side).
-    theme: str = "purple"
+    #: pagerite/themes/{theme}/ (theme.css and/or banner.css/banner.svg/
+    #: banner.html), served by the backend from disk.
+    theme: str = "corporate"
+    #: Page transition design name (cube, crossfade, ...). Designs live in
+    #: pagerite/themes/{name}/transition.css and are injected as
+    #: #pagerite-transition on every page.
+    transition: str = "cube"
     #: Raw site-wide custom CSS, injected inline in every page <head>.
     #: Trusted author content; not sanitized.
     custom_css: str = ""
-    #: Favicon: name of a file in `files` (content-addressed), linked as
-    #: <link rel="icon"> on every page. Empty = the build's /favicon.ico.
+    #: Favicon: content-addressed file name (served at "/_f/{name}"),
+    #: linked as <link rel="icon"> on every page. Empty = the build's
+    #: /favicon.ico.
     favicon: str = ""
     #: Legacy flat page store (pre-tree databases); migrated into `menu`
     #: on startup, then cleared. Never written otherwise.

pagerite/markdown.py

@@ -4,12 +4,41 @@ 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 —
-note/tip/warning/etc., the title optional). Bare URLs autolink (GFM), with
+particular), admonitions (``!!! note Title`` with an indented body —
+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}``), or omitted for a
+pandoc-style nameless div (``::: {.aside}``). ``::: 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 — COLS_TEXT — in at least
+COLS_PARAS paragraphs or one paragraph long enough to turn .breakable,
+unless a ``::: nocols`` container opts it out;
+in column segments, paragraphs past BREAKABLE_TEXT are marked
+``.breakable`` so they may split across columns). 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 +56,16 @@ 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 markdown_it.token import Token
 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
@@ -43,6 +76,7 @@ from pygments import highlight
 from pygments.formatters import HtmlFormatter
 from pygments.lexers import get_lexer_by_name
 from pygments.util import ClassNotFound
+from slugify import slugify
 
 # Styles in /_assets/pygments-*.css match this formatter (regenerate:
 # HtmlFormatter(style="github-dark").get_style_defs("pre code"))
@@ -65,6 +99,45 @@ 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 go on the <pre> —
+    the block element — instead of the <code>, which keeps only the
+    language class. Attributes are accepted both pandoc-style on the
+    info line (```{.python .wide #id key=val} — the first class is the
+    language when no bare language word precedes the braces) and as a
+    trailing `{...}` line applied by _block_attrs. This is what makes
+    e.g. `{.wide}` or `{style="..."}` style the block itself.
+    """
+    token = tokens[idx]
+    info = token.info.strip() if token.info else ""
+    lang, _, brace = info.partition("{")
+    lang = lang.split(maxsplit=1)[0] if lang.strip() else ""
+    if brace:
+        try:
+            _, attrs = parse_attrs("{" + brace)
+        except ParseError:
+            attrs = {}
+        classes = attrs.pop("class", "").split()
+        if not lang and classes:
+            lang = classes.pop(0)
+        if classes:
+            _apply_attrs(token, {"class": " ".join(classes)})
+        _apply_attrs(token, attrs)
+    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}>{highlighted}</code></pre>\n"
+    )
+
+
 def _image_rule(
     self: RendererHTML,
     tokens,
@@ -105,8 +178,14 @@ def _unwrap_lone_figures(state) -> None:
             continue
         [child] = token.children if len(token.children) == 1 else [None]
         if child and child.type == "image":
-            if (tokens[i - 1].type == "paragraph_open"
-                    and tokens[i + 1].type == "paragraph_close"):
+            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 +228,215 @@ 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}`).
+
+    Pandoc-style nameless divs (`::: {.aside}`) are accepted too — the
+    attrs alone give the container its classes.
+    """
+    name, _, rest = params.strip().partition(" ")
+    if name.startswith("{"):
+        name, rest = "", params.strip()
+    elif not _CONTAINER_NAME_RE.fullmatch(name):
+        return False
+    rest = rest.strip()
+    if not rest:
+        return bool(name)  # a nameless container needs the attrs
+    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
+        info = token.info.strip()
+        name, _, rest = info.partition(" ")
+        if name.startswith("{"):
+            name, rest = "", info
+        if name:
+            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.
+    A paragraph takes them at the end of its last line, either directly
+    (a trailing `{.wide}` line, no blank line between) or space-separated
+    at the end of the text (`some text {.small}`) — a space means the
+    braces belong to the block, not to an image or link before them.
+    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":
+            continue
+        m = re.search(r"(\{[^{}]*\})\s*$", text.content)
+        if not m:
+            continue
+        start = m.start(1)
+        if start and not text.content[start - 1].isspace():
+            continue  # glued to the text — literal, or inline attrs
+        try:
+            _, attrs = parse_attrs(m.group(1))
+        except ParseError:
+            continue
+        standalone = len(token.children) == 1
+        if not standalone and start == 0 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
+        elif start == 0:
+            del token.children[-2:]
+        else:
+            # Braces space-separated at the end of a text line: strip them
+            # (a whitespace-only remainder means they were on a line of
+            # their own after all — drop the softbreak too).
+            text.content = text.content[:start].rstrip()
+            if not text.content and token.children[-2].type == "softbreak":
+                del token.children[-2:]
+
+
+#: Minimum number of in-body h1/h2 headings for section anchors to be
+#: useful — shorter articles get no ids/self-links at all.
+ANCHOR_MIN_HEADINGS = 3
+
+
+def _heading_ids(state) -> None:
+    """Anchor the in-body h1/h2 headings of long-enough articles.
+
+    The markdown body's own h1 and h2 headings get a slug id and their
+    text is wrapped in a self-link (``<a class="anchor" href="#id">``) so
+    section links are copyable by click or right-click — but only when the
+    body has at least ANCHOR_MIN_HEADINGS of them; shorter articles stay
+    anchor-free. The FIRST h1 is the article title: like the implicit
+    page-title h1 it gets no id, does not count toward the threshold, and
+    its self-link is ``href=""`` (back to the top of the page). An
+    author-set `{#id}` always wins; auto ids slugify the heading text
+    (python-slugify, mirroring the editor's slugify.js) and dedupe with
+    -2/-3 suffixes per render. Headings that already contain a link are
+    ``data-line`` records the heading's markdown source line (0-based, after
+    undoing the render(title=...) injection offset via ``env``) — the page
+    editor uses it for section pens and piecewise-linear scroll sync.
+    """
+    tokens = state.tokens
+    line_offset = state.env.get("line_offset", 0)
+
+    def wrap(i: int, token, href: str) -> None:
+        inline = tokens[i + 1]
+        if not inline.children or any(c.type == "link_open" for c in inline.children):
+            return
+        anchor = Token("link_open", "a", 1)
+        anchor.attrs = {"href": href, "class": "anchor"}
+        inline.children = [anchor, *inline.children, Token("link_close", "a", -1)]
+
+    # The first in-body h1 is the title: href="" self-link, never an id.
+    # Only TOP-LEVEL headings participate — h1/h2 nested in ::: containers
+    # or asides (level > 0) get no anchors, data-lines or pens.
+    first_h1 = next(
+        (
+            i
+            for i, t in enumerate(tokens)
+            if t.type == "heading_open" and t.tag == "h1" and t.level == 0
+        ),
+        None,
+    )
+    if first_h1 is not None:
+        wrap(first_h1, tokens[first_h1], "")
+
+    heads = [
+        (i, token)
+        for i, token in enumerate(tokens)
+        if token.type == "heading_open" and token.tag in ("h1", "h2") and token.level == 0 and i != first_h1
+    ]
+    if len(heads) < ANCHOR_MIN_HEADINGS:
+        return
+    seen: set[str] = set()
+    for i, token in heads:
+        inline = tokens[i + 1]
+        hid = token.attrGet("id")
+        if not isinstance(hid, str) or not hid:
+            # Slug the visible text, not the raw markdown (`## [a](url)`).
+            text = "".join(
+                c.content for c in inline.children if c.type in ("text", "code_inline")
+            )
+            base = slugify(text) or "section"
+            hid, n = base, 2
+            while hid in seen:
+                hid = f"{base}-{n}"
+                n += 1
+            token.attrSet("id", hid)
+        seen.add(hid)
+        if token.map:
+            token.attrSet("data-line", str(max(0, token.map[0] - line_offset)))
+        wrap(i, token, f"#{hid}")
+
+
 md = (
     MarkdownIt(
         "default",
@@ -161,17 +449,132 @@ 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)
+    # label_after: the item text is wrapped in <label for> after the
+    # checkbox, so clicking the text toggles it.
+    .use(tasklists_plugin, enabled=True, label=True, label_after=True)
     .use(gfm_autolink_plugin)
     .use(sub_plugin)
     .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)
+md.core.ruler.push("heading_ids", _heading_ids)
+
+
+# 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 — provided it also has at least
+# COLS_PARAS paragraphs or a paragraph long enough to turn .breakable: a
+# lone unbreakable paragraph would fill a column on its own and strand the
+# rest (e.g. a floated figure) in the other, leaving a mostly empty column.
+MULTICOL_TEXT = 1800
+COLS_TEXT = 600
+COLS_PARAS = 2
+
+#: Paragraphs past this visible length are marked .breakable, letting them
+#: split across columns (shorter ones stay unbreakable so a paragraph never
+#: straddles the column gap).
+BREAKABLE_TEXT = 800
+
+_PRE_BLOCK_RE = re.compile(r"<pre\b.*?</pre>", re.S)
+_TAG_RE = re.compile(r"<[^>]+>")
+_PARA_OPEN_RE = re.compile(r"<p[\s>]")
+_PARA_RE = re.compile(r"<p((?:\s[^>]*)?)>(.*?)</p>", re.S)
+
+# 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 article 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 _breakable_paras(html: str) -> str:
+    """Mark column-filling paragraphs .breakable so they may split.
+
+    Columns keep paragraphs whole (break-inside: avoid-column), but a
+    paragraph long enough to fill a column would strand everything after
+    it in a column of its own — these get .breakable, and pagerite.css
+    lets them split across the column gap. Only applied to .cols segments.
+    """
+
+    def repl(m: re.Match[str]) -> str:
+        attrs, body = m.group(1), m.group(2)
+        if _text_len(body) <= BREAKABLE_TEXT:
+            return m.group(0)
+        if 'class="' in attrs:
+            attrs = attrs.replace('class="', 'class="breakable ', 1)
+        else:
+            attrs = f'{attrs} class="breakable"'
+        return f"<p{attrs}>{body}</p>"
+
+    return _PARA_RE.sub(repl, html)
+
+
+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(
@@ -179,26 +582,84 @@ def render(
     page_path: str = "",
     created: datetime | None = None,
     modified: datetime | None = None,
-) -> str:
-    """Render Markdown text to an HTML string.
+    title: str | None = None,
+) -> Rendered:
+    """Render Markdown text to the article body's HTML and layout flags.
+
+    ``title`` injects a ``# {title}`` line at the top when the markdown has
+    no h1 of its own, so the implicit page title goes through the exact
+    same pipeline as an explicit one (first-h1 anchor treatment included).
+
+    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) in at
+    least two paragraphs (COLS_PARAS) or one breakable-length paragraph,
+    and no ::: nocols container; its long paragraphs are marked .breakable;
+    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, "line_offset": 0}
+    if title and not has_h1(text):
+        text = f"# {title}\n\n{text}"
+        # The injected title shifts source lines by two; _heading_ids
+        # subtracts this from its data-line attributes.
+        env["line_offset"] = 2
+    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"
+        )
+        marked = _breakable_paras(html)
+        cols = (
+            " cols"
+            if text_len > COLS_TEXT
+            and not nocols
+            and (len(_PARA_OPEN_RE.findall(html)) >= COLS_PARAS or marked != html)
+            else ""
+        )
+        if cols:
+            html = marked
+        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:
     """Dateline for the ``{dates}`` tag: "1 Jan 2026", plus
-    " – edited 3 Jan 2026" when the last edit came >= 24h after
+    " – edited 3 Jan 2026" when the last edit came >= 48h after
     publishing (quick fixes right after posting stay unmentioned)."""
     out = f'<time datetime="{created.isoformat()}">{created.day} {created:%b %Y}</time>'
-    if modified is not None and modified - created >= timedelta(hours=24):
+    if modified is not None and modified - created >= timedelta(hours=48):
         out += f' – edited <time datetime="{modified.isoformat()}">{modified.day} {modified:%b %Y}</time>'
     return f'<p class="dateline">{out}</p>'
 
@@ -206,9 +667,9 @@ def _dateline(created: datetime, modified: datetime | None) -> str:
 def has_h1(text: str) -> bool:
     """True if the Markdown source itself contains an h1 heading.
 
-    When it does, the article owns its heading and the page title is not
-    rendered as an additional h1 (the title is still used for the document
-    <title> and navigation labels).
+    When it does, the article owns its heading and render(title=...) does
+    not inject the page title as an h1 (the title is still used for the
+    document <title> and navigation labels).
     """
     return any(t.type == "heading_open" and t.tag == "h1" for t in md.parse(text))
 

pagerite/migrations.py

@@ -0,0 +1,23 @@
+"""Kanta schema migrations, discovered by name (``migrate_vN``).
+
+Each function receives the raw state dict (JSON-level: bytes are base64
+strings) before it is decoded into ``Data`` structs, and runs exactly once
+per database based on its recorded version.
+"""
+
+import base64
+
+
+def migrate_v1(d: dict) -> None:
+    """Move in-database file blobs to the on-disk content-addressed store."""
+    files = d.pop("files", None)
+    if not files:
+        return
+    # Deferred import: app.py owns the file store and passes this module to
+    # Kanta; at migration time (lifespan open) the module is fully loaded.
+    from pagerite.app import file_store
+
+    for name, body in files.items():
+        if isinstance(body, str):  # JSON-level bytes are base64 strings
+            body = base64.b64decode(body)
+        file_store.put(name, body)

pagerite/seed.py

@@ -1,147 +1,410 @@
-"""Seed content written to the database on first run (when it is empty).
+"""Seed content written to the database on first creation only
+(``@kanta.bootstrap`` in ``app.py``).
 
-Demonstrates the formatting options: images attached to pages and served
-from the page path, figures with captions, attribute classes for
-positioning, footnotes, definition lists, task lists, tables and raw HTML.
+A "welcome to your new site" starter: a structured docs section (three
+menu levels deep) covering editing and one long article that walks the
+full Markdown feature set — each feature shown as its Markdown source in
+a code block followed by the rendered result — and a showcase section
+with image positioning, long-form layout and banner designs.
+
+Binary seed images live in ``seed-assets/`` (public domain, from
+Wikimedia Commons: the two whale engravings are Augustus Burnham
+Shute's illustrations for an 1892 edition of Moby-Dick; the wave is
+Hokusai's "The Great Wave off Kanagawa").
 """
 
+from pathlib import Path
+
+ASSETS = Path(__file__).with_name("seed-assets")
+
+
+def _asset(name: str) -> bytes:
+    return (ASSETS / name).read_bytes()
+
 WELCOME = """\
-Welcome to your new **Pagerite** site. Pages are written in Markdown — including raw HTML — and served from pretty URLs.
+Welcome to your new **Pagerite** site. Everything you see is a page written in Markdown, served from a pretty URL, and editable right here in the browser.
 
-Have a look around:
+Where to go next:
 
-- The [docs](/docs) section explains [how to write content](/docs/editing), including images and positioning.
-- [The Long Read](/blog/the-long-read) demonstrates a longer article with scroll effects.
-- The [about](/about) page shows off assorted formatting.
+- The [docs](/docs/editing) section explains how to edit this site and walks through every supported Markdown feature, source and result side by side.
+- The [showcase](/showcase/gallery) section shows what finished pages can look like: image positioning, banners, a long read.
+- Click the 🖊️ pen on any page to open the editor, and the ⚙️ pen for site settings and the structure tree.
 
-![Abstract waves](waves.svg "Generated SVG artwork, attached to this page")
+![Abstract waves](waves.svg "Generated SVG artwork, attached to this page"){width=420}
+
+*Delete or rewrite any of these pages — they are only here to get you started.*
 """
 
-ABOUT = """\
-This site runs on **Pagerite**: FastAPI + html5tagger + kanta, with content written in Markdown.
+EDITING = """\
+Everything on the site is editable in place. Log in, and pens appear: 🖊️ on the page and banner, ⚙️ in the banner corner for site settings.
 
-Some formatting samples:
+## The editor
 
-- [x] Write content in Markdown
-- [x] Attach images to pages
-- [ ] Add editing UI
+The 🖊️ pens open a tabbed editor over the page you are viewing:
 
-Term
-: A definition list entry, rendered by the deflist plugin.
+- **Article** — the page's title and Markdown, with a live preview. The format bar inserts the harder-to-remember syntax (links, tables, images); Ctrl/Cmd-B, I and S do what you expect. Saving is explicit: 💾 or Ctrl+S.
+- **Banner** — per-page banner HTML and a banner design picker. Banners are raw HTML (an image, a styled div, a canvas with a script) and subpages inherit the nearest banner up their path.
+- **Site** — brand, theme, fonts, favicon and custom CSS, all applied immediately.
+- **Structure** — the page tree. Drag rows to reorder or nest, rename titles and slugs inline, ➕ adds a page, ✕ deletes one.
 
-And a table:
+## URLs and structure
+
+The URL is the structure: a page at `docs/markdown` lives under `docs`, and the menus are derived from that. Slugs are lowercase ASCII (`a-z 0-9 - _`). A node without content is a category label — it renders a placeholder and its menu link points at its first child page. This site's own `docs` label demonstrates that, and the sidebar on this page shows the two submenu levels below it.
+
+Images and files uploaded anywhere land in a content-addressed store served from `/_f/{hash}.ext`, so links survive page moves. The article editor's format bar and copy-paste both upload images for you.
+
+{dates}
+"""
+
+# The full feature walkthrough: every supported extension in one long
+# article, each shown as Markdown source followed by the rendered result.
+MD_ARTICLE = """\
+# Markdown
+
+Everything Pagerite's renderer supports, on one long page — each feature shown first as Markdown source, then rendered. This page is also the live demo of the reading layout: on a wide screen the text flows in columns, and side boxes lean into the margin.
+
+## Text and headings
+
+```markdown
+*Emphasis*, **strong**, ~~strikethrough~~, `inline code`, and a
+[link to the front page](/). A hard line break
+is just a newline.
+
+Straight quotes become "curly", dashes -- and --- come out
+properly, and ... becomes an ellipsis, all automatically.
+```
+
+*Emphasis*, **strong**, ~~strikethrough~~, `inline code`, and a [link to the front page](/). A hard line break
+is just a newline.
+
+Straight quotes become "curly", dashes -- and --- come out properly, and ... becomes an ellipsis, all automatically.
+
+Headings from `##` down organize the article. On pages with at least three of them, each h1/h2 gets an anchor id and a self-link, so sections are linkable (try hovering a heading here) — and the editor's section pens and scroll sync key off the same anchors.
+
+## Lists
+
+```markdown
+- One
+- Two
+  - Nested
+
+1. First
+2. Second
+
+- [x] Task lists with real checkboxes
+- [x] Clickable on the rendered page
+- [ ] Like this one
+```
+
+- One
+- Two
+  - Nested
+
+1. First
+2. Second
+
+- [x] Task lists with real checkboxes
+- [x] Clickable on the rendered page
+- [ ] Like this one
+
+## Quotes and alerts
+
+```markdown
+> A blockquote. Newlines inside it are kept,
+> and a blank `>` line starts a new paragraph.
+
+> [!NOTE]
+> GitHub-style alerts — NOTE, TIP, IMPORTANT, WARNING, CAUTION —
+> render as callout boxes.
+```
+
+> A blockquote. Newlines inside it are kept,
+> and a blank `>` line starts a new paragraph.
+
+> [!NOTE]
+> GitHub-style alerts — NOTE, TIP, IMPORTANT, WARNING, CAUTION —
+> render as callout boxes.
+
+## Code
+
+Fenced blocks get server-side syntax highlighting, and a copy button on hover:
+
+````markdown
+```python
+def greet(name: str) -> str:
+    return f"Hello, {name}!"
+```
+````
+
+```python
+def greet(name: str) -> str:
+    return f"Hello, {name}!"
+```
+
+## Tables
+
+```markdown
+| Feature | Status |
+|---------|--------|
+| Pages   | done   |
+| Images  | done   |
+```
 
 | Feature | Status |
 |---------|--------|
 | Pages   | done   |
 | Images  | done   |
-| Comments| later  |
 
-Footnotes work too.[^1]
+## Footnotes
+
+```markdown
+Footnotes work inline.[^1]
 
 [^1]: Rendered at the bottom of the page, with a back-reference.
-"""
-
-EDITING = """\
-Pages are written in Markdown with extensions. Everything below is plain Markdown source — no special support from the article is needed for the site's layout or scroll effects.
-
-## Images
-
-Upload a file (`PUT /_api/files/{filename}`) and it lands in the content-addressed store, served immutable from `/_f/{hash}.ext` — an absolute URL that survives page moves:
-
-```
-![Abstract shapes](/_f/....svg "A captioned figure"){.right width=280}
 ```
 
-![Abstract shapes](shapes.svg "A captioned figure, floated right with an attribute class"){.right width=280}
+Footnotes work inline.[^1]
 
-The title becomes a `<figcaption>`, and brace attributes (the attrs plugin) control positioning: `{.right}`, `{.left}`, `{.wide}`, plus plain attributes like `width=280`. Absolute and external URLs pass through unchanged.
+[^1]: Rendered at the bottom of the page, with a back-reference.
 
-## Text
+## Definition lists
 
-*Emphasis*, **strong**, ~~strikethrough~~, `inline code`, and [links](/about) as usual. Blockquotes:
+```markdown
+Term
+: A definition list entry.
 
-> The URL space is the author's. Pretty slugs at the root, nesting only
-> where the content is genuinely structured.
-
-## Code
-
-```python
-def render(text: str, page_path: str) -> str:
-    return md.render(text, {"page_path": page_path})
+Another term
+: With its definition.
 ```
-"""
 
-LONG_READ = """\
-*An essay long enough to scroll, to demonstrate the gentle reveal of headings, figures and code blocks as they enter the viewport.*
+Term
+: A definition list entry.
+
+Another term
+: With its definition.
+
+## Sub- and superscript
+
+```markdown
+H~2~O and x^2^ + y^2^ = z^2^.
+```
+
+H~2~O and x^2^ + y^2^ = z^2^.
+
+## Admonitions
+
+```markdown
+!!! note
+    An admonition block for notes, warnings, tips...
+
+!!! warning "Mind the whale"
+    With an optional custom title.
+```
+
+!!! note
+    An admonition block for notes, warnings, tips...
+
+!!! warning "Mind the whale"
+    With an optional custom title.
+
+## Containers and margin notes
+
+`::: name` wraps its contents in a `<div class="name">` — brace attributes allowed. Three names are built in: `aside` floats a muted side box, `margin` marks a block as a margin note, and `nocols` opts its section out of the column layout. The `{.margin}` attribute does the same for a single block, written on its last line:
+
+````markdown
+::: aside
+A side box. On all but phone widths it floats in the side zone at
+the article's left, and the text never moves.
+:::
+
+This paragraph is a margin note.
+{.margin}
+
+::: nocols
+This section never flows into columns, however long the article.
+:::
+````
+
+::: aside
+A side box. On all but phone widths it floats in the side zone at the article's left, and the text never moves.
+:::
+
+This paragraph is a margin note.
+{.margin}
+
+::: nocols
+This section never flows into columns, however long the article.
+:::
+
+## Raw HTML
+
+HTML passes through untouched — useful for `<kbd>` keys, `<details>` sections, embedded media:
+
+```html
+<details><summary>Click to expand</summary>Hidden content.</details>
+```
+
+<details><summary>Click to expand</summary>Hidden content.</details>
+
+## Datelines
+
+A `{dates}` line on its own expands to the article's published/updated dateline:
+
+```markdown
+{dates}
+```
 
 {dates}
 
-![Layered dunes](dunes.svg "Full-width artwork between sections"){.wide}
+## Images and layout
 
-## Chapter one
+An image standing alone in its paragraph becomes a `<figure>`; its title becomes the caption; brace attributes control placement — `{.right}`, `{.left}`, `{.margin}`, `{.wide}`, or plain ones like `width=280`. That deserves its own page: [Images and Layout](/docs/markdown/images-and-layout).
 
-The distinction between a blog and a website is largely an accident of history. Early content management systems filed everything under "posts", stamped them with a date, and arranged them in reverse chronological order under a `/blog/` prefix. Anything else was a "page", which lived somewhere else entirely, often in a separate editing interface with separate rules.
+## The page title
 
-But readers do not think in these terms. A reader follows a link, reads what is there, and follows another link. The URL is a promise about where something lives, not about which database table it came from. Pagerite therefore treats every piece of content as a page: named, addressable, and rendered on the fly.
-
-## Chapter two
-
-Consider what happens to URLs when the tooling leads the design. You get addresses like `/cms/frontpage` or `/blog/post1` — the name of the machine leaking into the name of the thing. The slug should be chosen by the author, the way a book's title is chosen, and it should sit at the root of the site like the title sits on the cover.
-
-Nesting still has its place. Structured content — documentation, a series, a portfolio — benefits from paths that mirror the structure. The navigation on this very site is derived from the paths: open a section, and you see what it contains. No menu editor, no duplication of structure in two places.
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
-
-## Chapter three
-
-On the reading experience itself: motion on the web is usually either absent or obnoxious. The interesting middle ground is motion that acknowledges the reader's own movement — the scroll. Elements that fade in as they enter the viewport give the page a sense of depth, as if the content were arriving just in time.
-
-Crucially, none of this may depend on the article. The author writes Markdown; the effects come from the layout. And when the reader prefers reduced motion, everything must hold still.
-
-Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
-
-```text
-Quis autem vel eum iure reprehenderit
-qui in ea voluptate velit esse quam nihil
-molestiae consequatur, vel illum qui
-dolorem eum fugiat quo voluptas nulla pariatur?
-```
-
-At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
-
-## Chapter four
-
-Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
-
-Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. And so we arrive back where we started: the blog and the website were one thing all along. [Return to the front page](/).
+If your Markdown contains its own `# heading`, the page title is not repeated as a second h1 — it still supplies the `<title>` and the menu labels. This page is an example: its `# Markdown` heading *is* the title.
 """
 
-NOTES_ON_URLS = """\
-A URL is part of the content. A few rules of thumb I keep coming back to:
+MD_LAYOUT = """\
+## Images and figures
 
-- Pick slugs like book titles, not like database keys.
-- Nest only when the structure is real.
-- Once published, a URL is a promise. Redirect if you must break it.
+An image standing alone in its paragraph becomes a `<figure>`; its title becomes the caption. Inline images within text stay plain.
 
-> Cool URIs don't change; uncool ones at least apologise.
-
-That's all. Short posts are posts too.
-"""
-
-CANVAS_NIGHTS = """\
-This post's banner is not an image at all — it's a `<canvas>` animated by a few lines of JavaScript embedded in the page's banner HTML.
-
-Banners on this site are arbitrary markup: an image, a gradient div, or a small animated scene like the one above. Subpages inherit the nearest banner up their path, so a whole section can share one look.
-
-```js
-// the essence of the banner above
-stars.forEach(s => { s.x = (s.x + s.speed * dt) % 1 })
+```markdown
+![Abstract shapes](shapes.svg "A captioned figure")
 ```
 
-No build step, no framework — the snippet is stored with the page and dropped into the header as-is.
+![Abstract shapes](shapes.svg "A captioned figure")
+
+## Positioning with attributes
+
+Brace attributes (the attrs plugin) control placement: `{.right}` and `{.left}` float, `{.margin}` moves a figure into the side zone, `{.wide}` breaks out of the text column, and plain attributes like `width=280` pass through.
+
+```markdown
+![Abstract shapes](shapes.svg "Floated right"){.right width=280}
+```
+
+![Abstract shapes](shapes.svg "Floated right — text wraps around it"){.right width=280}
+
+Floated images let the text wrap around them, like this paragraph does. Relative image paths resolve against the page's own path, so attached files travel with the page. Uploaded files get content-addressed `/_f/` URLs that never break, no matter where the page moves.
+
+```markdown
+![Abstract waves](waves.svg "A figure in the margin"){.margin}
+```
+
+![Abstract waves](waves.svg "A figure in the margin, with {.margin}"){.margin}
+
+The same figure as a margin note: it leans into the side zone left of the text on all but phone widths, alongside the text it belongs to.
+
+{.wide} artwork spans the full content width:
+
+```markdown
+![Dunes](dunes.svg "Full-width artwork"){.wide}
+```
+
+![Dunes](dunes.svg "Full-width artwork between sections"){.wide}
+"""
+
+GALLERY = """\
+This page's banner is the **eyes** design — a critter in the grass in — picked from banner menu (⚙️ in the top right corner). The selection applies to current page and all its children, allowing differently themed sections be created. [Night Sky](night-sky) picked its own. You should also find the theme settings, which allow choosing overall site theme, fonts and transitions. You may wish to try the more playful **summer** theme which the eyes theme builds on.
+
+## Break out of the box!
+
+![Dunes](dunes.svg){.wide}
+
+::: aside
+![Abstract waves](waves.svg)
+
+## Aside boxes
+
+When you have to sideline a bit with something important to say, use `::: aside` and end with `:::`, markdown between.
+
+On larger screens they break outside the normal page bounds. `{.margin}` can be used to a similar effect without a box.
+:::
+
+Images and text boxes can also be positioned for a more lively layout.
+
+![Shapes](shapes.svg "Floated with {.right}"){.right}
+
+This text wraps around a left or right floated figure. The caption comes from the image title, with additional styling like `{.left width=240}` — brace attributes on the image itself.
+
+Note how the layout may take different forms from a phone in portrait to widest of desktop browsers, not leaving large empty areas nor being constrained to a classic container box model.
+
+Lifting off elements here and there makes a great difference to how your site is received!
+
+### Design matters
+
+Good graphical design gives a website a clear visual structure and makes information easy to understand at a glance. Layout, spacing, typography, color, and imagery should work together to establish hierarchy and guide attention naturally through the page. Consistency between sections also helps users quickly learn how the interface is organized.
+
+A strong website layout balances visual character with usability. Content should have enough space to remain readable, while navigation and important actions should be easy to find without dominating the design. Responsive layouts should preserve these relationships across different screen sizes rather than simply shrinking the desktop arrangement.
+"""
+
+NIGHT_SKY = """\
+This page's banner is not an image or a code snippet — it's the **stars** banner design, picked from a dropdown in the banner editor (🖊️ in the banner corner). Nothing is stored in the page beyond that choice.
+
+Banner designs are folders in `pagerite/themes/{name}/` — a `banner.css` plus a `banner.html` or `banner.svg` — so a design can be anything from a static gradient to an animated canvas like the starfield above. This site ships `stars` and `eyes` (a critter in the grass, seen on the [gallery](/showcase/gallery)), and themes can bring their own.
+
+Subpages inherit the nearest banner and design up their path, so a whole section can share one look — set one on a category and every page under it gets it, until a page overrides with its own. This page is a leaf: the design chosen here affects nothing else.
+
+A page can also carry its own banner HTML — an `<img>`, a styled div, a canvas with a script — which renders *on top of* the design's artwork, so author code always wins. But most of the time, picking a design is all you need.
+"""
+
+# Moby-Dick; or, The Whale (1851), Herman Melville — public domain.
+# Chapter 1, abridged and headed. A real long-read: flowing sections,
+# figures, a list, side notes — not a feature showcase. (Engravings:
+# Augustus Burnham Shute's illustrations for the 1892 edition, public
+# domain; the wave is Hokusai, public domain.)
+LOOMINGS = """\
+*The opening of Herman Melville's Moby-Dick (1851), abridged — here to show what a longer article feels like: the multi-column layout on wide screens, images breaking up the text, and the gentle reveal as sections scroll into view.*
+
+{dates}
+
+![The Great Wave off Kanagawa](great-wave.jpg "Hokusai, c. 1831 — the sea, full-bleed with {.wide}"){.wide}
+
+## The watery part of the world
+
+Call me Ishmael. Some years ago — never mind how long precisely — having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off — then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.
+
+::: aside
+Melville interrupts his story often — whole chapters on cetology, rope and chowder. Abridgments drop most of them, but notes like this one are where they would have gone.
+:::
+
+There now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs — commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extreme downtown is the battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previous were out of sight of land. Look at the crowds of water-gazers there.
+
+Circumambulate the city of a dreamy Sabbath afternoon. Go from Corlears Hook to Coenties Slip, and from thence, by Whitehall, northward. What do you see? — Posted like silent sentinels all around the town, stand thousands upon thousands of mortal men fixed in ocean reveries. Some leaning against the spiles; some seated upon the pier-heads; some looking over the bulwarks of ships from China; some high aloft in the rigging, as if striving to get a still better seaward peep. But these are all landsmen; of week days pent up in lath and plaster — tied to counters, nailed to benches, clinched to desks. How then is this? Are the green fields gone? What do they here?
+
+But look! here come more crowds, pacing straight for the water, and seemingly bound for a dive. Strange! Nothing will content them but the extremest limit of the land; loitering under the shady lee of yonder warehouses will not suffice. No. They must get just as nigh the water as they possibly can without falling in. And there they stand — miles of them — leagues. Inlanders all, they come from lanes and alleys, streets and avenues — north, east, south, and west. Yet here they all unite. Tell me, does the magnetic virtue of the needles of the compasses of all those ships attract them thither?
+
+## Meditation and water
+
+Once more. Say you are in the country; in some high land of lakes. Take almost any path you please, and ten to one it carries you down in a dale, and leaves you there by a pool in the stream. There is magic in it. Let the most absent-minded of men be plunged in his deepest reveries — stand that man on his legs, set his feet a-going, and he will infallibly lead you to water, if water there be in all that region. Should you ever be athirst in the great American desert, try this experiment, if your caravan happen to be supplied with a metaphysical professor. Yes, as every one knows, meditation and water are wedded for ever.
+
+Ishmael sails from New Bedford, the whaling port south of Boston — Nantucket was the older, prouder whaling town, and he briefly considers it first.
+{.margin}
+
+### The artist's problem
+
+But here is an artist. He desires to paint you the dreamiest, shadiest, quietest, most enchanting bit of romantic landscape in all the valley of the Saco. What is the chief element he employs? There stand his trees, each with a hollow trunk, as if a hermit and a crucifix were within; and here sleeps his meadow, and there sleep his cattle; and up from yonder cottage goes a sleepy smoke. Deep into distant woodlands winds a mazy way, reaching to overlapping spurs of mountains bathed in their hill-side blue. But though the picture lies thus tranced, and though this pine-tree shakes down its sighs like leaves upon this shepherd's head, yet all were vain, unless the shepherd's eye were fixed upon the magic stream before him.
+
+Why did the poor poet of Tennessee, upon suddenly receiving two handfuls of silver, deliberate whether to buy him a coat, which he sadly needed, or invest his money in a pedestrian trip to Rockaway Beach? Why is almost every robust healthy boy with a robust healthy soul in him, at some time or other crazy to go to sea? Why upon your first voyage as a passenger, did you yourself feel such a mystical vibration, when you were first told that you and your ship were now out of sight of land? Why did the old Persians hold the sea holy? Why did the Greeks give it a separate deity, and own brother of Jove? Surely all this is not without meaning. And still deeper the meaning of that story of Narcissus, who because he could not grasp the tormenting, mild image he saw in the fountain, plunged into it and was drowned. But that same image, we ourselves see in all rivers and oceans. It is the image of the ungraspable phantom of life; and this is the key to it all.
+
+## A simple sailor, right before the mast
+
+Now, when I say that I am in the habit of going to sea whenever I begin to grow hazy about the eyes, and begin to be over conscious of my lungs, I do not mean to have it inferred that I ever go to sea as a passenger. For to go as a passenger you must needs have a purse, and a purse is but a rag unless you have something in it. Besides, passengers get sea-sick — grow quarrelsome — don't sleep of nights — do not enjoy themselves much, as a general thing; — no, I never go as a passenger; nor, though I am something of a salt, do I ever go to sea as a Commodore, or a Captain, or a Cook. I abandon the glory and distinction of such offices to those who like them. For my part, I abominate all honorable respectable toils, trials, and tribulations of every kind whatsoever. It is quite as much as I can do to take care of myself, without taking care of ships, barques, brigs, schooners, and what not.
+
+![Moby Dick breeches a whaleboat](md-whale.jpg "Augustus Burnham Shute, 1892"){.right width=400}
+
+No, when I go to sea, I go as a simple sailor, right before the mast, plumb down into the forecastle, aloft there to the royal mast-head. True, they rather order me about some, and make me jump from spar to spar, like a grasshopper in a May meadow. And at first, this sort of thing is unpleasant enough. It touches one's sense of honor, particularly if you come of an old established family in the land, the Van Rensselaers, or Randolphs, or Hardicanutes. And more than all, if just previous to putting your hand into the tar-pot, you have been lording it as a country schoolmaster, making the tallest boys stand in awe of you. The transition is a keen one, I assure you, from a schoolmaster to a sailor, and requires a strong decoction of Seneca and the Stoics to enable you to grin and bear it. But even this wears off in time.
+
+What of it, if some old hunks of a sea-captain orders me to get a broom and sweep down the decks? What does that indignity amount to, weighed, I mean, in the scales of the New Testament? Do you think the archangel Gabriel thinks anything the less of me, because I promptly and respectfully obey that old hunks in that particular instance? Who ain't a slave? Tell me that. Well, then, however the old sea-captains may order me about — however they may thump and punch me about, I have the satisfaction of knowing that it is all right; that everybody else is one way or other served in much the same way — either in a physical or metaphysical point of view, that is; and so the universal thump is passed round, and all hands should rub each other's shoulder-blades, and be content.
+
+And finally, what shall I say of the reasons for going a-whaling? Chief among them:
+
+- The overwhelming idea of the great whale himself — such a portentous and mysterious monster roused all my curiosity.
+- The undeliverable, nameless perils of the whale, and the attendants of the wondrous world of waters.
+- The tormenting, mild image of the ungraspable phantom of life, seen in all rivers and oceans.
+
+These were the things that finally drew me to the sea — and if they but knew it, almost all men cherish very nearly the same feelings towards the ocean with me.
 """
 
 SMALL_RELEASES = """\
@@ -151,42 +414,22 @@ Software wants to be shipped. The longer a change sits unmerged, the more it rot
 2. Ship it behind whatever door you like.
 3. Let real use argue with your assumptions.
 
-A release is a conversation with reality. Small releases keep the conversation lively.
+A release is a conversation with reality. Small releases keep the conversation lively — and small *pieces* keep the whole thing standing, as [the comic on the About page](/about) illustrates all too well.
 """
 
-CANVAS_BANNER = """\
-<canvas id="stars"></canvas>
-<script>
-(() => {
-  const c = document.getElementById("stars");
-  const ctx = c.getContext("2d");
-  const fit = () => { c.width = c.clientWidth; c.height = c.clientHeight; };
-  fit();
-  addEventListener("resize", fit);
-  const stars = Array.from({ length: 110 }, () => ({
-    x: Math.random(), y: Math.random(),
-    r: Math.random() * 1.4 + 0.3, v: Math.random() * 0.05 + 0.01,
-  }));
-  let prev = performance.now();
-  (function frame(now) {
-    if (!c.isConnected) return;
-    const dt = Math.min(now - prev, 100); prev = now;
-    ctx.fillStyle = "#0b0e1d";
-    ctx.fillRect(0, 0, c.width, c.height);
-    ctx.fillStyle = "#cdd6ff";
-    for (const s of stars) {
-      s.x = (s.x + s.v * dt / 1000) % 1;
-      ctx.beginPath();
-      ctx.arc(s.x * c.width, s.y * c.height, s.r, 0, 7);
-      ctx.fill();
-    }
-    requestAnimationFrame(frame);
-  })(prev);
-})();
-</script>
-"""
+ABOUT = """\
+This site runs on **Pagerite**: FastAPI + html5tagger + kanta, with content written in Markdown and rendered on the fly.
 
-BLOG_BANNER = '<div style="background: linear-gradient(100deg, #14243d, #3d2b6b 45%, #7c5cff 75%, #ff5c8a)"></div>'
+- [How to edit this site](/docs/editing)
+- [Everything Markdown can do](/docs/markdown)
+- [The showcase](/showcase/gallery)
+
+Pagerite keeps its dependency list short and knows every entry on it. Modern software in general builds on taller towers of other people's work:
+
+[![xkcd 2347: Dependency](https://imgs.xkcd.com/comics/dependency.png "xkcd 2347: Dependency"){width=280}](https://xkcd.com/2347/)
+
+*Replace this page with whatever your site is about.*
+"""
 
 WAVES_SVG = """\
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
@@ -231,33 +474,55 @@ DUNES_SVG = """\
 """
 
 #: path -> (title, markdown, {filename: bytes}, banner HTML, menu order,
-#: banner design). Banners are deliberately set only on select sub pages
-#: (not the front page), so the theme's default design shows elsewhere.
-#: Note there are deliberately no "docs" or "blog" landing pages: those
-#: labels are created without content, so they render a placeholder page
-#: and their nav links point at the first child (see views.first_leaf).
+#: banner design). Designs demonstrate per-page choice: the gallery
+#: picks "eyes" (its page alone), night-sky picks "stars"; everything
+#: else inherits the active theme's own design.
+#: Note there are deliberately no "docs" or "showcase" landing pages:
+#: those labels are created without content, so they render a placeholder
+#: page and their nav links point at the first child (see
+#: views.first_leaf). "showcase" is seeded explicitly (empty markdown,
+#: which the seeder leaves as content=None) purely to fix its menu order.
 PAGES: dict[str, tuple[str, str, dict[str, bytes], str, float, str | None]] = {
     "": ("Welcome", WELCOME, {"waves.svg": WAVES_SVG.encode()}, "", 1, None),
-    "about": ("About", ABOUT, {}, "", 2, None),
-    "docs/editing": (
-        "Writing Content",
-        EDITING,
-        {"shapes.svg": SHAPES_SVG.encode()},
+    "about": ("About", ABOUT, {}, "", 3, None),
+    "docs/editing": ("Editing This Site", EDITING, {}, "", 1, None),
+    "docs/markdown": ("Markdown", MD_ARTICLE, {}, "", 2, None),
+    "docs/markdown/images-and-layout": (
+        "Images and Layout",
+        MD_LAYOUT,
+        {
+            "shapes.svg": SHAPES_SVG.encode(),
+            "waves.svg": WAVES_SVG.encode(),
+            "dunes.svg": DUNES_SVG.encode(),
+        },
         "",
         1,
         None,
     ),
-    "blog/the-long-read": (
-        "The Long Read",
-        LONG_READ,
-        {"dunes.svg": DUNES_SVG.encode()},
-        BLOG_BANNER,
+    "showcase": ("Showcase", "", {}, "", 4, None),
+    "showcase/gallery": (
+        "Gallery",
+        GALLERY,
+        {
+            "dunes.svg": DUNES_SVG.encode(),
+            "shapes.svg": SHAPES_SVG.encode(),
+            "waves.svg": WAVES_SVG.encode(),
+        },
+        "",
         1,
+        "eyes",
+    ),
+    "showcase/loomings": (
+        "Loomings — a Long Read",
+        LOOMINGS,
+        {
+            "great-wave.jpg": _asset("great-wave.jpg"),
+            "md-whale.jpg": _asset("md-whale.jpg"),
+        },
+        "",
+        2,
         None,
     ),
-    # The eyes critter is a named banner design (pagerite/themes/eyes/),
-    # not code embedded in the page.
-    "blog/notes-on-urls": ("Notes on URLs", NOTES_ON_URLS, {}, "", 2, "eyes"),
-    "blog/canvas-nights": ("Canvas Nights", CANVAS_NIGHTS, {}, CANVAS_BANNER, 3, None),
-    "blog/small-releases": ("Small Releases", SMALL_RELEASES, {}, "", 4, None),
+    "showcase/night-sky": ("Night Sky", NIGHT_SKY, {}, "", 3, "stars"),
+    "showcase/small-releases": ("Small Releases", SMALL_RELEASES, {}, "", 4, None),
 }

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/banner.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 360" preserveAspectRatio="xMidYMid slice">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 360" preserveAspectRatio="xMidYMax slice">
   <defs>
     <linearGradient id="cbg" x1="0" y1="0" x2="0" y2="1">
       <stop offset="0" class="cb-bg0"/>

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));
@@ -110,9 +106,7 @@ article h2 {
 
 article h3 {
   font-weight: 700;
-  font-size: 0.95rem;
   letter-spacing: 0.08em;
-  text-transform: uppercase;
   color: var(--muted);
 }
 
@@ -140,7 +134,3 @@ pre {
 img {
   border-radius: 4px;
 }
-
-::view-transition {
-  background: var(--bg);
-}

pagerite/themes/crossfade/transition.css

@@ -0,0 +1,20 @@
+/* Crossfade page transition. Injected by the backend as #pagerite-transition
+   when the "crossfade" transition is selected in the site settings. The old
+   snapshot stays fully opaque underneath while the new one fades in on top —
+   never a dip to black. Direction-neutral, so html.nav-back needs no
+   mirroring (and same-section html.nav-fade changes nothing). */
+@keyframes nav-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  mix-blend-mode: normal;
+  animation: none;
+}
+
+::view-transition-new(root) {
+  animation: 200ms ease-in-out nav-fade-in;
+}

pagerite/themes/cube/transition.css

@@ -0,0 +1,98 @@
+/* Rotating-cube page transition (from termotohtori.fi). FRAGILE — do not
+   tweak. Injected by the backend as #pagerite-transition when the "cube"
+   transition is selected in the site settings. pagerite.js toggles
+   html.nav-back for history-back navigation and html.nav-fade for
+   same-section navigation. */
+::view-transition {
+  perspective: 1000px;
+  inset: 0;
+  background: color-mix(var(--bg) 50%, black 50%);
+}
+
+::view-transition-group(root),
+::view-transition-image-pair(root) {
+  transform-style: preserve-3d;
+  isolation: auto;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  mix-blend-mode: normal;
+  backface-visibility: hidden;
+  animation: none;
+}
+
+@keyframes group-rotate {
+  to {
+    transform: rotateY(-90deg);
+  }
+}
+
+@keyframes fade-out-a-bit {
+  to {
+    opacity: 0.5;
+  }
+}
+
+@keyframes fade-in-a-bit {
+  from {
+    opacity: 0.5;
+  }
+}
+
+::view-transition-group(root) {
+  transform-origin: 50% 50% -50vw;
+  animation: 300ms ease-in-out forwards group-rotate;
+}
+
+::view-transition-old(root) {
+  animation: 300ms ease-in-out forwards fade-out-a-bit;
+}
+
+::view-transition-new(root) {
+  transform-origin: 0 0;
+  transform: rotateY(90deg);
+  inset: 0 auto 0 100%;
+  animation: 300ms ease-in-out forwards fade-in-a-bit;
+}
+
+/* Reverse direction for browser back navigation (same geometry, mirrored). */
+@keyframes group-rotate-back {
+  to {
+    transform: rotateY(90deg);
+  }
+}
+
+html.nav-back::view-transition-group(root) {
+  animation-name: group-rotate-back;
+}
+
+html.nav-back::view-transition-new(root) {
+  transform-origin: 100% 0;
+  transform: rotateY(-90deg);
+  inset: 0 100% 0 auto;
+}
+
+/* Same-section navigation: a plain crossfade instead of the cube. These
+   rules only override animation/geometry, leaving the block above's
+   perspective and layering untouched. The old snapshot stays fully opaque
+   underneath while the new one fades in on top — never a dip to black. */
+@keyframes nav-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+html.nav-fade::view-transition-group(root) {
+  animation: none;
+}
+
+html.nav-fade::view-transition-old(root) {
+  animation: none;
+}
+
+html.nav-fade::view-transition-new(root) {
+  transform: none;
+  inset: 0;
+  animation: 200ms ease-in-out nav-fade-in;
+}

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 {
-  height: 240px;
+/* Opt out of the base parallax (scale overscan + --pry drift): it lands on
+   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,32 +16,51 @@
 (() => {
   const c = document.getElementById('eyes')
   const ctx = c.getContext('2d')
-  const DPR = devicePixelRatio || 1
 
-  const fit = () => {
-    const w = Math.max(1, c.clientWidth)
-    const h = Math.max(1, c.clientHeight)
-    c.width = Math.round(w * DPR)
-    c.height = Math.round(h * DPR)
+  // Sync the backing store to the canvas' laid-out size. Checked every
+  // frame: this inline script runs before the stylesheets that size
+  // #page-banner, so observers/load events can still miss the transition.
+  // Assigning width/height also clears the canvas. DPR is read here, not
+  // 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
 
-  addEventListener('mousemove', e => {
+  // Mouse and touch tracked with separate listeners (pointer events arrive
+  // too late on some mobile browsers). Passive listeners: a drag on the
+  // banner still scrolls the page — on browsers that stop delivering
+  // touchmove once scrolling takes over, the gaze just follows until then.
+  const track = (x, y) => {
     const r = c.getBoundingClientRect()
 
     // Convert viewport coordinates into the canvas' CSS-pixel coordinate
     // system. This remains correct with browser zoom, CSS transforms, etc.
-    mx = (e.clientX - r.left) * c.clientWidth / r.width
-    my = (e.clientY - r.top) * c.clientHeight / r.height
+    mx = (x - r.left) * c.clientWidth / r.width
+    my = (y - r.top) * c.clientHeight / r.height
     lastMove = performance.now()
-  })
+  }
+
+  addEventListener('mousemove', e => track(e.clientX, e.clientY))
+
+  const trackTouch = e => {
+    const t = e.touches[0]
+
+    if (t) track(t.clientX, t.clientY)
+  }
+
+  addEventListener('touchstart', trackTouch, { passive: true })
+  addEventListener('touchmove', trackTouch, { passive: true })
 
   let gx = 0.5
   let gy = 0.5
@@ -54,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
@@ -114,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()
@@ -307,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)
@@ -319,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)
@@ -362,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) {
@@ -399,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
@@ -415,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/banner.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 360" preserveAspectRatio="xMidYMid slice">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 360" preserveAspectRatio="xMidYMax slice">
   <defs>
     <linearGradient id="flare" x1="0" y1="0" x2="1" y2="0">
       <stop offset="0" stop-color="#ff6a00"/>

pagerite/themes/nitro/theme.css

@@ -41,6 +41,10 @@
 
   --font-body: var(--font-montserrat);
   --font-heading: var(--font-literata);
+  --code-x-height: 0.517; /* Montserrat's x-height ratio */
+  /* Neutral grey selection instead of the accent tint: accent-colored
+     text (h2, links, markers) stays readable on it in both schemes. */
+  --selection-bg: #6664;
 }
 
 /* Dark scheme: same identity, but the page goes deep violet (never muddy
@@ -61,15 +65,17 @@
   }
 }
 
-::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 +137,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 h2,
-article h3 {
+article h1 {
   text-transform: uppercase;
   letter-spacing: 0.02em;
-}
-
-article h1 {
   color: var(--text);
   font-weight: 700;
   padding-bottom: 0.5rem;
@@ -181,8 +182,7 @@ article ul ul li::before {
 }
 
 article ul ul ul li::before {
-  content: "»";
-  color: var(--accent);
+  color: var(--muted);
 }
 
 blockquote {
@@ -206,7 +206,3 @@ pre {
 img {
   border-radius: 3px;
 }
-
-::view-transition {
-  background: var(--bg);
-}

pagerite/themes/purple/banner.css

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

pagerite/themes/purple/banner.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" preserveAspectRatio="xMidYMid slice">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" preserveAspectRatio="xMidYMax slice">
   <defs>
     <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
       <stop offset="0" stop-color="#2b1b4d"/>

pagerite/themes/purple/theme.css

@@ -17,11 +17,7 @@
   --line: #ffffff1c;
   --font-body: var(--font-literata);
   --font-heading: var(--font-fraunces);
-}
-
-::selection {
-  background: var(--accent2);
-  color: #fff;
+  --code-x-height: 0.507; /* Literata's x-height ratio */
 }
 
 /* Oversized tilted brand in the sky→violet gradient. */
@@ -64,12 +60,14 @@ article h3 {
 }
 
 /* Theme-colored diamond markers instead of the base emoji (blue/orange
-   clashes with this palette). */
+   clashes with this palette). The text-style ◆ runs heavy at full size,
+   so it's shrunk with font-size, the box is widened to compensate. */
 article ul li::before {
   content: "◆";
   color: var(--accent);
-  font-size: 0.7em;
-  vertical-align: 0.15em;
+  font-size: 0.8em;
+  margin-left: calc(-1 * var(--list-indent) / 0.8);
+  width: calc(var(--list-indent) / 0.8);
 }
 
 article ul ul li::before {
@@ -78,7 +76,6 @@ article ul ul li::before {
 }
 
 article ul ul ul li::before {
-  content: "◆";
   color: var(--accent3);
 }
 
@@ -91,7 +88,3 @@ blockquote {
 pre {
   --code-bg: var(--surface);
 }
-
-::view-transition {
-  background: #000;
-}

pagerite/themes/reveal/transition.css

@@ -0,0 +1,52 @@
+/* Wipe-reveal page transition: the old page stays put while the new one is
+   revealed on top of it by a clip-path wipe sweeping left to right.
+   Injected by the backend as #pagerite-transition when the "reveal"
+   transition is selected in the site settings. Mirrored on history-back
+   (html.nav-back: the wipe sweeps right to left); same-section navigation
+   crossfades (html.nav-fade). */
+::view-transition-old(root),
+::view-transition-new(root) {
+  mix-blend-mode: normal;
+  animation: none;
+}
+
+@keyframes reveal-right {
+  from {
+    clip-path: inset(0 100% 0 0);
+  }
+  to {
+    clip-path: inset(0);
+  }
+}
+
+::view-transition-new(root) {
+  clip-path: inset(0);
+  animation: 350ms ease-in-out reveal-right;
+}
+
+/* Reverse direction for browser back navigation. */
+@keyframes reveal-left {
+  from {
+    clip-path: inset(0 0 0 100%);
+  }
+  to {
+    clip-path: inset(0);
+  }
+}
+
+html.nav-back::view-transition-new(root) {
+  animation-name: reveal-left;
+}
+
+/* Same-section navigation: a plain crossfade instead of the wipe. The old
+   snapshot stays fully opaque underneath while the new one fades in on
+   top — never a dip to black. */
+@keyframes nav-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+html.nav-fade::view-transition-new(root) {
+  animation: 200ms ease-in-out nav-fade-in;
+}

pagerite/themes/slide/transition.css

@@ -0,0 +1,74 @@
+/* Horizontal slide page transition: the old page slides left while the new
+   one follows from the right, both moving together like pages side by side.
+   Injected by the backend as #pagerite-transition when the "slide"
+   transition is selected in the site settings. Mirrored on history-back
+   (html.nav-back); same-section navigation crossfades (html.nav-fade). Both
+   snapshots cover the viewport throughout, so no background shows between
+   them. */
+::view-transition {
+  background: var(--bg);
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  mix-blend-mode: normal;
+  animation: none;
+}
+
+@keyframes slide-out-left {
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+}
+
+::view-transition-old(root) {
+  animation: 300ms ease-in-out forwards slide-out-left;
+}
+
+::view-transition-new(root) {
+  animation: 300ms ease-in-out slide-in-right;
+}
+
+/* Reverse direction for browser back navigation. */
+@keyframes slide-out-right {
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes slide-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+}
+
+html.nav-back::view-transition-old(root) {
+  animation-name: slide-out-right;
+}
+
+html.nav-back::view-transition-new(root) {
+  animation-name: slide-in-left;
+}
+
+/* Same-section navigation: a plain crossfade instead of the slide. The old
+   snapshot stays fully opaque underneath while the new one fades in on
+   top — never a dip to black. */
+@keyframes nav-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+html.nav-fade::view-transition-old(root) {
+  animation: none;
+}
+
+html.nav-fade::view-transition-new(root) {
+  animation: 200ms ease-in-out nav-fade-in;
+}

pagerite/themes/stars/banner.css

@@ -0,0 +1,7 @@
+/* Stars banner design: a drifting starfield (banner.html — canvas + script
+   inlined by the backend into #page-banner). The canvas takes the banner's
+   13rem layout height directly so it never renders unclipped before the
+   main stylesheet loads; the starfield scales to any height. The design's
+   opt-out of theme banner overflow/fade effects also lives in banner.html's
+   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

@@ -0,0 +1,73 @@
+<canvas id="stars"></canvas>
+<style>
+  #stars {
+    width: 100%;
+    /* 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')
+
+  // Sync the backing store to the canvas' laid-out size. Checked every
+  // frame: this inline script runs before the stylesheets that size
+  // #page-banner, so observers/load events can still miss the transition.
+  // Assigning width/height also clears the canvas. DPR is read here, not
+  // 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)
+  }
+
+  const stars = Array.from({ length: 110 }, () => ({
+    x: Math.random(),
+    y: Math.random(),
+    r: Math.random() * 1.4 + 0.3,
+    v: Math.random() * 0.05 + 0.01
+  }))
+
+  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)
+    prev = now
+    ctx.fillStyle = '#0b0e1d'
+    ctx.fillRect(0, 0, w, h)
+    ctx.fillStyle = '#cdd6ff'
+    for (const s of stars) {
+      s.x = (s.x + (s.v * dt) / 1000) % 1
+      ctx.beginPath()
+      ctx.arc(s.x * w, s.y * h, s.r, 0, 7)
+      ctx.fill()
+    }
+    requestAnimationFrame(frame)
+  })(prev)
+})()
+</script>

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-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 .cloud-a {
+    animation: summer-drift 56s 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 + 1) { animation-delay: -3.1s; animation-duration: 6s; }
+  #page-banner .flower:nth-child(3n) {
+    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; }
-  to { opacity: 0.38; }
+  from {
+    opacity: 0.22;
+  }
+
+  to {
+    opacity: 0.38;
+  }
 }
 
 @keyframes summer-drift {
-  from { transform: translateX(-1.6%); }
-  to { transform: translateX(1.6%); }
+  from {
+    transform: translateX(-1.6%);
+  }
+
+  to {
+    transform: translateX(1.6%);
+  }
 }
 
 @keyframes summer-sway {
-  from { transform: rotate(-2.6deg); }
-  to { transform: rotate(2.6deg); }
+  from {
+    transform: rotate(-2.6deg);
+  }
+
+  to {
+    transform: rotate(2.6deg);
+  }
 }

pagerite/themes/summer/banner.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 1600 320"
-     preserveAspectRatio="xMidYMid slice">
+     preserveAspectRatio="xMidYMax slice">
 
   <defs>
     <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">

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 {
-  background: var(--sun);
-  color: #3d5223;
+/* No separation between banner and page: the frame loses its background,
+   border and shadow, and the artwork overflows into the document below,
+   masked by a transparency gradient so it cross-fades into the body's fixed
+   meadow gradient. A plain color match is impossible — both sides are
+   gradients, and the parallax drift keeps the banner side moving. */
+#banner {
+  background: none;
+  border-bottom: 0;
+  box-shadow: none;
 }
 
-/* The banner frame ties into the meadow beneath it. */
-#banner {
-  border-bottom-color: #4f913b30;
-  box-shadow: 0 0.3rem 1rem #4f913b22;
+#page-banner {
+  inset: 0 0 -6rem;
+  /* Paints over the page background in the overlap, but never swallows its
+     clicks. */
+  pointer-events: none;
+  mask-image: linear-gradient(180deg, #000 calc(100% - 6rem), transparent);
+  /* Canvas banner designs (eyes) default to the 13rem layout height; here
+     they must fill the taller overflow stage so their meadow extension
+     reaches through the fade strip. */
+  --eyes-h: 100%;
+}
+
+/* The mask above replaced the SVG's flat-color bottom fade (meadowFade) —
+   fading to a single --bg would reintroduce a seam against the gradient. */
+#page-banner .summer-fade {
+  stop-opacity: 0;
 }
 
 /* Cheerful oversized tilted brand in a sky→grass→flower gradient. */
@@ -114,14 +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 {
@@ -171,12 +205,11 @@ article a:hover {
   color: var(--accent);
 }
 
-/* Flower bullets, one accent per nesting level. */
+/* Fleur-de-lis on the first level, flowers below — one accent per level.
+   (⚜️ renders emoji-style, so it needs no shrinking like the flowers.) */
 article ul li::before {
-  content: "❀";
+  content: "⚜️";
   color: var(--accent3);
-  font-size: 0.8em;
-  vertical-align: 0.1em;
 }
 
 article ul ul li::before {
@@ -260,8 +293,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

@@ -8,29 +8,76 @@ can swap them without reloading the page chrome.
 Navigation walks the Node tree directly (see data.py): nav_html lists the
 top level — the front page (slug "") is an ordinary top-level item, not
 the parent of the others — and sidebar_html the sub-navigation of the
-current top-level section, rendered only when the section offers at
-least two published items. Nodes without content are category labels; nav links
+current top-level section, rendered only from the second level down
+(main-level pages list their children as cards after the content instead,
+see page_content). Nodes without content are category labels; nav links
 to them point straight at their first child page (first_leaf), and their
-own URL renders a placeholder page (render_category).
+own URL renders a card-listing page (render_category, a 404).
 """
 
 from pathlib import Path
+from html import unescape
 import json
 import os
+import re
 
 from html5tagger import HTML, Document, E, Template
+from platformdirs import site_data_dir, user_data_path
 
 from pagerite.data import Node, prettify, resolve, sorted_nodes
-from pagerite.markdown import has_h1, render
+from pagerite.markdown import render
 
 SITE_NAME = "Pagerite"
 BUILD = Path(__file__).with_name("frontend-build")
-THEMES = Path(__file__).parent / "themes"
+
+
+def _data_roots() -> list[Path]:
+    """Platform data dirs for user-provided assets (platformdirs), most
+    specific first: user data dir, then the system-wide data dirs."""
+    roots = [user_data_path("pagerite", appauthor=False)]
+    # site_data_dir keeps the multipath (site_data_path collapses it to the
+    # first entry, since a Path cannot hold several).
+    roots += site_data_dir("pagerite", appauthor=False, multipath=True).split(os.pathsep)
+    return [Path(r) for r in roots]
+
+
+def _theme_dirs() -> list[Path]:
+    """Theme search roots, most specific first; first match wins per file.
+
+    Users can add new themes or override/extend built-in ones file by file
+    by placing folders in any of these roots (all combine into one listing):
+    cwd, the site folder, and the platform user/system data dirs
+    (e.g. ~/.local/share/pagerite, /usr/share/pagerite on Linux;
+    %LOCALAPPDATA%\\pagerite, %PROGRAMDATA%\\pagerite on Windows).
+    The built-in package themes are the final fallback.
+    """
+    return [
+        Path("themes"),
+        Path(os.getenv("PAGERITE_HOSTNAME", "localhost")) / "themes",
+        *(root / "themes" for root in _data_roots()),
+        Path(__file__).parent / "themes",
+    ]
+
+
+THEME_DIRS = _theme_dirs()
+
+# User fonts are shared across themes, so they live in fonts/ folders next
+# to the themes/ roots (no built-in fallback: built-in fonts ship with the
+# Vite build). A font folder {name}/ carries font.css with @font-face rules
+# (relative URLs resolve under /_fonts/{name}/) and a :root --font-{name}
+# stack variable, so themes and custom CSS can reference it like the
+# built-in --font-* variables.
+FONT_DIRS = [
+    Path("fonts"),
+    Path(os.getenv("PAGERITE_HOSTNAME", "localhost")) / "fonts",
+    *(root / "fonts" for root in _data_roots()),
+]
 
 # The base CSS is built by Vite as a separate entry so the backend can link
 # it independently of the theme. Themes and banner designs are plain .css
-# files in THEMES/{name}/, served by the backend at /_themes/{name}/... and
-# re-read from disk on every request (see app.py), so they are never built.
+# files in {THEME_DIRS}/{name}/, served by the backend at /_themes/{name}/...
+# and re-read from disk on every request (see app.py), so they are never
+# built and edits/new folders show without a restart.
 _BASE_CSS_KEY = "src/assets/pagerite.css"
 
 _manifest_cache: dict | None = None
@@ -44,20 +91,105 @@ def _manifest() -> dict:
     return _manifest_cache
 
 
-def _theme_names() -> list[str]:
-    """Theme folders on disk (a folder is a theme when it has theme.css)."""
-    return sorted(
-        d.name for d in THEMES.iterdir() if d.is_dir() and (d / "theme.css").exists()
-    )
+def _theme_color_schemes(theme: str) -> set[str]:
+    """Return the color-scheme keywords (``light``/``dark``) from theme.css.
+
+    Reads the first ``color-scheme:`` declaration in the file. An empty set
+    means the theme did not declare one.
+    """
+    path = theme_file(theme, "theme.css")
+    if path is None:
+        return set()
+    try:
+        css = path.read_text()
+    except (OSError, ValueError):
+        return set()
+    css = re.sub(r"/\*.*?\*/", "", css, flags=re.DOTALL)
+    m = re.search(r"color-scheme\s*:\s*([^;]+);", css, re.IGNORECASE)
+    if not m:
+        return set()
+    return {tok.lower() for tok in m.group(1).split() if tok.lower() in {"light", "dark"}}
+
+
+def _theme_mode(theme: str) -> str:
+    """Light/dark mode support of a theme, derived from its CSS.
+
+    Returns one of ``"light"``, ``"dark"``, or ``"both"``. Themes without a
+    ``color-scheme`` declaration are treated as light-only.
+    """
+    schemes = _theme_color_schemes(theme)
+    if "light" in schemes and "dark" in schemes:
+        return "both"
+    if "dark" in schemes:
+        return "dark"
+    return "light"
+
+
+def _theme_info() -> list[dict[str, str]]:
+    """Theme folders on disk, each with its name and supported color mode."""
+    return [
+        {"name": name, "mode": _theme_mode(name)}
+        for name in _theme_folder_names(("theme.css",))
+    ]
 
 
 def _banner_design_names() -> list[str]:
     """Available banner designs: theme folders with artwork and/or styles."""
+    return _theme_folder_names(("banner.css", "banner.svg", "banner.html"))
+
+
+def _transition_names() -> list[str]:
+    """Available page-transition designs: theme folders with transition.css."""
+    return _theme_folder_names(("transition.css",))
+
+
+def _theme_folder_names(required: tuple[str, ...]) -> list[str]:
+    """Sorted union of theme folder names across THEME_DIRS containing any
+    of the required files."""
+    return sorted(
+        name
+        for root in THEME_DIRS
+        if root.is_dir()
+        for name in {d.name: d for d in root.iterdir() if d.is_dir()}
+        if any(theme_file(name, f) for f in required)
+    )
+
+
+def _user_fonts() -> list[dict]:
+    """User font folders on disk: FONT_DIRS/{name}/ with a font.css.
+
+    The label and serif flag are read from the font.css ``--font-{name}``
+    stack variable; the stylesheet itself is linked on every page (see
+    _layout) so the variable and @font-face rules just exist.
+    """
+    fonts = []
+    for name in _font_folder_names():
+        path = font_file(name, "font.css")
+        css = path.read_text(errors="replace") if path else ""
+        m = re.search(
+            rf"--font-{re.escape(name)}\s*:\s*([^;]+);",
+            re.sub(r"/\*.*?\*/", "", css, flags=re.DOTALL),
+        )
+        stack = m.group(1) if m else ""
+        family = re.search(r'"([^"]+)"|\'([^\']+)\'', stack)
+        fonts.append(
+            {
+                "name": name,
+                "label": (family.group(1) or family.group(2)) if family else name,
+                "serif": bool(re.search(r"(^|,\s*)serif\s*$", stack)),
+            }
+        )
+    return fonts
+
+
+def _font_folder_names() -> list[str]:
+    """Sorted union of font folder names across FONT_DIRS with a font.css."""
     return sorted(
         d.name
-        for d in THEMES.iterdir()
-        if d.is_dir()
-        and any((d / f).exists() for f in ("banner.css", "banner.svg", "banner.html"))
+        for root in FONT_DIRS
+        if root.is_dir()
+        for d in root.iterdir()
+        if d.is_dir() and (d / "font.css").is_file()
     )
 
 
@@ -66,6 +198,27 @@ def _valid_name(name: str) -> bool:
     return bool(name) and "/" not in name and not name.startswith(".")
 
 
+def theme_file(name: str, filename: str) -> Path | None:
+    """Resolve a theme file across THEME_DIRS; the first root with the file
+    wins, so users can override or extend built-in themes file by file."""
+    return _user_file(THEME_DIRS, name, filename)
+
+
+def font_file(name: str, filename: str) -> Path | None:
+    """Resolve a user font file across FONT_DIRS (first match wins)."""
+    return _user_file(FONT_DIRS, name, filename)
+
+
+def _user_file(dirs: list[Path], name: str, filename: str) -> Path | None:
+    if not _valid_name(name) or not _valid_name(filename):
+        return None
+    for root in dirs:
+        path = root / name / filename
+        if path.is_file():
+            return path
+    return None
+
+
 def _base_css_url(vite_url: str | None) -> str | None:
     """URL for the base stylesheet (None in dev: Vite injects it from JS,
     avoiding the HMR-wrapped module output)."""
@@ -79,18 +232,25 @@ def _base_css_url(vite_url: str | None) -> str | None:
 
 def _theme_css_url(theme: str) -> str | None:
     """URL for the theme stylesheet, served by the backend (dev and prod)."""
-    if theme and _valid_name(theme) and (THEMES / theme / "theme.css").exists():
+    if theme and theme_file(theme, "theme.css"):
         return f"/_themes/{theme}/theme.css"
     return None
 
 
 def _banner_css_url(design: str) -> str | None:
     """URL for a banner design's stylesheet, served by the backend."""
-    if design and _valid_name(design) and (THEMES / design / "banner.css").exists():
+    if design and theme_file(design, "banner.css"):
         return f"/_themes/{design}/banner.css"
     return None
 
 
+def _transition_css_url(transition: str) -> str | None:
+    """URL for a page-transition stylesheet, served by the backend."""
+    if transition and theme_file(transition, "transition.css"):
+        return f"/_themes/{transition}/transition.css"
+    return None
+
+
 def _editor_css_url(vite_url: str | None) -> str | None:
     """URL for the editor-specific stylesheet (Vue component styles).
 
@@ -108,56 +268,150 @@ def _editor_css_url(vite_url: str | None) -> str | None:
     return None
 
 
+def _inline_asset(url: str) -> str:
+    """Read a served asset's content for inlining into the page (prod only).
+
+    Handles build assets (``/_assets/...`` from the Vite build) and theme
+    or user-font files (``/_themes/{name}/...``, ``/_fonts/{name}/...``,
+    resolved across THEME_DIRS / FONT_DIRS).
+    """
+    for prefix, resolver in (("/_themes/", theme_file), ("/_fonts/", font_file)):
+        if url.startswith(prefix):
+            name, _, file = url.removeprefix(prefix).partition("/")
+            path = resolver(name, file)
+            if path is None:
+                raise ValueError(f"not a theme/font asset: {url}")
+            return path.read_text()
+    return (BUILD / url.lstrip("/")).read_text()
+
+
+def _inline_script(url: str) -> str:
+    """Read a built JS bundle for inlining (prod only).
+
+    Inline modules resolve relative imports against the document URL, not
+    the bundle's directory, so rewrite the build's relative chunk
+    specifiers ("./chunk.js") to absolute /_assets/ paths.
+    """
+    js = _inline_asset(url)
+    for chunk in _manifest().values():
+        file = chunk.get("file", "")
+        if file.endswith(".js"):
+            js = js.replace(f'"./{file.rsplit("/", 1)[-1]}"', f'"/{file}"')
+    return js
+
+
 def _layout(
     modules: list[str] = (),
+    stylesheets: list[str] = (),
     custom_css: str = "",
     theme: str = "",
     banner_design: str = "",
+    transition: str = "cube",
     favicon: str = "",
+    social: dict[str, str] | None = None,
 ) -> Template:
-    """Page layout template with standard asset URLs and ES-module scripts.
+    """Page layout template with standard assets and ES-module scripts.
 
-    Stylesheets use ``blocking="render"`` so the browser waits for them before
-    showing the page, avoiding a flash of unstyled content. Order matters and
-    is fixed: base (Vite build, absent in dev where Vite injects it from JS),
-    theme and banner design (backend-served from pagerite/themes/), then the
-    user's custom CSS last so it always wins.
+    In dev (PAGERITE_VITE_URL set) assets are linked from the Vite dev
+    server and stylesheets use ``blocking="render"`` so the browser waits
+    for them before showing the page, avoiding a flash of unstyled content.
+    In production all page assets are inlined into the document: stylesheets
+    become ``<style>`` elements and module scripts inline ``<script>``s, so
+    a page loads with no asset round trips. The on-demand bundles (editor,
+    analytics) stay external in both modes.
+
+    Order matters and is fixed: base (Vite build, absent in dev where Vite
+    injects it from JS), user fonts (from FONT_DIRS, so themes and custom
+    CSS can reference their --font-* variables), theme, banner design and
+    page transition (from THEME_DIRS),
+    entry-specific stylesheets (e.g. overlayscrollbars.css), then the user's
+    custom CSS last so it always wins.
 
     In dev, pagerite.js re-appends the backend-rendered theme/design links
     (and the custom CSS) after the Vite-injected base styles, keeping this
     order intact.
+
+    ``social`` maps meta keys to contents: ``og:*``/``article:*`` go out as
+    property attributes, everything else (description, twitter:*) as name.
     """
     doc = Document(E.Title, lang="en")
     # Responsive layout (see the 48rem breakpoint in pagerite.css) needs
     # the real device width, not the default 980px layout viewport.
     doc.meta(name="viewport", content="width=device-width, initial-scale=1")
+    for key, value in (social or {}).items():
+        if value:
+            if key.startswith(("og:", "article:")):
+                doc.meta(property=key, content=value)
+            elif key == "canonical":
+                doc.link(rel="canonical", href=value)
+            else:
+                doc.meta(name=key, content=value)
     # A custom favicon (from the site editor) is linked explicitly; without
     # one, browsers fall back to the build's /favicon.ico by convention.
     if favicon:
         doc.link(rel="icon", href=f"/_f/{favicon}", id="pagerite-favicon")
-    # Editor asset URLs for pagerite.js, which injects the 🖊️ edit pens
-    # itself once it has validated the session (pages render identically
-    # for everyone; editing is gated by the auth proxy in front of /_api).
-    script, editor_css = _editor_assets()
-    doc.meta(name="pagerite:editor-src", content=script[-1])
-    if editor_css:
-        doc.meta(name="pagerite:editor-css", content=editor_css)
-    # Stylesheet links carry stable ids so the site editor's hot swap can
-    # keep each sheet at its rendered position (see swapRegions).
+    # Asset URLs for the on-demand bundles (editor, analytics) for
+    # pagerite.js, which injects the 🖊️ edit pens itself once it has
+    # validated the session (pages render identically for everyone; editing
+    # is gated by the auth proxy in front of /_api). Dev passes the Vite
+    # dev-server URLs as meta tags (Vite serves the modules and injects
+    # their CSS for hot reloads); production inlines all page assets and
+    # carries the on-demand URLs in one JSON script instead.
     vite_url = os.environ.get("PAGERITE_VITE_URL")
+    editor_scripts, editor_css = _editor_assets()
+    config = {
+        "pagerite:editor-src": editor_scripts[-1],
+        "pagerite:analytics-src": _analytics_assets()[0][0],
+    }
+    if editor_css:
+        config["pagerite:editor-css"] = editor_css
+    if vite_url:
+        for key, value in config.items():
+            doc.meta(name=key, content=value)
+    else:
+        # Inert JSON script; URLs never contain "</", but stay safe.
+        doc.script(
+            HTML(json.dumps(config).replace("</", "<\\/")),
+            type="application/json",
+            id="pagerite-assets",
+        )
+    # Stylesheets carry stable ids so the fetch-navigation and the site
+    # editor's hot swap can sync <head> positionally (see swapdoc.js).
+    # Production inlines the CSS as <style> elements: one less round trip
+    # per sheet, and fetch-navigation can carry them across swaps whole.
     sheets = [
         ("pagerite-base", _base_css_url(vite_url)),
+        *[
+            (f"pagerite-font-{name}", f"/_fonts/{name}/font.css")
+            for name in _font_folder_names()
+        ],
         ("pagerite-theme", _theme_css_url(theme)),
         ("pagerite-banner", _banner_css_url(banner_design)),
+        ("pagerite-transition", _transition_css_url(transition)),
     ]
     for id_, url in sheets:
-        if url:
+        if not url:
+            continue
+        if vite_url:
             doc.link(rel="stylesheet", href=url, blocking="render", id=id_)
+        else:
+            doc.style(HTML(_inline_asset(url)), id=id_)
+    for url in stylesheets:
+        if vite_url:
+            doc.link(rel="stylesheet", href=url, blocking="render")
+        else:
+            # Id from the file stem minus the content hash, so the head
+            # sync can match sheets across pages (e.g. the analytics sheet
+            # exists on /_a only and is added/removed on swaps).
+            stem = url.rsplit("/", 1)[-1].removesuffix(".css")
+            name = re.sub(r"-[A-Za-z0-9_-]{8}$", "", stem)
+            doc.style(HTML(_inline_asset(url)), id=f"pagerite-css-{name}")
     for src in modules:
-        doc.script(src=src, type="module")
+        if vite_url:
+            doc.script(src=src, type="module")
     if custom_css.strip():
         doc.style(custom_css, id="pagerite-user")
-    return Template(
+    body = (
         doc
         .header(
             E.div(E.Banner, id="page-banner"),
@@ -170,8 +424,23 @@ def _layout(
             E.main(E.Main, id="main"),
             id="content",
         )
-        .footer(None),  # kept empty for now; zero-height (see pagerite.css)
+        .footer(None)  # kept empty for now; zero-height (see pagerite.css)
     )
+    if not vite_url:
+        # Inline the bundles at the end of the body: module scripts are
+        # deferred anyway, and the page can render before they execute.
+        # Escape "</script" so it cannot terminate the element early (only
+        # ever occurs inside string literals, where the backslash escape is
+        # a no-op).
+        for src in modules:
+            js = re.sub(r"</script", r"<\\/script", _inline_script(src), flags=re.I)
+            # Stable id from the file stem minus the content hash; the
+            # analytics page's script (pagerite-js-analytics) is found and
+            # re-created by pagerite.js on fetch-navigations to /_a.
+            stem = src.rsplit("/", 1)[-1].removesuffix(".js")
+            name = re.sub(r"-[A-Za-z0-9_-]{8}$", "", stem)
+            body.script(HTML(js), type="module", id=f"pagerite-js-{name}")
+    return Template(body)
 
 
 def _brand_link(brand: str, brand_html: str = "") -> HTML:
@@ -232,17 +501,19 @@ def sidebar_html(menu: dict[str, Node], current: str) -> HTML:
     The sidebar is the current main level section's sub-navigation: the
     section's direct children as the top list level, with each item's own
     published children nested under it (third level and deeper), so it
-    exists only when there is something to navigate: the section must
-    offer at least two published items, or exactly one while viewing
-    anything else than that only page — the section index, a 404, a
-    grandchild (otherwise those pages offer no way to reach the child) —
-    and viewing that only page itself still shows the sidebar when the
-    page has published children of its own to reach.
-    The front page, leaf pages, the sole childless page of a one-page
-    section and childless sections get no aside element at all (rather
-    than an empty or useless one-item box).
+    exists only when there is something to navigate. It renders only from
+    the second level down: main-level pages (and the front page) list
+    their children as cards after the content instead of a sidebar. From
+    there, the section must offer at least two published items, or exactly
+    one while viewing anything else than that only page — the section
+    index, a 404, a grandchild (otherwise those pages offer no way to
+    reach the child) — and viewing that only page itself still shows the
+    sidebar when the page has published children of its own to reach.
+    Leaf pages, the sole childless page of a one-page section and
+    childless sections get no aside element at all (rather than an empty
+    or useless one-item box).
     """
-    if not current:
+    if not current or "/" not in current:
         return HTML("")
     section = current.split("/", 1)[0]
     node = menu.get(section)
@@ -331,14 +602,10 @@ def _design_banner(design: str) -> HTML:
     """
     if not _valid_name(design):
         return HTML("")
-    html = THEMES / design / "banner.html"
-    svg = THEMES / design / "banner.svg"
-    if html.exists():
-        body = html.read_text()
-    elif svg.exists():
-        body = svg.read_text()
-    else:
+    path = theme_file(design, "banner.html") or theme_file(design, "banner.svg")
+    if path is None:
         return HTML("")
+    body = path.read_text()
     return HTML(f'<div data-design="{design}">{body}</div>')
 
 
@@ -346,10 +613,7 @@ def theme_banner_design(theme: str) -> str:
     """The theme's own banner design (a theme folder doubles as a banner
     design when it ships banner.css, banner.svg or banner.html), "" if it
     has none."""
-    if _valid_name(theme) and any(
-        (THEMES / theme / f).exists()
-        for f in ("banner.css", "banner.svg", "banner.html")
-    ):
+    if any(theme_file(theme, f) for f in ("banner.css", "banner.svg", "banner.html")):
         return theme
     return ""
 
@@ -411,21 +675,189 @@ 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."""
+    """Render the contents of the #main element for a page.
+
+    A page with published children (a category page) lists them as cards
+    after the markdown content.
+    """
     node = resolve(menu, path)[-1]
-    doc = E.article
+    # The title is injected into the markdown (as # title when it has no
+    # h1 of its own), so title and content render as one article.
+    rendered = render(node.content or "", path, node.created, node.modified, title=node.title)
+    # Long articles get .multicol: the article column cap lifts (see the
+    # #content grid in pagerite.css) and the .cols segments lay out in at
+    # most two columns. The 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(
-            HTML(render(node.content or "", path, node.created, node.modified)),
-            class_="body",
-        )
+        doc(HTML(rendered.html))
+        _cards(doc, menu, node, path)
     return HTML(str(doc))
 
 
+def _cards(doc, menu: dict[str, Node], node: Node, path: str) -> None:
+    """Card stacks of the node's published children (nothing when childless).
+
+    One column per direct child, all in a single full-width row (the .wide
+    breakout): the columns grow to fill the page and shrink rather than
+    wrap. A column holds the child's whole subtree flattened in menu order
+    — nesting levels are not split out — starting with the first page that
+    has actual content (the child itself when it does, its first leaf
+    otherwise, recursively). Each card is one <a> showing the page's share
+    image (the same heuristics as og:image) as the cover and its title;
+    image-less cards get a gradient cover and also show the description.
+    Only phrasing-level elements (spans) go inside the <a>: as a formatting
+    element it would be cloned by the HTML parser around any block-level
+    child, splitting one card into several links.
+    """
+    items = [(s, c) for s, c in sorted_nodes(node.children) if c.published]
+    if not items:
+        return
+    with doc.div(class_="cards wide"):
+        for slug, child in items:
+            cpath = f"{path}/{slug}" if path else slug
+            entries = list(_walk(child, cpath))
+            if not entries:
+                continue
+            with doc.div(class_="stack"):
+                for epath, enode in entries:
+                    _card(doc, enode, epath)
+
+
+def _walk(node: Node, path: str):
+    """Published content pages of a subtree, pre-order in menu order: the
+    node itself first when it has content (the stack's landing card), then
+    its descendants (content-less nodes contribute only their subtree)."""
+    if node.content:
+        yield path, node
+    for slug, child in sorted_nodes(node.children):
+        if child.published:
+            yield from _walk(child, f"{path}/{slug}")
+
+
+def _card(doc, node: Node, path: str) -> None:
+    """One card in a stack: cover + title, plus the description when the
+    page has no image (its card shows a gradient cover instead)."""
+    image = description = ""
+    if node.content:
+        html = render(node.content, path, node.created, node.modified).html
+        image, _ = _media(html)
+        if not image:
+            description = _description(html, 150)
+    with doc.a(href=f"/{path}", class_="card"):
+        if image:
+            doc.span(class_="cover", style=f'background-image: url("{image}")')
+        else:
+            doc.span(class_="cover")
+        doc.span(_title(path.rpartition("/")[2], node), class_="title")
+        if description:
+            doc.span(description, class_="desc")
+
+
+_FIRST_P = re.compile(r"<p[^>]*>(.*?)</p>", re.S)
+_TAG = re.compile(r"<[^>]+>")
+_IMG_TAG = re.compile(r"<img\b[^>]*>")
+_VIDEO_TAG = re.compile(r"<video\b[^>]*>")
+_ATTR_SRC = re.compile(r'src="([^"]+)"')
+_ATTR_CLASS = re.compile(r'class="([^"]*)"')
+
+
+_SENTENCE_END = re.compile(r"[.!?][”'\")]*(?=\s|$)")
+
+
+def _description(html: str, limit: int = 200) -> str:
+    """Article description: the first paragraph's text, truncated at a
+    sentence end (or, failing that, a word boundary) within ``limit``.
+    Used for og:description."""
+    m = _FIRST_P.search(html)
+    text = unescape(_TAG.sub("", m.group(1) if m else ""))
+    text = " ".join(text.split())
+    if len(text) <= limit:
+        return text
+    # Prefer a clean cut: the last sentence ending within the limit, as
+    # long as it does not reduce the description to a tiny fragment.
+    if (end := max((m.end() for m in _SENTENCE_END.finditer(text[:limit])), default=0)) > limit // 2:
+        return text[:end]
+    return text[:limit].rsplit(" ", 1)[0] + "…"
+
+
+def _media(html: str) -> tuple[str, str]:
+    """Raw (image, video) srcs from rendered article HTML (relative ok).
+
+    Image preference: an image with class "hero" (author override, may
+    appear anywhere in the article), then the first raster image (SVGs
+    rasterize poorly or not at all on many social scrapers), then the
+    first SVG. Video: the first <video> — og:video is in the OGP spec and
+    honored mainly by Facebook; X/Twitter ignores it.
+    """
+    hero = raster = svg = video = ""
+    for tag in _IMG_TAG.findall(html):
+        if not (src := _ATTR_SRC.search(tag)):
+            continue
+        src = src.group(1)
+        cls = _ATTR_CLASS.search(tag)
+        if cls and "hero" in cls.group(1).split():
+            hero = src
+            break
+        if src.lower().split("?")[0].endswith(".svg"):
+            svg = svg or src
+        else:
+            raster = raster or src
+            # Keep scanning: a later hero still wins.
+    for tag in _VIDEO_TAG.findall(html):
+        if m := _ATTR_SRC.search(tag):
+            video = m.group(1)
+            break
+    return hero or raster or svg, video
+
+
+def _share_media(html: str, base_url: str) -> tuple[str, str]:
+    """(image, video) share URLs from the rendered article.
+
+    The _media picks as absolute URLs built from the request base —
+    social scrapers cannot use relative ones.
+    """
+    if not base_url:
+        return "", ""
+
+    def absolute(src: str) -> str:
+        src = unescape(src)
+        return src if src.startswith(("http://", "https://")) else f"{base_url}{src}"
+
+    image, video = _media(html)
+    return (absolute(image) if image else "", absolute(video) if video else "")
+
+
+def _social_meta(
+    node: Node, path: str, title: str, html: str, brand: str, base_url: str,
+) -> dict[str, str]:
+    """Open Graph/Twitter/SEO meta tags for a content page.
+
+    Heuristics over the rendered article: the description is the first
+    paragraph's text (truncated at ~200 chars on a word boundary), the
+    share image the article's first <img> — authors lead with their most
+    representative figure. Absolute URLs are built from the request's base
+    (social scrapers cannot use relative ones).
+    """
+    url = f"{base_url}/{path}" if base_url else ""
+    text = _description(html)
+    image, video = _share_media(html, base_url)
+    return {
+        "description": text,
+        "canonical": url,
+        "og:type": "article",
+        "og:title": title,
+        "og:description": text,
+        "og:url": url,
+        "og:site_name": brand,
+        "og:image": image,
+        "og:video": video,
+        "article:published_time": node.created.isoformat(),
+        "article:modified_time": node.modified.isoformat(),
+        "twitter:card": "summary_large_image" if image else "summary",
+    }
+
+
 def render_page(
     menu: dict[str, Node],
     path: str,
@@ -434,18 +866,25 @@ def render_page(
     theme: str = "",
     favicon: str = "",
     brand_html: str = "",
+    base_url: str = "",
+    transition: str = "cube",
 ) -> str:
     """Render a full HTML page for the slug path."""
     node = resolve(menu, path)[-1]
     title = _title(path.rpartition("/")[2], node)
+    main = page_content(menu, path)
+    social = _social_meta(node, path, title, str(main), brand, base_url)
     return str(
-        _layout(_page_assets(), custom_css, theme, banner_design(menu, path, theme), favicon)(
+        _layout(
+            *_page_assets(), custom_css, theme, banner_design(menu, path, theme),
+            transition, favicon, social,
+        )(
             Title=f"{title} – {brand}" if brand else title,
             Brand=_brand_link(brand, brand_html),
             Nav=nav_html(menu, path),
             Sidebar=sidebar_html(menu, path),
             Banner=banner_html(menu, path, theme),
-            Main=page_content(menu, path),
+            Main=main,
         ),
     )
 
@@ -458,29 +897,30 @@ def render_category(
     theme: str = "",
     favicon: str = "",
     brand_html: str = "",
+    transition: str = "cube",
 ) -> str:
-    """Render the placeholder for a content-less category label (404).
+    """Render the listing for a content-less category label (404).
 
-    The node exists in the tree but has no page of its own. Nav links
-    point straight at its first child, so this is mainly seen in the site
-    editor, where the pen creates the landing page.
+    The node exists in the tree but has no page of its own: its published
+    children are listed as cards, like on a category page with content.
+    Nav links point straight at the first child, so this is mainly seen
+    in the site editor, where the pen creates the landing page.
     """
     node = resolve(menu, path)[-1]
     title = _title(path.rpartition("/")[2], node)
-    sidebar = sidebar_html(menu, path)
     doc = E.article
     with doc:
         doc.h1(title)
-        if sidebar:
-            doc.p("Pages in this section are listed in the menu on the left.")
+        if any(c.published for c in node.children.values()):
+            _cards(doc, menu, node, path)
         else:
             doc.p("This section has no page of its own yet.")
     return str(
-        _layout(_page_assets(), custom_css, theme, banner_design(menu, path, theme), favicon)(
+        _layout(*_page_assets(), custom_css, theme, banner_design(menu, path, theme), transition, favicon)(
             Title=f"{title} – {brand}" if brand else title,
             Brand=_brand_link(brand, brand_html),
             Nav=nav_html(menu, path),
-            Sidebar=sidebar,
+            Sidebar=sidebar_html(menu, path),
             Banner=banner_html(menu, path, theme),
             Main=HTML(str(doc)),
         ),
@@ -495,6 +935,7 @@ def render_not_found(
     theme: str = "",
     favicon: str = "",
     brand_html: str = "",
+    transition: str = "cube",
 ) -> str:
     """Render a 404 page within the normal layout."""
     doc = E.article
@@ -502,7 +943,7 @@ def render_not_found(
         doc.h1("Not Found")
         doc.p(f"No article at /{path}. If there was before, it may have been deleted.")
     return str(
-        _layout(_page_assets(), custom_css, theme, banner_design(menu, path, theme), favicon)(
+        _layout(*_page_assets(), custom_css, theme, banner_design(menu, path, theme), transition, favicon)(
             Title=f"Not Found – {brand}" if brand else "Not Found",
             Brand=_brand_link(brand, brand_html),
             Nav=nav_html(menu, path),
@@ -513,19 +954,23 @@ def render_not_found(
     )
 
 
-def _page_assets() -> list[str]:
-    """Script URLs for public pages (pagerite entry).
+def _page_assets() -> tuple[list[str], list[str]]:
+    """Script and stylesheet URLs for public pages (pagerite entry).
 
     Dev mode loads the entry from the Vite dev server; production uses
-    the Vite build manifest to resolve the hashed asset names.
+    the Vite build manifest to resolve the hashed asset names. CSS imported
+    by the entry (e.g. overlayscrollbars.css) is extracted by Vite and must
+    be linked separately.
     """
     vite_url = os.environ.get("PAGERITE_VITE_URL")
     if vite_url:
-        return [f"{vite_url}/src/pagerite.js"]
+        return [f"{vite_url}/src/pagerite.js"], []
     if "page" not in _asset_cache:
         manifest = _manifest()
         entry = manifest["src/pagerite.js"]
-        _asset_cache["page"] = [f"/{entry['file']}"]
+        scripts = [f"/{entry['file']}"]
+        stylesheets = [f"/{css}" for css in entry.get("css", [])]
+        _asset_cache["page"] = scripts, stylesheets
     return _asset_cache["page"]
 
 
@@ -543,3 +988,63 @@ def _editor_assets() -> tuple[list[str], str | None]:
         entry = manifest["src/main.js"]
         _asset_cache["editor"] = [f"/{entry['file']}"], _editor_css_url(None)
     return _asset_cache["editor"]
+
+
+def _analytics_assets() -> tuple[list[str], list[str]]:
+    """Script and stylesheet URLs for the analytics page entry."""
+    vite_url = os.environ.get("PAGERITE_VITE_URL")
+    if vite_url:
+        return [f"{vite_url}/src/analytics-main.js"], []
+    if "analytics" not in _asset_cache:
+        manifest = _manifest()
+        entry = manifest["src/analytics-main.js"]
+        scripts = [f"/{entry['file']}"]
+        stylesheets = [f"/{css}" for css in entry.get("css", [])]
+        _asset_cache["analytics"] = scripts, stylesheets
+    return _asset_cache["analytics"]
+
+
+def render_analytics(
+    menu: dict[str, Node],
+    brand: str = SITE_NAME,
+    custom_css: str = "",
+    theme: str = "",
+    favicon: str = "",
+    brand_html: str = "",
+    transition: str = "cube",
+) -> str:
+    """Render the analytics viewer as a normal page at /_a.
+
+    The analytics entry is inlined into this page only (prod) or loaded
+    from the Vite dev server (dev); its stylesheet rides along in <head>
+    so fetch-navigations can sync it into the live document. The initial
+    range is not rendered in: the client takes it from the URL hash or
+    derives it from the analytics data itself.
+    """
+    page_scripts, page_stylesheets = _page_assets()
+    analytics_scripts, analytics_stylesheets = _analytics_assets()
+    scripts = page_scripts + analytics_scripts
+    stylesheets = page_stylesheets + analytics_stylesheets
+    doc = E.article
+    with doc:
+        # .wide: the dashboard breaks out of the article column to the full
+        # viewport width, like wide figures (see the .wide rules).
+        doc.div(id="analytics-app", class_="wide")
+    return str(
+        _layout(
+            scripts,
+            stylesheets,
+            custom_css,
+            theme,
+            banner_design(menu, "_a", theme),
+            transition,
+            favicon,
+        )(
+            Title=f"Analytics – {brand}" if brand else "Analytics",
+            Brand=_brand_link(brand, brand_html),
+            Nav=nav_html(menu, "_a"),
+            Sidebar=sidebar_html(menu, "_a"),
+            Banner=banner_html(menu, "_a", theme),
+            Main=HTML(str(doc)),
+        ),
+    )

pyproject.toml

@@ -20,10 +20,17 @@ dependencies = [
     "fastapi-vue>=1.3.1",
     "fastapi[standard]>=0.141.1",
     "html5tagger>=2.0.0",
+    "httpx>=0.28.1",
     "kanta>=0.8.1",
     "markdown-it-py>=4.2.0",
+    "maxminddb>=3.1.1",
     "mdit-py-plugins>=0.6.1",
+    "mediapreview[standard]>=0.2.3",
+    "platformdirs>=4.11.5",
     "pygments>=2.20.0",
+    "python-slugify>=8.0.4",
+    "ua-parser>=1.0.2",
+    "zstandard>=0.25.0",
 ]
 
 [project.scripts]
@@ -33,9 +40,7 @@ pagerite = "pagerite.__main__:main"
 Repository = "https://git.zi.fi/LeoVasanko/pagerite"
 
 [dependency-groups]
-dev = [
-    "httpx>=0.28.1",
-]
+dev = []
 
 [tool.hatch.version]
 source = "vcs"
@@ -45,8 +50,9 @@ packages = ["pagerite"]
 
 [tool.hatch.build]
 # `only-packages` drops directories without an __init__.py, so the theme
-# files must be force-included as artifacts (like the frontend build).
-artifacts = ["pagerite/frontend-build", "pagerite/themes"]
+# files and seed image assets must be force-included as artifacts (like
+# the frontend build).
+artifacts = ["pagerite/frontend-build", "pagerite/themes", "pagerite/seed-assets"]
 only-packages = true
 
 [tool.hatch.build.targets.sdist.hooks.custom]

scripts/devserver.py

@@ -19,8 +19,8 @@ from devutil import (
     setup_vite,
 )
 
-DEFAULT_VITE_PORT = 3100
-DEFAULT_DEV_PORT = 3200
+DEFAULT_VITE_PORT = 8200
+DEFAULT_DEV_PORT = 8210
 HEALTH = "/?from=devserver.py"
 
 

scripts/fake_traffic.py

@@ -0,0 +1,941 @@
+#!/usr/bin/env -S uv run --script
+# /// script
+# requires-python = ">=3.14"
+# dependencies = [
+#     "httpx>=0.28.1",
+#     "playwright>=1.45.0",
+# ]
+# ///
+"""Generate fake browser visits, crawler hits, and abuse scans for a Pagerite site.
+
+Browser sessions (ordinary users) come from realistic residential IPv4 and IPv6
+addresses and stay mostly stable; an IPv6 host part may rotate once mid-session,
+and an IPv4 session may switch to another residential address.  Crawler hits come
+from datacenter IPs, with each crawler profile paired to a matching provider IP
+when possible.  Abuse scanners fire bursts of vulnerability probes from pinned
+datacenter IPs.
+
+Run against a local dev server, e.g.:
+
+    uv run scripts/fake_traffic.py http://localhost:3200
+
+Repeat whenever you want more traffic; each run appends new events to the
+site's analytics file.
+"""
+
+from __future__ import annotations
+
+import argparse
+import logging
+import random
+import sys
+import time
+from collections.abc import Sequence
+from dataclasses import dataclass
+from datetime import UTC, datetime
+from typing import Any
+from urllib.parse import urlencode, urljoin, urlparse
+
+import httpx
+
+logging.basicConfig(level=logging.INFO, format="%(message)s")
+logger = logging.getLogger("fake-traffic")
+
+
+@dataclass(frozen=True)
+class BrowserProfile:
+    name: str
+    user_agent: str
+    accept_language: str
+    viewport: tuple[int, int]
+
+
+@dataclass(frozen=True)
+class CrawlerProfile:
+    name: str
+    user_agent: str
+    ip: str
+
+
+BROWSER_PROFILES: list[BrowserProfile] = [
+    BrowserProfile(
+        "chrome-desktop",
+        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 "
+        "(KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36",
+        "en-US,en;q=0.9",
+        (1366, 768),
+    ),
+    BrowserProfile(
+        "safari-desktop",
+        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 "
+        "(KHTML, like Gecko) Version/17.5 Safari/605.1.15",
+        "en-GB,en;q=0.9",
+        (1440, 900),
+    ),
+    BrowserProfile(
+        "firefox-desktop",
+        "Mozilla/5.0 (X11; Linux x86_64; rv:130.0) Gecko/20100101 Firefox/130.0",
+        "en-CA,en;q=0.8,fr;q=0.5",
+        (1920, 1080),
+    ),
+    BrowserProfile(
+        "chrome-mobile",
+        "Mozilla/5.0 (Linux; Android 14; SM-S918B) AppleWebKit/537.36 "
+        "(KHTML, like Gecko) Chrome/128.0.0.0 Mobile Safari/537.36",
+        "es-ES,es;q=0.9",
+        (390, 844),
+    ),
+]
+
+CRAWLER_PROFILES: list[CrawlerProfile] = [
+    CrawlerProfile(
+        "googlebot",
+        "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Googlebot/2.1; +http://www.google.com/bot.html) Chrome/128.0.0.0 Safari/537.36",
+        "66.249.64.66",                         # US, Google
+    ),
+    CrawlerProfile(
+        "bingbot",
+        "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm) Chrome/128.0.0.0 Safari/537.36",
+        "40.77.167.0",                          # US, Microsoft
+    ),
+    CrawlerProfile(
+        "duckduckbot",
+        "DuckDuckBot/1.1; (+http://duckduckgo.com/duckduckbot.html)",
+        "95.217.0.1",                           # Germany, Hetzner VPS
+    ),
+    CrawlerProfile(
+        "curl",
+        "curl/8.5.0",
+        "139.162.0.1",                          # Singapore, Linode VPS
+    ),
+]
+
+# Residential IPv4 addresses and IPv6 /64 prefixes used for ordinary browser
+# sessions.  IPv6 entries keep the network part stable and randomise only the
+# host part; the host may rotate once mid-session.
+RESIDENTIAL_SOURCE_IPS: list[str] = [
+    # Residential IPv4
+    "91.154.140.209",                       # Finland, Elisa
+    "84.143.145.207",                       # Germany, Deutsche Telekom
+    "220.165.255.254",                      # China, Chinanet / China Telecom
+    "84.235.83.162",                        # Saudi Arabia, SaudiNet / STC
+    # Residential IPv6 /64 prefixes
+    "2a02:8109:ac82:6f0c::/64",             # Germany, Deutsche Telekom
+    "240e:45d:1e60:5b0::/64",               # China, China Telecom
+    "2409:8904:6720:4123::/64",             # China, China Unicom
+]
+
+# Concrete datacenter IPs used for abuse scanner bursts.  They stay pinned for
+# the whole scan burst.
+# Index 0 randomises its UA per request, index 1 uses a fixed browser UA,
+# and index 2 uses a fixed crawler UA.
+ABUSE_SOURCE_IPS: list[str] = [
+    "45.63.0.12",                           # US, Vultr VPS
+    "138.197.0.89",                         # US, DigitalOcean / Cloudways
+    "2a01:4f8:0:2::1234",                   # Germany, Hetzner VPS
+]
+
+# Paths commonly probed by attackers looking for exposed config, admin panels,
+# version control, credentials, backups, or debug endpoints.
+SUSPICIOUS_PATHS: list[str] = [
+    "/.env",
+    "/env",
+    "/.env.local",
+    "/env.development",
+    "/config",
+    "/config.json",
+    "/config.yaml",
+    "/config.yml",
+    "/configuration.json",
+    "/configuration.yaml",
+    "/configuration.yml",
+    "/settings.json",
+    "/settings.yaml",
+    "/settings.yml",
+    "/app.config",
+    "/appsettings.json",
+    "/appsettings.Development.json",
+    "/credentials",
+    "/credentials.json",
+    "/secrets",
+    "/secrets.json",
+    "/.aws/credentials",
+    "/.ssh/id_rsa",
+    "/id_rsa",
+    "/id_rsa.pub",
+    "/known_hosts",
+    "/sftp-config.json",
+    "/admin",
+    "/administrator",
+    "/adminer.php",
+    "/login",
+    "/signin",
+    "/auth/login",
+    "/api/login",
+    "/api/.env",
+    "/api/config",
+    "/api/v1/config",
+    "/api/v2/config",
+    "/webhook",
+    "/webhooks",
+    "/callback",
+    "/proxy",
+    "/image",
+    "/images",
+    "/preview",
+    "/download",
+    "/downloads",
+    "/log",
+    "/logs",
+    "/debug",
+    "/trace",
+    "/phpinfo.php",
+    "/info.php",
+    "/phpmyadmin",
+    "/pma",
+    "/myadmin",
+    "/phpMyAdmin",
+    "/wp-admin",
+    "/wp-login.php",
+    "/wp-config.php",
+    "/xmlrpc.php",
+    "/wp-json/wp/v2/users",
+    "/.git/config",
+    "/.git/HEAD",
+    "/git/config",
+    "/swagger-ui.html",
+    "/v2/api-docs",
+    "/actuator/env",
+    "/actuator/health",
+    "/actuator/configprops",
+    "/server-status",
+    "/.htaccess",
+    "/web.config",
+    "/package.json",
+    "/composer.json",
+    "/vendor/autoload.php",
+    "/docker-compose.yml",
+    "/Dockerfile",
+    "/manage",
+    "/console",
+    "/manager",
+    "/manager/html",
+    "/metrics",
+    "/prometheus",
+    "/healthz",
+    "/_api",
+    "/api",
+    "/api/v1/",
+    "/api/v2/",
+    "/graphql",
+    "/query",
+    "/feed",
+    "/rss",
+    "/_debug",
+    "/test",
+    "/testing",
+    "/tmp",
+    "/temp",
+    "/backup",
+    "/backups",
+    "/dump",
+    "/dumps",
+    "/sql",
+    "/db",
+    "/database",
+    "/dump.sql",
+    "/backup.sql",
+    "/db.sql",
+    "/backup.zip",
+    "/backup.tar.gz",
+    "/site.zip",
+    "/site.tar.gz",
+    "/source.zip",
+    "/src.zip",
+    "/upload",
+    "/uploads",
+    "/import",
+    "/export",
+    "/token",
+    "/tokens",
+    "/oauth",
+    "/oauth2",
+    "/openid",
+    "/jwks",
+    "/keys",
+    "/key",
+    "/private",
+    "/public",
+]
+
+# Realistic external referers.  Most sessions arrive with a generic referer;
+# a subset carries matching UTM tags on the landing URL.
+PLAIN_REFERRERS: list[str] = [
+    "https://example.com/",
+    "https://somedomain.com/",
+    "https://another-site.org/",
+    "https://friend-site.net/",
+]
+
+# (referer origin, utm parameter dict) pairs used for tagged traffic.
+TAGGED_REFERRERS: list[tuple[str, dict[str, str]]] = [
+    ("https://chatgpt.com/", {"utm_source": "chatgpt.com"}),
+    ("https://www.google.com/", {"utm_source": "google", "utm_medium": "organic"}),
+    ("https://twitter.com/", {"utm_source": "twitter", "utm_medium": "social"}),
+    ("https://www.linkedin.com/", {"utm_source": "linkedin", "utm_medium": "social"}),
+    ("https://github.com/", {"utm_source": "github", "utm_medium": "referral"}),
+    ("https://news.ycombinator.com/", {"utm_source": "hackernews", "utm_medium": "referral"}),
+    ("https://www.reddit.com/", {"utm_source": "reddit", "utm_medium": "social"}),
+    ("https://medium.com/", {"utm_source": "medium", "utm_medium": "referral"}),
+    ("https://www.producthunt.com/", {"utm_source": "producthunt", "utm_medium": "referral"}),
+]
+
+# Fraction of referered sessions that also carry UTM tags.
+UTM_RATE = 0.25
+
+# Innocent-looking paths that do not exist on a Pagerite site.  Hitting many of
+# these from a single IP is itself a telltale of a spray-and-pray scanner.
+NORMAL_404_PATHS: list[str] = [
+    "/about",
+    "/about-us",
+    "/services",
+    "/products",
+    "/contact",
+    "/contact-us",
+    "/team",
+    "/careers",
+    "/jobs",
+    "/pricing",
+    "/features",
+    "/demo",
+    "/trial",
+    "/docs",
+    "/documentation",
+    "/api-docs",
+    "/support",
+    "/help",
+    "/faq",
+    "/knowledge-base",
+    "/terms",
+    "/terms-of-service",
+    "/privacy",
+    "/privacy-policy",
+    "/legal",
+    "/blog",
+    "/news",
+    "/articles",
+    "/press",
+    "/events",
+    "/webinars",
+    "/podcast",
+    "/videos",
+    "/resources",
+    "/whitepapers",
+    "/case-studies",
+    "/customers",
+    "/clients",
+    "/testimonials",
+    "/reviews",
+    "/partners",
+    "/integrations",
+    "/api-reference",
+    "/developers",
+    "/status",
+    "/security",
+    "/trust",
+    "/compliance",
+    "/gdpr",
+    "/ccpa",
+    "/sitemap",
+    "/archive",
+    "/tags",
+    "/categories",
+    "/search",
+    "/users",
+    "/accounts",
+    "/dashboard",
+    "/profile",
+    "/settings",
+    "/preferences",
+    "/notifications",
+    "/messages",
+    "/inbox",
+    "/calendar",
+    "/reports",
+    "/analytics",
+    "/billing",
+    "/invoice",
+    "/orders",
+    "/cart",
+    "/checkout",
+    "/store",
+    "/shop",
+    "/home",
+    "/main",
+    "/start",
+    "/welcome",
+    "/intro",
+    "/overview",
+    "/summary",
+    "/portfolio",
+    "/projects",
+    "/work",
+    "/solutions",
+]
+
+ABUSE_USER_AGENTS: list[str] = [
+    # Desktop browsers
+    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 "
+    "(KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36",
+    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 "
+    "(KHTML, like Gecko) Version/17.5 Safari/605.1.15",
+    "Mozilla/5.0 (X11; Linux x86_64; rv:130.0) Gecko/20100101 Firefox/130.0",
+    "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:130.0) Gecko/20100101 Firefox/130.0",
+    "Mozilla/5.0 (Linux; Android 14; SM-S918B) AppleWebKit/537.36 "
+    "(KHTML, like Gecko) Chrome/128.0.0.0 Mobile Safari/537.36",
+    "Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 "
+    "(KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1",
+    # Well-known crawlers / bots
+    "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Googlebot/2.1; "
+    "+http://www.google.com/bot.html) Chrome/128.0.0.0 Safari/537.36",
+    "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; bingbot/2.0; "
+    "+http://www.bing.com/bingbot.htm) Chrome/128.0.0.0 Safari/537.36",
+    "Mozilla/5.0 (compatible; DuckDuckBot/1.1; +http://duckduckgo.com/duckduckbot.html)",
+    "Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html)",
+    "Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 "
+    "(KHTML, like Gecko) Chrome/128.0.0.0 Mobile Safari/537.36 "
+    "(compatible; Googlebot/2.1; +http://www.google.com/bot.html)",
+    "Mozilla/5.0 (compatible; YandexBot/3.0; +http://yandex.com/bots)",
+    "Mozilla/5.0 (compatible; DotBot/1.2; +https://opensiteexplorer.org/dotbot; help@moz.com)",
+    "Mozilla/5.0 (compatible; SemrushBot/7~bl; +http://www.semrush.com/bot.html)",
+    "Mozilla/5.0 (compatible; AhrefsBot/7.0; +http://ahrefs.com/robot/)",
+    # Social / service fetchers
+    "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)",
+    "Twitterbot/1.0",
+    "LinkedInBot/1.0 (compatible; Mozilla/5.0; Apache-HttpClient +http://www.linkedin.com)",
+    "Slackbot-LinkExpanding 1.0 (+https://api.slack.com/robots)",
+    "WhatsApp/2.23.20.0",
+    # Command-line / library clients
+    "curl/8.5.0",
+    "Wget/1.21.4 (linux-gnu)",
+    "python-requests/2.32.3",
+    "Go-http-client/1.1",
+    "Node.js/20.5.1",
+]
+
+
+def _random_ipv6_host(prefix: str) -> str:
+    """Return a concrete address within an IPv6 /64 prefix.
+
+    The host part is generated randomly, mimicking a fresh OS privacy address.
+    The input prefix must end in ``::/64`` (e.g. ``2a02:8109:ac82:6f0c::/64``).
+    """
+    if "/" not in prefix:
+        return prefix
+    base, mask = prefix.split("/")
+    if mask != "64":
+        raise ValueError(f"only /64 IPv6 prefixes are supported, got {prefix!r}")
+    if base.endswith("::"):
+        base = base[:-2]
+    host = ":".join(f"{random.randint(0, 0xffff):04x}" for _ in range(4))
+    return f"{base}:{host}"
+
+
+def _concretize_ip(entry: str) -> str:
+    """Return a concrete IP address; randomise the host part for IPv6 /64 prefixes."""
+    if ":" in entry and "/" in entry:
+        return _random_ipv6_host(entry)
+    return entry
+
+
+class _SessionIP:
+    """Stable IP for a browser session, with one optional mid-session rotation.
+
+    IPv6 prefixes get a fresh random host part; IPv4 addresses are swapped for
+    another address from the residential pool.
+    """
+
+    def __init__(self, entry: str, pool: Sequence[str]):
+        self.entry = entry
+        self.pool = pool
+        self._value = _concretize_ip(entry)
+
+    def current(self) -> str:
+        return self._value
+
+    def rotate(self) -> None:
+        if ":" in self.entry and "/" in self.entry:
+            self._value = _random_ipv6_host(self.entry)
+            return
+        # IPv4: switch to another IPv4 address from the residential pool.
+        for _ in range(20):
+            candidate_entry = random.choice(self.pool)
+            if ":" in candidate_entry and "/" in candidate_entry:
+                continue
+            candidate = _concretize_ip(candidate_entry)
+            if candidate != self._value:
+                self._value = candidate
+                return
+
+
+def _sleep(base: float, jitter: float) -> None:
+    time.sleep(max(0.0, base + random.uniform(-jitter, jitter)))
+
+
+def _normalize_url(url: str) -> str:
+    """Return a usable base URL, adding missing scheme/host/port parts.
+
+    - bare ``:PORT`` becomes ``http://localhost:PORT``
+    - missing scheme becomes ``http://``
+    - otherwise returned as-is
+
+    Raises ``ValueError`` when the result is not a valid http(s) URL.
+    """
+    raw = url.strip()
+    if not raw:
+        raise ValueError("empty URL")
+    if raw.startswith(":"):
+        raw = f"http://localhost{raw}"
+    elif raw.isdigit():
+        raw = f"http://localhost:{raw}"
+    elif not raw.startswith(("http://", "https://")):
+        raw = f"http://{raw}"
+    parsed = urlparse(raw)
+    if parsed.scheme not in ("http", "https") or not parsed.netloc:
+        raise ValueError(f"invalid URL: {url!r}")
+    return raw
+
+
+def _poisson_wait(rate: float) -> float:
+    """Return an exponential inter-arrival time for the given Poisson rate."""
+    if rate <= 0:
+        return 0.0
+    return random.expovariate(rate)
+
+
+def _collect_links(page: Any, include_external: bool = False) -> list[dict[str, Any]]:
+    """Return links from the current page, excluding the current page.
+
+    Internal links stay on the site; external links are real https URLs found
+    in the page content and are marked with ``external: true``.
+    """
+    return page.evaluate(
+        """(includeExternal) => {
+            const loc = new URL(location.href);
+            const out = [];
+            for (const a of document.querySelectorAll('a[href]')) {
+                try {
+                    const u = new URL(a.href);
+                    const rect = a.getBoundingClientRect();
+                    const item = {
+                        href: a.href,
+                        text: (a.innerText || a.title || '').trim().slice(0, 60),
+                        visible: !!(rect.width && rect.height && rect.top < window.innerHeight && rect.bottom > 0),
+                    };
+                    if (u.origin === loc.origin
+                            && !u.pathname.startsWith('/_')
+                            && !u.pathname.startsWith('/auth')
+                            && u.pathname !== '/favicon.ico'
+                            && u.pathname !== loc.pathname) {
+                        out.push(item);
+                    } else if (includeExternal && u.protocol === 'https:' && u.origin !== loc.origin) {
+                        out.push({ ...item, external: true });
+                    }
+                } catch { /* ignore malformed hrefs */ }
+            }
+            return out;
+        }""",
+        include_external,
+    )
+
+
+def _click_link(page: Any, link: dict[str, Any], timeout: float = 10.0) -> bool:
+    """Click an internal link and wait for the client-side URL to change."""
+    start_url = page.url
+    try:
+        # Prefer Playwright's native click; fall back to a JS click if the
+        # locator cannot be resolved or times out.
+        try:
+            page.locator(f"a[href='{link['href']}']").first.click(timeout=2000)
+        except Exception:  # noqa: BLE001
+            clicked = page.evaluate(
+                """(href) => {
+                    const a = Array.from(document.querySelectorAll('a[href]'))
+                        .find(el => el.href === href);
+                    if (a) { a.click(); return true; }
+                    return false;
+                }""",
+                link["href"],
+            )
+            if not clicked:
+                return False
+        # Wait for the client-side navigation to update the URL.
+        deadline = time.time() + timeout
+        while time.time() < deadline:
+            if page.url != start_url:
+                return True
+            page.wait_for_timeout(100)
+        return False
+    except Exception as exc:  # noqa: BLE001
+        logger.debug("click failed on %s: %s", link.get("href"), exc)
+        return False
+
+
+def _run_browser_session(
+    base: str,
+    paths: Sequence[str],
+    profile: BrowserProfile,
+    session_index: int,
+    ip_entry: str,
+) -> dict[str, Any]:
+    from playwright.sync_api import sync_playwright
+
+    MAX_CLICKS = 6
+    STAY = (2.0, 6.0)
+    HEADLESS = True
+    REFERER_RATE = 0.75
+    INCLUDE_EXTERNAL = True
+
+    ip_provider = _SessionIP(ip_entry, RESIDENTIAL_SOURCE_IPS)
+    ips_used: list[str] = [ip_provider.current()]
+    trail: list[str] = []
+    start_time = datetime.now(UTC)
+    try:
+        with sync_playwright() as p:
+            browser = p.chromium.launch(
+                headless=HEADLESS,
+                args=["--no-sandbox", "--disable-dev-shm-usage"],
+            )
+            extra_headers = {
+                "X-Forwarded-For": ip_provider.current(),
+                "Accept-Language": profile.accept_language,
+            }
+            # Most sessions arrive from an external origin; some are direct.
+            # A subset of referered sessions carries realistic UTM tags on the
+            # landing URL; the referer origin is paired with the UTM source.
+            tagged: dict[str, str] = {}
+            if random.random() < REFERER_RATE:
+                if random.random() < UTM_RATE:
+                    referer, tagged = random.choice(TAGGED_REFERRERS)
+                else:
+                    referer = random.choice(PLAIN_REFERRERS)
+                extra_headers["Referer"] = referer
+            context = browser.new_context(
+                user_agent=profile.user_agent,
+                viewport={"width": profile.viewport[0], "height": profile.viewport[1]},
+                extra_http_headers=extra_headers,
+            )
+            page = context.new_page()
+
+            # Update X-Forwarded-For per request; the value stays stable unless we
+            # explicitly rotate it once mid-session.
+            def _route_handler(route, request):
+                headers = dict(request.headers)
+                headers["X-Forwarded-For"] = ip_provider.current()
+                ips_used.append(headers["X-Forwarded-For"])
+                route.continue_(headers=headers)
+
+            page.route("**/*", _route_handler)
+
+            # Pick one point during the session to emulate an IP rotation.
+            rotate_at = random.randint(0, MAX_CLICKS - 1) if MAX_CLICKS > 0 else -1
+
+            entry = random.choice(paths) if paths else "/"
+            landing = urljoin(base, entry)
+            if tagged:
+                sep = "&" if "?" in landing else "?"
+                landing += sep + urlencode(tagged)
+            page.goto(landing, wait_until="networkidle")
+            trail.append(page.url)
+
+            for click_idx in range(MAX_CLICKS):
+                _sleep(random.uniform(*STAY) / 2, 0.3)
+                if click_idx == rotate_at:
+                    ip_provider.rotate()
+                    ips_used.append(ip_provider.current())
+                    logger.debug("rotated session IP to %s", ip_provider.current())
+                links = _collect_links(page, INCLUDE_EXTERNAL)
+                visible = [item for item in links if item.get("visible")]
+                if not visible:
+                    visible = links
+                if not visible:
+                    break
+                link = random.choice(visible)
+                ok = _click_link(page, link)
+                if not ok:
+                    # Retry once with any link (sometimes visible calc misses nav).
+                    alt = random.choice(links) if links else None
+                    if alt and alt is not link:
+                        ok = _click_link(page, alt)
+                    if not ok:
+                        break
+                if link.get("external"):
+                    # Outbound navigation: the analytics exit ping is already
+                    # in flight. Record the external URL and end the session.
+                    trail.append(page.url)
+                    _sleep(0.5, 0.2)
+                    break
+                page.wait_for_load_state("networkidle")
+                trail.append(page.url)
+                _sleep(random.uniform(*STAY), 0.5)
+
+            browser.close()
+
+        return {
+            "profile": profile.name,
+            "entry": entry,
+            "ip": ips_used[0],
+            "ips_seen": len(set(ips_used)),
+            "pages": len(trail),
+            "trail": [urlparse(u).path or "/" for u in trail],
+            "duration": (datetime.now(UTC) - start_time).total_seconds(),
+        }
+    except Exception as exc:  # noqa: BLE001
+        logger.warning("browser session failed: %s", exc)
+        return {"profile": profile.name, "error": str(exc), "trail": trail}
+
+
+def _run_crawler_hit(
+    base: str,
+    paths: Sequence[str],
+    profile: CrawlerProfile,
+) -> dict[str, Any]:
+    path = random.choice(paths) if paths else "/"
+    url = urljoin(base, path)
+    fake_ip = profile.ip
+    headers = {
+        "User-Agent": profile.user_agent,
+        "X-Forwarded-For": fake_ip,
+        "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
+        "Accept-Language": "en-US,en;q=0.5",
+    }
+    try:
+        with httpx.Client(follow_redirects=True, timeout=15.0) as client:
+            r = client.get(url, headers=headers)
+        return {
+            "profile": profile.name,
+            "path": path,
+            "status": r.status_code,
+            "ip": fake_ip,
+        }
+    except Exception as exc:  # noqa: BLE001
+        return {"profile": profile.name, "path": path, "error": str(exc)}
+
+
+def _abuse_ua() -> str:
+    """Return a randomized, syntactically valid user agent for an abuse scan."""
+    return random.choice(ABUSE_USER_AGENTS)
+
+
+def _run_abuse_scanner(base: str, ip_index: int) -> dict[str, Any]:
+    """Fire a burst of vulnerability probes from a single fake IP.
+
+    Scanner 0 randomises its user agent every request, scanner 1 uses a fixed
+    browser UA, and scanner 2 uses a fixed crawler UA.
+    """
+    ip_entry = ABUSE_SOURCE_IPS[ip_index % len(ABUSE_SOURCE_IPS)]
+    if ":" in ip_entry and "/" in ip_entry:
+        fake_ip = _random_ipv6_host(ip_entry)
+    else:
+        fake_ip = ip_entry
+
+    MIN_HITS = 15
+    MAX_HITS = 25
+    total_hits = random.randint(MIN_HITS, MAX_HITS)
+
+    # Ensure the burst contains both telltales: suspicious paths and more
+    # than ten normal-looking 404 paths.
+    suspicious_count = max(5, total_hits // 3)
+    normal_count = total_hits - suspicious_count
+    if normal_count < 11:
+        normal_count = 11
+        suspicious_count = max(3, total_hits - normal_count)
+
+    paths = random.choices(SUSPICIOUS_PATHS, k=suspicious_count) + random.choices(
+        NORMAL_404_PATHS, k=normal_count
+    )
+    random.shuffle(paths)
+
+    ua_mode = ip_index % 3
+    if ua_mode == 0:
+        get_ua = _abuse_ua
+    elif ua_mode == 1:
+        def get_ua() -> str:
+            return BROWSER_PROFILES[0].user_agent
+    else:
+        def get_ua() -> str:
+            return CRAWLER_PROFILES[0].user_agent
+
+    scan_results: list[dict[str, Any]] = []
+    with httpx.Client(follow_redirects=True, timeout=15.0) as client:
+        for path in paths:
+            headers = {
+                "User-Agent": get_ua(),
+                "X-Forwarded-For": fake_ip,
+                "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
+                "Accept-Language": random.choice(
+                    ["en-US,en;q=0.9", "en-GB,en;q=0.8", "en;q=0.7"]
+                ),
+            }
+            try:
+                r = client.get(urljoin(base, path), headers=headers)
+                scan_results.append(
+                    {"path": path, "status": r.status_code, "ua": headers["User-Agent"]}
+                )
+            except Exception as exc:  # noqa: BLE001
+                scan_results.append({"path": path, "error": str(exc)})
+            _sleep(0.15, 0.1)
+
+    return {
+        "scanner": ip_index + 1,
+        "ip": fake_ip,
+        "hits": len(scan_results),
+        "results": scan_results,
+    }
+
+
+def _parse_args(argv: Sequence[str] | None) -> argparse.Namespace:
+    parser = argparse.ArgumentParser(
+        description="Generate fake traffic for a Pagerite site.",
+        formatter_class=argparse.ArgumentDefaultsHelpFormatter,
+    )
+    parser.add_argument(
+        "url",
+        nargs="?",
+        default="http://localhost:8200",
+        help="Base URL of the Pagerite site (default: http://localhost:8200). "
+             "A bare :PORT or PORT is treated as http://localhost:PORT; a "
+             "missing scheme defaults to http://.",
+    )
+    parser.add_argument(
+        "-t",
+        "--duration",
+        type=float,
+        default=60.0,
+        metavar="SECONDS",
+        help="Rough maximum time to generate traffic (0 runs one preset batch)",
+    )
+    parser.add_argument("-v", "--verbose", action="store_true", help="Debug logging")
+    return parser.parse_args(argv)
+
+
+def main(argv: Sequence[str] | None = None) -> int:
+    args = _parse_args(argv)
+    if args.verbose:
+        logger.setLevel(logging.DEBUG)
+
+    try:
+        base = _normalize_url(args.url).rstrip("/")
+    except ValueError as exc:
+        logger.error("%s", exc)
+        return 2
+
+    # Discover content paths from the public page tree if we can.
+    paths: list[str] = []
+    try:
+        r = httpx.get(urljoin(base, "/_api/pages"), timeout=10.0)
+        if r.status_code == 200:
+            paths = [page["path"] for page in r.json() if page.get("has_content")]
+    except Exception as exc:  # noqa: BLE001
+        logger.debug("could not fetch page list: %s", exc)
+    if not paths:
+        paths = ["/"]
+
+    logger.info(
+        "Generating fake traffic against %s (%d content paths, duration=%ss)",
+        base,
+        len(paths),
+        args.duration,
+    )
+
+    results: list[dict[str, Any]] = []
+    arrival_rate = 1.0
+
+    def _wait() -> None:
+        wait = _poisson_wait(arrival_rate)
+        logger.debug("waiting %.2fs before next session", wait)
+        time.sleep(wait)
+
+    if args.duration <= 0:
+        # One preset batch.
+        for i in range(5):
+            if i > 0:
+                _wait()
+            profile = random.choice(BROWSER_PROFILES)
+            ip_entry = random.choice(RESIDENTIAL_SOURCE_IPS)
+            logger.info(
+                "browser session: %s (ip=%s)",
+                profile.name,
+                _concretize_ip(ip_entry),
+            )
+            result = _run_browser_session(base, paths, profile, i, ip_entry)
+            results.append(result)
+            logger.debug("  trail: %s", result.get("trail", []))
+
+        for i in range(10):
+            if i > 0:
+                _wait()
+            profile = random.choice(CRAWLER_PROFILES)
+            logger.info(
+                "crawler hit: %s (ip=%s)",
+                profile.name,
+                profile.ip,
+            )
+            result = _run_crawler_hit(base, paths, profile)
+            results.append(result)
+
+        for i in range(3):
+            if i > 0:
+                _wait()
+            ip_entry = ABUSE_SOURCE_IPS[i % len(ABUSE_SOURCE_IPS)]
+            logger.info("abuse scanner: %s", ip_entry)
+            result = _run_abuse_scanner(base, i)
+            results.append(result)
+            logger.debug(
+                "  hits: %s", [r.get("path") for r in result.get("results", [])]
+            )
+    else:
+        deadline = time.time() + args.duration
+        session_index = 0
+        while time.time() < deadline:
+            if session_index > 0:
+                _wait()
+            phase = session_index % 3
+            if phase == 0:
+                profile = random.choice(BROWSER_PROFILES)
+                ip_entry = random.choice(RESIDENTIAL_SOURCE_IPS)
+                logger.info(
+                    "browser session: %s (ip=%s)",
+                    profile.name,
+                    _concretize_ip(ip_entry),
+                )
+                result = _run_browser_session(
+                    base, paths, profile, session_index, ip_entry
+                )
+                logger.debug("  trail: %s", result.get("trail", []))
+            elif phase == 1:
+                profile = random.choice(CRAWLER_PROFILES)
+                logger.info(
+                    "crawler hit: %s (ip=%s)",
+                    profile.name,
+                    profile.ip,
+                )
+                result = _run_crawler_hit(base, paths, profile)
+            else:
+                ip_entry = ABUSE_SOURCE_IPS[session_index % len(ABUSE_SOURCE_IPS)]
+                logger.info("abuse scanner: %s", ip_entry)
+                result = _run_abuse_scanner(base, session_index // 3)
+                logger.debug(
+                    "  hits: %s",
+                    [r.get("path") for r in result.get("results", [])],
+                )
+            results.append(result)
+            session_index += 1
+
+    ok = sum(1 for r in results if "error" not in r)
+    logger.info("Done: %d/%d requests succeeded.", ok, len(results))
+    return 0 if ok == len(results) else 1
+
+
+if __name__ == "__main__":
+    sys.exit(main())