Slight color change for inline code text to make it stand out of paragraph text. Not applied to list items and headings.

word-break: keep-all does not suppress breaks at hard hyphens (an
explicit UAX #14 break opportunity), so `--arg` could split after the
dashes. Inline code is short — nowrap is the safe fix.

.gitignore

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

AGENTS.md

@@ -12,8 +12,9 @@ Pagerite is a CMS. See `docs` for the full design and implementation details. Ke
 - `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 migrations (`migrate_vN`); ALL schema/storage upgrades live here (raw state dict before struct decoding), never in the app lifespan: v1 moves legacy in-db file blobs to the on-disk store and rebuilds the legacy flat `pages` as the menu tree, v2 rewrites `/_f/{hash}.ext` image links to the extension-less form, backfills AVIF/WebP/JPEG derivatives on disk and drops the obsolete `version` field.
   - `markdown.py` — markdown-it-py renderer.
-  - `views.py` — shared page layout and rendering.
+  - `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.
@@ -27,7 +28,7 @@ Server run by CLI entry point `uv run pagerite` (no auto reloads, 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).
     - To create stand alone pages, begin with `doc = Document(...)` that gives a HTML5 page header
@@ -45,7 +46,8 @@ Server run by CLI entry point `uv run pagerite` (no auto reloads, build needed).
     - 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).
+  - **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
 

README.md

@@ -1,3 +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

@@ -2,16 +2,16 @@
 
 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: the database path with `.kantadb` replaced by
+`PAGERITE_ANALYTICS` (default: `analytics.json` in the per-site data
-`.analytics.json`, e.g. `pagerite.analytics.json`).
+directory, e.g. `localhost/analytics.json`).
 
 - `pagerite/analytics.py` — data model (`Analytics`, `Client`, `Visit`,
-  `CrawlerHit`, `AbuseHit`) and the `Store` (in-memory data + session map,
+  `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`
+  the `/_ws` activity WebSocket, and `WebSocket /_api/ws/analytics`
   (admin-gated like every `/_api` endpoint).
-- `frontend/src/pagerite.js` — client navigation pings and the 📊 pen.
+- `frontend/src/pagerite.js` — the client activity channel 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`
@@ -19,46 +19,61 @@ Struct dumped to disk — separate from the kanta content database, path from
 
 ## What is collected
 
-The client (`pagerite.js`) POSTs fire-and-forget pings to `/_a` with
+The client (`pagerite.js`) keeps a WebSocket connection to `/_ws` for the
-`fr`, `to`, `hide` and `read` as query parameters (`fr` = source path;
+whole browsing session and sends activity messages over it — JSON text
-falsy values are omitted):
+frames matching the server's `Ping` msgspec struct with the fields `fr`
+(source path), `to` (navigation target), `read` (active seconds on `fr`
+since the last report) and `hide`; falsy fields are omitted. One channel
+follows the session, so the activity of a visit stays tied together, and
+while the user is active the accumulated reading time is flushed every few
+seconds: the trail times are cumulative, so a disconnection simply leaves
+the last reported time in place (no close beacon). After 5 minutes without
+any activity the client closes the socket itself — a sleeping browser tab
+would lose it anyway — and the next activity reconnects as a fresh session;
+reconnects are attempted only on user activity, with an exponential backoff
+between attempts so a failing endpoint is never hammered. Idle-time link preloads
+stay plain `fetch()` calls so the browser may cache the responses; the
+WebSocket reports actual navigations and active time spent on a page.
 
 - **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
+  already exists, e.g. a second tab). This message 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
+  (Googlebot, GoogleOther, Applebot, ...) do connect and report, but their
-  gives them away: pings whose UA matches `_is_bot_ua` (anything calling
+  User-Agent gives them away: messages 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
+  visits: the message 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
+  `utm_*` query parameters in in-memory IP tables, consumed by the first
+  message 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).
+  whose initial message 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
+  analytics page (`/_a` — its GET is untracked, and the server cannot
-  as a ping target anyway), and everything while the user has the editor
+  record it as a navigation 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
+  `/_a` does report: the fetch-navigation already GET-ed the target page
-  without the preload header, and without the ping that GET would flush to
+  without the preload header, and without the message 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
+  the client still reports but adds `hide`. 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
@@ -73,6 +88,20 @@ falsy values are omitted):
 - 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 activity message 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
@@ -86,8 +115,8 @@ falsy values are omitted):
   `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`
+  lookups run in background tasks after the event is stored, so WebSocket
-  response is never delayed.  The decompressed `dbip-*.mmdb` file is kept in
+  message handling 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,
@@ -96,10 +125,11 @@ falsy values are omitted):
   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
+  `x-pagerite-preload` header and are not tracked at all (the navigation
-  the user actually navigates to a preloaded page does the counting; forging
+  message 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
+  classification is unaffected).  If a message
   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
@@ -117,7 +147,7 @@ falsy values are omitted):
   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`)
+  included), and its activity messages 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
@@ -131,9 +161,9 @@ falsy values are omitted):
 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
+`Accept-Language` tag.  The first message from a client hash starts a new
-visit; subsequent pings extend it.  Pings arriving with no known session
+visit; subsequent messages extend it.  Messages arriving with no known session
-(server restart) start a fresh visit from the first ping — treated as
+(server restart) start a fresh visit from the first message — 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.
@@ -150,7 +180,7 @@ Each `Client` record:
 - `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,
+- `hide` — true for admin clients (`hide` message field): all their visits,
   crawler hits and abuse hits are recorded but excluded from every
   statistic and from the viewer payload.
 
@@ -166,7 +196,7 @@ Each `Visit` record:
   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,
+- `navs` — every navigation message (`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.
@@ -213,7 +243,8 @@ shapes, part of the WebSocket payload (`Display` struct alongside `visits`,
 
 - `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.
+  referer origin or `"(direct)"` for initial loads, a page path for
+  navigations.
 - `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

docs/backend.md

@@ -8,7 +8,9 @@ The FastAPI app. FastAPI's built-in API docs are disabled (`docs_url`/`redoc_url
 
 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.
+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 cleared wholesale by `_invalidate_pages()` on every content/settings change, which also bumps the in-memory render generation. 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 the render generation; `/_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. Uploaded raster images (and rasterized SVGs) are stored as `<hash>.orig<ext>` (internal only, never served) plus AVIF, WebP and JPEG derivatives, and pages link the extension-less `/_f/{hash}`: the server serves a format only when the Accept header lists it explicitly (`image/avif` → AVIF, `image/webp` → WebP, otherwise — including `*/*` — JPEG), with `vary: accept`; an explicit extension pins the format. `migrate_v2` rewrites old `/_f/{hash}.avif` article links to the bare form, backfills missing derivatives on disk, and drops the obsolete `version` field. Legacy databases that still carry blobs in a `files` kanta field or a flat `pages` store are migrated by `pagerite/migrations.py::migrate_v1` (kanta's `migrate_vN` mechanism, wired via `Kanta(..., migrations="pagerite.migrations")`), which rewrites the raw state before struct decoding — all schema/storage upgrades live in that module, none in the app lifespan.
 
 ## `data.py`
 
@@ -16,17 +18,19 @@ msgspec Structs for the kanta database. See `docs/content-model.md` for the full
 
 ## `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).
+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 body segmented for the column layout — h1/h2 headings, `.wide` blocks and margin-breakout blocks (`.margin`, `::: aside`) stand bare, the runs between them become `<div class="colseg">` (plus `.cols` on segments with enough text, `::: nocols` opting out), and `multicol` flags bodies long enough to columnize (visible-text thresholds, code excluded). `views.py` puts the class on the article; pagerite.css takes it from there (at most two columns, the left-margin breakout, all viewport adaptation).
+`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 and `.wide` blocks stand bare, the runs between them become `<div class="colseg">` (margin-breakout boxes — `.margin`, `::: aside` — stay inside the segment at their anchor point; the CSS positions them out of flow into the side zone) (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 (`Data.site_url` — learned from admin browsers reporting their `location.origin` via `POST /_api/site-url`, correct even behind reverse proxies; until learned, the request's own base URL is the fallback); `article:published/modified_time` come from `Node.created`/`modified`. If the markdown contains its own h1, the page title is NOT rendered as an additional h1 (it still supplies `<title>` and nav labels).
+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`. Additionally `twitter:image` pins extension-less `/_f/{hash}` share images to the `.webp` variant — X only honors WebP via twitter:image (not og:image) and its scraper cannot be trusted to negotiate via Accept. 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), 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).
+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`
 

docs/content-model.md

@@ -6,15 +6,15 @@ The site structure is stored in the kanta database managed by `pagerite/data.py`
 
 `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.
+`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(...)`.
+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 `pages` (pre-tree databases) migrates into `menu` via `migrate_v1`. 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.
+Every content/settings write calls `_invalidate_pages()` in app.py, which clears the rendered-body LRU and bumps an in-memory render generation embedded in page ETags, so nav-affecting changes invalidate caches. (This used to be a persisted `Data.version` counter — cache invalidation is not database state, so the field was dropped; old databases lose the key on re-serialization.)
 
 ## Files
 
-`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.
+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 GIF) and SVGs (rasterized) get a set of derivatives: the untouched original under `<hash>.orig<ext>` (internal only — it may carry EXIF data and is never served; SVG originals stay servable as `<hash>.svg`), a mediapreview-recompressed AVIF (`<hash>.avif`, thumbnailed to `IMAGE_MAXSIZE` at `IMAGE_QUALITY`), and WebP/JPEG fallbacks re-encoded from the AVIF at lower quality (`IMAGE_WEBP_QUALITY`/`IMAGE_JPG_QUALITY`, chosen for similar-or-smaller file size). Pages link the bare `/_f/<hash>` and the server negotiates by Accept header: a format is served only when listed explicitly (`image/avif` → AVIF, `image/webp` → WebP, anything else including `image/*` and `*/*` → JPEG); an explicit extension in the URL pins the format. Responses carry `vary: accept`. Favicons uploaded in settings go through the same pipeline at `FAVICON_MAXSIZE` (192px). Existing databases are updated by `migrate_v2` (link rewrite plus on-disk derivative backfill). Deleting any name of a hash removes the whole group. 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
 
@@ -26,10 +26,12 @@ Siblings order by the fractional `Node.order` key: a moved item gets a fresh key
 
 `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.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 `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.
+`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

@@ -19,22 +19,22 @@ Pagerite is a single-user CMS/blog. This document records the initial high-level
 
 - Content is written in **Markdown** with powerful extensions (tables, footnotes, code highlighting, etc.).
 - **Embedded HTML is passed through unfiltered**, including inline scripts and other dynamic content the author wants to post. This is safe by the single-trusted-author assumption above.
-- Renderer: **markdown-it-py** with mdit-py-plugins (footnotes, definition lists, task lists, brace-attributes, 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.
+- 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 are taken out of flow into the side zone at the article's left (the region the nav sidebar overlays, or the sidebar's own track when the layout reserves one) and the text never moves — and `::: nocols` opts its section out of column layout; tables and strikethrough from the default preset), GitHub-style alerts (`> [!NOTE]` / TIP / IMPORTANT / WARNING / CAUTION, rendered in the admonition callout styling), with `html=True` for raw passthrough, `typographer=True` for SmartyPants-style replacements in body text (curly quotes, `--` / `---` → en / em dashes, `...` → ellipsis, `(c)` → ©, etc.), and `breaks=True` so single line breaks inside paragraphs become `<br>` — including inside blockquotes, where every newline is kept and a blank `>` line starts a new paragraph. Code spans/blocks and raw HTML are left untouched. Fenced code blocks are highlighted server-side with **Pygments** (`nowrap` spans styled by `/_assets/pygments-*.css`, which maps every token class onto the `--code-*` variables; the base stylesheet defines light and dark palette sets resolved via `light-dark()`, so each theme gets the set matching its `color-scheme` and may only retint `--code-bg` to keep the well in the page's color family); a JS copy button appears on hover. Should this prove limiting, we implement our own renderer on top of html5tagger, which we already use for all HTML generation.
-- **Files are content-addressed.** Uploads (`PUT /_api/files/{filename}`) are stored by content hash — blake3, first 6 bytes hex + original extension — and served immutable from `/_f/{hash}.ext`. Absolute URLs that survive page renames and dedupe identical content; pages no longer own files. An image standing alone in its paragraph becomes a block `<figure>` — with `<figcaption>` when it has a title; images inline with text and raw `<img>` HTML stay plain inline images. Positioning is by attribute classes: `![alt](/_f/….avif "Caption"){.right}` — `{.right}`, `{.left}` float at 30% of the text column (the caption wraps within it; an explicit `width=300` makes the figure shrink-wrap the image instead), `{.margin}` makes it a margin note, floating in the side zone left of the text on all but phone widths, `{.wide}` goes full bleed (viewport edge to edge, or up to the docked editor; the sidebar stacks on top of it); plain attributes like `width=300` work too. The same brace syntax on a block's last line (no blank line between) applies to the whole block: a paragraph ending with `{.wide}` becomes a full-width element that breaks out of the column layout; written on the line after a block it applies to that preceding block — this is how headings, `::: containers` and code fences take classes (a wide code fence goes full bleed like a wide figure). Headings (h1/h2) clear floats, so images never overflow into the next section.
+- **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/…`. Raster images (not GIF) and SVGs (rasterized) are recompressed via mediapreview: the original is kept as `{hash}.orig{ext}` (internal only, never served — it may carry EXIF data; SVG originals stay servable as `{hash}.svg`) while pages link the extension-less `/_f/{hash}` and the server picks from the derivatives (`{hash}.avif` / `{hash}.webp` / `{hash}.jpg`) by Accept header — a format only when listed explicitly (`image/avif` → AVIF, `image/webp` → WebP, otherwise JPEG), with `vary: accept`; an explicit extension in the URL pins the format. 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/… "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, placed 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.
+- **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. 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.
+- **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 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.
+- **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. Long articles (flagged `.multicol` by the backend render) lift the cap and become a bounded **composition**, centered in the available space with the surplus left vacant: a fluid text lane (up to 42rem) plus a 16rem **side zone at the article's left** — the region the nav sidebar overlays — which hosts margin boxes (`.margin`, `::: aside`, margin figures) at all but phone widths, without the text ever moving. On pages with a sidebar below ~110rem (where the sidebar gets its own 12rem track) the track is the left lane instead: no in-article zone, the text lane runs fluid up to 86rem, and the boxes fall into the track, sliding under the translucent sticky nav. Once two lanes fit beside the zone (≥96rem available in `main`), the text flows in two fluid lanes (36rem minimum, capped at 102rem total — technical content wants the wider lanes, and wider windows just add vacant space). The stages step by the space actually available in `main` (container queries + `cqw` units, so the docked editor's inset is automatic). `.wide` figures on multicol pages bleed to the viewport edges measured from `main` (`cqw`), sliding under the sidebar. The backend splits the body into `.colseg` segments at h1/h2 headings, `.wide` elements and margin blocks (full-width separators or margin boxes, never inside columns), tagging segments that hold enough text with `.cols` — code blocks are excluded from that measure, and a `::: nocols` container opts its whole section out. On wide single-column pages (≥104rem), margin boxes lean into the vacant left gutter as well.
+- 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 and `.wide` elements (full-width separators, never inside columns); margin boxes stay inside the segment at their anchor point and the CSS takes them out of flow — absolutely positioned off the article's left border into the zone, the columns flowing through unaffected — 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
@@ -45,10 +45,10 @@ Pagerite is a single-user CMS/blog. This document records the initial high-level
 ## Editing
 
 - Editing happens **in place**, in two modes opened by two pens:
-  - **Page mode** — the 🖊️ next to a page's heading (including 404s, which is how new pages start) opens a CodeMirror Markdown editor docked to the left of the article: the panel is fixed to the viewport's left edge (its top tracks the banner's bottom until the banner scrolls away), the content shifts right and the sidebar hides while editing. Preview renders server-side per keystroke (no debouncing) straight into the visible article's heading and body.
+  - **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 🖊️ 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.
+  - **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.
+- **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)` 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}`.

docs/editing.md

@@ -6,12 +6,12 @@ The Vue editor is a single tabbed `EditorShell.vue` mounted in a host div create
 
 The shell hosts four kept-alive tabs (ordered site-wide first — site, structure — then, after a visual break, the per-page tabs — article, banner):
 
-- `PageEditor.vue` — CodeMirror + server-rendered preview over WebSocket `/_api/ws/editor`, previewing into the visible article; editor and article scrolls are linked proportionally both ways, applied instantly (the window keeps scrolling normally while any editor is open — the panel is fixed to the viewport's left edge, its top tracking the banner's bottom edge until the banner scrolls away — and the panel scrolls internally); a format bar offers Markdown helpers — bold/italic/code/link/table/image upload, with Ctrl/Cmd-B/I/S bindings — for the hard-to-remember syntax. Edits content and title only, never the path.
+- `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 + font picker + favicon upload — clicking the preview tile picks a new one — + site-wide custom CSS, CSS injected into `<head id="pagerite-user">`.
+- `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 (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.
+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.
 
@@ -25,6 +25,6 @@ Dropping ON the lower part of a row moves the page under that row (the child lis
 
 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). 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.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

@@ -8,20 +8,24 @@ Vue editor app entry, mounts the tabbed `EditorShell`. See `docs/editing.md` for
 
 ## `pagerite.js`
 
-Public page entry; runs fetch-navigation (backed by an in-memory page cache: every visible internal link is fetched once at load and clicks are then served from JS with no fetch — the current page itself is not refetched, it enters the cache when navigated to — and the editors' `loadPlain` keeps the cache current via a `pagerite:page-fetched` event; articles are `cache-control: no-cache` on the wire). Editors can drop the entire cache with the `pagerite:drop-page-cache` event when site-wide or page changes (theme, headings, structure, banners, etc.) invalidate the cached HTML of other pages; `main.js` triggers a fresh `pagerite:preload-pages` pass when the editor panel closes so navigation is fast again. Navigation that starts while the editor is open bypasses the cache and fetches the target page on demand. Also runs scroll-reveal, OverlayScrollbars on `document.body` (floating, auto-hiding scrollbars that never reserve layout space or shift the page when appearing; native scroll APIs like `window.scrollTo` keep working; themed via the `--os-*` variables in pagerite.css), brand shrink-to-fit (the themed size is the maximum; JS reduces the font-size so a long brand or narrow viewport still fits one line), nav condense-to-fit (the top nav stays on one row: link gaps shrink first, then the side padding, then the font size; `flex-wrap: wrap` remains the no-JS fallback), code copy buttons, and the auth check.
+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, click-to-enlarge on article figure images (a full-viewport lightbox with the caption, closed by click or Esc), 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, 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.
+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*` block at the end of `pagerite.css` (from termotohtori.fi) is fragile — do not tweak. Themes and banner designs are NOT built — they live in `pagerite/themes/{name}/` and are served by the backend. See `docs/themes-and-assets.md` for details.
+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.
 
