Slightly prettier analytics URL

Support for UTM tags in transition graph as source sites.
analytics: unify visitor cell across visits, crawlers and abuse tables
2026-08-21 23:58:00 +00:00 · 2026-08-21 23:50:01 +00:00 · 2026-08-21 23:32:46 +00:00 · 2026-08-21 23:16:15 +00:00 · 2026-08-21 22:31:37 +00:00 · 2026-08-21 22:03:55 +00:00
66 changed files with 10633 additions and 2138 deletions
@@ -2,6 +2,8 @@
 !.gitignore
 *.lock
 *.kantadb
 pagerite.analytics.json
 dbip-*.mmdb*
 /pagerite/frontend-build
 package-lock.json
@@ -5,213 +5,38 @@
 Please instead ask the user to see from dev tools what you need, e.g. to look up something in DOM or log. Use console.log for debugging where needed (and otherwise for permanently kept useful messages in the app).
 ## What this is
 Pagerite: a single-user CMS/blog. FastAPI serves HTML rendered in Python
 with html5tagger; content is persisted in a kanta database and rendered on
 the fly per request. Vue is used only for interactive bits (editing tools),
 not for the public pages. See `docs/design-principles.md` for the design.
 ## Layout
- `pagerite/` — the Python backend package (hatchling build target).
+Pagerite is a CMS. See `docs` for the full design and implementation details. Key files for code changes:
-  - Server run by CLI entry point `uv run pagerite` (no auto reloads, build needed)
+
-  - Dev mode `scripts/devserver.py` (which the user mostly uses for auto reloads, no build needed)
+- `pagerite/` — Python backend package (hatchling build target).
-  - Avoid running the server yourself, ask the user to test
+  - `app.py` — FastAPI app and route registration.
-  - `app.py` — the FastAPI app. FastAPI's built-in API docs are disabled
+  - `data.py` — msgspec Structs for the kanta database.
-    (`docs_url`/`redoc_url`/`openapi_url=None`) because `/docs` belongs to
+  - `markdown.py` — markdown-it-py renderer.
-    our content. Our own routes (content pages, `/_api/...`, `/_f/...`) are
+  - `views.py` — shared page layout and rendering.
-    registered BEFORE `frontend.route(app, "/")` is called: fastapi-vue
+  - `seed.py` — demo content, written only on first database creation.
-    inserts its file routes at the position where
+  - `analytics.py` — visit analytics collection (see `docs/analytics.md`).
-    `route()` was called (during `load()` in the lifespan), so anything
+- `frontend/src/` — Vue editor and public-page JS entries.
-    defined earlier wins. The one exception is the content catch-all
+  - `main.js` — Vue editor app entry.
-    `/{path:path}`, registered AFTER `frontend.route()` so that built
+  - `analytics-main.js` — analytics page entry (mounts `AnalyticsView` at `/_a`).
-    frontend assets still take priority over content slugs. The `Frontend`
+  - `pagerite.js` — public page entry.
-    is constructed with `spa=False` explicitly: it only serves the built
+  - `assets/` — base CSS, Pygments styles, fonts.
-    files without a catch-all. The build mirrors the URL space — hashed
+- `scripts/devserver.py` — dev server with auto reload (the user mostly uses this; avoid running the server yourself, ask the user to test).
-    immutable assets under `/_assets/`, `favicon.ico` at the site root —
+
-    and an `index.html` in the build would become a `/` route, so leave it
+Server run by CLI entry point `uv run pagerite` (no auto reloads, build needed). Dev mode is `scripts/devserver.py` (auto reloads, no build needed).
    out of the build to keep `/` ours.
  - `data.py` — msgspec Structs for the kanta database. The site structure
    is a tree: `Data.menu` maps top-level slugs to `Node`s, each with
    `children` keyed by slug — the URL path is the slug chain. The front
    page is whichever top-level node has slug "" (parallel to the other
    main level pages, not their parent); it cannot have children, and
    renaming its slug away leaves no front page ("/" redirects to the
    first nav item). `Node.content` is
    the Markdown page, or None for a pure category label whose URL renders
    a placeholder page (while nav links to it point at its first child);
    every label's title and slug are editable. Siblings order by the fractional `Node.order` key: a moved
    item gets a fresh key relative to its new siblings, all others keep
    theirs. `resolve`/`find_slot` walk the tree by path; moves are slot
    detach/attach carrying the whole subtree. Legacy flat `Data.pages`
    (pre-tree databases) migrates into `menu` on startup. The app owns
    the `Data` object; reads are plain attribute access, writes in
    `kanta.transaction(...)`.
    `Data.files` is a content-addressed store (blake3[:12] + extension)
    mapping file names to bytes, served at `/_f/{name}` with immutable
    caching; pages reference files by absolute `/_f/` URLs so hierarchy
    moves never break them. `Node.banner` is a raw trusted HTML snippet
    for the header banner (img, styled div, canvas+script...); empty
    inherits from the node's ancestors (front page last), then the active
    theme's banner artwork: an inline SVG from
    `pagerite/themes/{theme}/banner.svg`, inlined into `#page-banner` by
    the backend only when no user banner applies (so it is recolorable
    from the theme CSS via `var(...)` and never fights user designs; the
    base stylesheet falls back to a plain gradient).
    `Data.version` is bumped on every write
    and embedded in page ETags so nav-affecting changes invalidate caches.
    `Data.brand` is the site name (header link + `<title>` suffix), editable
    in the site editor via `/_api/settings`; empty = no header link and
    no `<title>` suffix. `Data.theme` is the active theme name (empty =
    none/base only); themes live in `frontend/src/assets/themes/{theme}`.
    `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)`.
  - `markdown.py` — markdown-it-py renderer (html passthrough + attrs,
    footnote, deflist, tasklists plugins). Custom image rule: relative srcs
    resolve against the page path, titled images become figures.
  - `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`), and page/404 rendering. If the markdown contains its own h1, the page title
    is NOT rendered as an additional h1 (it still supplies <title> and nav
    labels). The navbar holds
    top-level items only; the current section's subitems go to a left
    `#sidebar`, which is rendered only when the section offers at least two
    published items (no aside element at all on the front page, leaf pages
    and one-page sections). Dynamic regions have stable ids
    (`#page-banner`, `#nav`, `#sidebar`, `#main`) for fetch-navigation swaps
    (`#sidebar` may be absent on either side of a swap).
  - `seed.py` — demo content written on startup for paths missing from the
    database (never overwrites existing pages).
  - `frontend/src/` — the Vue editor and public-page entries.
    - `main.js` — Vue editor app entry, mounts PageEditor/SiteEditor.
    - `pagerite.js` — public page entry; runs fetch-navigation, scroll-reveal,
      brand shrink-to-fit (the themed size is the maximum; JS reduces the
      font-size so a long brand or narrow viewport still fits one line),
      code copy buttons, and the auth check: it probes `GET /_api/settings`
      and only then injects the 🖊️ edit pens (asset URLs from the
      `pagerite:editor-src`/`-css` meta tags). The same reverse proxy that
      gates `/_api` returns 401 for anonymous users, 403 for users without
      the admin permission, and 200 for admins; a 401 adds a "log in" link
      to `/auth/` in the banner corner, a 403 nothing, and any other
      result (no auth proxy, e.g. dev) leaves editing open. Pages themselves
      render identically for everyone; the real gate is the auth proxy in
      front of all of `/_api`. The backend links the shared CSS as two separate
      stylesheets (base and theme) so they can be swapped or augmented.
    - `assets/` — shared styles and data files built by Vite and served hashed
      under `/_assets/`: `pagerite.css` (base layout + conservative variables),
      `themes/{purple,corporate,nitro}/theme.css` (theme overrides and font
      picks: `purple` = dark dusk palette with Fraunces/Literata and a tilted
      oversized gradient brand; `corporate` = light-first with automatic
      `prefers-color-scheme` dark mode, Montserrat/Inter and a huge solid
      brand; `nitro` = racing/HUD style following `prefers-color-scheme`
      (warm light-grey page, deep violet in dark), Montserrat/Literata,
      black as an accent only, a straight orange blade under the banner, and
      an orange racing-tab nav clipped with a bezier `shape()`), `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.
    - Vite builds ES-module `.js` outputs; the backend renders `<script
      type="module">` for them (module scripts defer by default).
  - The database file is `pagerite.kantadb` in the cwd (`PAGERITE_DB`
    overrides); gitignored. Do not delete it without asking.
 - `scripts/fastapi-vue/` — helper scripts from the fastapi-vue template
  (build hook etc.), do not edit.
 - `frontend/` — the Vue editor as **two separate apps** mounted in their
  own host divs created inside the static document: `PageEditor.vue`
  (CodeMirror + server-rendered preview over WebSocket `/_api/ws/editor`,
  previewing into the visible article; editor scroll drives document
  scroll) opened by the article pen — it edits content and title only,
  never the path — and `SiteEditor.vue` (site brand + theme selector +
  site-wide custom CSS + banner HTML edited in small CodeMirror windows;
  banner previewed into `#page-banner`, CSS injected into
  `<head id="pagerite-user">`) + vue-draggable structure tree with
  always-editable title/slug inputs per row, opened by the banner pen —
  everything saves immediately as you edit (brand/title/CSS debounced,
  slug on commit since it renames the path), theme change swaps the
  stylesheet in place, tree rows navigate in place without transitions when
  focused, and the front page is a root-only row whose empty slug is
  editable like any other. Every
  non-empty list (and the root) ends with a non-draggable ➕ footer row
  (vuedraggable `#footer` slot): clicking it starts a new pending page at
  that level (its slug placeholder shows the slug derived live from the
  title being typed), and while dragging it is the list's "end of list" drop
  target. Committing a pending page PUTs it with empty markdown (creates
  an empty page that renders with its title — saving never deletes;
  deletion is the page editor's explicit choice: saving trimmed-empty
  text issues a REST DELETE), then hands over to the page editor
  (CodeMirror focuses on mount). Dropping ON the lower part of a row
  moves the page under that
  row (the child list's container invisibly overlaps its own row's bottom
  via negative margin — Sortable inserts it as the first child natively),
  while a row's exposed top edge inserts a sibling before it. Row
  indentation is structural (each nested list margin-indents itself), so a
  dragged row previews its whole subtree at the target list's depth. The
  two pens swap the docked
  panel for the other editor; clicking the open editor's own pen closes it. Normally dynamic-imported onto the content page by
  pagerite.js when a 🖊️ 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` and every `src/assets/themes/*/theme.css` as
  separate stylesheet entries (enumerated from the themes directory, so new
  themes need no config change); 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 no stylesheets (Vite injects them from JS); the
  active theme reaches the page as `<meta name="pagerite:theme">` and
  pagerite.js imports that theme's CSS, while a theme switch in the site
  editor swaps the Vite-injected `<style data-vite-dev-id>` tags (the
  `<link>` sync used in prod is a no-op in dev).
  vite-plugin-fastapi.js has an
  auto-upgrade marker — edit `vite.config.js`, not the plugin.
 - `docs/` — design documentation.
 ## Toolchain
- Python >= 3.14, managed with **uv**. Dependencies: `fastapi[standard]`,
+- 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`).
  `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`).
 - Key libraries:
-  - **html5tagger** — all HTML generation (`E`, `Document`, `Template`,
+  - **html5tagger** — all HTML generation (`E`, `Document`, `Template`, `HTML` for trusted/raw HTML).
    `HTML` for trusted/raw HTML).
    - To create stand alone pages, begin with `doc = Document(...)` that gives a HTML5 page header
    - Chain with `doc.p("text").br`: every attribute access creates element to doc (returning self), calls add content to current element.
    - Closing tags are not used where optional, e.g. no `</p>` or `</li>` is ever included in output. Due to this proper "nesting" of content is NOT required and should be avoided. Where needed, () directly after tag define attributes and content INSIDE the element, then close the element. `with doc.ul:` and such may be used for larger chunks.
-    - Prefer building directly on one builder with `with` blocks (recursing
+    - Prefer building directly on one builder with `with` blocks (recursing inside a with block for hierarchies) over preparing `E.` snippets into variables and composing them. Note `with doc.li:` alone fails (`li` has an optional end tag) — use `with doc.li.ul:` style chains, or `doc.li.a(...)` followed by a nested `with doc.ul:` block.
-      inside a with block for hierarchies) over preparing `E.` snippets into
+    - `Template(builder)` freezes a builder with **Capitalized** attribute placeholders (e.g. `E.Title`, `doc.main(E.Main, id="main")`); calling it fills the slots with escaping — pass `HTML(...)` for raw HTML. Passing a list to a template slot expands it; passing a list to a normal builder call does NOT (spread it: `E.ul(*items)`).
      variables and composing them. Note `with doc.li:` alone fails (`li`
      has an optional end tag) — use `with doc.li.ul:` style chains, or
      `doc.li.a(...)` followed by a nested `with doc.ul:` block.
    - `Template(builder)` freezes a builder with **Capitalized** attribute
      placeholders (e.g. `E.Title`, `doc.main(E.Main, id="main")`); calling
      it fills the slots with escaping — pass `HTML(...)` for raw HTML.
      Passing a list to a template slot expands it; passing a list to a
      normal builder call does NOT (spread it: `E.ul(*items)`).
    - To create plain HTML snippets use `E.div(E.p("content"))` etc using the `E` empty builder.
-  - **kanta** — asyncio-native embedded database: `Kanta(filename, data)`
+  - **kanta** — asyncio-native embedded database: `Kanta(filename, data)` root object, `transaction`, `flush`, snapshot/replay-log persistence.
    root object, `transaction`, `flush`, snapshot/replay-log persistence.
    - `async with Kanta(Data(),...) as kanta:` (or await kanta.open/close)
    - `with kanta.transaction(...) as data:` - transactions only for writes
    - `data` may be referenced directly to read anywhere and to modify in transactions (`as data` is just a shorthand access)
@@ -219,32 +44,12 @@ not for the public pages. See `docs/design-principles.md` for the design.
      - We prefer objects rather than lists, as this works better in change diffs. E.g. `dict[str, True]` where the keys indicate presence and always have value `True`.
    - Maintaining and owning the app's own `Data` object is preferable; Kanta never copies this, only edits in place
    - Note: besides opening it every access is immediate direct variable access: no `await`, no locks, no delays
-  - **fastapi-vue** — template glue for serving/building the Vue frontend;
+  - **fastapi-vue** — template glue for serving/building the Vue frontend; keep its integration points (`Frontend`, build hook) intact.
-    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).
  - **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).
 ## Conventions
 - Keep dependencies minimal; add via `uv add` and mention it.
- The public URL space belongs to content (pretty slugs at root). Reserve
+- The public URL space belongs to content (pretty slugs at root). Reserve only `/_` for the machinery (`/_api/`, `/_f/`, `/_assets/`), plus `/favicon.ico` from the build. Slugs are lowercase ASCII letters, digits, hyphens and underscores `[a-z0-9_-]` (the site editor filters input live via `slugify.js`, built on the `transliteration` npm package — unicode folds to ASCII, spaces become hyphens; an empty slug on a new page is derived from its title), may not begin with `_` or `.`, and such URLs are never looked up as content.
-  only `/_` for the machinery (`/_api/`, `/_f/`, `/_assets/`), plus
+- No auth in core code; the SSO/reverse proxy gates all of `/_api` (forward-auth) and owns `/auth/` (login/logout, session validation). Pages render identically for everyone; pagerite.js adds the editing UI only after the auth server validates the session.
-  `/favicon.ico` from the build. Slugs are lowercase ASCII letters, digits,
+- Update the relevant MarkDown files when architecture, tooling, or conventions change.
  hyphens and underscores `[a-z0-9_-]` (the site editor filters input live
  via `slugify.js`, built on the `transliteration` npm package — unicode
  folds to ASCII, spaces become hyphens; an empty slug on a new page is
  derived from its title), may not begin with `_` or `.`, and such URLs are
  never looked up as content.
 - No auth in core code; the SSO/reverse proxy gates all of `/_api`
  (forward-auth) and owns `/auth/` (login/logout, session validation).
  Pages render identically for everyone; pagerite.js adds the editing UI
  only after the auth server validates the session. Never add output
  sanitization "for safety" against the author — embedded HTML/scripts in
  Markdown are passed through deliberately.
 - Update this file and `docs/design-principles.md` when architecture,
  tooling, or conventions change.
@@ -1,5 +1,3 @@
 # Pagerite
-A single-user CMS/blog. FastAPI serves HTML rendered in Python with html5tagger,
+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.
 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.
@@ -0,0 +1,249 @@
 # Analytics
 Server-side visit analytics. Data lives in a plain JSON file — a msgspec
 Struct dumped to disk — separate from the kanta content database, path from
 `PAGERITE_ANALYTICS` (default: the database path with `.kantadb` replaced by
 `.analytics.json`, e.g. `pagerite.analytics.json`).
 - `pagerite/analytics.py` — data model (`Analytics`, `Client`, `Visit`,
  `CrawlerHit`, `AbuseHit`) and the `Store` (in-memory data + session map,
  atomic JSON persistence).
 - `pagerite/app.py` — entry-referer stashing in `show_page` (`_track_entry`),
  the `POST /_a` ping endpoint, and `WebSocket /_api/ws/analytics`
  (admin-gated like every `/_api` endpoint).
 - `frontend/src/pagerite.js` — client navigation pings and the 📊 pen.
 - `frontend/src/AnalyticsView.vue` — viewer component rendered inside the
  normal site layout on the `/_a` analytics page.
 - `frontend/src/analytics-main.js` — page entry that mounts `AnalyticsView`
  into `#analytics-app` inside `#main`.
 ## What is collected
 The client (`pagerite.js`) POSTs fire-and-forget pings to `/_a` with
 `{fr, to}` (`fr` = source path):
 - **Initial page load**: `to` is the loaded path. This ping is what starts
  the visit and counts the entry page view — the document GET alone records
  nothing, so bots and admin browsing never register. Reloads are not
  visits: the ping is skipped (PerformanceNavigationTiming `reload`), so a
  refresh neither counts a second view nor logs a self-transition. The GET
  handler stashes a cross-origin https `Referer` (origin part only) and any
  `utm_*` query parameters in in-memory IP tables, consumed by the ping that
  starts the visit; internal or absent referers never touch the referer table.
 - **Internal fetch-navigations**: `to` is the target path, sent only after
  the swap actually happened (a failed swap falls back to a full load,
  whose initial ping counts the view instead — no gap, no double count).
 - **External links** (`https` only): `to` is the link's full URL. This is the
  exit-link record; the user may continue navigating afterwards (new tab,
  back), so the exit URL is not necessarily the last trail entry. Outbound
  links are stored by full URL so several links to the same domain remain
  distinct.
 - **Excluded**: back/forward (popstate) navigations, navigation involving
  the analytics page itself (`/_a`), and everything while the user has the
  editor open (`body.editing`). Admin noise, not visits.
 - **Admins**: when SSO is in use and the session is known to be an admin,
  the client still pings but adds `hide=1`. The server then records
  nothing — and if the same client session already had a visit from before
  logging in, that visit is removed from the JSON along with the counts
  recorded when it was created (site visit, entry view, entry transition).
  Views/transitions logged by later pings inside such a visit lack
  per-event timestamps and are left as-is. With no auth proxy (dev/test)
  "admin" is everyone's state, so `hide` stays 0 and everything is recorded.
 - The server validates `to`: internal paths must be valid slug paths
  ("/" or `[a-z0-9_-]` segments), external ones are re-derived to the
  https origin and accepted only when the client sent exactly that.
 - **Client records**: the visitor's IP (IPv4 or IPv6 /64 network), raw
  `User-Agent` and extracted `Accept-Language` tag are hashed with blake3;
  the first 6 bytes identify a shared `Client` record.  The `Client` stores
  the full IP, `User-Agent`, compact `ua_pretty`, `lang`, initial
  `country` from the language-region subtag, and asynchronously-filled
  `country`/`city` from DB-IP geoip plus reverse-DNS `host`.  Visits,
  crawler hits and abuse hits all reference this record by its hash, so
  client metadata is stored once instead of repeated per event.
 - The visitor IP is stored in the `Client`.  A reverse-DNS lookup is
  attempted for each new client and the result, when available, is stored as
  `host`; local/reserved/multicast addresses are skipped.  If a DB-IP MMDB
  file (`dbip-*.mmdb` or `dbip-*.mmdb.gz`) is present in the repository
  root, it is loaded at startup and used to look up `country`/`city`.  These
  lookups run in background tasks after the event is stored, so the `/_a`
  response is never delayed.  The decompressed `dbip-*.mmdb` file is kept in
  the repository root and ignored by git.  The CLI flag `--dbip`
  (`uv run pagerite --dbip`) downloads the latest
  `dbip-city-lite-YYYY-MM.mmdb.gz` from DB-IP before the server starts,
  skipping the download when the local database is already current and
  removing older versions after an update; without the flag only an existing
  file is used.
 - **Crawler hits**: every document GET is queued in RAM as a pending crawler
  hit.  If a ping from the same client arrives within 10 seconds the hit is
  discarded; otherwise it is written to `crawlers`.  Crawlers do not count as
  visits or views.  The `Accept-Language` header is stored on the shared
  `Client` immediately; reverse-DNS host names and DB-IP geoip
  country/city are filled in asynchronously, just like for real visits.  In
  the analytics viewer, crawler hits are grouped by client hash and shown as
  a trail of internal pages that crawler visited; the crawler table lists
  the most active crawlers first rather than the most recent hits.
 - **Abuse (scanner) hits**: a 404 for a telltale path — any URL segment
  starting with a dot (`/.env`, `/.git/config`) or ending in `.php` —
  classifies the source IP as abuse immediately, and ten plain 404s from one
  IP do too.  Classification reclassifies history: all earlier crawler hits
  from that IP (persisted and pending) move to the `abuse` list, so a
  random-UA scanner no longer pollutes the crawler stats of the legitimate
  bot it impersonates.  Once classified, every document GET and 404 from the
  IP is recorded as an abuse hit with the full request path (query string
  included), and its pings are ignored.  The classified IP set (`abuse_ips`)
  is persisted in the JSON file; the plain-404 counters are RAM-only.  In the
  viewer, abuse hits are grouped by IP (never by client/UA — scanners
  randomize theirs) in a separate "Abuse" table.  Identical paths are
  collapsed into one entry with their hit count; flagged paths that
  triggered classification are lifted to the top, followed by other 404s and
  then document GETs from the abuser.  Raw User-Agent strings are shown one
  per line with their occurrence counts, and the full lists are click-to-copy.
 ## Visits and sessions
 There are no cookies. A visit is tied together by a client hash — the first
 6 bytes of a blake3 digest over the prettified IP (IPv4 unchanged, IPv6
 /64 network), the raw `User-Agent` string and the extracted
 `Accept-Language` tag.  The first ping from a client hash starts a new
 visit; subsequent pings extend it.  Pings arriving with no known session
 (server restart) start a fresh visit from the first ping — treated as
 missing data rather than dropped.  The client-hash → visit map and the IP →
 entry-referer/UTM tables are in-memory only; client metadata is stored in
 `Analytics.clients` keyed by the client hash.
 Each `Client` record:
 - `ip` — visitor IP address (first `X-Forwarded-For` hop, or direct peer),
 - `host` — reverse-DNS host name for `ip` when resolvable, else `""`,
 - `lang` — first `Accept-Language` tag, lowercased (e.g. `"en-us"`),
 - `country` — two-letter country code.  Initially derived from the
  `Accept-Language` region subtag, but overwritten by the DB-IP MMDB result
  when a database is available,
 - `city` — city name from the DB-IP MMDB lookup, when available,
 - `ua` — raw `User-Agent` string,
 - `ua_pretty` — compact display form of the UA (browser/OS/device) when
  parsable, otherwise the raw string.
 Each `Visit` record:
 - `start` — timestamp of the first event,
 - `entry` — first page (path) seen,
 - `referer` — external https origin of the initial load, `""` for direct,
 - `client` — 6-byte blake3 hash referencing `Analytics.clients`,
 - `trail` — everything seen afterwards in first-seen order: page paths and
  external exit URLs. Re-visiting an already seen page (incl. the entry)
  does not append.
 - `utm` — `utm_*` query parameters from the landing URL, as a dict.
 - `read` — active reading time per path (seconds), keyed by path.
 Each `CrawlerHit` record:
 - `start` — timestamp of the document GET,
 - `entry` — page path requested,
 - `client` — 6-byte blake3 hash referencing `Analytics.clients`,
 - `referer` — external https origin of the request, `""` for direct/none,
 - `query` — raw query string of the request.
 Each `AbuseHit` record:
 - `start` — timestamp of the request,
 - `path` — full request path including the query string (e.g. `/.env?x=1`),
 - `client` — 6-byte blake3 hash referencing `Analytics.clients`,
 - `flag` — true for the path that triggered abuse classification (telltale
  path or the 404 that crossed the threshold),
 - `is_404` — true for 404 responses, false for document GETs from the
  abuser.
 Crawler hits are grouped by client hash in the analytics viewer; abuse hits
 are grouped by IP alone (resolved from the referenced `Client`).  In the
 Abuse table identical paths are collapsed with their counts; flagged paths
 that triggered classification are lifted to the top, followed by other 404s
 and then document GETs from the abuser.  Within each category paths are
 sorted by count descending, then by their earliest hit.
 ## Aggregates
 - `transitions`: time series of page transitions, sparse nested dict
  `from -> to -> bucket -> count` with the same 5-minute bucketing as
  `views`. `from` is the referer origin or `"(direct)"` for initial loads,
  a page path for pings.
 - `views`: time series of page loads, `path -> bucket -> count`, sparse: only
  non-zero 5-minute buckets exist (bucket key is its floored ISO timestamp).
  Every load counts, including repeats within a visit; external exit origins
  are not page views and are not counted here.
 - `site_visits`: `bucket -> count` of new visits started, same sparse
  5-minute bucketing.
 Sparseness keeps quiet sites small; dropping old data is a matter of deleting
 list/dict entries (`visits` is a plain append-only list, buckets plain keys).
 ## Persistence
 The whole `Analytics` struct is JSON-encoded and written atomically
 (temp file + rename) on every recorded event. Traffic on a small CMS makes
 this cheap enough; batching can be added later without changing the format.
 ## Viewing
 The 📊 pen in the banner corner (admins only, injected by pagerite.js next to
 the edit pens) links to `/_a`, the analytics page. It is a normal site page:
 the standard banner, navigation and footer stay in place, and the analytics
 content is rendered inside `#main`. The page itself is public, but the data
 stream comes from `WebSocket /_api/ws/analytics`, which remains admin-gated
 like the rest of the management API; visitors without access see the viewer
 with a "could not be loaded" message.
 Because it is a real page, fetch-navigation handles it like any other internal
 link: clicking the 📊 pen (or any link to `/_a`) fetches the server-rendered
 HTML, swaps the dynamic regions and mounts the Vue analytics app in place. The
 range selector updates the URL hash (`#week` etc.) so links to a specific
 range can be shared.
 `AnalyticsView.vue` is no longer a full-screen overlay; the `body.analytics-open`
 page-chrome hiding and `#/analytics/<range>` hash routing have been removed.
 Charts are SVG curves (Catmull-Rom over an edge-aware adaptive Gaussian —
 a change-point detector splits the series at traffic-level shifts, then
 each segment is smoothed with a bandwidth that ramps with a broad pilot
 estimate of the local rate: isolated events stay narrow (~0.4-unit sigma,
 peaking at ~1 event/unit), busy traffic widens to a 1-unit sigma. The raw
 series is drawn faint underneath). Values are
 **per-unit rates** — per hour on the week view (5-minute bucket counts × 12,
 plotted at native 5-minute resolution), per day on the month+ ranges — and
 the smoothing time scale follows the unit: the month+ sigmas are 24× the
 hourly ones. The y max is derived from the smoothed curves so single-bucket
 spikes don't blow up the scale, and raw spikes are clamped into the plot.
 Axes always start at 0 and end at a multiple of a 1-2-5 major step (max 5
 labeled intervals, minor lines at fifths when integral; the minimum y-axis
 range is 10 so tiny values such as a single visit are not stretched to a
 fractional scale).
 The week range is aligned to Monday 00:00 UTC and overlays up to 8 previous
 weeks in the same accent color at decreasing opacity (the current week is
 truncated at the current bucket, never drawing fake zeroes for the future);
 its x labels are weekday names centered at midday UTC, without vertical grid
 lines (day boundaries would be misleading in the viewer's timezone). The
 month view labels days the same lineless way — day numbers at noon UTC,
 with the month name substituted for the 1st. Year is a rolling 365-day window ending at now, re-bucketed to daily points,
 with boundary lines at months/years.  All uses the full data reach, but keeps
 at least the past 30 days so the chart never collapses to a tiny sliver when
 the site is young. Below the charts: a radial **transition map** (all pages from
 `/_api/pages` — front page at the center, each slug level on its own ring,
 siblings clockwise in navigation order from the top, radial gap equal to
 the arc spacing — opposite transition directions joined into organic
 tapered connections whose middle width grows logarithmically with the
 count (a single count renders as a ~1 px line, uncapped), connections
 carrying less than 1% of the total traffic
 pruned; beads are simulated one by one in JS (requestAnimationFrame) and
 flow along each edge, emitted at a rate linearly proportional
 to the directional count with no in-flight limit, opposing directions
 offset onto parallel lanes. External sources show as a node row above the
 map: each visit is attributed to `utm_campaign`, then `utm_source`, then the
 referer origin, then any other `utm_*` tag, so UTM-tagged visits are grouped
 under their campaign/source value rather than the referer domain. A UTM
 source node only links to its referer when every visit carrying that tag
 came from the same origin. External exits are small nodes fanned outwards
 from their source page), per-page view
 counts, the top transitions and the 50 most recent visit trails. Data is
 streamed live over `WebSocket /_api/ws/analytics`, which pushes the latest
 JSON snapshot on connect and again whenever the analytics file is updated
 (with a small server-side debounce to avoid flooding under high traffic).
@@ -0,0 +1,29 @@
 # Backend
 The Python backend lives in `pagerite/`.
 ## `app.py`
 The FastAPI app. FastAPI's built-in API docs are disabled (`docs_url`/`redoc_url`/`openapi_url=None`) because `/docs` belongs to our content. Our own routes (content pages, `/_api/...`, `/_f/...`) are registered BEFORE `frontend.route(app, "/")` is called: fastapi-vue inserts its file routes at the position where `route()` was called (during `load()` in the lifespan), so anything defined earlier wins. The one exception is the content catch-all `/{path:path}`, registered AFTER `frontend.route()` so that built frontend assets still take priority over content slugs. The `Frontend` is constructed with `spa=False` explicitly: it only serves the built files without a catch-all.
 The build mirrors the URL space — hashed immutable assets under `/_assets/`, `favicon.ico` at the site root — and an `index.html` in the build would become a `/` route, so leave it out of the build to keep `/` ours.
 ## `data.py`
 msgspec Structs for the kanta database. See `docs/content-model.md` for the full data model.
 ## `markdown.py`
 markdown-it-py renderer (html passthrough + attrs, footnote, deflist, tasklists, admon, gfm_autolink, sub/superscript plugins; typographer + breaks on). Custom image rule: relative srcs resolve against the page path; an image standing alone in its paragraph becomes a figure (captioned when titled), while inline-with-text images and raw `<img>` HTML stay plain. A `{dates}` line expands to the article's published/updated dateline (`p.dateline`, from `Node.created`/`modified`; left literal in previews of unsaved pages).
 ## `views.py`
 The shared page layout as an html5tagger `Template` with placeholders (`Title`, `Brand`, `Banner`, `Nav`, `Sidebar`, `Main`), nav rendering straight from the `Data.menu` tree (siblings sorted by `Node.order`; nav links to content-less labels point at their first child via `first_leaf`, the first published descendant with content), and page/404 rendering.
 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 request base URL; `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).
 The navbar holds top-level items only; the current section's subitems go to a left `#sidebar` as a nested list (the section's direct children plain, deeper levels indented with article-list-style markers), which is rendered when the section offers at least two published items, or exactly one while viewing anything other than that only page — the section index, a 404, a grandchild (so those pages can reach the child), and also on that only page itself when it has published children of its own; no aside element at all on the front page, leaf pages and the sole childless page of a one-page section. Also, category labels are nodes without content — None *or* empty markdown — and their nav links point at their first child page. Dynamic regions have stable ids (`#page-banner`, `#nav`, `#sidebar`, `#main`) for fetch-navigation swaps (`#sidebar` may be absent on either side of a swap).
 ## `seed.py`
 Demo content written only when the database is first created, via a `@kanta.bootstrap` handler in `app.py`.
@@ -0,0 +1,35 @@
 # Content model
 The site structure is stored in the kanta database managed by `pagerite/data.py`.
 ## Site tree
 `Data.menu` maps top-level slugs to `Node`s, each with `children` keyed by slug — the URL path is the slug chain. The front page is whichever top-level node has slug "" (parallel to the other main level pages, not their parent); it cannot have children, and renaming its slug away leaves no front page ("/" redirects to the first nav item).
 `Node.content` is the Markdown page, or None for a pure category label whose URL renders a placeholder page (while nav links to it point at its first child); every label's title and slug are editable.
 Siblings order by the fractional `Node.order` key: a moved item gets a fresh key relative to its new siblings, all others keep theirs. `resolve`/`find_slot` walk the tree by path; moves are slot detach/attach carrying the whole subtree. Legacy flat `Data.pages` (pre-tree databases) migrates into `menu` on startup. The app owns the `Data` object; reads are plain attribute access, writes in `kanta.transaction(...)`.
 `Data.version` is bumped on every write and embedded in page ETags so nav-affecting changes invalidate caches.
 ## 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.
 ## Banners
 `Node.banner` is a raw trusted HTML snippet for the header banner (img, styled div, canvas+script...); empty inherits from the node's ancestors (front page last). It is rendered AFTER the banner design's artwork, so author code (e.g. a `<style>` override) always wins over the design's own styles.
 `Node.banner_design` picks a banner design: a theme folder name whose `banner.css` styles it and whose `banner.html` (arbitrary markup: canvas + style + script) or `banner.svg` supplies the inline artwork (wrapped in `div[data-design]`); "" = explicitly no design, None = inherit (nearest ancestor, front page last, then the active theme's own design if it ships banner.css/banner.svg/banner.html). The design's banner.css is linked in `<head>` (id `pagerite-banner`) between the theme and the custom CSS.
 ## Site settings
 `Data.brand` is the site name (header link + `<title>` suffix), editable in the site editor via `/_api/settings`; empty = no header link and no `<title>` suffix.
 `Data.brand_html` is raw trusted HTML replacing the brand link entirely (rendered in a `#brand` div on top of the banner, next to the nav) — site-wide, not per-page like banners; edited in the site editor with image/video upload into `Data.files`.
 `Data.theme` is the active theme name (empty = none/base only); themes are folders in `pagerite/themes/{name}` containing `theme.css` and/or `banner.css` (+ `banner.svg` artwork and any extra assets the CSS references, like summer's `grass.svg`), served by the backend at `/_themes/{name}/...` — read from disk per request (etag by mtime), never built, so on-disk edits show on the next page load even in prod. The theme selector and banner-design selector enumerate these folders via `GET /_api/settings`.
 `Data.custom_css` is raw trusted CSS injected inline in every page `<head>` (id `pagerite-user`) and swapped during fetch-navigation; editable in the site editor. Font picks (heading/body/brand) in the site editor are stored as plain `:root` rows in `custom_css` (`--font-body: var(--font-source-sans);` format — parsed out and rewritten on change, the `:root` block added/removed as needed), referencing the per-family variables (`--font-source-sans` etc.) from `pagerite.css`; the base stylesheet's `--font-brand` defaults to `var(--font-heading)`.
 `Data.favicon` names a file in the content-addressed `files` store, uploaded/cleared in the site editor via `PUT`/`DELETE /_api/settings/favicon`; when set it is linked as `<link rel="icon">` on every page, otherwise browsers fall back to the build's `/favicon.ico` by convention.
@@ -1,234 +1,55 @@
 # Pagerite Design Principles
-Pagerite is a single-user CMS/blog. This document records the initial
+Pagerite is a single-user CMS/blog. This document records the initial high-level design decisions; it will be refined as the implementation evolves.
 high-level design decisions; it will be refined as the implementation
 evolves.
 ## Architecture
- **Server-side rendered.** FastAPI serves complete HTML pages, generated in
+- **Server-side rendered.** FastAPI serves complete HTML pages, generated in Python with **html5tagger**. There is no client-side templating or SPA for the public site.
-  Python with **html5tagger**. There is no client-side templating or SPA for
+- **Vue only where interactivity demands it.** Small interactive islands (editing tools mainly) are Vue components mounted into specific elements of the server-rendered pages. The public reading experience has no scripting requirement.
-  the public site.
+- **Persistence via kanta.** Content is stored in an asyncio-friendly kanta database. Rendering happens on the fly on each request — there are no pre-built static artifacts.
 - **Vue only where interactivity demands it.** Small interactive islands
  (editing tools mainly) are Vue components mounted into specific elements of
  the server-rendered pages. The public reading experience has no scripting
  requirement.
 - **Persistence via kanta.** Content is stored in an asyncio-friendly kanta
  database. Rendering happens on the fly on each request — there are no
  pre-built static artifacts.
 ## Content model
- Pages and blog articles are fundamentally the same kind of thing: named
+- Pages and blog articles are fundamentally the same kind of thing: named pieces of content. The blog/website distinction is blurred; an article is just a page (possibly with metadata such as a publication date and listing in a feed).
-  pieces of content. The blog/website distinction is blurred; an article is
+- **Pretty URLs.** Content is addressed by its name (slug), not by technical constructs — no `/cms/...` or `/blog/post1` prefixes. Slugs usually live directly at the site root; structured content may nest (`/docs/design-principles`-style). The URL space is the author's, so reserved prefixes must be kept few and deliberate: everything internal lives under `/_` (`/_api/`, `/_f/`, `/_assets/`). The only other reserved root path is `/favicon.ico`, served from the build. Slugs are lowercase ASCII letters, digits, hyphens and underscores (`[a-z0-9_-]`; input is transliterated and filtered as you type, and a new page's empty slug is derived from its title), may not begin with `_` or `.`, and such URLs are never looked up as content.
-  just a page (possibly with metadata such as a publication date and
+- **Single user, trusted author.** No auth concerns in the core design. Everything published is public; only editing tools will later sit behind access control (external SSO when that time comes). The author is trusted to create well-meaning slugs and content — no sanitization for safety, only for correctness.
-  listing in a feed).
+- **Commenting** is not planned now but the model should not preclude it later.
 - **Pretty URLs.** Content is addressed by its name (slug), not by technical
  constructs — no `/cms/...` or `/blog/post1` prefixes. Slugs usually live
  directly at the site root; structured content may nest
  (`/docs/design-principles`-style). The URL space is the author's, so
  reserved prefixes must be kept few and deliberate: everything internal
  lives under `/_` (`/_api/`, `/_f/`, `/_assets/`). The only
  other reserved root path is `/favicon.ico`, served from the build.
  Slugs are lowercase ASCII letters, digits, hyphens and underscores
  (`[a-z0-9_-]`; input is transliterated and filtered as you type, and a
  new page's empty slug is derived from its title), may not begin with
  `_` or `.`, and such URLs are never looked up as content.
 - **Single user, trusted author.** No auth concerns in the core design.
  Everything published is public; only editing tools will later sit behind
  access control (external SSO when that time comes). The author is trusted
  to create well-meaning slugs and content — no sanitization for safety,
  only for correctness.
 - **Commenting** is not planned now but the model should not preclude it
  later.
 ## Authoring format
- Content is written in **Markdown** with powerful extensions (tables,
+- Content is written in **Markdown** with powerful extensions (tables, footnotes, code highlighting, etc.).
-  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.
- **Embedded HTML is passed through unfiltered**, including inline scripts
+- Renderer: **markdown-it-py** with mdit-py-plugins (footnotes, definition lists, task lists, brace-attributes; tables and strikethrough from the default preset), with `html=True` for raw passthrough, `typographer=True` for SmartyPants-style replacements in body text (curly quotes, `--` / `---` → en / em dashes, `...` → ellipsis, `(c)` → ©, etc.), and `breaks=True` so single line breaks inside paragraphs become `<br>`. Code spans/blocks and raw HTML are left untouched. Fenced code blocks are highlighted server-side with **Pygments** (`nowrap` spans styled by `/_assets/pygments-*.css`, which maps every token class onto the `--code-*` variables; the base stylesheet defines light and dark palette sets resolved via `light-dark()`, so each theme gets the set matching its `color-scheme` and may only retint `--code-bg` to keep the well in the page's color family); a JS copy button appears on hover. Should this prove limiting, we implement our own renderer on top of html5tagger, which we already use for all HTML generation.
-  and other dynamic content the author wants to post. This is safe by the
+- **Files are content-addressed.** Uploads (`PUT /_api/files/{filename}`) are stored by content hash — blake3, first 6 bytes hex + original extension — and served immutable from `/_f/{hash}.ext`. Absolute URLs that survive page renames and dedupe identical content; pages no longer own files. An image standing alone in its paragraph becomes a block `<figure>` — with `<figcaption>` when it has a title; images inline with text and raw `<img>` HTML stay plain inline images. Positioning is by attribute classes: `![alt](/_f/….avif "Caption"){.right}` — `{.right}`, `{.left}` float at 30% of the text column (the caption wraps within it; an explicit `width=300` makes the figure shrink-wrap the image instead), `{.wide}` goes full bleed (viewport edge to edge, or up to the docked editor; the sidebar stacks on top of it); plain attributes like `width=300` work too. Headings (h1/h2) clear floats, so images never overflow into the next section.
  single-trusted-author assumption above.
 - Renderer: **markdown-it-py** with mdit-py-plugins (footnotes, definition
  lists, task lists, brace-attributes; tables and strikethrough from the
  default preset), with `html=True` for raw passthrough. 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 with a title becomes a `<figure>` with
  `<figcaption>`. 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` overrides on uncaptioned images),
  `{.wide}` goes full bleed (viewport edge to edge, or up to the docked
  editor; the sidebar stacks on top of it); plain attributes like `width=300`
  work too. Headings (h1/h2) clear floats, so images never overflow into the
  next section.
 ## Page structure and navigation
- All pages share one static layout, defined once as an **html5tagger
+- 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`).
-  Template** with capitalized placeholders (`Title`, `Banner`, `Nav`,
+- 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).
-  `Sidebar`, `Main`) filled per request. The dynamic regions carry stable
+- **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.
-  ids (`#page-banner`, `#nav`, `#sidebar`, `#main`).
+- **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 page top is a **full-width banner header** with the site name and the
+- **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.
-  navigation bar overlaid on it — no separate chrome header. The banner is
+- **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.
  **per-page configurable**: `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; when nothing in the
  chain sets one, the active theme's banner artwork shows. That artwork is
  an **inline SVG** (`pagerite/themes/{name}/banner.svg`) the backend
  inlines into `#page-banner`: as markup it can be recolored from the theme
  stylesheet (corporate's single SVG serves both light and dark mode via
  `var()`-driven stops) and it is never rendered underneath a user banner.
  The base stylesheet falls back to a plain gradient. There is deliberately
  no scrim fading the banner into the page background — any such fade would
  ruin user-supplied designs; themes that want one bake it into their SVG
  (purple does).
 - **Fetch-navigation.** Links are plain `<a href>`; a small script
  (`frontend/src/pagerite.js`) intercepts same-origin clicks, fetches the
  page, and swaps the `#page-banner`, `#nav`, `#sidebar` and `#main` regions,
  the document title, and the site-wide custom CSS (`<style id="pagerite-user">`
  in `<head>`), keeping the rest of `<head>` and the layout chrome. Without JS
  everything works as normal page loads. Scripts inside fetched banner and
  content regions are re-created so they execute. Swaps run inside `document.startViewTransition` for a rotating
  cube page transition (CSS adapted from termotohtori.fi — the
  `::view-transition*` block is fragile, do not tweak; skipped under
  `prefers-reduced-motion`). Navigation within the same top-level section
  crossfades instead of rotating; browser back navigation rotates in
  reverse.
 - **The site structure is a tree of labels.** `Data.menu` holds the
  top-level items by slug, each with `children` keyed by slug — the URL
  path is the slug chain. The front page is a top-level node with slug ""
  (an item *parallel* to the other main level pages, not their parent) and
  cannot have children. The header navbar holds only the top level; a
  top-level item is highlighted when viewing any of its subpages. When the
  current page is inside a main level section with children, those direct
  children are listed in a **left sidebar** (`#sidebar`), one level deep.
  The sidebar exists only when there is something to navigate — sections
  with fewer than two published items, leaf pages and the front page render
  no aside element at all. Other sections' subitems
  are never shown without navigating into them first.
 - **Landing pages are optional.** Every label can either have content
  (`Node.content`, a Markdown page) or none — a content-less label renders
  a placeholder page (404 with a pen to create it) instead of redirecting,
  while nav links to it point straight at its first child, so categories
  need no filler content and normal navigation never sees the placeholder.
  Title and slug of every label are editable; renaming a
  slug moves the whole subtree. The sidebar never lists the section
  itself, avoiding title duplication with the navbar.
 - **Menu order is manual.** Each node has a fractional `order` key among
  its siblings; reordering/moving writes only the moved node (it takes a
  fresh value halfway between its new siblings; all other items keep
  theirs). New pages append at the end of their menu. Structure edits
  (reorder, move/rename with the whole subtree, retitle) go through
  `POST /_api/structure` and the editor's structure panel.
 - 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
+- The article column is sized by the **viewport, never by content**: a symmetric grid (`1fr minmax(0, 78rem) 1fr`) with flexible gutters keeps the layout stable across navigation. The sidebar occupies the left gutter, the right gutter balances it; wide screens get columns inside long articles without changing the article's width.
-  symmetric grid (`1fr minmax(0, 78rem) 1fr`) with flexible gutters keeps
+- A gentle **scroll-reveal** of headings, figures and block-level elements (IntersectionObserver). It is layout-level: articles need no support for it, and `prefers-reduced-motion` disables all motion.
  the layout stable across navigation. The sidebar occupies the left
  gutter, the right gutter balances it; wide screens get columns inside
  long articles without changing the article's width.
 - A gentle **scroll-reveal** of headings, figures and block-level elements
  (IntersectionObserver). It is layout-level: articles need no support
  for it, and `prefers-reduced-motion` disables all motion.
 ## Styling
- The base stylesheet `frontend/src/assets/pagerite.css` provides the layout,
+- The base stylesheet `frontend/src/assets/pagerite.css` provides the layout, typography and interaction rules with conservative CSS variables. A theme layer (`pagerite/themes/{name}/theme.css` — currently `purple`, `corporate` and `nitro`, served by the backend at `/_themes/{name}/theme.css` straight from disk, never built) overrides those variables and adds the visual styling; `Data.theme` selects the active theme (empty = none/base only) and the site editor can switch it, choosing from the theme folders found on disk. Vue may add per-component styles on top where needed. The corporate and nitro themes switch palettes automatically via `prefers-color-scheme` (corporate is light-first with a matching dark palette; nitro a warm light-grey page or, in dark mode, a deep violet one — its dark banner and orange accents carry over unchanged); purple (dusk) uses one fixed palette for everyone. Themes may restyle structural details the base leaves plain — heading colors and underlines, list markers, nav treatment, brand sizing. A theme folder may also ship a **banner design** (`banner.css` + `banner.svg`), selectable per page independently of the active theme. The banner artwork has scroll parallax: pagerite.js sets the `--pry` scroll parameter on `<html>` (event-driven, so it is still when the page is idle), the banner contents drift within their window (with scale overscan so no edge shows), and designs may key their own effects off the same parameter — purple's sun rises as you scroll.
-  typography and interaction rules with conservative CSS variables. A theme layer
+- Fonts, the shared stylesheet and pygments styles live under `frontend/src/assets/` and are emitted as hashed assets under `/_assets/` (Source Serif 4 for headings, Source Sans 3 for body, Fira Code for code by default; Fraunces, Literata, Cormorant, Playfair Display, Inter, Montserrat, Cause, Exo 2 and New Rocker kept as woff2 options with local `@font-face`, variable-weight where available). No third-party requests.
  (`frontend/src/assets/themes/{name}/theme.css` — currently `purple`, `corporate`
  and `nitro`) overrides those variables and
  adds the visual styling; `Data.theme` selects the active theme (empty = none/base
  only) and the site editor can switch it. Vue may add per-component styles on top
  where needed. The corporate and nitro themes switch palettes automatically via
  `prefers-color-scheme` (corporate is light-first with a matching dark palette;
  nitro a warm light-grey page or, in dark mode, a deep violet one — its dark
  banner and orange accents carry over unchanged); purple (dusk) uses one
  fixed palette for everyone. Themes may restyle structural details the base
  leaves plain — heading colors and underlines, list markers, nav treatment,
  brand sizing. 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 themes may key their own effects off the
  same parameter — purple's sun rises as you scroll.
 - Fonts, the shared stylesheet and pygments styles
  live under `frontend/src/assets/` and are emitted as hashed assets under
  `/_assets/`
  (Source Serif 4 for headings, Source Sans 3 for body, Fira Code for code
  by default; Fraunces, Literata, Cormorant, Playfair Display, Inter,
  Montserrat, Cause, Exo 2 and New Rocker kept as woff2 options with
  local `@font-face`, variable-weight where available). No third-party
  requests.
 ## Editing
 - Editing happens **in place**, in two modes opened by two pens:
-  - **Page mode** — the 🖊️ next to a page's heading (including 404s, which
+  - **Page mode** — the 🖊️ next to a page's heading (including 404s, which is how new pages start) opens a CodeMirror Markdown editor docked to the left of the article: the host sits inside `#content` (below the banner, never over the footer), the content shifts right and the sidebar hides while editing. Preview renders server-side per keystroke (no debouncing) straight into the visible article's heading and body.
-    is how new pages start) opens a CodeMirror Markdown editor docked to
+  - **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.
-    the left of the article: the host sits inside `#content` (below the
+- 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.)
-    banner, never over the footer), the content shifts right and the
+- **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.
-    sidebar hides while editing. Preview renders server-side per keystroke
+- 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.
-    (no debouncing) straight into the visible article's heading and body.
+- 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.
-  - **Site mode** — the 🖊️ on the banner opens a panel with the site
+- 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}`.
-    **brand** (applied to the header live), a **theme** selector (swapping
+- On startup, seed pages from `pagerite/seed.py` are added **only if missing** — existing user content is never overwritten.
    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 HTML** field (previewed into the
    real banner region, so you see exactly which banner you're editing) and
    the **structure tree**. Everything saves immediately as you edit — no
    save button, no edit mode.
 - Clicking a pen again closes the editor (without saving; a dirty preview
  reloads the page). The pens are `<button>`s wired up by `pagerite.js` —
  editing is an action, not a navigation. The editor's WebSocket
  **reconnects automatically** with local text and pending saves preserved.
  (All users are trusted authors for now; access control later with
  SSO.)
 - **CodeMirror 6** for Markdown editing (no WYSIWYG), title/published
  controls.
  Images can be pasted straight into the editor or chosen via a file
  input: they upload to the content store (`PUT /_api/files/...`) and
  insert `![alt](/_f/hash.ext)` at the cursor.
 - The **structure panel** (vue-draggable tree of the whole site, in site
  mode) covers page management: reorder any menu level, drag across
  sections, add, delete (two clicks: the button arms, then deletes — no
  dialogs). Every node is a real label — content-less category rows offer
  a ➕ to give them a landing page.
  Deleting a category removes only its landing page (the label and its
  subpages stay). Every non-empty list ends with a ➕ row that starts a
  new page as a local-only tree row at that level; the row can be dragged
  into place before its title and slug are filled in and is persisted only
  on commit. While dragging, these ➕ rows double as "end of this list"
  drop targets; dropping ON the lower part of a row makes the page that
  row's first child (even a leaf's, creating a sublist), while a row's
  exposed top edge inserts a sibling before it. A dragged row's
  indentation previews the target list's depth. Rows are always
  editable: titles save while typing, slug edits commit on blur/Enter
  since they rename the path (moving the whole subtree). The front page
  is the root row with an empty slug — renaming it away leaves no front
  page ("/" redirects to the first nav item), and giving another
  top-level row the empty slug makes it the front page.
 - Preview and saving go over a **WebSocket** (`/_api/ws/editor`) with a
  stateless JSON protocol (`open`/`render`/`save`; on save all fields are
  optional and absent ones keep their old values, `move_from` renames),
  avoiding REST polling and races. Rendering always stays server-side.
 - A REST API also exists for scripting, all under `/_api/`:
  `GET pages` (the full tree), `PUT/DELETE pages/{path}`,
  `GET/PUT settings` (site brand, theme and custom CSS), `POST structure`
  (reorder/move/retitle), file upload/removal via `PUT/DELETE files/{name}`.
 - On startup, seed pages from `pagerite/seed.py` are added **only if
  missing** — existing user content is never overwritten.
@@ -0,0 +1,30 @@
 # Editing interface
 The Vue editor is a single tabbed `EditorShell.vue` mounted in a host div created inside the static document.
 ## Tabs
 The shell hosts four kept-alive tabs (ordered site-wide first — site, structure — then, after a visual break, the per-page tabs — article, banner):
 - `PageEditor.vue` — CodeMirror + server-rendered preview over WebSocket `/_api/ws/editor`, previewing into the visible article; editor scroll drives the article scroll — while any editor is open the window scroll is locked (`body.editing`), the panel exactly fills the available window height, and only `#main` scrolls; a format bar offers Markdown helpers — bold/italic/code/link/table/image upload, with Ctrl/Cmd-B/I/S bindings — for the hard-to-remember syntax. Edits content and title only, never the path.
 - `BannerEditor.vue` — per-page banner HTML + banner design selector, previewed into `#page-banner`.
 - `SiteEditor.vue` — site brand + optional custom brand HTML with image/video upload + theme selector + font picker + favicon upload — clicking the preview tile picks a new one — + site-wide custom CSS, CSS injected into `<head id="pagerite-user">`.
 - `StructureEditor.vue` — the vue-draggable structure tree with always-editable title/slug inputs per row.
 Media uploads everywhere use the image icon buttons (pasting into the editor works too). The article, banner and site-settings pens are shorthands that open the shell on the matching tab; once open, clicking a pen switches tabs (and retargets the editors to the current page) instead of closing/remounting. The close button in the tab bar closes the shell (Escape too); tabs have no close buttons of their own. Closing only HIDES the shell — the Vue app stays mounted, so page-editor state (unsaved text included) survives until a real page reload; saving there is explicit (Ctrl+S) and refreshes the page regions in place. Admin panels never reload the page.
 In-place page re-rendering shared by the banner/site/structure tabs lives in `swapdoc.js` (`runScripts`/`loadPlain`: fetch a page, swap the dynamic regions, replaceState). Placeholder texts are reserved for showing the actual default in effect when a field is left empty (e.g. the pending row's slug derived from its title); labels and help are real elements or tooltips, never placeholders.
 ## Saving behavior
 Everything saves immediately as you edit (brand/title/CSS debounced, slug on commit since it renames the path), theme change swaps the stylesheet in place, tree rows navigate in place without transitions when focused, and the front page is a root-only row whose empty slug is editable like any other.
 Every non-empty list (and the root) ends with a non-draggable plus footer row (vuedraggable `#footer` slot): clicking it starts a new pending page at that level (its slug placeholder shows the slug derived live from the title being typed), and while dragging it is the list's "end of list" drop target. Committing a pending page PUTs it with empty markdown (creates an empty page that renders with its title — saving never deletes; deletion is the page editor's explicit choice: saving trimmed-empty text issues a REST DELETE), then switches to the page editor tab for the actual writing.
 Dropping ON the lower part of a row moves the page under that row (the child list's container invisibly overlaps its own row's bottom via negative margin — Sortable inserts it as the first child natively), while a row's exposed top edge inserts a sibling before it. Row indentation is structural (each nested list margin-indents itself), so a dragged row previews its whole subtree at the target list's depth.
 The shell is dynamic-imported onto the content page by pagerite.js when an edit pen is clicked (the pens are injected by pagerite.js after the session validates; they carry `data-editor-src`/`data-editor-css`/`data-editor-mode`). In dev, modules load from the Vite dev server (`PAGERITE_VITE_URL`), in prod from the hashed build assets resolved via `frontend-build/.vite/manifest.json`.
 `vite.config.js` sets `appType: 'mpa'` (no SPA fallback) and builds with `manifest: true`, `assetsDir: '_/assets'` (so the build mirrors the URL space; `frontend/public/favicon.ico` lands at the build root and is served at `/favicon.ico`). JS inputs are `src/main.js` and `src/pagerite.js`, plus `src/assets/pagerite.css` as a separate stylesheet entry; theme and banner-design CSS are NOT built — they live in `pagerite/themes/{name}/` and are served by the backend. There is no `index.html` source (it would shadow `/` and turn missing dev paths into an empty Vue shell). All outputs are ES modules. The build sets `preserveEntrySignatures: 'exports-only'` because main.js is consumed via dynamic `import()` for its `openEditor`/`closeEditor` exports — Vite app builds otherwise strip unused entry exports, leaving dead edit pens. In dev the backend links theme/banner-design stylesheets like in prod (`/_themes/...`); only the base CSS is Vite-injected from JS, and pagerite.js then re-appends the `#pagerite-theme`/`#pagerite-banner`/`#pagerite-user` elements to restore the canonical order (base < theme < design < custom CSS). Theme switches in the site editor simply swap the `#pagerite-theme` link href, identically in dev and prod.
 `vite-plugin-fastapi.js` has an auto-upgrade marker — edit `vite.config.js`, not the plugin.
@@ -0,0 +1,25 @@
 # Frontend runtime
 The public page runtime lives in `frontend/src/`.
 ## `main.js`
 Vue editor app entry, mounts the tabbed `EditorShell`. See `docs/editing.md` for the editor UI.
 ## `pagerite.js`
 Public page entry; runs fetch-navigation (backed by an in-memory page cache: every visible internal link — and the current page — is fetched once at load, clicks are then served from JS with no fetch, and the editors' `loadPlain` keeps the cache current via a `pagerite:page-fetched` event; articles are `cache-control: no-cache` on the wire), scroll-reveal, OverlayScrollbars on `document.body` (floating, auto-hiding scrollbars that never reserve layout space or shift the page when appearing; native scroll APIs like `window.scrollTo` keep working; themed via the `--os-*` variables in pagerite.css), brand shrink-to-fit (the themed size is the maximum; JS reduces the font-size so a long brand or narrow viewport still fits one line), code copy buttons, and the auth check.
 It first probes `GET /auth/api/settings` to detect whether Paskia SSO is available, then `GET /_api/settings` to learn the current session's admin status. The same reverse proxy that gates `/_api` returns 401 for anonymous users, 403 for users without the admin permission, and 200 for admins. When Paskia is detected, a login link (anonymous) or profile link (logged in) is shown in the banner corner; both are plain `<a href="/auth/">` links (Paskia does not support being iframed, so we navigate normally), and a `pageshow` handler re-probes auth when history navigation restores a cached page. Admins also get the page/banner edit pens and a site-settings pen (asset URLs from the `pagerite:editor-src`/`-css` meta tags). If no Paskia SSO is detected (dev/no proxy), editing is left open. Pages themselves render identically for everyone; the real gate is the auth proxy in front of all of `/_api`. The backend links the stylesheets in a fixed order — base (Vite build), theme, banner design, custom CSS last — each with a stable id so the site editor can swap them in place.
 ## `assets/`
 Shared styles and data files built by Vite and served hashed under `/_assets/`: `pagerite.css` (base layout + conservative variables), `pygments.css`, and `fonts/` (self-hosted Source Sans 3/Source Serif 4/Fraunces/Literata/Cormorant/Playfair Display/Inter/Montserrat/Fira Code/Cause/Exo 2/New Rocker variable woff2).
 The `::view-transition*` block at the end of `pagerite.css` (from termotohtori.fi) is fragile — do not tweak. Themes 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.
 Vite builds ES-module `.js` outputs; the backend renders `<script type="module">` for them (module scripts defer by default).
 ## Database file
 The database file is `pagerite.kantadb` in the cwd (`PAGERITE_DB` overrides); gitignored. Do not delete it without asking.
@@ -0,0 +1,5 @@
 # Pagerite overview
 Pagerite is a single-user CMS/blog. FastAPI serves HTML rendered in Python with html5tagger; content is persisted in a kanta database and rendered on the fly per request. Vue is used only for interactive bits (editing tools), not for the public pages.
 See `docs/design-principles.md` for the high-level design and the other `docs/*.md` files for implementation details.
@@ -0,0 +1,37 @@
 # Themes and assets
 ## Built assets
 Files under `frontend/src/assets/` are built by Vite and served hashed under `/_assets/`:
 - `pagerite.css` — base layout + conservative variables.
 - `pygments.css` — Pygments token styles mapped onto the `--code-*` variables.
 - `fonts/` — self-hosted variable woff2 files for Source Sans 3, Source Serif 4, Fraunces, Literata, Cormorant, Playfair Display, Inter, Montserrat, Fira Code, Cause, Exo 2 and New Rocker.
 The `::view-transition*` block at the end of `pagerite.css` (from termotohtori.fi) is fragile — do not tweak.
 ## 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.
 `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.
 Current themes:
 - `purple` — dark dusk palette with Fraunces/Literata and a tilted oversized gradient brand.
 - `corporate` — light-first with automatic `prefers-color-scheme` dark mode, Montserrat/Inter and a huge solid brand.
 - `nitro` — racing/HUD style following `prefers-color-scheme` (warm light-grey page, deep violet in dark), Montserrat/Literata, black as an accent only, a straight orange blade under the banner, and an orange racing-tab nav clipped with a bezier `shape()`.
 - `summer` — light playful meadow, one palette sampled from its illustrated `banner.svg` (sky/grass/sun/flower pink), Fraunces/Literata, a tilted gradient brand, flower bullets, and a layered-parallax banner (sun rises, clouds drift, nearer hills move less) with idle animations (swaying flowers, floating clouds, breathing sun glow) wrapped in `prefers-reduced-motion: no-preference`.
 ## Banner designs
 A theme folder may also ship a banner design (`banner.css` + `banner.html` arbitrary markup or `banner.svg`), selectable per page independently of the active theme. Standalone banner designs (no theme.css) ship as:
 - `eyes` — a canvas critter in the grass.
 - `stars` — a drifting starfield.
 The banner artwork has scroll parallax: pagerite.js sets the `--pry` scroll parameter on `<html>` (event-driven, so it is still when the page is idle), the banner contents drift within their window (with scale overscan so no edge shows), and designs may key their own effects off the same parameter.
 ## Stylesheet order
 The backend links the stylesheets in a fixed order — base (Vite build), theme, banner design, custom CSS last — each with a stable id so the site editor can swap them in place. The base stylesheet's `--font-brand` defaults to `var(--font-heading)`.
@@ -18,6 +18,8 @@
    "@codemirror/view": "^6.43.8",
    "@lezer/highlight": "^1.2.3",
    "codemirror": "^6.0.2",
    "country-flag-icons": "^1.6.20",
    "overlayscrollbars": "^2.16.0",
    "transliteration": "^2.6.1",
    "vue": "^3.5.26",
    "vuedraggable": "^4.1.0"
@@ -0,0 +1,451 @@
 <script setup>
 // Analytics viewer rendered as a normal page inside #main. Receives live
 // analytics data over /_api/ws/analytics (admin-gated by the auth proxy) and
 // renders totals, smoothed visit/views curves, a transition map, and recent
 // visit/crawler tables. Read-only.
 // See docs/analytics.md for the data format.
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { RANGES } from './analytics/time.js'
 import {
  calcReadStats,
  calcTotalViews,
  copyIp,
  copyList,
  formatCount,
  formatAbuseRows,
  formatCrawlerRows,
  formatVisitRows,
 } from './analytics/format.js'
 import TrailLink from './TrailLink.vue'
 import VisitorCell from './VisitorCell.vue'
 import TransitionGraph from './TransitionGraph.vue'
 import VisitorCharts from './VisitorCharts.vue'
 const props = defineProps({
  initialRange: { type: String, default: 'week' },
 })
 const ABUSE_MAX_LINES = 5
 const data = ref(null)
 const pageTree = ref(null)
 const error = ref('')
 const now = ref(Date.now())
 let ws = null
 let reconnectTimeout = null
 let timeInterval = null
 function connectAnalytics() {
  if (ws) return
  const proto = location.protocol === 'https:' ? 'wss:' : 'ws:'
  ws = new WebSocket(`${proto}//${location.host}/_api/ws/analytics`)
  ws.onopen = () => { error.value = '' }
  ws.onmessage = (event) => {
    try {
      data.value = JSON.parse(event.data)
    } catch {
      error.value = 'analytics data could not be loaded'
    }
  }
  ws.onerror = () => {
    error.value = 'analytics data could not be loaded'
  }
  ws.onclose = () => {
    ws = null
    reconnectTimeout = setTimeout(connectAnalytics, 2000)
  }
 }
 onMounted(async () => {
  connectAnalytics()
  now.value = Date.now()
  timeInterval = setInterval(() => { now.value = Date.now() }, 1000)
  // The site tree for the transition map (all pages in menu order). Not
  // fatal: without it the map just narrows to pages seen in transitions.
  try {
    const res = await fetch('/_api/pages')
    if (res.ok) pageTree.value = await res.json()
  } catch { /* map just narrows to pages seen in transitions */ }
 })
 onUnmounted(() => {
  if (reconnectTimeout) clearTimeout(reconnectTimeout)
  if (timeInterval) clearInterval(timeInterval)
  if (ws) {
    ws.onclose = null
    ws.close()
    ws = null
  }
 })
 const visits = computed(() => data.value?.visits || [])
 const totalViews = computed(() => calcTotalViews(data.value?.views))
 const readStats = computed(() => calcReadStats(visits.value))
 const range = ref(RANGES[props.initialRange] ? props.initialRange : 'week')
 // Keep the URL shareable when the range changes.
 watch(range, (r) => {
  const url = new URL(location.href)
  url.hash = r
  history.replaceState(null, '', url)
 })
 const clients = computed(() => data.value?.clients || {})
 const visitRows = computed(() => formatVisitRows(visits.value, clients.value, pageTree.value, now.value))
 const crawlers = computed(() => data.value?.crawlers || [])
 const crawlerRows = computed(() => formatCrawlerRows(crawlers.value, clients.value, pageTree.value, now.value))
 const abuseRows = computed(() => formatAbuseRows(data.value?.abuse || [], clients.value, now.value))
 </script>
 <template>
  <div class="analytics-view">
    <div class="analytics-panel">
      <header>
        <h1>Analytics</h1>
        <nav class="ranges">
          <button v-for="(r, key) in RANGES" :key="key" type="button"
                  :class="{ active: range === key }" @click="range = key">
            {{ r.label }}
          </button>
        </nav>
        <a href="/" class="close" title="home">✕</a>
      </header>
      <p v-if="error" class="error">⚠️ {{ error }}</p>
      <p v-else-if="!data" class="loading">loading…</p>
      <template v-else>
        <section class="totals">
          <div><strong :title="String(visits.length)">{{ formatCount(visits.length) }}</strong> visits</div>
          <div><strong :title="String(totalViews)">{{ formatCount(totalViews) }}</strong> page views</div>
          <div><strong>{{ readStats.avgMinPerVisit }}</strong> min/visit</div>
          <div><strong>{{ readStats.avgArticleMedianMin }}</strong> min article read</div>
        </section>
        <VisitorCharts :data="data" :range="range" />
        <TransitionGraph :data="data" :range="range" :page-tree="pageTree" />
        <section>
          <h2>Recent visits</h2>
          <div v-if="visitRows.length" class="visit-table-wrap">
            <table class="visit-table">
              <thead>
                <tr>
                  <th>trail</th>
                  <th>visitor</th>
                  <th class="last-seen">last seen</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(v, i) in visitRows" :key="i">
                  <td class="trail">
                    <TrailLink v-if="v.refererStep" :step="v.refererStep" @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')" />
                  </td>
                  <VisitorCell
                    :ip="v.ip"
                    :ip-display="v.ipDisplay"
                    :ua="v.ua"
                    :ua-raw="v.uaRaw"
                    :country="v.country"
                    :city="v.city"
                    :lang="v.lang"
                    :lang-display="v.langDisplay"
                    :is-host="v.isHost"
                  />
                  <td class="last-seen muted"
                      :title="v.lastSeenLocal"
                      @click="copyList(v.lastSeenIso, $event)">{{ v.lastSeen }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <p v-else class="empty">no visits recorded yet</p>
          <div v-if="crawlerRows.length" class="visit-table-wrap">
            <table class="visit-table">
              <thead>
                <tr>
                  <th>pages crawled</th>
                  <th>visitor</th>
                  <th class="last-seen">last seen</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(c, i) in crawlerRows" :key="i">
                  <td class="trail">
                    <TrailLink v-for="(s, si) in c.pages" :key="si" :step="s" :count="s.count" @close="$emit('close')" />
                  </td>
                  <VisitorCell
                    :ip="c.ip"
                    :ip-display="c.ipDisplay"
                    :ua="c.ua"
                    :ua-raw="c.uaRaw"
                    :country="c.country"
                    :city="c.city"
                    :lang="c.lang"
                    :lang-display="c.langDisplay"
                    :is-host="c.isHost"
                  />
                  <td class="last-seen muted"
                      :title="c.lastSeenLocal"
                      @click="copyList(c.lastSeenIso, $event)">{{ c.lastSeen }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <p v-else class="empty">no crawler hits recorded yet</p>
          <div v-if="abuseRows.length" class="visit-table-wrap">
            <table class="visit-table">
              <thead>
                <tr>
                  <th>paths abused</th>
                  <th>visitor</th>
                  <th class="last-seen">last seen</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(a, i) in abuseRows" :key="i">
                  <td class="trail abuse-list clickable-list"
                      @click="copyList(a.allPaths, $event)">
                    <div class="abuse-items">
                      <span v-for="(p, pi) in a.paths.slice(0, ABUSE_MAX_LINES)" :key="pi"
                            class="inline-item">
                        <small v-if="p.count > 1" class="muted">{{ formatCount(p.count) }}×</small>{{ p.path }}
                      </span>
                      <small v-if="a.paths.length > ABUSE_MAX_LINES" class="muted">+{{ a.paths.length - ABUSE_MAX_LINES }} more</small>
                    </div>
                  </td>
                  <VisitorCell
                    :ip="a.ip"
                    :ip-display="a.ipDisplay"
                    :ua="a.ua"
                    :ua-raw="a.uaRaw"
                    :country="a.country"
                    :city="a.city"
                    :lang="a.lang"
                    :lang-display="a.langDisplay"
                    :is-host="a.isHost"
                    :variant-count="a.clientCount"
                  />
                  <td class="last-seen muted"
                      :title="a.lastSeenLocal"
                      @click="copyList(a.lastSeenIso, $event)">{{ a.lastSeen }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </template>
    </div>
  </div>
 </template>
 <style scoped>
 .analytics-view {
  min-height: 100vh;
  background: var(--bg, Canvas);
  color: var(--text, CanvasText);
 }
 .analytics-panel {
  margin: 0 auto;
  width: min(60rem, 96vw);
  padding: 1.5rem 2rem 4rem;
 }
 .analytics-panel header {
  display: flex;
  align-items: center;
  gap: 1rem;
 }
 .analytics-panel h1 {
  margin: 0;
  font-size: 1.4rem;
 }
 .ranges {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
 }
 .ranges button {
  padding: 0.2rem 0.7rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 1rem;
  cursor: pointer;
 }
 .ranges button:hover { color: var(--text); }
 .ranges button.active {
  color: var(--text);
  border-color: var(--accent);
 }
 .close {
  padding: 0 0.3rem;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
 }
 .close:hover { color: var(--text); }
 .analytics-panel h2 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  color: var(--muted);
 }
 .analytics-panel section {
  margin-top: 1.8rem;
 }
 .analytics-view a {
  color: var(--text);
  text-decoration: none;
 }
 .analytics-view a:hover { color: var(--accent); }
 .analytics-view :deep(.muted) { color: var(--muted); }
 .analytics-view :deep(.small) { font-size: 0.75em; }
 .totals {
  display: flex;
  gap: 2rem;
  font-size: 1.1rem;
 }
 .totals strong { font-size: 1.5rem; }
 .visit-table-wrap {
  overflow-x: auto;
 }
 .visit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  line-height: 1.3;
 }
 .visit-table th,
 .visit-table td {
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
 }
 .visit-table th {
  color: var(--muted);
  font-weight: normal;
  text-transform: lowercase;
  position: sticky;
  top: 0;
  background: var(--bg, Canvas);
 }
 .visit-table .last-seen {
  width: 5rem;
  text-align: right;
  white-space: nowrap;
  cursor: pointer;
 }
 .visit-table .trail {
  max-width: 20rem;
  overflow-wrap: break-word;
 }
 .visit-table .trail a,
 .visit-table .trail-link {
  display: inline-block;
  max-width: 8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
 }
 .visit-table .trail > * + * {
  margin-left: 0.5rem;
 }
 .visit-table .utm-tag {
  display: inline-block;
  max-width: 100%;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
 }
 .visit-table .clickable-list {
  cursor: pointer;
  max-width: 22rem;
 }
 .visit-table .abuse-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  align-items: baseline;
 }
 .visit-table .inline-item {
  max-width: 18rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
  hyphens: none;
 }
 .visit-table :deep(.clickable-ip),
 .visit-table .clickable-list,
 .visit-table .last-seen {
  cursor: pointer;
  position: relative;
 }
 .visit-table :deep(.copy-popup) {
  position: absolute;
  bottom: calc(100% + 0.25rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.15rem 0.4rem;
  background: var(--text, CanvasText);
  color: var(--bg, Canvas);
  border-radius: 0.25rem;
  font-size: 0.75rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
 }
 .crawler-top-uas {
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
 }
 .crawler-top-uas strong {
  color: var(--muted);
 }
 .empty, .loading, .error { color: var(--muted); }
 .error { color: var(--error, #c00); }
 </style>
@@ -0,0 +1,415 @@
 <script setup>
 // Banner editor tab: per-page banner HTML and banner design, previewed into
 // the real #page-banner region. Close and tab switching live in EditorShell.
 import { computed, onActivated, onMounted, onUnmounted, ref, watch } from 'vue'
 import { EditorView, basicSetup } from 'codemirror'
 import { EditorState } from '@codemirror/state'
 import { html } from '@codemirror/lang-html'
 import { cmHighlight, cmTheme } from './cmtheme'
 import { loadPlain, runScripts } from './swapdoc'
 const props = defineProps({
  pagePath: { type: String, default: '' },
 })
 // close/path-change are wired by EditorShell; this tab never emits them.
 defineEmits(['close', 'pathChange'])
 const path = ref('')
 const banner = ref('')
 const saveError = ref('')
 const fileInput = ref(null)
 const bannerEl = ref(null)
 let ws = null
 let pendingSave = null
 let reconnectTimer = null
 let reconnectDelay = 2000
 const MAX_RECONNECT_DELAY = 16000
 let everConnected = false
 let view = null      // CodeMirror for the banner HTML
 let syncing = false  // set while replacing the document programmatically
 // Banner design selector options come from the backend via settings.
 const theme = ref('')
 const bannerDesign = ref(null)
 const bannerDesignFrom = ref(null)
 const bannerDesigns = ref([])
 // Where an empty banner code field falls back to (null = nowhere: the
 // banner is just the design artwork), shown as a caption under the field.
 const bannerFrom = ref(null)
 // The design that "inherit" resolves to and where it comes from
 // (bannerDesignFrom: an ancestor path, "" = the front page, null = the
 // active theme's default).
 const bannerDesignInherited = ref('')
 // One-shot callback run on the next save ack (set by onBannerDesignChange,
 // whose re-render must not race the save it triggers).
 let refreshOnSave = null
 // The inherit option names the design actually in effect and its source.
 const inheritLabel = computed(() => {
  if (bannerDesignFrom.value === null) {
    return `— (from ${theme.value || 'none'})`
  }
  const where = bannerDesignFrom.value === ''
    ? 'the front page'
    : `/${bannerDesignFrom.value}`
  return `— (${bannerDesignInherited.value || 'none'} from ${where})`
 })
 function normPath(p) {
  return p.trim().replace(/^\/+|\/+$/g, '')
 }
 function send(msg) {
  if (ws && ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify(msg))
  } else {
    ensureConnected()
  }
 }
 function ensureConnected() {
  if (!ws || ws.readyState === WebSocket.CLOSED || ws.readyState === WebSocket.CLOSING) {
    connect()
  }
 }
 const timers = {}
 function debounce(key, fn, ms = 600) {
  clearTimeout(timers[key])
  timers[key] = setTimeout(fn, ms)
 }
 function save() {
  const msg = { type: 'save', path: normPath(path.value), banner: banner.value }
  pendingSave = msg
  send(msg)
 }
 function openPath(p) {
  path.value = p
  send({ type: 'open', path: p })
 }
 watch(() => props.pagePath, (p) => { openPath(normPath(p)) })
 function updateWindowTitle() {
  document.title = `banner: /${path.value} 🖊️`
 }
 onActivated(() => {
  updateWindowTitle()
  if (banner.value.trim()) previewBanner()
 })
 // The shell stays mounted while hidden: when it is re-shown with this tab
 // active, restore the window title and banner preview.
 function onEditorShown() {
  if (document.body.dataset.editorMode !== 'banner') return
  updateWindowTitle()
  if (banner.value.trim()) previewBanner()
 }
 async function loadSettings() {
  try {
    const s = await (await fetch('/_api/settings')).json()
    theme.value = s.theme || ''
    bannerDesigns.value = s.banner_designs || []
  } catch { /* keep default */ }
 }
 // Re-render the page from the server (after banner design changes), then
 // re-overlay the page's own banner code if one is being edited.
 async function rerender() {
  if (await loadPlain(path.value)) {
    if (banner.value.trim()) previewBanner()
  }
 }
 // --- Banner design ---------------------------------------------------------
 function onBannerDesignChange() {
  const msg = {
    type: 'save',
    path: normPath(path.value),
    banner_design: bannerDesign.value,
  }
  pendingSave = msg
  send(msg)
  refreshOnSave = rerender
 }
 // --- Banner editing ------------------------------------------------------
 function setDocument(text) {
  syncing = true
  view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: text } })
  syncing = false
  banner.value = text
 }
 function previewBanner() {
  const el = document.getElementById('page-banner')
  if (!el) return
  if (banner.value.trim()) {
    // Own banner code supplements the design: the inlined design artwork
    // (marked with [data-design]) is detached while the author code is
    // swapped in (so runScripts never re-runs the design's own scripts),
    // then put back first — author code stays last so its styles win.
    const artwork = [...el.querySelectorAll('[data-design]')]
    for (const a of artwork) a.remove()
    el.innerHTML = banner.value
    runScripts(el)
    el.prepend(...artwork)
  } else {
    // No banner code of its own: the region must show the inherited/design
    // banner — re-render from the server (an empty write here would wipe it).
    loadPlain(path.value)
  }
 }
 function onBannerInput() {
  previewBanner()
  debounce('banner-html', save, 400)
 }
 function stripBannerMedia(html) {
  // A banner has one piece of media: uploading replaces earlier img/video
  // tags instead of stacking them. (Other HTML, e.g. canvas+script, stays.)
  const doc = new DOMParser().parseFromString(html, 'text/html')
  for (const el of doc.querySelectorAll('img, video')) el.remove()
  return doc.body.innerHTML.trim()
 }
 async function uploadBannerMedia(file) {
  // Banner media goes to the shared content store, like article images.
  if (!file || !/^(image|video)\//.test(file.type)) return
  const name = file.name.replace(/[^\w.-]/g, '-')
  const res = await fetch(`/_api/files/${encodeURIComponent(name)}`, { method: 'PUT', body: file })
  if (!res.ok) return
  const { path: stored } = await res.json()
  const tag = file.type.startsWith('video/')
    ? `<video src="${stored}" autoplay muted loop playsinline></video>`
    : `<img src="${stored}" alt="">`
  const rest = stripBannerMedia(banner.value)
  setDocument(rest ? `${tag}\n${rest}` : tag)
  previewBanner()
  save()
 }
 function onBannerPaste(ev) {
  const file = [...(ev.clipboardData?.files || [])]
    .find((f) => /^(image|video)\//.test(f.type))
  if (file) {
    ev.preventDefault()
    uploadBannerMedia(file)
  }
 }
 function onMessage(ev) {
  const msg = JSON.parse(ev.data)
  if (msg.type === 'doc' && msg.path === path.value) {
    setDocument(msg.banner ?? '')
    bannerDesign.value = msg.banner_design ?? null
    bannerDesignFrom.value = msg.banner_design_from ?? null
    bannerDesignInherited.value = msg.banner_design_inherited ?? ''
    bannerFrom.value = msg.banner_from ?? null
    if (banner.value.trim()) previewBanner()
  } else if (msg.type === 'saved') {
    saveError.value = ''
    pendingSave = null
    refreshOnSave?.()
    refreshOnSave = null
  } else if (msg.type === 'error') {
    saveError.value = '⚠️ changes could not be saved'
  }
 }
 function onKeydown(ev) {
  if ((ev.ctrlKey || ev.metaKey) && ev.key === 's') {
    ev.preventDefault()
    save()
  }
 }
 function connect() {
  ws = new WebSocket(
    `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/_api/ws/editor`,
  )
  ws.onmessage = onMessage
  ws.onopen = () => {
    reconnectDelay = 2000
    if (everConnected) {
      if (pendingSave) send(pendingSave)
    } else {
      openPath(normPath(props.pagePath))
    }
    everConnected = true
  }
  ws.onclose = () => {
    clearTimeout(reconnectTimer)
    reconnectTimer = setTimeout(() => {
      connect()
      reconnectDelay = Math.min(reconnectDelay * 2, MAX_RECONNECT_DELAY)
    }, reconnectDelay)
  }
 }
 onMounted(async () => {
  connect()
  view = new EditorView({
    state: EditorState.create({
      doc: '',
      extensions: [
        basicSetup,
        html(),
        cmTheme,
        cmHighlight,
        EditorView.lineWrapping,
        EditorView.updateListener.of((u) => {
          if (u.docChanged && !syncing) {
            banner.value = view.state.doc.toString()
            onBannerInput()
          }
        }),
      ],
    }),
    parent: bannerEl.value,
  })
  addEventListener('keydown', onKeydown)
  addEventListener('pagerite:editor-shown', onEditorShown)
  await loadSettings()
 })
 onUnmounted(() => {
  clearTimeout(reconnectTimer)
  for (const t of Object.values(timers)) clearTimeout(t)
  if (ws) {
    ws.onclose = null // intentional close, no reconnect
    ws.close()
  }
  view?.destroy()
  removeEventListener('keydown', onKeydown)
  removeEventListener('pagerite:editor-shown', onEditorShown)
 })
 </script>
 <template>
  <div class="banner-editor">
    <div v-if="saveError">{{ saveError }}</div>
    <section class="block" @paste="onBannerPaste">
      <div class="block-head">
        <select
          v-model="bannerDesign"
          class="text-input design-select"
          title="Banner design (artwork + its own styles)"
          @change="onBannerDesignChange"
        >
          <option :value="null">{{ inheritLabel }}</option>
          <option value="">none</option>
          <option v-for="d in bannerDesigns" :key="d" :value="d">{{ d }}</option>
        </select>
        <button
          type="button"
          class="icon-btn"
          title="upload banner image/video (replaces existing media) — pasting works too"
          @click="fileInput.click()"
        >🖼️</button>
        <input
          ref="fileInput"
          type="file"
          accept="image/*,video/*"
          hidden
          @change="(ev) => { uploadBannerMedia(ev.target.files[0]); ev.target.value = '' }"
        />
      </div>
      <div v-if="bannerFrom !== null" class="note">
        left empty, the banner code is inherited from /{{ bannerFrom }}
      </div>
      <div ref="bannerEl" class="banner-cm" />
    </section>
  </div>
 </template>
 <style scoped>
 .banner-editor {
  display: flex;
  flex-direction: column;
 }
 .block {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: var(--surface);
  flex: 1;
  min-height: 0;
 }
 .block-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
 }
 .note {
  color: var(--muted);
  font-size: 0.8rem;
 }
 .block-head .icon-btn {
  margin-left: auto;
  padding: 0 0.2rem;
  font-size: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.7;
 }
 .block-head .icon-btn:hover {
  opacity: 1;
 }
 /* The banner design selector stays compact; the upload button is pushed
   right by its auto margin. */
 .design-select {
  flex: 0 1 auto;
  width: auto;
  font-size: 0.85rem;
 }
 .text-input {
  flex: 1;
  min-width: 4rem;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.2rem 0.5rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 4px;
 }
 /* CodeMirror window for the banner HTML; fills the tab and scrolls
   internally. */
 .banner-cm {
  flex: 1;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
 }
 .banner-cm :deep(.cm-editor) {
  height: 100%;
  font-size: 0.85rem;
 }
 .banner-cm :deep(.cm-scroller) {
  overflow: auto;
 }
 .banner-cm :deep(.cm-gutters) {
  display: none;
 }
 </style>
@@ -0,0 +1,176 @@
 <script setup>
 // Tabbed shell for the four admin editors. The individual pens are shorthands
 // that open the shell on a given tab; once open, tabs switch instantly without
 // closing the panel. Tabs are kept alive so switching preserves state.
 import { onMounted, onUnmounted, provide, ref, watch } from 'vue'
 import PageEditor from './PageEditor.vue'
 import BannerEditor from './BannerEditor.vue'
 import SiteEditor from './SiteEditor.vue'
 import StructureEditor from './StructureEditor.vue'
 const props = defineProps({
  pagePath: { type: String, default: '' },
  initialMode: { type: String, default: 'page' },
 })
 const emit = defineEmits(['close'])
 const currentPath = ref(props.pagePath)
 const activeMode = ref(props.initialMode)
 // Tab order: site-wide settings first (site, structure), then — after a
 // visual break — the per-page editors (article, banner).
 const MODES = [
  { key: 'site', label: 'site', component: SiteEditor },
  { key: 'structure', label: 'structure', component: StructureEditor },
  { key: 'page', label: 'article', component: PageEditor, breakBefore: true },
  { key: 'banner', label: 'banner', component: BannerEditor },
 ]
 function switchMode(mode) {
  if (MODES.some((m) => m.key === mode)) activeMode.value = mode
 }
 function onPathChange(path) {
  currentPath.value = path
 }
 function close() {
  emit('close')
 }
 provide('editorShell', { switchMode })
 watch(activeMode, (mode) => {
  document.body.dataset.editorMode = mode
 }, { immediate: true })
 // A pen click while the shell is open (main.js) switches tabs, and also
 // retargets the editors when the user fetch-navigated with the shell open.
 function onSwitchEvent(ev) {
  if (ev.detail?.path != null) currentPath.value = ev.detail.path
  if (ev.detail?.mode) switchMode(ev.detail.mode)
 }
 // Closing the shell hides it but keeps it mounted (main.js); the tabs stay
 // cached in KeepAlive the whole time, so no state is ever lost until a real
 // page reload. On re-show each active tab re-applies its window title and
 // preview via its own pagerite:editor-shown listener.
 function onKeydown(ev) {
  if (ev.key === 'Escape' && document.body.classList.contains('editing')) close()
 }
 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>
 <template>
  <div class="editor-root overlay">
    <header class="editor-tabs">
      <template v-for="m in MODES" :key="m.key">
        <span v-if="m.breakBefore" class="tab-break" />
        <button
          type="button"
          class="tab"
          :class="{ active: activeMode === m.key }"
          @click="switchMode(m.key)"
        >
          {{ m.label }}
        </button>
      </template>
      <button type="button" class="close" title="close" @click="close">✕</button>
    </header>
    <div class="editor-tab-body">
      <KeepAlive>
        <component
          :is="MODES.find((m) => m.key === activeMode).component"
          :key="activeMode"
          :page-path="currentPath"
          @close="close"
          @path-change="onPathChange"
        />
      </KeepAlive>
    </div>
  </div>
 </template>
 <style scoped>
 /* Docked-overlay positioning (sticky, height, slide-in) comes from the
   global pagerite.css (.editor-root.overlay); the shell is a flex column so
   the tab body fills what the tab bar leaves. */
 .editor-root {
  display: flex;
  flex-direction: column;
 }
 .editor-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex-shrink: 0;
 }
 .editor-tabs .tab {
  padding: 0.25rem 0.8rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
 }
 .editor-tabs .tab:hover {
  color: var(--text);
 }
 /* Visual break between the site-wide tabs and the per-page tabs. */
 .editor-tabs .tab-break {
  align-self: stretch;
  margin: 0.2rem 0.5rem;
  border-left: 1px solid var(--line);
 }
 .editor-tabs .tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
 }
 .editor-tabs .close {
  margin-left: auto;
  padding: 0 0.3rem;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.05rem;
  cursor: pointer;
 }
 .editor-tabs .close:hover {
  color: var(--text);
 }
 .editor-tab-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
 }
 /* The active tab component's root fills the body. */
 .editor-tab-body > * {
  flex: 1;
  min-height: 0;
 }
 </style>
@@ -4,18 +4,23 @@
 // (/_api/ws/editor). Docked left of the article on the page itself.
 // The socket connects when the editor is opened and reconnects with
 // exponential backoff after a failure; unsaved text and pending saves
-// survive a disconnect. Editor scroll drives the document scroll, keeping the
+// survive a disconnect. Editor scroll drives the article scroll (while
-// rendered article at the cursor's position.
+// editing the window scroll is locked and only #main scrolls), keeping the
-import { onMounted, onUnmounted, ref } from 'vue'
+// rendered article at the cursor's position. Saving (💾 / Ctrl+S) is explicit
 // and refreshes the page regions in place — never a reload — so the editor
 // state (unsaved text included) also survives closing the shell; it is lost
 // only on a real page reload.
 import { onActivated, onMounted, onUnmounted, ref, watch } from 'vue'
 import { EditorView, basicSetup } from 'codemirror'
 import { EditorState } from '@codemirror/state'
 import { markdown } from '@codemirror/lang-markdown'
 import { cmHighlight, cmTheme } from './cmtheme'
 import { loadPlain } from './swapdoc'
 const props = defineProps({
  pagePath: { type: String, default: '' },
 })
-const emit = defineEmits(['close'])
+const emit = defineEmits(['close', 'pathChange'])
 const path = ref('')
 const title = ref('')
@@ -32,7 +37,7 @@ let reconnectTimer = null
 let reconnectDelay = 2000
 const MAX_RECONNECT_DELAY = 16000
 let everConnected = false
-let dirty = false
+const dirty = ref(false)  // unsaved text exists (drives the 💾 button)
 let syncingScroll = false
 function send(msg) {
@@ -53,15 +58,36 @@ function normPath(p) {
  return p.trim().replace(/^\/+|\/+$/g, '')
 }
 function pageLabel() {
  return title.value.trim() || ('/' + (path.value || ''))
 }
 // Show the article title (or path for a new page) plus the edit pen in the
 // window title while editing; the server-rendered public title is restored on
 // close.
 function updateWindowTitle() {
  document.title = `${pageLabel()} 🖊️`
 }
 watch([title, path], updateWindowTitle)
 watch(() => props.pagePath, (p) => { openPath(normPath(p)) })
 onActivated(() => {
  updateWindowTitle()
  // Re-shown with unsaved text: restore the working preview into the
  // article (closing discarded it in favour of the server-rendered page).
  if (dirty.value) requestRender()
 })
 function requestRender() {
  // No debounce: server-side rendering is fast enough per keystroke.
  if (!view) return
-  dirty = true
+  dirty.value = true
  send({ type: 'render', path: path.value, markdown: view.state.doc.toString() })
 }
 function save() {
-  // Path is not editable here (that's the site editor's job); saving
+  // Path is not editable here (that's the structure tab's job); saving
  // never moves the page.
  const markdown = view.state.doc.toString()
  if (markdown.trim() === '') {
@@ -83,20 +109,20 @@ function save() {
  return new Promise((resolve) => { savedResolve = resolve })
 }
-async function saveAndClose() {
+async function saveAndRefresh() {
  await save()
-  // Reload so nav/sidebar changes apply, then the editor is gone.
+  dirty.value = false
-  dirty = false
+  // Refresh the page regions from the server so nav/sidebar changes apply
-  emit('close')
+  // (never a reload: the editor keeps its state).
-  location.reload()
+  loadPlain(path.value)
 }
 function close() {
  // Reload if the visible page is showing unsaved preview edits.
  const stale = dirty
  dirty = false
  emit('close')
-  if (stale) location.reload()
+  // Discard the unsaved preview by re-rendering the page from the server.
  // The editor text itself is kept (the shell stays mounted while hidden)
  // and can still be saved later.
  if (dirty.value) loadPlain(path.value)
 }
 function insertAtCursor(text) {
@@ -115,6 +141,82 @@ async function uploadImage(file) {
  }
 }
 // --- Format toolbar --------------------------------------------------------
 // Small Markdown helpers for the hard-to-remember syntax; each leaves the
 // relevant part selected so typing replaces it.
 function wrapInline(mark) {
  // Toggle: wrapped selection (or wrapping marks around it) is unwrapped.
  const { from, to } = view.state.selection.main
  const doc = view.state.doc
  if (doc.sliceString(Math.max(0, from - mark.length), from) === mark
      && doc.sliceString(to, to + mark.length) === mark) {
    view.dispatch({ changes: [
      { from: to, to: to + mark.length },
      { from: from - mark.length, to: from },
    ] })
  } else {
    const text = doc.sliceString(from, to)
    view.dispatch({
      changes: { from, to, insert: mark + text + mark },
      selection: { anchor: from + mark.length, head: to + mark.length },
    })
  }
  view.focus()
 }
 function insertCode() {
  // On an empty line with no selection: a fenced code block, cursor inside.
  // Otherwise an inline code wrap (toggling).
  const { from, to } = view.state.selection.main
  const line = view.state.doc.lineAt(from)
  if (from === to && !line.text.trim()) {
    view.dispatch({
      changes: { from: line.from, to: line.to, insert: '```\n\n```' },
      selection: { anchor: line.from + 4 },
    })
    view.focus()
    return
  }
  wrapInline('`')
 }
 function insertLink() {
  // Selected text becomes the link label — or the URL if it looks like one.
  const { from, to } = view.state.selection.main
  const text = view.state.sliceDoc(from, to)
  const isUrl = /^https?:\/\/\S+$/.test(text)
  const insert = isUrl ? `[](${text})` : `[${text}]()`
  const urlStart = from + insert.length - 1 // inside the parens
  view.dispatch({
    changes: { from, to, insert },
    selection: isUrl ? { anchor: from + 1 } : { anchor: urlStart },
  })
  view.focus()
 }
 // 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
 function insertTable(cols, rows) {
  // A GFM table on its own blank-separated block, first header cell
  // selected.
  const { from, to } = view.state.selection.main
  const before = from > 0 && view.state.doc.sliceString(from - 1, from) !== '\n' ? '\n\n' : ''
  const row = (cells) => `| ${cells.join(' | ')} |`
  const table = `${before}${row(Array(cols).fill('column'))}\n`
    + `${row(Array(cols).fill('---'))}\n`
    + `${Array(rows).fill(row(Array(cols).fill(''))).join('\n')}\n`
  view.dispatch({
    changes: { from, to, insert: table },
    selection: { anchor: from + before.length + 2, head: from + before.length + 8 },
  })
  tablePicker.value = false
  view.focus()
 }
 function openPath(p) {
  path.value = p
  send({ type: 'open', path: p })
@@ -164,12 +266,13 @@ function onMessage(ev) {
    published.value = msg.published
    setDocument(msg.markdown)
    requestRender()
-    dirty = false // just loaded from the server, nothing unsaved
+    dirty.value = false // just loaded from the server, nothing unsaved
  } else if (msg.type === 'html' && msg.path === path.value) {
    previewIntoArticle(msg.html, msg.has_h1)
  } else if (msg.type === 'saved') {
    saveError.value = ''
    pendingSave = null
    dirty.value = false
    savedResolve?.()
    savedResolve = null
  } else if (msg.type === 'error') {
@@ -178,24 +281,45 @@ function onMessage(ev) {
 }
 function onKeydown(ev) {
-  if ((ev.ctrlKey || ev.metaKey) && ev.key === 's') {
+  if (!(ev.ctrlKey || ev.metaKey)) return
  if (ev.key === 's') {
    ev.preventDefault()
    save()
    return
  }
-  if (ev.key === 'Escape') close()
+  // Bold/italic only when typing in the CodeMirror editor itself.
  if (!view?.hasFocus) return
  if (ev.key === 'b') {
    ev.preventDefault()
    wrapInline('**')
  } else if (ev.key === 'i') {
    ev.preventDefault()
    wrapInline('*')
  }
 }
 // The shell stays mounted while hidden: when it is re-shown with this tab
 // active, restore the window title (and the working preview if unsaved
 // text exists — closing discarded it in favour of the server render).
 function onEditorShown() {
  if (document.body.dataset.editorMode !== 'page') return
  updateWindowTitle()
  if (dirty.value) requestRender()
 }
 function syncScroll() {
-  // Editor scroll drives the document: keep the rendered article at the
+  // Editor scroll drives the article: keep the rendered page at the same
-  // same proportional position as the cursor area in the editor.
+  // proportional position as the cursor area in the editor. While editing
  // the window scroll is locked and #main is the scrolling element.
  if (syncingScroll || !view) return
  const main = document.getElementById('main')
  if (!main) return
  syncingScroll = true
  requestAnimationFrame(() => {
    const scroller = view.scrollDOM
    const max = scroller.scrollHeight - scroller.clientHeight
    const pct = max > 0 ? scroller.scrollTop / max : 0
-    const doc = document.documentElement
+    main.scrollTop = pct * (main.scrollHeight - main.clientHeight)
    window.scrollTo(0, pct * (doc.scrollHeight - innerHeight))
    syncingScroll = false
  })
 }
@@ -228,6 +352,7 @@ function connect() {
 onMounted(() => {
  connect()
  updateWindowTitle()
  view = new EditorView({
    state: EditorState.create({
@@ -263,6 +388,7 @@ onMounted(() => {
    path: () => path.value,
  }
  addEventListener('keydown', onKeydown)
  addEventListener('pagerite:editor-shown', onEditorShown)
 })
 onUnmounted(() => {
@@ -274,13 +400,17 @@ onUnmounted(() => {
  view?.destroy()
  delete window.__pageritePageEditor
  removeEventListener('keydown', onKeydown)
  removeEventListener('pagerite:editor-shown', onEditorShown)
 })
 </script>
 <template>
-  <div class="editor-root overlay">
+  <div class="page-editor">
    <header class="toolbar">
-      <input v-model="title" placeholder="Title" class="title" @input="requestRender" />
+      <label class="title-field">
        <span class="field-label">title</span>
        <input v-model="title" class="title" @input="requestRender" />
      </label>
      <label><input v-model="published" type="checkbox" /> published</label>
      <input
        ref="fileInput"
@@ -289,10 +419,41 @@ onUnmounted(() => {
        hidden
        @change="(ev) => { uploadImage(ev.target.files[0]); ev.target.value = '' }"
      />
-      <button type="button" @click="fileInput.click()">image</button>
+      <button
-      <button type="button" @click="saveAndClose">save</button>
+        type="button"
-      <button type="button" class="close" title="close" @click="close">✕</button>
+        class="save"
        title="save (Ctrl+S)"
        :disabled="!dirty"
        @click="saveAndRefresh"
      >💾</button>
    </header>
    <div class="format-bar">
      <button type="button" title="bold" @click="wrapInline('**')"><b>B</b></button>
      <button type="button" title="italic" @click="wrapInline('*')"><i>I</i></button>
      <button type="button" title="code (empty line: code block)" @click="insertCode"><code>&lt;/&gt;</code></button>
      <button type="button" title="link" @click="insertLink">🔗</button>
      <button
        type="button"
        title="table"
        :class="{ active: tablePicker }"
        @click="tablePicker = !tablePicker"
      >▦</button>
      <button type="button" title="insert image (upload) — pasting works too" @click="fileInput.click()">🖼️</button>
      <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
            v-for="n in TABLE_MAX_COLS * TABLE_MAX_ROWS"
            :key="n"
            type="button"
            class="tp-cell"
            :class="{ on: tableSize.cols >= (n - 1) % TABLE_MAX_COLS + 1 && tableSize.rows >= Math.floor((n - 1) / TABLE_MAX_COLS) + 1 }"
            @mouseenter="tableSize = { cols: (n - 1) % TABLE_MAX_COLS + 1, rows: Math.floor((n - 1) / TABLE_MAX_COLS) + 1 }"
            @click="insertTable(tableSize.cols, tableSize.rows)"
          />
        </div>
        <div class="tp-size">{{ tableSize.cols || '–' }} × {{ tableSize.rows || '–' }}</div>
      </div>
    </div>
    <div v-if="saveError">{{ saveError }}</div>
    <div class="panes">
      <div ref="editorEl" class="editor" />
@@ -301,15 +462,11 @@ onUnmounted(() => {
 </template>
 <style scoped>
-.editor-root {
+.page-editor {
  display: flex;
  flex-direction: column;
  height: 100vh;
 }
 /* Docked-overlay positioning lives in the global pagerite.css (.editor-host /
   .editor-root.overlay) since the host element is created by main.js. */
 .toolbar {
  display: flex;
  align-items: center;
@@ -319,6 +476,19 @@ onUnmounted(() => {
  background: var(--surface);
 }
 .toolbar .title-field {
  flex: 1;
  min-width: 4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
 }
 .toolbar .field-label {
  color: var(--muted);
  font-size: 0.85rem;
 }
 .toolbar .title {
  flex: 1;
  min-width: 4rem;
@@ -336,28 +506,93 @@ onUnmounted(() => {
  white-space: nowrap;
 }
-.toolbar button {
+/* Borderless icon button; greyed out (desaturated) while there is nothing
-  font: inherit;
+   to save. */
-  padding: 0.25rem 0.8rem;
+.toolbar button.save {
-  background: var(--accent2);
+  padding: 0 0.3rem;
-  color: white;
+  font-size: 1rem;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
 }
 /* Disabled = black & white only; an explicit color overrides the browser's
   built-in dimmed disabled-button color. */
 .toolbar button.save:disabled {
  color: var(--text);
  filter: saturate(0);
  cursor: default;
 }
 /* Markdown helpers: plain icon buttons under the toolbar. */
 .format-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.25rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
 }
 .format-bar button {
  min-width: 1.7rem;
  padding: 0.15rem 0.3rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--muted);
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
 }
-/* Window-style close button, top right corner. */
+.format-bar button:hover,
-.toolbar .close {
+.format-bar button.active {
  margin-left: auto;
  padding: 0 0.3rem;
  background: none;
  color: var(--muted);
  font-size: 1.05rem;
 }
 .toolbar .close:hover {
  color: var(--text);
  border-color: var(--line);
 }
 /* Table size picker: hover grid popup below the format bar; the hovered
   cell and everything up-left of it is the table to insert. */
 .table-picker {
  position: absolute;
  top: 100%;
  left: 6.5rem;
  z-index: 20;
  padding: 0.5rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 4px 16px #0004;
 }
 .tp-grid {
  display: grid;
  gap: 2px;
 }
 .tp-cell {
  width: 1.05rem;
  height: 1.05rem;
  min-width: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
 }
 .tp-cell.on {
  background: var(--accent);
  border-color: var(--accent);
 }
 .tp-size {
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
 }
 .panes {
@@ -371,7 +606,7 @@ onUnmounted(() => {
 /* CodeMirror sits inside a bordered box, like a dialog's input area, with
   a slight margin to the panel edges. Wheel scroll stays in the editor and
-   drives the document (syncScroll) instead of double-scrolling. */
+   drives the article (syncScroll) instead of double-scrolling. */
 .editor {
  flex: 1;
  min-width: 0;
@@ -0,0 +1,304 @@
 <script setup>
 // Structure tab: the draggable site structure tree. Focusing a page's row
 // navigates to it in place (no transitions). Close and tab switching live
 // in EditorShell.
 //
 // The tree comes from the server nested (GET /_api/pages); every node is
 // real — a label with a title and slug, with content (landing page) or
 // without (category whose URL renders a placeholder page). The front page
 // is a top-level row with an empty slug, not the parent of the others.
 import { inject, onActivated, onMounted, onUnmounted, provide, ref, watch } from 'vue'
 import StructureTree from './StructureTree.vue'
 import { slugify } from './slugify'
 import { loadPlain } from './swapdoc'
 const props = defineProps({
  pagePath: { type: String, default: '' },
 })
 const emit = defineEmits(['close', 'pathChange'])
 const shell = inject('editorShell', null)
 const path = ref('')
 const saveError = ref('')
 const tree = ref([])
 function normPath(p) {
  return p.trim().replace(/^\/+|\/+$/g, '')
 }
 // Debounce per key: text edits save while typing, without a request per
 // keystroke.
 const timers = {}
 function debounce(key, fn, ms = 600) {
  clearTimeout(timers[key])
  timers[key] = setTimeout(fn, ms)
 }
 function updateWindowTitle() {
  document.title = 'site structure 🖊️'
 }
 watch(() => props.pagePath, (p) => { path.value = normPath(p) })
 onActivated(updateWindowTitle)
 // The shell stays mounted while hidden: when it is re-shown with this tab
 // active, restore the window title.
 function onEditorShown() {
  if (document.body.dataset.editorMode === 'structure') updateWindowTitle()
 }
 // Tree row focus: switch the edited page and show it, skipping transitions.
 async function navigate(p) {
  path.value = p
  emit('pathChange', p)
  await loadPlain(p)
 }
 // If the currently edited page moved (rename/move of itself or an
 // ancestor), follow it to the new path.
 function followMove(oldPath, newPath) {
  if (path.value === oldPath) navigate(newPath)
  else if (oldPath && path.value.startsWith(`${oldPath}/`)) {
    navigate(newPath + path.value.slice(oldPath.length))
  }
 }
 // --- New page flow -------------------------------------------------------
 // The ➕ row at the end of any list adds a *pending* row there: a
 // local-only item that can be dragged into place before anything is
 // filled in. It is persisted only on commit (✓/Enter), at wherever it
 // currently sits.
 const pending = ref(null)
 function newPage(list) {
  if (pending.value) return // one at a time
  pending.value = {
    slug: '',
    path: '',
    title: '',
    order: 0,
    published: true,
    has_content: true,
    children: [],
    pending: true,
  }
  list.push(pending.value)
 }
 // Where does the pending row currently sit? -> {parentPath, list, index}.
 function locatePending(nodes, parentPath) {
  const i = nodes.indexOf(pending.value)
  if (i >= 0) return { parentPath, list: nodes, i }
  for (const n of nodes) {
    const found = locatePending(n.children, n.path)
    if (found) return found
  }
  return null
 }
 function discardPending() {
  const loc = locatePending(tree.value, '')
  if (loc) loc.list.splice(loc.i, 1)
  pending.value = null
 }
 async function commitPending() {
  const node = pending.value
  if (!node) return
  // Empty slug: derive one from the title (transliterated to ASCII).
  const slug = slugify(node.slug.trim()) || slugify(node.title)
  if (!slug) {
    return
  }
  const loc = locatePending(tree.value, '')
  const parentPath = loc?.parentPath ?? ''
  const newPath = parentPath ? `${parentPath}/${slug}` : slug
  const res = await fetch(`/_api/pages/${newPath}`, {
    method: 'PUT',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({
      title: node.title.trim() || slug,
      markdown: '', // empty markdown creates an empty page (never deletes)
      published: true,
    }),
  })
  if (!res.ok) {
    // Show the server's reason (e.g. a reserved file name); the pending
    // row stays so it can be edited and committed again.
    saveError.value = `⚠️ ${await errorDetail(res)}`
    return
  }
  // Place it exactly where the row was dropped: a fresh order key halfway
  // between its new siblings (the PUT appended it at the end).
  if (loc) {
    const prev = loc.list[loc.i - 1]
    const next = loc.list[loc.i + 1]
    const order = prev && next ? (prev.order + next.order) / 2
      : prev ? prev.order + 1
      : next ? next.order - 1
      : 1
    await postStructure({ path: newPath, order })
  } else {
    saveError.value = ''
  }
  pending.value = null
  await refreshPages()
  await navigate(newPath)
  // Hand over to the page editor tab for the actual writing.
  shell?.switchMode('page')
 }
 // --- Site structure tree (drag-and-drop ordering/moving) ----------------
 async function refreshPages() {
  try {
    tree.value = await (await fetch('/_api/pages')).json()
  } catch { /* list stays stale; not fatal */ }
 }
 // Human-readable reason from a failed API call (FastAPI errors carry a
 // JSON {detail}), falling back to a generic message.
 async function errorDetail(res) {
  const body = await res.json().catch(() => null)
  return body?.detail || 'changes could not be saved'
 }
 async function postStructure(op) {
  const res = await fetch('/_api/structure', {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify(op),
  })
  if (res.ok) {
    saveError.value = ''
    loadPlain(path.value) // refresh menus and content from the server
  } else {
    saveError.value = `⚠️ ${await errorDetail(res)}`
  }
  await refreshPages()
  return res.ok
 }
 async function onReorder(parentPath, list, evt) {
  // vuedraggable already mutated `list`; persist the moved item only: a
  // fresh order key halfway between its new siblings (all other items
  // keep theirs), plus the new path when the parent changed. The pending
  // new-page row is local-only — its position is read at commit time.
  const change = evt.moved || evt.added
  if (!change) return
  const el = change.element
  if (el.pending) return
  const i = change.newIndex
  let prev, next
  for (let j = i - 1; j >= 0 && !prev; j--) if (!list[j].pending) prev = list[j]
  for (let j = i + 1; j < list.length && !next; j++) if (!list[j].pending) next = list[j]
  const order = prev && next ? (prev.order + next.order) / 2
    : prev ? prev.order + 1
    : next ? next.order - 1
    : 1
  const newPath = parentPath ? `${parentPath}/${el.slug}` : el.slug
  const op = { path: el.path, order }
  if (newPath !== el.path) op.move_to = newPath
  if (await postStructure(op) && op.move_to) followMove(el.path, op.move_to)
 }
 // Inline title/slug editing: rows are always editable. Title saves while
 // typing (debounced); the slug commits on blur/Enter, since it renames
 // the path (moving the whole subtree with it).
 function onTitleInput(node, ev) {
  const title = ev.target.value.trim()
  if (!title || title === node.title) return
  debounce(`title:${node.path}`, async () => {
    await postStructure({ path: node.path, title })
  })
 }
 // The slug inputs are filtered as you type (StructureTree onSlugInput,
 // see slugify.js); the server re-validates and its reason is shown.
 async function commitSlug(node, ev) {
  const slug = ev.target.value.trim()
  if (slug === node.slug) return
  const parent = node.path.split('/').slice(0, -1).join('/')
  // Empty slug at top level = the front page (path "").
  const moveTo = parent ? (slug ? `${parent}/${slug}` : parent) : slug
  if (await postStructure({ path: node.path, move_to: moveTo })) {
    followMove(node.path, moveTo)
  } else {
    ev.target.value = node.slug // rename failed: put the old slug back
  }
 }
 // Deletion is immediate, no confirmation.
 async function removePage(node) {
  const res = await fetch(`/_api/pages/${node.path}`, { method: 'DELETE' })
  if (res.ok) {
    saveError.value = ''
    refreshPages()
    const p = node.path
    if (p === path.value || (p && path.value.startsWith(`${p}/`))) {
      // The current page was deleted — or reduced to a category, which now
      // renders a placeholder page. Either way, re-render from the server.
      if (node.children.length) loadPlain(path.value)
      else navigate('')
    } else {
      loadPlain(path.value) // refresh menus
    }
  } else {
    saveError.value = '⚠️ changes could not be saved'
  }
 }
 provide('structureHandlers', {
  current: () => path.value,
  open: navigate,
  removePage,
  reorder: onReorder,
  titleInput: onTitleInput,
  commitSlug,
  commitPending,
  discardPending,
  newPage,
 })
 onMounted(() => {
  path.value = normPath(props.pagePath)
  refreshPages()
  addEventListener('pagerite:editor-shown', onEditorShown)
 })
 onUnmounted(() => {
  for (const t of Object.values(timers)) clearTimeout(t)
  removeEventListener('pagerite:editor-shown', onEditorShown)
 })
 </script>
 <template>
  <div class="structure-editor">
    <div v-if="saveError">{{ saveError }}</div>
    <section class="block structure">
      <StructureTree :nodes="tree" />
    </section>
  </div>
 </template>
 <style scoped>
 .structure-editor {
  display: flex;
  flex-direction: column;
 }
 .block {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
 }
 .structure {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
 }
 </style>
@@ -1,6 +1,6 @@
 <script setup>
 // Recursive site-structure tree with drag-and-drop ordering (vue-draggable).
-// Nodes come from the server (GET /_api/pages via SiteEditor.vue) as
+// Nodes come from the server (GET /_api/pages via StructureEditor.vue) as
 // {slug, path, title, order, published, has_content, children}.
 // Every node is real: a label whose title and slug are always editable
 // inline — the title saves while typing (and focusing it opens the page),
@@ -19,8 +19,8 @@
 // The front page is the root row with an empty slug: renaming it away
 // leaves no front page, and giving another top-level row the empty slug
 // makes it the front page. Delete is a two-step inline button (no dialog).
-// Actions are injected from SiteEditor.vue to avoid per-level event
+// Actions are injected from the parent editor (StructureEditor.vue) to
-// forwarding.
+// avoid per-level event forwarding.
 import { inject } from 'vue'
 import draggable from 'vuedraggable'
 import { slugify } from './slugify'
@@ -104,7 +104,7 @@ function onEnd() {
              v-model="element.title"
              v-focus
              class="edit title-edit"
-              placeholder="Title"
+              title="Page title"
              @keyup.enter="handlers.commitPending()"
              @keyup.esc="handlers.discardPending()"
            />
@@ -126,7 +126,6 @@ function onEnd() {
            <input
              class="edit title-edit"
              :value="element.title"
              placeholder="Title"
              title="Label in the navigation — saves while typing; click opens the page"
              @input="handlers.titleInput(element, $event)"
              @focus="handlers.open(element.path)"
@@ -142,14 +141,14 @@ function onEnd() {
            <span class="acts">
              <span v-if="!element.published" class="draft">draft</span>
              <button
                v-if="element.has_content || !element.children.length"
                type="button"
                class="act del"
                :class="{ armed: handlers.arming() === element.path }"
                :title="element.children.length
                  ? 'delete the landing page (the category keeps its subpages)'
                  : 'delete page'"
-                @click="handlers.armRemove(element)"
+                @click="handlers.removePage(element)"
-              >{{ handlers.arming() === element.path ? 'delete?' : '✕' }}</button>
+              >✕</button>
            </span>
          </template>
        </div>
@@ -300,12 +299,6 @@ body.tree-dragging .treelist {
  white-space: nowrap;
 }
 /* Two-step delete: the first click arms the button, the second deletes. */
 .act.armed {
  color: #e06c75;
  font-weight: 600;
 }
 .del:hover {
  color: #e06c75;
 }
@@ -0,0 +1,22 @@
 <script setup>
 import { formatCount } from './analytics/format.js'
 defineProps({
  step: { type: Object, required: true },
  count: { type: Number, default: 0 },
 })
 defineEmits(['close'])
 </script>
 <template>
  <a class="trail-link"
     :href="step.path"
     :title="count > 1 ? `${step.title} (${count} hits)` : step.title"
     :target="step.external ? '_blank' : undefined"
     :rel="step.external ? 'noopener' : undefined"
     @click="(e) => { if (!step.external) $emit('close') }">
    <small v-if="count > 1" class="muted">{{ formatCount(count) }}×</small>
    <span>{{ step.slug }}</span>
  </a>
 </template>
@@ -0,0 +1,239 @@
 <script setup>
 /**
 * Radial transition map filtered to the selected time range.
 *
 * Transitions are stored per 5-minute bucket (from -> to -> bucket ->
 * count), so the graph sums the buckets falling inside the selected
 * range, exactly like the charts and per-page views do.
 */
 import { computed, onBeforeUnmount, shallowRef, watch } from 'vue'
 import { rangeWindow, WEEK } from './analytics/time.js'
 import { formatCount } from './analytics/format.js'
 import {
  TNODE_R,
  BEAD_R,
  BEAD_SPEED,
  buildTransitionGraph,
  filterTransitionsByRange,
  filterViewsByRange,
  filterVisitsByRange,
 } from './analytics/transitions.js'
 const props = defineProps({
  data: { type: Object, default: null },
  range: { type: String, required: true },
  pageTree: { type: Array, default: null },
 })
 const window = computed(() => rangeWindow(props.range))
 const visualScale = computed(() => {
  const { t0, t1 } = window.value
  if (t0 != null && t1 != null) return WEEK / (t1 - t0)
  // 'all': scale by the actual data span.
  const times = new Set()
  for (const buckets of Object.values(props.data?.views || {})) {
    for (const k of Object.keys(buckets)) times.add(Date.parse(k))
  }
  const arr = [...times]
  if (arr.length < 2) return 1
  return WEEK / (Math.max(...arr) - Math.min(...arr))
 })
 const filteredData = computed(() => {
  if (!props.data) return null
  const { t0, t1 } = window.value
  return {
    transitions: filterTransitionsByRange(props.data.transitions, t0, t1),
    views: filterViewsByRange(props.data.views, t0, t1),
  }
 })
 const filteredVisits = computed(() =>
  filterVisitsByRange(props.data?.visits, window.value.t0, window.value.t1),
 )
 const graph = computed(() =>
  filteredData.value
    ? buildTransitionGraph(filteredData.value, props.pageTree, filteredVisits.value, visualScale.value)
    : null,
 )
 // Bead animation: every bead is simulated independently in JS. Each flow
 // (one per edge direction) emits a bead every `interval` seconds; beads
 // travel at BEAD_SPEED along the segment and are dropped at the end.
 // There is deliberately no cap on beads in flight.
 const beads = shallowRef([])
 let rafId = 0
 const MAX_BEAD_RATE = 120 // upper bound on total beads per second
 const startBeads = (flows) => {
  cancelAnimationFrame(rafId)
  beads.value = []
  if (!flows?.length) return
  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return
  // Cap the total bead emission rate so a busy range cannot spawn enough
  // beads to kill the page. Existing per-range time scaling is preserved;
  // this is only a proportional emergency throttle when the limit is hit.
  const totalRate = flows.reduce((s, f) => s + 1 / f.interval, 0)
  const scale = totalRate > MAX_BEAD_RATE ? MAX_BEAD_RATE / totalRate : 1
  const live = [] // { flow, t0 } — one entry per bead in flight
  const now = performance.now()
  const emitters = flows.map((flow) => {
    const interval = (flow.interval / scale) * 1000
    // Pre-fill the traversal with evenly spaced beads (random phase), so
    // the flow appears already running instead of starting empty.
    const phase = Math.random() * interval
    for (let t = now - (flow.len / BEAD_SPEED) * 1000 + phase; t <= now; t += interval) {
      live.push({ flow, t0: t })
    }
    return { flow, interval, next: now + phase }
  })
  const tick = (t) => {
    for (const e of emitters) {
      while (e.next <= t) {
        live.push({ flow: e.flow, t0: e.next })
        e.next += e.interval
      }
    }
    const out = []
    for (let i = live.length - 1; i >= 0; i--) {
      const b = live[i]
      const p = ((t - b.t0) / 1000) * BEAD_SPEED / b.flow.len
      if (p >= 1) {
        live.splice(i, 1)
        continue
      }
      out.push({
        x: b.flow.x1 + (b.flow.x2 - b.flow.x1) * p,
        y: b.flow.y1 + (b.flow.y2 - b.flow.y1) * p,
      })
    }
    beads.value = out
    rafId = requestAnimationFrame(tick)
  }
  rafId = requestAnimationFrame(tick)
 }
 watch(() => graph.value?.flows, startBeads, { immediate: true })
 onBeforeUnmount(() => cancelAnimationFrame(rafId))
 </script>
 <template>
  <section v-if="graph">
    <svg class="tmap" :viewBox="`${graph.bounds.x0} ${graph.bounds.y0} ${graph.bounds.x1 - graph.bounds.x0} ${graph.bounds.y1 - graph.bounds.y0}`"
         role="img" aria-label="map of transitions between pages">
      <defs>
        <!-- Unit-radius circle; only the portion near the bottom is used. -->
        <path id="tnode-label-arc" d="M 0,-1 A 1,1 0 1,0 0,1 A 1,1 0 1,0 -0.001,-1" />
      </defs>
      <path v-for="(a, i) in graph.arcs" :key="'a' + i"
            :d="a.d" class="tarc" />
      <path v-for="(e, i) in graph.edges" :key="'e' + i"
            :d="e.d" :class="['tconn', e.external && 'tconn-exit']">
        <title>{{ e.title }}</title>
      </path>
      <circle v-for="(b, i) in beads" :key="'b' + i"
              :cx="b.x" :cy="b.y" :r="BEAD_R" class="tbead" />
      <g v-for="(x, i) in graph.extNodes" :key="'x' + i">
        <a v-if="x.href" :href="x.href" target="_blank" rel="noopener" :title="x.path">
          <circle :cx="x.x" :cy="x.y" :r="x.r"
                  :class="['txnode', x.kind === 'source' ? 'txnode-source' : 'txnode-exit']" />
          <text :transform="`translate(${x.x}, ${x.y}) scale(${x.r - 4})`" class="tnodeslug" :style="{ '--node-r': x.r - 4 }">
            <textPath href="#tnode-label-arc" startOffset="50%" text-anchor="middle" side="right">{{ x.label }}</textPath>
          </text>
          <text :x="x.x" :y="x.y + 4" class="tnodecount">{{ formatCount(x.count) }}</text>
        </a>
        <g v-else :title="x.path">
          <circle :cx="x.x" :cy="x.y" :r="x.r"
                  :class="['txnode', x.kind === 'source' ? 'txnode-source' : 'txnode-exit']" />
          <text :transform="`translate(${x.x}, ${x.y}) scale(${x.r - 4})`" class="tnodeslug" :style="{ '--node-r': x.r - 4 }">
            <textPath href="#tnode-label-arc" startOffset="50%" text-anchor="middle" side="right">{{ x.label }}</textPath>
          </text>
          <text :x="x.x" :y="x.y + 4" class="tnodecount">{{ formatCount(x.count) }}</text>
        </g>
      </g>
      <g v-for="n in graph.nodes" :key="n.path">
        <a v-if="!n.hidden" :href="n.path" :title="n.title">
          <circle :cx="n.x" :cy="n.y" :r="TNODE_R" class="tnode" />
          <text :transform="`translate(${n.x}, ${n.y}) scale(${TNODE_R - 4})`" class="tnodeslug" :style="{ '--node-r': TNODE_R - 4 }">
            <textPath href="#tnode-label-arc" startOffset="50%" text-anchor="middle" side="right">{{ n.label }}</textPath>
          </text>
          <text :x="n.x" :y="n.y + 4" class="tnodecount">
            {{ n.readMin ? `${formatCount(n.views)}×${n.readMin}m` : formatCount(n.views) }}
          </text>
        </a>
        <template v-else>
          <text :x="n.x" :y="n.y"
                :transform="`rotate(${n.angle * 180 / Math.PI}, ${n.x}, ${n.y})`"
                class="tnodehidden" text-anchor="start" dominant-baseline="middle">➤</text>
          <text :x="n.x + Math.cos(n.angle) * 10"
                :y="n.y + Math.sin(n.angle) * 10"
                :transform="`rotate(${(n.angle + (Math.cos(n.angle) < 0 ? Math.PI : 0)) * 180 / Math.PI}, ${n.x + Math.cos(n.angle) * 10}, ${n.y + Math.sin(n.angle) * 10})`"
                :text-anchor="Math.cos(n.angle) < 0 ? 'end' : 'start'"
                class="tnodehidden" dominant-baseline="middle">{{ n.label }}</text>
        </template>
      </g>
    </svg>
  </section>
 </template>
 <style scoped>
 /* Transition map: radial graph of internal page-to-page transitions. */
 .tmap {
  display: block;
  width: 100%;
  max-width: 36rem;
  margin: 0 auto;
 }
 .tmap .tconn {
  fill: var(--accent);
  opacity: 0.4; /* uniform, not strength-encoded: width carries that */
 }
 .tmap .tconn-exit {
  fill: var(--text);
 }
 .tmap .tbead {
  fill: var(--accent);
  opacity: 0.85;
  filter: drop-shadow(0 0 2.5px var(--accent));
 }
 .tmap .txnode {
  fill: var(--bg, Canvas);
  stroke-width: 1.5;
 }
 .tmap .txnode-source { stroke: var(--text); }
 .tmap .txnode-exit { stroke: var(--text); }
 .tmap .tarc {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
 }
 .tmap .tnode {
  fill: var(--bg, Canvas);
  stroke: var(--accent);
  stroke-width: 1.5;
 }
 .tmap .tnodeslug {
  fill: var(--text);
  font-size: calc(11px / var(--node-r, 34));
  text-anchor: middle;
 }
 .tmap a { cursor: pointer; }
 .tmap a:hover .tnodeslug { fill: var(--accent); }
 .tmap .tnodecount {
  fill: var(--muted);
  font-size: 10px;
  text-anchor: middle;
 }
 .tmap .tnodehidden {
  fill: var(--text);
  font-size: 9px;
 }
 section { margin-top: 1.8rem; }
 </style>
@@ -0,0 +1,156 @@
 <script setup>
 // Visitor metadata cell shared by the recent-visits, crawlers, and abuse tables.
 // Displays IP/network/host, country flag/city, UA, and language when available.
 // Clicking the IP copies the full address to the clipboard.
 // ``variantCount`` overrides the UA line to warn when multiple client
 // fingerprints share the same IP (e.g. a scanner rotating UAs).
 import { computed } from 'vue'
 import * as flagSvgs from 'country-flag-icons/string/3x2'
 import { copyIp, formatLang } from './analytics/format.js'
 const props = defineProps({
  ip: { type: String, default: '' },
  ipDisplay: { type: String, default: '—' },
  ua: { type: String, default: '' },
  uaRaw: { type: String, default: '' },
  country: { type: String, default: '' },
  city: { type: String, default: '' },
  lang: { type: String, default: '' },
  langDisplay: { type: String, default: '' },
  isHost: { type: Boolean, default: false },
  variantCount: { type: Number, default: 1 },
 })
 const hasCountry = computed(() => !!(props.country && props.country !== '—'))
 const hasCity = computed(() => !!(props.city && props.city !== '—'))
 const hasLocale = computed(() => hasCountry.value || hasCity.value)
 const langValue = computed(() => props.langDisplay || formatLang(props.lang))
 const showLang = computed(() => langValue.value && langValue.value !== '—')
 function flagSvg(code) {
  return flagSvgs[code?.toUpperCase()] || ''
 }
 function countryName(code) {
  if (!code) return ''
  try {
    return new Intl.DisplayNames(['en'], { type: 'region' }).of(code.toUpperCase())
  } catch {
    return ''
  }
 }
 </script>
 <template>
  <td class="visitor-cell" :class="{ 'host-cell': isHost }">
    <div class="visitor-rows">
      <div class="visitor-row">
        <div class="locale-line">
          <span v-if="flagSvg(country)" class="flag" v-html="flagSvg(country)" :title="countryName(country) || country"></span>
          <template v-if="hasCity"><small class="city-name muted">{{ city }}</small></template>
          <template v-else-if="!hasLocale">—</template>
        </div>
        <div class="ip-line">
          <span class="clickable-ip small muted"
                :title="ip"
                @click="copyIp(ip, $event)">{{ ipDisplay }}</span>
        </div>
      </div>
      <div class="visitor-row">
        <div class="ua-line">
          <small v-if="variantCount > 1" class="muted variant-hint">{{ variantCount }} client variations</small>
          <small v-else class="muted" :title="uaRaw">{{ ua || '—' }}</small>
        </div>
        <div v-if="showLang && variantCount <= 1" class="locale-lang"><small class="muted">{{ langValue }}</small></div>
      </div>
    </div>
  </td>
 </template>
 <style scoped>
 .visitor-cell {
  width: 18em;
  max-width: 18em;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
 }
 .visitor-cell.host-cell {
  text-align: right;
 }
 .visitor-rows {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
 }
 .visitor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
 }
 .visitor-row > * {
  min-width: 0;
 }
 .locale-line,
 .ip-line,
 .ua-line {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 .locale-line {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.3rem;
 }
 .ip-line {
  text-align: right;
 }
 .ua-line {
  text-align: left;
 }
 .locale-lang {
  flex: 0 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
 }
 .city-name {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
 }
 .flag {
  display: inline-flex;
  width: 18px;
  height: 12px;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
  vertical-align: middle;
 }
 .flag :deep(svg) {
  width: 100%;
  height: 100%;
  display: block;
 }
 </style>
@@ -0,0 +1,216 @@
 <script setup>
 /**
 * Visitor and page-view smoothed curves for a single shared time range.
 */
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { makeSeries } from './analytics/time.js'
 import { CHART_H, CHART_W, buildChart, fmtY } from './analytics/chart.js'
 const DAY_REFRESH_MS = 15000
 const props = defineProps({
  data: { type: Object, default: null },
  range: { type: String, required: true },
 })
 // Views across all pages combined into one raw bucket map.
 const allViews = computed(() => {
  const all = {}
  for (const buckets of Object.values(props.data?.views || {})) {
    for (const [k, c] of Object.entries(buckets)) all[k] = (all[k] || 0) + c
  }
  return all
 })
 const visitSeries = computed(() => makeSeries(props.data?.site_visits, props.range))
 const viewSeries = computed(() => makeSeries(allViews.value, props.range))
 function freqLabel(unit) {
  return unit === '5min' ? '5 min' : unit === 'hour' ? 'hourly' : 'daily'
 }
 const now = ref(Date.now())
 let refreshInterval = null
 onMounted(() => {
  refreshInterval = setInterval(() => { now.value = Date.now() }, DAY_REFRESH_MS)
 })
 onUnmounted(() => {
  if (refreshInterval) clearInterval(refreshInterval)
 })
 const visitChart = computed(() => buildChart(visitSeries.value, now.value))
 const viewChart = computed(() => buildChart(viewSeries.value, now.value))
 </script>
 <template>
  <section v-for="c in [
      { ylabel: 'visits', chart: visitChart, empty: 'no visits recorded yet' },
      { ylabel: 'views', chart: viewChart, empty: 'no views recorded yet' },
    ]" :key="c.ylabel">
    <template v-if="c.chart">
      <div class="chartwrap">
        <div class="plot">
          <div class="plotarea">
            <span class="yaxis-label">{{ freqLabel(c.chart.unit) }} {{ c.ylabel }}</span>
            <svg class="chart" :viewBox="`0 0 ${CHART_W} ${CHART_H}`"
                 preserveAspectRatio="none" role="img" :aria-label="`${freqLabel(c.chart.unit)} ${c.ylabel}`">
              <line v-for="g in c.chart.majors.slice(1)" :key="'j' + g.value"
                    :x1="0" :x2="CHART_W" :y1="g.y" :y2="g.y" class="major" />
              <template v-for="t in c.chart.xticks" :key="'t' + t.x">
                <line v-if="t.line" :x1="t.x" :x2="t.x" :y1="0" :y2="CHART_H"
                      class="minor vertical" />
              </template>
              <template v-if="c.chart.bars">
                <rect v-for="(b, i) in c.chart.bars" :key="'b' + i"
                      :x="b.x" :y="b.y" :width="b.width" :height="b.height" class="bar" />
                <path :d="c.chart.skyline" class="line" />
              </template>
              <template v-else>
                <template v-for="(s, i) in c.chart.series" :key="i">
                  <path v-if="s.area" :d="s.area" class="area" />
                  <path :d="s.line" class="line" :style="{ opacity: s.opacity }" />
                </template>
              </template>
              <line :x1="0" :x2="CHART_W" :y1="CHART_H - 0.5" :y2="CHART_H - 0.5"
                    class="axis" />
            </svg>
            <span v-for="g in c.chart.majors" :key="g.value" class="ylab"
                  :style="{ bottom: g.bottom + '%' }">{{ fmtY(g.value) }}</span>
          </div>
          <div class="xlabels">
            <span v-for="t in c.chart.xticks" :key="t.x" class="xlab"
                  :style="{ left: t.left + '%' }">{{ t.label }}</span>
          </div>
        </div>
      </div>
      <div v-if="c.chart.series && c.chart.series.length > 1" class="legend">
        <span v-for="(s, i) in c.chart.series" :key="i" :style="{ opacity: s.opacity }">
          ● {{ s.label }}
        </span>
      </div>
    </template>
    <p v-else class="empty">{{ c.empty }}</p>
  </section>
 </template>
 <style scoped>
 /* The svg is stretched (preserveAspectRatio none), so all text lives in
   HTML overlays positioned by the same fractions the geometry uses. */
 .chartwrap {
  padding-left: 2.8rem; /* y labels */
 }
 .plot {
  display: flex;
  flex-direction: column;
  width: 100%;
 }
 .plotarea {
  position: relative;
  height: 8rem;
 }
 .xlabels {
  position: relative;
  height: 1.2rem;
 }
 .chart {
  display: block;
  width: 100%;
  height: 100%;
 }
 .ylab {
  position: absolute;
  left: -2.8rem;
  width: 2.6rem;
  text-align: right;
  transform: translateY(50%);
  font-size: 0.7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
 }
 .xlab {
  position: absolute;
  top: 0.25rem;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
 }
 .xlabels .xlab:first-child { transform: none; }
 .xlabels .xlab:last-child { transform: translateX(-100%); }
 .chart .minor {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.35;
 }
 .chart .minor.vertical {
  opacity: 0.25;
 }
 .chart .major {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 3 4;
  opacity: 0.8;
 }
 .chart .axis {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
 }
 .chart .area {
  fill: var(--accent);
  opacity: 0.15;
 }
 .chart .bar {
  fill: var(--accent);
  opacity: 0.15;
 }
 .chart .line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
 }
 .legend {
  display: flex;
  gap: 1.2rem;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--muted);
 }
 .legend span { color: var(--accent); }
 .yaxis-label {
  position: absolute;
  top: 50%;
  left: -2.8rem;
  font-size: 0.7rem;
  color: var(--muted);
  writing-mode: vertical-rl;
  white-space: nowrap;
  transform: translateY(-50%) rotate(180deg);
 }
 section { margin-top: 1.8rem; }
 .empty { color: var(--muted); }
 </style>
@@ -0,0 +1,24 @@
 // Analytics page entry: mounts AnalyticsView inside the normal page layout.
 // The backend renders #analytics-app inside #main and links this module for
 // the initial load; pagerite.js also imports it on fetch-navigation to /_a.
 import { createApp } from 'vue'
 import AnalyticsView from './AnalyticsView.vue'
 let app = null
 export function mount(container) {
  if (app) return
  app = createApp(AnalyticsView, {
    initialRange: location.hash.slice(1) || 'week',
  })
  app.mount(container)
 }
 export function unmount() {
  app?.unmount()
  app = null
 }
 // Auto-mount on a normal (non-fetch) page load.
 const container = document.getElementById('analytics-app')
 if (container) mount(container)
@@ -0,0 +1,419 @@
 /**
 * Chart geometry, smoothing, and SVG path generation for analytics charts.
 *
 * Fixed 720x180 viewBox, stretched to the panel width; values are per-unit
 * rates (hour on the week view, day on month+).
 */
 import { DAY, HOUR, MIN5, WEEK, mondayUTC } from './time.js'
 import { formatCount } from './format.js'
 export const CHART_W = 720
 export const CHART_H = 180
 export const PAD_TOP = 14 // room above the highest point
 /**
 * Y always starts at 0; the max is a multiple of a 1-2-5 major step with at
 * most 5 intervals, so labeled ticks are always round and evenly divided.
 * A minimum range of 10 keeps tiny near-zero values (e.g. a single visit)
 * from being enlarged to a fractional scale; minor lines subdivide each
 * major step in five when that yields integers.
 */
 export function yScale(maxValue) {
  let step = 1
  outer: for (let exp = -3; exp < 8; exp++) {
    for (const base of [1, 2, 5]) {
      step = base * 10 ** exp
      if (Math.ceil(maxValue / step) <= 5) break outer
    }
  }
  let max = Math.ceil(maxValue / step) * step
  if (max < 10) {
    max = 10
    step = 2
  }
  const minor = step >= 5 && step % 5 === 0 ? step / 5 : null
  return { max, step, minor }
 }
 /**
 * Edge-aware adaptive Gaussian smoothing. A change-point detector first
 * finds traffic-level shifts (two-unit totals compared on both sides of
 * each bucket; strong ratio + significance marks a candidate, and each run
 * of candidates keeps only its best-scoring bucket as an edge). Each
 * edge-delimited segment is then smoothed independently: a broad two-unit
 * pilot estimates the local traffic rate, which ramps the Gaussian sigma
 * from ~0.4 units (isolated events stay narrow, peaking at ~1 event/unit)
 * up to 1 unit (busy traffic gets full smoothing), and every bucket spreads
 * its count with its local sigma, clipped to the segment and renormalized
 * so total visitor count is preserved exactly. The unit is one hour on the
 * week view and one day on the month+ views, so the smoothing time scale
 * follows the range (month+ sigmas are 24x the hourly ones). The raw series
 * is drawn faintly behind the curve for reference. Operates on raw counts.
 */
 export function smooth(counts, binMinutes, unitMinutes, {
  minSigmaMinutes = unitMinutes / Math.sqrt(2 * Math.PI),
  maxSigmaMinutes = unitMinutes,
  pilotSigmaMinutes = 2 * unitMinutes,
  detectorWindowMinutes = 2 * unitMinutes,
  // Count thresholds are defined per hour and scale with the unit, so
  // "low traffic" means the same thing on hourly and daily views
  // (5-20 events/hour = 120-480/day on the month+ ranges).
  highTrafficEvents = 10 * unitMinutes / 60,
  minRatio = 2.5,
  minSignificance = 4,
  sigmaRampStart = 5 * unitMinutes / 60,
  sigmaRampEnd = 20 * unitMinutes / 60,
 } = {}) {
  const n = counts.length
  if (!n) return counts
  const detectorWindowBins = Math.max(1, Math.round(detectorWindowMinutes / binMinutes))
  const cumsum = new Float64Array(n + 1)
  for (let i = 0; i < n; i++) cumsum[i + 1] = cumsum[i] + counts[i]
  // Detect abrupt regime changes from aggregated traffic on both sides.
  // Individual bins are deliberately ignored because even high traffic
  // produces many 0-1 count bins at five-minute resolution.
  const score = new Float64Array(n)
  const candidate = new Uint8Array(n)
  for (let i = detectorWindowBins; i < n - detectorWindowBins; i++) {
    const left = cumsum[i] - cumsum[i - detectorWindowBins]
    const right = cumsum[i + detectorWindowBins] - cumsum[i]
    const high = Math.max(left, right)
    const low = Math.min(left, right)
    if (high < highTrafficEvents) continue
    const ratio = (high + 1) / (low + 1)
    const significance = (high - low) / Math.sqrt(high + low + 1)
    if (ratio >= minRatio && significance >= minSignificance) {
      candidate[i] = 1
      score[i] = significance * Math.log(ratio)
    }
  }
  // Collapse each continuous detector region to its strongest boundary.
  const edges = []
  for (let i = 0; i < n;) {
    if (!candidate[i]) { i++; continue }
    let j = i + 1
    while (j < n && candidate[j]) j++
    let best = i
    for (let k = i + 1; k < j; k++) {
      if (score[k] > score[best]) best = k
    }
    edges.push(best)
    i = j
  }
  const reflectIndex = (i, length) => {
    while (i < 0 || i >= length) {
      i = i < 0 ? -i - 1 : 2 * length - i - 1
    }
    return i
  }
  const gaussianFilterReflect = (values, sigmaBins) => {
    const length = values.length
    const radius = Math.ceil(4 * sigmaBins)
    const kernel = new Float64Array(radius * 2 + 1)
    let sum = 0
    for (let k = -radius; k <= radius; k++) {
      const w = Math.exp(-0.5 * (k / sigmaBins) ** 2)
      kernel[k + radius] = w
      sum += w
    }
    for (let i = 0; i < kernel.length; i++) kernel[i] /= sum
    const out = new Float64Array(length)
    for (let i = 0; i < length; i++) {
      let value = 0
      for (let k = -radius; k <= radius; k++) {
        value += values[reflectIndex(i + k, length)] * kernel[k + radius]
      }
      out[i] = value
    }
    return out
  }
  // Process each discontinuity-delimited regime independently so neither
  // the pilot nor the final Gaussian can see through a detected boundary.
  const bounds = [0, ...edges, n]
  const smoothed = new Float64Array(n)
  for (let b = 0; b < bounds.length - 1; b++) {
    const lo = bounds[b]
    const length = bounds[b + 1] - lo
    const segment = counts.slice(lo, lo + length)
    // Broad pilot estimates only the generic local traffic level used for
    // choosing sigma; it is not the final displayed curve.
    const pilot = gaussianFilterReflect(segment, pilotSigmaMinutes / binMinutes)
    // Keep isolated/sparse traffic at the minimum bandwidth through
    // sigmaRampStart events, then ramp toward maxSigmaMinutes (thresholds
    // are per-hour rates scaled to the unit: low traffic is low traffic
    // on every range).
    const sigmaMinutes = new Float64Array(length)
    for (let i = 0; i < length; i++) {
      const ratePerUnit = pilot[i] * unitMinutes / binMinutes
      let mix = (ratePerUnit - sigmaRampStart) / (sigmaRampEnd - sigmaRampStart)
      mix = Math.sqrt(Math.max(0, Math.min(1, mix)))
      sigmaMinutes[i] = minSigmaMinutes + mix * (maxSigmaMinutes - minSigmaMinutes)
    }
    // Each input bin spreads its own count using its local sigma. The
    // per-bin kernel is renormalized after clipping to the segment,
    // preserving total visitor count apart from floating-point error.
    for (let j = 0; j < length; j++) {
      const count = segment[j]
      if (!count) continue
      const sigmaBins = sigmaMinutes[j] / binMinutes
      const radius = Math.ceil(4 * sigmaBins)
      const start = Math.max(0, j - radius)
      const end = Math.min(length, j + radius + 1)
      let weightSum = 0
      for (let i = start; i < end; i++) {
        const d = i - j
        weightSum += Math.exp(-0.5 * (d / sigmaBins) ** 2)
      }
      for (let i = start; i < end; i++) {
        const d = i - j
        smoothed[lo + i] += count * Math.exp(-0.5 * (d / sigmaBins) ** 2) / weightSum
      }
    }
  }
  return [...smoothed]
 }
 /**
 * Catmull-Rom spline through the (smoothed) points, control points clamped
 * to the plot area so the curve can never dip below zero or above the max.
 */
 export function spline(pts) {
  if (pts.length < 3) {
    return `M${pts.map((p) => `${p.x},${p.y}`).join('L')}`
  }
  const clampY = (y) => Math.min(CHART_H, Math.max(PAD_TOP, y))
  let d = `M${pts[0].x},${pts[0].y}`
  for (let i = 0; i < pts.length - 1; i++) {
    const p0 = pts[i - 1] || pts[i]
    const p1 = pts[i]
    const p2 = pts[i + 1]
    const p3 = pts[i + 2] || p2
    const c1y = clampY(p1.y + (p2.y - p0.y) / 6)
    const c2y = clampY(p2.y - (p3.y - p1.y) / 6)
    d += `C${p1.x + (p2.x - p0.x) / 6},${c1y} `
       + `${p2.x - (p3.x - p1.x) / 6},${c2y} ${p2.x},${p2.y}`
  }
  return d
 }
 /** Build a full chart model from a series descriptor produced by time.js. */
 export function buildChart(input, now = Date.now()) {
  if (!input || !input.series.length) return null
  if (input.unit === '5min') return buildDayChart(input, now)
  const { series, t0, t1, rate, binMinutes, unitMinutes, unit } = input
  // Values are per-unit rates (hour on the week view, day on month+); the
  // y max is derived from the *smoothed* curves so random single-bucket
  // spikes don't blow up the scale. Smoothing works on raw counts (its edge
  // detector thresholds are count-based), the result is scaled back to rates.
  const smoothed = series.map((s) =>
    smooth(s.points.map((p) => p.count), binMinutes, unitMinutes).map((v) => v * rate))
  // Scale from the current/primary series only; older overlay weeks are drawn
  // with the same scale and allowed to overflow if they are busier.
  const highest = Math.max(0, ...smoothed[0])
  const { max, step, minor } = yScale(highest)
  const x = (t) => ((t - t0) / (t1 - t0)) * CHART_W
  const y = (v) => PAD_TOP + (1 - Math.max(0, v) / max) * (CHART_H - PAD_TOP)
  const drawn = series.map((s, si) => {
    const pts = s.points.map((p, i) => ({ x: x(p.t), y: y(smoothed[si][i]) }))
    const line = spline(pts)
    const first = pts[0]
    const last = pts.at(-1)
    return {
      ...s,
      line,
      area: s.area ? `${line}L${last.x},${CHART_H}L${first.x},${CHART_H}Z` : null,
    }
  })
  // Major (labeled) and minor (hairline) y grid ticks.
  const majors = []
  const minors = []
  const nMajor = Math.round(max / step)
  for (let k = 0; k <= nMajor; k++) {
    const v = k * step
    majors.push({ value: v, y: y(v), bottom: (1 - PAD_TOP / CHART_H) * (v / max) * 100 })
  }
  if (minor) {
    for (let v = minor; v < max; v += minor) {
      if (v % step !== 0) minors.push({ y: y(v) })
    }
  }
  // X ticks. Week view: weekday labels centered at midday UTC, no vertical
  // lines (day boundaries would be misleading in the viewer's timezone).
  // Month view: likewise lineless, day numbers at noon UTC with the month
  // name substituted for the 1st (marking the month change). Longer
  // ranges: boundary lines at Mondays / months / years.
  const isWeek = t1 - t0 === WEEK
  const isMonth = !isWeek && t1 - t0 <= 31 * DAY
  const xticks = isWeek
    ? Array.from({ length: 7 }, (_, d) => {
        const t = t0 + d * DAY + 12 * HOUR
        return {
          x: x(t), left: ((t - t0) / (t1 - t0)) * 100,
          label: new Date(t).toLocaleDateString(undefined, {
            weekday: 'short', timeZone: 'UTC',
          }),
          line: false,
        }
      })
    : isMonth
      ? Array.from(
          { length: Math.floor((t1 - Math.ceil(t0 / DAY) * DAY) / DAY) },
          (_, d) => {
            const day = Math.ceil(t0 / DAY) * DAY + d * DAY
            const date = new Date(day)
            const t = day + 12 * HOUR
            return {
              x: x(t), left: ((t - t0) / (t1 - t0)) * 100,
              label: date.getUTCDate() === 1
                ? date.toLocaleDateString(undefined, { month: 'short', timeZone: 'UTC' })
                : String(date.getUTCDate()),
              line: false,
            }
          },
        )
      : xticksFor(t0, t1).map((t) => ({
          x: x(t), left: ((t - t0) / (t1 - t0)) * 100,
          label: fmtTick(t, t1 - t0), line: true,
        }))
  return { max, majors, minors, series: drawn, xticks, unit }
 }
 /**
 * Day view: 5-minute bars for the last 24 hours. Bars are drawn at raw
 * counts; the skyline uses a projected full-bucket value for the still-open
 * final bucket. The y scale is derived from the projected skyline maximum.
 */
 export function buildDayChart(input, now = Date.now()) {
  const { series, t0, t1 } = input
  const points = series[0]?.points || []
  const n = points.length
  if (!n) return null
  const bucketMs = (t1 - t0) / n
  const bucketWidth = CHART_W / n
  const gap = 0.2
  const barWidth = Math.max(0.2, bucketWidth - gap)
  const x = (i) => i * bucketWidth + gap / 2
  const prevRaw = n > 1 ? points[n - 2].count : 0
  const projected = points.map((p, i) => {
    if (i !== n - 1) return p.count
    const bucketStart = t0 + i * bucketMs
    const elapsed = Math.max(1, Math.min(bucketMs, now - bucketStart))
    // Blend the observed partial bucket with the previous full bucket:
    // the longer the current bucket has run, the less we borrow from it.
    const share = elapsed / bucketMs
    return p.count + prevRaw * (1 - share)
  })
  const highest = Math.max(0, ...projected)
  const { max, step, minor } = yScale(highest)
  const y = (v) => PAD_TOP + (1 - Math.max(0, v) / max) * (CHART_H - PAD_TOP)
  const bars = points.map((p, i) => {
    const bx = x(i)
    const by = y(p.count)
    return {
      x: bx,
      y: by,
      width: barWidth,
      height: CHART_H - by,
      raw: p.count,
      projected: projected[i],
    }
  })
  let skyline = ''
  for (let i = 0; i < bars.length; i++) {
    const b = bars[i]
    const top = y(b.projected)
    if (i === 0) {
      skyline += `M${b.x},${top} H${b.x + b.width}`
    } else {
      skyline += ` V${top} H${b.x + b.width}`
    }
  }
  const majors = []
  const minors = []
  const nMajor = Math.round(max / step)
  for (let k = 0; k <= nMajor; k++) {
    const v = k * step
    majors.push({ value: v, y: y(v), bottom: (1 - PAD_TOP / CHART_H) * (v / max) * 100 })
  }
  if (minor) {
    for (let v = minor; v < max; v += minor) {
      if (v % step !== 0) minors.push({ y: y(v) })
    }
  }
  const xticks = []
  const tickStep = 3 * HOUR
  const firstTick = Math.ceil(t0 / tickStep) * tickStep
  for (let t = firstTick; t < t1; t += tickStep) {
    if (t < t0) continue
    const d = new Date(t)
    xticks.push({
      x: ((t - t0) / (t1 - t0)) * CHART_W,
      left: ((t - t0) / (t1 - t0)) * 100,
      label: `${String(d.getUTCHours()).padStart(2, '0')}:00`,
      line: false,
    })
  }
  return { bars, skyline: skyline.trim(), max, majors, minors, xticks, unit: '5min', series: [] }
 }
 /** X ticks for year/all: Monday boundaries up to a quarter, UTC month
 *  boundaries up to a few years, then years. */
 export function xticksFor(t0, t1) {
  const span = t1 - t0
  const ticks = []
  if (span <= 100 * DAY) {
    for (let t = mondayUTC(t0); t <= t1; t += WEEK) {
      if (t >= t0) ticks.push(t)
    }
    return ticks
  }
  if (span <= 4 * 365 * DAY) {
    const d = new Date(t0)
    let t = Date.UTC(d.getUTCFullYear(), d.getUTCMonth() + 1, 1)
    for (; t <= t1; ) {
      ticks.push(t)
      const m = new Date(t)
      t = Date.UTC(m.getUTCFullYear(), m.getUTCMonth() + 1, 1)
    }
    return ticks
  }
  const d = new Date(t0)
  for (let yr = d.getUTCFullYear() + 1; Date.UTC(yr, 0, 1) <= t1; yr++) {
    ticks.push(Date.UTC(yr, 0, 1))
  }
  return ticks
 }
 export function fmtTick(t, span) {
  const d = new Date(t)
  if (span <= 100 * DAY) {
    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', timeZone: 'UTC' })
  }
  if (span <= 4 * 365 * DAY) {
    return d.getUTCMonth() === 0
      ? d.toLocaleDateString(undefined, { year: 'numeric', timeZone: 'UTC' })
      : d.toLocaleDateString(undefined, { month: 'short', timeZone: 'UTC' })
  }
  return d.toLocaleDateString(undefined, { year: 'numeric', timeZone: 'UTC' })
 }
 /** Y labels use the same compact formatter as text labels. */
 export function fmtY(v) {
  return formatCount(v)
 }
@@ -0,0 +1,532 @@
 /**
 * Formatters and aggregators for summary sections: totals and the recent
 * visit trail.
 */
 /**
 * IPv4 unchanged, IPv6 returns the /64 network prefix in compact form.
 * Falls back to the original value when parsing fails.
 */
 export const hostIP = (ip) => {
  try {
    if (!ip || !ip.includes(':')) return ip
    const strip = (s) => s.replace(/^\[|\]$/g, '')
    const norm = strip(new URL(`http://[${ip}]/`).hostname)
    const [l, r] = norm.split('::').map((s) => (s ? s.split(':') : []))
    const full = r
      ? [...l, ...Array(8 - l.length - r.length).fill('0'), ...r]
      : l
    return strip(
      new URL(`http://[${full.slice(0, 4).join(':')}::]/`).hostname,
    ).replace(/::$/, '')
  } catch (e) {
    console.error('hostIP processing failed for:', ip, e)
    return ip
  }
 }
 function showCopiedFeedback(el) {
  if (!el || typeof document === 'undefined') return
  const popup = document.createElement('span')
  popup.textContent = 'Copied!'
  popup.className = 'copy-popup'
  popup.style.cssText =
    'position:absolute;bottom:calc(100% + 0.25rem);left:50%;' +
    'transform:translateX(-50%);padding:0.15rem 0.4rem;' +
    'background:var(--text, CanvasText);color:var(--bg, Canvas);' +
    'border-radius:0.25rem;font-size:0.75rem;white-space:nowrap;' +
    'pointer-events:none;z-index:10;'
  el.classList.add('has-copy-popup')
  el.appendChild(popup)
  setTimeout(() => {
    popup.remove()
    el.classList.remove('has-copy-popup')
  }, 1200)
 }
 /** Copy the full IP to the clipboard and show a brief "Copied!" popup. */
 export async function copyIp(ip, event) {
  if (!ip) return
  const el = event?.currentTarget
  try {
    await navigator.clipboard.writeText(ip)
    showCopiedFeedback(el)
  } catch {
    /* ignore */
  }
 }
 /** Copy arbitrary text to the clipboard and show a brief "Copied!" popup. */
 export async function copyList(text, event) {
  if (!text) return
  const el = event?.currentTarget
  try {
    await navigator.clipboard.writeText(text)
    showCopiedFeedback(el)
  } catch {
    /* ignore */
  }
 }
 /** Total page views across every page and every bucket. */
 export function calcTotalViews(views) {
  let n = 0
  for (const buckets of Object.values(views || {})) {
    for (const c of Object.values(buckets)) n += c
  }
  return n
 }
 // Very short reads are navigation/skims, not real reading time.
 export const MIN_READ_SECONDS = 10
 /** Average minutes per visit and average of per-article median read minutes. */
 export function calcReadStats(visits) {
  const perArticle = {}
  let totalVisitSeconds = 0
  let visitCount = 0
  for (const v of visits || []) {
    const secs = Object.values(v.read || {}).filter((s) => s >= MIN_READ_SECONDS)
    if (!secs.length) continue
    visitCount++
    totalVisitSeconds += secs.reduce((a, b) => a + b, 0)
    for (const [path, s] of Object.entries(v.read || {})) {
      if (s >= MIN_READ_SECONDS) {
        ;(perArticle[path] || (perArticle[path] = [])).push(s)
      }
    }
  }
  const avgMinPerVisit = visitCount
    ? Math.max(1, Math.round(totalVisitSeconds / visitCount / 60))
    : 0
  let articleMedianSum = 0
  const articleCount = Object.keys(perArticle).length
  for (const arr of Object.values(perArticle)) {
    arr.sort((a, b) => a - b)
    const mid = Math.floor(arr.length / 2)
    const median = arr.length % 2 ? arr[mid] : (arr[mid - 1] + arr[mid]) / 2
    articleMedianSum += Math.max(MIN_READ_SECONDS, median)
  }
  const avgArticleMedianMin = articleCount
    ? Math.max(1, Math.round(articleMedianSum / articleCount / 60))
    : 0
  return { avgMinPerVisit, avgArticleMedianMin }
 }
 /** Build a path -> page title lookup from the site tree. */
 function buildTitleMap(pageTree) {
  const titles = new Map()
  const walk = (items) => {
    for (const item of items || []) {
      titles.set(`/${item.path}`, item.title)
      walk(item.children)
    }
  }
  walk(pageTree)
  return titles
 }
 /** Last path segment for display; front page becomes a house icon. */
 function slugOf(path) {
  return path === '/' ? '🏠︎' : path.split('/').pop()
 }
 /** Host name of an external https origin, with scheme and www. stripped. */
 function externalSlug(origin) {
  try {
    return new URL(origin).host.replace(/^www\./, '')
  } catch {
    return origin.replace(/^https?:\/\//, '').replace(/^www\./, '')
  }
 }
 /** Format one trail step: an internal page or an external https origin. */
 function stepOf(path, titles) {
  if (path?.startsWith('/')) {
    return { path, slug: slugOf(path), title: titles.get(path) || '', external: false, home: path === '/' }
  }
  if (path?.startsWith('https://')) {
    return {
      path,
      slug: externalSlug(path),
      title: 'External site',
      external: true,
    }
  }
  return null
 }
 /**
 * Human-readable relative timestamp.  Adapted from cista-storage: uses
 * ``Intl.RelativeTimeFormat`` for short intervals and a compact date for
 * anything older than a week.
 */
 export function formatWhen(ts, now = Date.now()) {
  const date = new Date(ts)
  const diff = date.getTime() - now
  const adiff = Math.abs(diff)
  const formatter = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
  if (adiff <= 5000) return 'now'
  if (adiff <= 60000) {
    return formatter
      .format(Math.round(diff / 1000), 'second')
      .replace(' ago', '')
      .replaceAll(' ', '\u202F')
  }
  if (adiff <= 3600000) {
    return formatter
      .format(Math.round(diff / 60000), 'minute')
      .replace('utes', '')
      .replace('ute', '')
      .replaceAll(' ', '\u202F')
  }
  if (adiff <= 86400000) {
    return formatter
      .format(Math.round(diff / 3600000), 'hour')
      .replaceAll(' ', '\u202F')
  }
  if (adiff <= 604800000) {
    return formatter
      .format(Math.round(diff / 86400000), 'day')
      .replaceAll(' ', '\u202F')
  }
  let d = date
    .toLocaleDateString('en-ie', {
      weekday: 'short',
      year: 'numeric',
      month: 'short',
      day: 'numeric',
    })
    .replace('Sept', 'Sep')
  if (d.length === 14) d = d.replace(' ', ' \u2007')
  d = d.replaceAll(' ', '\u202F').replace('\u202F', '\u00A0')
  d = d.slice(0, -4) + d.slice(-2)
  return d
 }
 /** Full UTC timestamp for tooltips, e.g. "2026-08-21 00:20:48 UTC". */
 export function formatWhenTooltip(ts) {
  return new Date(ts).toISOString().replace('T', ' ').replace('Z', ' UTC')
 }
 /** Full local timestamp for tooltips, e.g. "21 Aug 2026, 17:38:48". */
 export function formatWhenLocal(ts) {
  return new Date(ts).toLocaleString('en-ie', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  })
 }
 /** Preserve locale case with the region/country subtag upper-cased. */
 export function formatLang(value) {
  if (!value || value === '—') return value
  const parts = value.split('-')
  if (parts.length > 1) {
    parts[parts.length - 1] = parts[parts.length - 1].toUpperCase()
  }
  return parts.join('-')
 }
 /** ISO 8601 UTC timestamp without subseconds, e.g. "2026-08-21T00:20:48Z". */
 export function formatWhenIso(ts) {
  return `${new Date(ts).toISOString().split('.')[0]}Z`
 }
 /**
 * Compact visitor counts: plain below 1k, then 1.2k / 10k / 1.2M.
 * Truncated, not rounded.
 */
 export function formatCount(n) {
  if (n < 1000) return String(n)
  if (n < 10000) return `${Math.trunc(n / 1000)}.${Math.trunc((n % 1000) / 100)}k`
  if (n < 1_000_000) return `${Math.trunc(n / 1000)}k`
  return `${Math.trunc(n / 1_000_000)}.${Math.trunc((n % 1_000_000) / 100_000)}M`
 }
 /**
 * Format recent visits for display, newest first. Each step is a linked slug
 * pointing to its article; external referers/origins are shown as their
 * domain name with the full origin as the link href. The link title shows the
 * article heading when known, or "External site" for origins.
 */
 export function formatRecentVisits(visits, pageTree, limit = 50) {
  const titles = buildTitleMap(pageTree)
  return [...visits]
    .reverse()
    .map((v) => ({
      when: new Date(v.start).toLocaleString(),
      steps: [v.referer, v.entry, ...(v.trail || [])]
        .map((p) => stepOf(p, titles))
        .filter(Boolean),
    }))
    .filter((v) => v.steps.length)
    .slice(0, limit)
 }
 /**
 * Count distinct values of a visit field, sorted most-common first.
 * Returns an array of [value, count] pairs.
 */
 export function countByField(visits, field) {
  const counts = {}
  for (const v of visits || []) {
    const value = v[field]
    if (!value) continue
    counts[value] = (counts[value] || 0) + 1
  }
  return Object.entries(counts).sort((a, b) => b[1] - a[1])
 }
 /**
 * Count UTM parameter occurrences across visits.  Each distinct
 * ``parameter: value`` pair is counted separately.  Returns [pair, count].
 */
 export function countUtmTags(visits) {
  const counts = {}
  for (const v of visits || []) {
    for (const [key, value] of Object.entries(v.utm || {})) {
      const label = `${key}: ${value}`
      counts[label] = (counts[label] || 0) + 1
    }
  }
  return Object.entries(counts).sort((a, b) => b[1] - a[1])
 }
 /** Format a list of [value, count] pairs for inline display. */
 export function formatCounts(entries) {
  return entries.map(([value, count]) => `${value} (${count})`).join(', ')
 }
 /**
 * Count distinct User-Agent strings among crawler hits, most common first.
 * Returns an array of [ua, count] pairs.  ``clients`` maps client hashes to
 * client records.
 */
 export function countCrawlerUas(crawlers, clients) {
  const counts = {}
  for (const c of crawlers || []) {
    const client = (clients || {})[c.client] || {}
    const value = client.ua_pretty || client.ua || '(no UA)'
    counts[value] = (counts[value] || 0) + 1
  }
  return Object.entries(counts).sort((a, b) => b[1] - a[1])
 }
 /**
 * Reduce a reverse-DNS hostname to its right-most components that fit
 * within ``limit`` characters.  This keeps the meaningful main domain
 * while avoiding absurdly long subdomains like ``xxx.yyy.zzz...provider.net``.
 */
 export function mainDomain(host, limit = 24) {
  if (!host) return host
  const labels = host.split('.').filter(Boolean)
  if (!labels.length) return host
  const parts = [labels.pop()]
  while (labels.length) {
    const next = labels[labels.length - 1]
    const candidate = `${next}.${parts.join('.')}`
    if (candidate.length > limit) break
    parts.unshift(labels.pop())
  }
  return parts.join('.')
 }
 /**
 * Group raw crawler hits by client hash and format each group as a row showing
 * every internal page that crawler visited.  Rows are sorted by total hits,
 * most active crawler first, rather than by most recent hit.
 * ``clients`` maps client hashes to client records.
 */
 export function formatCrawlerRows(crawlers, clients, pageTree, now = Date.now()) {
  const titles = buildTitleMap(pageTree)
  const groups = new Map()
  for (const c of crawlers || []) {
    const client = (clients || {})[c.client] || {}
    const g = groups.get(c.client) || {
      clientHash: c.client,
      client,
      lastStart: 0,
      pages: new Map(),
    }
    const start = new Date(c.start).getTime()
    if (start > g.lastStart) g.lastStart = start
    if (c.entry?.startsWith('/')) {
      g.pages.set(c.entry, (g.pages.get(c.entry) || 0) + 1)
    }
    groups.set(c.client, g)
  }
  const totalHits = (g) => {
    let n = 0
    for (const c of g.pages.values()) n += c
    return n
  }
  return [...groups.values()]
    .sort((a, b) => totalHits(b) - totalHits(a) || b.lastStart - a.lastStart)
    .slice(0, 10)
    .map((g) => {
      const client = g.client || {}
      const host = client.host || ''
      const isHost = !!host
      return {
        lastSeen: formatWhen(g.lastStart, now),
        lastSeenIso: formatWhenIso(g.lastStart),
        lastSeenLocal: formatWhenLocal(g.lastStart),
        pages: [...g.pages.entries()]
          .sort((a, b) => b[1] - a[1])
          .map(([path, count]) => ({ ...stepOf(path, titles), count })),
        ip: client.ip || '',
        ipDisplay: isHost ? mainDomain(host) : hostIP(client.ip) || client.ip || '—',
        isHost,
        ua: client.ua_pretty || client.ua || '—',
        uaRaw: client.ua || '',
        lang: client.lang || '—',
        langDisplay: formatLang(client.lang),
        country: client.country || '—',
        city: client.city || '—',
        total: totalHits(g),
      }
    })
 }
 /**
 * Group abuse hits by IP and format each group as a row with the full paths
 * probed.  Identical paths are collapsed into one entry with their hit count.
 * Flagged paths (the ones that triggered abuse classification) are lifted to
 * the top, followed by other 404s, then document GETs from the abuser.  Within
 * each category paths are sorted by count descending, then earliest first.
 * Rows are sorted by most recent hit first.  Visitor metadata comes from the
 * latest client hash seen for the IP; ``clientCount`` tells the visitor cell
 * how many distinct client variations the IP produced.  Paths are shown
 * verbatim (query string included), not resolved against the page tree.
 * ``clients`` maps client hashes to client records.
 */
 export function formatAbuseRows(abuse, clients, now = Date.now()) {
  const groups = new Map()
  for (const a of abuse || []) {
    const client = (clients || {})[a.client] || {}
    const ip = client.ip || ''
    const g = groups.get(ip) || {
      ip,
      pathCounts: new Map(),
      clientHashes: new Set(),
      lastStart: 0,
      lastClient: a.client,
    }
    const start = new Date(a.start).getTime()
    if (start > g.lastStart) {
      g.lastStart = start
      g.lastClient = a.client
    }
    const path = a.path || ''
    const existing = g.pathCounts.get(path) || {
      path,
      count: 0,
      firstStart: start,
      flag: a.flag || false,
      is_404: a.is_404 || false,
    }
    existing.count += 1
    if (start < existing.firstStart) existing.firstStart = start
    if (a.flag) existing.flag = true
    if (!a.is_404) existing.is_404 = false
    g.pathCounts.set(path, existing)
    g.clientHashes.add(a.client)
    groups.set(ip, g)
  }
  const totalHits = (g) => {
    let n = 0
    for (const p of g.pathCounts.values()) n += p.count
    return n
  }
  return [...groups.values()]
    .sort((a, b) => b.lastStart - a.lastStart)
    .slice(0, 10)
    .map((g) => {
      const pathCategory = (p) => (p.flag ? 0 : p.is_404 ? 1 : 2)
      const paths = [...g.pathCounts.values()].sort(
        (a, b) =>
          pathCategory(a) - pathCategory(b) ||
          b.count - a.count ||
          a.firstStart - b.firstStart,
      )
      const client = (clients || {})[g.lastClient] || {}
      const host = client.host || ''
      const isHost = !!host
      return {
        lastSeen: formatWhen(g.lastStart, now),
        lastSeenIso: formatWhenIso(g.lastStart),
        lastSeenLocal: formatWhenLocal(g.lastStart),
        paths: paths.map((p) => ({
          path: p.path,
          count: p.count,
          flag: p.flag,
          is_404: p.is_404,
        })),
        allPaths: paths
          .map((p) => (p.count > 1 ? `${p.count}× ${p.path}` : p.path))
          .join('\n'),
        clientCount: g.clientHashes.size,
        ip: client.ip || g.ip,
        ipDisplay: isHost ? mainDomain(host) : hostIP(client.ip || g.ip) || client.ip || g.ip || '—',
        isHost,
        ua: client.ua_pretty || client.ua || '—',
        uaRaw: client.ua || '',
        lang: client.lang || '—',
        langDisplay: formatLang(client.lang),
        country: client.country || '—',
        city: client.city || '—',
        total: totalHits(g),
      }
    })
 }
 /**
 * Format raw visit records as rows for a technical table.  Returns objects
 * with display strings; missing values become "—".  ``trail`` starts with the
 * external referer (when present), then the entry page and any further internal
 * pages or external exit origins. Only the 20 most recent visits are shown.
 * ``clients`` maps client hashes to client records.
 */
 export function formatVisitRows(visits, clients, pageTree, now = Date.now()) {
  const titles = buildTitleMap(pageTree)
  return [...(visits || [])].reverse().slice(0, 20).map((v) => {
    const client = (clients || {})[v.client] || {}
    const trail = [v.entry, ...(v.trail || [])]
      .map((p) => stepOf(p, titles))
      .filter(Boolean)
    const utmKeys = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content']
    const utmValues = utmKeys.map((k) => (v.utm || {})[k]).filter(Boolean)
    const utm = utmValues.length ? utmValues.join(' · ') : ''
    const utmTitle = Object.entries(v.utm || {})
      .map(([k, value]) => `${k}=${value}`)
      .join(', ')
    const dash = (s) => (s || '—')
    const host = client.host || ''
    const isHost = !!host
    return {
      lastSeen: formatWhen(v.start, now),
      lastSeenIso: formatWhenIso(v.start),
      lastSeenLocal: formatWhenLocal(v.start),
      langDisplay: formatLang(client.lang),
      trail,
      refererStep: stepOf(v.referer, titles),
      referer: dash(v.referer),
      ip: client.ip || '',
      ipDisplay: isHost ? mainDomain(host) : hostIP(client.ip) || client.ip || '—',
      isHost,
      lang: dash(client.lang),
      country: dash(client.country),
      city: dash(client.city),
      ua: client.ua_pretty || client.ua || '—',
      uaRaw: client.ua || '',
      utm: utm || '—',
      utmTitle,
    }
  })
 }
@@ -0,0 +1,170 @@
 /**
 * Time ranges, week alignment and re-bucketing for analytics charts.
 *
 * Raw data comes as sparse 5-minute buckets; the range picks the x window
 * and a coarser bucket size to keep point counts sane. The week range is
 * aligned to Monday 00:00 UTC and overlays previous weeks' curves (fading
 * with age), so weekly patterns compare directly.
 */
 export const MIN5 = 5 * 60e3
 export const HOUR = 3600e3
 export const DAY = 86400e3
 export const WEEK = 7 * DAY
 export const RANGES = {
  day: { label: 'day', span: DAY, bucket: MIN5 },
  week: { label: 'week' },
  month: { label: 'month', span: 30 * DAY, bucket: 6 * HOUR },
  year: { label: 'year', span: 365 * DAY, bucket: DAY },
  all: { label: 'all', span: null, bucket: DAY, minSpan: 30 * DAY },
 }
 /** Monday 00:00 UTC of the week containing t (epoch day 0 was a Thursday). */
 export function mondayUTC(t) {
  const d = Math.floor(t / DAY)
  return (d - ((d + 3) % 7)) * DAY
 }
 /** Parse sparse timestamp buckets into a { epochMs: count } map. */
 export function rawTimes(buckets) {
  const raw = {}
  // Key by parsed timestamp: Python writes "+00:00", JS ISO uses "Z".
  for (const [k, c] of Object.entries(buckets || {})) raw[Date.parse(k)] = c
  return raw
 }
 /** Sum counts from raw 5-minute buckets between t0 (inclusive) and t1 (exclusive). */
 export function sumRange(raw, t0, t1) {
  let n = 0
  for (let s = t0; s < t1; s += MIN5) n += raw[s] || 0
  return n
 }
 /**
 * One series per overlaid week: [this week, 1 week ago, ...], at native
 * 5-minute resolution, up to 8 weeks back (and only weeks that overlap the
 * recorded data at all). The current week is truncated at the current bucket
 * — no fake zeroes drawn for the future. Counts are rates per hour
 * (bucket count * 12): a lone visit in a 5-minute bucket reads as "12/h".
 * The coarser ranges use per-day rates instead (unitMinutes = 24*60).
 */
 export function weeklySeries(buckets) {
  const raw = rawTimes(buckets)
  const times = Object.keys(raw).map(Number)
  if (!times.length) return null
  const now = Date.now()
  const thisMonday = mondayUTC(now)
  const oldest = Math.min(...times)
  // Weeks back as far as the data reaches: difference in Monday indices.
  const available = (thisMonday - mondayUTC(oldest)) / WEEK + 1
  const count = Math.min(available, 8)
  const out = []
  for (let back = 0; back < count; back++) {
    const start = thisMonday - back * WEEK
    const end = back === 0
      ? Math.min(start + WEEK, Math.floor(now / MIN5) * MIN5 + MIN5)
      : start + WEEK
    const points = []
    for (let t = start; t < end; t += MIN5) {
      points.push({ t, count: raw[t] || 0 })
    }
    out.push({
      points,
      label: back === 0 ? 'this week' : `${back}w ago`,
      opacity: Math.max(0.15, 1 - back * 0.25),
      area: back === 0,
    })
  }
  return {
    series: out,
    t0: thisMonday,
    t1: thisMonday + WEEK,
    rate: HOUR / MIN5,
    binMinutes: 5,
    unitMinutes: 60,
    unit: 'hour',
  }
 }
 /**
 * Rolling window for the non-week ranges (x max = now), counts converted
 * to per-day rates (the unit the month+ charts are read in).
 * Ranges without a fixed span use the full data reach, but never less than
 * their configured minSpan so the chart keeps a readable minimum x scale.
 */
 export function rollingSeries(buckets, rangeKey) {
  const raw = rawTimes(buckets)
  const times = Object.keys(raw).map(Number)
  if (!times.length) return null
  const { span, bucket, minSpan = 0 } = RANGES[rangeKey]
  const t1 = Math.floor(Date.now() / bucket) * bucket + bucket
  const earliest = Math.floor(Math.min(...times) / bucket) * bucket
  const t0 = span != null
    ? t1 - span
    : Math.min(earliest, t1 - minSpan)
  const points = []
  for (let t = t0; t < t1; t += bucket) {
    points.push({ t, count: sumRange(raw, t, t + bucket) })
  }
  return {
    series: [{ points, label: '', opacity: 1, area: true }],
    t0,
    t1,
    rate: DAY / bucket,
    binMinutes: bucket / 60e3,
    unitMinutes: 24 * 60,
    unit: 'day',
  }
 }
 /**
 * Day view: raw 5-minute bucket counts for the current 24-hour window.
 * No smoothing or rate conversion is applied; counts are used as-is.
 */
 export function daySeries(buckets) {
  const raw = rawTimes(buckets)
  const now = Date.now()
  const { span, bucket } = RANGES.day
  const t1 = Math.floor(now / bucket) * bucket + bucket
  const t0 = t1 - span
  const points = []
  for (let t = t0; t < t1; t += bucket) {
    points.push({ t, count: raw[t] || 0 })
  }
  return {
    series: [{ points, label: '', opacity: 1, area: false }],
    t0,
    t1,
    rate: 1,
    binMinutes: bucket / 60e3,
    unitMinutes: bucket / 60e3,
    unit: '5min',
  }
 }
 /** Dispatch to daily, weekly or rolling series based on the selected range. */
 export function makeSeries(buckets, rangeKey) {
  if (rangeKey === 'day') return daySeries(buckets)
  if (rangeKey === 'week') return weeklySeries(buckets)
  return rollingSeries(buckets, rangeKey)
 }
 /**
 * Absolute UTC time window for a given range key. Used to filter visits,
 * transitions and views to the same period the charts are showing.
 * Returns { t0, t1 } where null means unbounded.
 */
 export function rangeWindow(rangeKey) {
  const now = Date.now()
  if (rangeKey === 'week') {
    const start = mondayUTC(now)
    return { t0: start, t1: start + WEEK }
  }
  if (rangeKey === 'all') {
    return { t0: null, t1: null }
  }
  const { span, bucket } = RANGES[rangeKey]
  const t1 = Math.floor(now / bucket) * bucket + bucket
  return { t0: t1 - span, t1 }
 }
@@ -0,0 +1,806 @@
 /**
 * Radial transition map and helpers.
 *
 * Radial site map: the front page at the center, each slug level on its own
 * ring. All pages of the site are shown (from /_api/pages), plus any extra
 * paths seen in transitions (deleted pages); siblings run clockwise in
 * navigation order, starting at the top. Internal path -> path transitions
 * join opposite directions into straight connections (middle width = total
 * count, wrapping the node circles at both ends). Connection width grows
 * logarithmically with the count (a single count renders as a ~1 px
 * line, uncapped growth); connections carrying less than 1% of the total
 * traffic are pruned, which naturally keeps the graph under ~100
 * connections. Animated beads flow along every edge in each direction,
 * emitted at time intervals inversely proportional (linear) to the
 * directional count.
 * External sources appear as nodes in a row above the map. Sources are
 * identified from visit records in this order: utm_campaign, utm_source,
 * referer, then other utm_* tags. Visits with a UTM tag are grouped under
 * that tag's value, not under the referer domain. A UTM source node only
 * becomes a clickable link when every visit carrying that UTM tag came
 * from the same referer. External exits are full-size nodes just outside
 * their source page, angled away from the center. Each distinct full exit
 * URL is its own node. Self-loops (reload pings) are skipped.
 */
 import { MIN_READ_SECONDS } from './format.js'
 export const TNODE_R = 34 // node circles hold the slug and the view count
 export const EXT_R = 34 // external referer/exit nodes use the same full size
 // Edge width (half-width of the thin middle) grows logarithmically with
 // the count. The constants are scaled down by ~10× so busy ranges (day,
 // year) do not overwhelm the graph with fat connectors. A single recorded
 // transition still renders as a faint ~0.4 px line. Connections carrying
 // less than PRUNE_FRACTION of the total traffic are not drawn at all (this
 // also keeps the graph under ~100 connections).
 const WMID_MIN = 0.2
 const WIDTH_GROWTH = 0.15
 const PRUNE_FRACTION = 0.01
 // Beads: each edge direction emits beads at count * BEAD_RATE beads per
 // second (linear in the count). The rate is reduced ~10× across all time
 // scales to keep the animation lightweight. The component simulates every
 // bead independently in JS at BEAD_SPEED along the edge, with no limit on
 // beads in flight.
 export const BEAD_SPEED = 180 // svg units per second
 export const BEAD_R = 2.2
 const BEAD_RATE = 0.012 // beads per second per recorded transition
 const FLOW_OFFSET = 3 // lane offset to the right of the travel direction
 const MAX_EXT_IN = 8 // referer nodes in the top row
 const MAX_EXT_OUT = 12 // exit nodes, at most MAX_EXT_OUT_PER_PAGE per page
 const MAX_EXT_OUT_PER_PAGE = 3
 /** Flatten the site tree into navigation order via DFS. */
 function buildNavigationOrder(pageTree) {
  const order = new Map()
  const walk = (items) => {
    for (const item of items || []) {
      const p = `/${item.path}`
      if (!order.has(p)) order.set(p, order.size)
      walk(item.children)
    }
  }
  walk(pageTree)
  return order
 }
 /** Map page paths to their article titles from the site tree. */
 function buildTitleMap(pageTree) {
  const titles = new Map()
  const walk = (items) => {
    for (const item of items || []) {
      titles.set(`/${item.path}`, item.title)
      walk(item.children)
    }
  }
  walk(pageTree)
  return titles
 }
 /** Extract internal page-to-page transitions, excluding self-loops. */
 function collectInternalTransitions(transitions) {
  const internal = []
  for (const [fr, tos] of Object.entries(transitions || {})) {
    if (!fr.startsWith('/')) continue
    for (const [to, count] of Object.entries(tos)) {
      if (to.startsWith('/') && to !== fr) internal.push({ fr, to, count })
    }
  }
  return internal
 }
 /** Domain-only label for an external origin (path and www. removed). */
 function extLabel(ext) {
  try {
    const host = new URL(ext).hostname.replace(/^www\./, '')
    return host.length > 25 ? `${host.slice(0, 24)}…` : host
  } catch {
    const s = ext.replace(/^https?:\/\//, '').replace(/^www\./, '').split('/')[0]
    return s.length > 25 ? `${s.slice(0, 24)}…` : s
  }
 }
 /**
 * Collect outgoing external transitions: page path -> full exit URL.
 * Aggregated per (URL, page) pair. Incoming external links are now derived
 * from visit records (which carry UTM tags), so only exits remain here.
 */
 function collectExitPairs(transitions) {
  const pairs = new Map() // `${ext} ${page}` -> {ext, page, out}
  for (const [fr, tos] of Object.entries(transitions || {})) {
    if (!fr.startsWith('/')) continue // ignore external -> anything
    for (const [to, count] of Object.entries(tos)) {
      if (!to.startsWith('http')) continue
      const k = `${to} ${fr}`
      const p = pairs.get(k) || { ext: to, page: fr, out: 0 }
      p.out += count
      pairs.set(k, p)
    }
  }
  return [...pairs.values()]
 }
 /** Build nodes with depth and a path lookup map; children are wired to parents. */
 function buildNodeTree(internal, navOrder) {
  const paths = new Set(['/', ...navOrder.keys()])
  for (const e of internal) { paths.add(e.fr); paths.add(e.to) }
  const depth = (p) => (p === '/' ? 0 : p.split('/').length - 1)
  const nodes = [...paths].map((p) => ({
    path: p, depth: depth(p), angle: 0, children: [],
  }))
  const byPath = new Map(nodes.map((n) => [n.path, n]))
  // Parent is the nearest ancestor present in the map, front page last.
  const parentOf = (p) => {
    let q = p
    while (q !== '/') {
      q = q.slice(0, q.lastIndexOf('/')) || '/'
      if (byPath.has(q)) return byPath.get(q)
    }
    return byPath.get('/')
  }
  for (const n of nodes) {
    if (n.path !== '/') parentOf(n.path).children.push(n)
  }
  return { nodes, byPath, root: byPath.get('/') }
 }
 /** Sort children by navigation order and compute each subtree's angular weight. */
 function prepareWeights(root, navOrder) {
  const byNav = (a, b) =>
    (navOrder.get(a.path) ?? Infinity) - (navOrder.get(b.path) ?? Infinity)
    || a.path.localeCompare(b.path)
  const weight = (n) =>
    n.children.length ? n.children.reduce((s, k) => s + weight(k), 0) : 1 / n.depth
  const walkSort = (n) => {
    n.children.sort(byNav)
    n.children.forEach(walkSort)
  }
  walkSort(root)
  return weight
 }
 /** Assign angles clockwise starting from the top (-PI/2). */
 function layoutAngles(root, unit, weight) {
  const lay = (n, a0) => {
    n.angle = a0
    let a = a0
    for (const k of n.children) {
      lay(k, a)
      a += weight(k) * unit
    }
  }
  let a = -Math.PI / 2
  for (const k of root.children) {
    lay(k, a)
    a += weight(k) * unit
  }
 }
 /** Compute median reading time per article in whole minutes. */
 function buildReadMinutes(visits) {
  const times = {}
  for (const v of visits || []) {
    for (const [path, sec] of Object.entries(v.read || {})) {
      if (sec >= MIN_READ_SECONDS) {
        ;(times[path] || (times[path] = [])).push(sec)
      }
    }
  }
  const minutes = {}
  for (const [path, arr] of Object.entries(times)) {
    arr.sort((a, b) => a - b)
    const mid = Math.floor(arr.length / 2)
    const median =
      arr.length % 2 ? arr[mid] : (arr[mid - 1] + arr[mid]) / 2
    minutes[path] = Math.max(1, Math.round(median / 60))
  }
  return minutes
 }
 /** Compute radial positions, view counts and labels for each node. */
 function positionNodes(nodes, maxDepth, unit, viewsData, titles, readMinutes) {
  // Constant radial gap between rings, equal to the arc spacing of nodes
  // along a ring: leaf arc = unit * GAP, so GAP scales up with `unit` on
  // sparse trees (where closing the circle forces wider arcs) and with
  // 1/unit on dense ones (keeping arcs at the node clearance).
  const CLEAR = 2 * TNODE_R + 12
  const GAP = CLEAR * Math.max(unit, 1 / unit)
  const radius = (d) => d * GAP
  const viewCount = (p) => {
    let n = 0
    for (const c of Object.values(viewsData?.[p] || {})) n += c
    return n
  }
  for (const n of nodes) {
    const r = radius(n.depth)
    n.x = Math.cos(n.angle) * r
    n.y = Math.sin(n.angle) * r
    n.views = viewCount(n.path)
    n.readMin = readMinutes[n.path] || 0
    // Slug inside the circle; full title goes on the link title attribute.
    const slug = n.path === '/' ? '🏠︎' : n.path.split('/').pop()
    n.label = slug.length > 16 ? `${slug.slice(0, 15)}…` : slug
    n.title = titles.get(n.path) || ''
    // Category (non-leaf) pages with no views in this window are left
    // blank to keep the layout, but their circle/label is not drawn.
    n.hidden = n.children.length > 0 && n.views === 0
  }
  return { radius, GAP }
 }
 /**
 * Family structure at a glance: a radial spoke from each parent to its
 * first child, and a ring arc across each sibling group from first to last
 * child in navigation (clockwise) order.
 */
 function buildFamilyArcs(nodes, radius) {
  const arcs = []
  for (const n of nodes) {
    if (!n.children.length) continue
    // The spoke aims along the FIRST CHILD's angle (the node's own angle
    // coincides with it, except for the center page which has none).
    const first = n.children[0]
    const r1 = radius(n.depth) + TNODE_R
    const r2 = radius(first.depth) - TNODE_R
    arcs.push({
      d: `M ${Math.cos(first.angle) * r1} ${Math.sin(first.angle) * r1} `
       + `L ${Math.cos(first.angle) * r2} ${Math.sin(first.angle) * r2}`,
    })
    if (n.children.length < 2) continue
    const r = radius(n.children[0].depth)
    const a0 = n.children[0].angle
    const a1 = n.children[n.children.length - 1].angle
    if (a1 - a0 >= 2 * Math.PI - 1e-6) continue // full circle: degenerate arc
    const large = a1 - a0 > Math.PI ? 1 : 0
    arcs.push({
      d: `M ${Math.cos(a0) * r} ${Math.sin(a0) * r} `
       + `A ${r} ${r} 0 ${large} 1 ${Math.cos(a1) * r} ${Math.sin(a1) * r}`,
      r,
      a0,
      a1,
    })
  }
  return arcs
 }
 /** Bounding box of a circular arc centred at the origin, sampled. */
 function arcBounds(r, a0, a1) {
  let x0 = Infinity
  let y0 = Infinity
  let x1 = -Infinity
  let y1 = -Infinity
  const steps = 36
  for (let i = 0; i <= steps; i++) {
    const t = a0 + (a1 - a0) * (i / steps)
    const x = Math.cos(t) * r
    const y = Math.sin(t) * r
    if (x < x0) x0 = x
    if (y < y0) y0 = y
    if (x > x1) x1 = x
    if (y > y1) y1 = y
  }
  return { x0, y0, x1, y1 }
 }
 /** Collapse opposite transition directions into one unordered pair per page pair. */
 function aggregatePairs(internal) {
  const pairs = new Map() // unordered pair key -> [countAB, countBA]
  for (const e of internal) {
    const forward = e.fr < e.to
    const k = forward ? `${e.fr} ${e.to}` : `${e.to} ${e.fr}`
    const c = pairs.get(k) || [0, 0]
    c[forward ? 0 : 1] += e.count
    pairs.set(k, c)
  }
  return pairs
 }
 const fmtPt = (p) => `${p[0].toFixed(2)} ${p[1].toFixed(2)}`
 /**
 * Build one ribbon edge between two nodes with counts ab and ba.
 * `wMid` is the half-width of the thin middle (already strength-scaled by
 * the caller); `ra`/`rb` are the radii of the node circles each end wraps.
 */
 function buildRibbon(a, b, ab, ba, wMid, ra = TNODE_R, rb = TNODE_R, external = false) {
  const count = ab + ba
  const len = Math.hypot(b.x - a.x, b.y - a.y) || 1
  const ux = (b.x - a.x) / len
  const uy = (b.y - a.y) / len
  const nx = -uy
  const ny = ux
  // Radius of each node surround and the attachment geometry on it.
  const R2A = ra + 3
  const R2B = rb + 3
  // Attachment points sit somewhat forward from the side of the node,
  // leaving enough room for the surround to flow naturally into the flare.
  const BETA = (65 * Math.PI) / 180
  const ENDA = R2A * Math.cos(BETA)
  const wEndA = R2A * Math.sin(BETA)
  const ENDB = R2B * Math.cos(BETA)
  const wEndB = R2B * Math.sin(BETA)
  // Flares take a fair share of the free span while leaving the
  // count-scaled thin middle a visible share of the connection length.
  const FLARE = Math.min(36, Math.max(0, (len - ENDA - ENDB) * 0.4))
  // Point on the connection centerline at distance t from A, offset s
  // perpendicular to it.
  const P = (t, s) => [
    a.x + t * ux + s * nx,
    a.y + t * uy + s * ny,
  ]
  // Arc around a node from p to q the long way, passing its back side.
  const wrap = (p, q, node, back, R2) => {
    const ang = (pt2) =>
      Math.atan2(pt2[1] - node[1], pt2[0] - node[0])
    const TAU = 2 * Math.PI
    const da = ((ang(back) - ang(p)) % TAU + TAU) % TAU
    const db = ((ang(q) - ang(p)) % TAU + TAU) % TAU
    return `A ${R2} ${R2} 0 1 ${da < db ? 1 : 0} ${fmtPt(q)} `
  }
  // Build one side of a flare in node -> middle order.
  const flarePoints = (endT, midT, s, dir, R2, END, wEnd) => {
    const span = Math.abs(midT - endT)
    const pEnd = P(endT, s * wEnd)
    const pMid = P(midT, s * wMid)
    // At the node, leave tangent to the circular surround.
    // The circle radius at the attachment is locally:
    //   A: (+END, ±wEnd)
    //   B: (-END, ±wEnd)
    // A perpendicular tangent pointing into the connection therefore has
    // these centerline/normal components.
    const tangentT = dir * wEnd / R2
    const tangentS = -s * END / R2
    const hEnd = span * 0.65
    const hMid = span * 0.4
    const cEnd = P(
      endT + tangentT * hEnd,
      s * wEnd + tangentS * hEnd,
    )
    // At the thin end, arrive parallel with the centerline.
    const cMid = P(
      midT - dir * hMid,
      s * wMid,
    )
    return { pEnd, cEnd, cMid, pMid }
  }
  // Emit a cubic in either traversal direction. Reversing a cubic requires
  // swapping its control points, rather than recalculating the geometry.
  const curve = (f, reverse = false) => {
    if (!reverse) {
      return `C ${fmtPt(f.cEnd)} ${fmtPt(f.cMid)} ${fmtPt(f.pMid)} `
    }
    return `C ${fmtPt(f.cMid)} ${fmtPt(f.cEnd)} ${fmtPt(f.pEnd)} `
  }
  const LA = P(ENDA, wEndA)
  const RA = P(ENDA, -wEndA)
  const LB = P(len - ENDB, wEndB)
  const RB = P(len - ENDB, -wEndB)
  const aLeft = flarePoints(ENDA, ENDA + FLARE, 1, 1, R2A, ENDA, wEndA)
  const bLeft = flarePoints(len - ENDB, len - ENDB - FLARE, 1, -1, R2B, ENDB, wEndB)
  const bRight = flarePoints(len - ENDB, len - ENDB - FLARE, -1, -1, R2B, ENDB, wEndB)
  const aRight = flarePoints(ENDA, ENDA + FLARE, -1, 1, R2A, ENDA, wEndA)
  const d = `M ${fmtPt(LA)} `
    + curve(aLeft)
    + `L ${fmtPt(bLeft.pMid)} `
    + curve(bLeft, true)
    + wrap(LB, RB, [b.x, b.y], P(len + R2B, 0), R2B)
    + curve(bRight)
    + `L ${fmtPt(aRight.pMid)} `
    + curve(aRight, true)
    + wrap(RA, LA, [a.x, a.y], P(-R2A, 0), R2A)
    + 'Z'
  return {
    d,
    title: `${a.path} ↔ ${b.path}: ${count} (${ab} / ${ba})`,
    external,
  }
 }
 /**
 * Flow descriptors for the bead animation, one per edge direction with a
 * nonzero count: a straight segment running from inside the source node
 * to inside the target node (beads render under the node circles, so
 * they emerge from and vanish beneath the nodes rather than popping in
 * at the surround), plus the emission interval (seconds between beads,
 * inverse of count * BEAD_RATE). Each segment is offset to the
 * right-hand side of its travel direction, so opposing flows on the same
 * edge run on parallel lanes instead of colliding. The component turns
 * these into independently simulated beads.
 */
 function buildFlows(a, b, ra, rb, ab, ba, visualScale = 1) {
  const len = Math.hypot(b.x - a.x, b.y - a.y) || 1
  const ux = (b.x - a.x) / len
  const uy = (b.y - a.y) / len
  const t0 = ra / 3
  const t1 = len - rb / 3
  if (t1 - t0 < 12) return []
  // Unit normal pointing to the visual right of the A -> B direction.
  const rx = -uy
  const ry = ux
  const span = t1 - t0
  const flow = (count, fromT, toT) => {
    // Each direction shifts to its own right, away from the opposing lane.
    const s = fromT < toT ? FLOW_OFFSET : -FLOW_OFFSET
    return {
      x1: a.x + fromT * ux + s * rx,
      y1: a.y + fromT * uy + s * ry,
      x2: a.x + toT * ux + s * rx,
      y2: a.y + toT * uy + s * ry,
      len: span,
      interval: 1 / (count * BEAD_RATE * visualScale),
    }
  }
  const flows = []
  if (ab) flows.push(flow(ab, t0, t1))
  if (ba) flows.push(flow(ba, t1, t0))
  return flows
 }
 /**
 * Half-width for a connection middle: logarithmic in the count, anchored
 * so a single count lands exactly at WMID_MIN (~1 px line), uncapped.
 * Absolute on purpose — cool routes stay visible regardless of how hot
 * the hottest connection is.
 */
 const scaledWidth = (count) => {
  if (count <= 0) return 0
  return WMID_MIN + WIDTH_GROWTH * Math.log1p(count - 1)
 }
 /**
 * Build ribbon edges and bead flows for every aggregated page-to-page
 * pair. Pairs carrying less than PRUNE_FRACTION of the total internal
 * traffic are pruned (this naturally bounds the graph to ~100 edges).
 */
 function buildInternalEdges(pairs, byPath, visualScale = 1) {
  let total = 0
  for (const [, [ab, ba]] of pairs) total += ab + ba
  const minCount = total * PRUNE_FRACTION
  const edges = []
  const flows = []
  for (const [k, [ab, ba]] of pairs) {
    if (ab + ba < minCount) continue
    const [pf, pt] = k.split(' ')
    const a = byPath.get(pf)
    const b = byPath.get(pt)
    const wMid = scaledWidth((ab + ba) * visualScale)
    if (wMid <= 0) continue
    edges.push(buildRibbon(a, b, ab, ba, wMid))
    flows.push(...buildFlows(a, b, TNODE_R, TNODE_R, ab, ba, visualScale))
  }
  return { edges, flows }
 }
 /**
 * Sum the bucketed transition matrix (from -> to -> bucket ISO -> count)
 * into a plain from -> to -> count matrix for the window [t0, t1).
 */
 export function filterTransitionsByRange(transitions, t0, t1) {
  const out = {}
  for (const [fr, tos] of Object.entries(transitions || {})) {
    for (const [to, buckets] of Object.entries(tos)) {
      let n = 0
      for (const [k, c] of Object.entries(buckets)) {
        const t = Date.parse(k)
        if ((t0 == null || t >= t0) && (t1 == null || t < t1)) n += c
      }
      if (n) {
        out[fr] = out[fr] || {}
        out[fr][to] = n
      }
    }
  }
  return out
 }
 /** Keep only the 5-minute view buckets that fall inside [t0, t1). */
 export function filterViewsByRange(views, t0, t1) {
  const filtered = {}
  for (const [path, buckets] of Object.entries(views || {})) {
    const out = {}
    for (const [k, c] of Object.entries(buckets)) {
      const t = Date.parse(k)
      if ((t0 == null || t >= t0) && (t1 == null || t < t1)) out[k] = c
    }
    if (Object.keys(out).length) filtered[path] = out
  }
  return filtered
 }
 /** Keep only visits whose start time falls inside [t0, t1). */
 export function filterVisitsByRange(visits, t0, t1) {
  const out = []
  for (const v of visits || []) {
    const t = Date.parse(v.start)
    if ((t0 == null || t >= t0) && (t1 == null || t < t1)) out.push(v)
  }
  return out
 }
 const UTM_PRIORITY = ['utm_campaign', 'utm_source']
 const UTM_FALLBACK = ['utm_medium', 'utm_content', 'utm_term', 'utm_id']
 /** Identify the source of a visit according to the requested priority. */
 function identifySource(visit) {
  const utm = visit.utm || {}
  for (const k of UTM_PRIORITY) {
    const v = utm[k]
    if (v) return { value: v, isUtm: true }
  }
  if (visit.referer?.startsWith('http')) {
    return { value: visit.referer, isUtm: false }
  }
  for (const k of UTM_FALLBACK) {
    const v = utm[k]
    if (v) return { value: v, isUtm: true }
  }
  return null
 }
 /**
 * Collect source -> entry page pairs from visit records. Sources are
 * identified by UTM campaign/source (then referer, then other UTM tags).
 * A UTM source only gets a link href when every visit using that source
 * came from the same referer; referer sources always link to their origin.
 */
 function collectSourcePairs(visits) {
  const groups = new Map() // `${source}\0${page}` -> pair
  for (const v of visits || []) {
    const src = identifySource(v)
    if (!src) continue
    const k = `${src.value}\0${v.entry}`
    const p = groups.get(k) || {
      source: src.value,
      page: v.entry,
      in: 0,
      refs: new Set(),
      missingRef: false,
      href: null,
      isUtm: src.isUtm,
    }
    p.in += 1
    if (v.referer?.startsWith('http')) {
      p.refs.add(v.referer)
    } else {
      p.missingRef = true
    }
    groups.set(k, p)
  }
  for (const p of groups.values()) {
    if (p.isUtm && !p.missingRef && p.refs.size === 1) {
      const ref = [...p.refs][0]
      if (ref.startsWith('http')) p.href = ref
    } else if (!p.isUtm && p.source.startsWith('http')) {
      p.href = p.source
    }
  }
  return [...groups.values()]
 }
 /**
 * Place external source and exit nodes and build their edges and bead
 * flows.
 * Sources (incoming links) are derived from visit UTM/referer data and form
 * a row centered above the map, hottest first; exits come from the
 * transition matrix and sit just outside their source page.
 * Widths and pruning use the same log scale and traffic-share rule as
 * internal connections.
 */
 function buildExternal({ sources, exits }, byPath, radius, innerBounds, visualScale = 1) {
  const extNodes = []
  const edges = []
  const flows = []
  let extTotal = 0
  for (const p of sources) extTotal += p.in
  for (const p of exits) extTotal += p.out
  const minCount = extTotal * PRUNE_FRACTION
  const liveSources = sources.filter((p) => byPath.has(p.page))
  const liveExits = exits.filter((p) => byPath.has(p.page))
  if (!liveSources.length && !liveExits.length) return { extNodes, edges, flows }
  const width = (count) => scaledWidth(count * visualScale)
  const overlaps = (x, y, r) =>
    [...byPath.values(), ...extNodes].some(
      (n) => Math.hypot(n.x - x, n.y - y) < (n.r ?? TNODE_R) + r + 10,
    )
  // Incoming: one source node per identified source, in a row centered
  // above the map, with an edge to each page that source led to.
  const bySource = new Map() // source -> pairs, sorted by total incoming count
  for (const p of liveSources.filter((p) => p.in >= minCount)) {
    const g = bySource.get(p.source) || []
    g.push(p)
    bySource.set(p.source, g)
  }
  const origins = [...bySource]
    .map(([source, ps]) => ({
      source,
      ps,
      total: ps.reduce((s, p) => s + p.in, 0),
      href: ps[0].href,
      isUtm: ps[0].isUtm,
    }))
    .sort((a, b) => b.total - a.total)
    .slice(0, MAX_EXT_IN)
  if (origins.length) {
    const cx = (innerBounds.x0 + innerBounds.x1) / 2
    const y = innerBounds.y0 - TNODE_R - 64
    const spacing = 2 * EXT_R + 44
    const x0 = cx - ((origins.length - 1) * spacing) / 2
    origins.forEach(({ source, ps, total, href, isUtm }, i) => {
      const label = isUtm ? source : extLabel(source)
      const xn = {
        path: source,
        href,
        label: label.length > 25 ? `${label.slice(0, 24)}…` : label,
        x: x0 + i * spacing,
        y,
        r: EXT_R,
        count: total,
        kind: 'source',
      }
      extNodes.push(xn)
      for (const p of ps) {
        const page = byPath.get(p.page)
        const wMid = width(p.in)
        if (wMid <= 0) continue
        edges.push(buildRibbon(xn, page, p.in, 0, wMid, EXT_R, TNODE_R, true))
        flows.push(...buildFlows(xn, page, EXT_R, TNODE_R, p.in, 0, visualScale))
      }
    })
  }
  // Outgoing: group by full URL so several links to the same domain stay
  // distinct. Each exit node is placed one ring-gap outside its source page
  // (same radial spacing internal rings use), fanned around the source angle,
  // and shows the total count across all pages that link to that URL.
  const GAP = radius(1) - radius(0)
  const outgoing = liveExits.filter((p) => p.out >= minCount)
    .sort((a, b) => b.out - a.out)
  const perPage = new Map()
  const selected = []
  for (const p of outgoing) {
    const used = perPage.get(p.page) || 0
    if (used >= MAX_EXT_OUT_PER_PAGE) continue
    perPage.set(p.page, used + 1)
    selected.push(p)
    if (selected.length >= MAX_EXT_OUT) break
  }
  const exitNodes = new Map() // full URL -> node
  const placedPerPage = new Map() // for angle fanning of the placement anchor
  for (const p of selected) {
    const page = byPath.get(p.page)
    let xn = exitNodes.get(p.ext)
    if (!xn) {
      const used = placedPerPage.get(p.page) || 0
      placedPerPage.set(p.page, used + 1)
      const base = page.depth ? page.angle : Math.PI / 2
      const ang = base + [0, 0.4, -0.4][used]
      let dist = GAP
      let x = page.x + Math.cos(ang) * dist
      let y = page.y + Math.sin(ang) * dist
      for (let tries = 0; tries < 5 && overlaps(x, y, EXT_R); tries++) {
        dist += GAP * 0.3
        x = page.x + Math.cos(ang) * dist
        y = page.y + Math.sin(ang) * dist
      }
      xn = {
        path: p.ext,
        href: p.ext,
        label: extLabel(p.ext),
        x,
        y,
        r: EXT_R,
        count: 0,
        kind: 'exit',
      }
      exitNodes.set(p.ext, xn)
      extNodes.push(xn)
    }
    xn.count += p.out
    const wMid = width(p.out)
    if (wMid <= 0) continue
    edges.push(buildRibbon(page, xn, p.out, 0, wMid, TNODE_R, EXT_R, true))
    flows.push(...buildFlows(page, xn, TNODE_R, EXT_R, p.out, 0, visualScale))
  }
  return { extNodes, edges, flows }
 }
 /**
 * Build the radial transition map model.
 * Returns { nodes, edges, flows, extNodes, arcs, bounds } or null when
 * there is nothing to show.
 */
 export function buildTransitionGraph(data, pageTree, visits = [], visualScale = 1) {
  const internal = collectInternalTransitions(data?.transitions)
  const sources = collectSourcePairs(visits)
  const exits = collectExitPairs(data?.transitions)
  const navOrder = buildNavigationOrder(pageTree)
  const titles = buildTitleMap(pageTree)
  const readMinutes = buildReadMinutes(visits)
  if (!internal.length && !navOrder.size) return null
  const { nodes, byPath, root } = buildNodeTree(internal, navOrder)
  const weightFn = prepareWeights(root, navOrder)
  const unit = (2 * Math.PI) / weightFn(root)
  layoutAngles(root, unit, weightFn)
  const maxDepth = Math.max(1, ...nodes.map((n) => n.depth))
  const { radius } = positionNodes(nodes, maxDepth, unit, data?.views, titles, readMinutes)
  const arcs = buildFamilyArcs(nodes, radius)
  const pairs = aggregatePairs(internal)
  const { edges, flows } = buildInternalEdges(pairs, byPath, visualScale)
  // Tight bounding box of the actual page nodes; family ring arcs can sweep
  // outside the node circle (e.g. a large arc between two siblings on the
  // left side reaching around the right), so their geometry is included too.
  // External nodes extend the box below.
  const pad = 16
  const xs = nodes.map((n) => n.x)
  const ys = nodes.map((n) => n.y)
  const bounds = {
    x0: Math.min(...xs) - TNODE_R - pad,
    y0: Math.min(...ys) - TNODE_R - pad,
    x1: Math.max(...xs) + TNODE_R + pad,
    y1: Math.max(...ys) + TNODE_R + pad,
  }
  for (const arc of arcs) {
    if (arc.a0 == null) continue
    const b = arcBounds(arc.r, arc.a0, arc.a1)
    bounds.x0 = Math.min(bounds.x0, b.x0)
    bounds.y0 = Math.min(bounds.y0, b.y0)
    bounds.x1 = Math.max(bounds.x1, b.x1)
    bounds.y1 = Math.max(bounds.y1, b.y1)
  }
  const ext = buildExternal({ sources, exits }, byPath, radius, bounds, visualScale)
  for (const xn of ext.extNodes) {
    bounds.x0 = Math.min(bounds.x0, xn.x - xn.r - pad)
    bounds.y0 = Math.min(bounds.y0, xn.y - xn.r - pad)
    bounds.x1 = Math.max(bounds.x1, xn.x + xn.r + pad)
    bounds.y1 = Math.max(bounds.y1, xn.y + xn.r + pad)
  }
  return {
    nodes,
    edges: [...edges, ...ext.edges],
    flows: [...flows, ...ext.flows],
    extNodes: ext.extNodes,
    arcs,
    bounds,
  }
 }
@@ -67,31 +67,22 @@
 html {
  scroll-behavior: smooth;
-  /* Overlay scrollbars where supported (Chromium/WebKit, deprecated but
+  /* Native-scrollbar fallback styling (JS off or before pagerite.js runs):
-     working): a scrollbar that appears covers a strip of the layout instead
+     thin, theme-muted thumb on a transparent track. With JS the scrollbars
-     of shifting it, and no space is reserved while absent — so 100vw always
+     are replaced by OverlayScrollbars (see pagerite.js) — floating,
-     equals the body width and .wide breakout margins stay exact. Ignored by
+     auto-hidden scrollbars styled by the --os-* variables below, so they
-     Firefox (unknown value), which keeps its thin classic scrollbar. */
+     never reserve layout space or shift the page when appearing. */
  overflow-y: overlay;
  /* Lightweight scrollbar styling: thin, theme-muted thumb on a transparent
     track where supported (Firefox: the two properties; WebKit: the rules
     below). Full restyling deliberately not attempted. */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent;
 }
-::-webkit-scrollbar {
+.os-scrollbar {
-  width: 0.5rem;
+  --os-size: 0.5rem;
-  height: 0.5rem;
+  --os-thumb-bg: color-mix(in srgb, var(--muted) 45%, transparent);
-}
+  --os-thumb-hover-bg: color-mix(in srgb, var(--muted) 65%, transparent);
-
+  --os-thumb-active-bg: var(--muted);
-::-webkit-scrollbar-thumb {
+  --os-track-bg: transparent;
-  background: color-mix(in srgb, var(--muted) 45%, transparent);
+  --os-thumb-border-radius: 0.25rem;
  border-radius: 0.25rem;
 }
 ::-webkit-scrollbar-track {
  background: transparent;
 }
 body {
@@ -131,25 +122,55 @@ body {
 }
 /* Per-page banner content (img, styled div, inline SVG...) fills the
-   banner; swapped along with #nav/#main on fetch-navigation. When the page
+   banner; swapped along with #nav/#main on fetch-navigation. The backend
-   sets no banner of its own, the backend inlines the active theme's SVG
+   inlines the effective banner design's SVG artwork here first
-   artwork here instead (pagerite/themes/{theme}/banner.svg). */
+   (pagerite/themes/{design}/banner.svg, marked svg[data-design]), then the
   page's own banner code after it. */
 #page-banner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Stack the design artwork and the page's own banner code on top of
     each other (artwork first): the banner is a background layer, author
     code overlays it. A single child behaves exactly as before. The track
     is explicitly banner-sized: an auto row would size to the content
     (an SVG's intrinsic aspect ratio makes it far taller than the banner),
     and children's height:100% would resolve against that bloated row. */
  display: grid;
  grid-template: 100% / 100%;
 }
-#page-banner>* {
+/* :not(style, script): author-level display:block would override the UA's
   display:none on those and render their source as banner text. No
   width/height: the default stretch alignment fills the track without a
   percentage-resolution cycle. */
 #page-banner>*:not(style, script) {
  grid-area: 1 / 1;
  display: block;
  object-fit: cover;
  /* Banner artwork is bottom-anchored: the meaningful content (horizon,
     ground, characters) sits at the bottom, so on wide viewports — where
     the fixed-height banner crops the artwork vertically — the sky/top is
     what scrolls out of view. object-position covers replaced elements
     (img, canvas); inline SVG is anchored by the transform-origin below
     together with preserveAspectRatio="...YMax slice" in the artwork. */
  object-position: bottom;
  /* Scroll parallax: pagerite.js sets --pry on <html>; the banner stays
     windowed in place while the artwork drifts inside it. The scale
     provides overscan so the drift never reveals an edge; scaling from the
     bottom keeps the artwork's bottom edge pinned to the banner's. */
  transform: scale(1.25) translateY(var(--pry, 0px));
  transform-origin: bottom;
  will-change: transform;
 }
 /* The design artwork wrapper (div[data-design]) takes the sizing and
   parallax above; an svg inside it fills it (it is what used to be the
   direct child before designs got a wrapper). */
 #page-banner [data-design]>svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Scroll parallax: pagerite.js sets --pry on <html>; the banner stays
     windowed in place while the artwork drifts inside it. The scale
     provides overscan so the drift never reveals an edge. */
  transform: scale(1.25) translateY(var(--pry, 0px));
  will-change: transform;
 }
 #brand,
@@ -226,6 +247,16 @@ body {
  transition: margin-left 0.25s ease;
 }
 /* Long articles (.multicol is added by pagerite.js based on content length)
   lift the 78rem cap and scrap the right gutter: a 1fr left gutter (which
   holds the overlaying sidebar) and the article taking all the rest, out
   to the right viewport edge. The column count follows the width (see the
   `columns: 30rem` rule below). The .wide breakout is re-anchored to the
   left gutter below (the article is no longer viewport-centered). */
 body:has(.multicol) #content {
  grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
 }
 body.editing #content {
  margin-left: var(--editor-w);
  padding-left: 1rem;
@@ -239,9 +270,28 @@ body.editing #sidebar {
  display: none;
 }
 /* While editing, the window itself does not scroll: the editor panel is
   exactly the remaining window height, and only the article area (#main)
   scrolls. Without the editor, normal full-page scroll applies. */
 body.editing {
  height: 100vh;
  overflow: hidden;
 }
 body.editing #content {
  min-height: 0;
  grid-template-rows: 100%;
 }
 body.editing #main {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
 }
 /* The editor host lives inside #content: it starts below the banner and
-   ends above the footer. The panel itself sticks to the viewport while
+   ends above the footer. With the page scroll locked while editing, the
-   scrolling (but never taller than the content area). */
+   panel exactly fills that space — the full available window height. */
 .editor-host {
  position: absolute;
  top: 0;
@@ -251,10 +301,7 @@ body.editing #sidebar {
 }
 .editor-root.overlay {
-  position: sticky;
+  height: 100%;
  top: 0;
  height: 100vh;
  max-height: 100%;
  background: var(--bg);
  animation: editor-slide-in 0.25s ease;
 }
@@ -270,20 +317,27 @@ body.editing #sidebar {
  }
 }
-/* The banner's own pen: opens the site editor (banner + structure).
+/* Banner-area pens (banner editor, site editor) and auth buttons live in a
-   Qualified with `button` to beat the later .edit-link rule's left offset
+   single flex container pinned to the banner's top-right corner. */
-   (both classes apply to the same element). */
+.editor-pens {
 button.banner-edit-link {
  position: absolute;
  top: 0.6rem;
-  right: 1.25rem;
+  right: 0.5rem;
  left: auto;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.6rem;
 }
 .editor-pens button,
 .editor-pens a {
  position: static;
  font: inherit;
  border: none;
  cursor: pointer;
  background: none;
  padding: 0;
  text-decoration: none;
 }
 #sidebar {
@@ -315,6 +369,22 @@ button.banner-edit-link {
  line-height: 1.0;
 }
 /* Third level (and deeper): nested like the first level of article lists —
   slight indent, emoji marker — while the sidebar's own top level (the
   section's direct children) stays plain, without indicators or indent. */
 #sidebar ul ul {
  gap: 0.5em;
  margin-top: 0.5em;
  padding-inline-start: 1em;
 }
 #sidebar ul ul li::before {
  content: "🔹";
  display: inline-block;
  margin-left: -1.3em;
  width: 1.3em;
 }
 #sidebar a {
  text-decoration: none;
  color: var(--muted);
@@ -357,7 +427,8 @@ article ol,
 article dl,
 article blockquote,
 article pre,
-article figure {
+article figure,
 article table {
  margin-top: 0;
  margin-bottom: 1rem;
 }
@@ -432,18 +503,17 @@ article h1 .edit-link {
  opacity: 1;
 }
-/* Login link injected by pagerite.js for anonymous visitors when an auth
+/* Login/profile links injected by pagerite.js when Paskia SSO is in use.
-   server gates /_api (validate answered 401). Same corner as the site pen. */
+   They live inside the .editor-pens flex container in the banner's top-right
-a.login-link {
+   corner and inherit its reset; keep only their opacity/text-shadow tweaks. */
-  position: absolute;
+.editor-pens a.login-link,
-  top: 0.6rem;
+.editor-pens a.profile-link {
  right: 1.25rem;
  z-index: 10;
  font-size: 0.85rem;
  opacity: 0.7;
  text-shadow: 0 0 0.1em black;
 }
-a.login-link:hover {
+.editor-pens a.login-link:hover,
 .editor-pens a.profile-link:hover {
  opacity: 1;
 }
@@ -454,17 +524,17 @@ article dd {
  hyphens: auto;
 }
-/* Multi-column reading on wide displays, but only for long articles
+/* Multi-column reading, but only for long articles (pagerite.js adds
-   (pagerite.js adds .multicol based on content length and splits the body
+   .multicol based on content length and splits the body into .colseg segments
-   into .colseg segments separated by full-width h2s and wide figures;
+   separated by full-width h2s and wide figures; only segments with enough
-   only segments with enough text get .cols and thus columns). Columns only
+   text get .cols). No fixed breakpoint: `columns: 30rem` lets CSS fit as
-   reflow text inside the article; the article's width never changes. */
+   many columns of at least 30rem as the article's current width allows —
-@media (min-width: 100rem) {
+   since .multicol also uncaps the article width (see #content above), a
-  .multicol .colseg.cols {
+   wider window simply yields more columns. */
-    columns: 2;
+.multicol .colseg.cols {
-    column-gap: 3.5rem;
+  columns: 30rem;
-    column-rule: 1px solid var(--line);
+  column-gap: 3.5rem;
-  }
+  column-rule: 1px solid var(--line);
 }
 .multicol .colseg {
@@ -514,6 +584,42 @@ blockquote p {
  margin: 0;
 }
 /* Admonitions (markdown !!! note/warning/...): a lightweight callout in
   the blockquote idiom — accent bar and a faint wash, recolored per type.
   Bottom-only margins like everything else in articles; inner paragraphs
   carry no margins of their own. */
 .admonition {
  margin: 0 0 1rem;
  padding: 0.4rem 0.9rem;
  border-left: 0.25rem solid var(--admonition-color, var(--accent));
  border-radius: 0 0.3rem 0.3rem 0;
  background: color-mix(in srgb, var(--admonition-color, var(--accent)) 7%, transparent);
 }
 .admonition> :last-child {
  margin-bottom: 0;
 }
 .admonition-title {
  margin: 0 0 0.2rem;
  font-weight: 600;
  color: var(--admonition-color, var(--accent));
 }
 .admonition.tip,
 .admonition.important,
 .admonition.hint,
 .admonition.success {
  --admonition-color: var(--accent2);
 }
 .admonition.warning,
 .admonition.caution,
 .admonition.danger,
 .admonition.failure {
  --admonition-color: var(--accent3);
 }
 pre {
  overflow-x: auto;
  padding: 0.5rem 0.8rem;
@@ -564,50 +670,115 @@ code {
  font-size: 0.88em;
 }
 /* Tables separate by color, not lines: the header is a soft vertical
   gradient tinted with the theme's accent (themes can override the
   --table-head-* stops outright), body cells carry a very faint diagonal
   wash of --table-tint that lifts them apart, and only a whisper of a row
   separator remains. */
 table {
  border-collapse: collapse;
 }
 th,
 td {
  border: 1px solid var(--line);
  padding: 0.35rem 0.8rem;
  border: none;
 }
-/* Images and figures */
+th {
  text-align: left;
  background: linear-gradient(180deg,
      var(--table-head-a, color-mix(in srgb, var(--accent) 10%, var(--surface))),
      var(--table-head-b, color-mix(in srgb, var(--accent) 18%, var(--surface))));
 }
 td {
  background: linear-gradient(160deg,
      color-mix(in srgb, var(--table-tint, var(--accent)) 5%, transparent),
      transparent 75%);
 }
 tbody tr+tr td {
  border-top: 1px solid color-mix(in srgb, var(--table-tint, var(--accent)) 12%, transparent);
 }
 /* Definition lists are laid out as a lightweight two-column grid — terms
   in an accent column with a sensible minimum width, descriptions filling
   the rest — with no borders or fills (tables carry the heavier shading).
   Explicit grid columns keep runs of multiple <dt>s or <dd>s stacking
   correctly. */
 dl {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) 1fr;
 }
 dt {
  grid-column: 1;
  font-weight: 550;
  color: var(--accent);
 }
 dd {
  grid-column: 2;
  margin: 0;
 }
 dt,
 dd {
  padding: 0.2rem 0;
 }
 /* Images and figures
   Markdown images standing alone in a paragraph render as a block
   <figure> (with <figcaption> when the image has a title); the
   brace-attribute positioning class ({.left}, {.right}, {.wide}) lives
   on the img inside, but only the figure is ever positioned, so the
   caption stays below the image. Raw <img> HTML written by the author
   stays inline and unstyled beyond these defaults. */
 img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
 }
 /* Figures are block containers filling the column; the image fills the
   figure. The auto inline margins only take effect once a rule below
   shrinks the width (centering the figure); at 100% they compute to 0. */
 figure {
-  margin: 0 0 1.5rem;
+  margin: 0 auto 1.5rem;
  width: 100%;
 }
-figcaption {
+/* The image fills the figure, except when it carries an explicit width
-  color: var(--muted);
+   attribute — that width is a browser presentational hint which CSS
-  font-size: 0.85rem;
+   cannot restore once overridden, so such images are simply left alone. */
 figure img:not([width]) {
  width: 100%;
 }
-/* Captions of full-bleed images: centered and kept to a readable width. */
+/* Floated figures: {.right} / {.left}, defaulting to 30% of the column
-figure:has(.wide) figcaption {
+   and capped at half of it. */
-  max-width: 65ch;
+figure:has(.right) {
  margin-inline: auto;
  text-align: center;
 }
 /* Positioning via brace-attribute classes: {.right}, {.left}, {.wide} */
 figure:has(.right),
 img.right {
  float: right;
-  margin: 0.3rem 0 1rem 1.5rem;
+  width: 30%;
  max-width: 50%;
  margin: 0.3rem 0 1rem 1em;
 }
-figure:has(.left),
+figure:has(.left) {
 img.left {
  float: left;
-  margin: 0.3rem 1.5rem 1rem 0;
+  width: 30%;
  max-width: 50%;
  margin: 0.3rem 1em 1rem 0;
 }
 /* An image with an explicit width attribute shrink-wraps instead: the
   figure fits the image and, per the auto inline margins above, centers
   in the column. Placed after the percentage widths above so it
   overrides them at equal specificity. */
 figure:has(img[width]) {
  width: fit-content;
 }
 /* .wide is full bleed: edge to edge of the viewport (or of the space right
@@ -616,52 +787,81 @@ img.left {
   symmetric margins of (50% of the column − 50% of the target width) break
   out of the column and center the element on the same center — making the
   left edge land exactly at the viewport's edge (or the editor's right
-   border). The sidebar stacks above it (z-index + translucent blur). */
+   border). The sidebar stacks above it (z-index + translucent blur).
-figure:has(.wide),
+
-img.wide {
+   The rules below re-anchor the bleed for the layouts where the article
-  display: block;
+   is not viewport-centered; each just overrides width/margin-inline, and
-  /* no inline strut/descender gaps around the image */
+   later rules win at equal specificity. */
 figure:has(.wide) {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  /* negative margins also kill the UA figure margin */
  /* Follow the docked editor's margin-left transition smoothly. */
  transition: margin-left 0.25s ease;
 }
-/* A paragraph wrapping only a wide image must not add its line height. */
+/* Full bleed means edge to edge — no rounded corners. */
 p:has(> img.wide:only-child) {
  line-height: 0;
 }
 /* A captioned image is a <figure>, and the positioning class lives on the
   img inside it: only the figure may float/shift, never the img itself,
   or the caption would wrap beside the image instead of sitting below.
   The image fills the figure's width. */
 figure:has(.right) img,
 figure:has(.left) img {
  float: none;
  margin: 0;
  width: 100%;
 }
 figure:has(.wide) img {
-  width: 100%;
+  border-radius: 0;
  max-width: 100%;
  margin: 0;
 }
-/* Floats take a fixed share of the text column rather than sizing by the
+/* .wide on multicol pages: the article is not viewport-centered (no right
-   image's intrinsic width, which varies wildly (SVGs have none, and
+   gutter), so the bleed anchors at the left gutter — the 1fr share of the
-   min-content collapses them). A percentage also scales correctly inside
+   1fr + 4fr grid, i.e. 20vw — plus main's padding, and spans on to the
-   two-column segments, where the column is the containing block. The
+   right viewport edge. */
-   caption wraps within that width. A width attribute ({.right width=300})
+body:has(.multicol) figure:has(.wide) {
-   overrides the default on uncaptioned images. */
+  margin-inline: calc(-20vw - 1.25rem) 0;
-figure:has(.right),
+}
-figure:has(.left),
+
-img.right:not([width]),
+/* Editing: shrink the bleed to the space right of the docked editor. */
-img.left:not([width]) {
+body.editing figure:has(.wide) {
-  width: 30%;
+  width: calc(100vw - var(--editor-w));
  margin-inline: calc(50% - (100vw - var(--editor-w)) / 2);
 }
 /* Editing + multicol: the left gutter is 1/5 of the space right of the
   editor, and the bleed also crosses #content's 1rem editing gap plus
   main's 1.25rem left padding (the gutter shrink from the padding roughly
   cancels the rounding): −2rem in total. */
 body.editing:has(.multicol) figure:has(.wide) {
  margin-inline: calc((100vw - var(--editor-w)) / -5 - 2rem) 0;
 }
 /* Narrow windows with a sidebar: below 102rem the symmetric gutters can no
   longer both hold the 12rem sidebar, so #content reserves it with a fixed
   left track (see the matching media query below) and the article always
   starts at 12rem (+ main's 1.25rem padding) — the bleed margin is a plain
   constant. Scoped by :has(#sidebar) since the sidebar element is omitted
   entirely on pages without sub-navigation, and excluded while editing,
   where the editing rules above apply instead. */
@media (max-width: 102rem) {
  body:has(#sidebar):not(.editing) figure:has(.wide) {
    margin-inline: -13.25rem 0;
  }
 }
 figcaption {
  color: var(--muted);
  line-height: 1;
  font-size: 0.85rem;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
  text-align: left;
  /* Never let a long caption stretch a shrink-to-fit figure wider than the
     image; the caption wraps at the figure's width instead. */
  width: 0;
  min-width: 100%;
 }
 /* Full-bleed figures: center the caption, shrink-wrapped to its text and
   capped at a readable width. The min-width shrink-wrap trick above would
   win over max-width (min beats max per spec), so it is reset here. */
 figure:has(.wide) figcaption {
  width: fit-content;
  min-width: 0;
  max-width: 65ch;
  margin-inline: auto;
 }
 /* Section headings start below any floated figures of the previous
@@ -674,25 +874,71 @@ article h2 {
 /* Narrow windows with a sidebar: below 102rem the symmetric gutters can no
   longer both hold the 12rem sidebar, so reserve its space with a fixed
   left track instead of letting it overlap the article. The article then
-   always starts at 12rem (+ main's 1.25rem padding), so the .wide breakout
+   always starts at 12rem (+ main's 1.25rem padding), which the matching
-   margin is a plain constant. Scoped by :has(#sidebar) since the sidebar
+   .wide breakout rule in the images section relies on. Scoped by
-   element is omitted entirely on pages without sub-navigation. */
+   :has(#sidebar) since the sidebar element is omitted entirely on pages
   without sub-navigation. */
@media (max-width: 102rem) {
  body:has(#sidebar):not(.editing) #content {
    grid-template-columns: 12rem minmax(0, 78rem) minmax(0, 1fr);
  }
-  body:has(#sidebar) figure:has(.wide),
+  /* Long articles stay fluid here too: same 12rem reservation for the
-  body:has(#sidebar) img.wide:not(figure img) {
+     sidebar, then the article takes everything to the right viewport
-    margin-inline: -13.25rem 0;
+     edge. The article's left edge stays at 12rem either way, so the
     constant .wide breakout margin remains correct. */
  body:has(#sidebar):has(.multicol):not(.editing) #content {
    grid-template-columns: 12rem minmax(0, 1fr);
  }
 }
-/* Editing: shrink the bleed to the space right of the docked editor. */
+/* Phones and other narrow viewports: single-column layout with the
-body.editing figure:has(.wide),
+   sidebar lifted above the article as a wrapping link strip, and no
-body.editing img.wide:not(figure img) {
+   floated figures — .left/.right fall back to plain centered figures
-  width: calc(100vw - var(--editor-w));
+   (explicit img widths still shrink-wrap), while .wide keeps its full
-  margin-inline: calc(50% - (100vw - var(--editor-w)) / 2);
+   viewport bleed. */
@media (max-width: 48rem) {
  #content {
    display: flex;
    flex-direction: column;
  }
  #sidebar {
    position: static;
    width: auto;
    max-height: none;
    overflow-y: visible;
    border-radius: 0;
    padding: 0.5rem 1rem;
  }
  #sidebar ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
  }
  figure:has(.right),
  figure:has(.left) {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0 auto 1.5rem;
  }
  /* An explicit img width still shrink-wraps the figure (redeclared: this
     block comes after the desktop rule at equal specificity). */
  figure:has(img[width]) {
    width: fit-content;
  }
  /* The 102rem sidebar/multicol .wide margins assume a left sidebar
     column; with the sidebar on top the article is viewport-wide and the
     plain centered bleed applies again. */
  body:has(#sidebar):not(.editing) figure:has(.wide),
  body:has(.multicol) figure:has(.wide) {
    margin-inline: calc(50% - 50vw);
  }
 }
 /* Scroll reveal (pagerite.js adds .reveal/.in; JS off = fully visible) */
@@ -725,8 +971,16 @@ body.editing img.wide:not(figure img) {
  list-style: none;
 }
-.footnote {
+/* Published/updated line, expanded from the {dates} tag in the markdown
   (typically placed right after the article's h1). */
 .dateline {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: left;
 }
 .footnotes {
  font-size: 0.7rem;
  color: var(--muted);
 }
@@ -14,7 +14,22 @@ export const cmTheme = EditorView.theme({
    color: "var(--text)",
  },
  ".cm-scroller": { fontFamily: '"Fira Code", monospace' },
-  ".cm-content": { caretColor: "var(--text)" },
+  // Fira Code in CodeMirror: set the font on .cm-content (not only the
  // scroller) and force every span inside to inherit it, so highlighting
  // spans can't drift to a different font/metrics. Ligatures are disabled
  // entirely — CodeMirror measures per character, and ligature glyphs
  // render wider than the measured sum of their parts.
  ".cm-content": {
    caretColor: "var(--text)",
    fontFamily: '"Fira Code", monospace',
    fontVariantLigatures: "none",
    fontFeatureSettings: '"calt" 0',
    letterSpacing: "normal",
  },
  ".cm-content *": {
    fontFamily: "inherit",
    letterSpacing: "inherit",
  },
  ".cm-cursor": { borderLeftColor: "var(--text)" },
  // basicSetup's active-line highlight assumes a dark theme.
  ".cm-activeLine": { backgroundColor: "transparent" },
@@ -1,9 +1,14 @@
-// Pagerite editor entries. Two separate apps, mounted in their own
+// Pagerite editor entry. A single tabbed EditorShell is mounted in a
-// dynamically created host divs inside the static document:
+// dynamically created host div inside the static document. The shell hosts
-// - PageEditor ("page" mode): pen next to an article heading — Markdown
+// four tabs: PageEditor (Markdown + preview), BannerEditor (per-page banner
-//   editing with the preview rendered into the visible article.
+// HTML/design), SiteEditor (site-wide config), and StructureEditor (the
-// - SiteEditor ("site" mode): pen on the banner — banner HTML editing
+// site structure tree).
-//   (previewed into the real banner) and the site structure tree.
+//
 // Individual pens are shorthands that open the shell on a particular tab;
 // once the shell is open, pens switch tabs instead of closing/remounting.
 // Closing hides the shell but keeps the Vue app mounted, so editor state —
 // including unsaved page text — survives and editing can continue on the
 // next pen click; it is lost only on a real page reload.
 if (import.meta.env.DEV) {
  // Base styles only; the theme CSS is imported by pagerite.js (which
  // always runs first — the editor opens from public pages).
@@ -11,25 +16,39 @@ if (import.meta.env.DEV) {
 }
 import { createApp } from 'vue'
-import PageEditor from './PageEditor.vue'
+import EditorShell from './EditorShell.vue'
 import SiteEditor from './SiteEditor.vue'
 let host = null
 let app = null
 let savedTitle = null
 let visible = false
 export function openEditor(path, { mode = 'page' } = {}) {
-  closeEditor()
+  if (app) {
    // Shell already mounted: re-show it if hidden, switch to the requested
    // tab and retarget the editors to the current page (the shell survives
    // fetch-navigation).
    if (!visible) showEditor()
    document.body.dataset.editorMode = mode
    dispatchEvent(new CustomEvent('pagerite:switch-editor', { detail: { mode, path } }))
    return
  }
  savedTitle = document.title
  host = document.createElement('div')
  host.className = 'editor-host'
  // Docked inside #content: below the banner, next to the article only.
  document.getElementById('content').prepend(host)
  document.body.classList.add('editing')
-  // Which kind of editor is open; pagerite.js uses this to decide
+  // Which tab is active; pagerite.js uses this to decide whether a pen click
-  // whether a pen click closes the panel or swaps in the other editor.
+  // closes the panel or switches tabs.
  document.body.dataset.editorMode = mode
-  createApp(mode === 'site' ? SiteEditor : PageEditor, {
+  visible = true
  app = createApp(EditorShell, {
    pagePath: path,
    initialMode: mode,
    onClose: closeEditor,
-  }).mount(host)
+  })
  app.mount(host)
  // The slide-in (editor-slide-in in pagerite.css) is a one-shot open
  // effect; once finished, drop it so that later stylesheet swaps (theme
  // change re-creating @keyframes) cannot restart it.
@@ -41,13 +60,41 @@ export function openEditor(path, { mode = 'page' } = {}) {
  })
 }
-export function closeEditor() {
+function showEditor() {
-  if (!host) return
+  savedTitle = document.title
-  document.body.classList.remove('editing')
+  host.style.display = ''
-  delete document.body.dataset.editorMode
+  host.firstElementChild?.classList.remove('closing')
-  // Slide the panel out in sync with the page shifting back.
+  document.body.classList.add('editing')
-  host.firstElementChild?.classList.add('closing')
+  visible = true
-  const old = host
+  dispatchEvent(new CustomEvent('pagerite:editor-shown'))
  host = null
  setTimeout(() => old.remove(), 250)
 }
 export function closeEditor() {
  if (!visible) return
  visible = false
  document.body.classList.remove('editing')
  // dataset.editorMode is kept while hidden: the tabs use it to tell whether
  // a pagerite:editor-shown event targets them.
  // Slide the panel out in sync with the page shifting back, then hide it.
  host.firstElementChild?.classList.add('closing')
  const h = host
  setTimeout(() => { h.style.display = 'none' }, 250)
  dispatchEvent(new CustomEvent('pagerite:editor-hidden'))
  // Restore the server-rendered title for the current URL. Re-fetching makes
  // sure a brand change in the site editor or an in-place navigation leaves
  // the correct public title behind.
  const restoreTitle = savedTitle
  savedTitle = null
  fetch(location.pathname)
    .then((r) => r.text())
    .then((html) => {
      if (visible) return // reopened meanwhile; the editor owns the title
      const doc = new DOMParser().parseFromString(html, 'text/html')
      if (doc.title) document.title = doc.title
    })
    .catch(() => {
      if (!visible && restoreTitle != null) document.title = restoreTitle
    })
 }
@@ -4,19 +4,33 @@
 //
 // Also: scroll-reveal effects and code copy buttons. These need no
 // support from the article itself and are re-applied after each swap.
 import { OverlayScrollbars } from "overlayscrollbars";
 import "overlayscrollbars/overlayscrollbars.css";
 (() => {
  // Overlay scrollbars: the native kind reserves a strip of layout (or
  // shifts the layout when it appears; overflow: overlay is dead), so we
  // replace it with floating ones that cover content instead. The body
  // remains the native viewport scroller — window scroll events, scrollY
  // and scroll restoration are unaffected; only the scrollbar UI is
  // custom. Theme variables are in pagerite.css.
  OverlayScrollbars(document.body, {
    scrollbars: { autoHide: "scroll" },
  });
  if (import.meta.env.DEV) {
-    // The theme is selectable; the backend names the active one in a meta
+    // In dev the base stylesheet is injected by Vite from JS (linking the
-    // tag (dev links no stylesheets — Vite injects them from JS).
+    // raw module would pull in its HMR wrapper). Theme and banner-design
-    const theme = document.querySelector('meta[name="pagerite:theme"]')?.content;
+    // stylesheets are plain files served by the backend (/_themes/...), so
-    const sheets = [import("./assets/pagerite.css")];
+    // the backend renders their <link>s in both dev and prod. The injected
-    if (theme) sheets.push(import(/* @vite-ignore */ `./assets/themes/${theme}/theme.css`));
+    // base styles land at the end of <head> — after them, restore the
-    // The injected styles land after the server-rendered custom CSS in
+    // canonical order: base < theme < banner design < custom CSS (whose
-    // <head>; move the custom CSS back to the end so its equal-specificity
+    // equal-specificity :root rules — font variables — must win by order).
-    // :root rules (font variables) win.
+    import("./assets/pagerite.css").then(() => {
-    Promise.all(sheets).then(() => {
+      for (const id of ["pagerite-theme", "pagerite-banner", "pagerite-user"]) {
-      const el = document.getElementById("pagerite-user");
+        const el = document.getElementById(id);
-      if (el) document.head.append(el);
+        if (el) document.head.append(el);
      }
    });
  }
@@ -31,67 +45,118 @@
  // only after we know the user has pagerite:admin access. We probe our own
  // /_api/settings endpoint: the same reverse proxy that gates /_api returns
  // 401/403 here, and a 200 means the permission is present.
-  // 401 = anonymous: show a small login link in the banner corner instead.
+  //
-  // 403 = logged in without the permission: no pens. Any other outcome
+  // When Paskia SSO is in use (probed via /auth/api/settings), the banner
-  // (network error — i.e. no auth proxy deployed, as in dev) leaves editing
+  // corner gets a plain link to /auth/ — 🔑 log in for anonymous visitors,
-  // open as before: the real gate is the proxy in front of /_api.
+  // 🔐 profile when logged in. Normal navigation: Paskia does not support
-  let authorized = false;
+  // being iframed, and history.back() returns to the page as-is (the
  // pageshow handler below re-probes auth to refresh the pens).
  let ssoAvailable = false;
  let isAdmin = false;
  let editorMeta = null;
  function makePen(mode) {
    const btn = document.createElement("button");
    btn.type = "button";
    btn.className = mode === "page" ? "edit-link" : "edit-link banner-edit-link";
    btn.title = "edit";
    btn.textContent = "🖊️";
    btn.dataset.editorSrc = editorMeta.src;
    btn.dataset.editorCss = editorMeta.css || "";
    btn.dataset.editorMode = mode;
    if (mode === "page") {
      btn.className = "edit-link";
      btn.title = "edit page";
      btn.textContent = "🖊️";
    } else if (mode === "banner") {
      btn.className = "edit-link";
      btn.title = "edit banner";
      btn.textContent = "🖊️";
    } else {
      btn.className = "edit-link site-edit-link";
      btn.title = "site settings";
      btn.textContent = "⚙️";
    }
    return btn;
  }
-  function injectPens() {
+  function injectPagePen() {
    const banner = document.getElementById("page-banner");
    if (banner && !banner.parentElement.querySelector(".banner-edit-link")) {
      banner.after(makePen("site"));
    }
    const article = document.querySelector("#main article");
    if (article && !article.querySelector("button.edit-link")) {
      article.prepend(makePen("page"));
    }
  }
-  function addLoginLink() {
+  function makeAuthLink(admin) {
    const banner = document.getElementById("page-banner");
    if (!banner || banner.parentElement.querySelector(".login-link")) return;
    const a = document.createElement("a");
-    a.className = "login-link";
+    a.className = admin ? "profile-link" : "login-link";
    a.href = "/auth/";
-    a.textContent = "log in";
+    a.title = admin ? "profile" : "log in";
-    banner.after(a);
+    a.textContent = admin ? "\u{1F510}" : "\u{1F511}";
    return a;
  }
  function renderAuthUi() {
    // Editing is open for admins and, as a dev/no-proxy fallback, when no
    // Paskia SSO is detected at all.
    const canEdit = isAdmin || !ssoAvailable;
    // The analytics page is a read-only dashboard: editing pens and the side
    // panel do not apply there. Login/logout links are still useful.
    const onAnalytics = currentPath === "/_a";
    const banner = document.getElementById("page-banner");
    if (banner) {
      const old = banner.parentElement.querySelector(".editor-pens");
      if (old) old.remove();
      const pens = document.createElement("div");
      pens.className = "editor-pens";
      if (canEdit && !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";
        a.href = "/_a";
        a.title = "analytics";
        a.textContent = "📊";
        pens.append(a);
      }
      if (ssoAvailable) pens.append(makeAuthLink(isAdmin));
      banner.after(pens);
    }
    if (canEdit && !onAnalytics) injectPagePen();
  }
  async function setupAuth() {
    const src = document.querySelector('meta[name="pagerite:editor-src"]')?.content;
-    if (!src) return;
+    if (!src) { pingEntryOnce(); return; }
    editorMeta = {
      src,
      css: document.querySelector('meta[name="pagerite:editor-css"]')?.content,
    };
-    let status = 0;
+
    // Detect whether Paskia SSO is available on this site.
    try {
-      status = (await fetch("/_api/settings")).status;
+      const ssoRes = await fetch("/auth/api/settings");
      ssoAvailable = ssoRes.ok;
    } catch {
-      // Auth proxy unreachable: treat as not deployed.
+      ssoAvailable = false;
    }
-    if (status === 401) addLoginLink();
+
-    else if (status !== 403) {
+    // Check whether the current session has pagerite:admin.
-      authorized = true;
+    isAdmin = false;
-      injectPens();
+    try {
-      placeEditPen();
+      isAdmin = (await fetch("/_api/settings")).status === 200;
    } catch {
      // No auth proxy / dev.
    }
    renderAuthUi();
    pingEntryOnce();
  }
  // Returning to the page via history back/forward may restore a cached
  // copy whose auth UI predates a login/logout — re-probe and re-render.
  addEventListener("pageshow", (ev) => {
    if (ev.persisted) setupAuth();
  });
  function runScripts(root) {
    // Scripts inserted via DOM swapping do not execute; re-create them.
    for (const old of root.querySelectorAll("script")) {
@@ -148,17 +213,25 @@
    if (btn && h1 && btn.parentElement !== h1) h1.append(btn);
  }
-  addEventListener("pagerite:preview", placeEditPen);
+  addEventListener("pagerite:preview", () => {
    // The editors' in-place swaps (SiteEditor.loadPlain) replace #main
    // without applyEffects, discarding the injected pens; re-add them
    // before tucking the article pen into the h1. Without this a freshly
    // created page has no pen for commitPending's handover click.
    renderAuthUi();
    placeEditPen();
  });
  function applyEffects() {
    (window.requestIdleCallback || setTimeout)(preload);
    const main = document.getElementById("main");
    addCopyButtons(main);
-    // Fetch-navigation swaps #main, discarding the article pen; re-add it.
+    // Fetch-navigation swaps #main, discarding the article pen and corner
-    if (authorized) injectPens();
+    // buttons; re-add whichever auth UI is appropriate for this session.
    renderAuthUi();
    placeEditPen();
    // Multi-column layout only when there is enough text to justify it.
-    // Split the body into columned segments: h2s and wide figures are
+    // Split the body into columned segments: h1s, h2s and wide figures are
    // full-width separators and never go inside columns.
    const article = main.querySelector("article");
    if (article) {
@@ -169,9 +242,11 @@
      );
      if (body && article.classList.contains("multicol")
          && !body.querySelector(".colseg")) {
-        // h2s and anything holding a wide image are full-width separators
+        // h1s, h2s and anything holding a wide image are full-width
        // separators
        const isSeparator = (el) =>
-          el.tagName === "H2" || el.querySelector("img.wide") !== null;
+          el.tagName === "H1" || el.tagName === "H2"
          || el.querySelector("img.wide") !== null;
        let seg = null;
        for (const el of [...body.children]) {
          if (isSeparator(el)) {
@@ -204,29 +279,31 @@
    }
  }
-  // --- Preloading ------------------------------------------------------
+  // --- Page cache / preloading ------------------------------------------
-  // Warm the HTTP cache with all linked pages and their resources, so
+  // Articles are deliberately NOT HTTP-cacheable, so speed comes from an
-  // navigation (and the cube transition) is instant. Pages carry ETags,
+  // in-memory cache instead: at load (and after each swap) every visible
-  // so re-running this after each navigation revalidates cheaply (304)
+  // internal link is fetched exactly once, and navigation is served from
-  // and picks up changed content and images.
+  // memory with no fetch at all. Editor re-renders (swapdoc.loadPlain)
  // announce their fresh copies via pagerite:page-fetched, keeping the
  // cache in sync after edits.
  const pageCache = new Map(); // pathname -> HTML text
  addEventListener("pagerite:page-fetched", (ev) => {
    pageCache.set(new URL(ev.detail.url, location.href).pathname, ev.detail.html);
  });
  function preload() {
-    const urls = new Set();
+    const urls = new Set([location.pathname]);
-    for (const a of document.querySelectorAll('#nav a[href^="/"], #main a[href^="/"]')) {
+    for (const a of document.querySelectorAll(
      '#nav a[href^="/"], #sidebar a[href^="/"], #main a[href^="/"]',
    )) {
      urls.add(a.pathname);
    }
    for (const url of urls) {
-      if (url === location.pathname) continue;
+      if (pageCache.has(url)) continue;
      fetch(url)
-        .then((r) => (r.ok ? r.text() : ""))
+        .then((r) => (r.ok && (r.headers.get("content-type") || "").includes("text/html")
-        .then((html) => {
+          ? r.text() : ""))
-          if (!html) return;
+        .then((html) => { if (html) pageCache.set(url, html); })
          // Off-screen parse: load the page's images and other resources
          const doc = new DOMParser().parseFromString(html, "text/html");
          for (const img of doc.querySelectorAll("img")) {
            const i = new Image();
            i.src = img.src;
          }
        })
        .catch(() => {});
    }
  }
@@ -260,6 +337,152 @@
    }, { passive: true });
  }
  // --- Analytics pings ---------------------------------------------------
  // Fire-and-forget POST /_a {fr, to, read}: on the initial page load
  // (starts the visit — the server counts nothing from the document GET
  // alone), for internal fetch-navigations, for external https exits, and
  // on window close. ``read`` is the active time (ms) spent on ``fr``.
  // Reading time pauses after 1 minute of inactivity and resumes on the
  // next mouse/touch/scroll/keyboard event.
  // Excluded: back/forward (popstate never pings), everything while the
  // editor is open (body.editing — admin noise, not visits), and the
  // analytics page itself (/_a), even though fetch-navigation treats it
  // like a normal article.
  // Admins (when SSO is actually in use — with no auth proxy "admin" is
  // everyone's state) ping normally but with hide=1: the server then
  // records nothing and scrubs any session the same browser accumulated
  // before logging in, so admins never show up as visits or crawlers.
  // See docs/analytics.md.
  function ping(to, fr = currentPath, read = 0) {
    if (document.body.classList.contains("editing")) return;
    if ((to && to === "/_a") || fr === "/_a") return;
    const hide = ssoAvailable && isAdmin ? 1 : 0;
    const body = JSON.stringify({
      fr, to, hide,
      read: Math.max(0, Math.round(read / 1000)),
    });
    try {
      fetch("/_a", {
        method: "POST",
        keepalive: true,
        headers: { "content-type": "application/json" },
        body,
      });
    } catch { /* analytics must never break navigation */ }
  }
  // Active reading time for the current page. The clock stops after 1 minute
  // without activity and restarts on the next mouse/touch/scroll/keyboard
  // event.
  const INACTIVE_MS = 60_000;
  let readStart = performance.now();
  let readElapsed = 0;
  let reading = true;
  let readInactivityTimer = null;
  let closePingedFor = null;
  function markReadActivity() {
    if (!reading) {
      reading = true;
      readStart = performance.now();
    }
    clearTimeout(readInactivityTimer);
    readInactivityTimer = setTimeout(() => {
      if (reading) {
        readElapsed += performance.now() - readStart;
        reading = false;
      }
    }, INACTIVE_MS);
  }
  function takeReadTime() {
    if (reading) {
      readElapsed += performance.now() - readStart;
      readStart = performance.now();
    }
    const ms = Math.max(0, Math.round(readElapsed));
    readElapsed = 0;
    return ms;
  }
  function resetReadTime() {
    readElapsed = 0;
    reading = true;
    readStart = performance.now();
    clearTimeout(readInactivityTimer);
  }
  function sendClosePing() {
    if (closePingedFor === currentPath) return;
    const read = Math.max(0, Math.round(takeReadTime() / 1000));
    if (read <= 0) return;
    const hide = ssoAvailable && isAdmin ? 1 : 0;
    const body = JSON.stringify({ fr: currentPath, hide, read });
    const blob = new Blob([body], { type: "application/json" });
    try {
      if (navigator.sendBeacon) {
        navigator.sendBeacon("/_a", blob);
      } else {
        fetch("/_a", {
          method: "POST",
          keepalive: true,
          headers: { "content-type": "application/json" },
          body,
        });
      }
    } catch { /* analytics must never break navigation */ }
    closePingedFor = currentPath;
  }
  for (const ev of ["mousemove", "mousedown", "touchstart", "touchmove", "scroll", "keydown"]) {
    addEventListener(ev, markReadActivity, { passive: true });
  }
  addEventListener("pagehide", sendClosePing);
  // The initial page load pings too — it is what starts the visit and
  // counts the entry page view (the document GET alone records nothing).
  // Sent once per load, after the auth probes so the admin gate applies;
  // the pageshow re-probe must not ping again. Reloads are not visits:
  // pinging them would double-count the view and log a self-transition.
  let entryPinged = false;
  function pingEntryOnce() {
    if (entryPinged) return;
    entryPinged = true;
    const nav = performance.getEntriesByType?.("navigation")[0];
    if (nav ? nav.type === "reload" : performance.navigation?.type === 1) return;
    ping(currentPath);
  }
  // --- Analytics page mount/unmount --------------------------------------
  // The analytics page is a normal page whose body is rendered by the server
  // but whose content is a Vue app. We load the entry module on demand so the
  // analytics bundle is only fetched when visiting /_a, and unmount the app
  // before swapping away so Vue teardown runs cleanly.
  let analyticsUnmount = null;
  function teardownAnalytics() {
    analyticsUnmount?.();
    analyticsUnmount = null;
  }
  async function mountAnalytics(doc) {
    const src = doc.querySelector('meta[name="pagerite:analytics-src"]')?.content;
    if (!src) {
      teardownAnalytics();
      return;
    }
    try {
      const mod = await import(/* @vite-ignore */ src);
      const container = document.getElementById("analytics-app");
      if (container) {
        mod.mount(container);
        analyticsUnmount = mod.unmount;
      }
    } catch (e) {
      console.error("analytics mount failed:", e);
    }
  }
  // --- Fetch navigation ------------------------------------------------
  async function load(url, push = true, back = false) {
    // Navigating with the editor open closes it; unsaved edits are lost
@@ -267,22 +490,32 @@
    if (document.body.classList.contains("editing")) {
      editorModule?.then((m) => m.closeEditor());
    }
    teardownAnalytics();
    let doc;
    let finalUrl = url;
-    try {
+    const cached = pageCache.get(new URL(url, location.href).pathname);
-      const res = await fetch(url);
+    if (cached) {
-      const type = res.headers.get("content-type") || "";
+      doc = new DOMParser().parseFromString(cached, "text/html");
-      if (!res.ok || !type.includes("text/html")) throw new Error("not a page");
+    } else {
-      // Reflect any redirect the server issued.
+      try {
-      if (res.redirected) finalUrl = res.url;
+        const res = await fetch(url);
-      doc = new DOMParser().parseFromString(await res.text(), "text/html");
+        const type = res.headers.get("content-type") || "";
-    } catch {
+        if (!res.ok || !type.includes("text/html")) throw new Error("not a page");
-      location.href = url; // fall back to a normal navigation
+        // Reflect any redirect the server issued.
-      return;
+        if (res.redirected) finalUrl = res.url;
        const html = await res.text();
        // Populate the cache too, or the post-swap preload (which includes
        // location.pathname) would fetch the very page we just loaded again.
        pageCache.set(new URL(finalUrl, location.href).pathname, html);
        doc = new DOMParser().parseFromString(html, "text/html");
      } catch {
        location.href = url; // fall back to a normal navigation
        return false;
      }
    }
    if (REGIONS.some((id) => !doc.getElementById(id))) {
      location.href = url;
-      return;
+      return false;
    }
    const doit = () => {
      for (const id of REGIONS) {
@@ -320,6 +553,9 @@
      runScripts(document.getElementById("page-banner"));
      runScripts(document.getElementById("main"));
      applyEffects();
      // The fetched doc carries the analytics meta; the live document's
      // <head> is never swapped, so querying it would never find the entry.
      mountAnalytics(doc);
    };
    // Rotating cube page transition (see the FRAGILE block in pagerite.css);
    // mirrored when navigating back through history. Navigation within the
@@ -339,15 +575,16 @@
    currentPath = new URL(finalUrl, location.href).pathname;
    if (push) history.pushState(null, "", finalUrl);
    scrollTo(0, 0);
    return true;
  }
  addEventListener("click", (ev) => {
    if (ev.defaultPrevented || ev.button !== 0
        || ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey) return;
-    // Edit buttons toggle the editor panel docked on this page: load the
+    // Edit buttons toggle the tabbed editor panel docked on this page: load
-    // Vue app on demand (with any extra styles) and mount it in place.
+    // the Vue app on demand (with any extra styles) and mount it in place.
-    // Clicking the pen of the already-open editor closes it; clicking the
+    // Clicking the pen of the already-open tab closes the shell; clicking
-    // other pen swaps the panel for the other editor type.
+    // another pen switches the shell to that tab.
    const editBtn = ev.target.closest("button.edit-link");
    if (editBtn && editBtn.dataset.editorSrc) {
      ev.preventDefault();
@@ -376,16 +613,37 @@
    const a = ev.target.closest("a[href]");
    if (!a || a.target || a.hasAttribute("download")) return;
    const url = new URL(a.href, location.href);
-    if (url.origin !== location.origin) return;
+    if (url.origin !== location.origin) {
      // External link: the browser navigates; record the full https URL so
      // different links to the same domain stay distinct in analytics.
      if (url.protocol === "https:") {
        closePingedFor = currentPath;
        ping(url.href, currentPath, takeReadTime());
      }
      return;
    }
    // Same-page anchor links (footnotes etc.): let the browser handle them
    if (url.pathname === location.pathname && url.hash) return;
-    // Machinery and auth endpoints are never fetch-navigated.
+    // Machinery and auth endpoints are never fetch-navigated, except the
-    if (url.pathname.startsWith("/_") || url.pathname.startsWith("/auth")) return;
+    // public analytics viewer page at /_a.
    if ((url.pathname.startsWith("/_") && url.pathname !== "/_a")
        || url.pathname.startsWith("/auth")) return;
    ev.preventDefault();
-    load(url);
+    // Capture the source now: load() updates currentPath before pinging.
    const from = currentPath;
    load(url).then((ok) => {
      if (!ok) return;
      closePingedFor = null;
      ping(url.pathname, from, takeReadTime());
      resetReadTime();
    });
  });
-  addEventListener("popstate", () => load(location.href, false, true));
+  addEventListener("popstate", () => {
    // Hash-only history entries are not navigations.
    if (location.pathname === currentPath) return;
    load(location.href, false, true);
  });
  // --- Task-list checkboxes ------------------------------------------------
  // Checkboxes in the rendered article are live: toggling them edits the
@@ -451,4 +709,5 @@
  setupAuth();
  applyEffects();
  mountAnalytics(document);
 })();
@@ -0,0 +1,121 @@
 // Shared in-place page re-rendering for the editor tabs: fetch a page
 // without transitions and swap its dynamic regions into the live document.
 // Used by BannerEditor (banner design changes), SiteEditor (theme changes)
 // and StructureEditor (tree navigation).
 export function runScripts(root) {
  // Scripts injected via innerHTML do not execute; re-create them.
  if (!root) return
  for (const old of root.querySelectorAll('script')) {
    const s = document.createElement('script')
    for (const a of old.attributes) s.setAttribute(a.name, a.value)
    s.textContent = old.textContent
    old.replaceWith(s)
  }
 }
 function swapRegions(doc) {
  for (const id of ['page-banner', 'nav', 'main']) {
    const fresh = doc.getElementById(id)
    const el = document.getElementById(id)
    if (fresh && el) el.replaceWith(document.importNode(fresh, true))
  }
  // #sidebar is omitted entirely when the section has no sub-navigation,
  // so it may be absent on either side: replace, insert, or remove.
  const freshSidebar = doc.getElementById('sidebar')
  const curSidebar = document.getElementById('sidebar')
  if (freshSidebar && curSidebar) {
    curSidebar.replaceWith(document.importNode(freshSidebar, true))
  } else if (freshSidebar) {
    document.getElementById('main')?.before(document.importNode(freshSidebar, true))
  } else if (curSidebar) {
    curSidebar.remove()
  }
  // The brand lives in the header, outside the swappable regions, and is
  // absent entirely when neither a brand nor custom brand HTML is set. A
  // plain link keeps its element (text swap only, preserving the shrink-
  // to-fit observers); anything else (custom HTML wrapper) is replaced.
  const freshBrand = doc.getElementById('brand')
  const curBrand = document.getElementById('brand')
  if (freshBrand && curBrand && freshBrand.tagName === 'A' && curBrand.tagName === 'A') {
    curBrand.textContent = freshBrand.textContent
  } else if (freshBrand && curBrand) {
    curBrand.replaceWith(document.importNode(freshBrand, true))
    runScripts(document.getElementById('brand'))
  } else if (curBrand) {
    curBrand.remove()
  } else if (freshBrand) {
    document.getElementById('nav')?.before(document.importNode(freshBrand, true))
    runScripts(document.getElementById('brand'))
  }
  // Site-wide custom CSS is in <head> and must be swapped too.
  const freshUserStyle = doc.getElementById('pagerite-user')
  const curUserStyle = document.getElementById('pagerite-user')
  if (freshUserStyle && curUserStyle) {
    curUserStyle.textContent = freshUserStyle.textContent
  } else if (freshUserStyle) {
    document.head.appendChild(document.importNode(freshUserStyle, true))
  } else if (curUserStyle) {
    curUserStyle.remove()
  }
  // Theme and other public stylesheets live in <head>, rendered with stable
  // ids by the backend; sync them positionally so the custom CSS (rendered
  // last) always keeps winning by order. Diff-based: unchanged sheets keep
  // their elements, so their @keyframes are never torn down (re-creating
  // keyframes would replay the editor's slide-in animation).
  const freshLinks = [...doc.head.querySelectorAll('link[rel="stylesheet"]')]
  const freshIds = new Set(freshLinks.map((l) => l.id))
  for (const link of [...document.head.querySelectorAll('link[rel="stylesheet"]')]) {
    if (!link.dataset.pagerite && !freshIds.has(link.id)) link.remove()
  }
  // Insert missing sheets in the fresh document's order, each right after
  // its predecessor's element. The first sheet rendered is always the base
  // CSS, so its link doubles as the fallback anchor when nothing matched yet
  // (e.g. no theme was selected before and the position is otherwise lost).
  let anchor = null
  for (const link of freshLinks) {
    const cur = link.id && document.getElementById(link.id)
    if (cur && cur.href === link.href) {
      anchor = cur
      continue
    }
    const el = document.importNode(link, true)
    // Same id, new URL (theme switch): replace in place, keeping position.
    if (cur) cur.replaceWith(el)
    else if (anchor) anchor.after(el)
    else document.getElementById('pagerite-base')?.after(el) ?? document.head.append(el)
    anchor = el
  }
  // The editor keeps its own title while open; only inherit the server title
  // when navigating outside the editor (e.g. fetch-navigation swaps).
  if (!document.body.classList.contains('editing')) {
    document.title = doc.title
  }
 }
 // Fetch /p, swap its regions into the live page and replaceState to it.
 // Returns the final URL (after redirects), or null when the fetch did not
 // yield a page. Category and missing URLs render a placeholder 404 page —
 // fine to swap in (new pages are created by editing them).
 export async function loadPlain(p) {
  let doc
  let finalUrl = `/${p}`
  let html
  try {
    const res = await fetch(finalUrl)
    const type = res.headers.get('content-type') || ''
    if (!type.includes('text/html')) return null
    if (res.redirected) finalUrl = res.url
    html = await res.text()
    doc = new DOMParser().parseFromString(html, 'text/html')
  } catch { return null }
  if (!doc.getElementById('main')) return null
  swapRegions(doc)
  history.replaceState(null, '', finalUrl)
  runScripts(document.getElementById('page-banner'))
  runScripts(document.getElementById('main'))
  // Keep pagerite.js's in-memory page cache in sync with the fresh copy.
  dispatchEvent(new CustomEvent('pagerite:page-fetched', { detail: { url: finalUrl, html } }))
  dispatchEvent(new CustomEvent('pagerite:preview')) // re-inject + re-tuck the edit pens
  return finalUrl
 }
@@ -11,7 +11,7 @@
 */
 export default function fastapiVue({ paths = ["/api"] } = {}) {
-  const backendUrl = process.env.PAGERITE_BACKEND_URL || "http://localhost:3200"
+  const backendUrl = process.env.PAGERITE_BACKEND_URL || "http://localhost:8210"
  // Build proxy configuration for each path
  const proxy = {}
@@ -1,5 +1,4 @@
 import { fileURLToPath, URL } from 'node:url'
 import { readdirSync } from 'node:fs'
 import fastapiVue from './vite-plugin-fastapi.js'
 import { defineConfig } from 'vite'
@@ -8,24 +7,16 @@ import vueDevTools from 'vite-plugin-vue-devtools'
 const backendUrl = process.env.PAGERITE_BACKEND_URL || 'http://localhost:3200'
 // Every theme directory ships its theme.css as a separate build entry, so
 // the backend can link base and theme stylesheets independently.
 const themesDir = fileURLToPath(new URL('./src/assets/themes', import.meta.url))
 const themeInputs = Object.fromEntries(
  readdirSync(themesDir, { withFileTypes: true })
    .filter((d) => d.isDirectory())
    .map((d) => [`theme_${d.name}`, `${themesDir}/${d.name}/theme.css`]),
 )
 // Proxy content pages (/slug, /path/to/slug) to the FastAPI backend in dev.
 // Excludes Vite internals (/@..., /src, /node_modules, /__...) and the
-// backend's /_ prefix. /_api and /_f are handled by the fastapi-vue plugin.
+// backend's /_ prefix. /_api, /_f, /_themes and the /_a analytics ping are
 // handled by the fastapi-vue plugin.
 const CONTENT_PROXY = '^\\/(?!_|@|src|node_modules|__)(?:[^./?]+(?:\\/[^./?]+)*)?(?:\\?.*)?$'
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [
-    fastapiVue({ paths: ["/_api", "/_f"] }),
+    fastapiVue({ paths: ["/_api", "/_f", "/_themes", "/_a"] }),
    vue(),
    vueDevTools(),
  ],
@@ -49,8 +40,10 @@ export default defineConfig({
      input: {
        main: fileURLToPath(new URL('./src/main.js', import.meta.url)),
        pagerite: fileURLToPath(new URL('./src/pagerite.js', import.meta.url)),
        analytics: fileURLToPath(new URL('./src/analytics-main.js', import.meta.url)),
        // Only the base CSS is built; theme/banner-design stylesheets live
        // in pagerite/themes/{name}/ and are served by the backend as-is.
        pagerite_base: fileURLToPath(new URL('./src/assets/pagerite.css', import.meta.url)),
        ...themeInputs,
      },
    },
  },
@@ -1,14 +1,74 @@
 # auto-upgrade@fastapi-vue-setup - remove this if you modify this file
 """Command-line entry point for running the backend server."""
 import argparse
 import gzip
 import os
 import sys
 from datetime import date
 from pathlib import Path
 import httpx
 from fastapi_vue import server
-DEFAULT_PORT = 3100
+DEFAULT_PORT = 8100
 DEVMODE = os.getenv("PAGERITE_DEV") == "1"
 # Repository root (pagerite/__main__.py -> ..), where the MMDB lives.
 _REPO_ROOT = Path(__file__).resolve().parent.parent
 DBIP_URL = "https://download.db-ip.com/free/dbip-city-lite-{month}.mmdb.gz"
 def _download_dbip() -> None:
    """Download the latest dbip-city-lite MMDB if ours is missing or older."""
    today = date.today()
    months = [f"{today:%Y-%m}"]
    # The current month's file may not be published yet; fall back to last month.
    prev = (today.replace(day=1) - date.resolution).replace(day=1)
    months.append(f"{prev:%Y-%m}")
    existing = sorted(
        p.stem.removeprefix("dbip-city-lite-").removesuffix(".mmdb")
        for p in _REPO_ROOT.glob("dbip-city-lite-*.mmdb*")
    )
    if existing and existing[-1] >= months[0]:
        print(f"pagerite: DB-IP database is current ({existing[-1]}), skipping download")
        return
    for month in months:
        url = DBIP_URL.format(month=month)
        target = _REPO_ROOT / f"dbip-city-lite-{month}.mmdb.gz"
        tmp = target.with_suffix(".mmdb.gz.tmp")
        print(f"pagerite: downloading {url}")
        try:
            with httpx.stream("GET", url, follow_redirects=True, timeout=120) as r:
                if r.status_code == 404:
                    continue
                r.raise_for_status()
                with open(tmp, "wb") as f:
                    for chunk in r.iter_bytes():
                        f.write(chunk)
        except httpx.HTTPError as e:
            print(f"pagerite: DB-IP download failed: {e}", file=sys.stderr)
            tmp.unlink(missing_ok=True)
            continue
        # Verify it is actually gzip data before installing it.
        try:
            with gzip.open(tmp, "rb") as f:
                f.read(1)
        except OSError:
            print(f"pagerite: DB-IP download for {month} was not valid gzip", file=sys.stderr)
            tmp.unlink(missing_ok=True)
            continue
        os.replace(tmp, target)
        # Drop older databases so the app never picks up a stale one.
        for old in _REPO_ROOT.glob("dbip-city-lite-*.mmdb*"):
            if old.name != target.name:
                old.unlink()
        print(f"pagerite: DB-IP database updated to {target.name}")
        return
    print("pagerite: could not download a DB-IP database", file=sys.stderr)
 def main() -> None:
    """Run the backend server with optional arguments."""
@@ -19,7 +79,14 @@ def main() -> None:
        action="append",
        help=(f"Endpoint (default: localhost:{DEFAULT_PORT})."),
    )
    parser.add_argument(
        "--dbip",
        action="store_true",
        help="Download/update the DB-IP city lite database before starting.",
    )
    args = parser.parse_args()
    if args.dbip:
        _download_dbip()
    dev = {"reload": True, "reload_dirs": ["pagerite"]} if DEVMODE else {}
    server.run(
        "pagerite.app:app",
@@ -0,0 +1,729 @@
 """Server-side visit analytics (collection only; see docs/analytics.md).
 Events come from navigation pings POSTed to /_a by pagerite.js: the first
 ping on page load starts a visit, later pings extend it, and pings with no
 known session start a fresh one (missing data, not dropped). The document
 GET handler stashes the entry referer (external https origin) and any
 utm_* query parameters in in-memory IP tables, consumed when the ping
 starts the visit; nothing is counted without a ping (bots stay invisible).
 Admin clients ping with ``hide=1``, which records nothing and removes any
 visit the session accumulated before logging in.  Scanner telltale 404s
 (dotpaths, *.php) classify the source IP as abuse; its hits — including
 earlier crawler hits — are moved to the abuse list, which the viewer
 groups by IP with full request paths.  Client metadata (IP, UA, language,
 country/city, host) is stored once per unique client hash and referenced
 from visits, crawler hits and abuse hits.  The session map is in-memory
 only.
 Data is a msgspec Struct JSON-dumped to its own file (not the kanta db),
 rewritten atomically on every recorded event.
 """
 import ipaddress
 import os
 import re
 import tempfile
 from collections.abc import Callable
 from contextlib import suppress
 from datetime import UTC, datetime, timedelta
 from pathlib import Path
 from urllib.parse import parse_qs, urlparse
 import blake3
 import msgspec
 from ua_parser import parse
 def _compact_user_agent(ua: str) -> str:
    """Format a User-Agent string into a compact display form.
    Returns the original UA when the parser cannot identify the browser/OS.
    """
    if not ua or not ua.strip() or ua == "-":
        return ""
    r = parse(ua)
    browser = r.user_agent.family if r.user_agent else None
    ver = r.user_agent.major if r.user_agent else ""
    os_name = r.os.family if r.os else None
    dev = r.device.family if r.device else None
    if browser in (None, "Other") and os_name in (None, "Other"):
        return ua
    if browser and browser != "Other":
        browser = browser.split()[0]
    else:
        browser = ""
    os_name = os_name if os_name and os_name != "Other" else ""
    if dev in (None, "Other") or dev == browser:
        dev = ""
    parts = [f"{browser}/{ver}" if browser else "", os_name, dev]
    return " ".join(p for p in parts if p).strip()
 class Client(msgspec.Struct, omit_defaults=True):
    """Client metadata shared by visits, crawler hits and abuse hits.
    Identified by a 6-byte blake3 hash of the IPv4 address or IPv6 /64
    network, the full User-Agent string and the extracted language tag.
    Country/city/host are filled in asynchronously after the first event.
    """
    #: Visitor IP address (first X-Forwarded-For hop or direct peer).
    ip: str = ""
    #: Reverse-DNS host name for ``ip`` when resolvable, else "".
    host: str = ""
    #: First Accept-Language tag, lowercased (e.g. "en-us").
    lang: str = ""
    #: Two-letter country code from the DB-IP geoip lookup, or "".
    country: str = ""
    #: City name from the DB-IP geoip lookup, or "".
    city: str = ""
    #: Raw User-Agent header.
    ua: str = ""
    #: Compact display form of ``ua`` (browser/OS/device) when parsable.
    ua_pretty: str = ""
 class Visit(msgspec.Struct, omit_defaults=True):
    """One visit: the initial-load data plus everything seen afterwards.
    ``trail`` holds page paths and external exit URLs in first-seen
    order; re-visiting an already seen page does not append. The entry
    page itself is in ``entry``, not in the trail.  Client metadata is
    held in ``Analytics.clients`` keyed by ``client``.
    """
    start: datetime
    entry: str
    #: External https origin of the initial load, "" for direct visits.
    referer: str = ""
    #: 6-byte blake3 hash referencing ``Analytics.clients``.
    client: bytes = b""
    trail: list[str] = []
    #: UTM query parameters from the landing URL, keyed by parameter name.
    utm: dict[str, str] = {}
    #: Active reading time per path (seconds), keyed by path.
    read: dict[str, int] = {}
 class CrawlerHit(msgspec.Struct, omit_defaults=True):
    """A document GET that was never followed by an analytics ping.
    Client metadata is held in ``Analytics.clients`` keyed by ``client``.
    """
    start: datetime
    entry: str
    #: 6-byte blake3 hash referencing ``Analytics.clients``.
    client: bytes = b""
    #: External https origin of the initial load, "" for direct/none.
    referer: str = ""
    #: Raw query string of the landing URL (UTM tags can be parsed from it).
    query: str = ""
 class AbuseHit(msgspec.Struct, omit_defaults=True):
    """A request from an IP classified as a scanner/abuser.
    Unlike crawler hits the full request path (query string included) is
    kept: the interesting part is exactly which paths were probed.
    ``flag`` marks the path that triggered classification; ``is_404``
    distinguishes 404 responses from document GETs made by the abuser.
    Client metadata is held in ``Analytics.clients`` keyed by ``client``.
    """
    start: datetime
    #: Full request path including the query string (e.g. "/.env?x=1").
    path: str
    #: 6-byte blake3 hash referencing ``Analytics.clients``.
    client: bytes = b""
    #: True when this path triggered abuse classification (telltale path
    #: or the 404 that crossed the threshold).
    flag: bool = False
    #: True for 404 responses; false for document GETs from the abuser.
    is_404: bool = False
 class 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] = []
    #: Document GETs that never produced a ping, treated as crawler/bot hits.
    crawlers: list[CrawlerHit] = []
    #: Requests from abusive IPs (see AbuseHit), grouped by IP in the viewer.
    abuse: list[AbuseHit] = []
    #: Client metadata keyed by 6-byte blake3 hash.
    clients: dict[bytes, Client] = {}
    #: IPs classified as scanners/abusers (keys; values always True).
    abuse_ips: dict[str, bool] = {}
    #: Page transitions per 5-minute bucket (sparse):
    #: from -> to -> bucket ISO -> count. ``from`` is the referer origin or
    #: "(direct)" for initial loads, a page path for pings.
    transitions: dict[str, dict[str, dict[str, int]]] = {}
    #: Page views per 5-minute bucket: path -> bucket ISO -> count (sparse).
    views: dict[str, dict[str, int]] = {}
    #: New visits per 5-minute bucket: bucket ISO -> count (sparse).
    site_visits: dict[str, int] = {}
 def _bucket(now: datetime) -> str:
    """Start of the 5-minute interval containing ``now``, as ISO string."""
    return now.replace(minute=now.minute // 5 * 5, second=0, microsecond=0).isoformat()
 def _origin(url: str) -> str | None:
    """The origin part of an https URL (scheme://host[:port]), else None."""
    try:
        parsed = urlparse(url)
    except ValueError:
        return None
    if parsed.scheme != "https" or not parsed.netloc:
        return None
    return f"https://{parsed.netloc}"
 def _external_target(url: str) -> str | None:
    """A valid https URL (origin or full page), else None."""
    try:
        parsed = urlparse(url)
    except ValueError:
        return None
    if parsed.scheme != "https" or not parsed.netloc:
        return None
    return url
 _SEGMENT = re.compile(r"[a-z0-9][a-z0-9_-]*")
 def _internal_path(to: str) -> str | None:
    """A valid internal page path ("/" or slug segments), else None."""
    path = to.split("?")[0].split("#")[0].strip("/")
    if not path:
        return "/"
    if all(_SEGMENT.fullmatch(seg) for seg in path.split("/")):
        return f"/{path}"
    return None
 def _parse_accept_language(value: str) -> tuple[str, str]:
    """First Accept-Language tag and the region/country subtag if present.
    ``en-US, fr;q=0.9`` -> ("en-us", "US").  Wildcards and missing regions
    produce an empty country.  The region is intentionally approximate:
    it reflects the browser's language preference, not geo-location.
    """
    if not value:
        return "", ""
    tag = value.split(",")[0].split(";")[0].strip()
    if not tag or tag == "*":
        return "", ""
    lang = tag.lower()
    country = ""
    # Region subtags follow the initial language tag (en-US, zh-Hans-CN).
    # A bare two-letter tag such as "fr" is a language code, not a region.
    for part in reversed(tag.split("-")[1:]):
        if len(part) == 2 and part.isalpha():
            country = part.upper()
            break
    return lang, country
 def _utm_tags(query: str) -> dict[str, str]:
    """UTM parameters from a query string, keeping only the first value."""
    if not query:
        return {}
    parsed = parse_qs(query, keep_blank_values=True)
    return {k: v[0] for k, v in parsed.items() if k.startswith("utm_")}
 _CRAWLER_TIMEOUT = timedelta(seconds=10)
 #: Plain-404 count per IP that classifies it as abuse even without a
 #: telltale path hit.
 _ABUSE_404_THRESHOLD = 10
 #: Paths that instantly classify an IP as abuse when they 404: any segment
 #: starting with a dot ("/.env", "/.git/config") or ending in ".php".
 _ABUSE_PATH = re.compile(r"(^|/)\.|\.php$", re.IGNORECASE)
 def _is_abuse_path(path: str) -> bool:
    """Telltale scanner path: dot segment or *.php."""
    return bool(_ABUSE_PATH.search(path.split("?")[0]))
 def _network_ip(ip: str) -> str:
    """IPv4 address unchanged, IPv6 collapsed to its /64 network address.
    We hash the network rather than the full address so that clients in the
    same /64 (a typical end-user allocation) are treated as one visitor.
    """
    if not ip:
        return ip
    try:
        addr = ipaddress.ip_address(ip)
    except ValueError:
        return ip
    if isinstance(addr, ipaddress.IPv6Address):
        return str(ipaddress.IPv6Network(f"{ip}/64", strict=False).network_address)
    return ip
 def _client_hash(ip: str, ua: str, lang: str) -> bytes:
    """6-byte blake3 digest identifying a visitor/client tuple.
    The key is the prettified IP (IPv6 /64), the raw UA string and the
    extracted language tag, separated by null bytes.
    """
    return blake3.blake3(
        f"{_network_ip(ip)}\0{ua}\0{lang}".encode()
    ).digest()[:6]
 class Store:
    """In-memory analytics data plus the client-hash -> visit session map."""
    def __init__(self, path: Path) -> None:
        self.path = path
        self.data = Analytics()
        if path.exists():
            try:
                self.data = msgspec.json.decode(path.read_bytes(), type=Analytics)
            except msgspec.DecodeError, OSError:
                pass  # legacy schema / corrupt or unreadable file: start fresh
        #: client hash -> index of the current visit in data.visits
        self.sessions: dict[bytes, int] = {}
        #: ip -> external https origin of the latest document GET carrying
        #: one, stashed for the visit the client's initial ping starts.
        #: Internal or absent referers never touch the table.
        self.pending_referers: dict[str, str] = {}
        #: ip -> utm_* query parameters from the latest document GET that
        #: carried any, stashed for the visit the client's initial ping starts.
        #: Only non-empty sets are stored, so a later parameter-less page
        #: does not overwrite an earlier tagged landing URL.
        self.pending_utms: dict[str, dict[str, str]] = {}
        #: Document GETs that have not yet been matched by a ping.  Kept
        #: in RAM only; expired entries are written to ``data.crawlers``.
        self.pending_crawlers: list[CrawlerHit] = []
        #: ip -> number of plain (non-telltale) 404s seen, in RAM only;
        #: reaching ``_ABUSE_404_THRESHOLD`` classifies the IP as abuse.
        self.not_found_counts: dict[str, int] = {}
        #: Callables to notify when persisted data changes.  Registered by the
        #: analytics WebSocket broadcaster.
        self._on_change: list[Callable[[], None]] = []
    def subscribe(self, callback: Callable[[], None]) -> None:
        """Register a callback to be called after every persisted change."""
        if callback not in self._on_change:
            self._on_change.append(callback)
    def unsubscribe(self, callback: Callable[[], None]) -> None:
        """Remove a previously registered change callback."""
        with suppress(ValueError):
            self._on_change.remove(callback)
    def _notify(self) -> None:
        for callback in self._on_change:
            callback()
    def _save(self) -> None:
        """Rewrite the JSON file atomically (temp file + rename)."""
        try:
            fd, tmp = tempfile.mkstemp(
                dir=self.path.parent, prefix=self.path.name, suffix=".tmp"
            )
            with os.fdopen(fd, "wb") as f:
                f.write(msgspec.json.encode(self.data))
            os.replace(tmp, self.path)
        except OSError:
            pass  # analytics must never break page serving
        else:
            self._notify()
    def _flush_crawlers(self, now: datetime | None = None) -> list[bytes]:
        """Move expired pending crawler hits into persistent ``data.crawlers``.
        Returns the client hashes of the newly flushed hits so callers can
        schedule async enrichment.
        """
        if not self.pending_crawlers:
            return []
        now = now or datetime.now(UTC)
        cutoff = now - _CRAWLER_TIMEOUT
        expired: list[CrawlerHit] = []
        remaining: list[CrawlerHit] = []
        for hit in self.pending_crawlers:
            (expired if hit.start <= cutoff else remaining).append(hit)
        if not expired:
            return []
        self.pending_crawlers = remaining
        self.data.crawlers.extend(expired)
        self._save()
        return [hit.client for hit in expired]
    def _count(self, table: dict[str, int], key: str) -> None:
        table[key] = table.get(key, 0) + 1
    def _count_transition(self, fr: str, to: str, now: datetime) -> None:
        """Count one transition in its 5-minute bucket (sparse matrix)."""
        buckets = self.data.transitions.setdefault(fr, {}).setdefault(to, {})
        self._count(buckets, _bucket(now))
    def _uncount(self, table: dict[str, int], key: str) -> None:
        """Reverse one ``_count``: decrement and drop empty keys."""
        if key in table:
            table[key] -= 1
            if table[key] <= 0:
                del table[key]
    def _remove_visit(self, index: int) -> None:
        """Delete a visit and reverse the counts its creation recorded.
        Used when a known visitor turns out to be an admin (hide=1 ping):
        the session is scrubbed from the stats.  Views/transitions logged
        by later pings inside the visit lack per-event timestamps and are
        left as-is.
        """
        visit = self.data.visits[index]
        bucket = _bucket(visit.start)
        self._uncount(self.data.site_visits, bucket)
        views = self.data.views.get(visit.entry)
        if views is not None:
            self._uncount(views, bucket)
            if not views:
                del self.data.views[visit.entry]
        fr_map = self.data.transitions.get(visit.referer or "(direct)")
        if fr_map is not None:
            buckets = fr_map.get(visit.entry)
            if buckets is not None:
                self._uncount(buckets, bucket)
                if not buckets:
                    del fr_map[visit.entry]
            if not fr_map:
                del self.data.transitions[visit.referer or "(direct)"]
        del self.data.visits[index]
        # Sessions store list indices; shift the ones past the removed visit.
        for key, i in list(self.sessions.items()):
            if i > index:
                self.sessions[key] = i - 1
    def _client_ip(self, client_hash: bytes) -> str:
        """Return the IP stored for ``client_hash``, or "" if missing."""
        client = self.data.clients.get(client_hash)
        return client.ip if client else ""
    def _ensure_client(
        self,
        ip: str,
        ua: str,
        lang: str,
        *,
        country: str = "",
    ) -> bytes:
        """Get or create a ``Client`` record; return its 6-byte hash."""
        h = _client_hash(ip, ua, lang)
        if h not in self.data.clients:
            self.data.clients[h] = Client(
                ip=ip,
                ua=ua,
                ua_pretty=_compact_user_agent(ua),
                lang=lang,
                country=country,
            )
            self._save()
        return h
    def enrich_client(
        self,
        client_hash: bytes,
        *,
        host: str = "",
        country: str = "",
        city: str = "",
    ) -> None:
        """Fill in host/geoip fields on a client record after async lookups."""
        client = self.data.clients.get(client_hash)
        if client is None:
            return
        changed = False
        if host and not client.host:
            client.host = host
            changed = True
        if country:
            client.country = country
            changed = True
        if city:
            client.city = city
            changed = True
        if changed:
            self._save()
    def _abuse_hit(
        self,
        client_hash: bytes,
        path: str,
        start: datetime | None = None,
        *,
        flag: bool = False,
        is_404: bool = False,
    ) -> None:
        """Append one abuse hit referencing a client by hash."""
        self.data.abuse.append(
            AbuseHit(
                start=start or datetime.now(UTC),
                path=path,
                client=client_hash,
                flag=flag,
                is_404=is_404,
            )
        )
    def classify_abuse(
        self,
        ip: str,
        client_hash: bytes,
        path: str,
        *,
        flag: bool = False,
        is_404: bool = False,
    ) -> None:
        """Classify an IP as a scanner/abuser and record the triggering hit.
        All earlier crawler hits from the same IP (persisted and pending)
        are moved to the abuse list — a random-UA scanner must not pollute
        the crawler stats of the legitimate bots it impersonates.
        """
        if ip not in self.data.abuse_ips:
            self.data.abuse_ips[ip] = True
            moved = [h for h in self.data.crawlers if self._client_ip(h.client) == ip]
            if moved:
                self.data.crawlers = [h for h in self.data.crawlers if self._client_ip(h.client) != ip]
                for h in moved:
                    self._abuse_hit(
                        h.client,
                        h.entry + (f"?{h.query}" if h.query else ""),
                        start=h.start,
                    )
            pending = [h for h in self.pending_crawlers if self._client_ip(h.client) == ip]
            if pending:
                self.pending_crawlers = [h for h in self.pending_crawlers if self._client_ip(h.client) != ip]
                for h in pending:
                    self._abuse_hit(
                        h.client,
                        h.entry + (f"?{h.query}" if h.query else ""),
                        start=h.start,
                    )
        self._abuse_hit(client_hash, path, flag=flag, is_404=is_404)
        self._save()
    def track_404(
        self,
        ip: str,
        ua: str,
        path: str,
        accept_language: str = "",
    ) -> bytes:
        """Record a 404 response for ``path`` (full path, query included).
        A telltale path (dot segment or *.php) classifies the IP as abuse
        immediately; enough plain 404s from one IP do too.  Hits from
        already-classified IPs go straight to the abuse list.
        Returns the client hash so callers can schedule async enrichment.
        """
        lang, country = _parse_accept_language(accept_language)
        client_hash = self._ensure_client(ip, ua, lang, country=country)
        if ip in self.data.abuse_ips:
            self._abuse_hit(client_hash, path, flag=_is_abuse_path(path), is_404=True)
            self._save()
            return client_hash
        if _is_abuse_path(path):
            self.classify_abuse(ip, client_hash, path, flag=True, is_404=True)
            return client_hash
        self.not_found_counts[ip] = self.not_found_counts.get(ip, 0) + 1
        if self.not_found_counts[ip] >= _ABUSE_404_THRESHOLD:
            self.classify_abuse(ip, client_hash, path, flag=True, is_404=True)
            return client_hash
        return client_hash
    def _new_visit(
        self,
        entry: str,
        referer: str,
        client_hash: bytes,
        utm: dict[str, str] | None = None,
    ) -> Visit:
        now = datetime.now(UTC)
        visit = Visit(
            start=now,
            entry=entry,
            referer=referer,
            client=client_hash,
            utm=utm or {},
        )
        self.data.visits.append(visit)
        self.sessions[client_hash] = len(self.data.visits) - 1
        self._count(self.data.site_visits, _bucket(now))
        self._count(self.data.views.setdefault(entry, {}), _bucket(now))
        self._count_transition(referer or "(direct)", entry, now)
        return visit
    def track_entry(
        self,
        referer: str,
        own_origin: str,
        ip: str,
        ua: str,
        full_path: str,
        accept_language: str = "",
    ) -> list[bytes]:
        """Stash the entry referer/UTM tags and queue a pending crawler hit.
        Nothing is counted here — the client's initial /_a ping starts the
        visit (only non-admin clients ping). Only a cross-origin https
        referer updates the table; an internal or absent referer leaves any
        stashed origin untouched.  UTM parameters are kept only when the
        landing URL actually carries them, so a subsequent parameter-less page
        does not erase an earlier tagged landing.
        Every document GET is also queued as a pending crawler hit.  If a ping
        from the same client arrives within ``_CRAWLER_TIMEOUT``, the hit is
        discarded; otherwise it is flushed to ``data.crawlers``.  The
        Accept-Language header is stored on the client record immediately;
        host/geoip are filled in later by async enrichment.
        GETs from IPs already classified as abuse are recorded as abuse hits
        with the full request path (query string included).
        Returns the client hashes of any hits flushed to persistent storage,
        so callers can schedule async enrichment.
        """
        entry = full_path.split("?")[0]
        query = full_path.split("?", 1)[1] if "?" in full_path else ""
        lang, country = _parse_accept_language(accept_language)
        client_hash = self._ensure_client(ip, ua, lang, country=country)
        if ip in self.data.abuse_ips:
            flushed = self._flush_crawlers()
            self._abuse_hit(client_hash, full_path, is_404=False, flag=False)
            self._save()
            return flushed
        now = datetime.now(UTC)
        flushed = self._flush_crawlers(now)
        if referer:
            origin = _origin(referer)
            if origin is not None and origin != own_origin:
                self.pending_referers[ip] = origin
        utms = _utm_tags(query)
        if utms:
            self.pending_utms[ip] = utms
        self.pending_crawlers.append(
            CrawlerHit(
                start=now,
                entry=entry,
                client=client_hash,
                referer=self.pending_referers.get(ip, ""),
                query=query,
            )
        )
        return flushed
    def _add_read(self, client_hash: bytes, path: str, seconds: int) -> None:
        """Add ``seconds`` of reading time for ``path`` to the current visit."""
        if seconds <= 0:
            return
        index = self.sessions.get(client_hash)
        if index is None or index >= len(self.data.visits):
            return
        visit = self.data.visits[index]
        visit.read[path] = visit.read.get(path, 0) + seconds
    def ping(
        self,
        from_: str,
        to: str | None,
        ip: str,
        ua: str,
        accept_language: str = "",
        hide: bool = False,
        read: int = 0,
    ) -> tuple[int | None, list[bytes]]:
        """Record a client navigation ping ({from, to, read} from pagerite.js).
        ``to`` is an internal path ("/...") or an https URL for exit links; a
        missing/empty ``to`` means the page is being closed and only the
        ``read`` time should be recorded. The transition is always counted when
        ``to`` is present; the trail only grows on first sight of a page within
        the visit. ``read`` is the active time (seconds) spent on ``from_``.
        A ping with no known session starts a fresh visit, consuming the
        referer and UTM tags stashed by the document GET if there are any.
        ``hide`` is set by admin clients: the ping cancels pending crawler
        hits as usual, and any existing visit for this client session is
        removed from the stats (the admin browsed anonymously before logging
        in).  Nothing new is recorded.
        Pings from IPs classified as abuse are ignored entirely.
        Returns the index of the new visit when one is created (or None) and
        the client hashes of any crawler hits flushed by this call, so callers
        can schedule async enrichment (host, geoip country/city).
        """
        flushed = self._flush_crawlers()
        lang, country = _parse_accept_language(accept_language)
        client_hash = _client_hash(ip, ua, lang)
        if hide:
            # Admin ping: cancel pending crawler hits and scrub the session.
            self.pending_crawlers = [
                hit for hit in self.pending_crawlers if hit.client == client_hash
            ]
            index = self.sessions.pop(client_hash, None)
            if index is not None and index < len(self.data.visits):
                self._remove_visit(index)
                self._save()
            return None, flushed
        if ip in self.data.abuse_ips:
            return None, flushed
        # A real visitor ping cancels any pending crawler hits from this client.
        self.pending_crawlers = [
            hit for hit in self.pending_crawlers if hit.client != client_hash
        ]
        fr_path = _internal_path(from_) if from_ else ""
        if fr_path and read > 0:
            self._add_read(client_hash, fr_path, read)
        if not to:
            if read > 0:
                self._save()
            return None, flushed
        if to.startswith("/") and not to.startswith("//"):
            target = _internal_path(to) or ""
        else:
            target = _external_target(to) or ""
        if not target:
            return None, flushed
        index = self.sessions.get(client_hash)
        fr = fr_path or "(direct)"
        if index is None or index >= len(self.data.visits):
            # No known session: the initial ping of a fresh page load (or
            # missing data after a server restart) — start a visit.
            index = len(self.data.visits)
            self._ensure_client(ip, ua, lang, country=country)
            self._new_visit(
                target,
                self.pending_referers.pop(ip, ""),
                client_hash,
                utm=self.pending_utms.pop(ip, {}),
            )
        else:
            visit = self.data.visits[index]
            now = datetime.now(UTC)
            if target.startswith("/"):
                self._count(self.data.views.setdefault(target, {}), _bucket(now))
            self._count_transition(fr, target, now)
            # First-seen only: repeat pages and repeated exits don't append.
            if visit.entry != target and target not in visit.trail:
                visit.trail.append(target)
        self._save()
        visit_index = index if index is not None and index < len(self.data.visits) else None
        return visit_index, flushed
@@ -12,22 +12,31 @@ walking the tree (``resolve``), moves are slot detach/attach
 (``find_slot``) with a fresh order key from the new siblings.
 """
 import asyncio
 import gzip
 import ipaddress
 import mimetypes
 import os
 import re
 import shutil
 import socket
 from collections.abc import AsyncIterator
 from contextlib import asynccontextmanager
 from datetime import UTC, datetime
 from email.utils import format_datetime
 from functools import lru_cache
 from pathlib import Path
 from urllib.parse import urlparse
 import blake3
 import msgspec
 from fastapi import FastAPI, HTTPException, Request, WebSocket, WebSocketDisconnect
 from fastapi.responses import HTMLResponse, RedirectResponse, Response
 from fastapi_vue import Frontend
 from kanta import Kanta
 from pydantic import BaseModel
-from pagerite import seed, views
+from pagerite import analytics, seed, views
 from pagerite.__main__ import DEVMODE
 from pagerite.data import (
    Data,
@@ -42,6 +51,104 @@ from pagerite.markdown import has_h1, render, toggle_task
 DB_PATH = os.getenv("PAGERITE_DB", "pagerite.kantadb")
 # Visit analytics go to their own JSON file, not the kanta database.
 ANALYTICS_PATH = Path(
    os.getenv("PAGERITE_ANALYTICS", DB_PATH.replace(".kantadb", "") + ".analytics.json")
 )
 analytics_store = analytics.Store(ANALYTICS_PATH)
 # Live WebSocket clients for the analytics stream.
 _analytics_ws_clients: set[WebSocket] = set()
 _analytics_broadcast_task: asyncio.Task | None = None
 # Repository root from this file's location (pagerite/app.py -> ..).
 _REPO_ROOT = Path(__file__).resolve().parent.parent
 def _geoip_db_path() -> Path | None:
    """Find a DB-IP MMDB in the repo root, preferring an already-decompressed
    ``.mmdb`` over the matching ``.mmdb.gz``.  Returns None if none is present.
    """
    mmdb = sorted(_REPO_ROOT.glob("dbip-*.mmdb"))
    if mmdb:
        return mmdb[0]
    gz = sorted(_REPO_ROOT.glob("dbip-*.mmdb.gz"))
    if gz:
        return gz[0]
    return None
 class GeoIP:
    """Lazy DB-IP MMDB reader.  Call ``_load()`` once at startup before
    concurrent requests arrive; ``country()`` is read-only and safe to call
    from ``asyncio.to_thread`` workers afterwards.
    """
    def __init__(self) -> None:
        self._reader: object | None = None
    def _decompress(self, source: Path, target: Path) -> None:
        if target.exists():
            return
        tmp = target.with_suffix(target.suffix + ".tmp")
        with gzip.open(source, "rb") as src, open(tmp, "wb") as dst:
            shutil.copyfileobj(src, dst)
        os.replace(tmp, target)
    def _load(self) -> None:
        if self._reader is not None:
            return
        source = _geoip_db_path()
        if source is None:
            return
        if source.suffix == ".gz":
            target = source.with_suffix("")
            self._decompress(source, target)
            source = target
        try:
            import maxminddb
            self._reader = maxminddb.open_database(str(source))
        except Exception:
            pass
    def country(self, ip: str) -> str:
        """Two-letter ISO country code for ``ip``, or "" when unavailable."""
        if not ip or self._reader is None:
            return ""
        try:
            rec = self._reader.get(ip)
            if rec:
                return (rec.get("country") or {}).get("iso_code", "")
        except Exception:
            pass
        return ""
    def city(self, ip: str) -> str:
        """City name for ``ip``, or "" when unavailable.
        GeoIP sometimes appends district names in parentheses (e.g.
        "Berlin (Bezirk Tempelhof-Schöneberg)"); those are stripped before
        the value is stored.
        """
        if not ip or self._reader is None:
            return ""
        try:
            rec = self._reader.get(ip)
            if rec:
                city = (rec.get("city") or {}).get("names", {}).get("en", "")
                if city:
                    city = re.sub(r"\s*\([^)]*\)", "", city).strip()
                return city
        except Exception:
            pass
        return ""
 _geoip = GeoIP()
 # Our own data root; kanta edits it in place, reads are plain attribute access.
 data = Data()
 kanta = Kanta(DB_PATH, data)
@@ -120,25 +227,37 @@ def _migrate_legacy() -> None:
        data.version += 1
@kanta.bootstrap
 def _seed(data: Data) -> None:
    """Write the demo pages on database creation (never on existing dbs)."""
    for path in seed.PAGES:
        title, markdown, files, banner, order, design = seed.PAGES[path]
        for orig, body in files.items():
            markdown, banner = _store_seed_file(markdown, banner, orig, body)
        node = _ensure(data.menu, path)
        node.title = title
        # Empty markdown means a pure category label (e.g. "showcase",
        # seeded only to carry a banner design): leave content as None so
        # the node renders the placeholder and nav points at its children.
        if markdown:
            node.content = markdown
        node.banner = banner
        node.banner_design = design
        node.order = order
@asynccontextmanager
 async def lifespan(_app: FastAPI) -> AsyncIterator[None]:
-    """Open the database, migrate/seed content, load assets."""
+    """Open the database, migrate legacy content, load assets, load GeoIP."""
    await kanta.open()
    _migrate_legacy()
    missing = [p for p in seed.PAGES if resolve(data.menu, p) is None]
    if missing:
        with kanta.transaction("seed missing pages"):
            for path in missing:
                title, markdown, files, banner, order = seed.PAGES[path]
                for orig, body in files.items():
                    markdown, banner = _store_seed_file(markdown, banner, orig, body)
                node = _ensure(data.menu, path)
                node.title = title
                node.content = markdown
                node.banner = banner
                node.order = order
    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)
    yield
    analytics_store.unsubscribe(_schedule_analytics_broadcast)
    await kanta.close()
@@ -154,6 +273,14 @@ app = FastAPI(
 )
@app.middleware("http")
 async def _headers(request: Request, call_next) -> Response:
    """Replace uvicorn's default Server header with ours (no version)."""
    response = await call_next(request)
    response.headers["server"] = "pagerite"
    return response
 class PageIn(BaseModel):
    """Payload for creating or replacing a page."""
@@ -273,9 +400,18 @@ async def update_structure(op: StructureOp) -> None:
@app.get("/_api/settings")
-async def get_settings() -> dict[str, str]:
+async def get_settings() -> dict:
-    """Site-wide settings (brand, theme and custom CSS)."""
+    """Site-wide settings (brand, theme, custom CSS and favicon URL), plus
-    return {"brand": data.brand, "theme": data.theme, "custom_css": data.custom_css}
+    the themes and banner designs 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(),
        "banner_designs": views._banner_design_names(),
    }
 class SettingsIn(BaseModel):
@@ -284,6 +420,7 @@ class SettingsIn(BaseModel):
    brand: str
    theme: str
    custom_css: str
    brand_html: str = ""
@app.put("/_api/settings", status_code=204)
@@ -291,11 +428,42 @@ async def put_settings(settings: SettingsIn) -> None:
    """Update site-wide settings; bumps the version so ETags invalidate."""
    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
@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
    prefix + extension, and 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"))
    with kanta.transaction("upload favicon"):
        data.files[stored] = body
        data.favicon = stored
        data.version += 1
    return {"path": f"/_f/{stored}"}
@app.delete("/_api/settings/favicon", status_code=204)
 async def delete_favicon() -> None:
    """Clear the custom favicon (back to the build's /favicon.ico).
    The blob stays in the content-addressed store; only the reference goes.
    """
    with kanta.transaction("clear favicon"):
        data.favicon = ""
        data.version += 1
 class ToggleTaskIn(BaseModel):
    """Payload for toggling one task-list checkbox."""
@@ -362,6 +530,40 @@ async def delete_file(name: str) -> None:
        data.version += 1
@app.get("/_themes/{name}/{filename}")
 async def theme_file(name: str, filename: str, request: Request) -> Response:
    """Serve a theme/banner-design file from pagerite/themes/{name}/.
    Stylesheets plus any extra assets the CSS references (like summer's
    grass.svg). Read from disk on every request (etag by mtime+size):
    theme files are never built or content-hashed, so edits on disk show
    on the next page load, in prod as well as dev.
    """
    if (
        "/" 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)
    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"
    return Response(
        path.read_bytes(),
        media_type=mime,
        headers={"etag": etag, "cache-control": "no-cache"},
    )
@app.get("/_f/{name}")
 async def stored_file(name: str, request: Request) -> Response:
    """Serve a file from the content-addressed store (immutable: the name
@@ -404,6 +606,188 @@ async def delete_page(path: str) -> None:
 _SLUG_RE = re.compile(r"^[a-z0-9][a-z0-9_-]*$")
 def _client_ip(request: Request) -> 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()
    return forwarded or (request.client.host if request.client else "")
 def _query_suffix(request: Request) -> str:
    """The request's query string as a "?..." suffix, or "" when absent."""
    query = str(request.url.query)
    return f"?{query}" if query else ""
@lru_cache(maxsize=4096)
 def _cached_ptr(ip: str) -> str:
    """Reverse-DNS lookup with in-RAM LRU cache.  Returns the host name or ""."""
    if not ip:
        return ""
    try:
        addr = ipaddress.ip_address(ip)
    except ValueError:
        return ""
    if addr.is_private or addr.is_loopback or addr.is_reserved or addr.is_multicast or addr.is_link_local:
        return ""
    try:
        host, _, _ = socket.gethostbyaddr(ip)
    except socket.herror:
        return ""
    return host
 async def _lookup_host(ip: str) -> str:
    """Async wrapper around ``_cached_ptr``; runs the blocking lookup in a thread."""
    return await asyncio.to_thread(_cached_ptr, ip)
 async def _geoip_country(ip: str) -> str:
    """Async wrapper around the DB-IP MMDB lookup."""
    return await asyncio.to_thread(_geoip.country, ip)
 async def _geoip_city(ip: str) -> str:
    """Async wrapper around the DB-IP MMDB city lookup."""
    return await asyncio.to_thread(_geoip.city, ip)
 async def _enrich_client(client_hash: bytes) -> None:
    """Run non-blocking reverse-DNS and geoip enrichment for a client."""
    client = analytics_store.data.clients.get(client_hash)
    if not client or not client.ip:
        return
    host = await _lookup_host(client.ip)
    country = await _geoip_country(client.ip)
    city = await _geoip_city(client.ip)
    analytics_store.enrich_client(client_hash, host=host, country=country, city=city)
 def _schedule_client_enrichment(client_hashes: list[bytes]) -> None:
    """Start background host/geoip enrichment for the given client hashes."""
    for client_hash in client_hashes:
        asyncio.create_task(_enrich_client(client_hash))
 async def _broadcast_analytics() -> None:
    """Send the current analytics snapshot to every connected WS client."""
    if not _analytics_ws_clients:
        return
    payload = msgspec.json.encode(analytics_store.data).decode()
    closed = set()
    for ws in _analytics_ws_clients:
        try:
            await ws.send_text(payload)
        except Exception:
            closed.add(ws)
    for ws in closed:
        _analytics_ws_clients.discard(ws)
 async def _debounced_analytics_broadcast() -> None:
    """Wait briefly, then broadcast the latest snapshot once."""
    await asyncio.sleep(0.2)
    await _broadcast_analytics()
 def _schedule_analytics_broadcast() -> None:
    """Schedule a single debounced broadcast, ignoring duplicate triggers."""
    global _analytics_broadcast_task
    if _analytics_broadcast_task is not None and not _analytics_broadcast_task.done():
        return
    _analytics_broadcast_task = asyncio.get_running_loop().create_task(
        _debounced_analytics_broadcast()
    )
 class AnalyticsPing(BaseModel):
    """Navigation ping from pagerite.js (see docs/analytics.md)."""
    fr: str = ""
    to: str | None = None
    #: 1 from admin clients: scrub the session instead of recording it.
    hide: int = 0
    #: Active reading time on ``fr`` (ms), if any.
    read: int = 0
@app.get("/_a", response_model=None)
 async def analytics_page(request: Request) -> HTMLResponse:
    """Render the analytics viewer as a normal site page at /_a.
    The page itself is public, but the data stream (/_api/ws/analytics) stays
    admin-gated like the rest of /_api, so only authorized users see the
    statistics; others get the viewer with a "could not be loaded" message.
    """
    return HTMLResponse(
        views.render_analytics(
            data.menu, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html
        ),
        headers={"cache-control": "no-cache"},
    )
@app.post("/_a", status_code=204)
 async def analytics_ping(ping: AnalyticsPing, request: Request) -> None:
    """Record a navigation ping ({fr, to}); fire-and-forget, never fails.
    The reverse-DNS and DB-IP geoip lookups happen in a background task so
    the response is never delayed by slow DNS or the first MMDB decompress.
    """
    ip = _client_ip(request)
    visit_index, flushed_clients = analytics_store.ping(
        ping.fr,
        ping.to,
        ip,
        request.headers.get("user-agent", ""),
        request.headers.get("accept-language", ""),
        hide=bool(ping.hide),
        read=ping.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)
 def _track_entry(path: str, request: Request) -> 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
    visit, so bots never register as visits.  (Admin clients ping too, but
    with hide=1, which scrubs their session instead of recording it.)
    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
    logged as a crawler hit.  The root-path and localhost checks prevent
    remote visitors from hiding traffic with the same query string.
    Returns the client hashes of any pending crawler hits flushed to persistent
    storage, so callers can schedule async geoip and reverse-DNS enrichment.
    """
    if (
        path == ""
        and str(request.url.query) == "from=devserver.py"
        and _client_ip(request) == "127.0.0.1"
    ):
        return []
    own_origin = 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", ""),
        own_origin,
        _client_ip(request),
        request.headers.get("user-agent", ""),
        full_path,
        request.headers.get("accept-language", ""),
    )
 def _http_date(dt: datetime) -> str:
    """RFC 7231 date for the Last-Modified header."""
    return format_datetime(dt.astimezone(UTC), usegmt=True)
 def _is_reserved(path: str) -> bool:
    """Slug shape that content may never use: each segment must be lower-case
    ASCII letters, digits, hyphens and underscores (underscores may not be
@@ -414,6 +798,15 @@ def _is_reserved(path: str) -> bool:
    return any(not _SLUG_RE.match(seg) for seg in path.split("/"))
 def _is_trackable_path(path: str) -> bool:
    """Content URLs only: skip auth endpoints and reserved/machinery paths."""
    if not path:
        return True
    if path == "auth" or path.startswith("auth/"):
        return False
    return not _is_reserved(path)
 def _check_reserved(path: str) -> None:
    """Reject paths that do not follow the slug charset."""
    if _is_reserved(path):
@@ -423,6 +816,25 @@ def _check_reserved(path: str) -> None:
        )
@app.websocket("/_api/ws/analytics")
 async def analytics_websocket(ws: WebSocket) -> None:
    """Stream the analytics snapshot, then push updates as they happen.
    Admin-only via the /_api forward-auth gate, like every management
    endpoint. Powers the analytics viewer rendered at /_a.
    """
    await ws.accept()
    await ws.send_text(msgspec.json.encode(analytics_store.data).decode())
    _analytics_ws_clients.add(ws)
    try:
        while True:
            await ws.receive_text()
    except Exception:
        pass
    finally:
        _analytics_ws_clients.discard(ws)
@app.websocket("/_api/ws/editor")
 async def editor_ws(ws: WebSocket) -> None:
    """Editor session: open pages, render previews, save — over one socket.
@@ -430,12 +842,12 @@ async def editor_ws(ws: WebSocket) -> None:
    Stateless protocol (each message carries the path):
      <- {"type": "open", "path"}
      -> {"type": "doc", "path", "exists", "title", "markdown", "published",
-          "banner"}
+          "banner", "banner_design"}
      <- {"type": "render", "path", "markdown"}
      -> {"type": "html", "path", "html"}
      <- {"type": "save", "path", "title"?, "markdown"?, "published"?,
-          "banner"?, "move_from"?}   (absent fields keep their old values;
+          "banner"?, "banner_design"?, "move_from"?}   (absent fields keep
-          move_from: rename/move a page, subtree included)
+          their old values; move_from: rename/move a page, subtree included)
      -> {"type": "saved", "path"} | {"type": "error", "detail"}
    """
    await ws.accept()
@@ -460,17 +872,40 @@ async def editor_ws(ws: WebSocket) -> None:
                        "markdown": node.content if node and node.content is not None else "",
                        "published": node.published if node else True,
                        "banner": node.banner if node else "",
                        # Own banner design setting: null = inherit,
                        # "" = none, otherwise a design name.
                        "banner_design": node.banner_design if node else None,
                        # Which node's banner applies here ("" = front page,
                        # null = default artwork); the site editor shows it
                        # as the banner field's placeholder.
                        "banner_from": views.banner_source(data.menu, path),
                        # Which node's banner-design setting would apply on
                        # inherit ("" = front page, null = the active
                        # theme's default) and what design that resolves to.
                        "banner_design_from": (
                            src := views.banner_design_source(
                                data.menu, path, data.theme
                            )
                        ),
                        "banner_design_inherited": (
                            views.banner_design(data.menu, src, data.theme)
                            if src is not None
                            else views.theme_banner_design(data.theme)
                        ),
                    })
                case "render":
                    markdown = msg.get("markdown", "")
                    chain = resolve(data.menu, path)
                    node = chain[-1] if chain else None
                    await ws.send_json({
                        "type": "html",
                        "path": path,
-                        "html": render(markdown, path),
+                        "html": render(
                            markdown,
                            path,
                            node.created if node else None,
                            node.modified if node else None,
                        ),
                        "has_h1": has_h1(markdown),
                    })
                case "save":
@@ -536,6 +971,8 @@ async def editor_ws(ws: WebSocket) -> None:
                            node.published = bool(msg["published"])
                        if "banner" in msg:
                            node.banner = msg["banner"]
                        if "banner_design" in msg:
                            node.banner_design = msg["banner_design"]
                        node.modified = datetime.now(UTC)
                        data.version += 1
                    await ws.send_json({"type": "saved", "path": path})
@@ -562,30 +999,72 @@ async def show_page(request: Request, path: str) -> HTMLResponse | Response:
    placeholder page (nav links point straight at its first child).
    """
    path = path.strip("/")
    ua = request.headers.get("user-agent", "")
    accept_language = request.headers.get("accept-language", "")
    if path and _is_reserved(path):
        # Invalid slug shape: not a content URL, let FastAPI return its
        # built-in 404 instead of rendering an editable article page.
        # Scanner telltales (dotpaths like /.env, *.php) classify the IP
        # as abuse in analytics.
        client_hash = analytics_store.track_404(
            _client_ip(request),
            ua,
            f"/{path}{_query_suffix(request)}",
            accept_language,
        )
        asyncio.create_task(_enrich_client(client_hash))
        raise HTTPException(404)
    chain = resolve(data.menu, path)
    node = chain[-1] if chain else None
    if node is not None and node.published and node.content is not None:
-        # ETag on content + render version; clients revalidate cheaply,
+        # no-cache forbids serving a stored page without revalidation
-        # which keeps prefetched pages warm and current.
+        # (browsers would otherwise cache heuristically and serve stale
        # pages, e.g. after a theme change). In-session speed instead comes
        # 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}"'
        if request.headers.get("if-none-match") == etag:
            return Response(status_code=304)
        if _is_trackable_path(path):
            flushed = _track_entry(path, request)
            _schedule_client_enrichment(flushed)
        return HTMLResponse(
-            views.render_page(data.menu, path, data.brand, data.custom_css, data.theme),
+            views.render_page(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html, str(request.base_url).rstrip("/")),
-            headers={"etag": etag},
+            headers={
                "etag": etag,
                "last-modified": _http_date(node.modified),
                "cache-control": "no-cache",
            },
        )
    if node is not None and node.published and node.content is None:
        # Category label without a landing page: placeholder with the pen
        # to create it (404 — no page here, but the node is real).
-        return HTMLResponse(views.render_category(data.menu, path, data.brand, data.custom_css, data.theme), 404)
+        if _is_trackable_path(path):
            flushed = _track_entry(path, request)
            _schedule_client_enrichment(flushed)
        return HTMLResponse(
            views.render_category(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html),
            404,
            headers={
                "last-modified": _http_date(node.modified),
                "cache-control": "no-cache",
            },
        )
    if node is None and not path:
        # No front page (no top-level node with slug ""): "/" opens the
        # first item of the navigation instead.
        for slug, item in sorted_nodes(data.menu):
            if item.published:
                return RedirectResponse(f"/{slug}")
-    return HTMLResponse(views.render_not_found(data.menu, path, data.brand, data.custom_css, data.theme), 404)
+    if _is_trackable_path(path):
        client_hash = analytics_store.track_404(
            _client_ip(request),
            ua,
            f"/{path}{_query_suffix(request)}",
            accept_language,
        )
        asyncio.create_task(_enrich_client(client_hash))
        flushed = _track_entry(path, request)
        _schedule_client_enrichment(flushed)
    return HTMLResponse(views.render_not_found(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html), 404)
@@ -31,9 +31,15 @@ class Node(msgspec.Struct, omit_defaults=True):
    #: Markdown source of the node's page; None = pure category label
    #: (its URL renders a placeholder page).
    content: str | None = None
-    #: Raw HTML for the header banner (img, styled div, canvas+script...).
+    #: Raw HTML for the header banner (img, styled div, canvas+script...),
    #: rendered after the banner design's artwork so author code always
    #: wins over the design's own styles.
    #: Empty inherits the nearest ancestor's banner, front page last.
    banner: str = ""
    #: Banner design: a theme folder name (its banner.css/banner.svg),
    #: "" = explicitly no design, None = inherit (nearest ancestor, front
    #: page last, then the active theme's own design).
    banner_design: str | None = None
    published: bool = True
    children: dict[str, "Node"] = {}
    created: datetime = msgspec.field(
@@ -79,13 +85,21 @@ class Data(msgspec.Struct):
    #: 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"
    #: Raw trusted HTML replacing the brand link entirely (a logo image,
    #: styled markup, canvas+script...), site-wide — not per-page
    #: overridable like banners. Rendered in the header on top of the
    #: banner artwork, next to the nav. Empty = the plain brand link.
    brand_html: str = ""
    #: Active theme name (empty = none/base only). Themes live in
-    #: frontend/src/assets/themes/{theme}/theme.css, with their banner
+    #: pagerite/themes/{theme}/ (theme.css and/or banner.css/banner.svg/
-    #: artwork at pagerite/themes/{theme}/banner.svg (inlined server-side).
+    #: banner.html), served by the backend from disk.
    theme: str = "purple"
    #: Raw site-wide custom CSS, injected inline in every page <head>.
    #: Trusted author content; not sanitized.
    custom_css: str = ""
    #: Favicon: name of a file in `files` (content-addressed), linked as
    #: <link rel="icon"> on every page. Empty = the build's /favicon.ico.
    favicon: str = ""
    #: Legacy flat page store (pre-tree databases); migrated into `menu`
    #: on startup, then cleared. Never written otherwise.
    pages: dict[str, Page] = {}
@@ -2,25 +2,42 @@
 Raw HTML (including inline scripts) is passed through unfiltered: the
 single author is trusted. Extensions: tables and strikethrough (from the
-"default" preset), footnotes, definition lists, task lists and
+"default" preset), footnotes, definition lists, task lists,
 brace-attributes (`{.class width=300}` on any element, images in
-particular).
+particular) and admonitions (``!!! note Title`` with an indented body —
 note/tip/warning/etc., the title optional). Bare URLs autolink (GFM), with
 the ``https://`` scheme hidden in the link text (``http://`` and other
 schemes stay visible; manually labelled links are untouched), and
 ``H~2~O`` / ``x^2^`` give sub/superscripts.
 markdown-it's typographer is enabled, so body text gets SmartyPants-style
 replacements: straight quotes become curly, ``--`` / ``---`` become en / em
 dashes, ``...`` becomes an ellipsis, ``(c)`` becomes ©, and so on. Single
 line breaks inside paragraphs become ``<br>`` (``breaks: True``). Code
 spans/blocks and raw HTML are left untouched.
 Images get special treatment: a relative `src` is resolved against the
 page's own path (so `![alt](photo.avif)` in `/docs/design` is served from
-`/docs/design/photo.avif`), and an image with a title becomes a
+`/docs/design/photo.avif`), and an image standing alone in its paragraph
-`<figure>` with `<figcaption>`. Positioning is done with attribute
+becomes a block `<figure>` — with `<figcaption>` when it has a title.
 Images inline with other content stay plain inline `<img>`, as does raw
 `<img>` HTML written by the author. Positioning is done with attribute
 classes, e.g. `![alt](photo.avif "Caption"){.right}`.
 """
 import re
 from datetime import datetime, timedelta
 from markdown_it import MarkdownIt
 from markdown_it.common.utils import escapeHtml
 from markdown_it.renderer import RendererHTML
 from mdit_py_plugins.admon import admon_plugin
 from mdit_py_plugins.attrs import attrs_plugin
 from mdit_py_plugins.deflist import deflist_plugin
 from mdit_py_plugins.footnote import footnote_plugin
 from mdit_py_plugins.gfm_autolink import gfm_autolink_plugin
 from mdit_py_plugins.subscript import sub_plugin
 from mdit_py_plugins.superscript import superscript_plugin
 from mdit_py_plugins.tasklists import tasklists_plugin
 from pygments import highlight
 from pygments.formatters import HtmlFormatter
@@ -63,16 +80,22 @@ def _image_rule(
        token.attrs["src"] = f"/{page}/{src}" if page else f"/{src}"
    token.attrs["alt"] = self.renderInlineAsText(token.children, options, env)
    img = self.renderToken(tokens, idx, options, env)
-    if title := token.attrs.get("title"):
+    if len(tokens) == 1:
-        return f"<figure>{img}<figcaption>{escapeHtml(title)}</figcaption></figure>"
+        # The only inline content of its paragraph: render as a block
        # figure, captioned when titled. (The <p> wrapper is dropped by
        # _unwrap_lone_figures below.)
        title = token.attrs.get("title")
        caption = f"<figcaption>{escapeHtml(title)}</figcaption>" if title else ""
        return f"<figure>{img}{caption}</figure>"
    # Inline with other content: a plain inline image.
    return img
 def _unwrap_lone_figures(state) -> None:
-    """Drop the <p> wrapper around a lone titled image.
+    """Drop the <p> wrapper around a lone image.
    markdown-it wraps inline content in a paragraph, but our image rule
-    turns titled images into <figure> — a block element that is invalid
+    turns lone images into <figure> — a block element that is invalid
    inside <p>. Browsers hoist it out, leaving an empty paragraph whose
    margins disturb the layout.
    """
@@ -81,7 +104,7 @@ def _unwrap_lone_figures(state) -> None:
        if token.type != "inline" or not token.children:
            continue
        [child] = token.children if len(token.children) == 1 else [None]
-        if child and child.type == "image" and child.attrs.get("title"):
+        if child and child.type == "image":
            if (tokens[i - 1].type == "paragraph_open"
                    and tokens[i + 1].type == "paragraph_close"):
                tokens[i - 1].hidden = True
@@ -109,21 +132,75 @@ def _tag_task_checkboxes(state) -> None:
                index += 1
 def _shorten_autolinks(state) -> None:
    """Hide the https:// scheme in the text of bare autolinked URLs.
    GFM linkify sets the link text to the URL itself; only those links
    (markup "autolink") are shortened. http:// and other schemes stay
    visible, and manually labelled links keep whatever label was written.
    """
    for token in state.tokens:
        if token.type != "inline" or not token.children:
            continue
        for i, child in enumerate(token.children):
            if child.type == "link_open" and child.markup == "autolink":
                text = token.children[i + 1]
                if text.type == "text" and text.content.startswith("https://"):
                    text.content = text.content.removeprefix("https://")
 md = (
-    MarkdownIt("default", {"html": True, "highlight": _highlight})
+    MarkdownIt(
        "default",
        {
            "html": True,
            "highlight": _highlight,
            "typographer": True,
            "breaks": True,
        },
    )
    .use(attrs_plugin)
    .use(admon_plugin)
    .use(footnote_plugin)
    .use(deflist_plugin)
    .use(tasklists_plugin, enabled=True)
    .use(gfm_autolink_plugin)
    .use(sub_plugin)
    .use(superscript_plugin)
 )
 md.add_render_rule("image", _image_rule)
 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)
-def render(text: str, page_path: str = "") -> str:
+def render(
-    """Render Markdown text to an HTML string."""
+    text: str,
-    return md.render(text, {"page_path": page_path})
+    page_path: str = "",
    created: datetime | None = None,
    modified: datetime | None = None,
 ) -> str:
    """Render Markdown text to an HTML string.
    A ``{dates}`` line expands to the article's published/updated dateline
    (needs ``created``/``modified``; left as-is in contexts without them,
    e.g. the editor preview). Position is the author's choice — typically
    right after the article's h1.
    """
    html = md.render(text, {"page_path": page_path})
    if created is not None and "<p>{dates}</p>" in html:
        html = html.replace("<p>{dates}</p>", _dateline(created, modified))
    return html
 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
    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):
        out += f' – edited <time datetime="{modified.isoformat()}">{modified.day} {modified:%b %Y}</time>'
    return f'<p class="dateline">{out}</p>'
 def has_h1(text: str) -> bool:
@@ -1,385 +1,365 @@
-"""Seed content written to the database on first run (when it is empty).
+"""Seed content written to the database on first creation only
 (``@kanta.bootstrap`` in ``app.py``).
-Demonstrates the formatting options: images attached to pages and served
+A "welcome to your new site" starter: a structured docs section (three
-from the page path, figures with captions, attribute classes for
+menu levels deep) covering editing and the full Markdown feature set —
-positioning, footnotes, definition lists, task lists, tables and raw HTML.
+each feature shown as its Markdown source in a code block followed by
 the rendered result — and a showcase section with image positioning,
 long-form layout and a simple custom banner.
 Binary seed images live in ``seed-assets/`` (public domain, from
 Wikimedia Commons: the two whale engravings are Augustus Burnham
 Shute's illustrations for an 1892 edition of Moby-Dick; the wave is
 Hokusai's "The Great Wave off Kanagawa").
 """
 from pathlib import Path
 ASSETS = Path(__file__).with_name("seed-assets")
 def _asset(name: str) -> bytes:
    return (ASSETS / name).read_bytes()
 WELCOME = """\
-Welcome to your new **Pagerite** site. Pages are written in Markdown —
+Welcome to your new **Pagerite** site. Everything you see is a page written in Markdown, served from a pretty URL, and editable right here in the browser.
 including raw HTML — and served from pretty URLs.
-Have a look around:
+Where to go next:
- The [docs](/docs) section explains [how to write content](/docs/editing),
+- The [docs](/docs/editing) section explains how to edit this site and shows every supported Markdown feature, source and result side by side.
-  including images and positioning.
+- The [showcase](/showcase/gallery) section shows what finished pages can look like: image positioning, banners, a long read.
- [The Long Read](/blog/the-long-read) demonstrates a longer article with
+- Click the 🖊️ pen on any page to open the editor, and the ⚙️ pen for site settings and the structure tree.
-  scroll effects.
+- 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.
 - The [about](/about) page shows off assorted formatting.
-![Abstract waves](waves.svg "Generated SVG artwork, attached to this page")
+![Abstract waves](waves.svg "Generated SVG artwork, attached to this page"){width=420}
 *Delete or rewrite any of these pages — they are only here to get you started.*
 """
-ABOUT = """\
+EDITING = """\
-This site runs on **Pagerite**: FastAPI + html5tagger + kanta, with content
+Everything on the site is editable in place. Log in, and pens appear: 🖊️ on the page and banner, ⚙️ in the banner corner for site settings.
 written in Markdown.
-Some formatting samples:
+## The editor
- [x] Write content in Markdown
+The 🖊️ pens open a tabbed editor over the page you are viewing:
 - [x] Attach images to pages
 - [ ] Add editing UI
-Term
+- **Article** — the page's title and Markdown, with a live preview. The format bar inserts the harder-to-remember syntax (links, tables, images); Ctrl/Cmd-B, I and S do what you expect. Saving is explicit: 💾 or Ctrl+S.
-: A definition list entry, rendered by the deflist plugin.
+- **Banner** — per-page banner HTML and a banner design picker. Banners are raw HTML (an image, a styled div, a canvas with a script) and subpages inherit the nearest banner up their path.
 - **Site** — brand, theme, fonts, favicon and custom CSS, all applied immediately.
 - **Structure** — the page tree. Drag rows to reorder or nest, rename titles and slugs inline, ➕ adds a page, ✕ deletes one.
-And a table:
+## URLs and structure
 The URL is the structure: a page at `docs/markdown/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.
 Images and files uploaded anywhere land in a content-addressed store served from `/_f/{hash}.ext`, so links survive page moves. The article editor's format bar and copy-paste both upload images for you.
 {dates}
 """
 MD_BASICS = """\
 # Markdown Basics
 Every feature below is shown twice: first the Markdown source, then how it renders.
 ## Headings and text
 ```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:
 [![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.
 ```
 ## A section heading
 ### 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
 ```markdown
 - One
 - Two
  - Nested
 1. First
 2. Second
 > A blockquote. The URL space is the author's:
 > pretty slugs at the root, nesting only where
 > the content is genuinely structured.
 ```
 - One
 - Two
  - Nested
 1. First
 2. Second
 > A blockquote. The URL space is the author's:
 > pretty slugs at the root, nesting only where
 > the content is genuinely structured.
 ## Code
 Fenced blocks get server-side syntax highlighting:
 ````markdown
 ```python
 def greet(name: str) -> str:
    return f"Hello, {name}!"
 ```
 ````
 ```python
 def greet(name: str) -> str:
    return f"Hello, {name}!"
 ```
 ## Tables
 ```markdown
 | Feature | Status |
 |---------|--------|
 | Pages   | done   |
 | Images  | done   |
 ```
 | Feature | Status |
 |---------|--------|
 | Pages   | done   |
 | Images  | done   |
-| Comments| later  |
+"""
-Footnotes work too.[^1]
+MD_EXTENSIONS = """\
 # Markdown Extensions
 Markdown extensions enabled on this site, source first, then rendered.
 ## Footnotes
 ```markdown
 Footnotes work inline.[^1]
 [^1]: Rendered at the bottom of the page, with a back-reference.
 ```
 Footnotes work inline.[^1]
 [^1]: Rendered at the bottom of the page, with a back-reference.
 ## Definition lists
 ```markdown
 Term
 : A definition list entry.
 Another term
 : With its definition.
 ```
 Term
 : A definition list entry.
 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
 H~2~O and x^2^ + y^2^ = z^2^.
 ```
 H~2~O and x^2^ + y^2^ = z^2^.
 ## Raw HTML
 HTML passes through untouched — useful for `<kbd>` keys, `<details>` sections, embedded media:
 ```html
 <details><summary>Click to expand</summary>Hidden content.</details>
 ```
 <details><summary>Click to expand</summary>Hidden content.</details>
 ## Smart typography
 The typographer is on, so straight quotes become curly, `--` becomes -- and `...` becomes ...
 """
-EDITING = """\
+MD_LAYOUT = """\
-Pages are written in Markdown with extensions. Everything below is plain
+## Images and figures
 Markdown source — no special support from the article is needed for the
 site's layout or scroll effects.
-## Images
+An image standing alone in its paragraph becomes a `<figure>`; its title becomes the caption. Inline images within text stay plain.
-Upload a file (`PUT /_api/files/{filename}`) and it lands in the
+```markdown
-content-addressed store, served immutable from `/_f/{hash}.ext` — an
+![Abstract shapes](shapes.svg "A captioned figure")
 absolute URL that survives page moves:
 ```
 ![Abstract shapes](/_f/....svg "A captioned figure"){.right width=280}
 ```
-![Abstract shapes](shapes.svg "A captioned figure, floated right with an attribute class"){.right width=280}
+![Abstract shapes](shapes.svg "A captioned figure")
-The title becomes a `<figcaption>`, and brace attributes (the attrs
+## Positioning with attributes
 plugin) control positioning: `{.right}`, `{.left}`, `{.wide}`, plus plain
 attributes like `width=280`. Absolute and external URLs pass through
 unchanged.
-## Text
+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.
-*Emphasis*, **strong**, ~~strikethrough~~, `inline code`, and
+```markdown
-[links](/about) as usual. Blockquotes:
+![Abstract shapes](shapes.svg "Floated right"){.right width=280}
 > The URL space is the author's. Pretty slugs at the root, nesting only
 > where the content is genuinely structured.
 ## Code
 ```python
 def render(text: str, page_path: str) -> str:
    return md.render(text, {"page_path": page_path})
 ```
 ![Abstract shapes](shapes.svg "Floated right — text wraps around it"){.right width=280}
 Floated images let the text wrap around them, like this paragraph does. Relative image paths resolve against the page's own path, so attached files travel with the page. Uploaded files get content-addressed `/_f/` URLs that never break, no matter where the page moves.
 {.wide} artwork spans the full content width:
 ```markdown
 ![Dunes](dunes.svg "Full-width artwork"){.wide}
 ```
 ![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.
 """
-LONG_READ = """\
+GALLERY = """\
-*An essay long enough to scroll, to demonstrate the gentle reveal of
+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).
 headings, figures and code blocks as they enter the viewport.*
-![Layered dunes](dunes.svg "Full-width artwork between sections"){.wide}
+![The Great Wave off Kanagawa](great-wave.jpg "Hokusai, c. 1831 — full-bleed with {.wide}"){.wide}
-## Chapter one
+A wide image escapes the text column for emphasis between sections. No HTML needed — just Markdown and an attribute.
-The distinction between a blog and a website is largely an accident of
+![Shapes](shapes.svg "Floated left with {.left}"){.left width=240}
 history. Early content management systems filed everything under "posts",
 stamped them with a date, and arranged them in reverse chronological order
 under a `/blog/` prefix. Anything else was a "page", which lived somewhere
 else entirely, often in a separate editing interface with separate rules.
-But readers do not think in these terms. A reader follows a link, reads
+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.
 what is there, and follows another link. The URL is a promise about where
 something lives, not about which database table it came from. Pagerite
 therefore treats every piece of content as a page: named, addressable, and
 rendered on the fly.
-## Chapter two
+![Abstract waves](waves.svg "Floated right with {.right}"){.right width=240}
-Consider what happens to URLs when the tooling leads the design. You get
+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.
 addresses like `/cms/frontpage` or `/blog/post1` — the name of the machine
 leaking into the name of the thing. The slug should be chosen by the
 author, the way a book's title is chosen, and it should sit at the root of
 the site like the title sits on the cover.
 Nesting still has its place. Structured content — documentation, a series,
 a portfolio — benefits from paths that mirror the structure. The
 navigation on this very site is derived from the paths: open a section,
 and you see what it contains. No menu editor, no duplication of structure
 in two places.
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
 velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
 cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
 est laborum.
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
 doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
 inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
 Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
 fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
 sequi nesciunt.
 ## Chapter three
 On the reading experience itself: motion on the web is usually either
 absent or obnoxious. The interesting middle ground is motion that
 acknowledges the reader's own movement — the scroll. Elements that fade
 in as they enter the viewport give the page a sense of depth, as if the
 content were arriving just in time.
 Crucially, none of this may depend on the article. The author writes
 Markdown; the effects come from the layout. And when the reader prefers
 reduced motion, everything must hold still.
 Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
 consectetur, adipisci velit, sed quia non numquam eius modi tempora
 incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad
 minima veniam, quis nostrum exercitationem ullam corporis suscipit
 laboriosam, nisi ut aliquid ex ea commodi consequatur?
 ```text
 Quis autem vel eum iure reprehenderit
 qui in ea voluptate velit esse quam nihil
 molestiae consequatur, vel illum qui
 dolorem eum fugiat quo voluptas nulla pariatur?
 ```
 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
 praesentium voluptatum deleniti atque corrupti quos dolores et quas
 molestias excepturi sint occaecati cupiditate non provident, similique
 sunt in culpa qui officia deserunt mollitia animi, id est laborum et
 dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
 ## Chapter four
 Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
 impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
 assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut
 officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates
 repudiandae sint et molestiae non recusandae.
 Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
 voluptatibus maiores alias consequatur aut perferendis doloribus
 asperiores repellat. And so we arrive back where we started: the blog and
 the website were one thing all along. [Return to the front page](/).
 """
-NOTES_ON_URLS = """\
+NIGHT_SKY = """\
-A URL is part of the content. A few rules of thumb I keep coming back to:
+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.
- Pick slugs like book titles, not like database keys.
+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.
 - Nest only when the structure is real.
 - Once published, a URL is a promise. Redirect if you must break it.
-> Cool URIs don't change; uncool ones at least apologise.
+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.
-That's all. Short posts are posts too.
+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.
 """
-CANVAS_NIGHTS = """\
+# Moby-Dick; or, The Whale (1851), Herman Melville — public domain.
-This post's banner is not an image at all — it's a `<canvas>` animated by
+# Chapter 1, abridged and headed. A real long-read: flowing sections,
-a few lines of JavaScript embedded in the page's banner HTML.
+# figures, a list — not a feature showcase. (Engravings: Augustus
 # Burnham Shute's illustrations for the 1892 edition, 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.*
-Banners on this site are arbitrary markup: an image, a gradient div, or a
+{dates}
 small animated scene like the one above. Subpages inherit the nearest
 banner up their path, so a whole section can share one look.
-```js
+![Dunes at dusk](dunes.svg "Full-width artwork between sections"){.wide}
 // the essence of the banner above
 stars.forEach(s => { s.x = (s.x + s.speed * dt) % 1 })
 ```
-No build step, no framework — the snippet is stored with the page and
+## The watery part of the world
-dropped into the header as-is.
+
 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}
 There now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs — commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extreme downtown is the battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previous were out of sight of land. Look at the crowds of water-gazers there.
 Circumambulate the city of a dreamy Sabbath afternoon. Go from Corlears Hook to Coenties Slip, and from thence, by Whitehall, northward. What do you see? — Posted like silent sentinels all around the town, stand thousands upon thousands of mortal men fixed in ocean reveries. Some leaning against the spiles; some seated upon the pier-heads; some looking over the bulwarks of ships from China; some high aloft in the rigging, as if striving to get a still better seaward peep. But these are all landsmen; of week days pent up in lath and plaster — tied to counters, nailed to benches, clinched to desks. How then is this? Are the green fields gone? What do they here?
 But look! here come more crowds, pacing straight for the water, and seemingly bound for a dive. Strange! Nothing will content them but the extremest limit of the land; loitering under the shady lee of yonder warehouses will not suffice. No. They must get just as nigh the water as they possibly can without falling in. And there they stand — miles of them — leagues. Inlanders all, they come from lanes and alleys, streets and avenues — north, east, south, and west. Yet here they all unite. Tell me, does the magnetic virtue of the needles of the compasses of all those ships attract them thither?
 ## Meditation and water
 Once more. Say you are in the country; in some high land of lakes. Take almost any path you please, and ten to one it carries you down in a dale, and leaves you there by a pool in the stream. There is magic in it. Let the most absent-minded of men be plunged in his deepest reveries — stand that man on his legs, set his feet a-going, and he will infallibly lead you to water, if water there be in all that region. Should you ever be athirst in the great American desert, try this experiment, if your caravan happen to be supplied with a metaphysical professor. Yes, as every one knows, meditation and water are wedded for ever.
 ### The artist's problem
 But here is an artist. He desires to paint you the dreamiest, shadiest, quietest, most enchanting bit of romantic landscape in all the valley of the Saco. What is the chief element he employs? There stand his trees, each with a hollow trunk, as if a hermit and a crucifix were within; and here sleeps his meadow, and there sleep his cattle; and up from yonder cottage goes a sleepy smoke. Deep into distant woodlands winds a mazy way, reaching to overlapping spurs of mountains bathed in their hill-side blue. But though the picture lies thus tranced, and though this pine-tree shakes down its sighs like leaves upon this shepherd's head, yet all were vain, unless the shepherd's eye were fixed upon the magic stream before him.
 Why did the poor poet of Tennessee, upon suddenly receiving two handfuls of silver, deliberate whether to buy him a coat, which he sadly needed, or invest his money in a pedestrian trip to Rockaway Beach? Why is almost every robust healthy boy with a robust healthy soul in him, at some time or other crazy to go to sea? Why upon your first voyage as a passenger, did you yourself feel such a mystical vibration, when you were first told that you and your ship were now out of sight of land? Why did the old Persians hold the sea holy? Why did the Greeks give it a separate deity, and own brother of Jove? Surely all this is not without meaning. And still deeper the meaning of that story of Narcissus, who because he could not grasp the tormenting, mild image he saw in the fountain, plunged into it and was drowned. But that same image, we ourselves see in all rivers and oceans. It is the image of the ungraspable phantom of life; and this is the key to it all.
 ## A simple sailor, right before the mast
 Now, when I say that I am in the habit of going to sea whenever I begin to grow hazy about the eyes, and begin to be over conscious of my lungs, I do not mean to have it inferred that I ever go to sea as a passenger. For to go as a passenger you must needs have a purse, and a purse is but a rag unless you have something in it. Besides, passengers get sea-sick — grow quarrelsome — don't sleep of nights — do not enjoy themselves much, as a general thing; — no, I never go as a passenger; nor, though I am something of a salt, do I ever go to sea as a Commodore, or a Captain, or a Cook. I abandon the glory and distinction of such offices to those who like them. For my part, I abominate all honorable respectable toils, trials, and tribulations of every kind whatsoever. It is quite as much as I can do to take care of myself, without taking care of ships, barques, brigs, schooners, and what not.
 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.
 ![The final chase](md-chase.jpg "A. Burnham Shute's illustration of the final chase, 1892 — public domain")
 What of it, if some old hunks of a sea-captain orders me to get a broom and sweep down the decks? What does that indignity amount to, weighed, I mean, in the scales of the New Testament? Do you think the archangel Gabriel thinks anything the less of me, because I promptly and respectfully obey that old hunks in that particular instance? Who ain't a slave? Tell me that. Well, then, however the old sea-captains may order me about — however they may thump and punch me about, I have the satisfaction of knowing that it is all right; that everybody else is one way or other served in much the same way — either in a physical or metaphysical point of view, that is; and so the universal thump is passed round, and all hands should rub each other's shoulder-blades, and be content.
 And finally, what shall I say of the reasons for going a-whaling? Chief among them:
 - The overwhelming idea of the great whale himself — such a portentous and mysterious monster roused all my curiosity.
 - The undeliverable, nameless perils of the whale, and the attendants of the wondrous world of waters.
 - The tormenting, mild image of the ungraspable phantom of life, seen in all rivers and oceans.
 These were the things that finally drew me to the sea — and if they but knew it, almost all men cherish very nearly the same feelings towards the ocean with me.
 """
 SMALL_RELEASES = """\
-Software wants to be shipped. The longer a change sits unmerged, the more
+Software wants to be shipped. The longer a change sits unmerged, the more it rots: context fades, conflicts accumulate, and the diff grows teeth.
 it rots: context fades, conflicts accumulate, and the diff grows teeth.
 1. Cut the scope until it fits in a day.
 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
+A release is a conversation with reality. Small releases keep the conversation lively.
 conversation lively.
 """
-CANVAS_BANNER = """\
+ABOUT = """\
-<canvas id="stars"></canvas>
+This site runs on **Pagerite**: FastAPI + html5tagger + kanta, with content written in Markdown and rendered on the fly.
-<script>
+
-(() => {
+- [How to edit this site](/docs/editing)
-  const c = document.getElementById("stars");
+- [Markdown features](/docs/markdown/basics)
-  const ctx = c.getContext("2d");
+- [The showcase](/showcase/gallery)
-  const fit = () => { c.width = c.clientWidth; c.height = c.clientHeight; };
+- [![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
-  fit();
+
-  addEventListener("resize", fit);
+*Replace this page with whatever your site is about.*
  const stars = Array.from({ length: 110 }, () => ({
    x: Math.random(), y: Math.random(),
    r: Math.random() * 1.4 + 0.3, v: Math.random() * 0.05 + 0.01,
  }));
  let prev = performance.now();
  (function frame(now) {
    if (!c.isConnected) return;
    const dt = Math.min(now - prev, 100); prev = now;
    ctx.fillStyle = "#0b0e1d";
    ctx.fillRect(0, 0, c.width, c.height);
    ctx.fillStyle = "#cdd6ff";
    for (const s of stars) {
      s.x = (s.x + s.v * dt / 1000) % 1;
      ctx.beginPath();
      ctx.arc(s.x * c.width, s.y * c.height, s.r, 0, 7);
      ctx.fill();
    }
    requestAnimationFrame(frame);
  })(prev);
 })();
 </script>
 """
 EYES_BANNER = """\
 <canvas id="eyes"></canvas>
 <script>
 (() => {
  const c = document.getElementById("eyes");
  const ctx = c.getContext("2d");
  const BG = "#f3e9d7";
  const fit = () => { c.width = c.clientWidth; c.height = c.clientHeight; };
  fit();
  addEventListener("resize", fit);
  // Mouse in canvas coordinates; pupils wander idly when it goes stale.
  let mx = 0, my = 0, lastMove = 0;
  addEventListener("mousemove", (e) => {
    const r = c.getBoundingClientRect();
    mx = e.clientX - r.left;
    my = e.clientY - r.top;
    lastMove = performance.now();
  });
  // The pair of eyes is one critter: it wanders around the banner, and
  // every so often ducks below the bottom edge, then pops back up.
  let gx = 0.5, gy = 0.5;   // group position (fractions of the canvas)
  let tx = 0.5, ty = 0.5;   // wander target
  let yoff = 0, vy = 0;     // vertical hide/pop spring (px)
  let hidePhase = 0;        // 0 = up, 1 = ducking, 2 = down, waiting
  let nextMove = 0, nextHide = 4000 + Math.random() * 5000, resurfaceAt = 0;
  // Per-eye pupil state: spring physics for goofy lag and overshoot.
  const eyes = [{ x: 0, y: 0, vx: 0, vy: 0, pr: 0.3 }, { x: 0, y: 0, vx: 0, vy: 0, pr: 0.3 }];
  let prev = performance.now();
  (function frame(now) {
    if (!c.isConnected) return;
    const dt = Math.min(now - prev, 100) / 16.7; prev = now;
    ctx.fillStyle = BG;
    ctx.fillRect(0, 0, c.width, c.height);
    const R = Math.min(c.height * 0.32, 70);
    // Wander: ease toward a spot, pick a new one every few seconds.
    if (now > nextMove && !hidePhase) {
      tx = 0.15 + Math.random() * 0.7;
      ty = 0.3 + Math.random() * 0.4;
      nextMove = now + 2500 + Math.random() * 3500;
    }
    gx += (tx - gx) * 0.02 * dt;
    gy += (ty - gy) * 0.02 * dt;
    // Duck down, wait hidden, then spring back (underdamped = pops past
    // the resting point and wobbles). Resurfaces at a new spot.
    if (hidePhase === 0 && now > nextHide) hidePhase = 1;
    if (hidePhase === 1 && yoff > c.height * 0.9) {
      hidePhase = 2;
      resurfaceAt = now + 500 + Math.random() * 900;
    }
    if (hidePhase === 2 && now > resurfaceAt) {
      hidePhase = 0;
      nextHide = now + 5000 + Math.random() * 7000;
      tx = 0.15 + Math.random() * 0.7;
      gx = tx;
      nextMove = now + 3000 + Math.random() * 3000;
    }
    const yTarget = hidePhase ? c.height : 0;
    vy += (yTarget - yoff) * 0.06 * dt;
    vy *= 0.85;
    yoff += vy * dt;
    const cy0 = gy * c.height + yoff;
    const cx0 = gx * c.width;
    const watching = now - lastMove < 4000;
    eyes.forEach((e, i) => {
      const cx = cx0 + (i ? 1.3 : -1.3) * R;
      // Pupil target: toward the cursor, or a slow idle drift.
      let ptx, pty;
      if (watching) {
        const dx = mx - cx, dy = my - cy0;
        const d = Math.hypot(dx, dy) || 1;
        const reach = R * 0.45 * Math.min(1, d / 200);
        ptx = (dx / d) * reach; pty = (dy / d) * reach;
      } else {
        ptx = Math.sin(now / 900 + i * 2) * R * 0.3;
        pty = Math.cos(now / 1300 + i * 3) * R * 0.2;
      }
      // Spring toward the target (underdamped: overshoots, wobbles).
      e.vx += (ptx - e.x) * 0.08 * dt; e.vy += (pty - e.y) * 0.08 * dt;
      e.vx *= 0.82; e.vy *= 0.82;
      e.x += e.vx * dt; e.y += e.vy * dt;
      // Pupils dilate when the cursor comes close to the eye.
      const near = Math.hypot(mx - cx, my - cy0) < R * 2.5;
      e.pr += ((near ? 0.42 : 0.3) - e.pr) * 0.1 * dt;
      // Sclera.
      ctx.fillStyle = "#fff";
      ctx.beginPath();
      ctx.ellipse(cx, cy0, R, R * 1.15, 0, 0, 7);
      ctx.fill();
      // Iris + pupil + glint, clipped to the sclera.
      ctx.save();
      ctx.beginPath();
      ctx.ellipse(cx, cy0, R, R * 1.15, 0, 0, 7);
      ctx.clip();
      ctx.fillStyle = "#7c5cff";
      ctx.beginPath();
      ctx.arc(cx + e.x, cy0 + e.y, R * 0.55, 0, 7);
      ctx.fill();
      ctx.fillStyle = "#1d1730";
      ctx.beginPath();
      ctx.arc(cx + e.x, cy0 + e.y, R * e.pr, 0, 7);
      ctx.fill();
      ctx.fillStyle = "#fff";
      ctx.beginPath();
      ctx.arc(cx + e.x - R * 0.15, cy0 + e.y - R * 0.18, R * 0.09, 0, 7);
      ctx.fill();
      ctx.restore();
      ctx.strokeStyle = "#2b2440";
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.ellipse(cx, cy0, R, R * 1.15, 0, 0, 7);
      ctx.stroke();
    });
    requestAnimationFrame(frame);
  })(prev);
 })();
 </script>
 """
 BLOG_BANNER = '<div style="background: linear-gradient(100deg, #14243d, #3d2b6b 45%, #7c5cff 75%, #ff5c8a)"></div>'
 FRONT_BANNER = '<img src="/waves.svg" alt="">'
 WAVES_SVG = """\
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
  <defs>
@@ -422,28 +402,62 @@ DUNES_SVG = """\
 </svg>
 """
-#: path -> (title, markdown, {filename: bytes}, banner HTML, menu order).
+#: path -> (title, markdown, {filename: bytes}, banner HTML, menu order,
-#: Note there are deliberately no "docs" or "blog" landing pages: those
+#: banner design). Designs demonstrate inheritance: the "showcase" label
-#: labels are created without content, so they render a placeholder page
+#: picks "eyes" (all its pages show the critter), and the leaf
-#: and their nav links point at the first child (see views.first_leaf).
+#: "showcase/night-sky" overrides that with "stars". Elsewhere the active
-PAGES: dict[str, tuple[str, str, dict[str, bytes], str, float]] = {
+#: theme's own design shows.
-    "": ("Welcome", WELCOME, {"waves.svg": WAVES_SVG.encode()}, FRONT_BANNER, 1),
+#: Note there are deliberately no "docs" or "showcase" landing pages:
-    "about": ("About", ABOUT, {}, "", 2),
+#: those labels are created without content, so they render a placeholder
-    "docs/editing": (
+#: page and their nav links point at the first child (see
-        "Writing Content",
+#: views.first_leaf). "showcase" is seeded explicitly (empty markdown,
-        EDITING,
+#: which the seeder leaves as content=None) just to carry the design.
-        {"shapes.svg": SHAPES_SVG.encode()},
+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": (
        "Basics",
        MD_BASICS,
        {},
        "",
        1,
        None,
    ),
-    "blog/the-long-read": (
+    "docs/markdown/extensions": ("Extensions", MD_EXTENSIONS, {}, "", 2, None),
-        "The Long Read",
+    "docs/markdown/images-and-layout": (
-        LONG_READ,
+        "Images and Layout",
-        {"dunes.svg": DUNES_SVG.encode()},
+        MD_LAYOUT,
-        BLOG_BANNER,
+        {"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(),
        },
        "",
        1,
        None,
    ),
-    "blog/notes-on-urls": ("Notes on URLs", NOTES_ON_URLS, {}, EYES_BANNER, 2),
+    "showcase/loomings": (
-    "blog/canvas-nights": ("Canvas Nights", CANVAS_NIGHTS, {}, CANVAS_BANNER, 3),
+        "Loomings — a Long Read",
-    "blog/small-releases": ("Small Releases", SMALL_RELEASES, {}, "", 4),
+        LOOMINGS,
        {
            "dunes.svg": DUNES_SVG.encode(),
            "md-whale.jpg": _asset("md-whale.jpg"),
            "md-chase.jpg": _asset("md-chase.jpg"),
        },
        "",
        2,
        None,
    ),
    "showcase/night-sky": ("Night Sky", NIGHT_SKY, {}, "", 3, "stars"),
    "showcase/small-releases": ("Small Releases", SMALL_RELEASES, {}, "", 4, None),
 }
@@ -0,0 +1,79 @@
 /* Corporate banner design: sizing and colors for the geometric artwork
   (inlined by the backend into #page-banner). The cb-* classes recolor the
   SVG from the active palette (var(--accent)), so one SVG serves light
   and dark — and other themes too. */
 #banner {
  min-height: 15rem;
  border-bottom: none;
 }
 /* Artwork colors, light mode */
 .cb-bg0 {
  stop-color: #ffffff;
 }
 .cb-bg1 {
  stop-color: #e6eefe;
 }
 .cb-r0 {
  stop-color: var(--accent);
 }
 .cb-r1 {
  stop-color: #00b3ff;
 }
 .cb-g0,
 .cb-g1 {
  stop-color: var(--accent);
 }
 .cb-dot {
  fill: var(--accent);
 }
 .cb-orbit {
  stroke: var(--accent);
 }
 .cb-spark {
  fill: var(--accent);
 }
 /* Artwork colors, dark mode */
@media (prefers-color-scheme: dark) {
  .cb-bg0 {
    stop-color: #0d1830;
  }
  .cb-bg1 {
    stop-color: #0a1122;
  }
  .cb-r0 {
    stop-color: #2f7bff;
  }
  .cb-r1 {
    stop-color: #00d0ff;
  }
  .cb-g0,
  .cb-g1 {
    stop-color: #2f7bff;
  }
  .cb-dot {
    fill: #4d8dff;
  }
  .cb-orbit {
    stroke: #4d8dff;
  }
  .cb-spark {
    fill: #6ea8ff;
  }
 }
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 360" preserveAspectRatio="xMidYMid slice">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 360" preserveAspectRatio="xMidYMax slice">
  <defs>
    <linearGradient id="cbg" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" class="cb-bg0"/>
@@ -1,9 +1,9 @@
 /* Corporate theme: bright and bold professional. Saturated royal-blue
   gradients on white, geometric Montserrat display type over Inter body,
   and a genuinely large brand with a soft blue overlap shadow. Automatic
-   dark mode keeps the same saturated blue identity on deep navy; the
+   dark mode keeps the same saturated blue identity on deep navy. The
-   banner artwork (inlined by the backend) is recolored from here via the
+   companion banner design (banner.css, artwork inlined by the backend)
-   cb-* classes, so one SVG serves both modes. */
+   recolors its SVG from the active palette via the cb-* classes. */
 :root {
  color-scheme: light dark;
@@ -18,40 +18,6 @@
  --font-heading: var(--font-montserrat);
 }
 /* Banner artwork colors, light mode */
 .cb-bg0 {
  stop-color: #ffffff;
 }
 .cb-bg1 {
  stop-color: #e6eefe;
 }
 .cb-r0 {
  stop-color: var(--accent);
 }
 .cb-r1 {
  stop-color: #00b3ff;
 }
 .cb-g0,
 .cb-g1 {
  stop-color: var(--accent);
 }
 .cb-dot {
  fill: var(--accent);
 }
 .cb-orbit {
  stroke: var(--accent);
 }
 .cb-spark {
  fill: var(--accent);
 }
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1428;
@@ -64,40 +30,6 @@
    /* Code wells stay navy in dark mode (light mode uses --surface). */
    --code-bg: #0d1b3e;
  }
  /* Banner artwork colors, dark mode */
  .cb-bg0 {
    stop-color: #0d1830;
  }
  .cb-bg1 {
    stop-color: #0a1122;
  }
  .cb-r0 {
    stop-color: #2f7bff;
  }
  .cb-r1 {
    stop-color: #00d0ff;
  }
  .cb-g0,
  .cb-g1 {
    stop-color: #2f7bff;
  }
  .cb-dot {
    fill: #4d8dff;
  }
  .cb-orbit {
    stroke: #4d8dff;
  }
  .cb-spark {
    fill: #6ea8ff;
  }
 }
 ::selection {
@@ -124,11 +56,6 @@
  }
 }
 #banner {
  min-height: 15rem;
  border-bottom: none;
 }
 #nav {
  font-size: 1.05em;
  font-weight: 600;
@@ -0,0 +1,7 @@
 /* Eyes banner design: a canvas critter watching the cursor from the
   grass (banner.html — markup + styles + script inlined by the backend
   into #page-banner). Fixed-height stage matching the canvas. */
 #banner {
  height: 240px;
 }
@@ -0,0 +1,423 @@
 <canvas id="eyes"></canvas>
 <style>
  #eyes {
    width: 100%;
    height: 240px;
    display: block;
  }
 </style>
 <script><!--
 (() => {
  const c = document.getElementById('eyes')
  const ctx = c.getContext('2d')
  const DPR = devicePixelRatio || 1
  const fit = () => {
    const w = Math.max(1, c.clientWidth)
    const h = Math.max(1, c.clientHeight)
    c.width = Math.round(w * DPR)
    c.height = Math.round(h * DPR)
    ctx.setTransform(DPR, 0, 0, DPR, 0, 0)
  }
  fit()
  addEventListener('resize', fit)
  let mx = 0
  let my = 0
  let lastMove = 0
  addEventListener('mousemove', e => {
    const r = c.getBoundingClientRect()
    // Convert viewport coordinates into the canvas' CSS-pixel coordinate
    // system. This remains correct with browser zoom, CSS transforms, etc.
    mx = (e.clientX - r.left) * c.clientWidth / r.width
    my = (e.clientY - r.top) * c.clientHeight / r.height
    lastMove = performance.now()
  })
  let gx = 0.5
  let gy = 0.5
  let tx = 0.5
  let ty = 0.5
  let yoff = 0
  let vy = 0
  let hidePhase = 0
  let nextMove = 0
  let nextHide = 4000 + Math.random() * 5000
  let resurfaceAt = 0
  const eyes = [
    { x: 0, y: 0, vx: 0, vy: 0, pr: 0.3 },
    { x: 0, y: 0, vx: 0, vy: 0, pr: 0.3 }
  ]
  const ridgeY = (x, w, h) =>
    h * 0.72 +
    Math.sin(x * 0.012) * 10 +
    Math.sin(x * 0.003 + 1.4) * 16 +
    Math.sin(x * 0.02 + 0.7) * 3
  const drawCloud = (x, y, s) => {
    ctx.fillStyle = 'rgba(255,255,255,0.85)'
    ctx.beginPath()
    ctx.arc(x - s * 0.55, y + s * 0.05, s * 0.38, 0, 7)
    ctx.arc(x - s * 0.12, y - s * 0.08, s * 0.48, 0, 7)
    ctx.arc(x + s * 0.32, y, s * 0.42, 0, 7)
    ctx.arc(x + s * 0.64, y + s * 0.1, s * 0.28, 0, 7)
    ctx.fill()
  }
  const drawHills = (w, h) => {
    ctx.fillStyle = '#b7d7a8'
    ctx.beginPath()
    ctx.moveTo(0, h)
    ctx.lineTo(0, h * 0.63)
    ctx.quadraticCurveTo(w * 0.18, h * 0.48, w * 0.35, h * 0.62)
    ctx.quadraticCurveTo(w * 0.52, h * 0.78, w * 0.68, h * 0.58)
    ctx.quadraticCurveTo(w * 0.82, h * 0.43, w, h * 0.57)
    ctx.lineTo(w, h)
    ctx.closePath()
    ctx.fill()
    ctx.fillStyle = '#99c685'
    ctx.beginPath()
    ctx.moveTo(0, h)
    ctx.lineTo(0, h * 0.72)
    ctx.quadraticCurveTo(w * 0.14, h * 0.6, w * 0.28, h * 0.7)
    ctx.quadraticCurveTo(w * 0.46, h * 0.82, w * 0.62, h * 0.66)
    ctx.quadraticCurveTo(w * 0.82, h * 0.5, w, h * 0.68)
    ctx.lineTo(w, h)
    ctx.closePath()
    ctx.fill()
  }
  const drawBackground = (w, h) => {
    const sky = ctx.createLinearGradient(0, 0, 0, h)
    sky.addColorStop(0, '#8ed0ff')
    sky.addColorStop(0.62, '#d9f1ff')
    sky.addColorStop(1, '#eef9ff')
    ctx.fillStyle = sky
    ctx.fillRect(0, 0, w, h)
    ctx.fillStyle = 'rgba(255,240,170,0.5)'
    ctx.beginPath()
    ctx.arc(w * 0.83, h * 0.2, h * 0.16, 0, 7)
    ctx.fill()
    drawCloud(w * 0.18, h * 0.2, h * 0.16)
    drawCloud(w * 0.43, h * 0.14, h * 0.12)
    drawCloud(w * 0.68, h * 0.24, h * 0.15)
    drawHills(w, h)
    for (let i = 0; i < 5; i++) {
      const x = (i + 0.5) * w / 5
      const y = h * 0.58 + Math.sin(i * 1.7) * 8
      ctx.fillStyle = '#5f8d4e'
      ctx.beginPath()
      ctx.arc(x, y, 18, Math.PI, 0)
      ctx.arc(x - 14, y + 2, 14, Math.PI, 0)
      ctx.arc(x + 14, y + 3, 12, Math.PI, 0)
      ctx.fill()
    }
  }
  const drawCritter = (cx0, eyeY, R, now, dt) => {
    const headR = R * 2
    const headCx = cx0
    const headCy = eyeY + R * 0.52
    ctx.fillStyle = '#5fbe61'
    ctx.strokeStyle = '#285838'
    ctx.lineWidth = 3
    ctx.beginPath()
    ctx.moveTo(headCx - headR * 0.45, headCy - headR * 0.84)
    ctx.quadraticCurveTo(
      headCx - headR * 0.62,
      headCy - headR * 1.18,
      headCx - headR * 0.2,
      headCy - headR * 0.94
    )
    ctx.fill()
    ctx.stroke()
    ctx.beginPath()
    ctx.moveTo(headCx + headR * 0.45, headCy - headR * 0.84)
    ctx.quadraticCurveTo(
      headCx + headR * 0.62,
      headCy - headR * 1.18,
      headCx + headR * 0.2,
      headCy - headR * 0.94
    )
    ctx.fill()
    ctx.stroke()
    ctx.beginPath()
    ctx.arc(headCx, headCy, headR, 0, 7)
    ctx.fill()
    ctx.stroke()
    ctx.fillStyle = 'rgba(255,255,255,0.12)'
    ctx.beginPath()
    ctx.arc(
      headCx - headR * 0.28,
      headCy - headR * 0.22,
      headR * 0.4,
      0,
      7
    )
    ctx.fill()
    ctx.fillStyle = '#4caa50'
    for (let i = -1; i <= 1; i++) {
      ctx.beginPath()
      ctx.arc(
        headCx + i * headR * 0.42,
        headCy - headR * 0.16,
        headR * 0.13,
        0,
        7
      )
      ctx.fill()
    }
    ctx.strokeStyle = '#285838'
    ctx.lineCap = 'round'
    for (let i = -1; i <= 1; i++) {
      ctx.lineWidth = 4
      ctx.beginPath()
      ctx.moveTo(headCx + i * 10, headCy - headR * 0.94)
      ctx.lineTo(
        headCx + i * 16,
        headCy - headR * 1.1 - Math.sin(now / 180 + i) * 3
      )
      ctx.stroke()
    }
    eyes.forEach((e, i) => {
      const cx = cx0 + (i ? 1.3 : -1.3) * R
      const watching = now - lastMove < 4000
      let ptx
      let pty
      if (watching) {
        const dx = mx - cx
        const dy = my - eyeY
        const d = Math.hypot(dx, dy) || 1
        const maxReach = R * 0.43
        const responseDistance = R * 4
        // Direction points exactly at the cursor, while reach increases
        // smoothly with cursor distance.
        const reach = maxReach * Math.min(1, d / responseDistance)
        ptx = dx / d * reach
        pty = dy / d * reach
      } else {
        ptx = Math.sin(now / 900 + i * 2) * R * 0.3
        pty = Math.cos(now / 1300 + i * 3) * R * 0.2
      }
      e.vx += (ptx - e.x) * 0.08 * dt
      e.vy += (pty - e.y) * 0.08 * dt
      e.vx *= Math.pow(0.82, dt)
      e.vy *= Math.pow(0.82, dt)
      e.x += e.vx * dt
      e.y += e.vy * dt
      const near = Math.hypot(mx - cx, my - eyeY) < R * 2.5
      e.pr += ((near ? 0.42 : 0.3) - e.pr) * 0.1 * dt
      ctx.fillStyle = '#fff'
      ctx.strokeStyle = '#1f2d22'
      ctx.lineWidth = 2.5
      ctx.beginPath()
      ctx.ellipse(cx, eyeY, R, R * 1.12, 0, 0, 7)
      ctx.fill()
      ctx.stroke()
      ctx.save()
      ctx.beginPath()
      ctx.ellipse(cx, eyeY, R, R * 1.12, 0, 0, 7)
      ctx.clip()
      ctx.fillStyle = '#f2b84b'
      ctx.beginPath()
      ctx.arc(cx + e.x, eyeY + e.y, R * 0.56, 0, 7)
      ctx.fill()
      ctx.strokeStyle = 'rgba(140,84,8,0.45)'
      ctx.lineWidth = 1
      for (let a = 0; a < 12; a++) {
        const ang = a / 12 * Math.PI * 2
        ctx.beginPath()
        ctx.moveTo(cx + e.x, eyeY + e.y)
        ctx.lineTo(
          cx + e.x + Math.cos(ang) * R * 0.5,
          eyeY + e.y + Math.sin(ang) * R * 0.5
        )
        ctx.stroke()
      }
      ctx.fillStyle = '#191919'
      ctx.beginPath()
      ctx.arc(cx + e.x, eyeY + e.y, R * e.pr, 0, 7)
      ctx.fill()
      ctx.fillStyle = '#fff'
      ctx.beginPath()
      ctx.arc(
        cx + e.x - R * 0.14,
        eyeY + e.y - R * 0.17,
        R * 0.09,
        0,
        7
      )
      ctx.fill()
      ctx.restore()
      ctx.strokeStyle = '#1f2d22'
      ctx.lineWidth = 3
      ctx.beginPath()
      ctx.moveTo(cx - R * 0.7, eyeY - R * 1.2)
      ctx.quadraticCurveTo(
        cx,
        eyeY - R * 1.48 - (i ? -1 : 1) * 2,
        cx + R * 0.72,
        eyeY - R * 1.12
      )
      ctx.stroke()
    })
  }
  const drawForeground = (w, h) => {
    ctx.fillStyle = '#69ae4b'
    ctx.beginPath()
    ctx.moveTo(0, h)
    ctx.lineTo(0, ridgeY(0, w, h))
    for (let x = 0; x <= w; x += 8)
      ctx.lineTo(x, ridgeY(x, w, h))
    ctx.lineTo(w, h)
    ctx.closePath()
    ctx.fill()
    ctx.fillStyle = 'rgba(48,102,34,0.18)'
    ctx.beginPath()
    ctx.moveTo(0, h)
    ctx.lineTo(0, ridgeY(0, w, h) + 10)
    for (let x = 0; x <= w; x += 8)
      ctx.lineTo(x, ridgeY(x, w, h) + 10)
    ctx.lineTo(w, h)
    ctx.closePath()
    ctx.fill()
    ctx.strokeStyle = '#4d8d37'
    ctx.lineWidth = 2
    ctx.lineCap = 'round'
    for (let x = 0; x <= w; x += 16) {
      const y = ridgeY(x, w, h)
      ctx.beginPath()
      ctx.moveTo(x, y + 6)
      ctx.quadraticCurveTo(x - 4, y - 10, x + 1, y - 2)
      ctx.moveTo(x + 1, y + 6)
      ctx.quadraticCurveTo(x + 4, y - 12, x + 3, y - 1)
      ctx.stroke()
    }
    for (let i = 0; i < 8; i++) {
      const x = (i + 0.4) * w / 8 + Math.sin(i * 2.4) * 10
      const y = ridgeY(x, w, h) + 2
      ctx.fillStyle = i % 2 ? '#ffdc6b' : '#ff8aa7'
      ctx.beginPath()
      ctx.arc(x, y, 3, 0, 7)
      ctx.arc(x - 4, y + 2, 3, 0, 7)
      ctx.arc(x + 4, y + 2, 3, 0, 7)
      ctx.fill()
    }
  }
  let prev = performance.now()
  const frame = now => {
    if (!c.isConnected) return
    const dt = Math.min(now - prev, 100) / 16.7
    prev = now
    const w = c.clientWidth
    const h = c.clientHeight
    const R = Math.min(h * 0.11, 38)
    if (now > nextMove && !hidePhase) {
      tx = 0.15 + Math.random() * 0.7
      ty = 0.3 + Math.random() * 0.4
      nextMove = now + 2500 + Math.random() * 3500
    }
    gx += (tx - gx) * 0.02 * dt
    gy += (ty - gy) * 0.02 * dt
    if (hidePhase === 0 && now > nextHide)
      hidePhase = 1
    if (hidePhase === 1 && yoff > h * 0.9) {
      hidePhase = 2
      resurfaceAt = now + 500 + Math.random() * 900
    }
    if (hidePhase === 2 && now > resurfaceAt) {
      hidePhase = 0
      nextHide = now + 5000 + Math.random() * 7000
      tx = 0.15 + Math.random() * 0.7
      ty = 0.3 + Math.random() * 0.4
      gx = tx
      gy = ty
      nextMove = now + 3000 + Math.random() * 3000
    }
    const yTarget = hidePhase ? h : 0
    vy += (yTarget - yoff) * 0.06 * dt
    vy *= Math.pow(0.85, dt)
    yoff += vy * dt
    drawBackground(w, h)
    const cx0 = gx * w
    const ridge = ridgeY(cx0, w, h)
    // Normally the full pair of eyes sits above the grass. gy gives it
    // a small amount of bobbing/wandering without burying it again.
    const eyeY =
      ridge -
      R * 1.25 +
      (gy - 0.5) * R * 0.8 +
      yoff
    drawCritter(cx0, eyeY, R, now, dt)
    drawForeground(w, h)
    requestAnimationFrame(frame)
  }
  requestAnimationFrame(frame)
 })()
 </script>
@@ -0,0 +1,79 @@
 /* Nitro banner design: the bezier-swept artwork with wide orange stripes
   (inlined by the backend into #page-banner), in neutral dark greys that
   follow the page's color scheme. */
 /* Bezier-swept banner with wide orange stripes (inlined SVG), separated
   from the page by a straight orange blade. */
 #banner {
  height: 13rem;
  border-bottom: 4px solid var(--accent);
 }
 /* Banner artwork dark tones: neutral greys in light mode (retinted to the
   page's violet family by the dark-scheme block below). */
 .nb-base {
  fill: #0b0b0d;
 }
 .nb-s1a {
  stop-color: #242428;
 }
 .nb-s1b {
  stop-color: #0b0b0d;
 }
 .nb-s2a {
  stop-color: #19191d;
 }
 .nb-s2b {
  stop-color: #060607;
 }
 .nb-c0 {
  stop-color: #2a2a2f;
 }
 .nb-c1 {
  stop-color: #131315;
 }
 .nb-c2 {
  stop-color: #0b0b0d;
 }
@media (prefers-color-scheme: dark) {
  /* Banner dark tones tinted to the same violet family as the page. */
  .nb-base {
    fill: #100d18;
  }
  .nb-s1a {
    stop-color: #292536;
  }
  .nb-s1b {
    stop-color: #100d18;
  }
  .nb-s2a {
    stop-color: #1e1a2b;
  }
  .nb-s2b {
    stop-color: #090811;
  }
  .nb-c0 {
    stop-color: #322d44;
  }
  .nb-c1 {
    stop-color: #171422;
  }
  .nb-c2 {
    stop-color: #100d18;
  }
 }
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 360" preserveAspectRatio="xMidYMid slice">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 360" preserveAspectRatio="xMidYMax slice">
  <defs>
    <linearGradient id="flare" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#ff6a00"/>
@@ -59,39 +59,6 @@
    --code-bg: #12101b;
    /* code wells join the violet family */
  }
  /* Banner dark tones tinted to the same violet family as the page. */
  .nb-base {
    fill: #100d18;
  }
  .nb-s1a {
    stop-color: #292536;
  }
  .nb-s1b {
    stop-color: #100d18;
  }
  .nb-s2a {
    stop-color: #1e1a2b;
  }
  .nb-s2b {
    stop-color: #090811;
  }
  .nb-c0 {
    stop-color: #322d44;
  }
  .nb-c1 {
    stop-color: #171422;
  }
  .nb-c2 {
    stop-color: #100d18;
  }
 }
 ::selection {
@@ -112,47 +79,6 @@
  text-shadow: 0 0 0.1em black;
 }
 /* Bezier-swept banner with wide orange stripes (inlined SVG), separated
   from the page by a straight orange blade. */
 #banner {
  height: 13rem;
  border-bottom: 4px solid var(--accent);
 }
 /* Banner artwork dark tones: neutral greys in light mode (retinted to the
   page's violet family by the dark-scheme block above). */
 .nb-base {
  fill: #0b0b0d;
 }
 .nb-s1a {
  stop-color: #242428;
 }
 .nb-s1b {
  stop-color: #0b0b0d;
 }
 .nb-s2a {
  stop-color: #19191d;
 }
 .nb-s2b {
  stop-color: #060607;
 }
 .nb-c0 {
  stop-color: #2a2a2f;
 }
 .nb-c1 {
  stop-color: #131315;
 }
 .nb-c2 {
  stop-color: #0b0b0d;
 }
 #nav {
  font-family: var(--font-heading);
  font-size: 0.95em;
@@ -0,0 +1,21 @@
 /* Purple banner design: the sunrise artwork (inlined by the backend into
   #page-banner) with parallax sun and a fade into the page background. */
 /* Sunrise parallax: the sun and its glow rise faster than the artwork
   drift (pagerite.js sets --pry on <html>), so scrolling the page makes
   the sun come up. */
 #page-banner .sun,
 #page-banner .sun-glow {
  transform-box: fill-box;
  transform: translateY(calc(var(--pry, 0px) * -2));
 }
 /* The banner artwork fades into the page background at its bottom edge
   (baked into the SVG, so a user banner replaces it cleanly). */
 .banner-fade {
  stop-color: var(--bg);
 }
 #banner {
  min-height: 13rem;
 }
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" preserveAspectRatio="xMidYMid slice">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" preserveAspectRatio="xMidYMax slice">
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#2b1b4d"/>
@@ -28,7 +28,9 @@
 #brand {
  font-size: clamp(3.2rem, 9vw, 7.5rem);
  line-height: 1;
-  margin-bottom: -0.28em;
+  /* Ensure below baseline stays visible */
  padding-bottom: 0.3em;
  margin-bottom: -0.3em;
  transform: rotate(-2deg);
  transform-origin: left bottom;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
@@ -39,25 +41,6 @@
  filter: drop-shadow(0 0.15rem 0.6rem #9b6bff55);
 }
 /* Sunrise parallax: the sun and its glow rise faster than the artwork
   drift (pagerite.js sets --pry on <html>), so scrolling the page makes
   the sun come up. */
 #page-banner .sun,
 #page-banner .sun-glow {
  transform-box: fill-box;
  transform: translateY(calc(var(--pry, 0px) * -2));
 }
 /* The banner artwork fades into the page background at its bottom edge
   (baked into the SVG, so a user banner replaces it cleanly). */
 .banner-fade {
  stop-color: var(--bg);
 }
 #banner {
  min-height: 13rem;
 }
 /* Dark artwork: keep the nav readable with a shadow. */
 #nav {
  text-shadow: 0 0 0.15em black;
@@ -0,0 +1,7 @@
 /* Stars banner design: a drifting starfield (banner.html — canvas + script
   inlined by the backend into #page-banner). Fixed-height stage matching
   the canvas. */
 #banner {
  height: 240px;
 }
@@ -0,0 +1,52 @@
 <canvas id="stars"></canvas>
 <style>
  #stars {
    width: 100%;
    height: 240px;
    display: block;
  }
 </style>
 <script><!--
 (() => {
  const c = document.getElementById('stars')
  const ctx = c.getContext('2d')
  const DPR = devicePixelRatio || 1
  const fit = () => {
    const w = Math.max(1, c.clientWidth)
    const h = Math.max(1, c.clientHeight)
    c.width = Math.round(w * DPR)
    c.height = Math.round(h * DPR)
    ctx.setTransform(DPR, 0, 0, DPR, 0, 0)
  }
  fit()
  addEventListener('resize', fit)
  const stars = Array.from({ length: 110 }, () => ({
    x: Math.random(),
    y: Math.random(),
    r: Math.random() * 1.4 + 0.3,
    v: Math.random() * 0.05 + 0.01
  }))
  let prev = performance.now()
  ;(function frame(now) {
    if (!c.isConnected) return
    const w = c.clientWidth
    const h = c.clientHeight
    const dt = Math.min(now - prev, 100)
    prev = now
    ctx.fillStyle = '#0b0e1d'
    ctx.fillRect(0, 0, w, h)
    ctx.fillStyle = '#cdd6ff'
    for (const s of stars) {
      s.x = (s.x + (s.v * dt) / 1000) % 1
      ctx.beginPath()
      ctx.arc(s.x * w, s.y * h, s.r, 0, 7)
      ctx.fill()
    }
    requestAnimationFrame(frame)
  })(prev)
 })()
 </script>
@@ -0,0 +1,75 @@
 /* Summer banner design: a bright illustrated meadow (inlined by the
   backend into #page-banner) — rolling hills, leafy bushes, swaying
   flowers, drifting clouds and a sun that rises as you scroll. */
 #banner {
  min-height: 15rem;
 }
 /* The artwork fades into the page background at its bottom edge. */
 .summer-fade {
  stop-color: var(--bg);
 }
 /* Layered parallax on top of the whole-artwork drift (pagerite.js sets
   --pry on <html>): the sun rises fastest, the clouds lag behind, and the
   nearer a hill the less it moves — a cheap depth cue while scrolling. */
 #page-banner .sun,
 #page-banner .sun-glow {
  transform-box: fill-box;
  transform: translateY(calc(var(--pry, 0px) * -1.5));
 }
 #page-banner .clouds {
  transform: translateY(calc(var(--pry, 0px) * -0.7));
 }
 #page-banner .hills-far {
  transform: translateY(calc(var(--pry, 0px) * -0.3));
 }
 #page-banner .hills-near {
  transform: translateY(calc(var(--pry, 0px) * -0.15));
 }
 #page-banner .meadow {
  transform: translateY(calc(var(--pry, 0px) * -0.05));
 }
 /* Idle animations: the sun breathes, clouds float sideways, flowers sway.
   Each animated group is a transform-less wrapper so the CSS transform
   never clobbers the placement transforms inside. */
@media (prefers-reduced-motion: no-preference) {
  #page-banner .sun-glow {
    animation: summer-sun 9s ease-in-out infinite alternate;
  }
  #page-banner .cloud-a { animation: summer-drift 56s ease-in-out infinite alternate; }
  #page-banner .cloud-b { animation: summer-drift 73s ease-in-out infinite alternate-reverse; }
  #page-banner .cloud-c { animation: summer-drift 64s ease-in-out infinite alternate; }
  #page-banner .flower {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: summer-sway 5s ease-in-out infinite alternate;
  }
  /* Stagger the sway so the meadow doesn't move in lockstep. */
  #page-banner .flower:nth-child(3n) { animation-delay: -1.7s; }
  #page-banner .flower:nth-child(3n + 1) { animation-delay: -3.1s; animation-duration: 6s; }
 }
@keyframes summer-sun {
  from { opacity: 0.22; }
  to { opacity: 0.38; }
 }
@keyframes summer-drift {
  from { transform: translateX(-1.6%); }
  to { transform: translateX(1.6%); }
 }
@keyframes summer-sway {
  from { transform: rotate(-2.6deg); }
  to { transform: rotate(2.6deg); }
 }
@@ -0,0 +1,369 @@
 <svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 1600 320"
     preserveAspectRatio="xMidYMax slice">
  <defs>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#8ed0ff"/>
      <stop offset=".64" stop-color="#d9f1ff"/>
      <stop offset="1" stop-color="#eef9ff"/>
    </linearGradient>
    <linearGradient id="farHill" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#b8dca7"/>
      <stop offset="1" stop-color="#a4cf90"/>
    </linearGradient>
    <linearGradient id="nearHill" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#91c97c"/>
      <stop offset="1" stop-color="#74b65e"/>
    </linearGradient>
    <linearGradient id="grass" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#69ae4b"/>
      <stop offset="1" stop-color="#4f913b"/>
    </linearGradient>
    <!-- Soft fade into the page background (stop-color from banner.css) -->
    <linearGradient id="meadowFade" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" class="summer-fade" stop-color="#e6f4cf" stop-opacity="0"/>
      <stop offset="1" class="summer-fade" stop-color="#e6f4cf"/>
    </linearGradient>
    <filter id="soft">
      <feGaussianBlur stdDeviation="16"/>
    </filter>
    <filter id="cloudShadow" x="-20%" y="-40%" width="140%" height="180%">
      <feDropShadow dx="0" dy="3" stdDeviation="4"
                    flood-color="#4f8fb0" flood-opacity=".12"/>
    </filter>
  </defs>
  <!-- Sky -->
  <rect width="1600" height="320" fill="url(#sky)"/>
  <!-- Sun (rises on scroll, glow pulses) -->
  <circle class="sun-glow" cx="1330" cy="72" r="82"
          fill="#fff0a2"
          opacity=".28"
          filter="url(#soft)"/>
  <circle class="sun" cx="1330" cy="72" r="42"
          fill="#fff0a2"
          opacity=".82"/>
  <!-- Clouds (drift on scroll, lazily float sideways) -->
  <g class="clouds" fill="#fff" opacity=".82" filter="url(#cloudShadow)">
    <g class="cloud cloud-a">
      <g transform="translate(160 72)">
        <ellipse cx="0" cy="12" rx="54" ry="20"/>
        <circle cx="-27" cy="4" r="26"/>
        <circle cx="7" cy="-6" r="34"/>
        <circle cx="40" cy="7" r="25"/>
      </g>
    </g>
    <g class="cloud cloud-b" opacity=".72">
      <g transform="translate(650 52)">
        <ellipse cx="0" cy="10" rx="45" ry="16"/>
        <circle cx="-21" cy="4" r="21"/>
        <circle cx="7" cy="-5" r="27"/>
        <circle cx="32" cy="6" r="20"/>
      </g>
    </g>
    <g class="cloud cloud-c" opacity=".58">
      <g transform="translate(1070 110)">
        <ellipse cx="0" cy="8" rx="38" ry="14"/>
        <circle cx="-18" cy="3" r="18"/>
        <circle cx="6" cy="-4" r="23"/>
        <circle cx="28" cy="5" r="17"/>
      </g>
    </g>
  </g>
  <!-- Far rolling hills (slow parallax); drawn past the bottom edge so the
       drift never exposes sky underneath -->
  <path class="hills-far" d="
    M0 211
    C145 170 263 173 390 211
    C516 249 616 237 730 194
    C846 151 945 168 1065 208
    C1195 251 1334 214 1600 171
    L1600 340
    L0 340
    Z"
    fill="url(#farHill)"/>
  <!-- Near rolling hills -->
  <path class="hills-near" d="
    M0 248
    C120 217 228 217 342 247
    C454 278 566 269 674 228
    C789 184 901 202 1024 243
    C1143 282 1278 271 1391 229
    C1473 199 1538 196 1600 207
    L1600 340
    L0 340
    Z"
    fill="url(#nearHill)"/>
  <!-- Proper leafy bushes (ride with the near hills) -->
  <g class="hills-near">
    <g transform="translate(130 236)">
      <path d="
        M-58 28
        C-61 7 -46 -5 -28 0
        C-28 -20 -4 -31 11 -16
        C22 -36 54 -27 53 -5
        C73 -10 90 6 85 27
        Z"
        fill="#5e9c4b"/>
      <path d="
        M-47 27
        C-48 10 -37 1 -23 5
        C-20 -10 -4 -17 8 -7
        C19 -21 40 -17 43 -1
        C60 -4 70 8 68 26
        Z"
        fill="#70ad58"/>
    </g>
    <g transform="translate(1240 225) scale(.9)">
      <path d="
        M-58 28
        C-61 7 -46 -5 -28 0
        C-28 -20 -4 -31 11 -16
        C22 -36 54 -27 53 -5
        C73 -10 90 6 85 27
        Z"
        fill="#5e9c4b"/>
      <path d="
        M-47 27
        C-48 10 -37 1 -23 5
        C-20 -10 -4 -17 8 -7
        C19 -21 40 -17 43 -1
        C60 -4 70 8 68 26
        Z"
        fill="#70ad58"/>
    </g>
    <g transform="translate(460 250) scale(.58)">
      <path d="
        M-58 28
        C-61 7 -46 -5 -28 0
        C-28 -20 -4 -31 11 -16
        C22 -36 54 -27 53 -5
        C73 -10 90 6 85 27
        Z"
        fill="#5a9748"/>
    </g>
    <g transform="translate(940 245) scale(.55)">
      <path d="
        M-58 28
        C-61 7 -46 -5 -28 0
        C-28 -20 -4 -31 11 -16
        C22 -36 54 -27 53 -5
        C73 -10 90 6 85 27
        Z"
        fill="#5a9748"/>
    </g>
  </g>
  <!-- Foreground meadow (near-static parallax) -->
  <path class="meadow" d="
    M0 270
    C95 260 175 267 260 273
    C347 279 431 265 521 262
    C620 258 705 275 808 272
    C914 269 1004 251 1115 258
    C1229 265 1324 279 1424 270
    C1491 264 1547 258 1600 262
    L1600 340
    L0 340
    Z"
    fill="url(#grass)"/>
  <!-- Dense grass blades -->
  <g class="meadow" fill="none"
     stroke="#4b8937"
     stroke-width="2.5"
     stroke-linecap="round">
    <path d="M20 276 q-2 -19 4 -31 M28 276 q8 -18 11 -29"/>
    <path d="M65 272 q-5 -18 1 -28 M74 272 q8 -16 11 -25"/>
    <path d="M110 271 q-2 -23 5 -36 M121 272 q9 -18 12 -30"/>
    <path d="M165 273 q-6 -16 -1 -28 M175 273 q7 -18 11 -27"/>
    <path d="M225 274 q-3 -24 4 -37 M236 274 q8 -17 12 -29"/>
    <path d="M286 273 q-6 -19 -1 -31 M296 274 q9 -18 12 -28"/>
    <path d="M345 270 q-3 -18 3 -31 M355 270 q8 -17 12 -28"/>
    <path d="M405 266 q-4 -22 2 -35 M416 266 q9 -17 13 -28"/>
    <path d="M472 263 q-3 -18 3 -30 M482 263 q8 -19 13 -29"/>
    <path d="M535 263 q-6 -19 -1 -31 M546 264 q9 -19 13 -30"/>
    <path d="M598 266 q-3 -24 4 -37 M609 267 q8 -19 12 -31"/>
    <path d="M665 271 q-6 -17 -1 -29 M676 271 q9 -17 13 -28"/>
    <path d="M735 273 q-4 -22 3 -34 M746 273 q8 -18 12 -29"/>
    <path d="M805 272 q-6 -18 -1 -30 M816 271 q9 -17 13 -27"/>
    <path d="M875 265 q-3 -23 4 -35 M886 265 q8 -18 12 -28"/>
    <path d="M945 258 q-5 -18 1 -30 M955 258 q9 -17 12 -28"/>
    <path d="M1018 256 q-3 -22 4 -34 M1029 256 q8 -18 12 -28"/>
    <path d="M1090 259 q-5 -20 1 -31 M1101 259 q8 -18 12 -29"/>
    <path d="M1162 264 q-3 -24 4 -36 M1173 264 q8 -18 12 -30"/>
    <path d="M1234 269 q-5 -19 1 -31 M1245 269 q8 -17 12 -28"/>
    <path d="M1304 273 q-3 -23 4 -35 M1315 273 q8 -18 12 -29"/>
    <path d="M1374 272 q-5 -18 1 -29 M1385 272 q8 -18 12 -28"/>
    <path d="M1445 268 q-3 -22 4 -34 M1456 268 q8 -17 12 -28"/>
    <path d="M1515 264 q-5 -20 1 -31 M1526 264 q8 -18 12 -29"/>
    <path d="M1570 263 q-3 -21 4 -33 M1581 263 q8 -17 12 -28"/>
  </g>
  <!-- Extra foreground tufts -->
  <g class="meadow" fill="#579a40">
    <path d="M80 320 l15 -45 3 45 14 -57 0 57 20 -38 -7 38z"/>
    <path d="M365 320 l10 -37 5 37 15 -49 -2 49 20 -34 -7 34z"/>
    <path d="M710 320 l13 -42 3 42 15 -54 -1 54 20 -38 -8 38z"/>
    <path d="M1040 320 l10 -35 5 35 14 -49 0 49 18 -32 -6 32z"/>
    <path d="M1360 320 l13 -43 3 43 16 -55 -2 55 20 -37 -7 37z"/>
  </g>
  <!-- Flowers (sway gently; each wrapped in a classed group so the CSS
       transform doesn't clobber the placement transform) -->
  <g class="meadow">
    <g class="flower">
      <g transform="translate(190 270)">
        <path d="M0 8 Q-2 25 -4 42" stroke="#42833a" stroke-width="2" fill="none"/>
        <g fill="#ff8aa7">
          <circle cx="-5" cy="0" r="5"/>
          <circle cx="5" cy="0" r="5"/>
          <circle cx="0" cy="-5" r="5"/>
          <circle cx="0" cy="5" r="5"/>
        </g>
        <circle r="3" fill="#ffe071"/>
      </g>
    </g>
    <g class="flower">
      <g transform="translate(310 280) scale(.8)">
        <path d="M0 8 Q2 23 1 37" stroke="#42833a" stroke-width="2" fill="none"/>
        <g fill="#fff0a0">
          <circle cx="-5" cy="0" r="5"/>
          <circle cx="5" cy="0" r="5"/>
          <circle cx="0" cy="-5" r="5"/>
          <circle cx="0" cy="5" r="5"/>
        </g>
        <circle r="3" fill="#ef7191"/>
      </g>
    </g>
    <g class="flower">
      <g transform="translate(540 265)">
        <path d="M0 8 Q-2 25 -2 42" stroke="#42833a" stroke-width="2" fill="none"/>
        <g fill="#ff8aa7">
          <circle cx="-5" cy="0" r="5"/>
          <circle cx="5" cy="0" r="5"/>
          <circle cx="0" cy="-5" r="5"/>
          <circle cx="0" cy="5" r="5"/>
        </g>
        <circle r="3" fill="#ffe071"/>
      </g>
    </g>
    <g class="flower">
      <g transform="translate(670 279) scale(.7)">
        <g fill="#fff0a0">
          <circle cx="-5" cy="0" r="5"/>
          <circle cx="5" cy="0" r="5"/>
          <circle cx="0" cy="-5" r="5"/>
          <circle cx="0" cy="5" r="5"/>
        </g>
        <circle r="3" fill="#ef7191"/>
      </g>
    </g>
    <g class="flower">
      <g transform="translate(845 272)">
        <path d="M0 8 Q2 25 0 42" stroke="#42833a" stroke-width="2" fill="none"/>
        <g fill="#ff8aa7">
          <circle cx="-5" cy="0" r="5"/>
          <circle cx="5" cy="0" r="5"/>
          <circle cx="0" cy="-5" r="5"/>
          <circle cx="0" cy="5" r="5"/>
        </g>
        <circle r="3" fill="#ffe071"/>
      </g>
    </g>
    <g class="flower">
      <g transform="translate(1010 265) scale(.85)">
        <path d="M0 8 Q-2 24 -1 38" stroke="#42833a" stroke-width="2" fill="none"/>
        <g fill="#fff0a0">
          <circle cx="-5" cy="0" r="5"/>
          <circle cx="5" cy="0" r="5"/>
          <circle cx="0" cy="-5" r="5"/>
          <circle cx="0" cy="5" r="5"/>
        </g>
        <circle r="3" fill="#ef7191"/>
      </g>
    </g>
    <g class="flower">
      <g transform="translate(1190 275)">
        <g fill="#ff8aa7">
          <circle cx="-5" cy="0" r="5"/>
          <circle cx="5" cy="0" r="5"/>
          <circle cx="0" cy="-5" r="5"/>
          <circle cx="0" cy="5" r="5"/>
        </g>
        <circle r="3" fill="#ffe071"/>
      </g>
    </g>
    <g class="flower">
      <g transform="translate(1410 269)">
        <path d="M0 8 Q2 26 0 42" stroke="#42833a" stroke-width="2" fill="none"/>
        <g fill="#fff0a0">
          <circle cx="-5" cy="0" r="5"/>
          <circle cx="5" cy="0" r="5"/>
          <circle cx="0" cy="-5" r="5"/>
          <circle cx="0" cy="5" r="5"/>
        </g>
        <circle r="3" fill="#ef7191"/>
      </g>
    </g>
    <g class="flower">
      <g transform="translate(1510 282) scale(.72)">
        <g fill="#ff8aa7">
          <circle cx="-5" cy="0" r="5"/>
          <circle cx="5" cy="0" r="5"/>
          <circle cx="0" cy="-5" r="5"/>
          <circle cx="0" cy="5" r="5"/>
        </g>
        <circle r="3" fill="#ffe071"/>
      </g>
    </g>
  </g>
  <!-- Small scattered meadow dots -->
  <g class="meadow" fill="#ffe071" opacity=".9">
    <circle cx="250" cy="287" r="2.5"/>
    <circle cx="445" cy="281" r="2.5"/>
    <circle cx="615" cy="289" r="2.5"/>
    <circle cx="760" cy="283" r="2.5"/>
    <circle cx="930" cy="279" r="2.5"/>
    <circle cx="1125" cy="287" r="2.5"/>
    <circle cx="1290" cy="281" r="2.5"/>
  </g>
  <g class="meadow" fill="#ff8aa7" opacity=".8">
    <circle cx="120" cy="291" r="2.5"/>
    <circle cx="395" cy="291" r="2.5"/>
    <circle cx="730" cy="294" r="2.5"/>
    <circle cx="1080" cy="294" r="2.5"/>
    <circle cx="1460" cy="291" r="2.5"/>
  </g>
  <!-- Soft fade into the page background -->
  <rect y="252" width="1600" height="68" fill="url(#meadowFade)"/>
 </svg>
@@ -0,0 +1,143 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="300" height="9" viewBox="0 0 300 9">
 <g fill="none" stroke-linecap="round">
  <path d="M1.0 9 q2.0 -3.0 1.5 -5.5" stroke="#579a40" stroke-width="1.0"/>
  <path d="M3.5 9 q1.7 -4.1 3.0 -7.5" stroke="#579a40" stroke-width="1.6"/>
  <path d="M6.3 9 q-2.0 -3.8 -1.8 -6.9" stroke="#63ad4d" stroke-width="0.8"/>
  <path d="M8.4 9 q-1.7 -2.3 -3.1 -4.2" stroke="#74b65e" stroke-width="1.2"/>
  <path d="M11.0 9 q0.6 -3.5 1.8 -6.3" stroke="#4f913b" stroke-width="1.3"/>
  <path d="M12.7 9 q-0.4 -2.6 -1.9 -4.8" stroke="#63ad4d" stroke-width="0.8"/>
  <path d="M14.3 9 q-2.3 -2.9 2.5 -5.3" stroke="#4f913b" stroke-width="1.4"/>
  <path d="M16.9 9 q1.8 -4.5 -2.9 -8.1" stroke="#74b65e" stroke-width="1.8"/>
  <path d="M19.5 9 q0.5 -2.6 2.9 -4.7" stroke="#63ad4d" stroke-width="1.4"/>
  <path d="M22.5 9 q2.3 -2.1 -1.7 -3.9" stroke="#579a40" stroke-width="1.7"/>
  <path d="M25.2 9 q-2.1 -4.4 -3.8 -7.9" stroke="#42833a" stroke-width="1.0"/>
  <path d="M27.7 9 q-1.9 -4.5 -3.8 -8.2" stroke="#74b65e" stroke-width="1.4"/>
  <path d="M29.4 9 q-0.3 -3.7 -3.1 -6.7" stroke="#579a40" stroke-width="1.4"/>
  <path d="M31.0 9 q-0.9 -3.5 0.1 -6.3" stroke="#579a40" stroke-width="0.9"/>
  <path d="M32.6 9 q-0.9 -4.3 1.1 -7.8" stroke="#4f913b" stroke-width="1.4"/>
  <path d="M35.7 9 q-1.4 -2.4 2.3 -4.3" stroke="#63ad4d" stroke-width="1.5"/>
  <path d="M36.9 9 q-0.4 -3.2 0.0 -5.8" stroke="#63ad4d" stroke-width="1.6"/>
  <path d="M38.5 9 q1.1 -4.6 0.6 -8.4" stroke="#63ad4d" stroke-width="1.2"/>
  <path d="M41.3 9 q2.3 -2.9 4.0 -5.4" stroke="#63ad4d" stroke-width="1.8"/>
  <path d="M43.3 9 q1.6 -2.6 4.5 -4.7" stroke="#4f913b" stroke-width="1.0"/>
  <path d="M45.4 9 q-0.3 -2.6 -2.1 -4.8" stroke="#63ad4d" stroke-width="0.8"/>
  <path d="M47.0 9 q0.0 -4.3 -3.8 -7.8" stroke="#42833a" stroke-width="1.6"/>
  <path d="M49.6 9 q1.6 -3.1 0.3 -5.7" stroke="#4f913b" stroke-width="1.4"/>
  <path d="M51.6 9 q-1.2 -2.7 -0.2 -4.9" stroke="#74b65e" stroke-width="1.2"/>
  <path d="M53.7 9 q-1.0 -2.4 3.6 -4.3" stroke="#579a40" stroke-width="1.6"/>
  <path d="M55.7 9 q1.4 -2.1 3.5 -3.9" stroke="#579a40" stroke-width="1.2"/>
  <path d="M58.4 9 q-0.6 -2.6 0.7 -4.8" stroke="#579a40" stroke-width="1.2"/>
  <path d="M60.9 9 q-2.3 -2.4 -3.7 -4.4" stroke="#579a40" stroke-width="1.0"/>
  <path d="M62.7 9 q1.0 -2.3 -1.3 -4.1" stroke="#579a40" stroke-width="0.8"/>
  <path d="M64.9 9 q-0.3 -4.0 -3.5 -7.2" stroke="#42833a" stroke-width="1.3"/>
  <path d="M67.6 9 q1.7 -4.2 4.2 -7.6" stroke="#579a40" stroke-width="0.9"/>
  <path d="M70.5 9 q-0.9 -2.3 1.3 -4.1" stroke="#42833a" stroke-width="1.7"/>
  <path d="M72.8 9 q-0.2 -2.9 -2.9 -5.2" stroke="#42833a" stroke-width="1.0"/>
  <path d="M74.3 9 q-0.5 -2.9 4.5 -5.2" stroke="#42833a" stroke-width="1.4"/>
  <path d="M76.9 9 q-1.6 -2.3 0.5 -4.1" stroke="#42833a" stroke-width="1.7"/>
  <path d="M78.4 9 q1.1 -5.1 -0.4 -9.2" stroke="#579a40" stroke-width="1.0"/>
  <path d="M80.6 9 q-1.2 -3.8 2.1 -6.9" stroke="#42833a" stroke-width="1.8"/>
  <path d="M81.9 9 q-1.7 -2.7 -2.8 -5.0" stroke="#42833a" stroke-width="1.0"/>
  <path d="M83.8 9 q1.8 -3.1 4.5 -5.7" stroke="#74b65e" stroke-width="0.8"/>
  <path d="M85.8 9 q-0.7 -4.0 -0.4 -7.3" stroke="#42833a" stroke-width="0.8"/>
  <path d="M88.0 9 q-1.6 -5.0 -0.1 -9.2" stroke="#63ad4d" stroke-width="0.8"/>
  <path d="M90.9 9 q1.5 -4.4 2.2 -7.9" stroke="#74b65e" stroke-width="1.5"/>
  <path d="M92.3 9 q1.5 -3.3 1.5 -6.0" stroke="#579a40" stroke-width="1.2"/>
  <path d="M94.7 9 q-0.4 -3.4 0.2 -6.2" stroke="#63ad4d" stroke-width="1.0"/>
  <path d="M96.4 9 q-2.1 -4.8 -1.6 -8.7" stroke="#4f913b" stroke-width="1.7"/>
  <path d="M99.3 9 q-0.1 -4.9 0.3 -8.9" stroke="#4f913b" stroke-width="1.7"/>
  <path d="M101.1 9 q1.0 -4.6 1.4 -8.4" stroke="#4f913b" stroke-width="0.8"/>
  <path d="M103.6 9 q-1.6 -4.8 -0.8 -8.8" stroke="#4f913b" stroke-width="1.7"/>
  <path d="M105.1 9 q-2.5 -2.1 1.7 -3.9" stroke="#74b65e" stroke-width="1.5"/>
  <path d="M108.0 9 q1.2 -2.2 -3.6 -3.9" stroke="#74b65e" stroke-width="1.8"/>
  <path d="M110.5 9 q1.0 -4.2 2.3 -7.6" stroke="#579a40" stroke-width="1.6"/>
  <path d="M113.6 9 q0.2 -2.4 2.7 -4.4" stroke="#42833a" stroke-width="1.5"/>
  <path d="M115.8 9 q-0.7 -4.6 -1.1 -8.3" stroke="#579a40" stroke-width="1.0"/>
  <path d="M117.8 9 q-2.0 -3.2 3.7 -5.8" stroke="#579a40" stroke-width="1.1"/>
  <path d="M119.2 9 q-1.0 -4.8 1.2 -8.7" stroke="#4f913b" stroke-width="1.6"/>
  <path d="M121.9 9 q-0.2 -4.7 -3.9 -8.5" stroke="#4f913b" stroke-width="1.7"/>
  <path d="M125.0 9 q0.4 -2.2 -0.7 -3.9" stroke="#42833a" stroke-width="1.6"/>
  <path d="M127.3 9 q-1.6 -5.0 -0.4 -9.0" stroke="#74b65e" stroke-width="1.4"/>
  <path d="M129.3 9 q-0.2 -4.1 4.2 -7.4" stroke="#42833a" stroke-width="1.1"/>
  <path d="M131.7 9 q-1.7 -2.6 -0.4 -4.7" stroke="#42833a" stroke-width="1.2"/>
  <path d="M133.0 9 q2.2 -4.9 -0.0 -8.9" stroke="#579a40" stroke-width="1.2"/>
  <path d="M134.8 9 q-1.2 -4.4 -0.5 -8.0" stroke="#42833a" stroke-width="1.6"/>
  <path d="M137.2 9 q2.3 -4.9 1.1 -8.8" stroke="#42833a" stroke-width="1.3"/>
  <path d="M139.4 9 q-2.1 -4.4 2.3 -7.9" stroke="#4f913b" stroke-width="0.9"/>
  <path d="M141.6 9 q1.3 -2.4 2.5 -4.4" stroke="#74b65e" stroke-width="1.4"/>
  <path d="M143.3 9 q1.8 -3.5 2.7 -6.4" stroke="#74b65e" stroke-width="1.4"/>
  <path d="M146.0 9 q0.1 -4.9 0.9 -8.9" stroke="#579a40" stroke-width="0.8"/>
  <path d="M147.2 9 q2.3 -3.6 -2.1 -6.5" stroke="#42833a" stroke-width="1.5"/>
  <path d="M149.9 9 q0.8 -3.0 4.6 -5.4" stroke="#63ad4d" stroke-width="0.9"/>
  <path d="M151.7 9 q2.5 -3.7 2.8 -6.8" stroke="#74b65e" stroke-width="1.7"/>
  <path d="M154.4 9 q-1.8 -2.5 2.6 -4.5" stroke="#63ad4d" stroke-width="1.8"/>
  <path d="M155.9 9 q2.4 -4.9 3.1 -8.9" stroke="#63ad4d" stroke-width="1.2"/>
  <path d="M158.8 9 q2.4 -3.5 2.3 -6.3" stroke="#63ad4d" stroke-width="1.2"/>
  <path d="M161.5 9 q-1.5 -4.1 2.1 -7.5" stroke="#63ad4d" stroke-width="1.7"/>
  <path d="M164.2 9 q2.4 -3.4 -1.4 -6.1" stroke="#63ad4d" stroke-width="1.1"/>
  <path d="M166.1 9 q1.0 -2.4 2.1 -4.3" stroke="#74b65e" stroke-width="1.1"/>
  <path d="M167.7 9 q-1.2 -5.2 1.7 -9.4" stroke="#579a40" stroke-width="1.0"/>
  <path d="M169.8 9 q0.9 -5.0 1.2 -9.1" stroke="#74b65e" stroke-width="1.7"/>
  <path d="M171.9 9 q-2.3 -5.1 0.1 -9.2" stroke="#63ad4d" stroke-width="1.4"/>
  <path d="M174.8 9 q-2.3 -4.0 -2.4 -7.4" stroke="#42833a" stroke-width="1.8"/>
  <path d="M176.1 9 q2.3 -3.9 3.4 -7.1" stroke="#74b65e" stroke-width="1.6"/>
  <path d="M178.2 9 q2.3 -2.2 2.4 -4.1" stroke="#579a40" stroke-width="1.7"/>
  <path d="M179.6 9 q-0.5 -3.2 -3.3 -5.8" stroke="#4f913b" stroke-width="1.1"/>
  <path d="M181.1 9 q-2.1 -3.9 1.2 -7.0" stroke="#4f913b" stroke-width="1.4"/>
  <path d="M183.7 9 q-2.5 -3.2 0.2 -5.8" stroke="#4f913b" stroke-width="1.7"/>
  <path d="M186.2 9 q0.9 -4.4 0.1 -8.1" stroke="#42833a" stroke-width="1.3"/>
  <path d="M188.7 9 q-1.1 -2.8 1.0 -5.1" stroke="#579a40" stroke-width="1.1"/>
  <path d="M190.3 9 q-0.9 -3.0 -3.0 -5.5" stroke="#579a40" stroke-width="1.8"/>
  <path d="M193.2 9 q0.2 -5.1 0.9 -9.3" stroke="#4f913b" stroke-width="0.9"/>
  <path d="M195.3 9 q-1.0 -2.3 -3.2 -4.2" stroke="#4f913b" stroke-width="1.7"/>
  <path d="M196.9 9 q-1.2 -2.7 1.3 -5.0" stroke="#4f913b" stroke-width="0.9"/>
  <path d="M199.2 9 q-1.5 -4.5 4.5 -8.1" stroke="#63ad4d" stroke-width="1.1"/>
  <path d="M201.6 9 q1.9 -3.7 -0.1 -6.7" stroke="#63ad4d" stroke-width="1.8"/>
  <path d="M202.8 9 q-0.3 -2.2 0.4 -3.9" stroke="#42833a" stroke-width="1.6"/>
  <path d="M205.5 9 q0.7 -4.2 3.1 -7.6" stroke="#579a40" stroke-width="0.9"/>
  <path d="M207.3 9 q0.4 -4.3 -2.1 -7.8" stroke="#63ad4d" stroke-width="0.9"/>
  <path d="M209.9 9 q2.0 -3.4 -0.4 -6.3" stroke="#4f913b" stroke-width="1.6"/>
  <path d="M211.1 9 q-1.7 -2.1 0.8 -3.8" stroke="#4f913b" stroke-width="1.5"/>
  <path d="M214.0 9 q-2.0 -2.5 4.3 -4.6" stroke="#579a40" stroke-width="0.9"/>
  <path d="M215.6 9 q-2.2 -2.2 -2.1 -4.0" stroke="#74b65e" stroke-width="1.0"/>
  <path d="M217.1 9 q-1.8 -3.1 -0.9 -5.6" stroke="#63ad4d" stroke-width="1.3"/>
  <path d="M220.0 9 q1.4 -4.7 -1.8 -8.5" stroke="#42833a" stroke-width="1.8"/>
  <path d="M223.1 9 q0.9 -3.4 -1.5 -6.2" stroke="#42833a" stroke-width="1.7"/>
  <path d="M225.3 9 q2.4 -3.5 -3.8 -6.3" stroke="#4f913b" stroke-width="0.9"/>
  <path d="M227.1 9 q2.2 -3.8 -3.0 -7.0" stroke="#579a40" stroke-width="1.0"/>
  <path d="M229.7 9 q2.1 -4.4 4.4 -8.0" stroke="#74b65e" stroke-width="1.3"/>
  <path d="M231.0 9 q-1.2 -4.8 2.8 -8.7" stroke="#63ad4d" stroke-width="1.6"/>
  <path d="M232.7 9 q-0.9 -3.1 -3.3 -5.6" stroke="#63ad4d" stroke-width="1.5"/>
  <path d="M234.8 9 q2.1 -4.6 0.4 -8.4" stroke="#4f913b" stroke-width="1.0"/>
  <path d="M237.9 9 q-0.9 -4.6 -0.1 -8.4" stroke="#74b65e" stroke-width="1.4"/>
  <path d="M239.4 9 q1.6 -4.7 -1.0 -8.5" stroke="#579a40" stroke-width="1.6"/>
  <path d="M241.3 9 q1.9 -5.1 0.9 -9.4" stroke="#579a40" stroke-width="1.4"/>
  <path d="M244.3 9 q-2.2 -3.6 -1.9 -6.6" stroke="#42833a" stroke-width="1.1"/>
  <path d="M245.6 9 q1.7 -4.2 -1.7 -7.6" stroke="#579a40" stroke-width="1.4"/>
  <path d="M247.1 9 q0.1 -3.1 2.0 -5.7" stroke="#42833a" stroke-width="1.5"/>
  <path d="M249.5 9 q-2.2 -3.8 -2.2 -6.9" stroke="#42833a" stroke-width="0.9"/>
  <path d="M251.5 9 q-2.1 -4.4 3.5 -8.0" stroke="#579a40" stroke-width="0.9"/>
  <path d="M253.2 9 q0.8 -4.3 0.7 -7.8" stroke="#4f913b" stroke-width="1.7"/>
  <path d="M255.5 9 q1.4 -2.2 -2.9 -4.0" stroke="#4f913b" stroke-width="1.4"/>
  <path d="M258.1 9 q1.9 -4.6 1.0 -8.3" stroke="#63ad4d" stroke-width="1.2"/>
  <path d="M260.5 9 q-1.9 -4.8 -3.7 -8.6" stroke="#579a40" stroke-width="1.4"/>
  <path d="M263.5 9 q1.4 -3.9 -1.3 -7.2" stroke="#4f913b" stroke-width="1.1"/>
  <path d="M265.2 9 q-0.9 -4.8 2.7 -8.7" stroke="#42833a" stroke-width="0.9"/>
  <path d="M267.4 9 q2.5 -2.2 3.0 -4.1" stroke="#4f913b" stroke-width="1.5"/>
  <path d="M269.4 9 q-1.8 -1.9 -3.9 -3.5" stroke="#579a40" stroke-width="1.5"/>
  <path d="M272.3 9 q-1.8 -4.5 2.9 -8.2" stroke="#74b65e" stroke-width="1.1"/>
  <path d="M274.0 9 q-0.6 -2.2 1.8 -3.9" stroke="#4f913b" stroke-width="1.6"/>
  <path d="M276.4 9 q1.2 -2.8 -3.9 -5.1" stroke="#63ad4d" stroke-width="1.5"/>
  <path d="M277.7 9 q2.4 -4.2 3.0 -7.7" stroke="#4f913b" stroke-width="1.1"/>
  <path d="M279.6 9 q0.6 -5.0 -3.3 -9.2" stroke="#4f913b" stroke-width="1.4"/>
  <path d="M282.5 9 q0.6 -3.5 1.2 -6.3" stroke="#4f913b" stroke-width="1.2"/>
  <path d="M284.0 9 q-2.4 -3.8 -2.5 -6.8" stroke="#74b65e" stroke-width="1.5"/>
  <path d="M285.6 9 q-1.6 -5.2 -2.4 -9.4" stroke="#63ad4d" stroke-width="1.5"/>
  <path d="M288.4 9 q1.6 -2.4 3.1 -4.4" stroke="#63ad4d" stroke-width="1.2"/>
  <path d="M290.2 9 q-1.9 -3.0 2.9 -5.4" stroke="#63ad4d" stroke-width="0.8"/>
  <path d="M291.6 9 q-0.5 -2.7 -2.1 -4.9" stroke="#579a40" stroke-width="1.8"/>
  <path d="M294.2 9 q0.8 -3.7 4.4 -6.7" stroke="#63ad4d" stroke-width="0.9"/>
  <path d="M296.6 9 q1.2 -3.7 4.2 -6.7" stroke="#74b65e" stroke-width="0.9"/>
  <path d="M298.1 9 q1.0 -3.8 3.9 -7.0" stroke="#42833a" stroke-width="0.8"/>
 </g>
 </svg>
@@ -0,0 +1,267 @@
 /* Summer theme: the banner's illustrated meadow carried through the whole
   page — one palette (sky blue, grass green, sun yellow, flower pink),
   soft daylight surfaces, and playful touches like a tilted brand and
   flower bullets. */
 :root {
  color-scheme: light;
  /* Every color is sampled (or text-darkened) from banner.svg. */
  --bg: #e6f4cf;
  /* pale meadow — the banner fades into this */
  --surface: #f8fbf0;
  --text: #2c4a2f;
  /* deep leaf */
  --muted: #5c7a5e;
  --accent: #2598d6;
  /* sky, darkened for text contrast */
  --accent2: #4f913b;
  /* grass */
  --accent3: #e95f83;
  /* flower pink, darkened for text contrast */
  --sun: #ffe071;
  --line: #4f913b29;
  --link: color-mix(in oklab, var(--text) 38%, var(--accent));
  --font-body: var(--font-cause);
  --font-heading: var(--font-new-rocker);
  --font-brand: var(--font-cause);
 }
 /* The page is the same landscape the banner paints: hazy sky light up top
   (with an echo of the banner's sun in the top-right corner) settling into
   a pale meadow below. Fixed, so the banner parallax reads against a
   still backdrop. */
 body {
  background:
    radial-gradient(ellipse 36rem 24rem at 85% -6rem,
      #fff0a299 0,
      #fff0a63d 45%,
      transparent 70%),
    radial-gradient(ellipse 42rem 26rem at 6% 2rem,
      #8ed0ff4d 0,
      transparent 70%),
    radial-gradient(ellipse 30rem 22rem at 96% 62%,
      #ff8aa726 0,
      transparent 70%),
    linear-gradient(180deg,
      var(--bg) 0,
      #d9eebd 24rem,
      #c6e5a8 55rem,
      #b8dd9c 100%);
  background-attachment: fixed;
  color: var(--text);
 }
 ::selection {
  background: var(--sun);
  color: #3d5223;
 }
 /* The banner frame ties into the meadow beneath it. */
 #banner {
  border-bottom-color: #4f913b30;
  box-shadow: 0 0.3rem 1rem #4f913b22;
 }
 /* Cheerful oversized tilted brand in a sky→grass→flower gradient. */
 #brand {
  font-size: clamp(3.2rem, 9vw, 7.5rem);
  line-height: 1;
  padding-bottom: 0.3em;
  margin-bottom: -0.3em;
  transform: rotate(-2deg);
  transform-origin: left bottom;
  background: linear-gradient(100deg,
      var(--accent) 0 30%,
      var(--accent2) 55%,
      var(--accent3) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter:
    drop-shadow(0 1px 0 #fff) drop-shadow(0 0.15rem 0.15rem #ffffff99) drop-shadow(0 0.3rem 0.4rem #4f913b33);
 }
 /* Navigation floats over the artwork: dark leaf text with a daylight halo. */
 #nav {
  color: #24452d;
  text-shadow:
    0 1px #ffffff,
    0 0 0.2em #ffffff,
    0 0 0.5em #d9f1ff;
 }
 #nav a {
  color: #2c4a2f;
 }
 #nav ul ul a,
 #nav span {
  color: #527048;
 }
 #nav a:hover,
 #nav .current {
  color: var(--accent);
 }
 /* Content sits in a soft wash of sunlit meadow rather than on a white
   card. */
 main {
  background: linear-gradient(90deg,
      transparent,
      #f0f8dc80 15%,
      #f0f8dc8c 50%,
      #f0f8dc80 85%,
      transparent);
 }
 /* The sidebar is a piece of the same meadow: glassy green with a light
   top edge and a grassy shadow. */
 #sidebar {
  background: linear-gradient(160deg, #f4faddd9, #d9eec5cf);
  border-right: 1px solid #ffffff80;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 0.3rem 1rem #4f913b1f;
 }
 #sidebar a {
  color: #527048;
 }
 #sidebar a:hover,
 #sidebar .current {
  color: var(--accent);
 }
 /* One accent per heading level: sky h1 growing a dense low strip of grass
   right against its baseline (grass.svg, ~140 varied blades per tile,
   served by the backend next to this stylesheet), grass h2, flower h3 in
   a quieter weight. */
 article h1 {
  color: var(--accent);
  width: fit-content;
  text-shadow: 0 1px #ffffffaa;
  background: url("grass.svg") bottom left / auto 0.35em repeat-x;
 }
 article h2 {
  color: var(--accent2);
  text-shadow: 0 1px #ffffff88;
 }
 article h3 {
  color: var(--accent3);
  font-weight: 550;
 }
 article a {
  color: var(--link);
 }
 article a:hover {
  color: var(--accent);
 }
 /* Flower bullets, one accent per nesting level. */
 article ul li::before {
  content: "❀";
  color: var(--accent3);
  font-size: 0.8em;
  vertical-align: 0.1em;
 }
 article ul ul li::before {
  content: "✿";
  color: var(--accent);
 }
 article ul ul ul li::before {
  content: "❁";
  color: var(--accent2);
 }
 /* Quotes get a grassy edge and a wash of sunlight. */
 blockquote {
  color: #4d6849;
  border-left-color: var(--accent2);
  background: linear-gradient(90deg, #fff0a238, transparent 70%);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
 }
 /* Admonitions join the rounded, softly shaded landscape elements. */
 .admonition {
  border-radius: 0.6rem;
  box-shadow: 0 0.2rem 0.7rem #4f913b1a;
 }
 /* Code rests on a shaded leaf panel, keeping the base light syntax
   palette. */
 pre {
  --code-bg: #e7f1d6;
  background: linear-gradient(160deg, #f0f7e2, #ddebc9);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px #ffffff99,
    0 0.2rem 0.6rem #4f913b1a;
 }
 .copy {
  background: linear-gradient(180deg, #f6faec, #e2efcf);
  border-color: var(--line);
 }
 /* Tables: a rounded piece of the landscape. The base's header-gradient
   hooks get sky→grass colors and the cell wash tints green; soft corners
   and a grassy shadow replace the old hard grid. */
 table {
  --table-head-a: #fdfccd88;
  --table-head-b: #ece9ba88;
  --table-tint: var(--accent2);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.7rem;
  overflow: clip;
  box-shadow: 0 0.1rem 0.5rem #4f913b88;
 }
 th {
  color: #2c4a2f;
 }
 /* A sun-kissed sheen on hover, fading in over the cell wash. */
 tbody td {
  transition: background-color 0.2s;
 }
 tbody tr:hover td {
  background-color: #fff0a238;
 }
 figcaption,
 .dateline,
 .footnote {
  color: var(--muted);
 }
 /* Editor chrome inherits the meadow rather than the base white. */
 .editor-root.overlay {
  background: linear-gradient(160deg, #eef7dd, #d9eec5);
 }
 /* The page transition exposes summer color around the rotating
   snapshots. */
 ::view-transition {
  background: var(--bg);
 }
@@ -15,8 +15,10 @@ own URL renders a placeholder page (render_category).
 """
 from pathlib import Path
 from html import unescape
 import json
 import os
 import re
 from html5tagger import HTML, Document, E, Template
@@ -25,11 +27,13 @@ from pagerite.markdown import has_h1, render
 SITE_NAME = "Pagerite"
 BUILD = Path(__file__).with_name("frontend-build")
 THEMES = Path(__file__).parent / "themes"
-# Shared CSS built as separate entries so the backend can link base and theme
+# The base CSS is built by Vite as a separate entry so the backend can link
-# independently. Order matters: base first, theme overrides it.
+# it independently of the theme. Themes and banner designs are plain .css
 # files in THEMES/{name}/, served by the backend at /_themes/{name}/... and
 # re-read from disk on every request (see app.py), so they are never built.
 _BASE_CSS_KEY = "src/assets/pagerite.css"
 _THEME_CSS_KEY = "src/assets/themes/{theme}/theme.css"
 _manifest_cache: dict | None = None
 _asset_cache: dict[str, tuple] = {}
@@ -42,29 +46,54 @@ def _manifest() -> dict:
    return _manifest_cache
-def _css_keys(theme: str) -> list[str]:
+def _theme_names() -> list[str]:
-    """Manifest keys for the stylesheets to load for ``theme`` (empty = none)."""
+    """Theme folders on disk (a folder is a theme when it has theme.css)."""
-    keys = [_BASE_CSS_KEY]
+    return sorted(
-    if theme:
+        d.name for d in THEMES.iterdir() if d.is_dir() and (d / "theme.css").exists()
-        keys.append(_THEME_CSS_KEY.format(theme=theme))
+    )
    return keys
-def _shared_css_urls(vite_url: str | None, theme: str) -> list[str]:
+def _banner_design_names() -> list[str]:
-    """URLs for the base and theme stylesheets.
+    """Available banner designs: theme folders with artwork and/or styles."""
    return sorted(
        d.name
        for d in THEMES.iterdir()
        if d.is_dir()
        and any((d / f).exists() for f in ("banner.css", "banner.svg", "banner.html"))
    )
-    In dev the JS entries import these files, so Vite injects them; the
+
-    backend does not link them, avoiding the HMR-wrapped module output.
+def _valid_name(name: str) -> bool:
-    Themes added after the last frontend build are missing from the
+    """Guard against path traversal in theme/design names."""
-    manifest — fall back to the base stylesheet rather than failing.
+    return bool(name) and "/" not in name and not name.startswith(".")
-    """
+
 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)."""
    if vite_url:
-        return []
+        return None
    manifest = _manifest()
-    return [f"/{manifest[key]['file']}" for key in _css_keys(theme) if key in manifest]
+    if _BASE_CSS_KEY in manifest:
        return f"/{manifest[_BASE_CSS_KEY]['file']}"
    return None
-def _editor_css_url(vite_url: str | None, theme: str) -> 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():
        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():
        return f"/_themes/{design}/banner.css"
    return None
 def _editor_css_url(vite_url: str | None) -> str | None:
    """URL for the editor-specific stylesheet (Vue component styles).
    This is linked by the public-page edit pen so the editor styles are
@@ -74,47 +103,80 @@ def _editor_css_url(vite_url: str | None, theme: str) -> str | None:
        return None
    manifest = _manifest()
    entry = manifest["src/main.js"]
-    shared_files = {manifest[key]["file"] for key in _css_keys(theme)}
+    base = manifest.get(_BASE_CSS_KEY, {}).get("file")
    for css in entry.get("css", []):
-        if css not in shared_files:
+        if css != base:
            return f"/{css}"
    return None
 def _layout(
    urls: list[str],
    modules: list[str] = (),
    stylesheets: list[str] = (),
    custom_css: str = "",
    theme: str = "",
    banner_design: str = "",
    favicon: str = "",
    social: dict[str, str] | None = None,
    extra_meta: dict[str, str] | None = None,
 ) -> Template:
    """Page layout template with standard asset URLs and ES-module scripts.
    Stylesheets use ``blocking="render"`` so the browser waits for them before
-    showing the page, avoiding a flash of unstyled content.
+    showing the page, avoiding a flash of unstyled content. Order matters and
    is fixed: base (Vite build, absent in dev where Vite injects it from JS),
    theme and banner design (backend-served from pagerite/themes/), entry-
    specific stylesheets (e.g. overlayscrollbars.css), then the user's custom
    CSS last so it always wins.
-    The active theme is named in a meta tag so that in dev (where the
+    In dev, pagerite.js re-appends the backend-rendered theme/design links
-    backend links no stylesheets and Vite injects them from JS) the
+    (and the custom CSS) after the Vite-injected base styles, keeping this
-    frontend entries know which theme CSS module to import.
+    order intact.
    ``social`` maps meta keys to contents: ``og:*``/``article:*`` go out as
    property attributes, everything else (description, twitter:*) as name.
    ``extra_meta`` is emitted as plain ``<meta name="..." content="...">``
    tags after the editor meta tags; used for page-specific import hints.
    """
    doc = Document(E.Title, lang="en")
-    if theme:
+    # Responsive layout (see the 48rem breakpoint in pagerite.css) needs
-        doc.meta(name="pagerite:theme", content=theme)
+    # the real device width, not the default 980px layout viewport.
    doc.meta(name="viewport", content="width=device-width, initial-scale=1")
    for key, value in (social or {}).items():
        if value:
            if key.startswith(("og:", "article:")):
                doc.meta(property=key, content=value)
            elif key == "canonical":
                doc.link(rel="canonical", href=value)
            else:
                doc.meta(name=key, content=value)
    # A custom favicon (from the site editor) is linked explicitly; without
    # one, browsers fall back to the build's /favicon.ico by convention.
    if favicon:
        doc.link(rel="icon", href=f"/_f/{favicon}", id="pagerite-favicon")
    # Editor asset URLs for pagerite.js, which injects the 🖊️ edit pens
    # itself once it has validated the session (pages render identically
    # for everyone; editing is gated by the auth proxy in front of /_api).
-    script, editor_css = _editor_assets(theme)
+    script, editor_css = _editor_assets()
    doc.meta(name="pagerite:editor-src", content=script[-1])
    if editor_css:
        doc.meta(name="pagerite:editor-css", content=editor_css)
    for key, value in (extra_meta or {}).items():
        doc.meta(name=key, content=value)
    # Stylesheet links carry stable ids so the site editor's hot swap can
    # keep each sheet at its rendered position (see swapRegions).
-    for i, url in enumerate(urls):
+    vite_url = os.environ.get("PAGERITE_VITE_URL")
-        doc.link(
+    sheets = [
-            rel="stylesheet",
+        ("pagerite-base", _base_css_url(vite_url)),
-            href=url,
+        ("pagerite-theme", _theme_css_url(theme)),
-            blocking="render",
+        ("pagerite-banner", _banner_css_url(banner_design)),
-            id="pagerite-base" if i == 0 else "pagerite-theme",
+    ]
-        )
+    for id_, url in sheets:
        if url:
            doc.link(rel="stylesheet", href=url, blocking="render", id=id_)
    for url in stylesheets:
        doc.link(rel="stylesheet", href=url, blocking="render")
    for src in modules:
        doc.script(src=src, type="module")
    if custom_css.strip():
@@ -136,8 +198,12 @@ def _layout(
    )
-def _brand_link(brand: str) -> HTML:
+def _brand_link(brand: str, brand_html: str = "") -> HTML:
-    """Header brand link; omitted entirely when no brand is configured."""
+    """Header brand: custom HTML (in a #brand wrapper, rendered instead of
    the link) when configured, else the plain brand link; omitted entirely
    when neither is set."""
    if brand_html.strip():
        return HTML(str(E.div(HTML(brand_html), id="brand")))
    return HTML(str(E.a(brand, href="/", id="brand"))) if brand else HTML("")
@@ -146,14 +212,21 @@ def _title(slug: str, node: Node) -> str:
    return node.title or prettify(slug) or "Home"
-def _nav_link(doc, menu: dict[str, Node], node: Node, path: str, current: str) -> None:
+def _nav_link(
    doc, menu: dict[str, Node], node: Node, path: str, current: str,
    ancestors_current: bool = True,
 ) -> None:
    """Render one <li> linking the node. Category labels (no content of
-    their own) link straight to their first child page, so normal
+    their own — None, or empty markdown as left by the site editor's
-    navigation bypasses the placeholder page at their own URL."""
+    page creation) link straight to their first child page, so normal
-    # A top-level item is current also when viewing any of its subpages.
+    navigation bypasses the placeholder/empty page at their own URL."""
-    is_current = current == path or (path and current.startswith(f"{path}/"))
+    # The navbar highlights a top-level item also when viewing any of its
    # subpages; the sidebar highlights only the actually viewed page.
    is_current = current == path or (
        ancestors_current and path and current.startswith(f"{path}/")
    )
    href = f"/{path}"
-    if node.content is None and (leaf := first_leaf(menu, path)) is not None:
+    if not node.content and (leaf := first_leaf(menu, path)) is not None:
        href = f"/{leaf}"
    doc.li.a(
        _title(path.rpartition("/")[2], node),
@@ -180,11 +253,18 @@ def nav_html(menu: dict[str, Node], current: str) -> HTML:
 def sidebar_html(menu: dict[str, Node], current: str) -> HTML:
    """Render the #sidebar element for the current path (empty when none).
-    The sidebar is the current main level section's sub-navigation, so it
+    The sidebar is the current main level section's sub-navigation: the
    section's direct children as the top list level, with each item's own
    published children nested under it (third level and deeper), so it
    exists only when there is something to navigate: the section must
-    offer at least two published items. The front page, leaf pages and
+    offer at least two published items, or exactly one while viewing
-    one-page sections get no aside element at all (rather than an empty
+    anything else than that only page — the section index, a 404, a
-    or one-item box).
+    grandchild (otherwise those pages offer no way to reach the child) —
    and viewing that only page itself still shows the sidebar when the
    page has published children of its own to reach.
    The front page, leaf pages, the sole childless page of a one-page
    section and childless sections get no aside element at all (rather
    than an empty or useless one-item box).
    """
    if not current:
        return HTML("")
@@ -193,15 +273,31 @@ def sidebar_html(menu: dict[str, Node], current: str) -> HTML:
    if node is None:
        return HTML("")
    items = [(s, c) for s, c in sorted_nodes(node.children) if c.published]
-    if len(items) < 2:
+    if not items:
        return HTML("")
    if len(items) == 1 and current == f"{section}/{items[0][0]}":
        # Viewing the only item: useless unless it has children to reach.
        if not any(c.published for c in items[0][1].children.values()):
            return HTML("")
    nav = E.ul
    with nav:
        for slug, child in items:
-            _nav_link(nav, menu, child, f"{section}/{slug}", current)
+            _sidebar_item(nav, menu, child, f"{section}/{slug}", current)
    return HTML(str(E.aside(nav, id="sidebar")))
 def _sidebar_item(doc, menu: dict[str, Node], node: Node, path: str, current: str) -> None:
    """One sidebar <li>: the node link, with its published children as a
    nested list (third level and deeper, recursively)."""
    _nav_link(doc, menu, node, path, current, ancestors_current=False)
    sub = [(s, c) for s, c in sorted_nodes(node.children) if c.published]
    if sub:
        # doc.li.a(...) above left the <li> open for nesting.
        with doc.ul:
            for slug, child in sub:
                _sidebar_item(doc, menu, child, f"{path}/{slug}", current)
 def first_leaf(menu: dict[str, Node], path: str) -> str | None:
    """First published descendant page (content set) in menu order.
@@ -215,8 +311,10 @@ def first_leaf(menu: dict[str, Node], path: str) -> str | None:
 def _first_leaf(node: Node, path: str) -> str | None:
    for slug, child in sorted_nodes(node.children):
        if not child.published:
            continue
        cpath = f"{path}/{slug}" if path else slug
-        if child.published and child.content is not None:
+        if child.content:
            return cpath
        if (leaf := _first_leaf(child, cpath)) is not None:
            return leaf
@@ -224,48 +322,114 @@ def _first_leaf(node: Node, path: str) -> str | None:
 def banner_html(menu: dict[str, Node], path: str, theme: str = "") -> HTML:
-    """Resolve the banner for a path: the nearest node on the ancestor
+    """Resolve the banner for a path: the effective banner design's inline
-    chain (the node itself first), then the front page, then the theme
+    SVG artwork first, then the user's own banner HTML — always last, so
-    artwork. The front page is a top-level *sibling* of the other
+    author code (e.g. <style> overrides) wins over the design's own styles.
    main-level nodes, not their parent, so it never appears in the chain
    and is consulted explicitly, last. The snippet is raw trusted HTML,
    so a banner can be anything — an img, a styled div, canvas + script.
-    With no user banner anywhere in the chain, the active theme's inline
+    The design comes from banner_design(); the user banner from the nearest
-    SVG artwork is inlined instead: as markup it can be recolored from the
+    node on the ancestor chain (the node itself first), then the front page.
-    theme stylesheet (``var(--accent)`` etc.) and animated, and it is not
+    The front page is a top-level *sibling* of the other main-level nodes,
-    rendered at all when the user supplies their own banner.
+    not their parent, so it never appears in the chain and is consulted
    explicitly, last. The snippet is raw trusted HTML, so a banner can be
    anything — an img, a styled div, canvas + script.
    """
    parts = []
    design = banner_design(menu, path, theme)
    if design:
        parts.append(_design_banner(design))
    source = banner_source(menu, path)
    if source is not None:
-        return HTML(resolve(menu, source)[-1].banner)
+        parts.append(HTML(resolve(menu, source)[-1].banner))
-    return _theme_banner(theme)
+    return HTML("".join(str(p) for p in parts))
-_banner_cache: dict[str, HTML] = {}
+def _design_banner(design: str) -> HTML:
    """The design's inline banner artwork (empty for none/unknown designs).
-
+    banner.html (arbitrary markup: canvas + style + script...) takes
-def _theme_banner(theme: str) -> HTML:
+    precedence over banner.svg. Read from disk on every request: design
-    """The theme's inline banner SVG (empty for none/unknown themes)."""
+    files are never built/cached, so editing them on disk shows on the
-    if not theme or "/" in theme:
+    next page load, even in prod. The data-design wrapper marks the
    artwork as the design's (not author code), so the site editor's live
    banner preview keeps it in place.
    """
    if not _valid_name(design):
        return HTML("")
-    if theme not in _banner_cache:
+    html = THEMES / design / "banner.html"
-        path = Path(__file__).parent / "themes" / theme / "banner.svg"
+    svg = THEMES / design / "banner.svg"
-        _banner_cache[theme] = HTML(path.read_text()) if path.exists() else HTML("")
+    if html.exists():
-    return _banner_cache[theme]
+        body = html.read_text()
    elif svg.exists():
        body = svg.read_text()
    else:
        return HTML("")
    return HTML(f'<div data-design="{design}">{body}</div>')
 def theme_banner_design(theme: str) -> str:
    """The theme's own banner design (a theme folder doubles as a banner
    design when it ships banner.css, banner.svg or banner.html), "" if it
    has none."""
    if _valid_name(theme) and any(
        (THEMES / theme / f).exists()
        for f in ("banner.css", "banner.svg", "banner.html")
    ):
        return theme
    return ""
 def banner_design(menu: dict[str, Node], path: str, theme: str = "") -> str:
    """The effective banner design name at ``path`` ("" = no design).
    Nodes set ``banner_design`` to a design name, "" (explicitly none) or
    None (inherit). Resolution walks the ancestor chain from the node
    upwards, then the front page, then falls back to the active theme's own
    design.
    """
    chain = resolve(menu, path) or []
    for node in reversed(chain):
        if node.banner_design is not None:
            return node.banner_design
    front = menu.get("")
    if front and front.banner_design is not None:
        return front.banner_design
    return theme_banner_design(theme)
 def banner_design_source(
    menu: dict[str, Node], path: str, theme: str = ""
 ) -> str | None:
    """Which node's banner-design setting *would* apply at ``path`` if the
    node itself set nothing: the nearest ancestor's path ("" = the front
    page), or None when the active theme's default applies. Used by the
    banner editor for the design selector's inherit label."""
    chain = resolve(menu, path) or []
    segs = path.split("/")
    # Skip the node itself (chain[-1]): its own setting is not inheritance.
    for i in range(len(chain) - 2, -1, -1):
        if chain[i].banner_design is not None:
            return "/".join(segs[: i + 1])
    # The front page is a top-level sibling of the chain, not an ancestor;
    # it does not inherit from itself.
    front = menu.get("")
    if path and front and front.banner_design is not None:
        return ""
    return None
 def banner_source(menu: dict[str, Node], path: str) -> str | None:
-    """Which node's banner applies at ``path``: the nearest ancestor with
+    """Which node's banner HTML applies at ``path``: the nearest ancestor with
-    one set (the front page, a top-level sibling of the chain, last).
+    one set (the front page, a top-level sibling of the chain, last). None =
-    None = the default artwork."""
+    no user banner anywhere (only the design artwork renders, if any).
    Whitespace-only banners count as empty: clearing the editor can leave a
    stray newline behind."""
    chain = resolve(menu, path) or []
    segs = path.split("/")
    for i in range(len(chain) - 1, -1, -1):
-        if chain[i].banner:
+        if chain[i].banner.strip():
            return "/".join(segs[: i + 1])
    front = menu.get("")
-    if front and front.banner:
+    if front and front.banner.strip():
        return ""
    return None
@@ -279,29 +443,120 @@ def page_content(menu: dict[str, Node], path: str) -> HTML:
        # only rendered as h1 when the markdown has none of its own.
        if not has_h1(node.content or ""):
            doc.h1(node.title)
-        doc.div(HTML(render(node.content or "", path)), class_="body")
+        doc.div(
            HTML(render(node.content or "", path, node.created, node.modified)),
            class_="body",
        )
    return HTML(str(doc))
 _FIRST_P = re.compile(r"<p[^>]*>(.*?)</p>", re.S)
 _TAG = re.compile(r"<[^>]+>")
 _IMG_TAG = re.compile(r"<img\b[^>]*>")
 _VIDEO_TAG = re.compile(r"<video\b[^>]*>")
 _ATTR_SRC = re.compile(r'src="([^"]+)"')
 _ATTR_CLASS = re.compile(r'class="([^"]*)"')
 def _share_media(html: str, base_url: str) -> tuple[str, str]:
    """(image, video) share URLs from the rendered article.
    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
    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)):
            continue
        src = src.group(1)
        cls = _ATTR_CLASS.search(tag)
        if cls and "hero" in cls.group(1).split():
            hero = src
            break
        if src.lower().split("?")[0].endswith(".svg"):
            svg = svg or src
        else:
            raster = raster or src
            # Keep scanning: a later hero still wins.
    for tag in _VIDEO_TAG.findall(html):
        if m := _ATTR_SRC.search(tag):
            video = m.group(1)
            break
    image = hero or raster or svg
    return (absolute(image) if image else "", absolute(video) if video else "")
 def _social_meta(
    node: Node, path: str, title: str, html: str, brand: str, base_url: str,
 ) -> dict[str, str]:
    """Open Graph/Twitter/SEO meta tags for a content page.
    Heuristics over the rendered article: the description is the first
    paragraph's text (truncated at ~200 chars on a word boundary), the
    share image the article's first <img> — authors lead with their most
    representative figure. Absolute URLs are built from the request's base
    (social scrapers cannot use relative ones).
    """
    url = f"{base_url}/{path}" if base_url else ""
    m = _FIRST_P.search(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)
    return {
        "description": text,
        "canonical": url,
        "og:type": "article",
        "og:title": title,
        "og:description": text,
        "og:url": url,
        "og:site_name": brand,
        "og:image": image,
        "og:video": video,
        "article:published_time": node.created.isoformat(),
        "article:modified_time": node.modified.isoformat(),
        "twitter:card": "summary_large_image" if image else "summary",
    }
 def render_page(
    menu: dict[str, Node],
    path: str,
    brand: str = SITE_NAME,
    custom_css: str = "",
    theme: str = "",
    favicon: str = "",
    brand_html: str = "",
    base_url: str = "",
 ) -> str:
    """Render a full HTML page for the slug path."""
    node = resolve(menu, path)[-1]
    title = _title(path.rpartition("/")[2], node)
-    scripts, styles = _page_assets(theme)
+    main = page_content(menu, path)
    social = _social_meta(node, path, title, str(main), brand, base_url)
    return str(
-        _layout(styles, scripts, custom_css, theme)(
+        _layout(
            *_page_assets(), custom_css, theme, banner_design(menu, path, theme),
            favicon, social,
        )(
            Title=f"{title} – {brand}" if brand else title,
-            Brand=_brand_link(brand),
+            Brand=_brand_link(brand, brand_html),
            Nav=nav_html(menu, path),
            Sidebar=sidebar_html(menu, path),
            Banner=banner_html(menu, path, theme),
-            Main=page_content(menu, path),
+            Main=main,
        ),
    )
@@ -312,6 +567,8 @@ def render_category(
    brand: str = SITE_NAME,
    custom_css: str = "",
    theme: str = "",
    favicon: str = "",
    brand_html: str = "",
 ) -> str:
    """Render the placeholder for a content-less category label (404).
@@ -329,11 +586,10 @@ def render_category(
            doc.p("Pages in this section are listed in the menu on the left.")
        else:
            doc.p("This section has no page of its own yet.")
    scripts, styles = _page_assets(theme)
    return str(
-        _layout(styles, scripts, custom_css, theme)(
+        _layout(*_page_assets(), custom_css, theme, banner_design(menu, path, theme), favicon)(
            Title=f"{title} – {brand}" if brand else title,
-            Brand=_brand_link(brand),
+            Brand=_brand_link(brand, brand_html),
            Nav=nav_html(menu, path),
            Sidebar=sidebar,
            Banner=banner_html(menu, path, theme),
@@ -348,17 +604,18 @@ def render_not_found(
    brand: str = SITE_NAME,
    custom_css: str = "",
    theme: str = "",
    favicon: str = "",
    brand_html: str = "",
 ) -> str:
    """Render a 404 page within the normal layout."""
    doc = E.article
    with doc:
        doc.h1("Not Found")
        doc.p(f"No article at /{path}. If there was before, it may have been deleted.")
    scripts, styles = _page_assets(theme)
    return str(
-        _layout(styles, scripts, custom_css, theme)(
+        _layout(*_page_assets(), custom_css, theme, banner_design(menu, path, theme), favicon)(
            Title=f"Not Found – {brand}" if brand else "Not Found",
-            Brand=_brand_link(brand),
+            Brand=_brand_link(brand, brand_html),
            Nav=nav_html(menu, path),
            Sidebar=sidebar_html(menu, path),
            Banner=banner_html(menu, path, theme),
@@ -367,27 +624,27 @@ def render_not_found(
    )
-def _page_assets(theme: str) -> tuple[list[str], list[str]]:
+def _page_assets() -> tuple[list[str], list[str]]:
-    """Script and CSS URLs for public pages (pagerite entry).
+    """Script and stylesheet URLs for public pages (pagerite entry).
    Dev mode loads the entry from the Vite dev server; production uses
-    the Vite build manifest to resolve the hashed asset names.
+    the Vite build manifest to resolve the hashed asset names. CSS imported
    by the entry (e.g. overlayscrollbars.css) is extracted by Vite and must
    be linked separately.
    """
    vite_url = os.environ.get("PAGERITE_VITE_URL")
    if vite_url:
-        return [f"{vite_url}/src/pagerite.js"], _shared_css_urls(vite_url, theme)
+        return [f"{vite_url}/src/pagerite.js"], []
-    key = f"page:{theme}"
+    if "page" not in _asset_cache:
    if key not in _asset_cache:
        manifest = _manifest()
        entry = manifest["src/pagerite.js"]
-        _asset_cache[key] = (
+        scripts = [f"/{entry['file']}"]
-            [f"/{entry['file']}"],
+        stylesheets = [f"/{css}" for css in entry.get("css", [])]
-            _shared_css_urls(None, theme),
+        _asset_cache["page"] = scripts, stylesheets
-        )
+    return _asset_cache["page"]
    return _asset_cache[key]
-def _editor_assets(theme: str) -> tuple[list[str], str | None]:
+def _editor_assets() -> tuple[list[str], str | None]:
    """Script URL and editor-specific CSS URL for the public-page edit pen.
    The shared CSS is already linked on the page, so the pen only needs the
@@ -396,9 +653,58 @@ def _editor_assets(theme: str) -> tuple[list[str], str | None]:
    vite_url = os.environ.get("PAGERITE_VITE_URL")
    if vite_url:
        return [f"{vite_url}/@vite/client", f"{vite_url}/src/main.js"], None
-    key = f"editor:{theme}"
+    if "editor" not in _asset_cache:
    if key not in _asset_cache:
        manifest = _manifest()
        entry = manifest["src/main.js"]
-        _asset_cache[key] = [f"/{entry['file']}"], _editor_css_url(None, theme)
+        _asset_cache["editor"] = [f"/{entry['file']}"], _editor_css_url(None)
-    return _asset_cache[key]
+    return _asset_cache["editor"]
 def _analytics_assets() -> tuple[list[str], list[str]]:
    """Script and stylesheet URLs for the analytics page entry."""
    vite_url = os.environ.get("PAGERITE_VITE_URL")
    if vite_url:
        return [f"{vite_url}/src/analytics-main.js"], []
    if "analytics" not in _asset_cache:
        manifest = _manifest()
        entry = manifest["src/analytics-main.js"]
        scripts = [f"/{entry['file']}"]
        stylesheets = [f"/{css}" for css in entry.get("css", [])]
        _asset_cache["analytics"] = scripts, stylesheets
    return _asset_cache["analytics"]
 def render_analytics(
    menu: dict[str, Node],
    brand: str = SITE_NAME,
    custom_css: str = "",
    theme: str = "",
    favicon: str = "",
    brand_html: str = "",
 ) -> str:
    """Render the analytics viewer as a normal page at /_a."""
    page_scripts, page_stylesheets = _page_assets()
    analytics_scripts, analytics_stylesheets = _analytics_assets()
    scripts = page_scripts + analytics_scripts
    stylesheets = page_stylesheets + analytics_stylesheets
    doc = E.article
    with doc:
        doc.div(id="analytics-app")
    return str(
        _layout(
            scripts,
            stylesheets,
            custom_css,
            theme,
            banner_design(menu, "_a", theme),
            favicon,
            extra_meta={"pagerite:analytics-src": analytics_scripts[0]},
        )(
            Title=f"Analytics – {brand}" if brand else "Analytics",
            Brand=_brand_link(brand, brand_html),
            Nav=nav_html(menu, "_a"),
            Sidebar=sidebar_html(menu, "_a"),
            Banner=banner_html(menu, "_a", theme),
            Main=HTML(str(doc)),
        ),
    )
@@ -20,10 +20,13 @@ dependencies = [
    "fastapi-vue>=1.3.1",
    "fastapi[standard]>=0.141.1",
    "html5tagger>=2.0.0",
    "httpx>=0.28.1",
    "kanta>=0.8.1",
    "markdown-it-py>=4.2.0",
    "maxminddb>=3.1.1",
    "mdit-py-plugins>=0.6.1",
    "pygments>=2.20.0",
    "ua-parser>=1.0.2",
 ]
 [project.scripts]
@@ -33,9 +36,7 @@ pagerite = "pagerite.__main__:main"
 Repository = "https://git.zi.fi/LeoVasanko/pagerite"
 [dependency-groups]
-dev = [
+dev = []
    "httpx>=0.28.1",
 ]
 [tool.hatch.version]
 source = "vcs"
@@ -44,7 +45,10 @@ source = "vcs"
 packages = ["pagerite"]
 [tool.hatch.build]
-artifacts = ["pagerite/frontend-build"]
+# `only-packages` drops directories without an __init__.py, so the theme
 # files and seed image assets must be force-included as artifacts (like
 # the frontend build).
 artifacts = ["pagerite/frontend-build", "pagerite/themes", "pagerite/seed-assets"]
 only-packages = true
 [tool.hatch.build.targets.sdist.hooks.custom]
@@ -19,8 +19,8 @@ from devutil import (
    setup_vite,
 )
-DEFAULT_VITE_PORT = 3100
+DEFAULT_VITE_PORT = 8200
-DEFAULT_DEV_PORT = 3200
+DEFAULT_DEV_PORT = 8210
 HEALTH = "/?from=devserver.py"
@@ -0,0 +1,941 @@
 #!/usr/bin/env -S uv run --script
 # /// script
 # requires-python = ">=3.14"
 # dependencies = [
 #     "httpx>=0.28.1",
 #     "playwright>=1.45.0",
 # ]
 # ///
 """Generate fake browser visits, crawler hits, and abuse scans for a Pagerite site.
 Browser sessions (ordinary users) come from realistic residential IPv4 and IPv6
 addresses and stay mostly stable; an IPv6 host part may rotate once mid-session,
 and an IPv4 session may switch to another residential address.  Crawler hits come
 from datacenter IPs, with each crawler profile paired to a matching provider IP
 when possible.  Abuse scanners fire bursts of vulnerability probes from pinned
 datacenter IPs.
 Run against a local dev server, e.g.:
    uv run scripts/fake_traffic.py http://localhost:3200
 Repeat whenever you want more traffic; each run appends new events to the
 site's analytics file.
 """
 from __future__ import annotations
 import argparse
 import logging
 import random
 import sys
 import time
 from collections.abc import Sequence
 from dataclasses import dataclass
 from datetime import UTC, datetime
 from typing import Any
 from urllib.parse import urlencode, urljoin, urlparse
 import httpx
 logging.basicConfig(level=logging.INFO, format="%(message)s")
 logger = logging.getLogger("fake-traffic")
@dataclass(frozen=True)
 class BrowserProfile:
    name: str
    user_agent: str
    accept_language: str
    viewport: tuple[int, int]
@dataclass(frozen=True)
 class CrawlerProfile:
    name: str
    user_agent: str
    ip: str
 BROWSER_PROFILES: list[BrowserProfile] = [
    BrowserProfile(
        "chrome-desktop",
        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 "
        "(KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36",
        "en-US,en;q=0.9",
        (1366, 768),
    ),
    BrowserProfile(
        "safari-desktop",
        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 "
        "(KHTML, like Gecko) Version/17.5 Safari/605.1.15",
        "en-GB,en;q=0.9",
        (1440, 900),
    ),
    BrowserProfile(
        "firefox-desktop",
        "Mozilla/5.0 (X11; Linux x86_64; rv:130.0) Gecko/20100101 Firefox/130.0",
        "en-CA,en;q=0.8,fr;q=0.5",
        (1920, 1080),
    ),
    BrowserProfile(
        "chrome-mobile",
        "Mozilla/5.0 (Linux; Android 14; SM-S918B) AppleWebKit/537.36 "
        "(KHTML, like Gecko) Chrome/128.0.0.0 Mobile Safari/537.36",
        "es-ES,es;q=0.9",
        (390, 844),
    ),
 ]
 CRAWLER_PROFILES: list[CrawlerProfile] = [
    CrawlerProfile(
        "googlebot",
        "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Googlebot/2.1; +http://www.google.com/bot.html) Chrome/128.0.0.0 Safari/537.36",
        "66.249.64.66",                         # US, Google
    ),
    CrawlerProfile(
        "bingbot",
        "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm) Chrome/128.0.0.0 Safari/537.36",
        "40.77.167.0",                          # US, Microsoft
    ),
    CrawlerProfile(
        "duckduckbot",
        "DuckDuckBot/1.1; (+http://duckduckgo.com/duckduckbot.html)",
        "95.217.0.1",                           # Germany, Hetzner VPS
    ),
    CrawlerProfile(
        "curl",
        "curl/8.5.0",
        "139.162.0.1",                          # Singapore, Linode VPS
    ),
 ]
 # Residential IPv4 addresses and IPv6 /64 prefixes used for ordinary browser
 # sessions.  IPv6 entries keep the network part stable and randomise only the
 # host part; the host may rotate once mid-session.
 RESIDENTIAL_SOURCE_IPS: list[str] = [
    # Residential IPv4
    "91.154.140.209",                       # Finland, Elisa
    "84.143.145.207",                       # Germany, Deutsche Telekom
    "220.165.255.254",                      # China, Chinanet / China Telecom
    "84.235.83.162",                        # Saudi Arabia, SaudiNet / STC
    # Residential IPv6 /64 prefixes
    "2a02:8109:ac82:6f0c::/64",             # Germany, Deutsche Telekom
    "240e:45d:1e60:5b0::/64",               # China, China Telecom
    "2409:8904:6720:4123::/64",             # China, China Unicom
 ]
 # Concrete datacenter IPs used for abuse scanner bursts.  They stay pinned for
 # the whole scan burst.
 # Index 0 randomises its UA per request, index 1 uses a fixed browser UA,
 # and index 2 uses a fixed crawler UA.
 ABUSE_SOURCE_IPS: list[str] = [
    "45.63.0.12",                           # US, Vultr VPS
    "138.197.0.89",                         # US, DigitalOcean / Cloudways
    "2a01:4f8:0:2::1234",                   # Germany, Hetzner VPS
 ]
 # Paths commonly probed by attackers looking for exposed config, admin panels,
 # version control, credentials, backups, or debug endpoints.
 SUSPICIOUS_PATHS: list[str] = [
    "/.env",
    "/env",
    "/.env.local",
    "/env.development",
    "/config",
    "/config.json",
    "/config.yaml",
    "/config.yml",
    "/configuration.json",
    "/configuration.yaml",
    "/configuration.yml",
    "/settings.json",
    "/settings.yaml",
    "/settings.yml",
    "/app.config",
    "/appsettings.json",
    "/appsettings.Development.json",
    "/credentials",
    "/credentials.json",
    "/secrets",
    "/secrets.json",
    "/.aws/credentials",
    "/.ssh/id_rsa",
    "/id_rsa",
    "/id_rsa.pub",
    "/known_hosts",
    "/sftp-config.json",
    "/admin",
    "/administrator",
    "/adminer.php",
    "/login",
    "/signin",
    "/auth/login",
    "/api/login",
    "/api/.env",
    "/api/config",
    "/api/v1/config",
    "/api/v2/config",
    "/webhook",
    "/webhooks",
    "/callback",
    "/proxy",
    "/image",
    "/images",
    "/preview",
    "/download",
    "/downloads",
    "/log",
    "/logs",
    "/debug",
    "/trace",
    "/phpinfo.php",
    "/info.php",
    "/phpmyadmin",
    "/pma",
    "/myadmin",
    "/phpMyAdmin",
    "/wp-admin",
    "/wp-login.php",
    "/wp-config.php",
    "/xmlrpc.php",
    "/wp-json/wp/v2/users",
    "/.git/config",
    "/.git/HEAD",
    "/git/config",
    "/swagger-ui.html",
    "/v2/api-docs",
    "/actuator/env",
    "/actuator/health",
    "/actuator/configprops",
    "/server-status",
    "/.htaccess",
    "/web.config",
    "/package.json",
    "/composer.json",
    "/vendor/autoload.php",
    "/docker-compose.yml",
    "/Dockerfile",
    "/manage",
    "/console",
    "/manager",
    "/manager/html",
    "/metrics",
    "/prometheus",
    "/healthz",
    "/_api",
    "/api",
    "/api/v1/",
    "/api/v2/",
    "/graphql",
    "/query",
    "/feed",
    "/rss",
    "/_debug",
    "/test",
    "/testing",
    "/tmp",
    "/temp",
    "/backup",
    "/backups",
    "/dump",
    "/dumps",
    "/sql",
    "/db",
    "/database",
    "/dump.sql",
    "/backup.sql",
    "/db.sql",
    "/backup.zip",
    "/backup.tar.gz",
    "/site.zip",
    "/site.tar.gz",
    "/source.zip",
    "/src.zip",
    "/upload",
    "/uploads",
    "/import",
    "/export",
    "/token",
    "/tokens",
    "/oauth",
    "/oauth2",
    "/openid",
    "/jwks",
    "/keys",
    "/key",
    "/private",
    "/public",
 ]
 # Realistic external referers.  Most sessions arrive with a generic referer;
 # a subset carries matching UTM tags on the landing URL.
 PLAIN_REFERRERS: list[str] = [
    "https://example.com/",
    "https://somedomain.com/",
    "https://another-site.org/",
    "https://friend-site.net/",
 ]
 # (referer origin, utm parameter dict) pairs used for tagged traffic.
 TAGGED_REFERRERS: list[tuple[str, dict[str, str]]] = [
    ("https://chatgpt.com/", {"utm_source": "chatgpt.com"}),
    ("https://www.google.com/", {"utm_source": "google", "utm_medium": "organic"}),
    ("https://twitter.com/", {"utm_source": "twitter", "utm_medium": "social"}),
    ("https://www.linkedin.com/", {"utm_source": "linkedin", "utm_medium": "social"}),
    ("https://github.com/", {"utm_source": "github", "utm_medium": "referral"}),
    ("https://news.ycombinator.com/", {"utm_source": "hackernews", "utm_medium": "referral"}),
    ("https://www.reddit.com/", {"utm_source": "reddit", "utm_medium": "social"}),
    ("https://medium.com/", {"utm_source": "medium", "utm_medium": "referral"}),
    ("https://www.producthunt.com/", {"utm_source": "producthunt", "utm_medium": "referral"}),
 ]
 # Fraction of referered sessions that also carry UTM tags.
 UTM_RATE = 0.25
 # Innocent-looking paths that do not exist on a Pagerite site.  Hitting many of
 # these from a single IP is itself a telltale of a spray-and-pray scanner.
 NORMAL_404_PATHS: list[str] = [
    "/about",
    "/about-us",
    "/services",
    "/products",
    "/contact",
    "/contact-us",
    "/team",
    "/careers",
    "/jobs",
    "/pricing",
    "/features",
    "/demo",
    "/trial",
    "/docs",
    "/documentation",
    "/api-docs",
    "/support",
    "/help",
    "/faq",
    "/knowledge-base",
    "/terms",
    "/terms-of-service",
    "/privacy",
    "/privacy-policy",
    "/legal",
    "/blog",
    "/news",
    "/articles",
    "/press",
    "/events",
    "/webinars",
    "/podcast",
    "/videos",
    "/resources",
    "/whitepapers",
    "/case-studies",
    "/customers",
    "/clients",
    "/testimonials",
    "/reviews",
    "/partners",
    "/integrations",
    "/api-reference",
    "/developers",
    "/status",
    "/security",
    "/trust",
    "/compliance",
    "/gdpr",
    "/ccpa",
    "/sitemap",
    "/archive",
    "/tags",
    "/categories",
    "/search",
    "/users",
    "/accounts",
    "/dashboard",
    "/profile",
    "/settings",
    "/preferences",
    "/notifications",
    "/messages",
    "/inbox",
    "/calendar",
    "/reports",
    "/analytics",
    "/billing",
    "/invoice",
    "/orders",
    "/cart",
    "/checkout",
    "/store",
    "/shop",
    "/home",
    "/main",
    "/start",
    "/welcome",
    "/intro",
    "/overview",
    "/summary",
    "/portfolio",
    "/projects",
    "/work",
    "/solutions",
 ]
 ABUSE_USER_AGENTS: list[str] = [
    # Desktop browsers
    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 "
    "(KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36",
    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 "
    "(KHTML, like Gecko) Version/17.5 Safari/605.1.15",
    "Mozilla/5.0 (X11; Linux x86_64; rv:130.0) Gecko/20100101 Firefox/130.0",
    "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:130.0) Gecko/20100101 Firefox/130.0",
    "Mozilla/5.0 (Linux; Android 14; SM-S918B) AppleWebKit/537.36 "
    "(KHTML, like Gecko) Chrome/128.0.0.0 Mobile Safari/537.36",
    "Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 "
    "(KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1",
    # Well-known crawlers / bots
    "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Googlebot/2.1; "
    "+http://www.google.com/bot.html) Chrome/128.0.0.0 Safari/537.36",
    "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; bingbot/2.0; "
    "+http://www.bing.com/bingbot.htm) Chrome/128.0.0.0 Safari/537.36",
    "Mozilla/5.0 (compatible; DuckDuckBot/1.1; +http://duckduckgo.com/duckduckbot.html)",
    "Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html)",
    "Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 "
    "(KHTML, like Gecko) Chrome/128.0.0.0 Mobile Safari/537.36 "
    "(compatible; Googlebot/2.1; +http://www.google.com/bot.html)",
    "Mozilla/5.0 (compatible; YandexBot/3.0; +http://yandex.com/bots)",
    "Mozilla/5.0 (compatible; DotBot/1.2; +https://opensiteexplorer.org/dotbot; help@moz.com)",
    "Mozilla/5.0 (compatible; SemrushBot/7~bl; +http://www.semrush.com/bot.html)",
    "Mozilla/5.0 (compatible; AhrefsBot/7.0; +http://ahrefs.com/robot/)",
    # Social / service fetchers
    "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)",
    "Twitterbot/1.0",
    "LinkedInBot/1.0 (compatible; Mozilla/5.0; Apache-HttpClient +http://www.linkedin.com)",
    "Slackbot-LinkExpanding 1.0 (+https://api.slack.com/robots)",
    "WhatsApp/2.23.20.0",
    # Command-line / library clients
    "curl/8.5.0",
    "Wget/1.21.4 (linux-gnu)",
    "python-requests/2.32.3",
    "Go-http-client/1.1",
    "Node.js/20.5.1",
 ]
 def _random_ipv6_host(prefix: str) -> str:
    """Return a concrete address within an IPv6 /64 prefix.
    The host part is generated randomly, mimicking a fresh OS privacy address.
    The input prefix must end in ``::/64`` (e.g. ``2a02:8109:ac82:6f0c::/64``).
    """
    if "/" not in prefix:
        return prefix
    base, mask = prefix.split("/")
    if mask != "64":
        raise ValueError(f"only /64 IPv6 prefixes are supported, got {prefix!r}")
    if base.endswith("::"):
        base = base[:-2]
    host = ":".join(f"{random.randint(0, 0xffff):04x}" for _ in range(4))
    return f"{base}:{host}"
 def _concretize_ip(entry: str) -> str:
    """Return a concrete IP address; randomise the host part for IPv6 /64 prefixes."""
    if ":" in entry and "/" in entry:
        return _random_ipv6_host(entry)
    return entry
 class _SessionIP:
    """Stable IP for a browser session, with one optional mid-session rotation.
    IPv6 prefixes get a fresh random host part; IPv4 addresses are swapped for
    another address from the residential pool.
    """
    def __init__(self, entry: str, pool: Sequence[str]):
        self.entry = entry
        self.pool = pool
        self._value = _concretize_ip(entry)
    def current(self) -> str:
        return self._value
    def rotate(self) -> None:
        if ":" in self.entry and "/" in self.entry:
            self._value = _random_ipv6_host(self.entry)
            return
        # IPv4: switch to another IPv4 address from the residential pool.
        for _ in range(20):
            candidate_entry = random.choice(self.pool)
            if ":" in candidate_entry and "/" in candidate_entry:
                continue
            candidate = _concretize_ip(candidate_entry)
            if candidate != self._value:
                self._value = candidate
                return
 def _sleep(base: float, jitter: float) -> None:
    time.sleep(max(0.0, base + random.uniform(-jitter, jitter)))
 def _normalize_url(url: str) -> str:
    """Return a usable base URL, adding missing scheme/host/port parts.
    - bare ``:PORT`` becomes ``http://localhost:PORT``
    - missing scheme becomes ``http://``
    - otherwise returned as-is
    Raises ``ValueError`` when the result is not a valid http(s) URL.
    """
    raw = url.strip()
    if not raw:
        raise ValueError("empty URL")
    if raw.startswith(":"):
        raw = f"http://localhost{raw}"
    elif raw.isdigit():
        raw = f"http://localhost:{raw}"
    elif not raw.startswith(("http://", "https://")):
        raw = f"http://{raw}"
    parsed = urlparse(raw)
    if parsed.scheme not in ("http", "https") or not parsed.netloc:
        raise ValueError(f"invalid URL: {url!r}")
    return raw
 def _poisson_wait(rate: float) -> float:
    """Return an exponential inter-arrival time for the given Poisson rate."""
    if rate <= 0:
        return 0.0
    return random.expovariate(rate)
 def _collect_links(page: Any, include_external: bool = False) -> list[dict[str, Any]]:
    """Return links from the current page, excluding the current page.
    Internal links stay on the site; external links are real https URLs found
    in the page content and are marked with ``external: true``.
    """
    return page.evaluate(
        """(includeExternal) => {
            const loc = new URL(location.href);
            const out = [];
            for (const a of document.querySelectorAll('a[href]')) {
                try {
                    const u = new URL(a.href);
                    const rect = a.getBoundingClientRect();
                    const item = {
                        href: a.href,
                        text: (a.innerText || a.title || '').trim().slice(0, 60),
                        visible: !!(rect.width && rect.height && rect.top < window.innerHeight && rect.bottom > 0),
                    };
                    if (u.origin === loc.origin
                            && !u.pathname.startsWith('/_')
                            && !u.pathname.startsWith('/auth')
                            && u.pathname !== '/favicon.ico'
                            && u.pathname !== loc.pathname) {
                        out.push(item);
                    } else if (includeExternal && u.protocol === 'https:' && u.origin !== loc.origin) {
                        out.push({ ...item, external: true });
                    }
                } catch { /* ignore malformed hrefs */ }
            }
            return out;
        }""",
        include_external,
    )
 def _click_link(page: Any, link: dict[str, Any], timeout: float = 10.0) -> bool:
    """Click an internal link and wait for the client-side URL to change."""
    start_url = page.url
    try:
        # Prefer Playwright's native click; fall back to a JS click if the
        # locator cannot be resolved or times out.
        try:
            page.locator(f"a[href='{link['href']}']").first.click(timeout=2000)
        except Exception:  # noqa: BLE001
            clicked = page.evaluate(
                """(href) => {
                    const a = Array.from(document.querySelectorAll('a[href]'))
                        .find(el => el.href === href);
                    if (a) { a.click(); return true; }
                    return false;
                }""",
                link["href"],
            )
            if not clicked:
                return False
        # Wait for the client-side navigation to update the URL.
        deadline = time.time() + timeout
        while time.time() < deadline:
            if page.url != start_url:
                return True
            page.wait_for_timeout(100)
        return False
    except Exception as exc:  # noqa: BLE001
        logger.debug("click failed on %s: %s", link.get("href"), exc)
        return False
 def _run_browser_session(
    base: str,
    paths: Sequence[str],
    profile: BrowserProfile,
    session_index: int,
    ip_entry: str,
 ) -> dict[str, Any]:
    from playwright.sync_api import sync_playwright
    MAX_CLICKS = 6
    STAY = (2.0, 6.0)
    HEADLESS = True
    REFERER_RATE = 0.75
    INCLUDE_EXTERNAL = True
    ip_provider = _SessionIP(ip_entry, RESIDENTIAL_SOURCE_IPS)
    ips_used: list[str] = [ip_provider.current()]
    trail: list[str] = []
    start_time = datetime.now(UTC)
    try:
        with sync_playwright() as p:
            browser = p.chromium.launch(
                headless=HEADLESS,
                args=["--no-sandbox", "--disable-dev-shm-usage"],
            )
            extra_headers = {
                "X-Forwarded-For": ip_provider.current(),
                "Accept-Language": profile.accept_language,
            }
            # Most sessions arrive from an external origin; some are direct.
            # A subset of referered sessions carries realistic UTM tags on the
            # landing URL; the referer origin is paired with the UTM source.
            tagged: dict[str, str] = {}
            if random.random() < REFERER_RATE:
                if random.random() < UTM_RATE:
                    referer, tagged = random.choice(TAGGED_REFERRERS)
                else:
                    referer = random.choice(PLAIN_REFERRERS)
                extra_headers["Referer"] = referer
            context = browser.new_context(
                user_agent=profile.user_agent,
                viewport={"width": profile.viewport[0], "height": profile.viewport[1]},
                extra_http_headers=extra_headers,
            )
            page = context.new_page()
            # Update X-Forwarded-For per request; the value stays stable unless we
            # explicitly rotate it once mid-session.
            def _route_handler(route, request):
                headers = dict(request.headers)
                headers["X-Forwarded-For"] = ip_provider.current()
                ips_used.append(headers["X-Forwarded-For"])
                route.continue_(headers=headers)
            page.route("**/*", _route_handler)
            # Pick one point during the session to emulate an IP rotation.
            rotate_at = random.randint(0, MAX_CLICKS - 1) if MAX_CLICKS > 0 else -1
            entry = random.choice(paths) if paths else "/"
            landing = urljoin(base, entry)
            if tagged:
                sep = "&" if "?" in landing else "?"
                landing += sep + urlencode(tagged)
            page.goto(landing, wait_until="networkidle")
            trail.append(page.url)
            for click_idx in range(MAX_CLICKS):
                _sleep(random.uniform(*STAY) / 2, 0.3)
                if click_idx == rotate_at:
                    ip_provider.rotate()
                    ips_used.append(ip_provider.current())
                    logger.debug("rotated session IP to %s", ip_provider.current())
                links = _collect_links(page, INCLUDE_EXTERNAL)
                visible = [item for item in links if item.get("visible")]
                if not visible:
                    visible = links
                if not visible:
                    break
                link = random.choice(visible)
                ok = _click_link(page, link)
                if not ok:
                    # Retry once with any link (sometimes visible calc misses nav).
                    alt = random.choice(links) if links else None
                    if alt and alt is not link:
                        ok = _click_link(page, alt)
                    if not ok:
                        break
                if link.get("external"):
                    # Outbound navigation: the analytics exit ping is already
                    # in flight. Record the external URL and end the session.
                    trail.append(page.url)
                    _sleep(0.5, 0.2)
                    break
                page.wait_for_load_state("networkidle")
                trail.append(page.url)
                _sleep(random.uniform(*STAY), 0.5)
            browser.close()
        return {
            "profile": profile.name,
            "entry": entry,
            "ip": ips_used[0],
            "ips_seen": len(set(ips_used)),
            "pages": len(trail),
            "trail": [urlparse(u).path or "/" for u in trail],
            "duration": (datetime.now(UTC) - start_time).total_seconds(),
        }
    except Exception as exc:  # noqa: BLE001
        logger.warning("browser session failed: %s", exc)
        return {"profile": profile.name, "error": str(exc), "trail": trail}
 def _run_crawler_hit(
    base: str,
    paths: Sequence[str],
    profile: CrawlerProfile,
 ) -> dict[str, Any]:
    path = random.choice(paths) if paths else "/"
    url = urljoin(base, path)
    fake_ip = profile.ip
    headers = {
        "User-Agent": profile.user_agent,
        "X-Forwarded-For": fake_ip,
        "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
        "Accept-Language": "en-US,en;q=0.5",
    }
    try:
        with httpx.Client(follow_redirects=True, timeout=15.0) as client:
            r = client.get(url, headers=headers)
        return {
            "profile": profile.name,
            "path": path,
            "status": r.status_code,
            "ip": fake_ip,
        }
    except Exception as exc:  # noqa: BLE001
        return {"profile": profile.name, "path": path, "error": str(exc)}
 def _abuse_ua() -> str:
    """Return a randomized, syntactically valid user agent for an abuse scan."""
    return random.choice(ABUSE_USER_AGENTS)
 def _run_abuse_scanner(base: str, ip_index: int) -> dict[str, Any]:
    """Fire a burst of vulnerability probes from a single fake IP.
    Scanner 0 randomises its user agent every request, scanner 1 uses a fixed
    browser UA, and scanner 2 uses a fixed crawler UA.
    """
    ip_entry = ABUSE_SOURCE_IPS[ip_index % len(ABUSE_SOURCE_IPS)]
    if ":" in ip_entry and "/" in ip_entry:
        fake_ip = _random_ipv6_host(ip_entry)
    else:
        fake_ip = ip_entry
    MIN_HITS = 15
    MAX_HITS = 25
    total_hits = random.randint(MIN_HITS, MAX_HITS)
    # Ensure the burst contains both telltales: suspicious paths and more
    # than ten normal-looking 404 paths.
    suspicious_count = max(5, total_hits // 3)
    normal_count = total_hits - suspicious_count
    if normal_count < 11:
        normal_count = 11
        suspicious_count = max(3, total_hits - normal_count)
    paths = random.choices(SUSPICIOUS_PATHS, k=suspicious_count) + random.choices(
        NORMAL_404_PATHS, k=normal_count
    )
    random.shuffle(paths)
    ua_mode = ip_index % 3
    if ua_mode == 0:
        get_ua = _abuse_ua
    elif ua_mode == 1:
        def get_ua() -> str:
            return BROWSER_PROFILES[0].user_agent
    else:
        def get_ua() -> str:
            return CRAWLER_PROFILES[0].user_agent
    scan_results: list[dict[str, Any]] = []
    with httpx.Client(follow_redirects=True, timeout=15.0) as client:
        for path in paths:
            headers = {
                "User-Agent": get_ua(),
                "X-Forwarded-For": fake_ip,
                "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
                "Accept-Language": random.choice(
                    ["en-US,en;q=0.9", "en-GB,en;q=0.8", "en;q=0.7"]
                ),
            }
            try:
                r = client.get(urljoin(base, path), headers=headers)
                scan_results.append(
                    {"path": path, "status": r.status_code, "ua": headers["User-Agent"]}
                )
            except Exception as exc:  # noqa: BLE001
                scan_results.append({"path": path, "error": str(exc)})
            _sleep(0.15, 0.1)
    return {
        "scanner": ip_index + 1,
        "ip": fake_ip,
        "hits": len(scan_results),
        "results": scan_results,
    }
 def _parse_args(argv: Sequence[str] | None) -> argparse.Namespace:
    parser = argparse.ArgumentParser(
        description="Generate fake traffic for a Pagerite site.",
        formatter_class=argparse.ArgumentDefaultsHelpFormatter,
    )
    parser.add_argument(
        "url",
        nargs="?",
        default="http://localhost:8200",
        help="Base URL of the Pagerite site (default: http://localhost:8200). "
             "A bare :PORT or PORT is treated as http://localhost:PORT; a "
             "missing scheme defaults to http://.",
    )
    parser.add_argument(
        "-t",
        "--duration",
        type=float,
        default=60.0,
        metavar="SECONDS",
        help="Rough maximum time to generate traffic (0 runs one preset batch)",
    )
    parser.add_argument("-v", "--verbose", action="store_true", help="Debug logging")
    return parser.parse_args(argv)
 def main(argv: Sequence[str] | None = None) -> int:
    args = _parse_args(argv)
    if args.verbose:
        logger.setLevel(logging.DEBUG)
    try:
        base = _normalize_url(args.url).rstrip("/")
    except ValueError as exc:
        logger.error("%s", exc)
        return 2
    # Discover content paths from the public page tree if we can.
    paths: list[str] = []
    try:
        r = httpx.get(urljoin(base, "/_api/pages"), timeout=10.0)
        if r.status_code == 200:
            paths = [page["path"] for page in r.json() if page.get("has_content")]
    except Exception as exc:  # noqa: BLE001
        logger.debug("could not fetch page list: %s", exc)
    if not paths:
        paths = ["/"]
    logger.info(
        "Generating fake traffic against %s (%d content paths, duration=%ss)",
        base,
        len(paths),
        args.duration,
    )
    results: list[dict[str, Any]] = []
    arrival_rate = 1.0
    def _wait() -> None:
        wait = _poisson_wait(arrival_rate)
        logger.debug("waiting %.2fs before next session", wait)
        time.sleep(wait)
    if args.duration <= 0:
        # One preset batch.
        for i in range(5):
            if i > 0:
                _wait()
            profile = random.choice(BROWSER_PROFILES)
            ip_entry = random.choice(RESIDENTIAL_SOURCE_IPS)
            logger.info(
                "browser session: %s (ip=%s)",
                profile.name,
                _concretize_ip(ip_entry),
            )
            result = _run_browser_session(base, paths, profile, i, ip_entry)
            results.append(result)
            logger.debug("  trail: %s", result.get("trail", []))
        for i in range(10):
            if i > 0:
                _wait()
            profile = random.choice(CRAWLER_PROFILES)
            logger.info(
                "crawler hit: %s (ip=%s)",
                profile.name,
                profile.ip,
            )
            result = _run_crawler_hit(base, paths, profile)
            results.append(result)
        for i in range(3):
            if i > 0:
                _wait()
            ip_entry = ABUSE_SOURCE_IPS[i % len(ABUSE_SOURCE_IPS)]
            logger.info("abuse scanner: %s", ip_entry)
            result = _run_abuse_scanner(base, i)
            results.append(result)
            logger.debug(
                "  hits: %s", [r.get("path") for r in result.get("results", [])]
            )
    else:
        deadline = time.time() + args.duration
        session_index = 0
        while time.time() < deadline:
            if session_index > 0:
                _wait()
            phase = session_index % 3
            if phase == 0:
                profile = random.choice(BROWSER_PROFILES)
                ip_entry = random.choice(RESIDENTIAL_SOURCE_IPS)
                logger.info(
                    "browser session: %s (ip=%s)",
                    profile.name,
                    _concretize_ip(ip_entry),
                )
                result = _run_browser_session(
                    base, paths, profile, session_index, ip_entry
                )
                logger.debug("  trail: %s", result.get("trail", []))
            elif phase == 1:
                profile = random.choice(CRAWLER_PROFILES)
                logger.info(
                    "crawler hit: %s (ip=%s)",
                    profile.name,
                    profile.ip,
                )
                result = _run_crawler_hit(base, paths, profile)
            else:
                ip_entry = ABUSE_SOURCE_IPS[session_index % len(ABUSE_SOURCE_IPS)]
                logger.info("abuse scanner: %s", ip_entry)
                result = _run_abuse_scanner(base, session_index // 3)
                logger.debug(
                    "  hits: %s",
                    [r.get("path") for r in result.get("results", [])],
                )
            results.append(result)
            session_index += 1
    ok = sum(1 for r in results if "error" not in r)
    logger.info("Done: %d/%d requests succeeded.", ok, len(results))
    return 0 if ok == len(results) else 1
 if __name__ == "__main__":
    sys.exit(main())