-## Database file
+## Data directory
 
-The database file is `pagerite.kantadb` in the cwd (`PAGERITE_DB` overrides); gitignored. Do not delete it without asking.
+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/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

@@ -8,14 +8,28 @@ Files under `frontend/src/assets/` are built by Vite and served hashed under `/_
 - `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*` block at the end of `pagerite.css` (from termotohtori.fi) is fragile — do not tweak.
+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.
@@ -23,6 +37,15 @@ Current themes:
 - `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:
@@ -32,6 +55,17 @@ A theme folder may also ship a banner design (`banner.css` + `banner.html` arbit
 
 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, 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).
+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/src/AnalyticsView.vue

@@ -126,10 +126,11 @@ const readStats = computed(() => calcReadStats(visits.value))
 watch(range, (r) => {
   const url = new URL(location.href)
   url.hash = r
-  history.replaceState(null, '', url)
+  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))
@@ -161,7 +162,7 @@ const abuseRows = computed(() => formatAbuseRows(rangeData.value?.abuse || [], c
         </section>
 
         <VisitorCharts :data="data" :range="range" />
-        <TransitionGraph :data="rangeData" :window="window" :page-tree="pageTree" />
+        <TransitionGraph :data="rangeData" :window="window" :page-tree="pageTree" :favicons="favicons" />
 
         <section>
           <h2>Recent visits</h2>
@@ -177,9 +178,9 @@ const abuseRows = computed(() => formatAbuseRows(rangeData.value?.abuse || [], c
               <tbody>
                 <tr v-for="(v, i) in visitRows" :key="i">
                   <td class="trail">
-                    <TrailLink v-if="v.refererStep" :step="v.refererStep" @close="$emit('close')" />
+                    <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" @close="$emit('close')" />
+                    <TrailLink v-for="(s, si) in v.trail" :key="si" :step="s" :favicons="favicons" @close="$emit('close')" />
                   </td>
                   <VisitorCell
                     :ip="v.ip"

frontend/src/BannerEditor.vue

@@ -4,6 +4,8 @@
 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 { dropPageCache, loadPlain, runScripts } from './swapdoc'
@@ -261,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.
+// preview via its own pagerite:editor-shown listener. No Escape-to-close:
-function onKeydown(ev) {
+// it fired too easily by accident (e.g. dismissing an editor popup).
-  if (ev.key === 'Escape' && document.body.classList.contains('editing')) close()
-}
 
 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

@@ -5,14 +5,19 @@
 // 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 and article (window) scrolls are linked
-// proportionally both ways (syncWindowToEditor / syncEditorToWindow).
+// 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
+// state (unsaved text included) also survives closing the shell. The editor
-// only on a real page reload.
+// 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 { dropPageCache, loadPlain } from './swapdoc'
@@ -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 = {
@@ -127,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, '-')
@@ -139,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()
   }
 }
 
@@ -166,26 +191,165 @@ function wrapInline(mark) {
   view.focus()
 }
 
-function insertCode() {
+// --- Fenced blocks (``` code, ::: containers) ------------------------------
-  // On an empty line with no selection: a fenced code block, cursor inside.
+// Fences are never nested, and both kinds behave identically in the
-  // Otherwise an inline code wrap (toggling).
+// 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)
+  const fence = enclosingFence(doc.lineAt(from).number, doc.lineAt(to).number, markerRe)
-  if (from === to && !line.text.trim()) {
+  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```' },
+      changes: { from: fromLine.from, to: fromLine.to, insert: `${openText}\n${closeText}` },
-      selection: { anchor: line.from + 4 },
+      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
@@ -196,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.
+  // selected. Like images, a table is block-level: on a fresh line of its
-  const { from, to } = view.state.selection.main
+  // own — a cursor on a non-empty line (e.g. inside an image tag) inserts
-  const before = from > 0 && view.state.doc.sliceString(from - 1, from) !== '\n' ? '\n\n' : ''
+  // 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 },
+    changes: { from: pos, insert: text },
-    selection: { anchor: from + before.length + 2, head: from + before.length + 8 },
+    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 })
 }
@@ -240,29 +602,24 @@ function runScripts(root) {
   }
 }
 
-function previewIntoArticle(html, hasH1, multicol) {
+function previewIntoArticle(html, multicol) {
   const article = document.querySelector('#main article')
   if (!article) return
-  // The server render owns the column layout: .multicol on the article,
+  // The server render owns the article completely — the injected title h1,
-  // the segmented .colseg/.cols structure inside .body. Both arrive with
+  // the column layout (.multicol on the article, the .colseg/.cols
-  // the preview and must stay in sync as edits cross the thresholds.
+  // 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 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.
   const pen = article.querySelector('button.edit-link')
-  if (pen && (h1?.contains(pen) || body?.contains(pen))) article.prepend(pen)
+  if (pen) pen.remove()
-  if (h1) {
+  const cards = article.querySelector(':scope > .cards')
-    h1.style.display = hasH1 ? 'none' : ''
+  if (cards) cards.remove()
-    h1.textContent = title.value
+  article.innerHTML = html
-  }
+  if (cards) article.append(cards)
-  if (body) {
+  runScripts(article)
-    body.innerHTML = html
+  dispatchEvent(new CustomEvent('pagerite:preview'))
-    runScripts(body)
-    dispatchEvent(new CustomEvent('pagerite:preview'))
-  }
 }
 
 function onMessage(ev) {
@@ -270,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, msg.multicol)
+    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') {
@@ -310,31 +673,114 @@ 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()
 }
 
-// Bidirectional proportional scroll sync between the CodeMirror scroller
+// Piecewise-linear scroll sync between the CodeMirror scroller and the
-// and the window (the article's scroller, also while editing). Both
+// window (the article's scroller, also while editing), keyed on the
-// directions apply instantly (never smooth — a smooth window scroll feeds
+// section anchors: the backend tags anchored h1/h2 headings with
-// its intermediate positions back into the editor and fights the user's
+// data-line (markdown source line), so each heading pairs a document
-// scrolling) and coalesce to one update per frame. Loops are broken two
+// position with a page position, and positions interpolate linearly
-// ways: a driver flag held until one frame AFTER the write (the scroll
+// between neighbouring headings. Endpoints are the article top (line 1)
-// event a programmatic write dispatches arrives asynchronously — clearing
+// and the document bottom (last line).
-// 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
+// Editor → page follows the CURSOR, not the editor viewport: the cursor's
-// whenever layout shifted the proportional targets mid-scroll), and a 1px
+// fractional line (soft-wrap included, so moving inside a wrapped
-// tolerance so residual rounding is a no-op. When the panel's height
+// paragraph tracks smoothly) maps to its page position. The page only
-// changes mid-scroll (its top tracks the banner), the page is the driver:
+// scrolls when that position leaves the viewport (with an edge margin),
-// the editor is re-matched to the page's position, never vice versa.
+// 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
   syncingScroll = true
   requestAnimationFrame(() => {
-    const scroller = view.scrollDOM
+    const pts = syncPoints()
-    const max = scroller.scrollHeight - scroller.clientHeight
+    if (pts) {
-    const pct = max > 0 ? scroller.scrollTop / max : 0
+      // Scroll the page only when the cursor's page position leaves the
-    const y = pct * Math.max(0, document.documentElement.scrollHeight - innerHeight)
+      // viewport (minus an edge margin): while it stays visible the page
-    if (Math.abs(scrollY - y) > 1) scrollTo({ top: y, behavior: 'instant' })
+      // 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 })
   })
 }
@@ -343,15 +789,47 @@ function syncEditorToWindow() {
   if (syncingScroll || !view) return
   syncingScroll = true
   requestAnimationFrame(() => {
-    const scroller = view.scrollDOM
+    const pts = syncPoints()
-    const pageMax = Math.max(0, document.documentElement.scrollHeight - innerHeight)
+    if (pts) {
-    const pct = pageMax > 0 ? scrollY / pageMax : 0
+      // Anchor fraction grows with page progress: the mapped line sits at
-    const top = pct * Math.max(0, scroller.scrollHeight - scroller.clientHeight)
+      // the viewport top when the page is at its top, at the bottom when
-    if (Math.abs(scroller.scrollTop - top) > 1) scroller.scrollTop = top
+      // 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`,
@@ -387,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
@@ -407,9 +891,10 @@ onMounted(() => {
     }),
     parent: editorEl.value,
   })
-  view.scrollDOM.addEventListener('scroll', syncWindowToEditor)
   // Page → editor: window scroll (and resizes, e.g. the panel growing when
   // the banner scrolls away) re-match the editor to the page's position.
+  // 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.
@@ -421,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(() => {
@@ -435,6 +922,7 @@ onUnmounted(() => {
   removeEventListener('resize', syncEditorToWindow)
   removeEventListener('keydown', onKeydown)
   removeEventListener('pagerite:editor-shown', onEditorShown)
+  removeEventListener('pagerite:edit-section', consumePendingLine)
 })
 </script>
 
@@ -462,17 +950,59 @@ onUnmounted(() => {
       >💾</button>
     </header>
     <div class="format-bar">
-      <button type="button" title="bold" @click="wrapInline('**')"><b>B</b></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="italic" @click="wrapInline('*')"><i>I</i></button>
+      <button type="button" title="link (toggle: click inside a link to unwrap it)" @click="insertLink">🔗︎</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"
         title="table"
         :class="{ active: tablePicker }"
         @click="tablePicker = !tablePicker"
-      >▦</button>
+      >⊞</button>
-      <button type="button" title="insert image (upload) — pasting works too" @click="fileInput.click()">🖼️</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
@@ -572,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;
@@ -582,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
@@ -639,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
+   a slight margin to the panel edges. Wheel scroll stays in the editor
-   drives the article (syncWindowToEditor) instead of double-scrolling. */
+   (overscroll-behavior) instead of double-scrolling the page. */
 .editor {
   flex: 1;
   min-width: 0;

frontend/src/SiteEditor.vue

@@ -5,6 +5,8 @@
 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'
@@ -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' },
+      { value: '', label: `${MODE_ICONS.light} none` },
-      ...(s.themes || []).map((t) => ({ value: t, label: t })),
+      ...(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 */ }
 }
@@ -230,6 +253,7 @@ async function saveSettings(opts = {}) {
       theme: theme.value,
       custom_css: customCss.value,
       brand_html: brandHtml.value,
+      transition: transition.value,
       ...opts,
     }),
   })
@@ -285,6 +309,37 @@ async function onThemeChange() {
   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) {
@@ -329,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 },
@@ -343,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('')
@@ -352,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 serifFonts = computed(() => fontOptions.value.filter((o) => o.serif))
-const sansFonts = computed(() => FONT_OPTIONS.filter((o) => !o.serif))
+const sansFonts = computed(() => fontOptions.value.filter((o) => !o.serif))
 
 function toggleFontPanel() {
   if (fontPicker.value) {
@@ -430,6 +489,8 @@ onMounted(async () => {
       doc: '',
       extensions: [
         basicSetup,
+        // Tab/Shift-Tab indent and dedent instead of moving focus.
+        keymap.of([indentWithTab]),
         css(),
         cmTheme,
         cmHighlight,
@@ -449,6 +510,8 @@ onMounted(async () => {
       doc: '',
       extensions: [
         basicSetup,
+        // Tab/Shift-Tab indent and dedent instead of moving focus.
+        keymap.of([indentWithTab]),
         html(),
         cmTheme,
         cmHighlight,
@@ -483,36 +546,70 @@ onUnmounted(() => {
     <div v-if="saveError">{{ saveError }}</div>
 
     <section class="block">
-      <label class="field">
+      <div class="field-grid">
-        <span class="field-label">site name</span>
+        <label class="field">
-        <input
+          <span class="field-label">site name</span>
-          v-model="brand"
+          <input
-          class="text-input"
+            v-model="brand"
-          title="Site name (header link and window title)"
+            class="text-input"
-          @input="onBrandInput"
+            title="Site name (header link and window title)"
-        />
+            @input="onBrandInput"
-      </label>
+          />
-      <div class="field">
+        </label>
-        <span class="field-label">theme</span>
+        <div class="field">
-        <select
+          <span class="field-label">favicon</span>
-          v-model="theme"
+          <button
-          class="text-input theme-select"
+            type="button"
-          title="Theme"
+            class="favicon-tile"
-          @change="onThemeChange"
+            title="upload favicon (ico, png, svg...)"
-        >
+            @click="faviconInput.click()"
-          <option v-for="opt in themeOptions" :key="opt.value" :value="opt.value">
+          >
-            {{ opt.label }}
+            <img v-if="favicon" :src="favicon" alt="current favicon" />
-          </option>
+            <span v-else>?</span>
-        </select>
+          </button>
-        <button
+          <input
-          type="button"
+            ref="faviconInput"
-          class="font-btn"
+            type="file"
-          :class="{ active: !!fontPicker }"
+            accept="image/*"
-          title="Fonts"
+            hidden
-          @click="toggleFontPanel"
+            @change="(ev) => { uploadFavicon(ev.target.files[0]); ev.target.value = '' }"
-        >
+          />
-          A
+        </div>
-        </button>
+        <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">
@@ -555,25 +652,6 @@ 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 grow" @paste="onBrandPaste">
@@ -641,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;

frontend/src/StructureEditor.vue

@@ -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
@@ -216,10 +217,13 @@ function onTitleInput(node, ev) {
   })
 }
 
-// The slug inputs are filtered as you type (StructureTree onSlugInput,
+// Slug inputs are typed freely (spaces become hyphens live, see
-// see slugify.js); the server re-validates and its reason is shown.
+// 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 "").

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
+// Slug inputs accept free typing; the only live rewrites are turning
-// characters are simply not accepted, spaces become hyphens and unicode
+// spaces into hyphens and lowercasing (both keep the length for ASCII,
-// folds to ASCII (see slugify.js). Existing rows commit on change, the
+// so the cursor stays put). Anything else (unicode folding, stripping,
-// pending row is v-modeled.
+// collapsing) is left for commit time, where the value is run through
-function onSlugInput(ev) {
+// slugify before talking to the server (StructureEditor). `element` is
-  ev.target.value = slugify(ev.target.value)
+// the pending row (v-modeled), null for existing rows (plain :value
-}
+// binding, read back on commit).
-
+function onSlugInput(element, ev) {
-function onPendingSlugInput(element, ev) {
+  const v = ev.target.value.replace(/\s/g, '-').toLowerCase()
-  element.slug = slugify(ev.target.value)
+  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">

frontend/src/TrailLink.vue

@@ -5,11 +5,15 @@ 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]
@@ -32,6 +36,16 @@ const title = computed(() => {
      :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

@@ -20,8 +20,21 @@ 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).
@@ -150,6 +163,12 @@ onBeforeUnmount(() => cancelAnimationFrame(rafId))
 // 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>
@@ -180,7 +199,8 @@ const countLabel = (n) =>
           <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})`">
-            <text :x="fitsPill(x.label) ? x.x : x.x - TNODE_W/2 + 8" :y="x.y - TNODE_H*0.16" class="tnodeslug" dominant-baseline="middle" :style="{ textAnchor: fitsPill(x.label) ? 'middle' : 'start' }">{{ x.label }}</text>
+            <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>
@@ -189,7 +209,8 @@ const countLabel = (n) =>
           <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})`">
-            <text :x="fitsPill(x.label) ? x.x : x.x - TNODE_W/2 + 8" :y="x.y - TNODE_H*0.16" class="tnodeslug" dominant-baseline="middle" :style="{ textAnchor: fitsPill(x.label) ? 'middle' : 'start' }">{{ x.label }}</text>
+            <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>

frontend/src/analytics/format.js

@@ -152,6 +152,15 @@ function externalSlug(origin) {
   }
 }
 
+/** 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('/')) {
@@ -163,6 +172,7 @@ function stepOf(path, titles) {
       slug: externalSlug(path),
       title: 'External site',
       external: true,
+      origin: externalOrigin(path),
     }
   }
   return null

frontend/src/assets/pygments.css

@@ -25,12 +25,12 @@ pre code .cp { color: var(--code-comment); font-weight: bold; font-style: italic
 pre code .cpf { color: var(--code-comment); font-style: italic } /* Comment.PreprocFile */
 pre code .c1 { color: var(--code-comment); font-style: italic } /* Comment.Single */
 pre code .cs { color: var(--code-comment); font-weight: bold; font-style: italic } /* Comment.Special */
-pre code .gd { color: var(--code-error); background-color: color-mix(in oklab, var(--code-error) 25%, var(--code-bg)) } /* Generic.Deleted */
+pre code .gd { color: var(--code-error); background-color: color-mix(var(--code-error) 25%, var(--code-bg)) } /* Generic.Deleted */
 pre code .ge { color: var(--code-text); font-style: italic } /* Generic.Emph */
 pre code .ges { color: var(--code-text); font-weight: bold; font-style: italic } /* Generic.EmphStrong */
 pre code .gr { color: var(--code-error) } /* Generic.Error */
 pre code .gh { color: var(--code-builtin); font-weight: bold } /* Generic.Heading */
-pre code .gi { color: var(--code-added); background-color: color-mix(in oklab, var(--code-added) 25%, var(--code-bg)) } /* Generic.Inserted */
+pre code .gi { color: var(--code-added); background-color: color-mix(var(--code-added) 25%, var(--code-bg)) } /* Generic.Inserted */
 pre code .go { color: var(--code-muted) } /* Generic.Output */
 pre code .gp { color: var(--code-muted) } /* Generic.Prompt */
 pre code .gs { color: var(--code-text); font-weight: bold } /* Generic.Strong */

frontend/src/cmtheme.js

@@ -8,7 +8,7 @@ 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)",
@@ -33,11 +33,25 @@ export const cmTheme = EditorView.theme({
   ".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/pagerite.js

@@ -27,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);
       }
@@ -69,19 +69,22 @@ import "overlayscrollbars/overlayscrollbars.css";
     return map;
   })();
 
-  function makePen(mode) {
+  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") {
+    if (line != null) {
-      btn.className = "edit-link";
+      // Section pen on an anchored h2: opens the page editor at the
-      btn.title = "edit page";
+      // 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.dataset.editorLine = line;
-      btn.className = "edit-link";
+    } else if (mode === "page") {
-      btn.title = "edit banner";
+      btn.className = "edit-link edit-page";
+      btn.title = "edit page";
       btn.textContent = "🖊️";
     } else {
       btn.className = "edit-link site-edit-link";
@@ -93,9 +96,17 @@ 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 makeAuthLink(admin) {
@@ -131,8 +142,6 @@ import "overlayscrollbars/overlayscrollbars.css";
       const pens = document.createElement("div");
       pens.className = "editor-pens";
       if (canEdit && !onAnalytics) {
-        pens.append(makePen("banner"));
-        pens.append(makePen("site"));
         // Analytics viewer is now a normal page at /_a.
         const a = document.createElement("a");
         a.className = "edit-link analytics-link";
@@ -140,6 +149,7 @@ import "overlayscrollbars/overlayscrollbars.css";
         a.title = "analytics";
         a.textContent = "📊";
         pens.append(a);
+        pens.append(makePen("site"));
       }
       if (ssoAvailable) pens.append(makeAuthLink(isAdmin));
       banner.after(pens);
@@ -175,14 +185,6 @@ import "overlayscrollbars/overlayscrollbars.css";
     }
 
     if (isAdmin) {
-      // Teach the backend the site's public origin (used for absolute
-      // social/canonical URLs): unlike request headers, location.origin
-      // reflects the real scheme and host even behind reverse proxies.
-      fetch("/_api/site-url", {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({ url: location.origin }),
-      }).catch(() => {});
       // 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.
@@ -266,16 +268,48 @@ import "overlayscrollbars/overlayscrollbars.css";
     }
   }
 
+  // --- Figure lightbox (click to enlarge) --------------------------------
+  // Clicking an article figure's image opens it in a full-viewport box:
+  // the image as large as fits with its caption below; click or Esc
+  // closes. The zoomed <img> reuses the source URL — /_f/ is immutable
+  // and content-negotiated, so the large view comes from the browser
+  // cache at no extra cost.
+  let lightbox = null;
+  function closeLightbox() {
+    lightbox?.remove();
+    lightbox = null;
+  }
+  function openLightbox(figure) {
+    const img = figure.querySelector("img");
+    if (!img) return;
+    closeLightbox();
+    lightbox = document.createElement("div");
+    lightbox.id = "lightbox";
+    const big = document.createElement("img");
+    big.src = img.currentSrc || img.src;
+    big.alt = img.alt;
+    lightbox.append(big);
+    const cap = figure.querySelector("figcaption");
+    if (cap) {
+      const c = document.createElement("div");
+      c.className = "caption";
+      c.textContent = cap.textContent;
+      lightbox.append(c);
+    }
+    lightbox.addEventListener("click", closeLightbox);
+    document.body.append(lightbox);
+  }
+  // Any key dismisses the lightbox — Esc included, and the rest would
+  // only scroll the page behind it anyway.
+  addEventListener("keydown", () => closeLightbox());
+
   // 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");
+    const btn = article?.querySelector("button.edit-page");
-    // First visible h1: the title h1 may be display:none when the
+    const h1 = article?.querySelector("h1");
-    // markdown owns its heading (editor preview state).
-    const h1 = [...(article?.querySelectorAll("h1") || [])]
-      .find((h) => h.offsetParent !== null);
     if (btn && h1 && btn.parentElement !== h1) h1.append(btn);
   }
 
@@ -348,8 +382,8 @@ import "overlayscrollbars/overlayscrollbars.css";
     for (const url of urls) {
       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
+      // server excludes these GETs from analytics (the navigation message
-      // navigation does the counting).
+      // 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() : ""))
@@ -366,6 +400,13 @@ 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
@@ -396,61 +437,141 @@ import "overlayscrollbars/overlayscrollbars.css";
     }, { passive: true });
   }
 
-  // --- Analytics pings ---------------------------------------------------
+  // --- Section hash -------------------------------------------------------
-  // Fire-and-forget POSTs to /_a with the fields as query parameters (a
+  // Reflect the section being read in the location hash: the last h1/h2
-  // beacon can carry no body, and query args show in server logs next to
+  // above the middle of the viewport is current, even when already
-  // the document GET they refer to): on the initial page load (starts the
+  // scrolled out of view. Above the first tagged heading the hash is
-  // visit — the server counts nothing from the document GET alone), for
+  // removed — including at the very top of the document, where an early
-  // internal fetch-navigations, for external https exits, and on window
+  // heading may sit in the top half. Pages too short to scroll never get
-  // close. ``read`` is the active time (ms) spent on ``fr``.
+  // a hash, and articles with few headings have no ids at all (the
-  // Reading time pauses after 1 minute of inactivity and resumes on the
+  // backend only anchors h1/h2 in bodies of 3+ such headings).
-  // next mouse/touch/scroll/keyboard event.
+  // replaceState keeps this out of history; fetch-navigation already
-  // Excluded: back/forward (popstate never pings), everything while the
+  // 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 over WebSocket ------------------------------------------
+  // One /_ws connection follows the whole browsing session: the initial page
+  // load (starts the visit — the server counts nothing from the document GET
+  // alone), internal fetch-navigations, external https exits, and frequent
+  // active reading-time updates. Messages are JSON text frames matching the
+  // server's msgspec Ping struct: {fr?, to?, read?, hide?} — falsy fields
+  // are omitted. ``read`` is the active time (ms) accumulated on ``fr`` since
+  // the last report; reading time pauses after 1 minute of inactivity and
+  // resumes on the next mouse/touch/scroll/keyboard event. While the user is
+  // active, accumulated reading time is flushed every few seconds, so a
+  // disconnect simply leaves the last reported time on the server — no close
+  // beacon is needed. After 5 minutes without any activity the client closes
+  // the channel itself (a sleeping tab would lose it anyway); the next
+  // activity reconnects and the server sees a new session.
+  // Excluded: back/forward (popstate never reports), everything while the
   // editor is open (body.editing — admin noise, not visits), and
-  // navigations TO the analytics page (/_a — admin machinery, and the
+  // navigations TO the analytics page (/_a — admin machinery). Navigations
-  // server rejects it as a ping target anyway). Navigations AWAY from /_a
+  // AWAY from /_a must report: load() already fetched the target page
-  // must ping: load() already fetched the target page without the preload
+  // without the preload header, and without the message that GET would flush
-  // header, and without the ping that GET would flush to the crawler list.
+  // 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
+  // everyone's state) report normally but with hide: the server then flags
-  // records nothing and scrubs any session the same browser accumulated
+  // the client record, scrubbing everything it ever did from the statistics,
-  // before logging in, so admins never show up as visits or crawlers.
+  // 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
+  // The activity WebSocket. Messages sent before the connection opens are
-  // (falsy values are omitted). Admins get hide=1. ``beacon`` uses
+  // queued (the queue keeps the interim activity). Reconnects are driven by
-  // sendBeacon when available, for unload-time pings.
+  // user activity only — never by timers while the page sits idle — with an
-  function pingFetch(params, { beacon = false } = {}) {
+  // exponential falloff between attempts so a failing endpoint cannot make
-    const query = new URLSearchParams();
+  // us hammer the server (or trip its security limits). After a longer
-    if (ssoAvailable && isAdmin) params = { ...params, hide: 1 };
+  // stretch without any activity we close the socket proactively: the user
-    for (const [key, value] of Object.entries(params)) {
+  // has moved on and left the tab open (a sleeping browser tab would lose
-      if (value) query.set(key, value);
+  // the connection anyway), so the next activity reconnects and registers
-    }
+  // as a fresh session. Analytics must never break navigation: every send
-    const url = `/_a?${query}`;
+  // is wrapped, and a server without the endpoint just leaves the socket
+  // failing in the background.
+  let ws = null;
+  const wsQueue = [];
+  let wsReconnectMs = 1000;
+  let wsNotBefore = 0;
+
+  function activityWs() {
+    if (ws || Date.now() < wsNotBefore) return;
+    const url = new URL("/_ws", location.href);
+    url.protocol = url.protocol === "https:" ? "wss:" : "ws:";
     try {
-      if (beacon && navigator.sendBeacon) {
+      ws = new WebSocket(url);
-        navigator.sendBeacon(url);
+    } catch {
-      } else {
+      return;
-        fetch(url, { method: "POST", keepalive: true });
+    }
-      }
+    ws.onopen = () => {
-    } catch { /* analytics must never break navigation */ }
+      wsReconnectMs = 1000;
+      for (const msg of wsQueue.splice(0)) ws.send(JSON.stringify(msg));
+    };
+    ws.onclose = () => {
+      ws = null;
+      // No timer here: the next user activity retries, after the backoff.
+      wsNotBefore = Date.now() + wsReconnectMs;
+      wsReconnectMs = Math.min(wsReconnectMs * 2, 30_000);
+    };
+    ws.onerror = () => ws.close();
   }
 
-  function ping({ to, fr = currentPath, read = 0, beacon = false } = {}) {
+  function report(msg) {
     if (document.body.classList.contains("editing")) return;
-    if (to === "/_a") return;
+    if (msg.to === "/_a") return;
-    pingFetch({ fr, to, read: Math.round(read / 1000) }, { beacon });
+    if (ssoAvailable && isAdmin) msg.hide = true;
+    activityWs();
+    if (ws?.readyState === WebSocket.OPEN) {
+      try {
+        ws.send(JSON.stringify(msg));
+        return;
+      } catch { /* fall through to queueing */ }
+    }
+    wsQueue.push(msg);
+  }
+
+  function ping({ to, fr = currentPath, read = 0 } = {}) {
+    // Reading-time updates from the analytics page itself are not tracked
+    // (/_a is admin machinery; the server would reject the path anyway).
+    if (!to && currentPath === "/_a") return;
+    const msg = {};
+    if (fr) msg.fr = fr;
+    if (to) msg.to = to;
+    const secs = Math.round(read / 1000);
+    if (secs > 0) msg.read = secs;
+    if (!msg.to && !msg.read) return;
+    report(msg);
   }
 
   // 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.
+  // event. Every READ_FLUSH_MS of accumulated activity is reported. After
+  // IDLE_MS with no activity at all, the remaining read time is flushed and
+  // the WebSocket is closed: the user has moved on, and the next activity
+  // reconnects as a new session.
   const INACTIVE_MS = 60_000;
+  const READ_FLUSH_MS = 5_000;
+  const IDLE_MS = 5 * 60_000;
   let readStart = performance.now();
   let readElapsed = 0;
   let reading = true;
   let readInactivityTimer = null;
-  let closePingedFor = null;
+  let idleTimer = null;
 
   function markReadActivity() {
     if (!reading) {
@@ -464,6 +585,24 @@ import "overlayscrollbars/overlayscrollbars.css";
         reading = false;
       }
     }, INACTIVE_MS);
+    // Any activity is a sign of life: (re)connect the channel if it was
+    // dropped or idle-closed (not while editing — admin noise), and push
+    // the idle disconnect forward.
+    if (!document.body.classList.contains("editing")) activityWs();
+    clearTimeout(idleTimer);
+    idleTimer = setTimeout(() => {
+      if (ws) {
+        // Flush what is left unsent, then hang up. report() would try to
+        // reconnect a dead socket, which is exactly what we avoid here.
+        const left = takeReadTime();
+        if (Math.round(left / 1000) > 0) ping({ read: left });
+        ws.close();
+      }
+    }, IDLE_MS);
+    // Frequently update the article read time on the server.
+    if (readElapsed + performance.now() - readStart >= READ_FLUSH_MS) {
+      ping({ read: takeReadTime() });
+    }
   }
 
   function takeReadTime() {
@@ -483,28 +622,19 @@ import "overlayscrollbars/overlayscrollbars.css";
     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
+  // The initial page load reports 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:
+  // the pageshow re-probe must not report again. Reloads are not visits:
-  // pinging them would double-count the view and log a self-transition.
+  // reporting them would double-count the view and log a self-transition.
   let entryPinged = false;
   function pingEntryOnce() {
     if (entryPinged) return;
@@ -651,7 +781,8 @@ import "overlayscrollbars/overlayscrollbars.css";
       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) {
@@ -667,8 +798,20 @@ import "overlayscrollbars/overlayscrollbars.css";
       doit();
     }
     currentPath = new URL(finalUrl, location.href).pathname;
-    if (push) history.pushState(null, "", finalUrl);
+    if (push) history.pushState({ idx: ++historyIdx }, "", finalUrl);
-    scrollTo(0, 0);
+    // 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;
   }
 
@@ -683,9 +826,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(",")) {
@@ -704,6 +857,13 @@ import "overlayscrollbars/overlayscrollbars.css";
         .catch((e) => console.error("editor load failed:", e));
       return;
     }
+    // Article figure images enlarge into the lightbox.
+    const fig = ev.target.closest("#main article figure");
+    if (fig && ev.target.closest("img")) {
+      ev.preventDefault();
+      openLightbox(fig);
+      return;
+    }
     const a = ev.target.closest("a[href]");
     if (!a || a.target || a.hasAttribute("download")) return;
     const url = new URL(a.href, location.href);
@@ -711,13 +871,20 @@ import "overlayscrollbars/overlayscrollbars.css";
       // 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;
+    // 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")
@@ -727,16 +894,20 @@ import "overlayscrollbars/overlayscrollbars.css";
     const from = currentPath;
     load(url).then((ok) => {
       if (!ok) return;
-      closePingedFor = null;
       ping({ to: url.pathname, fr: from, read: takeReadTime() });
       resetReadTime();
     });
   });
 
-  addEventListener("popstate", () => {
+  addEventListener("popstate", (ev) => {
     // Hash-only history entries are not navigations.
     if (location.pathname === currentPath) return;
-    load(location.href, false, true);
+    // 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 ------------------------------------------------

frontend/src/swapdoc.js

@@ -126,7 +126,7 @@ export async function loadPlain(p) {
   } 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.

frontend/vite.config.js

@@ -8,14 +8,15 @@ import vueDevTools from 'vite-plugin-vue-devtools'
 const backendUrl = process.env.PAGERITE_BACKEND_URL || 'http://localhost:3200'
 
 // Proxy everything except Vite's own dev-time paths and the backend machinery
-// to the FastAPI backend in dev. /_api, /_f, /_themes and /_a are handled by
+// to the FastAPI backend in dev. /_api, /_f, /_themes, /_fonts and /_a are
-// the fastapi-vue plugin, and /@..., /src, /node_modules, /__... stay with Vite.
+// 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", "/_a"] }),
+    fastapiVue({ paths: ["/_api", "/_f", "/_themes", "/_fonts", "/_a"] }),
     vue(),
     vueDevTools(),
   ],
@@ -25,7 +26,16 @@ export default defineConfig({
     },
   },
   appType: 'mpa', // no SPA fallback; every HTML page is served by FastAPI
+  resolve: {
+    alias: {
+      // All components are precompiled SFCs — drop the runtime template
+      // compiler (~60 kB min) from the bundle.
+      vue: 'vue/dist/vue.runtime.esm-bundler.js',
+    },
+  },
   build: {
+    // The main editor bundle (CodeMirror + Vue) is intentionally one chunk.
+    chunkSizeWarningLimit: 1200,
     // Mirror the URL space in the build output: hashed files land under
     // frontend-build/_assets/ and the Frontend serves the build directory
     // at the site root (frontend/public/favicon.ico -> /favicon.ico).

pagerite/__main__.py

@@ -73,6 +73,14 @@ def _download_dbip() -> None:
 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",
@@ -85,6 +93,9 @@ def main() -> None:
         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 {}

pagerite/analytics.py

@@ -1,18 +1,23 @@
 """Server-side visit analytics (collection only; see docs/analytics.md).
 
-Events come from navigation pings POSTed to /_a by pagerite.js: the first
+Events come from pagerite.js over the /_ws WebSocket (``Ping`` messages as
-ping on page load starts a visit, later pings extend it, and pings with no
+JSON text frames): the first navigation message on page load starts a
-known session start a fresh one (missing data, not dropped). The document
+visit, later messages extend it, and messages with no known session start a
+fresh one (missing data, not dropped). Active reading time is reported as
+frequent ``read`` updates while the user is active; the times are
+cumulative per trail item, so a disconnect simply leaves the last logged
+time in place. 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
+utm_* query parameters in in-memory IP tables, consumed when the first
-starts the visit; nothing is counted without a ping (plain bots that only
+message starts the visit; nothing is counted without a message (plain bots
-fetch documents end up in the crawler list).  JS-running crawlers
+that only fetch documents end up in the crawler list).  JS-running crawlers
-(Googlebot, GoogleOther, Applebot, ...) do ping, but their UA gives them
+(Googlebot, GoogleOther, Applebot, ...) do connect and send messages, but
-away (``_is_bot_ua``) and their pings are ignored, so they land in the
+their UA gives them
+away (``_is_bot_ua``) and their messages 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
+``x-pagerite-preload`` header and are not tracked at all — the navigation
-when the user actually navigates does the counting.
+message sent when the user actually navigates does the counting.
-Admin clients ping with ``hide=1``: the client record is flagged ``hide``,
+Admin clients send ``hide``: 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
@@ -70,6 +75,27 @@ def _compact_user_agent(ua: str) -> str:
     return " ".join(p for p in parts if p).strip()
 
 
+class Ping(msgspec.Struct, omit_defaults=True):
+    """One client message on the /_ws activity WebSocket.
+
+    Sent as a JSON text frame (msgspec-encoded, decoded to str for the
+    wire).  ``to`` set: a navigation — internal page path or external https
+    exit URL.  ``read`` alone (with ``fr``): an active reading-time update
+    for the page ``fr``; these arrive frequently while the user is active
+    and accumulate on the trail item.  ``hide`` flags the client as an
+    admin: everything it ever did is excluded from the statistics.
+    """
+
+    #: Path of the page the activity happened on ("" for the initial load).
+    fr: str = ""
+    #: Navigation target: internal path or external https exit URL.
+    to: str = ""
+    #: Active reading time (seconds) spent on ``fr`` since the last report.
+    read: int = 0
+    #: Admin client: record but hide everything from the statistics.
+    hide: bool = False
+
+
 class Client(msgspec.Struct, omit_defaults=True):
     """Client metadata shared by visits, crawler hits and abuse hits.
 
@@ -151,7 +177,7 @@ class Visit(msgspec.Struct, omit_defaults=True):
 
 
 class CrawlerHit(msgspec.Struct, omit_defaults=True):
-    """A document GET that was never followed by an analytics ping.
+    """A document GET that was never followed by an activity message.
 
     Client metadata is held in ``Analytics.clients`` keyed by ``client``.
     """
@@ -190,11 +216,27 @@ class AbuseHit(msgspec.Struct, omit_defaults=True):
     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.
@@ -219,6 +261,9 @@ class Display(msgspec.Struct, omit_defaults=True):
     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.
@@ -302,6 +347,9 @@ def _utm_tags(query: str) -> dict[str, str]:
 
 _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
@@ -370,19 +418,19 @@ class Store:
         #: 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.
+        #: one, stashed for the visit the client's initial message 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.
+        #: carried any, stashed for the visit the client's initial message 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
+        #: Document GETs that have not yet been matched by a message.  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.
+        #: by the matching message 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.
@@ -470,6 +518,11 @@ class Store:
             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)
@@ -544,6 +597,34 @@ class Store:
         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,
@@ -666,16 +747,16 @@ class Store:
     ) -> 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
+        Nothing is counted here — the client's first /_ws message starts the
-        visit (only non-admin clients ping). Only a cross-origin https
+        visit (only non-admin clients report). 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
+        Every document GET is also queued as a pending crawler hit.  If a
-        from the same client arrives within ``_CRAWLER_TIMEOUT``, the hit is
+        message from the same client arrives within ``_CRAWLER_TIMEOUT``, the
-        discarded; otherwise it is flushed to ``data.crawlers``.  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.
 
@@ -739,15 +820,16 @@ class Store:
         hide: bool = False,
         read: int = 0,
     ) -> tuple[int | None, list[bytes]]:
-        """Record a client navigation ping ({from, to, read} from pagerite.js).
+        """Record a client activity message (``Ping`` from pagerite.js over /_ws).
 
         ``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
+        missing/empty ``to`` means a pure reading-time update 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_``.
+        the visit. ``read`` is the active time (seconds) spent on ``from_``
+        since the previous report.
 
-        A ping with no known session starts a fresh visit, consuming the
+        A message 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
@@ -756,7 +838,7 @@ class Store:
         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
+        Messages from IPs classified as abuse, and messages 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.

pagerite/app.py

@@ -20,8 +20,9 @@ import os
 import re
 import shutil
 import socket
+import tempfile
 from collections.abc import AsyncIterator
-from contextlib import asynccontextmanager
+from contextlib import asynccontextmanager, suppress
 from datetime import UTC, datetime
 from email.utils import format_datetime
 from functools import lru_cache
@@ -30,11 +31,11 @@ from urllib.parse import urlparse
 from xml.sax.saxutils import escape as xml_escape
 
 import blake3
+import httpx
 import msgspec
 from fastapi import (
     FastAPI,
     HTTPException,
-    Query,
     Request,
     WebSocket,
     WebSocketDisconnect,
@@ -42,6 +43,7 @@ from fastapi import (
 from fastapi.responses import RedirectResponse, Response
 from fastapi_vue import Frontend
 from kanta import Kanta
+from mediapreview import dispatch
 from pydantic import BaseModel
 from zstandard import ZstdCompressor
 
@@ -56,16 +58,41 @@ from pagerite.data import (
     resolve,
     sorted_nodes,
 )
-from pagerite.markdown import has_h1, render, toggle_task
+from pagerite.markdown import render, toggle_task
 
-DB_PATH = os.getenv("PAGERITE_DB", "pagerite.kantadb")
+# Site identity: the hostname comes from the CLI (first positional argument,
+# exported as PAGERITE_HOSTNAME) and names the per-site data directory
+# ``<hostname>/{content.kantadb, analytics.json, files}`` under the cwd.
+HOSTNAME = os.getenv("PAGERITE_HOSTNAME", "localhost")
+SITE_DIR = Path(HOSTNAME)
+#: Public origin of the site, used for absolute social/canonical/sitemap
+#: URLs. Localhost serves varying ports, so it falls back to the request's
+#: own base URL instead.
+SITE_URL = f"https://{HOSTNAME}" if HOSTNAME != "localhost" else ""
+
+DB_PATH = os.getenv("PAGERITE_DB", str(SITE_DIR / "content.kantadb"))
 
 # Visit analytics go to their own JSON file, not the kanta database.
-ANALYTICS_PATH = Path(
+ANALYTICS_PATH = Path(os.getenv("PAGERITE_ANALYTICS", str(SITE_DIR / "analytics.json")))
-    os.getenv("PAGERITE_ANALYTICS", DB_PATH.replace(".kantadb", "") + ".analytics.json")
-)
 analytics_store = analytics.Store(ANALYTICS_PATH)
 
+# Content-addressed file store (uploads, seed assets, fetched favicons):
+# files on disk under hash-prefixed names, cached in RAM, served at /_f/.
+FILES_DIR = Path(os.getenv("PAGERITE_FILES", str(SITE_DIR / "files")))
+
+# Uploaded images are thumbnailed to this size and recompressed to AVIF
+# (primary), with WebP and JPEG fallbacks re-encoded from the AVIF at
+# somewhat lower quality (similar or smaller file size); the untouched
+# original is kept alongside as ``<hash>.orig<ext>`` (never served).
+IMAGE_MAXSIZE = 1920
+IMAGE_QUALITY = 60
+IMAGE_WEBP_QUALITY = 50
+IMAGE_JPG_QUALITY = 55
+
+# Favicons get the same derivatives but thumbnailed much smaller — 192px
+# is plenty (browsers scale down for the 16x16 tab icon themselves).
+FAVICON_MAXSIZE = 192
+
 # Live WebSocket clients for the analytics stream.
 _analytics_ws_clients: set[WebSocket] = set()
 _analytics_broadcast_task: asyncio.Task | None = None
@@ -160,7 +187,7 @@ _geoip = GeoIP()
 
 # Our own data root; kanta edits it in place, reads are plain attribute access.
 data = Data()
-kanta = Kanta(DB_PATH, data)
+kanta = Kanta(DB_PATH, data, migrations="pagerite.migrations")
 
 # Vue build served at the site root, no SPA catch-all (assets only). The
 # build mirrors the URL space: hashed, immutable files live under
@@ -169,16 +196,32 @@ BUILD_DIR = Path(__file__).with_name("frontend-build")
 frontend = Frontend(BUILD_DIR, spa=False, cached="/_assets/")
 
 
+def _ext(orig: str) -> str:
+    """Sanitized lowercase extension (with dot) of an original file name."""
+    return "".join(c for c in Path(orig).suffix.lower() if c.isalnum() or c == ".")
+
+
 def _hash_name(body: bytes, orig: str) -> str:
     """Content-addressed file name: blake3 hash prefix + original extension."""
-    ext = "".join(c for c in Path(orig).suffix.lower() if c.isalnum() or c == ".")
+    return blake3.blake3(body).hexdigest()[:12] + _ext(orig)
-    return blake3.blake3(body).hexdigest()[:12] + ext
 
 
 def _store_seed_file(markdown: str, banner: str, orig: str, body: bytes) -> tuple[str, str]:
-    """Store a seed file content-addressed and point references at /_f/."""
+    """Store a seed file content-addressed and point references at /_f/.
-    name = _hash_name(body, orig)
+
-    data.files.setdefault(name, body)
+    Images get the same AVIF/WebP/JPEG derivatives as uploads and are
+    linked extension-less; other content is stored as-is with its
+    extension."""
+    digest = blake3.blake3(body).hexdigest()[:12]
+    derivatives = None if _ext(orig) == ".gif" else _image_derivatives(body, _ext(orig))
+    if derivatives is None:
+        file_store.put(digest + _ext(orig), body)
+        name = digest + _ext(orig)
+    else:
+        file_store.put(f"{digest}.svg" if _ext(orig) == ".svg" else f"{digest}.orig{_ext(orig)}", body)
+        for fmt, variant in derivatives.items():
+            file_store.put(f"{digest}.{fmt}", variant)
+        name = digest
     markdown = markdown.replace(f"]({orig}", f"](/_f/{name}")
     banner = banner.replace(f'src="/{orig}"', f'src="/_f/{name}"')
     banner = banner.replace(f'src="{orig}"', f'src="/_f/{name}"')
@@ -218,24 +261,6 @@ def _remove_page_content(menu: dict[str, Node], path: str) -> None:
         del slot[0][slot[1]]
 
 
-def _migrate_legacy() -> None:
-    """Rebuild the legacy flat page store as a tree (one-time migration)."""
-    if not data.pages:
-        return
-    with kanta.transaction("migrate pages to tree"):
-        for path, page in data.pages.items():
-            node = _ensure(data.menu, path)
-            node.title = page.title
-            node.content = page.markdown
-            node.banner = page.banner
-            node.published = page.published
-            node.order = page.order
-            node.created = page.created
-            node.modified = page.modified
-        data.pages.clear()
-        data.version += 1
-
-
 @kanta.bootstrap
 def _seed(data: Data) -> None:
     """Write the demo pages on database creation (never on existing dbs)."""
@@ -257,14 +282,16 @@ def _seed(data: Data) -> None:
 
 @asynccontextmanager
 async def lifespan(_app: FastAPI) -> AsyncIterator[None]:
-    """Open the database, migrate legacy content, load assets, load GeoIP."""
+    """Open the database (migrations run inside kanta.open), load assets, load GeoIP."""
     await kanta.open()
-    _migrate_legacy()
+    await asyncio.to_thread(file_store.load)
     await frontend.load()
     # Decompress/open the DB-IP MMDB once at startup.  Lookups are then
     # read-only and safe to run in background ``to_thread`` workers.
     await asyncio.to_thread(_geoip._load)
     analytics_store.subscribe(_schedule_analytics_broadcast)
+    # Backfill favicons for external sites already in the recorded data.
+    _schedule_favicon_fetch()
     yield
     analytics_store.unsubscribe(_schedule_analytics_broadcast)
     await kanta.close()
@@ -295,23 +322,95 @@ async def _headers(request: Request, call_next) -> Response:
 _zstd = ZstdCompressor(9)
 
 
+class FileStore:
+    """Content-addressed files on disk, fully cached in RAM.
+
+    Every file is kept in RAM uncompressed and zstd-compressed (the
+    compressed copy only when it actually shrinks the body), so ``/_f``
+    serves both encodings without touching disk or re-compressing.
+    """
+
+    def __init__(self, path: Path) -> None:
+        self.path = path
+        #: name -> (uncompressed body, zstd body or None)
+        self._cache: dict[str, tuple[bytes, bytes | None]] = {}
+
+    @staticmethod
+    def _entry(body: bytes) -> tuple[bytes, bytes | None]:
+        compressed = _zstd.compress(body)
+        return body, compressed if len(compressed) < len(body) else None
+
+    def load(self) -> None:
+        """Read every stored file into the RAM cache (startup)."""
+        try:
+            entries = sorted(self.path.iterdir())
+        except FileNotFoundError:
+            return
+        for f in entries:
+            if f.is_file() and not f.name.startswith("."):
+                self._cache.setdefault(f.name, self._entry(f.read_bytes()))
+
+    def get(self, name: str) -> tuple[bytes, bytes | None] | None:
+        return self._cache.get(name)
+
+    def put(self, name: str, body: bytes) -> None:
+        """Store ``body`` under ``name`` on disk and in the RAM cache."""
+        if name in self._cache:
+            return
+        self.path.mkdir(parents=True, exist_ok=True)
+        (self.path / name).write_bytes(body)
+        self._cache[name] = self._entry(body)
+
+    def delete(self, name: str) -> None:
+        """Delete a file plus its derivatives/original counterparts, if any.
+
+        An image upload is stored as a group sharing the hash prefix
+        (``<hash>.orig.<ext>`` + ``<hash>.avif/.webp/.jpg``); deleting any
+        of the names removes them all.
+        """
+        stem = name.partition(".")[0]
+        for key in [k for k in self._cache if k.partition(".")[0] == stem]:
+            self._cache.pop(key, None)
+            with suppress(FileNotFoundError):
+                (self.path / key).unlink()
+
+    def __contains__(self, name: str) -> bool:
+        return name in self._cache
+
+
+file_store = FileStore(FILES_DIR)
+
+
 def _render_html(kind: str, path: str, base_url: str) -> str:
     """Render one of the generated pages (see _html_response)."""
     if kind == "page":
-        return views.render_page(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html, base_url)
+        return views.render_page(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html, base_url, transition=data.transition)
     if kind == "category":
-        return views.render_category(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html)
+        return views.render_category(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html, transition=data.transition)
     if kind == "not-found":
-        return views.render_not_found(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html)
+        return views.render_not_found(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html, transition=data.transition)
-    return views.render_analytics(data.menu, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html)
+    return views.render_analytics(data.menu, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html, transition=data.transition)
+
+
+# Render generation: bumped (and the body cache cleared) by every
+# content/settings write, so page ETags and cached copies invalidate when
+# navigation-affecting changes happen. In-memory only — not database state.
+_render_gen = 0
+
+
+def _invalidate_pages() -> None:
+    """Drop cached page bodies and bump the render generation (ETags)."""
+    global _render_gen
+    _render_gen += 1
+    _cached_body.cache_clear()
 
 
 @lru_cache(maxsize=128)
-def _cached_body(kind: str, path: str, base_url: str, version: int, zstd: bool) -> bytes:
+def _cached_body(kind: str, path: str, base_url: str, zstd: bool) -> bytes:
-    """Rendered page body. Every input the output depends on is in the key:
+    """Rendered page body; cleared by _invalidate_pages on any
-    data.version bumps on any content/settings change, base_url feeds the
+    content/settings change. base_url feeds the social meta URLs and zstd
-    social meta URLs, and zstd selects the stored encoding (both variants
+    selects the stored encoding (both variants are cached rather than
-    are cached rather than re-compressed).
+    re-compressed).
     """
     body = _render_html(kind, path, base_url).encode()
     return _zstd.compress(body) if zstd else body
@@ -341,15 +440,15 @@ def _html_response(
     if-none-match revalidations with a 304.
     """
     zstd = "zstd" in request.headers.get("accept-encoding", "")
-    # Absolute social/canonical URLs use the learned public origin; until
+    # Absolute social/canonical URLs use the site's public origin; on
-    # an admin visit teaches it, fall back to the request's own base URL.
+    # localhost (varying ports) fall back to the request's own base URL.
-    base_url = data.site_url or str(request.base_url).rstrip("/")
+    base_url = SITE_URL or str(request.base_url).rstrip("/")
     if DEVMODE:
         identity = _render_html(kind, path, base_url).encode()
         body = _zstd.compress(identity) if zstd else identity
     else:
-        identity = _cached_body(kind, path, base_url, data.version, False)
+        identity = _cached_body(kind, path, base_url, False)
-        body = _cached_body(kind, path, base_url, data.version, True) if zstd else identity
+        body = _cached_body(kind, path, base_url, True) if zstd else identity
     h = dict(headers or {})
     if zstd:
         h["vary"] = "accept-encoding"
@@ -417,7 +516,7 @@ async def save_page(path: str, page: PageIn) -> None:
         if page.banner is not None:
             node.banner = page.banner
         node.modified = datetime.now(UTC)
-        data.version += 1
+        _invalidate_pages()
 
 
 class StructureOp(BaseModel):
@@ -478,21 +577,25 @@ async def update_structure(op: StructureOp) -> None:
         elif op.order is not None:
             node.order = op.order
         node.modified = datetime.now(UTC)
-        data.version += 1
+        _invalidate_pages()
 
 
 @app.get("/_api/settings")
 async def get_settings() -> dict:
     """Site-wide settings (brand, theme, custom CSS and favicon URL), plus
-    the themes and banner designs available on disk for the selectors."""
+    the themes, banner designs and user fonts available on disk for the
+    selectors."""
     return {
         "brand": data.brand,
         "brand_html": data.brand_html,
         "theme": data.theme,
         "custom_css": data.custom_css,
         "favicon": f"/_f/{data.favicon}" if data.favicon else "",
-        "themes": views._theme_names(),
+        "themes": views._theme_info(),
         "banner_designs": views._banner_design_names(),
+        "fonts": views._user_fonts(),
+        "transition": data.transition,
+        "transitions": views._transition_names(),
     }
 
 
@@ -503,62 +606,49 @@ class SettingsIn(BaseModel):
     theme: str
     custom_css: str
     brand_html: str = ""
+    transition: str = "cube"
 
 
 @app.put("/_api/settings", status_code=204)
 async def put_settings(settings: SettingsIn) -> None:
-    """Update site-wide settings; bumps the version so ETags invalidate."""
+    """Update site-wide settings; invalidates cached pages and ETags."""
     with kanta.transaction("update settings"):
         data.brand = settings.brand
         data.brand_html = settings.brand_html
         data.theme = settings.theme
         data.custom_css = settings.custom_css
-        data.version += 1
+        data.transition = settings.transition
-
+        _invalidate_pages()
-
-class SiteUrlIn(BaseModel):
-    """Payload for learning the site's public origin."""
-
-    url: str
-
-
-@app.post("/_api/site-url", status_code=204)
-async def learn_site_url(payload: SiteUrlIn) -> None:
-    """Learn the site's public origin (scheme + host) from an admin browser.
-
-    pagerite.js reports location.origin once an admin session is detected:
-    unlike request Host headers it reflects the real public scheme and host
-    even behind reverse proxies, with zero manual configuration. Stored in
-    the database with a version bump so cached pages re-render with correct
-    absolute social/canonical URLs.
-    """
-    url = payload.url.rstrip("/")
-    parsed = urlparse(url)
-    if parsed.scheme not in ("http", "https") or not parsed.netloc or parsed.path:
-        raise HTTPException(400, "not an origin")
-    if url == data.site_url:
-        return
-    with kanta.transaction("learn site url"):
-        data.site_url = url
-        data.version += 1
 
 
 @app.put("/_api/settings/favicon")
 async def put_favicon(request: Request) -> dict[str, str]:
     """Upload a favicon into the content-addressed store and activate it.
 
-    Raw image body (ico/png/svg...); the stored name is a blake3 hash
+    Raw image body (ico/png/svg...). Decodable images are thumbnailed to
-    prefix + extension, and pages link it as <link rel="icon">. Returns
+    FAVICON_MAXSIZE (192px — browsers scale down from there themselves)
+    and stored as AVIF/WebP/JPEG derivatives linked extension-less; SVG
+    originals also stay servable under their ``.svg`` name. Undecodable
+    bodies are stored as-is. Pages link it as <link rel="icon">. Returns
     {"path": "/_f/..."}.
     """
     body = await request.body()
     if not body:
         raise HTTPException(400, "empty file")
-    stored = _hash_name(body, request.headers.get("x-filename", "favicon.ico"))
+    ext = _ext(request.headers.get("x-filename", "favicon.ico"))
+    digest = blake3.blake3(body).hexdigest()[:12]
+    derivatives = await asyncio.to_thread(_image_derivatives, body, ext, FAVICON_MAXSIZE)
+    if derivatives is None:  # undecodable (e.g. some .ico): store as-is
+        stored = digest + ext
+        file_store.put(stored, body)
+    else:
+        stored = digest
+        file_store.put(f"{digest}.svg" if ext == ".svg" else f"{digest}.orig{ext}", body)
+        for fmt, variant in derivatives.items():
+            file_store.put(f"{digest}.{fmt}", variant)
     with kanta.transaction("upload favicon"):
-        data.files[stored] = body
         data.favicon = stored
-        data.version += 1
+        _invalidate_pages()
     return {"path": f"/_f/{stored}"}
 
 
@@ -570,7 +660,7 @@ async def delete_favicon() -> None:
     """
     with kanta.transaction("clear favicon"):
         data.favicon = ""
-        data.version += 1
+        _invalidate_pages()
 
 
 class ToggleTaskIn(BaseModel):
@@ -607,65 +697,143 @@ async def toggle_task_endpoint(body: ToggleTaskIn) -> dict[str, str]:
     with kanta.transaction("toggle task", extra=path):
         node.content = new_markdown
         node.modified = datetime.now(UTC)
-        data.version += 1
+        _invalidate_pages()
     return {"markdown": new_markdown}
 
 
+def _to_avif(body: bytes, ext: str, maxsize: int = IMAGE_MAXSIZE) -> bytes | None:
+    """Recompress an image body to a thumbnailed AVIF via mediapreview's
+    dispatch (pyvips for common formats, ffmpeg for HEIC/HEIF/AVIF), or
+    None if the body is not a decodable image (stored as-is by the caller).
+    Dispatch needs a real file for format routing, so the body goes
+    through a temp file.
+    """
+    with tempfile.NamedTemporaryFile(suffix=ext) as tmp:
+        tmp.write(body)
+        tmp.flush()
+        try:
+            avif, _resp = dispatch(
+                Path(tmp.name),
+                quality=IMAGE_QUALITY,
+                maxsize=maxsize,
+                maxzoom=1,
+            )
+        except Exception:
+            return None
+        return avif
+
+
+def _svg_to_png(body: bytes, maxsize: int) -> bytes | None:
+    """Rasterize an SVG to PNG via pyvips, scaled so the long side is
+    ``maxsize`` — SVGs often carry no meaningful intrinsic resolution, so
+    we rasterize at full image size rather than the tiny nominal one."""
+    import pyvips
+
+    try:
+        img = pyvips.Image.new_from_buffer(body, "")
+        scale = maxsize / max(img.width, img.height) if img.width and img.height else maxsize
+        if scale != 1:
+            img = pyvips.Image.new_from_buffer(body, "", scale=scale)
+        return img.write_to_buffer(".png")
+    except pyvips.Error:
+        return None
+
+
+def _avif_to_format(avif: bytes, suffix: str, quality: int) -> bytes:
+    """Re-encode the AVIF derivative into a fallback format (WebP/JPEG)
+    via pyvips. JPEG has no alpha, so it is flattened onto white;
+    ``strip`` keeps metadata (EXIF) out of the fallbacks."""
+    import pyvips
+
+    img = pyvips.Image.new_from_buffer(avif, "")
+    if suffix == ".jpg" and img.hasalpha():
+        img = img.flatten(background=[255, 255, 255])
+    return img.write_to_buffer(suffix, Q=quality, strip=True)
+
+
+def _image_derivatives(body: bytes, ext: str, maxsize: int = IMAGE_MAXSIZE) -> dict[str, bytes] | None:
+    """The served variants of an uploaded image: ``avif`` (primary,
+    thumbnailed to ``maxsize``) plus ``webp`` and ``jpg`` fallbacks
+    re-encoded from it. SVGs are rasterized first (they are vector, so
+    the raster replaces nothing — the .svg itself stays servable).
+    Returns None for non-decodable content (stored as-is by the caller).
+    """
+    if ext == ".svg":
+        png = _svg_to_png(body, maxsize)
+        if png is None:
+            return None
+        body, ext = png, ".png"
+    avif = _to_avif(body, ext, maxsize)
+    if avif is None:
+        return None
+    return {
+        "avif": avif,
+        "webp": _avif_to_format(avif, ".webp", IMAGE_WEBP_QUALITY),
+        "jpg": _avif_to_format(avif, ".jpg", IMAGE_JPG_QUALITY),
+    }
+
+
 @app.put("/_api/files/{name}")
 async def upload_file(name: str, request: Request) -> dict[str, str]:
     """Store an upload (image, video...) in the content-addressed store.
 
     The stored name is a blake3 hash prefix + the original extension,
     served immutable at "/_f/{name}"; returns {"path": "/_f/..."}.
+
+    Raster images and SVGs are recompressed (SVGs rasterized) into AVIF
+    (primary) plus WebP and JPEG fallbacks: the original goes to
+    ``<hash>.orig<ext>`` (kept for reprocessing, never served — it may
+    carry EXIF data; SVG originals stay servable as ``<hash>.svg`` since
+    vector carries no EXIF) and pages link the bare ``/_f/<hash>``, the
+    server picking the format from the request's Accept header. GIFs are
+    stored as-is (animation would be lost), as is other non-decodable
+    content.
     """
     if "/" in name or name in {".", ".."}:
         raise HTTPException(400, "bad file name")
     body = await request.body()
-    stored = _hash_name(body, name)
+    if not body:
-    with kanta.transaction("upload file", extra=name):
+        raise HTTPException(400, "empty file")
-        data.files[stored] = body
+    ext = _ext(name)
-        data.version += 1
+    digest = blake3.blake3(body).hexdigest()[:12]
-    return {"path": f"/_f/{stored}"}
+    derivatives = (
+        None
+        if ext == ".gif"
+        else await asyncio.to_thread(_image_derivatives, body, ext)
+    )
+    if derivatives is None:  # not a decodable image: store the body as-is
+        stored = digest + ext
+        file_store.put(stored, body)
+        return {"path": f"/_f/{stored}"}
+    file_store.put(f"{digest}.svg" if ext == ".svg" else f"{digest}.orig{ext}", body)
+    for fmt, variant in derivatives.items():
+        file_store.put(f"{digest}.{fmt}", variant)
+    return {"path": f"/_f/{digest}"}
 
 
 @app.delete("/_api/files/{name}", status_code=204)
 async def delete_file(name: str) -> None:
     """Remove a file from the content-addressed store (no refcounting:
     other pages referencing the same content will 404)."""
-    if name not in data.files:
+    if name not in file_store:
         raise HTTPException(404, "no such file")
-    with kanta.transaction("delete file", extra=name):
+    file_store.delete(name)
-        del data.files[name]
-        data.version += 1
 
 
-@app.get("/_themes/{name}/{filename}")
+async def _serve_user_file(path: Path | None, request: Request) -> Response:
-async def theme_file(name: str, filename: str, request: Request) -> Response:
+    """Serve a user-asset file resolved on disk, with mtime etag.
-    """Serve a theme/banner-design file from pagerite/themes/{name}/.
 
-    Stylesheets plus any extra assets the CSS references (like summer's
+    Read from disk on every request (etag by mtime+size): user assets are
-    grass.svg). Read from disk on every request (etag by mtime+size):
+    never built or content-hashed, so edits on disk show on the next page
-    theme files are never built or content-hashed, so edits on disk show
+    load, in prod as well as dev.
-    on the next page load, in prod as well as dev.
     """
-    if (
+    if path is None:
-        "/" in filename
-        or filename.startswith(".")
-        or "/" in name
-        or name.startswith(".")
-    ):
-        raise HTTPException(404)
-    path = views.THEMES / name / filename
-    try:
-        stat = path.stat()
-    except FileNotFoundError:
-        raise HTTPException(404) from None
-    if not path.is_file():
         raise HTTPException(404)
+    stat = path.stat()
     etag = f'"{stat.st_mtime_ns:x}-{stat.st_size:x}"'
     if request.headers.get("if-none-match") == etag:
         return Response(status_code=304)
-    mime = mimetypes.guess_type(filename)[0] or "application/octet-stream"
+    mime = mimetypes.guess_type(path.name)[0] or "application/octet-stream"
     return Response(
         path.read_bytes(),
         media_type=mime,
@@ -673,21 +841,73 @@ async def theme_file(name: str, filename: str, request: Request) -> Response:
     )
 
 
+@app.get("/_themes/{name}/{filename}")
+async def theme_file(name: str, filename: str, request: Request) -> Response:
+    """Serve a theme/banner-design file, resolved across views.THEME_DIRS.
+
+    Stylesheets plus any extra assets the CSS references (like summer's
+    grass.svg).
+    """
+    return await _serve_user_file(views.theme_file(name, filename), request)
+
+
+@app.get("/_fonts/{name}/{filename}")
+async def user_font_file(name: str, filename: str, request: Request) -> Response:
+    """Serve a user font file, resolved across views.FONT_DIRS.
+
+    The folder's font.css (@font-face rules + --font-{name} stack variable)
+    is linked on every page; the woff2 files it references come from here.
+    """
+    return await _serve_user_file(views.font_file(name, filename), request)
+
+
 @app.get("/_f/{name}")
 async def stored_file(name: str, request: Request) -> Response:
     """Serve a file from the content-addressed store (immutable: the name
-    is its own hash, so cache forever)."""
+    is its own hash, so cache forever).  Bodies are served from the RAM
-    body = data.files.get(name)
+    cache, zstd-compressed when the client accepts it and compression
-    if body is None:
+    actually shrank the file.
+
+    A bare ``/_f/{hash}`` (no extension, how pages link uploaded images)
+    content-negotiates between the stored derivatives: a format is served
+    only when the Accept header lists it explicitly — ``image/avif`` →
+    AVIF, ``image/webp`` → WebP, anything else (including ``image/*`` and
+    ``*/*``) → JPEG. An explicit extension pins the format. ``.orig.``
+    originals are internal (they may carry EXIF data) and never served."""
+    if ".orig." in name:
         raise HTTPException(404)
-    if request.headers.get("if-none-match") == name:
+    etag = name
+    vary = ""
+    entry = file_store.get(name)
+    if entry is None and "." not in name:
+        # Extension-less image link: negotiate avif/webp/jpg by Accept.
+        vary = "accept"
+        accept = request.headers.get("accept", "")
+        if "image/avif" in accept:
+            order = ("avif", "webp", "jpg")
+        elif "image/webp" in accept:
+            order = ("webp", "jpg", "avif")
+        else:
+            order = ("jpg", "webp", "avif")
+        for ext in order:
+            etag = f"{name}.{ext}"
+            entry = file_store.get(etag)
+            if entry is not None:
+                break
+    if entry is None:
+        raise HTTPException(404)
+    if request.headers.get("if-none-match") == etag:
         return Response(status_code=304)
-    mime = mimetypes.guess_type(name)[0] or "application/octet-stream"
+    body, compressed = entry
-    return Response(
+    headers = {"etag": etag, "cache-control": "public, max-age=31536000, immutable"}
-        body,
+    if compressed is not None and "zstd" in request.headers.get("accept-encoding", ""):
-        media_type=mime,
+        headers["content-encoding"] = "zstd"
-        headers={"etag": name, "cache-control": "public, max-age=31536000, immutable"},
+        vary = f"{vary}, accept-encoding".lstrip(", ")
-    )
+        body = compressed
+    if vary:
+        headers["vary"] = vary
+    mime = mimetypes.guess_type(etag)[0] or "application/octet-stream"
+    return Response(body, media_type=mime, headers=headers)
 
 
 @app.delete("/_api/pages/{path:path}", status_code=204)
@@ -709,13 +929,13 @@ async def delete_page(path: str) -> None:
             node.modified = datetime.now(UTC)
         else:
             del slot[0][slot[1]]
-        data.version += 1
+        _invalidate_pages()
 
 
 _SLUG_RE = re.compile(r"^[a-z0-9][a-z0-9_-]*$")
 
 
-def _client_ip(request: Request) -> str:
+def _client_ip(request: Request | WebSocket) -> str:
     """Client IP: first X-Forwarded-For hop (we sit behind a proxy), else
     the direct peer."""
     forwarded = request.headers.get("x-forwarded-for", "").split(",")[0].strip()
@@ -778,6 +998,68 @@ def _schedule_client_enrichment(client_hashes: list[bytes]) -> None:
         asyncio.create_task(_enrich_client(client_hash))
 
 
+#: Icon MIME -> file extension for the stored favicon name.  The extension
+#: reflects the actual content, not the /favicon.ico request path.
+_FAVICON_EXT = {
+    "image/x-icon": ".ico",
+    "image/vnd.microsoft.icon": ".ico",
+    "image/png": ".png",
+    "image/gif": ".gif",
+    "image/jpeg": ".jpg",
+    "image/webp": ".webp",
+    "image/avif": ".avif",
+    "image/svg+xml": ".svg",
+}
+
+_FAVICON_MAX_BYTES = 65536
+
+#: Origins with a fetch task currently in flight.
+_favicon_in_flight: set[str] = set()
+
+
+async def _fetch_favicon(origin: str) -> None:
+    """Fetch ``{origin}/favicon.ico`` and store it content-hashed on disk.
+
+    The result (icon file name, or "" for a miss) is recorded in the
+    analytics store; misses are retried after analytics._FAVICON_RETRY.
+    Never raises: analytics must not break page serving.
+    """
+    try:
+        async with httpx.AsyncClient(follow_redirects=True, timeout=8) as client:
+            r = await client.get(f"{origin}/favicon.ico")
+        body = r.content
+        if not (200 <= r.status_code < 300) or not body or len(body) > _FAVICON_MAX_BYTES:
+            analytics_store.record_favicon(origin)
+            return
+        mime = r.headers.get("content-type", "").split(";")[0].strip().lower()
+        if not mime.startswith("image/"):
+            # Served without an image type: sniff SVG, else assume ICO.
+            if b"<svg" in body[:1024]:
+                mime = "image/svg+xml"
+            elif mime in ("", "application/octet-stream", "text/plain"):
+                mime = "image/x-icon"
+            else:
+                analytics_store.record_favicon(origin)
+                return
+        ext = _FAVICON_EXT.get(mime, ".ico")
+        name = _hash_name(body, f"favicon{ext}")
+        file_store.put(name, body)
+        analytics_store.record_favicon(origin, name)
+    except (httpx.HTTPError, OSError):
+        analytics_store.record_favicon(origin)
+    finally:
+        _favicon_in_flight.discard(origin)
+
+
+def _schedule_favicon_fetch() -> None:
+    """Start background favicon fetches for origins that need one."""
+    for origin in analytics_store.favicon_origins_needed():
+        if origin in _favicon_in_flight:
+            continue
+        _favicon_in_flight.add(origin)
+        asyncio.create_task(_fetch_favicon(origin))
+
+
 async def _broadcast_analytics() -> None:
     """Send the current analytics snapshot to every connected WS client."""
     if not _analytics_ws_clients:
@@ -826,47 +1108,54 @@ async def analytics_page(request: Request) -> Response:
     )
 
 
-@app.post("/_a", status_code=204)
+@app.websocket("/_ws")
-async def analytics_ping(
+async def activity_ws(ws: WebSocket) -> None:
-    request: Request,
+    """Collect visitor activity: navigations and reading-time updates.
-    fr: str = Query(""),
-    to: str | None = Query(None),
-    hide: int = Query(0),
-    read: int = Query(0),
-) -> None:
-    """Record a navigation ping (?fr=&to=&hide=&read=); fire-and-forget.
 
-    The initial page-load ping carries only ``to``: the entry is attributed
+    Public, like the pages themselves (only /_api is gated); one connection
-    to the referer/UTM tags stashed by the document GET (see _track_entry),
+    follows a browsing session.  Messages are ``analytics.Ping`` structs as
-    which JS cannot see once the page has loaded.
+    JSON text frames; ``to`` set is a navigation, ``read`` alone a
-
+    reading-time update.  The reverse-DNS and DB-IP geoip lookups happen in
-    The reverse-DNS and DB-IP geoip lookups happen in a background task so
+    background tasks so message handling is never delayed by slow DNS or
-    the response is never delayed by slow DNS or the first MMDB decompress.
+    the first MMDB decompress.
     """
-    ip = _client_ip(request)
+    await ws.accept()
-    visit_index, flushed_clients = analytics_store.ping(
+    ip = _client_ip(ws)
-        fr,
+    ua = ws.headers.get("user-agent", "")
-        to,
+    accept_language = ws.headers.get("accept-language", "")
-        ip,
+    try:
-        request.headers.get("user-agent", ""),
+        while True:
-        request.headers.get("accept-language", ""),
+            text = await ws.receive_text()
-        hide=bool(hide),
+            try:
-        read=read,
+                msg = msgspec.json.decode(text.encode(), type=analytics.Ping)
-    )
+            except msgspec.DecodeError:
-    if visit_index is not None:
+                continue
-        visit = analytics_store.data.visits[visit_index]
+            visit_index, flushed_clients = analytics_store.ping(
-        asyncio.create_task(_enrich_client(visit.client))
+                msg.fr,
-    _schedule_client_enrichment(flushed_clients)
+                msg.to or None,
+                ip,
+                ua,
+                accept_language,
+                hide=msg.hide,
+                read=msg.read,
+            )
+            if visit_index is not None:
+                visit = analytics_store.data.visits[visit_index]
+                asyncio.create_task(_enrich_client(visit.client))
+            _schedule_client_enrichment(flushed_clients)
+            _schedule_favicon_fetch()
+    except WebSocketDisconnect:
+        pass
 
 
 def _track_entry(path: str, request: Request, *, status: int = 200) -> list[bytes]:
     """Stash the referer/UTM tags and queue a pending crawler hit for the GET.
 
-    Nothing is counted on the GET itself — the client's /_a ping starts the
+    Nothing is counted on the GET itself — the client's first /_ws message
-    visit, so bots never register as visits (JS-running crawlers ping too,
+    starts the visit, so bots never register as visits (JS-running crawlers
-    but the ping handler ignores known bot UAs).  (Admin clients ping too,
+    connect too, but the WebSocket handler ignores known bot UAs).  (Admin
-    but with hide=1, which flags their visit hidden: it is recorded but
+    clients report too, but with hide, which flags their visit hidden: it is
-    excluded from all statistics and from the crawler list.)
+    recorded but excluded from all statistics and from the crawler list.)
 
     The devserver's health probe (``GET /?from=devserver.py`` from
     ``127.0.0.1``) is ignored: it is not real traffic and would otherwise be
@@ -878,7 +1167,8 @@ def _track_entry(path: str, request: Request, *, status: int = 200) -> list[byte
     """
     if request.headers.get("x-pagerite-preload"):
         # Idle-time page-cache warm-up by pagerite.js, not a page view: the
-        # ping sent when the user actually navigates does the counting.
+        # activity message sent when the user actually navigates does the
+        # counting.
         # (Forging the header only hides a GET from the crawler stats; the
         # path-based abuse classification is unaffected.)
         return []
@@ -888,7 +1178,7 @@ def _track_entry(path: str, request: Request, *, status: int = 200) -> list[byte
         and _client_ip(request) == "127.0.0.1"
     ):
         return []
-    own_origin = f"https://{urlparse(str(request.base_url)).netloc}"
+    own_origin = SITE_URL or f"https://{urlparse(str(request.base_url)).netloc}"
     full_path = f"{request.url.path}{_query_suffix(request)}"
     return analytics_store.track_entry(
         request.headers.get("referer", ""),
@@ -1020,16 +1310,18 @@ async def editor_ws(ws: WebSocket) -> None:
                         path,
                         node.created if node else None,
                         node.modified if node else None,
+                        # The title is injected as h1 when the markdown has
+                        # none; the editor's title field edits live-preview.
+                        title=msg.get("title") or (node.title if node else ""),
                     )
                     await ws.send_json({
                         "type": "html",
                         "path": path,
                         "html": rendered.html,
-                        # Column-layout flags: the preview toggles the
+                        # Column-layout flag: the preview toggles the
                         # article's .multicol class and swaps in the
-                        # segmented (.colseg/.cols) body html.
+                        # segmented (.colseg/.cols) article html.
                         "multicol": rendered.multicol,
-                        "has_h1": has_h1(markdown),
                     })
                 case "save":
                     move_from = (msg.get("move_from") or path).strip("/")
@@ -1097,7 +1389,7 @@ async def editor_ws(ws: WebSocket) -> None:
                         if "banner_design" in msg:
                             node.banner_design = msg["banner_design"]
                         node.modified = datetime.now(UTC)
-                        data.version += 1
+                        _invalidate_pages()
                     await ws.send_json({"type": "saved", "path": path})
     except WebSocketDisconnect:
         pass
@@ -1112,7 +1404,7 @@ async def front_page(request: Request) -> Response:
 @app.get("/sitemap.xml")
 async def sitemap(request: Request) -> Response:
     """Dynamically generate a sitemap of all published article pages."""
-    base = str(request.base_url).rstrip("/")
+    base = SITE_URL or str(request.base_url).rstrip("/")
     entries: list[tuple[str, datetime, int]] = []
 
     def walk(
@@ -1174,9 +1466,11 @@ async def sitemap(request: Request) -> Response:
 
 @app.get("/robots.txt")
 async def robots_txt(request: Request) -> Response:
-    """Allow all crawling and point crawlers at the sitemap."""
+    """Allow content crawling, keep the SSO login (/auth/) and the
-    base = str(request.base_url).rstrip("/")
+    admin-gated API (/_api) out of search results, and point crawlers at
-    body = f"User-agent: *\nAllow: /\nSitemap: {base}/sitemap.xml\n"
+    the sitemap."""
+    base = SITE_URL or str(request.base_url).rstrip("/")
+    body = f"User-agent: *\nAllow: /\nDisallow: /auth/\nDisallow: /_api\nSitemap: {base}/sitemap.xml\n"
     return Response(
         body,
         media_type="text/plain",
@@ -1221,7 +1515,7 @@ async def show_page(request: Request, path: str) -> Response:
         # from pagerite.js's in-memory page cache (preload everything, never
         # fetch on navigation); the ETag just makes those one-time preload
         # fetches and any revalidation cheap.
-        etag = f'"{path}@{node.modified.timestamp()}v{data.version}"'
+        etag = f'"{path}@{node.modified.timestamp()}g{_render_gen}"'
         if request.headers.get("if-none-match") == etag:
             return Response(status_code=304)
         if _is_trackable_path(path):

pagerite/data.py

@@ -50,38 +50,11 @@ class Node(msgspec.Struct, omit_defaults=True):
     )
 
 
-class Page(msgspec.Struct, omit_defaults=True):
-    """Legacy flat page record, from before the tree model.
-
-    Kept only so old databases still decode; app.py migrates any entries
-    into ``Data.menu`` on startup and clears this.
-    """
-
-    title: str
-    markdown: str
-    published: bool = True
-    order: float = 0
-    banner: str = ""
-    created: datetime = msgspec.field(
-        default_factory=lambda: datetime.now(UTC),
-    )
-    modified: datetime = msgspec.field(
-        default_factory=lambda: datetime.now(UTC),
-    )
-
-
 class Data(msgspec.Struct):
     """Root object of the kanta database. Owned and edited in place by us."""
 
     #: 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
     #: Site name shown in the header and <title> suffix; editable in the
     #: site editor. Empty = no brand link in the header, no title suffix.
     brand: str = "Pagerite"
@@ -93,22 +66,18 @@ class Data(msgspec.Struct):
     #: Active theme name (empty = none/base only). Themes live in
     #: pagerite/themes/{theme}/ (theme.css and/or banner.css/banner.svg/
     #: banner.html), served by the backend from disk.
-    theme: str = "purple"
+    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
+    #: Favicon: content-addressed file name (served at "/_f/{name}"),
-    #: <link rel="icon"> on every page. Empty = the build's /favicon.ico.
+    #: linked as <link rel="icon"> on every page. Empty = the build's
+    #: /favicon.ico.
     favicon: str = ""
-    #: Public origin (scheme + host) of the site, learned from admin
-    #: browsers (POST /_api/site-url — location.origin is correct even
-    #: behind reverse proxies, unlike request Host headers). Used for
-    #: absolute social/canonical URLs; empty = fall back to the request's
-    #: own base URL.
-    site_url: str = ""
-    #: Legacy flat page store (pre-tree databases); migrated into `menu`
-    #: on startup, then cleared. Never written otherwise.
-    pages: dict[str, Page] = {}
 
 
 def prettify(slug: str) -> str:

pagerite/markdown.py

@@ -10,7 +10,8 @@ note/tip/warning/etc., the title optional) and GitHub-style alerts
 same callout styling). ``::: name`` opens a generic container rendered
 as ``<div class="name">`` and closed by a matching ``:::`` (nest by
 giving the outer container more colons, e.g. `::::`); the name may be
-followed by brace attributes (``::: aside {.right}``). ``::: aside``
+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
@@ -24,15 +25,23 @@ 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
+segmented for the column layout — h1/h2 headings and ``.wide`` blocks
-margin-breakout blocks (``.margin``, ``::: aside``) stand on their own,
+stand on their own, the runs between them are wrapped in
-the runs between them are wrapped in ``<div class="colseg">`` (tagged
+``<div class="colseg">`` (tagged
-``.cols`` when the segment holds enough text, unless a ``::: nocols``
+``.cols`` when the segment holds enough text — COLS_TEXT — in at least
-container opts it out). The result carries ``multicol`` when the whole
+COLS_PARAS paragraphs or one paragraph long enough to turn .breakable,
-body justifies columns (views.py puts the class on the article); how
+unless a ``::: nocols`` container opts it out;
-many columns (never more than two), whether the margin breakout applies
+in column segments, paragraphs past BREAKABLE_TEXT are marked
-and every other viewport adaptation is then pagerite.css's call. The
+``.breakable`` so they may split across columns). Margin-breakout boxes
-thresholds measure visible text, code blocks excluded.
+(``.margin``, ``::: aside``) stay inside the segment at their anchor
+point; pagerite.css takes them out of flow (absolute, off the article's
+left border, into the side zone), so the columns flow through as if the
+box wasn't there. 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
@@ -56,6 +65,7 @@ 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
@@ -70,6 +80,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"))
@@ -101,20 +112,34 @@ def _fence_rule(
 ) -> str:
     """Render a fenced code block.
 
-    Like the default fence rule, but block attributes (a trailing `{...}`
+    Like the default fence rule, but block attributes go on the <pre> —
-    line, applied to the fence token by _block_attrs) go on the <pre> — the
+    the block element — instead of the <code>, which keeps only the
-    block element — instead of the <code>, which keeps only the language
+    language class. Attributes are accepted both pandoc-style on the
-    class. This is what makes e.g. `{.wide}` or `{style="..."}` after a
+    info line (```{.python .wide #id key=val} — the first class is the
-    code fence style the block itself.
+    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 = info.split(maxsplit=1)[0] if info else ""
+    lang, _, brace = info.partition("{")
-    highlighted = (_highlight(token.content, lang, "")
+    lang = lang.split(maxsplit=1)[0] if lang.strip() else ""
-                   or escapeHtml(token.content))
+    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}>"
+    return (
-            f"{highlighted}</code></pre>\n")
+        f"<pre{self.renderAttrs(token)}><code{code_class}>{highlighted}</code></pre>\n"
+    )
 
 
 def _image_rule(
@@ -155,10 +180,18 @@ def _unwrap_lone_figures(state) -> None:
     for i, token in enumerate(tokens):
         if token.type != "inline" or not token.children:
             continue
-        [child] = token.children if len(token.children) == 1 else [None]
+        # Attrs consumed out of the text (e.g. {style=...} space-separated
+        # on the image's own line) leave empty text tokens behind — strip
+        # them so the lone-image check is not thrown off by user styling.
+        children = [c for c in token.children if c.type != "text" or c.content]
+        if children:
+            token.children = children
+        [child] = children if len(children) == 1 else [None]
         if child and child.type == "image":
-            if (tokens[i - 1].type == "paragraph_open"
+            if (
-                    and tokens[i + 1].type == "paragraph_close"):
+                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.
@@ -218,13 +251,19 @@ def _apply_attrs(token, attrs: dict) -> None:
 
 
 def _container_validate(params: str, _markup: str) -> bool:
-    """`::: name`, optionally followed by brace attrs (`::: aside {.right}`)."""
+    """`::: 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 not _CONTAINER_NAME_RE.fullmatch(name):
+    if name.startswith("{"):
+        name, rest = "", params.strip()
+    elif not _CONTAINER_NAME_RE.fullmatch(name):
         return False
     rest = rest.strip()
     if not rest:
-        return True
+        return bool(name)  # a nameless container needs the attrs
     try:
         pos, _ = parse_attrs(rest)
     except ParseError:
@@ -239,14 +278,18 @@ def _container_attrs(state) -> None:
     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
+    render() see the classes (the ::: nocols opt-out, {.wide}
-    opt-out, {.wide} containers).
+    containers).
     """
     for token in state.tokens:
         if token.type != "container_block_open":
             continue
-        name, _, rest = token.info.strip().partition(" ")
+        info = token.info.strip()
-        token.attrJoin("class", name)
+        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)
@@ -256,9 +299,11 @@ 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,
+    code span or link; this extends the same brace syntax to whole blocks.
-    e.g. a paragraph ending with a `{.wide}` line (no blank line between)
+    A paragraph takes them at the end of its last line, either directly
-    gets the `wide` class and thereby breaks out of the column layout.
+    (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
@@ -269,15 +314,20 @@ def _block_attrs(state) -> None:
         if token.type != "inline" or not token.children:
             continue
         text = token.children[-1]
-        if (text.type != "text" or not text.content.startswith("{")
+        if text.type != "text":
-                or not text.content.endswith("}")):
             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(text.content.strip())
+            _, attrs = parse_attrs(m.group(1))
         except ParseError:
             continue
         standalone = len(token.children) == 1
-        if not standalone and token.children[-2].type != "softbreak":
+        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 —
@@ -292,9 +342,14 @@ def _block_attrs(state) -> None:
             if target.hidden:
                 pass
             elif standalone:
-                if (j != own and target.level == tokens[own].level
+                if (
-                        and (target.nesting == 1
+                    j != own
-                             or target.type in ("fence", "code_block", "hr"))):
+                    and target.level == tokens[own].level
+                    and (
+                        target.nesting == 1
+                        or target.type in ("fence", "code_block", "hr")
+                    )
+                ):
                     break
             elif target.nesting == 1:
                 break
@@ -306,8 +361,90 @@ def _block_attrs(state) -> None:
             tokens[own].hidden = True
             token.children = []
             tokens[i + 1].hidden = True
-        else:
+        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 = (
@@ -325,7 +462,9 @@ md = (
     .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)
@@ -340,23 +479,36 @@ 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.
+# 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
+# full-width separator that splits the column segments. Margin-breakout
-# article's left (they must be direct .body children for that — the zone
+# boxes (.margin/.aside) are NOT boundaries: they stay inside the segment
-# rules key off it — never inside a column).
+# at their anchor point, and CSS positions them absolutely out of the
+# article's left border (the zone rules anchor off the article), so the
+# column flow is unaffected.
 _WIDE = "wide"
-_BREAKOUT = ("margin", "aside")
 
 
 class Rendered(NamedTuple):
@@ -376,6 +528,28 @@ def _text_len(html: str) -> int:
     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.
 
@@ -394,14 +568,10 @@ def _top_level_blocks(tokens: list) -> list[list]:
 
 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 comment above): h1/h2 headings and anything carrying .wide."""
-    .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
@@ -409,9 +579,7 @@ def _is_boundary(block: list) -> bool:
             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":
+    return False
-                own |= _classes(children[0])
-    return bool(own & set(_BREAKOUT))
 
 
 def render(
@@ -419,23 +587,35 @@ def render(
     page_path: str = "",
     created: datetime | None = None,
     modified: datetime | None = None,
+    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
+    (h1/h2 headings, .wide — see _is_boundary) are rendered bare, the runs
-    rendered bare, the runs between them wrapped in <div class="colseg">.
+    between them wrapped in <div class="colseg">.
-    A segment is tagged .cols when it holds enough text (COLS_TEXT) and no
+    A segment is tagged .cols when it holds enough text (COLS_TEXT) in at
-    ::: nocols container; the article is .multicol when the whole body
+    least two paragraphs (COLS_PARAS) or one breakable-length paragraph,
-    exceeds MULTICOL_TEXT. pagerite.css keys all column and margin-breakout
+    and no ::: nocols container; its long paragraphs are marked .breakable;
-    layout off these classes.
+    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.
     """
-    env = {"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.
@@ -460,11 +640,18 @@ def render(
             parts.append(html)
             continue
         nocols = any(
-            "nocols" in _classes(t)
+            "nocols" in _classes(t) for t in group if t.type == "container_block_open"
-            for t in group
-            if t.type == "container_block_open"
         )
-        cols = " cols" if text_len > COLS_TEXT and not nocols else ""
+        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:
@@ -474,10 +661,10 @@ def render(
 
 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>'
 
@@ -485,9 +672,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
+    When it does, the article owns its heading and render(title=...) does
-    rendered as an additional h1 (the title is still used for the document
+    not inject the page title as an h1 (the title is still used for the
-    <title> and navigation labels).
+    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,133 @@
+"""Kanta schema migrations, discovered by name (``migrate_vN``).
+
+Each function receives the raw state dict (JSON-level: bytes are base64
+strings, datetimes RFC 3339 strings, struct fields with default values
+omitted) before it is decoded into ``Data`` structs, and runs exactly once
+per database based on its recorded version.
+
+All storage/schema upgrades live here — including on-disk file work, which
+runs through app.py's file store (imported lazily: app.py owns the store
+and passes this module to Kanta; at migration time, during lifespan
+``kanta.open()``, the app module is fully loaded).
+"""
+
+import base64
+import re
+from pathlib import Path
+
+from pagerite.data import prettify
+
+
+def _append_order(nodes: dict) -> float:
+    """Raw-dict equivalent of data.append_order (order keys may be absent)."""
+    return max((n.get("order", 0) for n in nodes.values()), default=0) + 1
+
+
+def _ensure(menu: dict, path: str) -> dict:
+    """Raw-dict equivalent of app._ensure: the node dict at ``path``,
+    creating it and any missing ancestors (content-less category labels)
+    appended at the end of their level."""
+    nodes = menu
+    node = None
+    for seg in path.split("/"):
+        node = nodes.get(seg)
+        if node is None:
+            node = {"title": prettify(seg), "order": _append_order(nodes)}
+            nodes[seg] = node
+        nodes = node.setdefault("children", {})
+    return node
+
+
+def migrate_v1(d: dict) -> None:
+    """Move in-database file blobs to the on-disk content-addressed store,
+    and rebuild the legacy flat page store (``pages``) as the menu tree."""
+    files = d.pop("files", None)
+    if files:
+        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)
+    pages = d.pop("pages", None)
+    if not pages:
+        return
+    menu = d.setdefault("menu", {})
+    for path, page in pages.items():
+        node = _ensure(menu, path)
+        node["title"] = page["title"]
+        node["content"] = page["markdown"]
+        for key in ("banner", "published", "order", "created", "modified"):
+            if key in page:
+                node[key] = page[key]
+
+
+#: Extension-less file links: uploaded images are linked as /_f/<hash>
+#: and the server negotiates avif/webp/jpg from the Accept header.
+_DERIVATIVE_LINK = re.compile(r"(/_f/[0-9a-f]{12})\.(?:avif|webp)\b")
+
+
+def _backfill_derivatives() -> None:
+    """Create missing AVIF/WebP/JPEG derivatives for files stored before
+    they were introduced (older uploads may have only the original plus
+    AVIF, and SVGs no raster variants at all).  WebP/JPEG are re-encoded
+    from an existing AVIF when available, everything else from the
+    original (SVGs rasterized first)."""
+    from pagerite import app
+
+    file_store = app.file_store
+    try:
+        paths = [f for f in file_store.path.iterdir() if f.is_file()]
+    except FileNotFoundError:
+        return
+    groups: dict[str, list[Path]] = {}
+    for p in paths:
+        groups.setdefault(p.name.partition(".")[0], []).append(p)
+    for digest, files in groups.items():
+        names = {p.name for p in files}
+        source = next(
+            (p for p in files if ".orig." in p.name or p.suffix == ".svg"), None
+        )
+        if source is None:
+            continue  # plain as-is file, no derivatives to make
+        avif = file_store.get(f"{digest}.avif")
+        if avif is None:
+            ext = source.suffix
+            body = source.read_bytes()
+            if ext == ".svg":
+                png = app._svg_to_png(body, app.IMAGE_MAXSIZE)
+                if png is None:
+                    continue
+                body, ext = png, ".png"
+            converted = app._to_avif(body, ext)
+            if converted is None:
+                continue
+            file_store.put(f"{digest}.avif", converted)
+            avif = file_store.get(f"{digest}.avif")
+        for fmt, quality in (
+            ("webp", app.IMAGE_WEBP_QUALITY),
+            ("jpg", app.IMAGE_JPG_QUALITY),
+        ):
+            if f"{digest}.{fmt}" not in names:
+                file_store.put(
+                    f"{digest}.{fmt}", app._avif_to_format(avif[0], f".{fmt}", quality)
+                )
+
+
+def migrate_v2(d: dict) -> None:
+    """Extension-less image links: strip .avif/.webp extensions from /_f/
+    links in page content and banners (the server now negotiates the format
+    by Accept header), backfill missing AVIF/WebP/JPEG derivatives on disk,
+    and drop the obsolete render-counter field ``version`` (invalidation is
+    an in-memory concern now, not database state)."""
+
+    def walk(nodes: dict) -> None:
+        for node in nodes.values():
+            for field in ("content", "banner"):
+                if isinstance(node.get(field), str):
+                    node[field] = _DERIVATIVE_LINK.sub(r"\1", node[field])
+            walk(node.get("children") or {})
+
+    walk(d.get("menu") or {})
+    d.pop("version", None)
+    _backfill_derivatives()

pagerite/seed.py

@@ -2,10 +2,10 @@
 (``@kanta.bootstrap`` in ``app.py``).
 
 A "welcome to your new site" starter: a structured docs section (three
-menu levels deep) covering editing and the full Markdown feature set —
+menu levels deep) covering editing and one long article that walks the
-each feature shown as its Markdown source in a code block followed by
+full Markdown feature set — each feature shown as its Markdown source in
-the rendered result — and a showcase section with image positioning,
+a code block followed by the rendered result — and a showcase section
-long-form layout and a simple custom banner.
+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
@@ -26,10 +26,9 @@ Welcome to your new **Pagerite** site. Everything you see is a page written in M
 
 Where to go next:
 
-- The [docs](/docs/editing) section explains how to edit this site and shows every supported Markdown feature, source and result side by side.
+- 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.
-- Elsewhere on the web: [![xkcd 927: Standards](https://imgs.xkcd.com/comics/standards.png "xkcd 927: Standards"){width=240}](https://xkcd.com/927/) — a cautionary tale about adding one more standard.
 
 ![Abstract waves](waves.svg "Generated SVG artwork, attached to this page"){width=420}
 
@@ -50,37 +49,39 @@ The 🖊️ pens open a tabbed editor over the page you are viewing:
 
 ## URLs and structure
 
-The URL is the structure: a page at `docs/markdown/basics` lives under `docs` and `markdown`, 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.
+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.
+Images and files uploaded anywhere land in a content-addressed store served from `/_f/{hash}`, so links survive page moves. The server picks AVIF, WebP or JPEG from your browser's Accept header. The article editor's format bar and copy-paste both upload images for you.
 
 {dates}
 """
 
-MD_BASICS = """\
+# The full feature walkthrough: every supported extension in one long
-# Markdown Basics
+# article, each shown as Markdown source followed by the rendered result.
+MD_ARTICLE = """\
+# Markdown
 
-Every feature below is shown twice: first the Markdown source, then how it renders.
+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.
 
-## Headings and text
+## Text and headings
 
 ```markdown
-## A section heading
-### A subsection
-
 *Emphasis*, **strong**, ~~strikethrough~~, `inline code`, and a
-[link to the front page](/). An image that links to its page:
+[link to the front page](/). A hard line break
-[![xkcd 1179: ISO 8601](https://imgs.xkcd.com/comics/iso_8601.png "xkcd 1179: ISO 8601"){width=240}](https://xkcd.com/1179/) — and a hard line break
 is just a newline.
+
+Straight quotes become "curly", dashes -- and --- come out
+properly, and ... becomes an ellipsis, all automatically.
 ```
 
-## A section heading
+*Emphasis*, **strong**, ~~strikethrough~~, `inline code`, and a [link to the front page](/). A hard line break
-### A subsection
-
-*Emphasis*, **strong**, ~~strikethrough~~, `inline code`, and a [link to the front page](/). An image that links to its page: [![xkcd 1179: ISO 8601](https://imgs.xkcd.com/comics/iso_8601.png "xkcd 1179: ISO 8601"){width=240}](https://xkcd.com/1179/) — and a hard line break
 is just a newline.
 
-## Lists and quotes
+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
@@ -90,9 +91,9 @@ is just a newline.
 1. First
 2. Second
 
-> A blockquote. The URL space is the author's:
+- [x] Task lists with real checkboxes
-> pretty slugs at the root, nesting only where
+- [x] Clickable on the rendered page
-> the content is genuinely structured.
+- [ ] Like this one
 ```
 
 - One
@@ -102,13 +103,31 @@ is just a newline.
 1. First
 2. Second
 
-> A blockquote. The URL space is the author's:
+- [x] Task lists with real checkboxes
-> pretty slugs at the root, nesting only where
+- [x] Clickable on the rendered page
-> the content is genuinely structured.
+- [ ] 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:
+Fenced blocks get server-side syntax highlighting, and a copy button on hover:
 
 ````markdown
 ```python
@@ -135,12 +154,6 @@ def greet(name: str) -> str:
 |---------|--------|
 | Pages   | done   |
 | Images  | done   |
-"""
-
-MD_EXTENSIONS = """\
-# Markdown Extensions
-
-Markdown extensions enabled on this site, source first, then rendered.
 
 ## Footnotes
 
@@ -170,28 +183,6 @@ Term
 Another term
 : With its definition.
 
-## Task lists
-
-```markdown
-- [x] Write content in Markdown
-- [x] Attach images to pages
-- [x] Make tasks clickable on the rendered page
-```
-
-- [x] Write content in Markdown
-- [x] Attach images to pages
-- [x] Make tasks clickable on the rendered page
-
-## Admonitions
-
-```markdown
-!!! note
-    An admonition block for notes, warnings, tips...
-```
-
-!!! note
-    An admonition block for notes, warnings, tips...
-
 ## Sub- and superscript
 
 ```markdown
@@ -200,6 +191,51 @@ 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:
@@ -210,9 +246,23 @@ HTML passes through untouched — useful for `<kbd>` keys, `<details>` sections,
 
 <details><summary>Click to expand</summary>Hidden content.</details>
 
-## Smart typography
+## Datelines
 
-The typographer is on, so straight quotes become curly, `--` becomes -- and `...` becomes ...
+A `{dates}` line on its own expands to the article's published/updated dateline:
+
+```markdown
+{dates}
+```
+
+{dates}
+
+## Images and layout
+
+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 page title
+
+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.
 """
 
 MD_LAYOUT = """\
@@ -228,7 +278,7 @@ An image standing alone in its paragraph becomes a `<figure>`; its title becomes
 
 ## Positioning with attributes
 
-Brace attributes (the attrs plugin) control placement: `{.right}` and `{.left}` float, `{.wide}` breaks out of the text column, and plain attributes like `width=280` pass through.
+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}
@@ -238,6 +288,14 @@ Brace attributes (the attrs plugin) control placement: `{.right}` and `{.left}`
 
 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
@@ -245,64 +303,71 @@ Floated images let the text wrap around them, like this paragraph does. Relative
 ```
 
 ![Dunes](dunes.svg "Full-width artwork between sections"){.wide}
-
-## Datelines
-
-A `{dates}` line on its own expands to the article's published/updated dateline:
-
-```markdown
-{dates}
-```
-
-{dates}
-
-## The page title
-
-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.
 """
 
 GALLERY = """\
-Pages can attach images and position them freely. The vector artwork here is generated SVG; the woodblock print is Hokusai's *The Great Wave off Kanagawa* (public domain, via Wikimedia Commons).
+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.
 
-![The Great Wave off Kanagawa](great-wave.jpg "Hokusai, c. 1831 — full-bleed with {.wide}"){.wide}
+## Break out of the box!
 
-A wide image escapes the text column for emphasis between sections. No HTML needed — just Markdown and an attribute.
+![Dunes](dunes.svg){.wide}
 
-![Shapes](shapes.svg "Floated left with {.left}"){.left width=240}
+::: aside
+![Abstract waves](waves.svg)
 
-This text wraps around a left-floated figure. The caption comes from the image title, the float from `{.left width=240}` — brace attributes on the image itself.
+## Aside boxes
 
-![Abstract waves](waves.svg "Floated right with {.right}"){.right width=240}
+When you have to sideline a bit with something important to say, use `::: aside` and end with `:::`, markdown between.
 
-Mixing floats in one article is fine. Both images were uploaded to this page and referenced by relative path, so the whole page (images included) can be moved in the structure tree without breaking anything.
+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), and themes can bring their own.
+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. This page is a leaf: set a design here and nothing else is affected.
+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 — not a feature showcase. (Engravings: Augustus
+# figures, a list, side notes — not a feature showcase. (Engravings:
-# Burnham Shute's illustrations for the 1892 edition, public domain.)
+# 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}
 
-![Dunes at dusk](dunes.svg "Full-width artwork between sections"){.wide}
+![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.
 
-![Moby Dick breeches a whaleboat](md-whale.jpg "Augustus Burnham Shute, 1892 — public domain"){.right width=320}
+::: 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.
 
@@ -314,6 +379,9 @@ But look! here come more crowds, pacing straight for the water, and seemingly bo
 
 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.
@@ -324,9 +392,9 @@ Why did the poor poet of Tennessee, upon suddenly receiving two handfuls of silv
 
 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.
 
-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.
+![Moby Dick breeches a whaleboat](md-whale.jpg "Augustus Burnham Shute, 1892"){.right width=400}
 
-![The final chase](md-chase.jpg "A. Burnham Shute's illustration of the final chase, 1892 — public domain")
+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.
 
@@ -346,16 +414,19 @@ 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.
 """
 
 ABOUT = """\
 This site runs on **Pagerite**: FastAPI + html5tagger + kanta, with content written in Markdown and rendered on the fly.
 
 - [How to edit this site](/docs/editing)
-- [Markdown features](/docs/markdown/basics)
+- [Everything Markdown can do](/docs/markdown)
 - [The showcase](/showcase/gallery)
-- [![xkcd 2347: Dependency](https://imgs.xkcd.com/comics/dependency.png "xkcd 2347: Dependency"){width=240}](https://xkcd.com/2347/) — a small comic about small dependencies
+
+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.*
 """
@@ -403,56 +474,50 @@ DUNES_SVG = """\
 """
 
 #: path -> (title, markdown, {filename: bytes}, banner HTML, menu order,
-#: banner design). Designs demonstrate inheritance: the "showcase" label
+#: banner design). Designs demonstrate per-page choice: the gallery
-#: picks "eyes" (all its pages show the critter), and the leaf
+#: picks "eyes" (its page alone), night-sky picks "stars"; everything
-#: "showcase/night-sky" overrides that with "stars". Elsewhere the active
+#: else inherits the active theme's own design.
-#: theme's own design shows.
 #: 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) just to carry the design.
+#: 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, {}, "", 3, None),
     "docs/editing": ("Editing This Site", EDITING, {}, "", 1, None),
-    "docs/markdown/basics": (
+    "docs/markdown": ("Markdown", MD_ARTICLE, {}, "", 2, None),
-        "Basics",
-        MD_BASICS,
-        {},
-        "",
-        1,
-        None,
-    ),
-    "docs/markdown/extensions": ("Extensions", MD_EXTENSIONS, {}, "", 2, None),
     "docs/markdown/images-and-layout": (
         "Images and Layout",
         MD_LAYOUT,
-        {"shapes.svg": SHAPES_SVG.encode(), "dunes.svg": DUNES_SVG.encode()},
-        "",
-        3,
-        None,
-    ),
-    "showcase": ("Showcase", "", {}, "", 4, "eyes"),
-    "showcase/gallery": (
-        "Gallery",
-        GALLERY,
         {
-            "great-wave.jpg": _asset("great-wave.jpg"),
             "shapes.svg": SHAPES_SVG.encode(),
             "waves.svg": WAVES_SVG.encode(),
+            "dunes.svg": DUNES_SVG.encode(),
         },
         "",
         1,
         None,
     ),
+    "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,
         {
-            "dunes.svg": DUNES_SVG.encode(),
+            "great-wave.jpg": _asset("great-wave.jpg"),
             "md-whale.jpg": _asset("md-whale.jpg"),
-            "md-chase.jpg": _asset("md-chase.jpg"),
         },
         "",
         2,

pagerite/themes/corporate/theme.css

@@ -106,14 +106,13 @@ article h2 {
 
 article h3 {
   font-weight: 700;
-  font-size: 0.95rem;
   letter-spacing: 0.08em;
   color: var(--muted);
 }
 
 blockquote {
   border-left-color: var(--accent);
-  background: color-mix(in oklab, var(--accent) 6%, transparent);
+  background: color-mix(var(--accent) 6%, transparent);
   padding: 0.4rem 0.9rem;
   /* Keep the quoted text on the paragraph edge: the tinted box extends
      past it by its own border/padding, like code blocks. */

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/nitro/theme.css

@@ -42,6 +42,9 @@
   --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
@@ -62,10 +65,6 @@
   }
 }
 
-::selection {
-  background: var(--accent);
-}
-
 /* Any banner used is separated from page by a thick orange line */
 #banner {
   border-bottom: 4px solid var(--accent);
@@ -183,13 +182,12 @@ article ul ul li::before {
 }
 
 article ul ul ul li::before {
-  content: "»";
+  color: var(--muted);
-  color: var(--accent);
 }
 
 blockquote {
   border-left-color: var(--accent2);
-  background: color-mix(in oklab, var(--accent2) 6%, transparent);
+  background: color-mix(var(--accent2) 6%, transparent);
   padding: 0.25rem 0.75rem;
   /* Keep the quoted text on the paragraph edge: the tinted box extends
      past it by its own border/padding, like code blocks. */

pagerite/themes/purple/theme.css

@@ -60,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;
+  font-size: 0.8em;
-  vertical-align: 0.15em;
+  margin-left: calc(-1 * var(--list-indent) / 0.8);
+  width: calc(var(--list-indent) / 0.8);
 }
 
 article ul ul li::before {
@@ -74,7 +76,6 @@ article ul ul li::before {
 }
 
 article ul ul ul li::before {
-  content: "◆";
   color: var(--accent3);
 }
 

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/summer/theme.css

@@ -24,7 +24,7 @@
   --sun: #ffe071;
   --line: #4f913b29;
 
-  --link: color-mix(in oklab, var(--text) 38%, var(--accent));
+  --link: color-mix(var(--text) 38%, var(--accent));
 
   --font-body: var(--font-cause);
   --font-heading: var(--font-new-rocker);
@@ -205,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 {

pagerite/views.py

@@ -8,10 +8,11 @@ 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
+current top-level section, rendered only from the second level down
-least two published items. Nodes without content are category labels; nav links
+(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
@@ -21,18 +22,62 @@ 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
+# files in {THEME_DIRS}/{name}/, served by the backend at /_themes/{name}/...
-# re-read from disk on every request (see app.py), so they are never built.
+# 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
@@ -46,20 +91,105 @@ def _manifest() -> dict:
     return _manifest_cache
 
 
-def _theme_names() -> list[str]:
+def _theme_color_schemes(theme: str) -> set[str]:
-    """Theme folders on disk (a folder is a theme when it has theme.css)."""
+    """Return the color-scheme keywords (``light``/``dark``) from theme.css.
-    return sorted(
+
-        d.name for d in THEMES.iterdir() if d.is_dir() and (d / "theme.css").exists()
+    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()
+        for root in FONT_DIRS
-        if d.is_dir()
+        if root.is_dir()
-        and any((d / f).exists() for f in ("banner.css", "banner.svg", "banner.html"))
+        for d in root.iterdir()
+        if d.is_dir() and (d / "font.css").is_file()
     )
 
 
@@ -68,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)."""
@@ -81,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).
 
@@ -114,13 +272,16 @@ 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
-    files (``/_themes/{name}/...`` from pagerite/themes/).
+    or user-font files (``/_themes/{name}/...``, ``/_fonts/{name}/...``,
+    resolved across THEME_DIRS / FONT_DIRS).
     """
-    if url.startswith("/_themes/"):
+    for prefix, resolver in (("/_themes/", theme_file), ("/_fonts/", font_file)):
-        name, _, file = url.removeprefix("/_themes/").partition("/")
+        if url.startswith(prefix):
-        if _valid_name(name) and _valid_name(file):
+            name, _, file = url.removeprefix(prefix).partition("/")
-            return (THEMES / name / file).read_text()
+            path = resolver(name, file)
-        raise ValueError(f"not a theme asset: {url}")
+            if path is None:
+                raise ValueError(f"not a theme/font asset: {url}")
+            return path.read_text()
     return (BUILD / url.lstrip("/")).read_text()
 
 
@@ -145,6 +306,7 @@ def _layout(
     custom_css: str = "",
     theme: str = "",
     banner_design: str = "",
+    transition: str = "cube",
     favicon: str = "",
     social: dict[str, str] | None = None,
 ) -> Template:
@@ -159,7 +321,9 @@ def _layout(
     analytics) stay external in both modes.
 
     Order matters and is fixed: base (Vite build, absent in dev where Vite
-    injects it from JS), theme and banner design (from pagerite/themes/),
+    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.
 
@@ -217,8 +381,13 @@ def _layout(
     # 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 not url:
@@ -332,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
+    exists only when there is something to navigate. It renders only from
-    offer at least two published items, or exactly one while viewing
+    the second level down: main-level pages (and the front page) list
-    anything else than that only page — the section index, a 404, a
+    their children as cards after the content instead of a sidebar. From
-    grandchild (otherwise those pages offer no way to reach the child) —
+    there, the section must offer at least two published items, or exactly
-    and viewing that only page itself still shows the sidebar when the
+    one while viewing anything else than that only page — the section
-    page has published children of its own to reach.
+    index, a 404, a grandchild (otherwise those pages offer no way to
-    The front page, leaf pages, the sole childless page of a one-page
+    reach the child) — and viewing that only page itself still shows the
-    section and childless sections get no aside element at all (rather
+    sidebar when the page has published children of its own to reach.
-    than an empty or useless one-item box).
+    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)
@@ -431,14 +602,10 @@ def _design_banner(design: str) -> HTML:
     """
     if not _valid_name(design):
         return HTML("")
-    html = THEMES / design / "banner.html"
+    path = theme_file(design, "banner.html") or theme_file(design, "banner.svg")
-    svg = THEMES / design / "banner.svg"
+    if path is None:
-    if html.exists():
-        body = html.read_text()
-    elif svg.exists():
-        body = svg.read_text()
-    else:
         return HTML("")
+    body = path.read_text()
     return HTML(f'<div data-design="{design}">{body}</div>')
 
 
@@ -446,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(
+    if any(theme_file(theme, f) for f in ("banner.css", "banner.svg", "banner.html")):
-        (THEMES / theme / f).exists()
-        for f in ("banner.css", "banner.svg", "banner.html")
-    ):
         return theme
     return ""
 
@@ -511,23 +675,85 @@ 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]
-    rendered = render(node.content or "", path, node.created, node.modified)
+    # 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 body's .cols segments lay out
+    # #content grid in pagerite.css) and the .cols segments lay out in at
-    # in at most two columns. The .body html is already segmented by
+    # most two columns. The html is already segmented by render() — the
-    # render() — the whole layout is driven by these classes.
+    # 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
+        doc(HTML(rendered.html))
-        # only rendered as h1 when the markdown has none of its own.
+        _cards(doc, menu, node, path)
-        if not has_h1(node.content or ""):
-            doc.h1(node.title)
-        doc.div(HTML(rendered.html), class_="body")
     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[^>]*>")
@@ -536,23 +762,34 @@ _ATTR_SRC = re.compile(r'src="([^"]+)"')
 _ATTR_CLASS = re.compile(r'class="([^"]*)"')
 
 
-def _share_media(html: str, base_url: str) -> tuple[str, str]:
+_SENTENCE_END = re.compile(r"[.!?][”'\")]*(?=\s|$)")
-    """(image, video) share URLs from the rendered article.
+
+
+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. Absolute URLs are
+    honored mainly by Facebook; X/Twitter ignores it.
-    built from the request base, 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}"
-
     hero = raster = svg = video = ""
     for tag in _IMG_TAG.findall(html):
         if not (src := _ATTR_SRC.search(tag)):
@@ -571,7 +808,26 @@ def _share_media(html: str, base_url: str) -> tuple[str, str]:
         if m := _ATTR_SRC.search(tag):
             video = m.group(1)
             break
-    image = hero or raster or svg
+    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. Extension-less store links
+    (``/_f/<hash>``) are used as-is: the server negotiates the format
+    from the scraper's Accept header (no explicit image/avif|webp → JPEG,
+    which every scraper supports).
+    """
+    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 "")
 
 
@@ -585,14 +841,17 @@ def _social_meta(
     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).
+
+    ``twitter:image`` pins extension-less store links to the ``.webp``
+    variant: X only honors WebP via twitter:image (not og:image) and its
+    scraper cannot be trusted to negotiate via Accept.
     """
     url = f"{base_url}/{path}" if base_url else ""
-    m = _FIRST_P.search(html)
+    text = _description(html)
-    text = unescape(_TAG.sub("", m.group(1) if m else ""))
-    text = " ".join(text.split())
-    if len(text) > 200:
-        text = text[:200].rsplit(" ", 1)[0] + "…"
     image, video = _share_media(html, base_url)
+    twitter_image = (
+        re.sub(r"(/_f/[0-9a-f]{12})$", r"\1.webp", image) if image else ""
+    )
     return {
         "description": text,
         "canonical": url,
@@ -606,6 +865,7 @@ def _social_meta(
         "article:published_time": node.created.isoformat(),
         "article:modified_time": node.modified.isoformat(),
         "twitter:card": "summary_large_image" if image else "summary",
+        "twitter:image": twitter_image,
     }
 
 
@@ -618,6 +878,7 @@ def render_page(
     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]
@@ -627,7 +888,7 @@ def render_page(
     return str(
         _layout(
             *_page_assets(), custom_css, theme, banner_design(menu, path, theme),
-            favicon, social,
+            transition, favicon, social,
         )(
             Title=f"{title} – {brand}" if brand else title,
             Brand=_brand_link(brand, brand_html),
@@ -647,29 +908,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
+    The node exists in the tree but has no page of its own: its published
-    point straight at its first child, so this is mainly seen in the site
+    children are listed as cards, like on a category page with content.
-    editor, where the pen creates the landing page.
+    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:
+        if any(c.published for c in node.children.values()):
-            doc.p("Pages in this section are listed in the menu on the left.")
+            _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)),
         ),
@@ -684,6 +946,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
@@ -691,7 +954,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),
@@ -759,6 +1022,7 @@ def render_analytics(
     theme: str = "",
     favicon: str = "",
     brand_html: str = "",
+    transition: str = "cube",
 ) -> str:
     """Render the analytics viewer as a normal page at /_a.
 
@@ -784,6 +1048,7 @@ def render_analytics(
             custom_css,
             theme,
             banner_design(menu, "_a", theme),
+            transition,
             favicon,
         )(
             Title=f"Analytics – {brand}" if brand else "Analytics",

pyproject.toml

@@ -25,7 +25,10 @@ dependencies = [
     "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",
 ]