docs: add template refactor implementation plan (Milestone 2)

Three tasks: stats/cycling macros, date-range macro, latent bug fixes.
Full code in every step, no placeholders.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr

.gitignore

@@ -18,9 +18,11 @@ node_modules/
 test-results/
 playwright-report/
 tests/.auth/
+user/pages/**/ui-test-trip/
 
 # travel-memories state
 docs/immich-workflow/*.json
 
 # OS
 .DS_Store
+tests/ui/.auth/

CLAUDE.md

@@ -35,6 +35,28 @@ The site is structured around Trip entities. Key facts:
 - GPX route files live as media on the trip page itself, served via leaflet-gpx CDN
 - Manage GPX files (view/upload/delete) at `/gpx-manager` — requires admin login; filenames are auto-slugified on upload
 
+### Shared feed-map partial
+
+The mini-map above the feed is shared across two pages via a Twig partial:
+
+- **Partial:** `user/themes/intotheeast/templates/partials/feed-map.html.twig`
+- **Used by:** `dailies.html.twig` and `stories.html.twig`
+- **NOT used by:** `trip.html.twig` (uses its own `#trip-map` / `.home-map-col` layout)
+
+**Parameters (passed via `{% include ... with {...} only %}`):**
+
+| Parameter | Type | Description |
+|---|---|---|
+| `map_entries` | array | `[{lat, lng, title, slug, url, type, force_connect, transport_mode}]` |
+| `map_id` | string | HTML id for map div: `'feed-map'` or `'stories-map'` |
+| `map_var` | string | JS global variable: `'feedMap'` or `'storiesMap'` |
+| `link_href` | string\|null | "View full map" link URL; `null` hides it |
+| `card_prefix` | string | Scroll-to ID prefix: `'entry-'` (dailies) or `'story-'` (stories) |
+| `trip_page` | Page | Trip page object for autoconnect setting |
+| `show_journey` | bool | `true` draws the route connector; `false` skips it |
+
+The partial always: starts attribution collapsed, shows the fullscreen button (mobile-only, CSS `display:none` ≥769px), and on marker click scrolls to `#<card_prefix><slug>` + flashes `.is-highlighted`.
+
 ### GPX file management
 
 GPX files are stored as page media on the trip page (`user/pages/01.trips/<slug>/`). They are picked up automatically by `map.html.twig` via `trip_page.media.all`.

Makefile

@@ -24,6 +24,12 @@ test: test-config test-post test-ui
 build:
 	docker compose build
 
+build-assets:
+	docker run --rm \
+	  -v $(PWD)/user/themes/intotheeast:/app \
+	  -w /app node:20-alpine \
+	  sh -c "npm install && npm run build"
+
 start:
 	docker compose up -d
 

docs/working/2026-06-21-travel-memories-handover.md

@@ -0,0 +1,86 @@
+# travel-memories — Session Handover (2026-06-21)
+
+## What this is
+
+`services/travel-memories/` is a local Flask app that turns Immich photo albums into Grav CMS journal entries and story pages. It runs at **http://localhost:8082** via Docker.
+
+## Current state
+
+All 11 SDD tasks are complete. The app is fully functional end-to-end across all 6 phases. This session was spent fixing bugs discovered during real use and adding triage UX improvements.
+
+**Last commit:** `a265b08` — fix: use amber/sky colors for journal/story borders and badges
+
+## What was built this session
+
+### New triage UX (Phase 2)
+
+**Desktop:**
+- **Selection ring**: white ring on currently focused card; first card auto-selected on load
+- **Arrow key navigation**: `←` / `→` move the selection ring through photos
+- **Enter**: open lightbox for current card; **click**: also opens lightbox
+- **Lightbox**: full-screen overlay — `←`/`→` navigate, `J`/`S`/`X` tag without closing, `Esc` close; badge + date shown at bottom
+- **Badge**: amber J / sky S / ghost X on every tagged photo; updates dynamically when tag changes
+- **Colored borders**: amber (`border-amber-500`) for journal, sky blue (`border-sky-400`) for story, dimmed for skip
+- **Skip all untagged** button: bulk-skips everything still untagged
+
+**Mobile (<768px):**
+- Tinder-style HammerJS swipe cards: right=journal, left=skip, up=story
+- Card tilts + color overlay during drag (amber/sky/grey)
+- Three tap buttons (X / J / S) below the card as alternative
+- Back button with undo stack (max 10 actions)
+- Progress bar synced with header counter
+- Horizontal thumbnail strip at bottom: all photos, colored dot per tag, tap to jump to any photo
+
+## Bugs fixed this session
+
+| Bug | Root cause | Fix |
+|---|---|---|
+| Triage badge not updating on tag change | Badge is server-rendered; JS wasn't updating it | Added `updateBadge(el, tag)` helper called after each tag |
+| Arrow keys not working | Alpine modifier is `left`/`right` not `arrowleft`/`arrowright` | Fixed modifier names |
+| Dimmed photo stays dimmed after retag | Jinja classes have newlines → `.split(' ')` produces `'opacity-40\n'` not `'opacity-40'` | Changed to `.split(/\s+/).filter(c => c && ...)` |
+| Colored border disappears after retag | Filter `!c.startsWith('border-')` strips `border-4` (width) too | Re-add `border-4` alongside color class |
+| Borders appear white | DaisyUI `border-success`/`border-info` near-invisible in `forest` theme | Use explicit Tailwind: `border-amber-500`, `border-sky-400` |
+| Badge text unreadable | DaisyUI badge semantic classes give poor contrast in `forest` theme | Use `bg-amber-500 text-black border-0 font-bold` etc. |
+
+## Gotchas for next session
+
+- **Docker rebuild required after any template/code change**: `docker compose build travel-memories && docker compose up -d --force-recreate travel-memories`
+- **`--force-recreate` required** to pick up `.env` changes (plain `restart` doesn't re-read it)
+- **Immich API key needs scopes**: `album.read`, `asset.read`, `asset.download` (Immich calls it `asset.view` in some versions — check the Immich UI)
+- **State directory permissions**: if state/ was created as root, run `docker compose exec -u root travel-memories chown 1000:1000 /app/state`
+- **Never read `.env`** — contains real Immich credentials; pass to docker commands only
+
+## What's not done yet
+
+Nothing was explicitly left incomplete — the pipeline works end-to-end. Potential next steps:
+
+1. **Full-resolution lightbox**: currently shows Immich preview thumbnail; could load `/proxy/original/<id>` for the full-res image (endpoint may need adding to `routes/proxy.py`)
+2. **End-to-end test for triage UX**: the new JS-heavy triage UI has no Playwright coverage
+3. **Phase 2 → real trip**: use the app on the actual japan-korea-2026 Immich album
+4. **Mobile swipe color consistency**: swipe-right currently shows green overlay (intuitive for "go") — could switch to amber to match journal color, but debatable
+
+## File map
+
+```
+services/travel-memories/
+├── app/
+│   ├── __init__.py          Flask factory
+│   ├── immich.py            Immich API client (x-api-key auth)
+│   ├── state.py             TripState / Photo models, atomic JSON R/W
+│   └── routes/
+│       ├── albums.py        Phase 1 — album selection + slug sanitisation
+│       ├── triage.py        Phase 2 — tag/skip-untagged/done endpoints
+│       ├── curate.py        Phase 3 — reorder/swap
+│       ├── group.py         Phase 4 — grouping + dividers
+│       ├── write.py         Phase 5 — titles/captions
+│       ├── export.py        Phase 6 — write Grav markdown files
+│       ├── proxy.py         Immich thumbnail proxy
+│       └── nav.py           Shared nav context + stale propagation
+│   └── templates/
+│       ├── base.html        DaisyUI forest + Alpine + HammerJS CDN
+│       ├── phase1.html      Album selection
+│       ├── phase2.html      Triage (desktop grid + mobile swipe + lightbox)
+│       └── phase[3-6].html  Curate, group, write, export
+├── Dockerfile
+└── docker-compose.yml       Port 8082, UID/GID env vars, state volume
+```

docs/working/learnings/2026-06-22-mobile-ux-learnings.md

@@ -0,0 +1,117 @@
+# Mobile UX Session Learnings — 2026-06-22
+
+Discoveries from the mobile polish session (stat scaling, map fullscreen, panel toggles, shared partials).
+
+## MapLibre GL JS v4 — Attribution starts expanded despite compact: true
+
+**Problem:** `new maplibregl.AttributionControl({ compact: true })` renders a `<details>` element. In MapLibre v4, this element has `open` set after `map.on('load')` fires, so the attribution panel starts expanded even though `compact: true` was passed.
+
+**Fix:** In the `load` handler, explicitly remove the `open` attribute:
+```js
+map.on('load', function () {
+    var attrib = map.getContainer().querySelector('.maplibregl-ctrl-attrib');
+    if (attrib) attrib.removeAttribute('open');
+});
+```
+
+**Also:** To avoid the default attribution control conflicting with a custom button in `bottom-right`, disable it in the constructor and add it manually to `bottom-left`:
+```js
+var map = new maplibregl.Map({ ..., attributionControl: false });
+map.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-left');
+```
+
+## CSS Panel Animation — max-height beats grid-template-rows: 0fr
+
+**Problem:** `grid-template-rows: 0fr → 1fr` transition fails when the direct grid child has `overflow: hidden`. The child creates a Block Formatting Context (BFC) that prevents `0fr` from collapsing to zero height.
+
+**Fix:** Use `max-height` transition on the outer container:
+```css
+.panel {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.4s ease;
+}
+.panel.is-open {
+    max-height: 600px;
+}
+```
+
+## Fluid Font Sizing with clamp()
+
+```css
+.stat-value {
+    font-size: clamp(2rem, 6vw, var(--text-3xl));
+}
+```
+
+- `clamp(min, preferred, max)`: scales linearly between min and max
+- `6vw` at 333px viewport = 20px = 1.25rem, but floor is 2rem (32px)
+- Keep labels at `--text-xs` (0.75rem) intentionally — the contrast makes values pop
+
+## CSS Grid — Spanning the Lone Last Item in a 2-Column Grid
+
+```css
+@media (max-width: 600px) {
+    .my-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .my-grid .item:last-child:nth-child(odd) { grid-column: 1 / -1; }
+}
+```
+
+- `minmax(0, 1fr)` — strictly equal columns (bare `1fr` has a hidden `auto` minimum)
+- `:last-child:nth-child(odd)` — matches an item that is both last and in an odd position
+
+## PhotoSwipe v5 — Correct Element for CSS Animations
+
+**Problem:** `pswp.currSlide.el` is `undefined` in PhotoSwipe v5.
+
+**Fix:** Use `pswp.currSlide.container` — the DOM wrapper for the current slide:
+```js
+var el = pswp.currSlide && pswp.currSlide.container;
+if (!el) return;
+el.classList.add('pswp-key-from-right');
+```
+
+## Mobile Fullscreen Map Pattern
+
+```css
+.feed-map-wrap.is-fullscreen {
+    position: fixed !important;
+    inset: 0;
+    z-index: 9999;
+    height: 100dvh !important;
+}
+```
+
+```js
+fsBtn.addEventListener('click', function() {
+    var isFs = mapCol.classList.toggle('is-fullscreen');
+    document.body.style.overflow = isFs ? 'hidden' : '';
+    setTimeout(function() { map.resize(); }, 50);
+});
+```
+
+**Marker click while fullscreen:** Exit fullscreen first, then scroll after the transition:
+```js
+if (isFullscreen) {
+    fsBtn.click();
+    setTimeout(scrollAndHighlight, 450);
+} else {
+    scrollAndHighlight();
+}
+```
+
+## Shared Twig Partial Pattern
+
+```twig
+{% include 'partials/feed-map.html.twig' with {
+    'map_entries': map_entries,
+    'map_id': 'feed-map',
+    'map_var': 'feedMap',
+    'link_href': page.parent().url ~ '/map',
+    'card_prefix': 'entry-',
+    'trip_page': trip_page,
+    'show_journey': true
+} only %}
+```
+
+Grav's global Twig functions (`url()`, `theme_var()`) remain available with `only`. Only parent template variables are excluded.

docs/working/plans/2026-06-21-playwright-tests.md

@@ -0,0 +1,973 @@
+# Playwright Tests — Improvement & Expansion
+
+> **STATUS: DONE** — merged to main 2026-06-21 (commits c703a09…1d29c30). All 6 tasks complete; 79 tests passing. See `docs/working/specs/2026-06-21-playwright-tests-design.md` for details.
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Reorganise the flat `tests/ui/` into feature subdirectories, fix stale trip-slug references that cause 30 pre-existing failures, add missing test files from the main branch, add a GPX Manager end-to-end suite (GM1–GM7), extend the post form suite (P6–P8), and extend axe scans (AX6–AX7).
+
+**Architecture:** All changes stay inside `tests/`. Playwright's `testDir: './tests/ui'` recurses automatically so `playwright.config.js` is untouched. End-to-end tests hit the live Grav server at `http://localhost:8081`; demo data is loaded by `globalSetup` via `make demo-load`.
+
+**Tech Stack:** Playwright (Node), Grav REST API (`/api/v1`), axe-core via `@axe-core/playwright`, existing `helpers.js`.
+
+## Global Constraints
+
+- Branch: `worktree-playwright-tests`; working directory: `.claude/worktrees/playwright-tests/`
+- Grav server must be running at `http://localhost:8081` before running tests
+- Demo trip used in tests: `italy-2026-demo` (slug used in all fixture references)
+- `helpers.js` stays at `tests/ui/helpers.js` — moved specs update their import from `./helpers` to `../helpers`
+- `auth.setup.js` `testMatch: /auth\.setup\.js/` resolves by filename — works at any depth
+- P2 remains skipped (photo upload needs post-form work first)
+- End-to-end GPX Manager tests make real API calls — `afterAll` cleans up uploaded fixture files
+- Run tests: `npx playwright test --reporter=line`
+
+---
+
+## File Map
+
+```
+tests/
+  fixtures/
+    test-photo.jpg            (existing — untouched)
+    test-nonimage.txt         (existing — untouched)
+    test-route.gpx            (NEW — Task 2)
+  ui/
+    helpers.js                (stays here — shared)
+    auth/
+      auth.setup.js           (moved — Task 3)
+      auth.spec.js            (moved — Task 3)
+    post/
+      post.spec.js            (moved + P6-P8 — Tasks 3 & 5)
+      validation.spec.js      (moved — Task 3)
+    gpx/
+      gpx-journey.spec.js     (moved — Task 3)
+      gpx-manager.spec.js     (NEW — Task 4)
+    maps/
+      maps.spec.js            (moved — Task 3)
+    stories/
+      stories.spec.js         (moved — Task 3)
+    dailies/
+      dailies.spec.js         (moved — Task 3)
+    home/
+      home.spec.js            (NEW — Task 1)
+      home-highlights.spec.js (NEW — Task 1)
+    nav/
+      nav.spec.js             (moved — Task 3)
+    trip/
+      trip-filter.spec.js     (moved — Task 3)
+    a11y/
+      accessibility.spec.js   (NEW — Task 1; AX6-AX7 added — Task 6)
+  global-setup.js             (untouched)
+```
+
+---
+
+## Task 1: Sync missing test files and fix stale trip-slug references
+
+30 of 49 tests fail on the current branch because tests reference `japan-korea-2026` and `italy-2025` trips that no longer match the demo data. This task brings the branch up to parity with `main`'s up-to-date test files.
+
+**Files to overwrite (correct content below):**
+- `tests/ui/nav.spec.js`
+- `tests/ui/dailies.spec.js`
+- `tests/ui/stories.spec.js`
+- `tests/ui/gpx-journey.spec.js`
+
+**Files to create:**
+- `tests/ui/home.spec.js`
+- `tests/ui/home-highlights.spec.js`
+- `tests/ui/accessibility.spec.js`
+
+- [ ] **Step 1: Overwrite nav.spec.js**
+
+Replace `tests/ui/nav.spec.js` entirely with:
+
+```js
+// @ts-check
+// Tests: N1–N5 — page loads and navigation links
+const { test, expect } = require('@playwright/test');
+
+// ── N1: /trips/italy-2026-demo/dailies renders ───────────────────────────────
+test('N1: /trips/italy-2026-demo/dailies page loads with site header', async ({ page }) => {
+    const errors = [];
+    page.on('pageerror', e => errors.push(e.message));
+
+    await page.goto('/trips/italy-2026-demo/dailies');
+    await expect(page.locator('.site-header')).toBeVisible();
+    await expect(page).toHaveTitle(/Into the East/i);
+    expect(errors).toHaveLength(0);
+});
+
+// ── N2: /trips/italy-2026-demo/map renders without JS errors ─────────────────
+test('N2: /trips/italy-2026-demo/map page loads without JS errors', async ({ page }) => {
+    const errors = [];
+    page.on('pageerror', e => errors.push(e.message));
+
+    await page.goto('/trips/italy-2026-demo/map');
+    await expect(page.locator('.site-header')).toBeVisible();
+    expect(errors).toHaveLength(0);
+});
+
+// ── N3: /trips/italy-2026-demo/stats renders ─────────────────────────────────
+test('N3: /trips/italy-2026-demo/stats page loads with site header', async ({ page }) => {
+    const errors = [];
+    page.on('pageerror', e => errors.push(e.message));
+
+    await page.goto('/trips/italy-2026-demo/stats');
+    await expect(page.locator('.site-header')).toBeVisible();
+    expect(errors).toHaveLength(0);
+});
+
+// ── N4: trip page has Journal filter button (replaced nav link) ───────────────
+test('N4: trip page filter bar has Journal button', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo');
+    await expect(page.locator('.trip-filter-btn[data-filter="journal"]')).toBeVisible();
+});
+
+// ── N5: "Map" nav link goes to /map ──────────────────────────────────────────
+test.skip('N5: Map nav link navigates to /map', async ({ page }) => {
+    await page.goto('/');
+    await page.click('nav a[href*="map"]');
+    await expect(page).toHaveURL(/\/map/);
+});
+```
+
+- [ ] **Step 2: Overwrite dailies.spec.js**
+
+Replace `tests/ui/dailies.spec.js` entirely with:
+
+```js
+// @ts-check
+// Tests: T1–T6 — dailies feed and individual entry pages
+const { test, expect } = require('@playwright/test');
+
+// Known fixture entries that always exist in the repo
+const KNOWN_SLUG = '2026-09-01-0700-setting-off-from-campiglia.entry';
+const KNOWN_TITLE = 'Setting Off from Campiglia';
+const KNOWN_CITY = 'Campiglia Marittima';
+const KNOWN_COUNTRY = 'Italy';
+
+// Use two real entries from central-asia-2023 to verify descending order
+const NEWER_SLUG = '2023-10-18-pixelfed-22.entry'; // newest date in that trip
+const OLDER_SLUG = '2023-08-28-pixelfed-1.entry';  // oldest date in that trip
+
+// ── T1: Dailies page loads ─────────────────────────────────────────────────────
+test('T1: /trips/italy-2026-demo/dailies loads and shows at least one entry card', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo/dailies');
+    await expect(page.locator('.journal-post').first()).toBeVisible();
+    await expect(page.locator('.site-header')).toBeVisible();
+});
+
+// ── T2: Entries are newest-first ──────────────────────────────────────────────
+// Verify using two known real entries from central-asia-2023 (22 entries, stable order).
+test('T2: dailies shows newer entries before older entries', async ({ page }) => {
+    await page.goto('/trips/central-asia-2023/dailies');
+
+    // Use attribute selector to handle dots in slug names (CSS dots are class selectors)
+    const newerCard = page.locator(`.journal-post[id="entry-${NEWER_SLUG}"]`);
+    const olderCard = page.locator(`.journal-post[id="entry-${OLDER_SLUG}"]`);
+
+    await expect(newerCard).toBeVisible();
+    await expect(olderCard).toBeVisible();
+
+    // The newer entry should appear higher in the DOM (lower index)
+    const newerIdx = await newerCard.evaluate(el => {
+        return [...document.querySelectorAll('.journal-post')].findIndex(c => c.id === el.id);
+    });
+    const olderIdx = await olderCard.evaluate(el => {
+        return [...document.querySelectorAll('.journal-post')].findIndex(c => c.id === el.id);
+    });
+
+    expect(newerIdx).toBeLessThan(olderIdx);
+});
+
+// ── T3: Individual entry page loads ───────────────────────────────────────────
+test('T3: individual entry page loads at /trips/italy-2026-demo/dailies/{slug}', async ({ page }) => {
+    await page.goto(`/trips/italy-2026-demo/dailies/${KNOWN_SLUG}`);
+    await expect(page.locator('article.entry')).toBeVisible();
+    await expect(page.locator('.site-header')).toBeVisible();
+});
+
+// ── T4: Entry page shows title, date, and content ─────────────────────────────
+test('T4: entry page shows title and body content', async ({ page }) => {
+    await page.goto(`/trips/italy-2026-demo/dailies/${KNOWN_SLUG}`);
+    await expect(page.locator('.entry-title')).toContainText(KNOWN_TITLE);
+    await expect(page.locator('.entry-body')).not.toBeEmpty();
+    await expect(page.locator('time.entry-date')).toBeVisible();
+});
+
+// ── T5: Entry page shows location when present ────────────────────────────────
+test('T5: entry page shows city and country when set', async ({ page }) => {
+    await page.goto(`/trips/italy-2026-demo/dailies/${KNOWN_SLUG}`);
+    await expect(page.locator('.entry-location')).toContainText(KNOWN_CITY);
+    await expect(page.locator('.entry-location')).toContainText(KNOWN_COUNTRY);
+});
+
+// ── T6: Entry page has a fixed top back pill and a footer back pill ───────────────
+test('T6: entry page has fixed back pill at top and back pill in footer', async ({ page }) => {
+    const KNOWN_ENTRY = `/trips/italy-2026-demo/dailies/${KNOWN_SLUG}`;
+    await page.goto(KNOWN_ENTRY);
+    await expect(page.locator('article.entry')).toBeVisible();
+    const topPill = page.locator('.entry-back-fixed');
+    await expect(topPill).toBeVisible();
+    await expect(topPill).toHaveText(/← Back/);
+    const footerPill = page.locator('.entry-footer .back-pill');
+    await expect(footerPill).toBeVisible();
+    await expect(footerPill).toHaveText(/← Back/);
+});
+```
+
+- [ ] **Step 3: Overwrite stories.spec.js**
+
+Replace `tests/ui/stories.spec.js` entirely with:
+
+```js
+// @ts-check
+// Tests: S1–S7 — story mode rendering and navigation
+// Requires demo data: run `make demo-load` before this suite.
+const { test, expect } = require('@playwright/test');
+
+const STORIES_URL    = '/trips/italy-2026-demo/stories';
+const STORY_GALLERY  = '/trips/italy-2026-demo/stories/val-dorcia-at-dawn';
+const STORY_SCROLLY  = '/trips/italy-2026-demo/stories/sorano-rock-and-time';
+const DEMO_STORY     = '/trips/italy-2026-demo/stories/val-dorcia-at-dawn';
+
+// ── S1: Stories listing shows cards ──────────────────────────────────────────
+test('S1: stories listing renders at least 3 story cards', async ({ page }) => {
+    await page.goto(STORIES_URL);
+    const cards = page.locator('.story-card');
+    await expect(cards.first()).toBeVisible({ timeout: 5000 });
+    const count = await cards.count();
+    expect(count, 'At least 3 story cards').toBeGreaterThanOrEqual(3);
+});
+
+// ── S2: Gallery-led story — hero image + snap-gallery + chapter-break + text-only pull-quote ──
+test('S2: gallery-led story renders hero, snap-gallery, chapter-break, text-only pull-quote', async ({ page }) => {
+    await page.goto(STORY_GALLERY);
+    await expect(page.locator('.story-hero__img')).toBeVisible({ timeout: 8000 });
+    await expect(page.locator('.story-hero__img-placeholder')).toHaveCount(0);
+    const galleries = page.locator('.pgallery');
+    await expect(galleries.first()).toBeVisible();
+    expect(await galleries.count(), 'Two snap-galleries').toBe(2);
+    await expect(page.locator('.chapter-break')).toBeVisible();
+    await expect(page.locator('.pull-quote__inner--no-image')).toBeVisible();
+});
+
+// ── S3: Scrolly-led story — two scrolly-sections + pull-quote with image ─────
+test('S3: scrolly-led story renders two scrolly-sections and pull-quote with background image', async ({ page }) => {
+    await page.goto(STORY_SCROLLY);
+    await expect(page.locator('.story-hero__img')).toBeVisible({ timeout: 8000 });
+    const scrollySections = page.locator('.scrolly');
+    await expect(scrollySections.first()).toBeVisible();
+    expect(await scrollySections.count(), 'Two scrolly-sections').toBe(2);
+    await expect(page.locator('.pull-quote__bg')).toBeVisible();
+});
+
+// ── S4: Scrolly story loads without JS errors (Scrollama CDN) ────────────────
+test('S4: scrolly story page loads without JS errors', async ({ page }) => {
+    const errors = [];
+    page.on('pageerror', e => errors.push(e.message));
+    await page.goto(STORY_SCROLLY);
+    await expect(page.locator('.story-hero__img')).toBeVisible({ timeout: 8000 });
+    await page.waitForTimeout(1000);
+    expect(errors, 'No JS errors on story page').toHaveLength(0);
+});
+
+// ── S5: Back button returns to stories listing ────────────────────────────────
+test('S5: back button navigates back to stories listing', async ({ page }) => {
+    await page.goto(STORIES_URL);
+    await page.locator('.story-card').first().click();
+    await expect(page.locator('.story-hero__img')).toBeVisible({ timeout: 8000 });
+    await page.locator('.story-escape').click();
+    await expect(page).toHaveURL(/italy-2026-demo\/stories$/);
+    await expect(page.locator('.story-card').first()).toBeVisible();
+});
+
+// ── S6: Demo story — hero image sanity check ─────────────────────────────────
+test('S6: demo story renders hero image without placeholder', async ({ page }) => {
+    await page.goto(DEMO_STORY);
+    await expect(page.locator('.story-hero__img')).toBeVisible({ timeout: 8000 });
+    await expect(page.locator('.story-hero__img-placeholder')).toHaveCount(0);
+});
+
+// ── S7: Story body back link is styled as a back-pill ────────────────────────
+test('S7: story body back link has back-pill class', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo/stories/val-dorcia-at-dawn');
+    await expect(page.locator('.story-hero__img')).toBeVisible({ timeout: 8000 });
+    await page.evaluate(() => window.scrollBy(0, window.innerHeight * 1.5));
+    await page.waitForTimeout(300);
+    const bodyBack = page.locator('.story-footer .back-pill');
+    await expect(bodyBack).toBeAttached();
+    await expect(bodyBack).toHaveText(/← Back/);
+});
+```
+
+- [ ] **Step 4: Overwrite gpx-journey.spec.js**
+
+Replace only the `getMapUtils` function to point at `italy-2026-demo`. Change line 9:
+
+```js
+async function getMapUtils(page) {
+    await page.goto('/trips/italy-2026-demo/map');
+    await expect(page.locator('canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+}
+```
+
+All G1–G5 test bodies are unchanged — only the URL in `getMapUtils` changes.
+
+- [ ] **Step 5: Create home.spec.js**
+
+Create `tests/ui/home.spec.js`:
+
+```js
+// @ts-check
+// Tests: H1 — home page journal feed
+const { test, expect } = require('@playwright/test');
+
+// ── H1: Home page renders inline journal posts ─────────────────────────────────
+test('H1: home page shows at least one inline journal-post block', async ({ page }) => {
+    await page.goto('/');
+    await expect(page.locator('.journal-post').first()).toBeVisible();
+    await expect(page.locator('.site-header')).toBeVisible();
+});
+```
+
+- [ ] **Step 6: Create home-highlights.spec.js**
+
+Create `tests/ui/home-highlights.spec.js`:
+
+```js
+// @ts-check
+// Tests: H2–H5 — Between-trips highlights mode
+// These tests temporarily set travelling: false in user/config/site.yaml,
+// run the assertions, then restore the original value.
+// Requires demo data with featured entries: run `make demo-load` first.
+const { test, expect } = require('@playwright/test');
+const fs = require('fs');
+const path = require('path');
+
+const SITE_YAML_PATH = path.join(__dirname, '../../user/config/site.yaml');
+
+test.describe('Between-trips highlights mode', () => {
+    let originalSiteYaml;
+
+    test.beforeAll(async () => {
+        originalSiteYaml = fs.readFileSync(SITE_YAML_PATH, 'utf8');
+        const patched = originalSiteYaml.replace(/^travelling:\s*true/m, 'travelling: false');
+        fs.writeFileSync(SITE_YAML_PATH, patched);
+        await new Promise(r => setTimeout(r, 400));
+    });
+
+    test.afterAll(async () => {
+        fs.writeFileSync(SITE_YAML_PATH, originalSiteYaml);
+    });
+
+    // ── H2: Highlights grid is visible ──────────────────────────────────────────
+    test('H2: homepage shows highlights grid when not travelling', async ({ page }) => {
+        await page.goto('/');
+        await expect(page.locator('.home-highlights-grid')).toBeVisible({ timeout: 10000 });
+    });
+
+    // ── H3: Highlight cards contain trip link ────────────────────────────────────
+    test('H3: highlight cards have a View-trip link', async ({ page }) => {
+        await page.goto('/');
+        await expect(page.locator('.home-highlight-card').first()).toBeVisible({ timeout: 10000 });
+        await expect(page.locator('.home-highlight-trip-link').first()).toBeVisible();
+    });
+
+    // ── H4: Between-trips home map renders without JS errors ────────────────────
+    test('H4: home map renders in between-trips mode without JS errors', async ({ page }) => {
+        const errors = [];
+        page.on('pageerror', e => errors.push(e.message));
+        await page.goto('/');
+        await expect(page.locator('#home-map canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+        expect(errors, 'No JS errors').toHaveLength(0);
+    });
+
+    // ── H5: CTA links to /trips ──────────────────────────────────────────────────
+    test('H5: "Explore all past trips" CTA links to /trips', async ({ page }) => {
+        await page.goto('/');
+        const cta = page.locator('.home-highlights-cta');
+        await expect(cta).toBeVisible({ timeout: 10000 });
+        await expect(cta).toHaveAttribute('href', /\/trips/);
+    });
+});
+```
+
+- [ ] **Step 7: Create accessibility.spec.js**
+
+Create `tests/ui/accessibility.spec.js` with the full A1–A5 + AX1–AX5 suite:
+
+```js
+// @ts-check
+// Tests: A1–A5 (feature checks) and AX1–AX5 (axe scans)
+const { test, expect } = require('@playwright/test');
+
+// ── A1: Skip link ──────────────────────────────────────────────────────────────
+test('A1: skip link targets #main-content and is first focusable element', async ({ page }) => {
+    await page.goto('/');
+    const skipLink = page.locator('.skip-link');
+    await expect(skipLink).toBeAttached();
+    await expect(skipLink).toHaveAttribute('href', '#main-content');
+    await expect(page.locator('#main-content')).toBeAttached();
+});
+
+// ── A2: Color token contrast ───────────────────────────────────────────────────
+test('A2: contrast tokens meet WCAG AA 4.5:1 floor', async ({ page }) => {
+    await page.goto('/');
+    const [muted, accent] = await page.evaluate(() => [
+        getComputedStyle(document.documentElement).getPropertyValue('--color-ink-muted').trim(),
+        getComputedStyle(document.documentElement).getPropertyValue('--color-accent').trim(),
+    ]);
+    expect(muted.toLowerCase()).toBe('#90887e');
+    expect(accent.toLowerCase()).toBe('#2e9880');
+});
+
+// ── A3: Filter button aria-pressed + toggle aria-expanded ──────────────────────
+const TRIP_URL = '/trips/italy-2026-demo';
+
+test('A3a: All-content filter has aria-pressed="true" on load', async ({ page }) => {
+    await page.goto(TRIP_URL);
+    await expect(page.locator('.trip-filter-btn[data-filter="all"]')).toHaveAttribute('aria-pressed', 'true');
+    await expect(page.locator('.trip-filter-btn[data-filter="journal"]')).toHaveAttribute('aria-pressed', 'false');
+    await expect(page.locator('.trip-filter-btn[data-filter="story"]')).toHaveAttribute('aria-pressed', 'false');
+});
+
+test('A3b: clicking Journal filter toggles aria-pressed', async ({ page }) => {
+    await page.goto(TRIP_URL);
+    await page.click('.trip-filter-btn[data-filter="journal"]');
+    await expect(page.locator('.trip-filter-btn[data-filter="journal"]')).toHaveAttribute('aria-pressed', 'true');
+    await expect(page.locator('.trip-filter-btn[data-filter="all"]')).toHaveAttribute('aria-pressed', 'false');
+});
+
+test('A3c: Stats toggle has aria-expanded="false" and aria-controls on load', async ({ page }) => {
+    await page.goto(TRIP_URL);
+    await expect(page.locator('#trip-stats-toggle')).toHaveAttribute('aria-expanded', 'false');
+    await expect(page.locator('#trip-stats-toggle')).toHaveAttribute('aria-controls', 'trip-stats-block');
+});
+
+test('A3d: clicking Stats toggle sets aria-expanded="true" then back to false', async ({ page }) => {
+    await page.goto(TRIP_URL);
+    await page.click('#trip-stats-toggle');
+    await expect(page.locator('#trip-stats-toggle')).toHaveAttribute('aria-expanded', 'true');
+    await page.click('#trip-stats-toggle');
+    await expect(page.locator('#trip-stats-toggle')).toHaveAttribute('aria-expanded', 'false');
+});
+
+const ITALY_URL = '/trips/italy-2026-demo';
+
+test('A3e: Cycling toggle has aria-expanded="false" and aria-controls on load', async ({ page }) => {
+    await page.goto(ITALY_URL);
+    await expect(page.locator('#trip-cycling-toggle')).toHaveAttribute('aria-expanded', 'false');
+    await expect(page.locator('#trip-cycling-toggle')).toHaveAttribute('aria-controls', 'trip-cycling-block');
+});
+
+test('A3f: clicking Cycling toggle sets aria-expanded="true" then back to false', async ({ page }) => {
+    await page.goto(ITALY_URL);
+    await page.click('#trip-cycling-toggle');
+    await expect(page.locator('#trip-cycling-toggle')).toHaveAttribute('aria-expanded', 'true');
+    await page.click('#trip-cycling-toggle');
+    await expect(page.locator('#trip-cycling-toggle')).toHaveAttribute('aria-expanded', 'false');
+});
+
+// ── A4: Photo strip keyboard navigation ───────────────────────────────────────
+test('A4a: all photo strips have role=region and aria-label', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo/dailies');
+    const strips = page.locator('.journal-photo-strip');
+    const count = await strips.count();
+    if (count === 0) return;
+    for (let i = 0; i < count; i++) {
+        await expect(strips.nth(i)).toHaveAttribute('role', 'region');
+        await expect(strips.nth(i)).toHaveAttribute('aria-label', 'Photo strip');
+    }
+});
+
+test('A4b: multi-slide photo strips have accessible prev/next controls', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo/dailies');
+    const multiCount = await page.locator('.journal-photo-strip').evaluateAll(
+        els => els.filter(el => parseInt(el.dataset.slides, 10) >= 2).length
+    );
+    if (multiCount === 0) return;
+    await expect(page.locator('.strip-prev').first()).toBeAttached();
+    await expect(page.locator('.strip-next').first()).toBeAttached();
+    await expect(page.locator('.strip-prev').first()).toHaveAttribute('aria-label', 'Previous photo');
+    await expect(page.locator('.strip-next').first()).toHaveAttribute('aria-label', 'Next photo');
+});
+
+// ── A5: GPX delete button unique accessible names ──────────────────────────────
+test('A5: GPX delete buttons have unique aria-labels per filename', async ({ page }) => {
+    await page.route('**/api/v1/pages**/media', async route => {
+        await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({
+                data: [
+                    { filename: 'tokyo-day1.gpx', size: 102400, modified: '2026-03-25T10:00:00Z' }
+                ]
+            })
+        });
+    });
+    await page.goto('/gpx-manager');
+    const deleteBtn = page.locator('.gpx-trip').first().locator('.gpx-delete[data-filename="tokyo-day1.gpx"]');
+    await expect(deleteBtn).toBeVisible();
+    await expect(deleteBtn).toHaveAttribute('aria-label', 'Delete tokyo-day1.gpx');
+});
+
+// ── AX1–AX5: axe-core WCAG 2.1 AA regression scans ───────────────────────────
+const { AxeBuilder } = require('@axe-core/playwright');
+
+const WCAG_TAGS = ['wcag2a', 'wcag2aa'];
+const BLOCKING = ['critical', 'serious'];
+
+function axeScan(id, url) {
+    test(`${id}: ${url} passes axe WCAG 2.1 AA (critical/serious)`, async ({ page }) => {
+        await page.goto(url);
+        const results = await new AxeBuilder({ page }).withTags(WCAG_TAGS).analyze();
+        const violations = results.violations.filter(v => BLOCKING.includes(v.impact));
+        expect(
+            violations,
+            violations.map(v =>
+                `[${v.impact}] ${v.id}: ${v.description}\n  ` +
+                v.nodes.map(n => n.html).join('\n  ')
+            ).join('\n\n')
+        ).toHaveLength(0);
+    });
+}
+
+axeScan('AX1', '/');
+axeScan('AX2', '/trips/italy-2026-demo');
+axeScan('AX3', '/trips/italy-2026-demo/dailies');
+axeScan('AX4', '/trips/italy-2026-demo/dailies/2026-09-01-0700-setting-off-from-campiglia.entry');
+axeScan('AX5', '/trips');
+```
+
+- [ ] **Step 8: Run tests to verify the fix**
+
+```bash
+npx playwright test --reporter=line 2>&1 | tail -5
+```
+
+Expected: at least 40 of the 62 tests pass (the pre-existing M7 marker-click, home map, and between-trips tests may still fail if the site state doesn't match — that's acceptable; what must NOT happen is failures in N1–N4, T1–T6, G1–G5, S1–S7).
+
+- [ ] **Step 9: Commit**
+
+```bash
+git add tests/ui/nav.spec.js tests/ui/dailies.spec.js tests/ui/stories.spec.js \
+        tests/ui/gpx-journey.spec.js tests/ui/home.spec.js \
+        tests/ui/home-highlights.spec.js tests/ui/accessibility.spec.js
+git commit -m "test: fix stale trip-slug references; add home, highlights, a11y specs"
+```
+
+---
+
+## Task 2: Add test-route.gpx fixture
+
+- [ ] **Step 1: Create tests/fixtures/test-route.gpx**
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<gpx version="1.1" creator="test" xmlns="http://www.topografix.com/GPX/1/1">
+  <trk><trkseg>
+    <trkpt lat="43.7696" lon="11.2558"><ele>50</ele></trkpt>
+  </trkseg></trk>
+</gpx>
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add tests/fixtures/test-route.gpx
+git commit -m "test: add minimal GPX fixture for GPX Manager tests"
+```
+
+---
+
+## Task 3: Reorganize tests into subdirectories
+
+Move all 13 spec/setup files from `tests/ui/` into feature subdirectories using `git mv`. `helpers.js` stays at `tests/ui/helpers.js`. After moving, update every `require('./helpers')` to `require('../helpers')`.
+
+- [ ] **Step 1: Create subdirectory structure and move files**
+
+```bash
+mkdir -p tests/ui/auth tests/ui/post tests/ui/gpx tests/ui/maps \
+          tests/ui/stories tests/ui/dailies tests/ui/home tests/ui/nav \
+          tests/ui/trip tests/ui/a11y
+
+git mv tests/ui/auth.setup.js   tests/ui/auth/auth.setup.js
+git mv tests/ui/auth.spec.js    tests/ui/auth/auth.spec.js
+git mv tests/ui/post.spec.js    tests/ui/post/post.spec.js
+git mv tests/ui/validation.spec.js tests/ui/post/validation.spec.js
+git mv tests/ui/gpx-journey.spec.js tests/ui/gpx/gpx-journey.spec.js
+git mv tests/ui/maps.spec.js    tests/ui/maps/maps.spec.js
+git mv tests/ui/stories.spec.js tests/ui/stories/stories.spec.js
+git mv tests/ui/dailies.spec.js tests/ui/dailies/dailies.spec.js
+git mv tests/ui/home.spec.js    tests/ui/home/home.spec.js
+git mv tests/ui/home-highlights.spec.js tests/ui/home/home-highlights.spec.js
+git mv tests/ui/nav.spec.js     tests/ui/nav/nav.spec.js
+git mv tests/ui/trip-filter.spec.js tests/ui/trip/trip-filter.spec.js
+git mv tests/ui/accessibility.spec.js tests/ui/a11y/accessibility.spec.js
+```
+
+- [ ] **Step 2: Update helpers import path in every moved spec**
+
+Every moved file has `require('./helpers')` — change to `require('../helpers')`. Run this from the project root:
+
+```bash
+find tests/ui -mindepth 2 -name "*.js" -exec \
+  sed -i "s|require('./helpers')|require('../helpers')|g" {} \;
+```
+
+Verify no `./helpers` remain:
+
+```bash
+grep -r "require('./helpers')" tests/ui/
+```
+
+Expected: no output.
+
+- [ ] **Step 3: Update home-highlights.spec.js path for site.yaml**
+
+`home-highlights.spec.js` has `path.join(__dirname, '../../user/config/site.yaml')`. After the move it sits one level deeper, so update to `'../../../user/config/site.yaml'`:
+
+In `tests/ui/home/home-highlights.spec.js`, change:
+```js
+const SITE_YAML_PATH = path.join(__dirname, '../../user/config/site.yaml');
+```
+to:
+```js
+const SITE_YAML_PATH = path.join(__dirname, '../../../user/config/site.yaml');
+```
+
+- [ ] **Step 4: Update helpers.js TRACKER_DIR path**
+
+`helpers.js` uses `path.join(__dirname, '../../user/pages/...')`. It stays at `tests/ui/helpers.js` so no change needed — verify:
+
+```bash
+head -6 tests/ui/helpers.js
+```
+
+Expected: `__dirname` still resolves to `tests/ui/` — no change needed.
+
+- [ ] **Step 5: Run tests to verify move didn't break anything**
+
+```bash
+npx playwright test --reporter=line 2>&1 | tail -5
+```
+
+Expected: same pass/fail count as after Task 1.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add -A tests/ui/
+git commit -m "test: reorganise tests/ui/ into feature subdirectories"
+```
+
+---
+
+## Task 4: Add GPX Manager end-to-end spec
+
+Create `tests/ui/gpx/gpx-manager.spec.js` with GM1–GM7. Tests make real API calls; `afterAll` cleans up uploaded files via Node `fetch`.
+
+The `storageState` file at `tests/.auth/user.json` contains the session cookie. `afterAll` reads it to authenticate a cleanup DELETE call.
+
+- [ ] **Step 1: Create tests/ui/gpx/gpx-manager.spec.js**
+
+```js
+// @ts-check
+// Tests: GM1–GM7 — GPX Manager end-to-end (real API calls)
+// Requires: Grav server at localhost:8081, demo-load completed, user logged in.
+const { test, expect } = require('@playwright/test');
+const fs = require('fs');
+const path = require('path');
+
+const BASE_URL = process.env.GRAV_BASE_URL || 'http://localhost:8081';
+const API = `${BASE_URL}/api/v1`;
+const TRIP_ROUTE = '/trips/italy-2026-demo';
+const AUTH_FILE = path.join(__dirname, '../../.auth/user.json');
+const GPX_FIXTURE = path.join(__dirname, '../../../fixtures/test-route.gpx');
+const GPX_FIXTURE_CONTENT = fs.readFileSync(GPX_FIXTURE);
+
+// Track uploaded filenames for cleanup
+const uploaded = [];
+
+async function apiDelete(filename) {
+    const authState = JSON.parse(fs.readFileSync(AUTH_FILE, 'utf-8'));
+    const cookie = authState.cookies
+        .map(c => `${c.name}=${c.value}`)
+        .join('; ');
+    await fetch(
+        `${API}/pages${TRIP_ROUTE}/media/${encodeURIComponent(filename)}`,
+        { method: 'DELETE', headers: { Cookie: cookie } }
+    );
+}
+
+test.afterAll(async () => {
+    for (const name of uploaded) {
+        try { await apiDelete(name); } catch (_) { /* best-effort */ }
+    }
+});
+
+// ── GM1: Page loads with auth ─────────────────────────────────────────────────
+test('GM1: /gpx-manager loads with auth and shows one section per trip', async ({ page }) => {
+    await page.goto('/gpx-manager');
+    const sections = page.locator('.gpx-trip');
+    await expect(sections.first()).toBeVisible({ timeout: 8000 });
+    const count = await sections.count();
+    expect(count, 'At least one trip section').toBeGreaterThan(0);
+});
+
+// ── GM2: Page without auth shows login form ───────────────────────────────────
+test('GM2: /gpx-manager without auth renders inline login form', async ({ browser }) => {
+    const ctx = await browser.newContext({ storageState: { cookies: [], origins: [] } });
+    const page = await ctx.newPage();
+    await page.goto(`${BASE_URL}/gpx-manager`);
+    await expect(page.locator('#grav-login')).toBeVisible({ timeout: 8000 });
+    await ctx.close();
+});
+
+// ── GM3: File list settles (loading placeholder gone) ────────────────────────
+test('GM3: file list resolves — loading placeholder is gone after API call', async ({ page }) => {
+    await page.goto('/gpx-manager');
+    const italySection = page.locator('.gpx-trip[data-route="/trips/italy-2026-demo"]');
+    await expect(italySection).toBeVisible({ timeout: 8000 });
+    // Wait for loading placeholder to disappear
+    await expect(italySection.locator('.gpx-loading')).toHaveCount(0, { timeout: 15000 });
+});
+
+// ── GM4: Upload test-route.gpx → appears in file list ────────────────────────
+test('GM4: uploading test-route.gpx shows it in the file list', async ({ page }) => {
+    await page.goto('/gpx-manager');
+    const italySection = page.locator('.gpx-trip[data-route="/trips/italy-2026-demo"]');
+    await expect(italySection).toBeVisible({ timeout: 8000 });
+    await expect(italySection.locator('.gpx-loading')).toHaveCount(0, { timeout: 15000 });
+
+    const form = italySection.locator('.gpx-upload-form');
+    await form.locator('input[type=file]').setInputFiles({
+        name: 'test-route.gpx',
+        mimeType: 'application/gpx+xml',
+        buffer: GPX_FIXTURE_CONTENT,
+    });
+    await form.locator('.gpx-upload-btn').click();
+
+    // Wait for status to show "Uploaded!" and file list to refresh
+    await expect(form.locator('.gpx-status')).toContainText('Uploaded!', { timeout: 15000 });
+    await expect(italySection.locator('.gpx-table td', { hasText: 'test-route.gpx' })).toBeVisible({ timeout: 10000 });
+
+    uploaded.push('test-route.gpx');
+});
+
+// ── GM5: Filename with spaces/caps gets slugified ─────────────────────────────
+test('GM5: filename with spaces and capitals is slugified before upload', async ({ page }) => {
+    await page.goto('/gpx-manager');
+    const italySection = page.locator('.gpx-trip[data-route="/trips/italy-2026-demo"]');
+    await expect(italySection).toBeVisible({ timeout: 8000 });
+    await expect(italySection.locator('.gpx-loading')).toHaveCount(0, { timeout: 15000 });
+
+    const form = italySection.locator('.gpx-upload-form');
+    await form.locator('input[type=file]').setInputFiles({
+        name: 'My Route 1.gpx',
+        mimeType: 'application/gpx+xml',
+        buffer: GPX_FIXTURE_CONTENT,
+    });
+    await form.locator('.gpx-upload-btn').click();
+
+    await expect(form.locator('.gpx-status')).toContainText('Uploaded!', { timeout: 15000 });
+    // The client-side slugify turns "My Route 1.gpx" → "my-route-1.gpx"
+    await expect(italySection.locator('.gpx-table td', { hasText: 'my-route-1.gpx' })).toBeVisible({ timeout: 10000 });
+
+    uploaded.push('my-route-1.gpx');
+});
+
+// ── GM6: Submit without file shows error message ──────────────────────────────
+test('GM6: submitting upload form without a file shows "Choose a file first."', async ({ page }) => {
+    await page.goto('/gpx-manager');
+    const italySection = page.locator('.gpx-trip[data-route="/trips/italy-2026-demo"]');
+    await expect(italySection).toBeVisible({ timeout: 8000 });
+
+    const form = italySection.locator('.gpx-upload-form');
+    await form.locator('.gpx-upload-btn').click();
+    await expect(form.locator('.gpx-status')).toHaveText('Choose a file first.');
+});
+
+// ── GM7: Delete uploaded file removes it from list ───────────────────────────
+test('GM7: deleting an uploaded file removes its row from the file list', async ({ page }) => {
+    // Upload a file first so we have something to delete
+    await page.goto('/gpx-manager');
+    const italySection = page.locator('.gpx-trip[data-route="/trips/italy-2026-demo"]');
+    await expect(italySection).toBeVisible({ timeout: 8000 });
+    await expect(italySection.locator('.gpx-loading')).toHaveCount(0, { timeout: 15000 });
+
+    const form = italySection.locator('.gpx-upload-form');
+    await form.locator('input[type=file]').setInputFiles({
+        name: 'to-delete.gpx',
+        mimeType: 'application/gpx+xml',
+        buffer: GPX_FIXTURE_CONTENT,
+    });
+    await form.locator('.gpx-upload-btn').click();
+    await expect(form.locator('.gpx-status')).toContainText('Uploaded!', { timeout: 15000 });
+
+    // Click delete for the uploaded file
+    page.once('dialog', dialog => dialog.accept());
+    await italySection.locator('.gpx-delete[data-filename="to-delete.gpx"]').click();
+
+    // Row must disappear
+    await expect(italySection.locator('.gpx-table td', { hasText: 'to-delete.gpx' }))
+        .toHaveCount(0, { timeout: 10000 });
+    // No cleanup needed — the test deleted it itself
+});
+```
+
+- [ ] **Step 2: Run GM tests in isolation to verify**
+
+```bash
+npx playwright test tests/ui/gpx/gpx-manager.spec.js --reporter=line 2>&1
+```
+
+Expected: GM1, GM3, GM6 pass (read-only). GM2 passes (auth check). GM4, GM5, GM7 pass if demo data is loaded and API is up.
+
+- [ ] **Step 3: Run full suite to check no regressions**
+
+```bash
+npx playwright test --reporter=line 2>&1 | tail -5
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add tests/ui/gpx/gpx-manager.spec.js
+git commit -m "test: add GPX Manager end-to-end spec (GM1-GM7)"
+```
+
+---
+
+## Task 5: Add post form tests P6–P8
+
+Append three tests to `tests/ui/post/post.spec.js`. These test the success message, date pre-fill, and form reset after a successful submit.
+
+- [ ] **Step 1: Append P6–P8 to tests/ui/post/post.spec.js**
+
+Add after the existing P5 test block (before the final closing `}`):
+
+```js
+// ── P6: Success message is visible after submit ───────────────────────────────
+test('P6: successful submit shows "Entry posted successfully!" message', async ({ page }) => {
+    const tag = `p6-${Date.now()}`;
+    await page.goto('/post');
+    await page.fill('input[name="data[title]"]', `UI Test ${tag}`);
+    await page.fill('textarea[name="data[content]"]', 'P6 test. Safe to delete.');
+    await page.locator('.btn-post').evaluate(el => el.click());
+    await expect(page.locator('.form-messages, .notices')).toContainText(
+        'Entry posted successfully!', { timeout: 15_000 }
+    );
+    created.push(tag);
+});
+
+// ── P7: Date field is pre-filled with a recent timestamp ─────────────────────
+test('P7: date field is pre-filled within 5 minutes of now on page load', async ({ page }) => {
+    await page.goto('/post');
+    const rawValue = await page.locator('input[name="data[date]"]').inputValue();
+    // Blueprint format: Y-m-d H:i  →  "2026-06-21 14:30"
+    expect(rawValue, 'date field must not be empty').toBeTruthy();
+    const parsed = new Date(rawValue.replace(' ', 'T'));
+    expect(isNaN(parsed.getTime()), 'date field must parse as a valid date').toBe(false);
+    const diffMs = Math.abs(Date.now() - parsed.getTime());
+    expect(diffMs, 'date must be within 5 minutes of now').toBeLessThan(5 * 60 * 1000);
+});
+
+// ── P8: Form fields are cleared after successful submit (reset: true) ─────────
+test('P8: title and content fields are empty after a successful submit', async ({ page }) => {
+    const tag = `p8-${Date.now()}`;
+    await page.goto('/post');
+    await page.fill('input[name="data[title]"]', `UI Test ${tag}`);
+    await page.fill('textarea[name="data[content]"]', 'P8 reset test. Safe to delete.');
+    await page.locator('.btn-post').evaluate(el => el.click());
+    await expect(page.locator('.form-messages, .notices')).toContainText(
+        'Entry posted successfully!', { timeout: 15_000 }
+    );
+    // After reset, the form fields should be empty
+    await expect(page.locator('input[name="data[title]"]')).toHaveValue('');
+    await expect(page.locator('textarea[name="data[content]"]')).toHaveValue('');
+    created.push(tag);
+});
+```
+
+- [ ] **Step 2: Run post tests in isolation**
+
+```bash
+npx playwright test tests/ui/post/post.spec.js --reporter=line 2>&1
+```
+
+Expected: P1, P3, P4, P5, P6, P8 pass. P2 skipped. P7 passes (date pre-fill from blueprint `default: now`).
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add tests/ui/post/post.spec.js
+git commit -m "test: add P6-P8 — success message, date pre-fill, form reset"
+```
+
+---
+
+## Task 6: Extend accessibility scans (AX6–AX7)
+
+Add two more `axeScan()` calls to the bottom of `tests/ui/a11y/accessibility.spec.js`. AX6 mocks the API so the GPX Manager file list renders without a real upload dependency.
+
+- [ ] **Step 1: Append AX6 and AX7 to accessibility.spec.js**
+
+AX6 needs a mocked API route so the `.gpx-loading` placeholder resolves. Add a dedicated test (not via `axeScan()` helper) to support the mock:
+
+```js
+// ── AX6: /gpx-manager passes axe (mocked file list) ──────────────────────────
+test('AX6: /gpx-manager passes axe WCAG 2.1 AA (critical/serious)', async ({ page }) => {
+    await page.route('**/api/v1/pages**/media', async route => {
+        await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({
+                data: [{ filename: 'day1.gpx', size: 51200, modified: '2026-06-01T10:00:00Z' }]
+            })
+        });
+    });
+    await page.goto('/gpx-manager');
+    // Wait for file list to render before scanning
+    await expect(page.locator('.gpx-table')).toBeVisible({ timeout: 10000 });
+    const results = await new AxeBuilder({ page }).withTags(WCAG_TAGS).analyze();
+    const violations = results.violations.filter(v => BLOCKING.includes(v.impact));
+    expect(
+        violations,
+        violations.map(v =>
+            `[${v.impact}] ${v.id}: ${v.description}\n  ` +
+            v.nodes.map(n => n.html).join('\n  ')
+        ).join('\n\n')
+    ).toHaveLength(0);
+});
+```
+
+Then append the standard call for AX7:
+
+```js
+axeScan('AX7', '/trips/italy-2026-demo/stories/val-dorcia-at-dawn');
+```
+
+- [ ] **Step 2: Run accessibility tests in isolation**
+
+```bash
+npx playwright test tests/ui/a11y/accessibility.spec.js --reporter=line 2>&1
+```
+
+Expected: all AX scans pass or fail only on pre-existing violations (document any new ones as known issues in the test failure message).
+
+- [ ] **Step 3: Run full suite — final check**
+
+```bash
+npx playwright test --reporter=line 2>&1 | tail -10
+```
+
+Document the final pass/fail count in the commit message.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add tests/ui/a11y/accessibility.spec.js
+git commit -m "test: add AX6 (gpx-manager, mocked) and AX7 (story page) axe scans"
+```

docs/working/plans/2026-06-22-align-maps-tests.md

@@ -0,0 +1,790 @@
+# Feed-Map Alignment, Stories Map & E2E Tests
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Extract the shared feed mini-map into a reusable Twig partial, add the same map to the stories listing page, fix dailies attribution/marker-click bugs, document session learnings, and add regression tests for all new UX features.
+
+**Architecture:** A single `partials/feed-map.html.twig` partial handles all mini-map surfaces (dailies + stories), accepting parameterised `map_id`, `map_var`, `card_prefix`, and `show_journey` variables. The trip page (`trip.html.twig`) is a different layout and stays separate. Tests live in the existing `tests/ui/maps/` folder; new map-UX tests (panels, sort, fullscreen) go into `tests/ui/maps/map-ux.spec.js`.
+
+**Tech Stack:** Grav CMS 2.0 Twig templates, MapLibre GL JS v4, Playwright E2E tests (Node.js/Chromium).
+
+## Global Constraints
+
+- **Never read or expose `.env`** — contains sensitive credentials; pass it to `make` commands only
+- **Dev server URL:** `http://localhost:8081`
+- **Playwright runs via:** `npx playwright test --project=chromium` (auth session already cached in `tests/.auth/user.json`)
+- **All Twig template changes** go to `user/themes/intotheeast/templates/` — commit with `git -C user/ commit`
+- **All CSS changes** go to `user/themes/intotheeast/css/style.css` — commit with `git -C user/ commit`
+- **Test changes** go to `tests/ui/` in the main project repo — commit with `git commit` (not `git -C user/`)
+- **Docs/CLAUDE.md changes** go in the main project repo — commit with `git commit`
+- **Demo trip slug:** `italy-2026-demo` — all E2E tests use this trip
+- **MapLibre global vars:** `window.feedMap` (dailies), `window.storiesMap` (stories), `window.tripMap` (trip page)
+- **Marker click behaviour:** scroll to `#<card_prefix><slug>` + flash `.is-highlighted`. Fall back to `window.location.href = entry.url` only if the card element is not found
+- **Attribution fix:** after map `load`, call `map.getContainer().querySelector('.maplibregl-ctrl-attrib')?.removeAttribute('open')`
+- **Twig include:** use `{% include '...' with {...} only %}` — Grav global functions (`url()`) still work under `only`
+- **Worktree root:** `/home/mischa/Nextcloud/Projects/travel-blog-intotheeast/.claude/worktrees/align-maps-tests/`
+- **user/ repo path:** `/home/mischa/Nextcloud/Projects/travel-blog-intotheeast/.claude/worktrees/align-maps-tests/user/` — this is a git submodule; commit there with `git -C user/ ...`
+
+---
+
+### Task 1: Create `partials/feed-map.html.twig` shared partial
+
+**Files:**
+- Create: `user/themes/intotheeast/templates/partials/feed-map.html.twig`
+
+**Interfaces:**
+- Produces: A Twig partial renderable via `{% include 'partials/feed-map.html.twig' with {...} only %}`.
+- The `window.<map_var>` MapLibre instance is accessible to Playwright tests as e.g. `window.feedMap`.
+
+- [ ] **Step 1: Create the partial file**
+
+Create `user/themes/intotheeast/templates/partials/feed-map.html.twig`:
+
+```twig
+{#
+  Feed mini-map partial — shared by dailies.html.twig and stories.html.twig.
+
+  Required variables (via {% include ... with {...} only %}):
+    map_entries  — array: [{lat, lng, title, slug, url, type, force_connect, transport_mode}]
+    map_id       — string: HTML id for the map div (e.g. 'feed-map', 'stories-map')
+    map_var      — string: JS variable name for the MapLibre Map (e.g. 'feedMap', 'storiesMap')
+    link_href    — string|null: URL for "View full map" link; null/empty hides the link
+    card_prefix  — string: prefix for scroll-to card IDs ('entry-' or 'story-')
+    trip_page    — Grav page: trip page for autoconnect setting (used when show_journey is true)
+    show_journey — bool: whether to draw the route connector line between markers
+#}
+{% if map_entries|length > 0 %}
+<div class="feed-map-wrap">
+    <div class="feed-map" id="{{ map_id }}">
+        <button class="feed-map-fullscreen-btn" id="{{ map_id }}-fullscreen" aria-label="Expand map">
+            <svg class="feed-map-fs-open" aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+                <path d="M0 0v4h1.5V1.5H4V0z M14 0H10v1.5h2.5V4H14z M0 14v-4h1.5v2.5H4V14z M14 14H10v-1.5h2.5V10H14z"/>
+            </svg>
+            <span class="feed-map-fs-close" aria-hidden="true">✕</span>
+        </button>
+    </div>
+    {% if link_href %}
+    <a class="feed-map-link" href="{{ link_href }}">View full map →</a>
+    {% endif %}
+</div>
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
+<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
+<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
+<script>
+{% set js_suffix = map_id|replace({'-': '_'})|upper %}
+var MAP_ENTRIES_{{ js_suffix }} = {{ map_entries|json_encode|raw }};
+{% if show_journey %}
+{% set _ac = trip_page ? (trip_page.header.autoconnect ?? 'on') : 'on' %}
+var AUTOCONNECT_{{ js_suffix }} = "{{ _ac == 'intelligent_gpx' ? 'on' : _ac }}";
+{% endif %}
+
+var {{ map_var }} = new maplibregl.Map({
+    container: '{{ map_id }}',
+    style: MapUtils.MAP_STYLE,
+    center: [20, 20],
+    zoom: 2,
+    attributionControl: false
+});
+{{ map_var }}.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-left');
+
+{{ map_var }}.on('load', function () {
+    var attrib = {{ map_var }}.getContainer().querySelector('.maplibregl-ctrl-attrib');
+    if (attrib) attrib.removeAttribute('open');
+
+    var bounds = new maplibregl.LngLatBounds();
+    var entries = MAP_ENTRIES_{{ js_suffix }};
+
+    entries.forEach(function (entry, i) {
+        var isLatest = (entry.type !== 'story') && (i === entries.length - 1);
+        var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
+        bounds.extend(lngLat);
+
+        var el = entry.type === 'story' ? MapUtils.createStoryMarker() : MapUtils.createDotMarker(isLatest);
+        el.dataset.url = entry.url;
+        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
+            .setLngLat(lngLat)
+            .setHTML('<span class="map-tip">' + entry.title + '</span>');
+        el.addEventListener('mouseenter', function () { popup.addTo({{ map_var }}); });
+        el.addEventListener('mouseleave', function () { popup.remove(); });
+
+        el.addEventListener('click', function () {
+            var card = document.getElementById('{{ card_prefix }}' + entry.slug);
+            var mapWrap = document.querySelector('.feed-map-wrap');
+            var isFs = mapWrap && mapWrap.classList.contains('is-fullscreen');
+            function scrollAndHighlight() {
+                if (!card) { window.location.href = entry.url; return; }
+                window.location.hash = '{{ card_prefix }}' + entry.slug;
+                setTimeout(function () {
+                    card.classList.add('is-highlighted');
+                    setTimeout(function () { card.classList.remove('is-highlighted'); }, 700);
+                }, 350);
+            }
+            if (isFs) {
+                var fsBtn = document.getElementById('{{ map_id }}-fullscreen');
+                if (fsBtn) fsBtn.click();
+                setTimeout(scrollAndHighlight, 450);
+            } else {
+                scrollAndHighlight();
+            }
+        });
+
+        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo({{ map_var }});
+    });
+
+    if (entries.length === 1) {
+        {{ map_var }}.jumpTo({ center: [parseFloat(entries[0].lng), parseFloat(entries[0].lat)], zoom: 10 });
+    } else {
+        {{ map_var }}.fitBounds(bounds, { padding: 60, maxZoom: 11 });
+    }
+
+    {% if show_journey %}
+    var segments = MapUtils.buildJourneySegments(entries, { connectMode: AUTOCONNECT_{{ js_suffix }} });
+    MapUtils.addJourneySegments({{ map_var }}, segments, '{{ map_id }}-journey');
+    {% endif %}
+});
+</script>
+<script>
+(function() {
+    var fsBtn = document.getElementById('{{ map_id }}-fullscreen');
+    var mapWrap = document.querySelector('.feed-map-wrap');
+    if (!fsBtn || !mapWrap) return;
+    fsBtn.addEventListener('click', function() {
+        var isFs = mapWrap.classList.toggle('is-fullscreen');
+        fsBtn.setAttribute('aria-label', isFs ? 'Close map' : 'Expand map');
+        document.body.style.overflow = isFs ? 'hidden' : '';
+        setTimeout(function() { typeof {{ map_var }} !== 'undefined' && {{ map_var }}.resize(); }, 50);
+    });
+})();
+</script>
+{% endif %}
+```
+
+- [ ] **Step 2: Verify the file exists**
+
+```bash
+ls -la user/themes/intotheeast/templates/partials/feed-map.html.twig
+```
+
+Expected: file exists, size > 2000 bytes.
+
+- [ ] **Step 3: Commit to user repo**
+
+```bash
+git -C user/ add themes/intotheeast/templates/partials/feed-map.html.twig
+git -C user/ commit -m "feat: add shared feed-map partial (dailies + stories)"
+```
+
+---
+
+### Task 2: Refactor dailies to use the shared partial
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/dailies.html.twig`
+
+The current inline map block (lines 38–110: from `{% if map_entries|length > 0 %}` through the fullscreen `</script>`) is replaced with a single `{% include %}`.
+
+**Interfaces:**
+- Consumes: `partials/feed-map.html.twig` (Task 1).
+- The `window.feedMap` global is still produced (now by the partial).
+
+- [ ] **Step 1: Verify M3 passes as baseline**
+
+```bash
+npx playwright test tests/ui/maps/maps.spec.js --project=chromium --grep="M3" 2>&1 | tail -3
+```
+
+Expected: `1 passed`.
+
+- [ ] **Step 2: Replace the inline map block in dailies.html.twig**
+
+In `user/themes/intotheeast/templates/dailies.html.twig`, find the entire block:
+
+```twig
+{% if map_entries|length > 0 %}
+<div class="feed-map-wrap">
+```
+
+…through the end of the second `</script>` tag (the fullscreen toggle script). Delete those ~73 lines and replace with:
+
+```twig
+{% include 'partials/feed-map.html.twig' with {
+    'map_entries': map_entries,
+    'map_id': 'feed-map',
+    'map_var': 'feedMap',
+    'link_href': page.parent().url ~ '/map',
+    'card_prefix': 'entry-',
+    'trip_page': trip_page,
+    'show_journey': true
+} only %}
+```
+
+The `map_entries` and `trip_page` variables are already set above this line in dailies.html.twig (lines 21–36), so they're available.
+
+- [ ] **Step 3: Confirm the page renders**
+
+```bash
+curl -s http://localhost:8081/trips/italy-2026-demo/dailies | grep -c "maplibregl"
+```
+
+Expected: count ≥ 2 (CSS link + JS script).
+
+- [ ] **Step 4: Run M3**
+
+```bash
+npx playwright test tests/ui/maps/maps.spec.js --project=chromium --grep="M3" 2>&1 | tail -3
+```
+
+Expected: `1 passed`.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git -C user/ add themes/intotheeast/templates/dailies.html.twig
+git -C user/ commit -m "refactor(dailies): use shared feed-map partial"
+```
+
+---
+
+### Task 3: Add map + story card IDs to the stories listing page
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/stories.html.twig`
+- Modify: `user/themes/intotheeast/css/style.css`
+
+All 4 demo stories already have `lat`/`lng` in their frontmatter (42–43° N, 11° E), so no content changes needed.
+
+**Interfaces:**
+- Consumes: `partials/feed-map.html.twig` (Task 1).
+- Produces: `window.storiesMap` global; story cards with `id="story-<slug>"`.
+
+- [ ] **Step 1: Rewrite stories.html.twig**
+
+Full replacement for `user/themes/intotheeast/templates/stories.html.twig`:
+
+```twig
+{% extends 'partials/base.html.twig' %}
+
+{% block content %}
+{% set stories = page.children.published().order('date', 'asc') %}
+
+{# Collect stories that have coordinates for the mini-map #}
+{% set map_entries = [] %}
+{% for story in stories %}
+    {% if story.header.lat is not empty and story.header.lng is not empty %}
+        {% set map_entries = map_entries|merge([{
+            'lat': story.header.lat,
+            'lng': story.header.lng,
+            'title': story.title,
+            'slug': story.slug,
+            'url': story.url,
+            'type': 'story',
+            'force_connect': false,
+            'transport_mode': null
+        }]) %}
+    {% endif %}
+{% endfor %}
+
+{% set trip_page = page.parent() %}
+
+{% include 'partials/feed-map.html.twig' with {
+    'map_entries': map_entries,
+    'map_id': 'stories-map',
+    'map_var': 'storiesMap',
+    'link_href': null,
+    'card_prefix': 'story-',
+    'trip_page': trip_page,
+    'show_journey': false
+} only %}
+
+<div class="stories-listing">
+    <div class="stories-listing__header">
+        <h1 class="stories-listing__heading">Stories</h1>
+        <button class="trip-stats-btn" id="feed-sort-toggle" aria-label="Sort: oldest first">↑ Oldest first</button>
+    </div>
+
+    {% if stories|length > 0 %}
+    <div class="stories-grid">
+        {% for story in stories %}
+        {% set hero = null %}
+        {% if story.header.hero_image and story.media[story.header.hero_image] is defined %}
+            {% set hero = story.media[story.header.hero_image] %}
+        {% endif %}
+
+        {% set date_str = story.date|date('d M Y') %}
+        {% if story.header.end_date %}
+            {% set date_str = story.date|date('d M') ~ '–' ~ story.header.end_date|date('d M Y') %}
+        {% endif %}
+
+        <a class="story-card" id="story-{{ story.slug }}" href="{{ story.url }}">
+            {% if hero %}
+            <div class="story-card__photo">
+                <img src="{{ hero.cropResize(720, 405).url }}" alt="{{ story.title }}" loading="lazy">
+            </div>
+            {% else %}
+            <div class="story-card__photo story-card__photo--empty"></div>
+            {% endif %}
+            <div class="story-card__body">
+                <time class="story-card__date" datetime="{{ story.date|date('Y-m-d') }}">{{ date_str }}</time>
+                {% if story.header.location_name %}
+                <span class="story-card__location">📍 {{ story.header.location_name }}{% if story.header.location_country %}, {{ story.header.location_country }}{% endif %}</span>
+                {% endif %}
+                <h2 class="story-card__title">{{ story.title }}</h2>
+                <span class="story-card__cta">Read story →</span>
+            </div>
+        </a>
+        {% endfor %}
+    </div>
+    {% else %}
+    <p class="stories-empty">No stories yet — check back soon.</p>
+    {% endif %}
+</div>
+<script>
+(function() {
+    var sortBtn = document.getElementById('feed-sort-toggle');
+    if (!sortBtn) return;
+    var grid = document.querySelector('.stories-grid');
+    if (!grid) return;
+    var ascending = true;
+
+    sortBtn.addEventListener('click', function() {
+        ascending = !ascending;
+        var cards = Array.from(grid.querySelectorAll('.story-card'));
+        cards.reverse().forEach(function(el) { grid.appendChild(el); });
+        sortBtn.textContent = ascending ? '↑ Oldest first' : '↓ Newest first';
+        sortBtn.setAttribute('aria-label', ascending ? 'Sort: oldest first' : 'Sort: newest first');
+        sortBtn.classList.toggle('is-active', !ascending);
+    });
+})();
+</script>
+{% endblock %}
+```
+
+- [ ] **Step 2: Add `.story-card.is-highlighted` to style.css**
+
+In `user/themes/intotheeast/css/style.css`, find:
+
+```css
+.journal-post.is-highlighted,
+.entry-card.is-highlighted {
+    animation: card-highlight 0.7s ease-out forwards;
+}
+```
+
+Replace with:
+
+```css
+.journal-post.is-highlighted,
+.entry-card.is-highlighted,
+.story-card.is-highlighted {
+    animation: card-highlight 0.7s ease-out forwards;
+}
+```
+
+- [ ] **Step 3: Verify stories page renders a map**
+
+```bash
+curl -s http://localhost:8081/trips/italy-2026-demo/stories | grep -c "storiesMap"
+```
+
+Expected: count ≥ 2.
+
+Also check story card IDs:
+
+```bash
+curl -s http://localhost:8081/trips/italy-2026-demo/stories | grep 'id="story-'
+```
+
+Expected: 4 lines (one per demo story).
+
+- [ ] **Step 4: Commit**
+
+```bash
+git -C user/ add themes/intotheeast/templates/stories.html.twig themes/intotheeast/css/style.css
+git -C user/ commit -m "feat(stories): add mini-map via shared partial, add story card IDs"
+```
+
+---
+
+### Task 4: Document session learnings and update CLAUDE.md
+
+**Files:**
+- Create: `docs/working/learnings/2026-06-22-mobile-ux-learnings.md`
+- Modify: `CLAUDE.md`
+
+**Interfaces:**
+- No code dependencies. Standalone documentation task.
+
+- [ ] **Step 1: Create learnings document**
+
+Create `docs/working/learnings/2026-06-22-mobile-ux-learnings.md`:
+
+```markdown
+# Mobile UX Session Learnings — 2026-06-22
+
+Discoveries from the mobile polish session (stat scaling, map fullscreen, panel toggles, shared partials).
+
+## MapLibre GL JS v4 — Attribution starts expanded despite compact: true
+
+**Problem:** `new maplibregl.AttributionControl({ compact: true })` renders a `<details>` element. In MapLibre v4, this element has `open` set after `map.on('load')` fires, so the attribution panel starts expanded even though `compact: true` was passed.
+
+**Fix:** In the `load` handler, explicitly remove the `open` attribute:
+```js
+map.on('load', function () {
+    var attrib = map.getContainer().querySelector('.maplibregl-ctrl-attrib');
+    if (attrib) attrib.removeAttribute('open');
+});
+```
+
+**Also:** To avoid the default attribution control conflicting with a custom button in `bottom-right`, disable it in the constructor and add it manually to `bottom-left`:
+```js
+var map = new maplibregl.Map({ ..., attributionControl: false });
+map.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-left');
+```
+
+## CSS Panel Animation — max-height beats grid-template-rows: 0fr
+
+**Problem:** `grid-template-rows: 0fr → 1fr` transition fails when the direct grid child has `overflow: hidden`. The child creates a Block Formatting Context (BFC) that prevents `0fr` from collapsing to zero height.
+
+**Fix:** Use `max-height` transition on the outer container:
+```css
+.panel {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.4s ease;
+}
+.panel.is-open {
+    max-height: 600px;
+}
+```
+
+## Fluid Font Sizing with clamp()
+
+```css
+.stat-value {
+    font-size: clamp(2rem, 6vw, var(--text-3xl));
+}
+```
+
+- `clamp(min, preferred, max)`: scales linearly between min and max
+- `6vw` at 333px viewport = 20px = 1.25rem, but floor is 2rem (32px)
+- Keep labels at `--text-xs` (0.75rem) intentionally — the contrast makes values pop
+
+## CSS Grid — Spanning the Lone Last Item in a 2-Column Grid
+
+```css
+@media (max-width: 600px) {
+    .my-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .my-grid .item:last-child:nth-child(odd) { grid-column: 1 / -1; }
+}
+```
+
+- `minmax(0, 1fr)` — strictly equal columns (bare `1fr` has a hidden `auto` minimum)
+- `:last-child:nth-child(odd)` — matches an item that is both last and in an odd position
+
+## PhotoSwipe v5 — Correct Element for CSS Animations
+
+**Problem:** `pswp.currSlide.el` is `undefined` in PhotoSwipe v5.
+
+**Fix:** Use `pswp.currSlide.container` — the DOM wrapper for the current slide:
+```js
+var el = pswp.currSlide && pswp.currSlide.container;
+if (!el) return;
+el.classList.add('pswp-key-from-right');
+```
+
+## Mobile Fullscreen Map Pattern
+
+```css
+.map-col.is-fullscreen {
+    position: fixed !important;
+    inset: 0;
+    z-index: 9999;
+    height: 100dvh !important;
+}
+```
+
+```js
+fsBtn.addEventListener('click', function() {
+    var isFs = mapCol.classList.toggle('is-fullscreen');
+    document.body.style.overflow = isFs ? 'hidden' : '';
+    setTimeout(function() { map.resize(); }, 50);
+});
+```
+
+**Marker click while fullscreen:** Exit fullscreen first, then scroll after the transition:
+```js
+if (isFullscreen) {
+    fsBtn.click();
+    setTimeout(scrollAndHighlight, 450);
+} else {
+    scrollAndHighlight();
+}
+```
+
+## Shared Twig Partial Pattern
+
+```twig
+{% include 'partials/feed-map.html.twig' with {
+    'map_entries': map_entries,
+    'map_id': 'feed-map',
+    'map_var': 'feedMap',
+    'link_href': page.parent().url ~ '/map',
+    'card_prefix': 'entry-',
+    'trip_page': trip_page,
+    'show_journey': true
+} only %}
+```
+
+Grav's global Twig functions (`url()`, `theme_var()`) remain available with `only`. Only parent template variables are excluded.
+```
+
+- [ ] **Step 2: Add shared partial section to CLAUDE.md**
+
+In `CLAUDE.md`, find the exact text:
+
+```markdown
+### GPX file management
+```
+
+Insert the following block immediately before that line:
+
+```markdown
+### Shared feed-map partial
+
+The mini-map above the feed is shared across two pages via a Twig partial:
+
+- **Partial:** `user/themes/intotheeast/templates/partials/feed-map.html.twig`
+- **Used by:** `dailies.html.twig` and `stories.html.twig`
+- **NOT used by:** `trip.html.twig` (uses its own `#trip-map` / `.home-map-col` layout)
+
+**Parameters (passed via `{% include ... with {...} only %}`):**
+
+| Parameter | Type | Description |
+|---|---|---|
+| `map_entries` | array | `[{lat, lng, title, slug, url, type, force_connect, transport_mode}]` |
+| `map_id` | string | HTML id for map div: `'feed-map'` or `'stories-map'` |
+| `map_var` | string | JS global variable: `'feedMap'` or `'storiesMap'` |
+| `link_href` | string\|null | "View full map" link URL; `null` hides it |
+| `card_prefix` | string | Scroll-to ID prefix: `'entry-'` (dailies) or `'story-'` (stories) |
+| `trip_page` | Page | Trip page object for autoconnect setting |
+| `show_journey` | bool | `true` draws the route connector; `false` skips it |
+
+The partial always: starts attribution collapsed, shows the fullscreen button (mobile-only, CSS `display:none` ≥769px), and on marker click scrolls to `#<card_prefix><slug>` + flashes `.is-highlighted`.
+
+```
+
+- [ ] **Step 3: Commit docs**
+
+```bash
+mkdir -p docs/working/learnings
+git add docs/working/learnings/2026-06-22-mobile-ux-learnings.md CLAUDE.md
+git commit -m "docs: add mobile-ux session learnings and shared partial architecture"
+```
+
+---
+
+### Task 5: E2E tests for stories map, attribution, panels, sort, and fullscreen
+
+**Files:**
+- Modify: `tests/ui/maps/maps.spec.js` (add M9–M11)
+- Create: `tests/ui/maps/map-ux.spec.js` (MUX1–MUX5)
+
+**Interfaces:**
+- Consumes: live dev server at `http://localhost:8081` with demo content loaded.
+- Produces: 8 new passing tests.
+
+> **Important:** Tasks 1–3 must be complete before running these tests (they test the newly built behaviour).
+
+- [ ] **Step 1: Append M9–M11 to the end of `tests/ui/maps/maps.spec.js`**
+
+Add after the last line of the existing file:
+
+```js
+
+// ── M9: Stories mini-map renders MapLibre canvas ──────────────────────────────
+test('M9: Stories mini-map renders MapLibre GL canvas without JS errors', async ({ page }) => {
+    const errors = [];
+    page.on('pageerror', e => errors.push(e.message));
+
+    await page.goto('/trips/italy-2026-demo/stories');
+    await expect(page.locator('#stories-map canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+    expect(errors, 'No JS errors on stories page').toHaveLength(0);
+});
+
+// ── M10: Stories mini-map has at least one story marker ──────────────────────
+test('M10: Stories mini-map has at least one story marker', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo/stories');
+    await expect(page.locator('#stories-map canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('#stories-map .maplibregl-marker').first()).toBeVisible({ timeout: 15000 });
+
+    const markerCount = await page.locator('#stories-map .maplibregl-marker').count();
+    expect(markerCount, 'At least one story marker').toBeGreaterThan(0);
+});
+
+// ── M11: Dailies attribution control starts collapsed ─────────────────────────
+test('M11: Dailies mini-map attribution starts collapsed (no open attribute)', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo/dailies');
+    await expect(page.locator('#feed-map canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('#feed-map .maplibregl-ctrl-attrib')).toBeVisible({ timeout: 10000 });
+
+    const hasOpen = await page.evaluate(function () {
+        var attrib = document.querySelector('#feed-map .maplibregl-ctrl-attrib');
+        return attrib ? attrib.hasAttribute('open') : null;
+    });
+    expect(hasOpen, 'Attribution is collapsed (no open attribute)').toBe(false);
+});
+```
+
+- [ ] **Step 2: Create `tests/ui/maps/map-ux.spec.js`**
+
+```js
+// @ts-check
+// Tests: MUX1–MUX5 — Map UX features: panel toggles, sort toggle, fullscreen button
+// Requires demo data: `make demo-load` before running.
+const { test, expect } = require('@playwright/test');
+
+// ── MUX1: Trip stats panel toggles open and closed ──────────────────────────
+test('MUX1: trip stats panel opens and closes on button click', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo');
+
+    const statsBtn = page.locator('#trip-stats-toggle');
+    const statsBlock = page.locator('#trip-stats-block');
+
+    await expect(statsBtn).toBeVisible();
+    await expect(statsBlock).not.toHaveClass(/is-open/);
+
+    await statsBtn.click();
+    await expect(statsBlock).toHaveClass(/is-open/);
+    await expect(page.locator('.trip-stats-grid')).toBeVisible();
+
+    await statsBtn.click();
+    await expect(statsBlock).not.toHaveClass(/is-open/);
+});
+
+// ── MUX2: Trip cycling panel toggles open and closed ────────────────────────
+test('MUX2: trip cycling panel opens and closes on button click', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo');
+
+    const cyclingBtn = page.locator('#trip-cycling-toggle');
+    const cyclingBlock = page.locator('#trip-cycling-block');
+
+    await expect(cyclingBtn).toBeVisible();
+    await expect(cyclingBlock).not.toHaveClass(/is-open/);
+
+    await cyclingBtn.click();
+    await expect(cyclingBlock).toHaveClass(/is-open/);
+
+    await cyclingBtn.click();
+    await expect(cyclingBlock).not.toHaveClass(/is-open/);
+});
+
+// ── MUX3: Trip page map has a fullscreen button in the DOM ────────────────────
+test('MUX3: trip page map has a fullscreen toggle button', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo');
+    await expect(page.locator('#trip-map canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+
+    const fsBtn = page.locator('#trip-map-fullscreen');
+    await expect(fsBtn).toBeAttached();
+    await expect(fsBtn).toHaveAttribute('aria-label', 'Expand map');
+});
+
+// ── MUX4: Dailies sort toggle reverses entry order ───────────────────────────
+test('MUX4: dailies sort toggle reverses the feed entry order', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo/dailies');
+
+    const sortBtn = page.locator('#feed-sort-toggle');
+    await expect(sortBtn).toBeVisible();
+
+    const firstBefore = await page.locator('[data-type]').first().getAttribute('id');
+
+    await sortBtn.click();
+
+    const firstAfter = await page.locator('[data-type]').first().getAttribute('id');
+    expect(firstAfter, 'Entry order reversed after sort').not.toBe(firstBefore);
+
+    await sortBtn.click();
+    const firstRestored = await page.locator('[data-type]').first().getAttribute('id');
+    expect(firstRestored, 'Entry order restored after second toggle').toBe(firstBefore);
+});
+
+// ── MUX5: Stories sort toggle reverses story card order ─────────────────────
+test('MUX5: stories sort toggle reverses the story card order', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo/stories');
+
+    const sortBtn = page.locator('#feed-sort-toggle');
+    await expect(sortBtn).toBeVisible();
+
+    const firstBefore = await page.locator('.story-card').first().getAttribute('id');
+
+    await sortBtn.click();
+
+    const firstAfter = await page.locator('.story-card').first().getAttribute('id');
+    expect(firstAfter, 'Story order reversed after sort').not.toBe(firstBefore);
+
+    await sortBtn.click();
+    const firstRestored = await page.locator('.story-card').first().getAttribute('id');
+    expect(firstRestored, 'Story order restored after second toggle').toBe(firstBefore);
+});
+```
+
+- [ ] **Step 3: Run the new maps tests**
+
+```bash
+npx playwright test tests/ui/maps/ --project=chromium 2>&1 | tail -10
+```
+
+Expected: M1–M7, M9–M11, MUX1–MUX5 pass. (M8 is a pre-existing failure — active trip GPX config.)
+
+- [ ] **Step 4: Run the full suite — verify no regressions**
+
+```bash
+npx playwright test --project=chromium 2>&1 | grep -E "^[[:space:]]*(passed|failed|skipped)"
+```
+
+Expected: pass count ≥ 76 (baseline), failed count ≤ 4 (pre-existing).
+
+- [ ] **Step 5: Commit tests**
+
+```bash
+git add tests/ui/maps/maps.spec.js tests/ui/maps/map-ux.spec.js
+git commit -m "test: add M9-M11 stories map + MUX1-5 panel/sort/fullscreen regression tests"
+```
+
+---
+
+### Task 6: Merge worktree branch to main and push user/ content
+
+**Files:**
+- Main repo: merge `worktree-align-maps-tests` → `main`
+- user/ repo: push `main` to origin
+
+- [ ] **Step 1: Verify all 5 tasks are committed**
+
+```bash
+git log --oneline -10
+git -C user/ log --oneline -5
+```
+
+Expected: docs commit, tests commit in main repo; at least 3 commits in user/ (partial, dailies refactor, stories+CSS).
+
+- [ ] **Step 2: Exit worktree and merge to main**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast
+git merge worktree-align-maps-tests --no-ff -m "feat: align maps, add stories map, add regression tests"
+```
+
+- [ ] **Step 3: Push user/ content to origin (triggers production pull)**
+
+```bash
+make content-push
+```
+
+- [ ] **Step 4: Confirm tests still pass on main**
+
+```bash
+npx playwright test --project=chromium 2>&1 | grep -E "passed|failed"
+```
+
+Expected: pass count ≥ baseline.

docs/working/plans/2026-06-22-asset-pipeline.md

@@ -0,0 +1,967 @@
+# Asset Pipeline & Frontend Reliability Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Eliminate all CDN dependencies, self-host fonts, and deduplicate shared JS logic into versioned bundles built via Docker.
+
+**Architecture:** esbuild (via throwaway Docker Node container) produces two IIFE bundles — `js/main.js` (universal UI + fonts) and `js/map.js` (MapLibre + GPX utils) — plus extracted CSS in `css-compiled/`. Templates register assets via Grav's Asset Manager instead of hardcoded CDN tags. All duplicated inline JS moves to the main bundle; map init code stays in templates.
+
+**Tech Stack:** esbuild 0.21+, Node 20 Alpine (Docker only), MapLibre GL 4, PhotoSwipe 5, Scrollama 3, @mapbox/togeojson 0.16, @fontsource-variable/dm-sans, @fontsource/dm-serif-display, Grav 2.0 Asset Manager.
+
+## Global Constraints
+
+- All commands run inside Docker — no local Node.js required
+- Output files (`js/main.js`, `js/map.js`, `css-compiled/*.css`, `fonts/*.woff2`) are committed to the user/ repo
+- `node_modules/` is gitignored
+- Working directory for all file edits: `user/themes/intotheeast/`
+- All JS bundles use `--format=iife` so templates can reference `maplibregl`, `MapUtils`, `toGeoJSON` as window globals
+- Grav Asset Manager is used for all asset registration — no hardcoded `<script>`/`<link>` tags in templates
+- Map init code stays inline in templates (trip.html.twig, feed-map.html.twig, map.html.twig) — only CDN tags and duplicated utility JS move out
+- Dev server: `http://localhost:8081`
+
+---
+
+## File Map
+
+| Action | Path |
+|---|---|
+| Create | `user/themes/intotheeast/package.json` |
+| Create | `user/themes/intotheeast/js/src/main.js` |
+| Create | `user/themes/intotheeast/js/src/map.js` |
+| Create | `user/themes/intotheeast/css-compiled/` (by esbuild) |
+| Create | `user/themes/intotheeast/fonts/` (by esbuild) |
+| Modify | `Makefile` — add `build-assets` target |
+| Modify | `user/.gitignore` — add `themes/intotheeast/node_modules/` |
+| Modify | `user/themes/intotheeast/js/maplibre-utils.js` — add `parseGpxFiles`, export `haversineKm` |
+| Modify | `user/themes/intotheeast/css/style.css` — remove Google Fonts `@import` |
+| Modify | `user/themes/intotheeast/templates/partials/base.html.twig` |
+| Modify | `user/themes/intotheeast/templates/trip.html.twig` |
+| Modify | `user/themes/intotheeast/templates/partials/feed-map.html.twig` |
+| Modify | `user/themes/intotheeast/templates/map.html.twig` |
+| Modify | `user/themes/intotheeast/templates/story.html.twig` |
+
+---
+
+### Task 1: Build scaffolding
+
+Set up `package.json`, the Docker `make build-assets` target, and gitignore. Verify the Docker build completes.
+
+**Files:**
+- Create: `user/themes/intotheeast/package.json`
+- Modify: `Makefile` (add `build-assets` target after existing `build` target)
+- Modify: `user/.gitignore` (add node_modules line)
+
+**Interfaces:**
+- Produces: `make build-assets` command that runs `npm ci && npm run build` in Docker Node 20 Alpine
+
+- [ ] **Step 1: Create package.json**
+
+Create `user/themes/intotheeast/package.json`:
+
+```json
+{
+  "private": true,
+  "scripts": {
+    "build": "esbuild js/src/main.js --bundle --minify --format=iife --outfile=js/main.js --loader:.woff2=file --loader:.woff=file --asset-names=../fonts/[name] && esbuild js/src/map.js --bundle --minify --format=iife --outfile=js/map.js && mkdir -p css-compiled fonts && mv js/main.css css-compiled/main.css && mv js/map.css css-compiled/map.css"
+  },
+  "dependencies": {
+    "@fontsource-variable/dm-sans": "latest",
+    "@fontsource/dm-serif-display": "latest",
+    "@mapbox/togeojson": "^0.16.2",
+    "maplibre-gl": "^4",
+    "photoswipe": "^5",
+    "scrollama": "^3"
+  },
+  "devDependencies": {
+    "esbuild": "^0.21"
+  }
+}
+```
+
+- [ ] **Step 2: Add `build-assets` target to Makefile**
+
+Add after the existing `build:` target in `Makefile`:
+
+```makefile
+build-assets:
+	docker run --rm \
+	  -v $(PWD)/user/themes/intotheeast:/app \
+	  -w /app node:20-alpine \
+	  sh -c "npm install && npm run build"
+```
+
+- [ ] **Step 3: Add node_modules to user/ gitignore**
+
+Add to `user/.gitignore`:
+
+```
+/themes/intotheeast/node_modules/
+```
+
+- [ ] **Step 4: Create placeholder source files so the build has something to process**
+
+Create `user/themes/intotheeast/js/src/main.js`:
+```javascript
+// placeholder — replaced in Task 2
+```
+
+Create `user/themes/intotheeast/js/src/map.js`:
+```javascript
+// placeholder — replaced in Task 4
+```
+
+- [ ] **Step 5: Run the build and verify it completes**
+
+```bash
+make build-assets
+```
+
+Expected: Docker pulls `node:20-alpine`, runs `npm install` (generates `package-lock.json`), runs `npm run build`. Build will warn about empty entry points but should exit 0. Verify these files exist:
+```bash
+ls user/themes/intotheeast/js/main.js
+ls user/themes/intotheeast/js/map.js
+```
+
+- [ ] **Step 6: Commit**
+
+```bash
+git -C user add themes/intotheeast/package.json themes/intotheeast/package-lock.json themes/intotheeast/js/src/main.js themes/intotheeast/js/src/map.js .gitignore
+git -C user commit -m "build: add esbuild scaffolding and Docker build-assets target"
+git add Makefile
+git commit -m "build: add build-assets make target"
+```
+
+---
+
+### Task 2: Main JS bundle — fonts, PhotoSwipe, all UI utilities
+
+Write the full `js/src/main.js`. This is the single source of truth for all duplicated UI behaviour.
+
+**Files:**
+- Modify: `user/themes/intotheeast/js/src/main.js` (replace placeholder)
+
+**Interfaces:**
+- Consumes: nothing from other tasks
+- Produces:
+  - `js/main.js` — IIFE bundle, no exports (all inits called on DOMContentLoaded)
+  - `css-compiled/main.css` — PhotoSwipe CSS + @font-face rules for DM Sans variable + DM Serif Display
+  - `fonts/*.woff2` — copied from @fontsource packages by esbuild
+
+- [ ] **Step 1: Write js/src/main.js**
+
+Replace `user/themes/intotheeast/js/src/main.js` with:
+
+```javascript
+/* ── Fonts ───────────────────────────────────────────────── */
+import '@fontsource-variable/dm-sans';
+import '@fontsource/dm-serif-display/400.css';
+import '@fontsource/dm-serif-display/400-italic.css';
+
+/* ── PhotoSwipe ──────────────────────────────────────────── */
+import PhotoSwipeLightbox from 'photoswipe/lightbox';
+import PhotoSwipe from 'photoswipe';
+import 'photoswipe/style.css';
+
+/* ── Scrollama (used by story.html.twig inline script) ────── */
+import scrollama from 'scrollama';
+window.scrollama = scrollama;
+
+/* ── Photo strip: prev/next buttons + scroll-based dot sync ─ */
+function initPhotoStrip() {
+    document.querySelectorAll('.journal-photo-strip').forEach(function (strip) {
+        strip.setAttribute('role', 'region');
+        strip.setAttribute('aria-label', 'Photo strip');
+        strip.setAttribute('tabindex', '0');
+
+        var slideCount = parseInt(strip.dataset.slides, 10) || 1;
+        var dots = strip.nextElementSibling;
+        if (!dots || !dots.classList.contains('journal-photo-dots')) return;
+        var dotEls = Array.from(dots.querySelectorAll('.journal-photo-dot'));
+
+        strip.addEventListener('scroll', function () {
+            var idx = Math.round(strip.scrollLeft / strip.offsetWidth);
+            dotEls.forEach(function (d, i) { d.classList.toggle('is-active', i === idx); });
+        }, { passive: true });
+
+        if (slideCount < 2) return;
+
+        var prev = document.createElement('button');
+        prev.className = 'strip-prev';
+        prev.setAttribute('aria-label', 'Previous photo');
+        prev.textContent = '‹';
+        prev.addEventListener('click', function () {
+            strip.scrollBy({ left: -strip.offsetWidth, behavior: 'smooth' });
+        });
+
+        var next = document.createElement('button');
+        next.className = 'strip-next';
+        next.setAttribute('aria-label', 'Next photo');
+        next.textContent = '›';
+        next.addEventListener('click', function () {
+            strip.scrollBy({ left: strip.offsetWidth, behavior: 'smooth' });
+        });
+
+        var controls = document.createElement('div');
+        controls.className = 'strip-controls';
+        controls.appendChild(prev);
+        controls.appendChild(next);
+        var wrap = strip.closest('.journal-photo-wrap');
+        (wrap || dots).insertAdjacentElement('afterend', controls);
+    });
+}
+
+/* ── PhotoSwipe lightbox + IntersectionObserver dot sync ──── */
+function initPhotoSwipe() {
+    if (!document.querySelector('.pswp-gallery')) return;
+
+    var lightbox = new PhotoSwipeLightbox({
+        gallery: '.pswp-gallery',
+        children: 'a.journal-photo-slide',
+        pswpModule: PhotoSwipe
+    });
+
+    lightbox.on('afterOpen', function () {
+        var pswp = lightbox.pswp;
+        var keyDir = 0;
+        var clearTimer = null;
+
+        function onKey(e) {
+            if (e.key === 'ArrowRight') keyDir = 1;
+            else if (e.key === 'ArrowLeft') keyDir = -1;
+            else keyDir = 0;
+        }
+        document.addEventListener('keydown', onKey, true);
+
+        pswp.on('change', function () {
+            if (!keyDir) return;
+            var dir = keyDir;
+            keyDir = 0;
+            var el = pswp.currSlide && pswp.currSlide.container;
+            if (!el) return;
+            el.classList.remove('pswp-key-from-left', 'pswp-key-from-right');
+            el.offsetWidth; /* force reflow */
+            el.classList.add(dir > 0 ? 'pswp-key-from-right' : 'pswp-key-from-left');
+            clearTimeout(clearTimer);
+            clearTimer = setTimeout(function () {
+                el.classList.remove('pswp-key-from-left', 'pswp-key-from-right');
+            }, 400);
+        });
+
+        pswp.on('close', function () {
+            document.removeEventListener('keydown', onKey, true);
+            clearTimeout(clearTimer);
+        });
+    });
+
+    lightbox.init();
+
+    /* Per-strip: IntersectionObserver dot sync + expand button */
+    document.querySelectorAll('.journal-photo-wrap').forEach(function (wrap) {
+        var strip = wrap.querySelector('.journal-photo-strip');
+        if (!strip) return;
+        var slides = Array.from(strip.querySelectorAll('a.journal-photo-slide'));
+        var expandBtn = wrap.querySelector('.journal-photo-expand');
+        var article = wrap.closest('article');
+        var dots = article ? Array.from(article.querySelectorAll('.journal-photo-dot')) : [];
+        var visibleIdx = 0;
+
+        var io = new IntersectionObserver(function (entries) {
+            entries.forEach(function (e) {
+                if (!e.isIntersecting) return;
+                visibleIdx = slides.indexOf(e.target);
+                dots.forEach(function (d) { d.classList.remove('is-active'); });
+                if (dots[visibleIdx]) dots[visibleIdx].classList.add('is-active');
+            });
+        }, { root: strip, threshold: 0.5 });
+        slides.forEach(function (s) { io.observe(s); });
+
+        if (expandBtn && slides.length) {
+            expandBtn.addEventListener('click', function () {
+                slides[visibleIdx].dispatchEvent(
+                    new MouseEvent('click', { bubbles: true, cancelable: true })
+                );
+            });
+        }
+    });
+}
+
+/* ── Sort button ─────────────────────────────────────────────
+   btnId:        element id of the sort toggle button
+   containerSel: CSS selector for the list container
+   itemSel:      CSS selector for sortable items within container
+   withLabel:    true = button shows "↑ Oldest first" / "↓ Newest first"
+                 false = button shows "↑" / "↓" only
+   ──────────────────────────────────────────────────────────── */
+function initSortButton(btnId, containerSel, itemSel, withLabel) {
+    var btn = document.getElementById(btnId);
+    if (!btn) return;
+    var container = document.querySelector(containerSel);
+    if (!container) return;
+    var sentinel = container.querySelector('#feed-filter-empty');
+    var ascending = true;
+
+    btn.addEventListener('click', function () {
+        ascending = !ascending;
+        var items = Array.from(container.querySelectorAll(itemSel));
+        items.reverse().forEach(function (el) {
+            if (sentinel) container.insertBefore(el, sentinel);
+            else container.appendChild(el);
+        });
+        btn.textContent = withLabel
+            ? (ascending ? '↑ Oldest first' : '↓ Newest first')
+            : (ascending ? '↑' : '↓');
+        btn.setAttribute('aria-label', ascending ? 'Sort: oldest first' : 'Sort: newest first');
+        btn.classList.toggle('is-active', !ascending);
+    });
+}
+
+/* ── Filter bar (trip page: All / Journal / Stories) ─────── */
+function initFilterBar() {
+    var filterBtns = document.querySelectorAll('.trip-filter-btn');
+    if (!filterBtns.length) return;
+    var cards = document.querySelectorAll('[data-type]');
+    var filterEmpty = document.getElementById('feed-filter-empty');
+
+    filterBtns.forEach(function (btn) {
+        btn.addEventListener('click', function () {
+            filterBtns.forEach(function (b) {
+                b.classList.remove('is-active');
+                b.setAttribute('aria-pressed', 'false');
+            });
+            btn.classList.add('is-active');
+            btn.setAttribute('aria-pressed', 'true');
+
+            var filter = btn.getAttribute('data-filter');
+            var visible = 0;
+            cards.forEach(function (card) {
+                var show = filter === 'all' || card.getAttribute('data-type') === filter;
+                card.style.display = show ? '' : 'none';
+                if (show) visible++;
+            });
+
+            if (filterEmpty) {
+                if (visible === 0) {
+                    filterEmpty.textContent = filter === 'story'
+                        ? 'No stories yet for this trip.'
+                        : 'No entries yet.';
+                    filterEmpty.style.display = '';
+                } else {
+                    filterEmpty.style.display = 'none';
+                }
+            }
+        });
+    });
+}
+
+/* ── Back to top ─────────────────────────────────────────── */
+function initBackToTop(btnId) {
+    var btn = document.getElementById(btnId);
+    if (!btn) return;
+    var threshold = window.innerHeight * 0.8;
+    var shown = false;
+    btn.addEventListener('click', function () {
+        history.pushState(null, '', window.location.pathname + window.location.search);
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+    window.addEventListener('scroll', function () {
+        var shouldShow = window.scrollY > threshold;
+        if (shouldShow !== shown) {
+            shown = shouldShow;
+            btn.classList.toggle('is-visible', shown);
+        }
+    }, { passive: true });
+}
+
+/* ── Panel toggles (trip stats / cycling panels) ─────────── */
+function initPanelToggles() {
+    document.querySelectorAll('.trip-panel-toggle').forEach(function (toggle) {
+        var blockId = toggle.getAttribute('aria-controls');
+        var block = blockId ? document.getElementById(blockId) : null;
+        if (!block) return;
+        toggle.addEventListener('click', function () {
+            var isOpen = block.classList.contains('is-open');
+            block.classList.toggle('is-open', !isOpen);
+            toggle.classList.toggle('is-active', !isOpen);
+            toggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
+        });
+    });
+
+    document.querySelectorAll('.trip-panel-close').forEach(function (btn) {
+        var toggleBtn = document.getElementById(btn.getAttribute('data-toggle'));
+        if (toggleBtn) btn.addEventListener('click', function () { toggleBtn.click(); });
+    });
+}
+
+/* ── Boot ────────────────────────────────────────────────── */
+document.addEventListener('DOMContentLoaded', function () {
+    initPhotoStrip();
+    initPhotoSwipe();
+    initFilterBar();
+    /* Sort buttons — each call is silent if its button/container isn't on this page */
+    initSortButton('trip-sort-toggle', '.feed', '[data-type]', false);
+    initSortButton('feed-sort-toggle', '.feed', '[data-type]', true);
+    initSortButton('feed-sort-toggle', '.stories-grid', '.story-card', true);
+    initBackToTop('story-totop');
+    initBackToTop('trip-totop');
+    initPanelToggles();
+});
+```
+
+- [ ] **Step 2: Run build**
+
+```bash
+make build-assets
+```
+
+Expected: exits 0. Verify output:
+```bash
+ls user/themes/intotheeast/js/main.js
+ls user/themes/intotheeast/css-compiled/main.css
+ls user/themes/intotheeast/fonts/
+```
+
+`fonts/` should contain woff2 files from @fontsource packages.
+
+- [ ] **Step 3: Verify font output in CSS**
+
+```bash
+grep '@font-face' user/themes/intotheeast/css-compiled/main.css | head -5
+```
+
+Expected: multiple `@font-face` rules referencing `../fonts/*.woff2` paths.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git -C user add themes/intotheeast/js/src/main.js themes/intotheeast/js/main.js themes/intotheeast/css-compiled/main.css themes/intotheeast/fonts/
+git -C user commit -m "build: add main.js bundle — fonts, PhotoSwipe, UI utilities"
+```
+
+---
+
+### Task 3: Extend maplibre-utils.js — parseGpxFiles + export haversineKm
+
+Move `parseGpxFiles` from `trip.html.twig` into the shared utility and expose `haversineKm` publicly so template code can call both as `MapUtils.*`.
+
+**Files:**
+- Modify: `user/themes/intotheeast/js/maplibre-utils.js`
+
+**Interfaces:**
+- Consumes: `haversineKm` (already defined privately in maplibre-utils.js at line 184)
+- Produces:
+  - `MapUtils.haversineKm(lat1, lng1, lat2, lng2)` → `number` (km)
+  - `MapUtils.parseGpxFiles(urls, callback)` — `urls: string[]`, `callback({ distance, eleGain, eleLoss, highest, lowest, movingTime, avgSpeed } | { error: string })` → `void`
+
+- [ ] **Step 1: Add parseGpxFiles function to maplibre-utils.js**
+
+In `user/themes/intotheeast/js/maplibre-utils.js`, add the following block immediately before the `global.MapUtils = {` line (currently line 333):
+
+```javascript
+  /*
+   * Parse one or more GPX files and compute aggregate cycling statistics.
+   * urls:     array of GPX file URL strings
+   * callback: called once with { distance, eleGain, eleLoss, highest, lowest, movingTime, avgSpeed }
+   *           or { error: 'no files' } if urls is empty.
+   *
+   * distance/eleGain/eleLoss in raw units (km / metres).
+   * movingTime: "H:MM" string. avgSpeed: km/h number.
+   */
+  function parseGpxFiles(urls, callback) {
+    var pending = urls.length;
+    var fileResults = new Array(urls.length);
+    if (pending === 0) { callback({ error: 'no files' }); return; }
+
+    urls.forEach(function (url, idx) {
+      fetch(url)
+        .then(function (r) { return r.text(); })
+        .then(function (text) {
+          var xml  = new DOMParser().parseFromString(text, 'text/xml');
+          var pts  = [];
+          xml.querySelectorAll('trkpt').forEach(function (pt) {
+            var eleEl  = pt.querySelector('ele');
+            var timeEl = pt.querySelector('time');
+            pts.push({
+              lat:  parseFloat(pt.getAttribute('lat')),
+              lon:  parseFloat(pt.getAttribute('lon')),
+              ele:  eleEl  ? parseFloat(eleEl.textContent)  : NaN,
+              time: timeEl ? timeEl.textContent              : null
+            });
+          });
+          fileResults[idx] = pts;
+          if (--pending === 0) computeAndCallback();
+        })
+        .catch(function (err) {
+          console.warn('GPX load failed:', url, err);
+          fileResults[idx] = [];
+          if (--pending === 0) computeAndCallback();
+        });
+    });
+
+    function computeAndCallback() {
+      var totalDistance = 0, totalEleGain = 0, totalEleLoss = 0;
+      var globalHighest = NaN, globalLowest = NaN, totalMovingTime = 0;
+
+      fileResults.forEach(function (pts) {
+        if (!pts || pts.length < 2) return;
+        /* Include first point of each file in elevation range */
+        if (!isNaN(pts[0].ele)) {
+          if (isNaN(globalHighest) || pts[0].ele > globalHighest) globalHighest = pts[0].ele;
+          if (isNaN(globalLowest)  || pts[0].ele < globalLowest)  globalLowest  = pts[0].ele;
+        }
+        for (var i = 1; i < pts.length; i++) {
+          var p0 = pts[i - 1], p1 = pts[i];
+          totalDistance += haversineKm(p0.lat, p0.lon, p1.lat, p1.lon);
+          if (!isNaN(p0.ele) && !isNaN(p1.ele)) {
+            var dEle = p1.ele - p0.ele;
+            if (dEle > 0) totalEleGain += dEle;
+            if (dEle < 0) totalEleLoss += (-dEle);
+            if (isNaN(globalHighest) || p1.ele > globalHighest) globalHighest = p1.ele;
+            if (isNaN(globalLowest)  || p1.ele < globalLowest)  globalLowest  = p1.ele;
+          }
+          if (p0.time && p1.time) {
+            var dtHrs = (Date.parse(p1.time) - Date.parse(p0.time)) / 3600000;
+            if (dtHrs > 0 && (haversineKm(p0.lat, p0.lon, p1.lat, p1.lon) / dtHrs) >= 1) {
+              totalMovingTime += dtHrs;
+            }
+          }
+        }
+      });
+
+      var avgSpeed  = totalMovingTime > 0 ? totalDistance / totalMovingTime : 0;
+      var movHours  = Math.floor(totalMovingTime);
+      var movMins   = Math.round((totalMovingTime - movHours) * 60);
+      if (movMins === 60) { movHours++; movMins = 0; }
+
+      callback({
+        distance:   totalDistance,
+        eleGain:    totalEleGain,
+        eleLoss:    totalEleLoss,
+        highest:    globalHighest,
+        lowest:     globalLowest,
+        movingTime: movHours + ':' + (movMins < 10 ? '0' : '') + movMins,
+        avgSpeed:   avgSpeed
+      });
+    }
+  }
+```
+
+- [ ] **Step 2: Add haversineKm and parseGpxFiles to MapUtils exports**
+
+Find the `global.MapUtils = {` block (currently the last block in the file) and add both new entries:
+
+```javascript
+  global.MapUtils = {
+    MAP_STYLE:            MAP_STYLE,
+    ACCENT:               ACCENT,
+    haversineKm:          haversineKm,
+    parseGpxFiles:        parseGpxFiles,
+    addJourneyLine:       addJourneyLine,
+    addJourneySegments:   addJourneySegments,
+    buildJourneySegments: buildJourneySegments,
+    renderGpxJourney:     renderGpxJourney,
+    createDotMarker:      createDotMarker,
+    createStoryMarker:    createStoryMarker
+  };
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git -C user add themes/intotheeast/js/maplibre-utils.js
+git -C user commit -m "feat: add parseGpxFiles and export haversineKm from MapUtils"
+```
+
+---
+
+### Task 4: Map JS bundle
+
+Write `js/src/map.js` to bundle MapLibre GL, toGeoJSON, and maplibre-utils as a single file, attaching them as window globals for existing template inline scripts.
+
+**Files:**
+- Modify: `user/themes/intotheeast/js/src/map.js` (replace placeholder)
+
+**Interfaces:**
+- Consumes: `MapUtils.parseGpxFiles`, `MapUtils.haversineKm` (from Task 3 — already in maplibre-utils.js which this imports)
+- Produces:
+  - `js/map.js` — IIFE bundle
+  - `css-compiled/map.css` — MapLibre GL CSS
+  - `window.maplibregl` — MapLibre GL instance
+  - `window.toGeoJSON` — toGeoJSON converter
+  - `window.MapUtils` — all MapUtils functions (set by maplibre-utils.js side effect)
+
+- [ ] **Step 1: Write js/src/map.js**
+
+Replace `user/themes/intotheeast/js/src/map.js` with:
+
+```javascript
+import maplibregl from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import toGeoJSON from '@mapbox/togeojson';
+
+/* maplibre-utils.js attaches MapUtils to window as a side effect */
+import '../maplibre-utils.js';
+
+window.maplibregl = maplibregl;
+window.toGeoJSON  = toGeoJSON;
+```
+
+- [ ] **Step 2: Run build**
+
+```bash
+make build-assets
+```
+
+Expected: exits 0. Verify:
+```bash
+ls user/themes/intotheeast/js/map.js
+ls user/themes/intotheeast/css-compiled/map.css
+```
+
+`css-compiled/map.css` should be non-empty (~100KB+) as it contains full MapLibre GL styles.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git -C user add themes/intotheeast/js/src/map.js themes/intotheeast/js/map.js themes/intotheeast/css-compiled/map.css
+git -C user commit -m "build: add map.js bundle — MapLibre GL, toGeoJSON, MapUtils"
+```
+
+---
+
+### Task 5: base.html.twig — Asset Manager + remove Google Fonts + remove photo strip script
+
+Register the universal bundle via Grav's Asset Manager, remove Google Fonts external requests, remove the inline photo strip script, and add the `map_assets` block for map pages to fill.
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/partials/base.html.twig`
+- Modify: `user/themes/intotheeast/css/style.css`
+
+**Interfaces:**
+- Produces: `{% block map_assets %}{% endblock %}` — filled by trip.html.twig, feed-map.html.twig, map.html.twig in later tasks
+
+- [ ] **Step 1: Update base.html.twig**
+
+Replace the entire file content of `user/themes/intotheeast/templates/partials/base.html.twig` with:
+
+```twig
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
+    {% do assets.addCss('theme://css/tokens.css') %}
+    {% do assets.addCss('theme://css/style.css') %}
+    {% do assets.addCss('theme://css-compiled/main.css') %}
+    {% do assets.addJs('theme://js/main.js', {group: 'bottom'}) %}
+    {{ assets.css()|raw }}
+    {{ assets.js()|raw }}
+</head>
+<body class="{% if page.template == 'map' %}map-page{% endif %}{% if page.template == 'home' or page.template == 'trip' %} home-page{% endif %}{% if page.template == 'story' %} template-story{% endif %}">
+    <a class="skip-link" href="#main-content">Skip to main content</a>
+    <header class="site-header">
+        <a class="site-title" href="{{ base_url_absolute }}">into the east</a>
+        {% block nav %}
+        <nav class="site-nav" aria-label="Main navigation">
+            <a href="{{ base_url_absolute }}"{% if page.template == 'home' %} aria-current="page"{% endif %}>Home</a>
+            <a href="{{ base_url_absolute }}/trips"{% if page.template == 'trips' %} aria-current="page"{% endif %}>Past Trips</a>
+        </nav>
+        {% endblock %}
+    </header>
+    <main class="site-main" id="main-content">
+        {% block content %}{% endblock %}
+    </main>
+    {% block map_assets %}{% endblock %}
+    {{ assets.js('bottom')|raw }}
+</body>
+</html>
+```
+
+Key changes from original:
+- Removed `<link rel="preconnect" href="https://fonts.googleapis.com">` (lines 7–9)
+- Replaced hardcoded `<link>` tags with `{% do assets.addCss(...) %}` calls
+- Removed the `<script>` photo strip block (lines 30–73) — now in `js/main.js`
+- Added `{% block map_assets %}{% endblock %}` before `{{ assets.js('bottom')|raw }}`
+
+- [ ] **Step 2: Remove Google Fonts @import from style.css if present**
+
+Check whether `css/style.css` contains a Google Fonts import:
+
+```bash
+grep -n 'googleapis\|fonts.g' user/themes/intotheeast/css/style.css
+```
+
+If any line is found, remove it. The font-family declarations using `--font-display` and `--font-ui` stay unchanged — they reference the CSS custom properties defined in `tokens.css`, which will work with the self-hosted fonts in `css-compiled/main.css`.
+
+- [ ] **Step 3: Load the dev server and verify the page renders**
+
+Open `http://localhost:8081` in a browser. The page should load with correct fonts (DM Sans for body, DM Serif Display for headings). Open browser DevTools → Network tab → filter by "google" — no requests to `fonts.googleapis.com` or `fonts.gstatic.com` should appear.
+
+If fonts look wrong, check that `css-compiled/main.css` is served by opening `http://localhost:8081/user/themes/intotheeast/css-compiled/main.css`.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git -C user add themes/intotheeast/templates/partials/base.html.twig themes/intotheeast/css/style.css
+git -C user commit -m "feat: register assets via Asset Manager, remove Google Fonts, remove inline photo strip script"
+```
+
+---
+
+### Task 6: trip.html.twig — full JS cleanup and map bundle registration
+
+This is the largest template change. Remove all duplicated JS blocks, CDN tags, and the haversineKm duplicate. Wire `MapUtils.parseGpxFiles` and `MapUtils.haversineKm` in the GPX stats block.
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/trip.html.twig`
+
+**Interfaces:**
+- Consumes:
+  - `window.maplibregl` — from `js/map.js` (Task 4)
+  - `window.MapUtils.parseGpxFiles(urls, cb)` — from `js/maplibre-utils.js` via map bundle (Task 3)
+  - `window.MapUtils.haversineKm(lat1, lng1, lat2, lng2)` — from map bundle (Task 3)
+  - `window.scrollama` — from `js/main.js` (Task 2, though not used on this page)
+
+- [ ] **Step 1: Remove the CDN script/link tags and PhotoSwipe CSS link**
+
+Remove these lines from `trip.html.twig`:
+- Line 4: `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.css">`
+- Lines 247–250:
+  ```html
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
+  <script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@mapbox/togeojson@0.16.2/togeojson.min.js"></script>
+  <script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
+  ```
+
+- [ ] **Step 2: Add map_assets block immediately after `{% block content %}`**
+
+After the opening `{% block content %}` line, add:
+
+```twig
+{% block map_assets %}
+{% do assets.addCss('theme://css-compiled/map.css') %}
+{% do assets.addJs('theme://js/map.js', {group: 'bottom'}) %}
+{% endblock %}
+```
+
+- [ ] **Step 3: Remove the duplicated JS blocks**
+
+Remove the following `<script>` blocks entirely from `trip.html.twig`. These are now handled by `js/main.js`:
+
+1. The filter bar IIFE (the block from `(function() {` at line ~339 through to the closing `})();` at line ~371 — the one with `.trip-filter-btn` and `data-filter`)
+2. The sort toggle IIFE (from `(function() {` containing `trip-sort-toggle` through its `})();` at line ~388)
+3. The back-to-top block (from `document.addEventListener('DOMContentLoaded', function () {` at line ~545 through its `});` at line ~561)
+4. The entire `<script type="module">` block at the bottom (lines ~566–626) containing the PhotoSwipe lightbox and IntersectionObserver photo strip code
+
+Note: the `makePanelToggle` code lives *inside* the GPX stats IIFE (which stays) — that is handled in Step 5, not here.
+
+- [ ] **Step 4: Update the GPX stats block to use MapUtils**
+
+In the remaining GPX stats IIFE (the block starting with `(function() {` that references `HAS_GPX`, `parseGpxFiles`, and `haversineKm`):
+
+Replace the local `haversineKm` function definition (lines ~393–401):
+```javascript
+function haversineKm(lat1, lng1, lat2, lng2) {
+    var R = 6371;
+    ...
+}
+```
+Delete this entire function — it is now `MapUtils.haversineKm`.
+
+Replace the local `parseGpxFiles` function definition (lines ~403–485):
+```javascript
+function parseGpxFiles(urls, callback) {
+    ...
+}
+```
+Delete this entire function — it is now `MapUtils.parseGpxFiles`.
+
+Update the two call sites to use MapUtils:
+
+Find (Mode A call, line ~491):
+```javascript
+    parseGpxFiles(GPX_URLS, function(result) {
+```
+Replace with:
+```javascript
+    MapUtils.parseGpxFiles(GPX_URLS, function(result) {
+```
+
+Find (Mode B haversine call, lines ~512–515):
+```javascript
+        total += haversineKm(
+            parseFloat(STATS_GPS[i-1][0]), parseFloat(STATS_GPS[i-1][1]),
+            parseFloat(STATS_GPS[i][0]),   parseFloat(STATS_GPS[i][1])
+        );
+```
+Replace with:
+```javascript
+        total += MapUtils.haversineKm(
+            parseFloat(STATS_GPS[i-1][0]), parseFloat(STATS_GPS[i-1][1]),
+            parseFloat(STATS_GPS[i][0]),   parseFloat(STATS_GPS[i][1])
+        );
+```
+
+- [ ] **Step 5: Remove the makePanelToggle function from the GPX stats IIFE**
+
+Inside the GPX stats IIFE, find and remove:
+- The `makePanelToggle` function definition
+- The two `makePanelToggle(...)` calls
+- The `document.querySelectorAll('.trip-panel-close').forEach(...)` block
+
+These are now handled by `initPanelToggles()` in `main.js`.
+
+- [ ] **Step 6: Open the trip page and verify all features**
+
+Open `http://localhost:8081/trips/japan-korea-2026` (or the current active trip URL). Verify:
+- Map loads and markers are visible
+- GPX track renders
+- Sort button (↑/↓) reverses feed order
+- Filter bar (All / Journal / Stories) shows and hides cards
+- Stats panel opens and closes
+- Cycling panel opens and closes (if GPX present)
+- Back-to-top button appears after scrolling
+- Journal photo strip: dots sync, prev/next work, expand opens lightbox
+- No console errors
+
+Open DevTools → Network tab → reload. Filter by "cdn.jsdelivr" — zero results expected.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git -C user add themes/intotheeast/templates/trip.html.twig
+git -C user commit -m "refactor: trip.html.twig — remove CDN tags, deduplicate JS, use MapUtils.parseGpxFiles"
+```
+
+---
+
+### Task 7: Remaining template CDN cleanup
+
+Remove CDN tags from `feed-map.html.twig`, `map.html.twig`, and `story.html.twig`. These pages are not in active use but should not make CDN requests when visited.
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/partials/feed-map.html.twig`
+- Modify: `user/themes/intotheeast/templates/map.html.twig`
+- Modify: `user/themes/intotheeast/templates/story.html.twig`
+
+- [ ] **Step 1: feed-map.html.twig — remove CDN tags, add map_assets block**
+
+In `user/themes/intotheeast/templates/partials/feed-map.html.twig`:
+
+Remove lines 28–30:
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
+<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
+<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
+```
+
+Add the map assets block at the very top of the `{% if map_entries|length > 0 %}` block (before the `<div class="feed-map-wrap">`):
+
+```twig
+{% block map_assets %}
+{% do assets.addCss('theme://css-compiled/map.css') %}
+{% do assets.addJs('theme://js/map.js', {group: 'bottom'}) %}
+{% endblock %}
+```
+
+- [ ] **Step 2: map.html.twig — remove CDN tags, add map_assets block**
+
+In `user/themes/intotheeast/templates/map.html.twig`:
+
+Remove lines 39–42:
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
+<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@mapbox/togeojson@0.16.2/togeojson.min.js"></script>
+<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
+```
+
+Add after `{% block content %}`:
+```twig
+{% block map_assets %}
+{% do assets.addCss('theme://css-compiled/map.css') %}
+{% do assets.addJs('theme://js/map.js', {group: 'bottom'}) %}
+{% endblock %}
+```
+
+- [ ] **Step 3: story.html.twig — remove Scrollama CDN tag**
+
+In `user/themes/intotheeast/templates/story.html.twig`:
+
+Remove line 72:
+```html
+<script src="https://cdn.jsdelivr.net/npm/scrollama@3/build/scrollama.min.js"></script>
+```
+
+Scrollama is now bundled in `main.js` and exposed as `window.scrollama`. The existing inline script that calls `scrollama()` will work unchanged.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git -C user add themes/intotheeast/templates/partials/feed-map.html.twig themes/intotheeast/templates/map.html.twig themes/intotheeast/templates/story.html.twig
+git -C user commit -m "refactor: remove CDN tags from feed-map, map, story templates"
+```
+
+---
+
+### Task 8: End-to-end verification — no external requests, all features intact
+
+**Files:** None modified. Verification only.
+
+- [ ] **Step 1: Verify zero external requests on the trip page**
+
+Open `http://localhost:8081/trips/japan-korea-2026`. Open DevTools → Network tab → reload.
+
+Check these domains appear zero times:
+- `cdn.jsdelivr.net`
+- `fonts.googleapis.com`
+- `fonts.gstatic.com`
+
+- [ ] **Step 2: Verify trip page features**
+
+- Map renders with markers and GPX track
+- Marker click scrolls to entry card and flashes it
+- Fullscreen map toggle expands/collapses
+- Filter bar: All / Journal / Stories each filter correctly
+- Sort toggle (↑/↓) reverses feed order
+- Stats panel opens and closes (click "Stats ▾" button)
+- Cycling panel opens and closes if GPX present ("Cycling ▾" button)
+- GPX distance figure populates in stats grid
+- Cycling stats grid populates (distance, gain, loss, highest, lowest, moving time, avg speed)
+- Back-to-top button appears after scrolling down; click scrolls to top
+- Journal photo strip: swipe/scroll dots sync; ‹ › buttons navigate; expand button opens PhotoSwipe; arrow keys advance; click outside closes
+
+- [ ] **Step 3: Verify story page**
+
+Open a story URL (e.g. `http://localhost:8081/trips/italy-2026-demo/stories/sorano-rock-and-time`):
+- Hero image loads
+- Scroll overlay darkens/lightens on scroll
+- Story title fades into nav bar as hero scrolls out
+- Back-to-top button appears and works
+- If page has `.scrolly` sections: they animate on scroll
+- No console errors
+
+- [ ] **Step 4: Check built file sizes**
+
+```bash
+ls -lh user/themes/intotheeast/js/main.js user/themes/intotheeast/js/map.js user/themes/intotheeast/css-compiled/main.css user/themes/intotheeast/css-compiled/map.css
+```
+
+Rough expected sizes (minified):
+- `main.js`: ~80–150 KB (PhotoSwipe + Scrollama + UI code)
+- `map.js`: ~600–900 KB (MapLibre GL dominates)
+- `main.css`: ~30–60 KB (PhotoSwipe + @font-face rules)
+- `map.css`: ~80–120 KB (MapLibre GL styles)
+
+If `map.js` is unexpectedly small (<100 KB), MapLibre GL may not have bundled — check that `import maplibregl from 'maplibre-gl'` is in `js/src/map.js`.
+
+- [ ] **Step 5: Final commit**
+
+```bash
+git -C user add -A
+git -C user status  # confirm only expected files
+git -C user commit -m "chore: verify asset pipeline — all CDN deps eliminated"
+git add -A
+git commit -m "chore: complete asset pipeline — self-hosted deps, deduplicated JS"
+```

docs/working/plans/2026-06-23-template-refactor.md

@@ -0,0 +1,993 @@
+# Template Refactor Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Extract stats computation and panel HTML into Twig macros, extract date range formatting into a macro, and fix two latent bugs in inactive templates — with zero visual change.
+
+**Architecture:** Three Twig macros live in `templates/macros/`. `trip.html.twig` imports and calls the stats/cycling macros, shrinking from 386 to ~260 lines. `story.html.twig` and `stories.html.twig` both use the date-range macro. `feed-map.html.twig` and `map.html.twig` get DOMContentLoaded wrappers and correct asset registration timing.
+
+**Tech Stack:** Grav 2.0, Twig 3, Playwright (test runner), `make test-ui` → `npx playwright test`.
+
+## Global Constraints
+
+- Working directory for all file edits: `user/themes/intotheeast/templates/`
+- Dev server URL: `http://localhost:8081`
+- Demo trip used for testing: `/trips/italy-2026-demo`
+- Zero visual change — no HTML structure, CSS class, or JS logic changes
+- Twig macros are imported with `{% import 'macros/file.html.twig' as alias %}` inside `{% block content %}`
+- Macros live in `templates/macros/` (new directory — create it)
+- All macro arguments are positional (Twig macros use named params with defaults as of Twig 1.12, but positional is fine here)
+
+---
+
+## File Map
+
+| Action | Path | Responsibility |
+|---|---|---|
+| Create | `templates/macros/stats.html.twig` | Stats computation + stats panel HTML |
+| Create | `templates/macros/cycling.html.twig` | Cycling panel HTML (all JS placeholders) |
+| Create | `templates/macros/date-range.html.twig` | Smart condensed date range string |
+| Modify | `templates/trip.html.twig` | Import + call stats/cycling macros; remove 130 lines |
+| Modify | `templates/story.html.twig` | Replace 15-line date logic with macro call |
+| Modify | `templates/stories.html.twig` | Add `{% block map_assets %}`; replace date logic with macro call |
+| Modify | `templates/partials/feed-map.html.twig` | Remove asset calls; wrap map init in DOMContentLoaded |
+| Modify | `templates/map.html.twig` | Move `{% block map_assets %}` to top level; add DOMContentLoaded |
+| Modify | `templates/dailies.html.twig` | Add `{% block map_assets %}` override |
+
+---
+
+### Task 1: Stats + cycling macros; update trip.html.twig
+
+**Files:**
+- Create: `templates/macros/stats.html.twig`
+- Create: `templates/macros/cycling.html.twig`
+- Modify: `templates/trip.html.twig`
+
+**Interfaces:**
+- Produces: `stats_panel(journal_entries, page, journal_count, has_gpx)` — renders `<div id="trip-stats-block">`
+- Produces: `cycling_panel()` — renders `<div id="trip-cycling-block">`
+- Both macros are imported at the top of `{% block content %}` in trip.html.twig
+
+- [ ] **Step 1: Create the macros directory**
+
+```bash
+mkdir -p user/themes/intotheeast/templates/macros
+```
+
+- [ ] **Step 2: Create `templates/macros/stats.html.twig`**
+
+This macro receives the entry collection, computes all server-side stats internally, and renders the complete stats panel. The `id="stat-distance"` placeholder is left empty for JS to fill after page load.
+
+```twig
+{% macro stats_panel(journal_entries, page, journal_count, has_gpx) %}
+{% set days_on_road = 0 %}
+{% if page.header.date_end is not empty %}
+    {% set start_ts = page.header.date_start|date('U') %}
+    {% set end_ts = page.header.date_end|date('U') %}
+    {% set days_on_road = ((end_ts - start_ts) / 86400)|round(0, 'ceil') %}
+{% else %}
+    {% set first_ts = null %}
+    {% for entry in journal_entries %}
+        {% set ts = entry.date|date('U') %}
+        {% if first_ts is null or ts < first_ts %}{% set first_ts = ts %}{% endif %}
+    {% endfor %}
+    {% if first_ts is not null %}
+        {% set diff_seconds = "now"|date('U') - first_ts %}
+        {% set days_raw = (diff_seconds / 86400)|round(0, 'floor') %}
+        {% set days_on_road = days_raw < 1 ? 1 : days_raw %}
+    {% endif %}
+{% endif %}
+
+{% set seen_lower = [] %}
+{% set country_display = [] %}
+{% for entry in journal_entries %}
+    {% if entry.header.location_country is not empty %}
+        {% set lower = entry.header.location_country|trim|lower %}
+        {% if lower not in seen_lower %}
+            {% set seen_lower = seen_lower|merge([lower]) %}
+            {% set country_display = country_display|merge([entry.header.location_country|trim]) %}
+        {% endif %}
+    {% endif %}
+{% endfor %}
+
+{% set seen_city_lower = [] %}
+{% set city_display = [] %}
+{% for entry in journal_entries %}
+    {% if entry.header.location_city is not empty %}
+        {% set lower = entry.header.location_city|trim|lower %}
+        {% if lower not in seen_city_lower %}
+            {% set seen_city_lower = seen_city_lower|merge([lower]) %}
+            {% set city_display = city_display|merge([entry.header.location_city|trim]) %}
+        {% endif %}
+    {% endif %}
+{% endfor %}
+
+{% set temp_min = null %}
+{% set temp_max = null %}
+{% for entry in journal_entries %}
+    {% if entry.header.weather_temp_c is defined and entry.header.weather_temp_c is not empty %}
+        {% set t = entry.header.weather_temp_c %}
+        {% if temp_min is null or t < temp_min %}{% set temp_min = t %}{% endif %}
+        {% if temp_max is null or t > temp_max %}{% set temp_max = t %}{% endif %}
+    {% endif %}
+{% endfor %}
+
+<div id="trip-stats-block" class="trip-stats-block">
+    <div class="trip-panel-inner">
+        <div class="trip-stats-grid">
+            <div class="stat-block">
+                <span class="stat-value">{{ days_on_road }}</span>
+                <span class="stat-label">{{ days_on_road == 1 ? 'day' : 'days' }} on the road</span>
+            </div>
+            <div class="stat-block">
+                <span class="stat-value">{{ journal_count }}</span>
+                <span class="stat-label">{{ journal_count == 1 ? 'entry' : 'entries' }} posted</span>
+            </div>
+            <div class="stat-block">
+                <span class="stat-value">{{ country_display|length }}</span>
+                <span class="stat-label">{{ country_display|length == 1 ? 'country' : 'countries' }} visited</span>
+            </div>
+            <div class="stat-block">
+                <span class="stat-value">{{ city_display|length }}</span>
+                <span class="stat-label">{{ city_display|length == 1 ? 'city' : 'cities' }} visited</span>
+            </div>
+            <div class="stat-block">
+                <span class="stat-value" id="stat-distance">—</span>
+                <span class="stat-label">{{ has_gpx ? '🚴 km cycled' : '🧭 km roamed' }}</span>
+            </div>
+            <div class="stat-block">
+                {% if temp_min is not null %}
+                <span class="stat-value">{{ temp_min == temp_max ? temp_min : temp_min ~ ' → ' ~ temp_max }}</span>
+                {% else %}
+                <span class="stat-value">—</span>
+                {% endif %}
+                <span class="stat-label">°C range</span>
+            </div>
+        </div>
+        {% if country_display|length > 0 %}
+        <p class="trip-stats-countries">{{ country_display|join(' · ') }}</p>
+        {% endif %}
+        <p class="trip-stats-note">{{ has_gpx ? 'Distance based on GPS track data.' : 'Distance is approximate — straight lines between entry locations.' }}</p>
+        <button class="trip-panel-close" data-toggle="trip-stats-toggle">↑ Close stats</button>
+    </div>
+</div>
+{% endmacro %}
+```
+
+- [ ] **Step 3: Create `templates/macros/cycling.html.twig`**
+
+All stat values are JS placeholders — JS fills them via `MapUtils.parseGpxFiles()` after page load. No computation needed.
+
+```twig
+{% macro cycling_panel() %}
+<div id="trip-cycling-block" class="trip-cycling-block">
+    <div class="trip-panel-inner">
+        <div class="trip-cycling-header">
+            <span class="trip-cycling-icon">🚴</span>
+            <span class="trip-cycling-title">Cycling Stats</span>
+        </div>
+        <div class="trip-cycling-grid">
+            <div class="stat-block">
+                <span class="stat-value" id="cyc-distance">—</span>
+                <span class="stat-label">km distance</span>
+            </div>
+            <div class="stat-block">
+                <span class="stat-value" id="cyc-ele-gain">—</span>
+                <span class="stat-label">m ↑ gain</span>
+            </div>
+            <div class="stat-block">
+                <span class="stat-value" id="cyc-ele-loss">—</span>
+                <span class="stat-label">m ↓ loss</span>
+            </div>
+            <div class="stat-block">
+                <span class="stat-value" id="cyc-highest">—</span>
+                <span class="stat-label">m highest</span>
+            </div>
+            <div class="stat-block">
+                <span class="stat-value" id="cyc-lowest">—</span>
+                <span class="stat-label">m lowest</span>
+            </div>
+            <div class="stat-block">
+                <span class="stat-value" id="cyc-moving-time">—</span>
+                <span class="stat-label">moving time</span>
+            </div>
+            <div class="stat-block">
+                <span class="stat-value" id="cyc-avg-speed">—</span>
+                <span class="stat-label">km/h avg speed</span>
+            </div>
+        </div>
+        <button class="trip-panel-close" data-toggle="trip-cycling-toggle">↑ Close cycling</button>
+    </div>
+</div>
+{% endmacro %}
+```
+
+- [ ] **Step 4: Update `templates/trip.html.twig`**
+
+Replace lines 1–9 (extends + opening of block content) with macro imports added at the top of `{% block content %}`. Then:
+- Remove lines 25–76 (stats computation: days, countries, cities, temp range) — the macro handles this now
+- Remove lines 150–230 (both panel HTML divs) — replaced by macro calls
+
+The full replacement for `trip.html.twig`:
+
+```twig
+{% extends 'partials/base.html.twig' %}
+
+{% block content %}
+{% import 'macros/stats.html.twig' as stats_m %}
+{% import 'macros/cycling.html.twig' as cycling_m %}
+{% block map_assets %}
+{% do assets.addCss('theme://css-compiled/map.css') %}
+{% do assets.addJs('theme://js/map.js', {group: 'bottom'}) %}
+{% endblock %}
+{% set dailies_page = grav.pages.find(page.route ~ '/dailies') %}
+{% set stories_page = grav.pages.find(page.route ~ '/stories') %}
+{% set journal_entries = dailies_page ? dailies_page.children.published() : [] %}
+{% set story_entries = stories_page ? stories_page.children.published() : [] %}
+
+{% set all_items = [] %}
+{% for e in journal_entries %}
+    {% set all_items = all_items|merge([{'type': 'journal', 'page': e, 'date': e.header.date}]) %}
+{% endfor %}
+{% for s in story_entries %}
+    {% set all_items = all_items|merge([{'type': 'story', 'page': s, 'date': s.header.date}]) %}
+{% endfor %}
+{% set all_items = all_items|sort_by_key('date', 4) %}
+
+{% set journal_count = journal_entries|length %}
+{% set story_count = story_entries|length %}
+
+{% set gps_points = [] %}
+{% for entry in journal_entries %}
+    {% if entry.header.lat is not empty and entry.header.lng is not empty %}
+        {% set gps_points = gps_points|merge([[entry.header.lat, entry.header.lng]]) %}
+    {% endif %}
+{% endfor %}
+
+{% set gpx_urls = [] %}
+{% for name, media in page.media.all %}
+    {% if name|split('.')|last == 'gpx' %}
+        {% set gpx_urls = gpx_urls|merge([page.url ~ '/' ~ name]) %}
+    {% endif %}
+{% endfor %}
+{% set has_gpx = gpx_urls|length > 0 %}
+
+{% set map_entries = [] %}
+{% for item in all_items %}
+    {% if item.page.header.lat is not empty and item.page.header.lng is not empty %}
+        {% set map_entries = map_entries|merge([{
+            'type': item.type,
+            'lat': item.page.header.lat|number_format(6, '.', ''),
+            'lng': item.page.header.lng|number_format(6, '.', ''),
+            'slug': item.page.slug,
+            'title': item.page.title,
+            'url': item.page.url,
+            'force_connect': item.page.header.force_connect ? true : false,
+            'transport_mode': item.page.header.transport_mode ? item.page.header.transport_mode : null
+        }]) %}
+    {% endif %}
+{% endfor %}
+
+<div class="home-layout">
+    <div class="home-map-col">
+        <div class="home-map" id="trip-map">
+            <button class="feed-map-fullscreen-btn" id="trip-map-fullscreen" aria-label="Expand map">
+                <svg class="feed-map-fs-open" aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+                    <path d="M0 0v4h1.5V1.5H4V0z M14 0H10v1.5h2.5V4H14z M0 14v-4h1.5v2.5H4V14z M14 14H10v-1.5h2.5V10H14z"/>
+                </svg>
+                <span class="feed-map-fs-close" aria-hidden="true">✕</span>
+            </button>
+        </div>
+    </div>
+
+    <div class="home-feed-col">
+        <div class="home-trip-header">
+            <h1 class="home-trip-name">{{ page.title }}</h1>
+            {% if page.header.date_start %}
+            <p class="trip-dates" style="font-size:var(--text-sm);color:var(--color-ink-muted);margin:var(--space-1) 0 var(--space-2);">
+                {{ page.header.date_start|date('d M Y') }}
+                {% if page.header.date_end %} — {{ page.header.date_end|date('d M Y') }}{% else %} — Ongoing{% endif %}
+            </p>
+            {% endif %}
+            <span class="home-trip-counts">
+                {{ journal_count }} journal {{ journal_count == 1 ? 'entry' : 'entries' }}
+                {% if story_count > 0 %} · {{ story_count }} {{ story_count == 1 ? 'story' : 'stories' }}{% endif %}
+            </span>
+            <div class="trip-filter-bar">
+                <div class="trip-filter-group">
+                    <button class="trip-filter-btn is-active" data-filter="all" aria-pressed="true">All content</button>
+                    <button class="trip-filter-btn" data-filter="journal" aria-pressed="false">Journal</button>
+                    <button class="trip-filter-btn" data-filter="story" aria-pressed="false">Stories</button>
+                </div>
+                <button class="trip-stats-btn" id="trip-sort-toggle" aria-label="Sort: oldest first">↑</button>
+            </div>
+            <div class="trip-panel-toggles">
+                <button class="trip-panel-toggle" id="trip-stats-toggle" aria-expanded="false" aria-controls="trip-stats-block">Stats <span class="trip-panel-caret" aria-hidden="true">▾</span></button>
+                {% if has_gpx %}
+                <button class="trip-panel-toggle" id="trip-cycling-toggle" aria-expanded="false" aria-controls="trip-cycling-block">Cycling <span class="trip-panel-caret" aria-hidden="true">▾</span></button>
+                {% endif %}
+            </div>
+        </div>
+
+        {{ stats_m.stats_panel(journal_entries, page, journal_count, has_gpx) }}
+
+        {% if has_gpx %}
+        {{ cycling_m.cycling_panel() }}
+        {% endif %}
+
+        <div class="feed">
+            {% if all_items|length > 0 %}
+                {% for item in all_items %}
+                    {% set entry = item.page %}
+                    {% if item.type == 'journal' %}
+                        {% include 'partials/entry-journal.html.twig' %}
+                    {% else %}
+                        {% include 'partials/entry-story.html.twig' %}
+                    {% endif %}
+                {% endfor %}
+            {% else %}
+                <p class="feed-empty">No entries yet. The journey is about to begin.</p>
+            {% endif %}
+            <p id="feed-filter-empty" class="feed-empty" style="display:none;"></p>
+        </div>
+    </div>
+</div>
+
+<script>
+var TRIP_ENTRIES = {{ map_entries|json_encode|raw }};
+var GPX_URLS     = {{ gpx_urls|json_encode|raw }};
+var USE_GPX      = {{ page.header.use_gpx ?? true ? 'true' : 'false' }};
+var AUTOCONNECT  = "{{ page.header.autoconnect ?? 'on' }}";
+
+document.addEventListener('DOMContentLoaded', function() {
+
+var tripMap = new maplibregl.Map({
+    container: 'trip-map',
+    style: MapUtils.MAP_STYLE,
+    center: [20, 20],
+    zoom: 2,
+    attributionControl: false
+});
+tripMap.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-left');
+
+tripMap.on('load', function () {
+    if (TRIP_ENTRIES.length === 0) {
+        tripMap.jumpTo({ center: [0, 20], zoom: 2 });
+        return;
+    }
+
+    /* ── Markers + bounds ──────────────────────────────────────── */
+    var bounds = new maplibregl.LngLatBounds();
+
+    TRIP_ENTRIES.forEach(function (entry, i) {
+        var isLatest = (entry.type !== 'story') && (i === TRIP_ENTRIES.length - 1);
+        var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
+        bounds.extend(lngLat);
+
+        var el = entry.type === 'story' ? MapUtils.createStoryMarker() : MapUtils.createDotMarker(isLatest);
+        el.dataset.url = entry.url;
+        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
+            .setLngLat(lngLat)
+            .setHTML('<span class="map-tip">' + entry.title + '</span>');
+        el.addEventListener('mouseenter', function () { popup.addTo(tripMap); });
+        el.addEventListener('mouseleave', function () { popup.remove(); });
+        el.addEventListener('click', function () {
+            var card = document.getElementById('entry-' + entry.slug);
+            if (!card) return;
+            var mapCol = document.querySelector('.home-map-col');
+            var isFs = mapCol && mapCol.classList.contains('is-fullscreen');
+            function scrollAndHighlight() {
+                window.location.hash = 'entry-' + entry.slug;
+                setTimeout(function () {
+                    card.classList.add('is-highlighted');
+                    setTimeout(function () { card.classList.remove('is-highlighted'); }, 700);
+                }, 350);
+            }
+            if (isFs) {
+                var fsBtn = document.getElementById('trip-map-fullscreen');
+                if (fsBtn) fsBtn.click();
+                setTimeout(scrollAndHighlight, 450);
+            } else {
+                scrollAndHighlight();
+            }
+        });
+
+        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(tripMap);
+    });
+
+    /* ── Fit bounds ─────────────────────────────────────────────── */
+    if (TRIP_ENTRIES.length === 1) {
+        tripMap.jumpTo({ center: [parseFloat(TRIP_ENTRIES[0].lng), parseFloat(TRIP_ENTRIES[0].lat)], zoom: 10 });
+    } else {
+        tripMap.fitBounds(bounds, { padding: 60, maxZoom: 11 });
+    }
+
+    /* ── GPX tracks + journey segments ─────────────────────────── */
+    MapUtils.renderGpxJourney(tripMap, USE_GPX ? GPX_URLS : [], TRIP_ENTRIES, 'gpx', 'trip-journey', { connectMode: AUTOCONNECT });
+
+    // Collapse attribution <details> which MapLibre may open on load
+    var attrib = tripMap.getContainer().querySelector('.maplibregl-ctrl-attrib');
+    if (attrib) attrib.removeAttribute('open');
+});
+setTimeout(function () { tripMap.resize(); }, 100);
+
+(function() {
+    var fsBtn = document.getElementById('trip-map-fullscreen');
+    var mapCol = document.querySelector('.home-map-col');
+    if (!fsBtn || !mapCol) return;
+    fsBtn.addEventListener('click', function() {
+        var isFs = mapCol.classList.toggle('is-fullscreen');
+        fsBtn.setAttribute('aria-label', isFs ? 'Close map' : 'Expand map');
+        document.body.style.overflow = isFs ? 'hidden' : '';
+        setTimeout(function() { tripMap.resize(); }, 50);
+    });
+})();
+
+var STATS_GPS = {{ gps_points|json_encode|raw }};
+var HAS_GPX = {{ has_gpx ? 'true' : 'false' }};
+
+(function() {
+    var distEl = document.getElementById('stat-distance');
+
+    if (HAS_GPX) {
+        MapUtils.parseGpxFiles(GPX_URLS, function(result) {
+            if (distEl) {
+                distEl.textContent = result.distance > 0 ? Math.round(result.distance).toLocaleString() : '—';
+            }
+            function setText(id, val) {
+                var el = document.getElementById(id);
+                if (el) el.textContent = val;
+            }
+            setText('cyc-distance',    result.distance > 0 ? Math.round(result.distance).toLocaleString() : '—');
+            setText('cyc-ele-gain',    !isNaN(result.eleGain)  ? Math.round(result.eleGain)  : '—');
+            setText('cyc-ele-loss',    !isNaN(result.eleLoss)  ? Math.round(result.eleLoss)  : '—');
+            setText('cyc-highest',     !isNaN(result.highest)  ? Math.round(result.highest)  : '—');
+            setText('cyc-lowest',      !isNaN(result.lowest)   ? Math.round(result.lowest)   : '—');
+            setText('cyc-moving-time', result.movingTime || '—');
+            setText('cyc-avg-speed',   result.avgSpeed > 0 ? result.avgSpeed.toFixed(1) : '—');
+        });
+    } else {
+        var total = 0;
+        for (var i = 1; i < STATS_GPS.length; i++) {
+            total += MapUtils.haversineKm(
+                parseFloat(STATS_GPS[i-1][0]), parseFloat(STATS_GPS[i-1][1]),
+                parseFloat(STATS_GPS[i][0]),   parseFloat(STATS_GPS[i][1])
+            );
+        }
+        if (distEl) {
+            distEl.textContent = STATS_GPS.length < 2 ? '—' : '~' + Math.round(total).toLocaleString();
+        }
+    }
+
+})();
+
+}); // DOMContentLoaded
+</script>
+
+<button class="story-totop" id="trip-totop" aria-label="Back to top">↑ Top</button>
+
+{% endblock %}
+```
+
+- [ ] **Step 5: Clear Grav cache**
+
+```bash
+make stop && make start
+```
+
+Or if cache clearing is available without restart:
+```bash
+curl -s http://localhost:8081/admin/cache/clear 2>/dev/null || make stop && make start
+```
+
+- [ ] **Step 6: Verify trip page renders correctly**
+
+Open `http://localhost:8081/trips/italy-2026-demo` in a browser.
+
+Check:
+- Page loads without Twig errors (no white page, no "Twig error" text)
+- Trip header shows title, dates, entry count
+- Click "Stats ▾" button — stats panel expands showing days, entries, countries, cities, temp range as numbers (not empty/zero)
+- `stat-distance` shows "—" then fills after a moment (JS loading GPX)
+- Click "Cycling ▾" button — cycling panel expands with 7 stat placeholders (all "—" initially, then fill)
+- Map shows markers
+- Browser console has no JS errors
+
+- [ ] **Step 7: Run existing Playwright tests**
+
+```bash
+make test-ui
+```
+
+Expected: all tests pass (F1–F7 filter tests, M1–M5 map tests). If any fail, investigate before committing.
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add user/themes/intotheeast/templates/macros/stats.html.twig \
+        user/themes/intotheeast/templates/macros/cycling.html.twig \
+        user/themes/intotheeast/templates/trip.html.twig
+git commit -m "refactor: extract stats and cycling panels to Twig macros"
+```
+
+---
+
+### Task 2: Date range macro; update story.html.twig and stories.html.twig
+
+**Files:**
+- Create: `templates/macros/date-range.html.twig`
+- Modify: `templates/story.html.twig` (lines 19–34)
+- Modify: `templates/stories.html.twig` (lines 49–52 + add `{% block map_assets %}`)
+
+**Interfaces:**
+- Consumes: nothing from Task 1
+- Produces: `format_date_range(start_date, end_date)` — outputs a text string:
+  - Single day (no end_date or end == start): `23 Jun 2026`
+  - Same month: `12 – 15 Jun 2026`
+  - Same year, different month: `12 Jun – 3 Jul 2026`
+  - Different years: `28 Dec 2025 – 3 Jan 2026`
+
+- [ ] **Step 1: Create `templates/macros/date-range.html.twig`**
+
+Logic extracted verbatim from `story.html.twig` lines 19–34, generalised to accept arguments instead of reading `page.date` / `page.header.end_date` directly.
+
+```twig
+{% macro format_date_range(start_date, end_date) %}
+{%- if end_date is not empty and end_date|date('Y-m-d') != start_date|date('Y-m-d') -%}
+    {%- set sd = start_date|date('d') -%}
+    {%- set sm = start_date|date('M') -%}
+    {%- set sy = start_date|date('Y') -%}
+    {%- set ed = end_date|date('d') -%}
+    {%- set em = end_date|date('M') -%}
+    {%- set ey = end_date|date('Y') -%}
+    {%- if sy == ey and sm == em -%}
+        {{- sd ~ ' – ' ~ ed ~ ' ' ~ em ~ ' ' ~ ey -}}
+    {%- elseif sy == ey -%}
+        {{- sd ~ ' ' ~ sm ~ ' – ' ~ ed ~ ' ' ~ em ~ ' ' ~ ey -}}
+    {%- else -%}
+        {{- sd ~ ' ' ~ sm ~ ' ' ~ sy ~ ' – ' ~ ed ~ ' ' ~ em ~ ' ' ~ ey -}}
+    {%- endif -%}
+{%- else -%}
+    {{- start_date|date('d M Y') -}}
+{%- endif %}
+{% endmacro %}
+```
+
+Note: the `{%- -%}` whitespace-control tags prevent the macro from outputting leading/trailing newlines, so it can be used inline in HTML without extra whitespace.
+
+- [ ] **Step 2: Update `templates/story.html.twig`**
+
+Replace lines 19–34 (date computation) with a macro call. The `{% import %}` goes at the top of `{% block content %}`, just after the `{% block content %}` opening tag.
+
+Find the existing `{% block content %}` line and the lines immediately after it:
+
+```twig
+{% block content %}
+{% set hero_url = null %}
+```
+
+Replace with:
+
+```twig
+{% block content %}
+{% import 'macros/date-range.html.twig' as dr_m %}
+{% set hero_url = null %}
+```
+
+Then find and replace the entire date computation block (lines 19–34):
+
+```twig
+{% set date_str = page.date|date('d M Y') %}
+{% if page.header.end_date and page.header.end_date|date('Y-m-d') != page.date|date('Y-m-d') %}
+    {% set sd = page.date|date('d') %}
+    {% set sm = page.date|date('M') %}
+    {% set sy = page.date|date('Y') %}
+    {% set ed = page.header.end_date|date('d') %}
+    {% set em = page.header.end_date|date('M') %}
+    {% set ey = page.header.end_date|date('Y') %}
+    {% if sy == ey and sm == em %}
+        {% set date_str = sd ~ ' – ' ~ ed ~ ' ' ~ em ~ ' ' ~ ey %}
+    {% elseif sy == ey %}
+        {% set date_str = sd ~ ' ' ~ sm ~ ' – ' ~ ed ~ ' ' ~ em ~ ' ' ~ ey %}
+    {% else %}
+        {% set date_str = sd ~ ' ' ~ sm ~ ' ' ~ sy ~ ' – ' ~ ed ~ ' ' ~ em ~ ' ' ~ ey %}
+    {% endif %}
+{% endif %}
+```
+
+Replace with:
+
+```twig
+{% set date_str = dr_m.format_date_range(page.date, page.header.end_date ?? null) %}
+```
+
+- [ ] **Step 3: Update `templates/stories.html.twig`**
+
+This file needs two changes: adding `{% block map_assets %}` (CSS timing fix, from Task 4's bug) and replacing the date string logic.
+
+Replace the current opening of the file:
+
+```twig
+{% extends 'partials/base.html.twig' %}
+
+{% block content %}
+{% set stories = page.children.published().order('date', 'asc') %}
+```
+
+With:
+
+```twig
+{% extends 'partials/base.html.twig' %}
+
+{% block map_assets %}
+{% do assets.addCss('theme://css-compiled/map.css') %}
+{% do assets.addJs('theme://js/map.js', {group: 'bottom'}) %}
+{% endblock %}
+
+{% block content %}
+{% import 'macros/date-range.html.twig' as dr_m %}
+{% set stories = page.children.published().order('date', 'asc') %}
+```
+
+Then find and replace the date_str logic inside the stories loop (lines 49–52 of the original):
+
+```twig
+        {% set date_str = story.date|date('d M Y') %}
+        {% if story.header.end_date %}
+            {% set date_str = story.date|date('d M') ~ '–' ~ story.header.end_date|date('d M Y') %}
+        {% endif %}
+```
+
+Replace with:
+
+```twig
+        {% set date_str = dr_m.format_date_range(story.date, story.header.end_date ?? null) %}
+```
+
+- [ ] **Step 4: Clear cache and verify story page**
+
+```bash
+make stop && make start
+```
+
+Open `http://localhost:8081/trips/italy-2026-demo/stories/val-dorcia-at-dawn` (single-day story):
+- Date renders as e.g. `3 Jun 2026` (no range)
+- No Twig errors
+
+Open `http://localhost:8081/trips/italy-2026-demo/stories/sorano-rock-and-time` (multi-day story if it has end_date):
+- Date renders condensed if same month (e.g. `5 – 7 Jun 2026`)
+- No Twig errors
+
+Open `http://localhost:8081/trips/italy-2026-demo/stories`:
+- Story cards show dates in the same smart format
+- Map renders without console errors
+
+- [ ] **Step 5: Run Playwright tests**
+
+```bash
+make test-ui
+```
+
+Expected: all tests pass. Story tests in `tests/ui/stories/stories.spec.js` should pass.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add user/themes/intotheeast/templates/macros/date-range.html.twig \
+        user/themes/intotheeast/templates/story.html.twig \
+        user/themes/intotheeast/templates/stories.html.twig
+git commit -m "refactor: extract date range macro; fix stories.html.twig asset registration"
+```
+
+---
+
+### Task 3: Fix latent bugs in feed-map.html.twig, map.html.twig, dailies.html.twig
+
+**Files:**
+- Modify: `templates/partials/feed-map.html.twig`
+- Modify: `templates/map.html.twig`
+- Modify: `templates/dailies.html.twig`
+
+**The two bugs:**
+
+1. `feed-map.html.twig` calls `assets.addCss/addJs` inside `{% block content %}`, after `base.html.twig` has already rendered `{{ assets.css() }}` in `<head>`. Map.css never reaches `<head>`. Fix: remove asset calls from the partial; add `{% block map_assets %}` in callers.
+
+2. `feed-map.html.twig` and `map.html.twig` call `new maplibregl.Map()` in inline `<script>` blocks that execute before `map.js` is loaded (map.js is in the `bottom` group, rendered after all content). Fix: wrap in `DOMContentLoaded`.
+
+**Interfaces:**
+- Consumes: nothing from Tasks 1 or 2
+- The `feed-map.html.twig` partial is included by `dailies.html.twig` and `stories.html.twig`. `stories.html.twig` already got its `{% block map_assets %}` in Task 2. Only `dailies.html.twig` remains.
+
+- [ ] **Step 1: Update `templates/partials/feed-map.html.twig`**
+
+Remove the two asset registration lines (14–15) and merge both `<script>` blocks into one, wrapped in `DOMContentLoaded`.
+
+The full replacement for `feed-map.html.twig`:
+
+```twig
+{#
+  Feed mini-map partial — shared by dailies.html.twig and stories.html.twig.
+
+  Required variables (via {% include ... with {...} only %}):
+    map_entries  — array: [{lat, lng, title, slug, url, type, force_connect, transport_mode}]
+    map_id       — string: HTML id for the map div (e.g. 'feed-map', 'stories-map')
+    map_var      — string: JS variable name for the MapLibre Map (e.g. 'feedMap', 'storiesMap')
+    link_href    — string|null: URL for "View full map" link; null/empty hides the link
+    card_prefix  — string: prefix for scroll-to card IDs ('entry-' or 'story-')
+    trip_page    — Grav page: trip page for autoconnect setting (used when show_journey is true)
+    show_journey — bool: whether to draw the route connector line between markers
+
+  Callers must register map assets via {% block map_assets %} in their own template.
+#}
+{% if map_entries|length > 0 %}
+<div class="feed-map-wrap">
+    <div class="feed-map" id="{{ map_id }}">
+        <button class="feed-map-fullscreen-btn" id="{{ map_id }}-fullscreen" aria-label="Expand map">
+            <svg class="feed-map-fs-open" aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+                <path d="M0 0v4h1.5V1.5H4V0z M14 0H10v1.5h2.5V4H14z M0 14v-4h1.5v2.5H4V14z M14 14H10v-1.5h2.5V10H14z"/>
+            </svg>
+            <span class="feed-map-fs-close" aria-hidden="true">✕</span>
+        </button>
+    </div>
+    {% if link_href %}
+    <a class="feed-map-link" href="{{ link_href }}">View full map →</a>
+    {% endif %}
+</div>
+
+<script>
+{% set js_suffix = map_id|replace({'-': '_'})|upper %}
+{% if show_journey %}
+{% set _ac = trip_page ? (trip_page.header.autoconnect ?? 'on') : 'on' %}
+{% endif %}
+var MAP_ENTRIES_{{ js_suffix }} = {{ map_entries|json_encode|raw }};
+{% if show_journey %}
+var AUTOCONNECT_{{ js_suffix }} = "{{ _ac == 'intelligent_gpx' ? 'on' : _ac }}";
+{% endif %}
+
+document.addEventListener('DOMContentLoaded', function() {
+var {{ map_var }} = new maplibregl.Map({
+    container: '{{ map_id }}',
+    style: MapUtils.MAP_STYLE,
+    center: [20, 20],
+    zoom: 2,
+    attributionControl: false
+});
+{{ map_var }}.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-left');
+
+{{ map_var }}.on('load', function () {
+    var attrib = {{ map_var }}.getContainer().querySelector('.maplibregl-ctrl-attrib');
+    if (attrib) attrib.removeAttribute('open');
+
+    var bounds = new maplibregl.LngLatBounds();
+    var entries = MAP_ENTRIES_{{ js_suffix }};
+
+    entries.forEach(function (entry, i) {
+        var isLatest = (entry.type !== 'story') && (i === entries.length - 1);
+        var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
+        bounds.extend(lngLat);
+
+        var el = entry.type === 'story' ? MapUtils.createStoryMarker() : MapUtils.createDotMarker(isLatest);
+        el.dataset.url = entry.url;
+        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
+            .setLngLat(lngLat)
+            .setHTML('<span class="map-tip">' + entry.title + '</span>');
+        el.addEventListener('mouseenter', function () { popup.addTo({{ map_var }}); });
+        el.addEventListener('mouseleave', function () { popup.remove(); });
+
+        el.addEventListener('click', function () {
+            var card = document.getElementById('{{ card_prefix }}' + entry.slug);
+            var mapWrap = document.querySelector('.feed-map-wrap');
+            var isFs = mapWrap && mapWrap.classList.contains('is-fullscreen');
+            function scrollAndHighlight() {
+                if (!card) { window.location.href = entry.url; return; }
+                window.location.hash = '{{ card_prefix }}' + entry.slug;
+                setTimeout(function () {
+                    card.classList.add('is-highlighted');
+                    setTimeout(function () { card.classList.remove('is-highlighted'); }, 700);
+                }, 350);
+            }
+            if (isFs) {
+                var fsBtn = document.getElementById('{{ map_id }}-fullscreen');
+                if (fsBtn) fsBtn.click();
+                setTimeout(scrollAndHighlight, 450);
+            } else {
+                scrollAndHighlight();
+            }
+        });
+
+        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo({{ map_var }});
+    });
+
+    if (entries.length === 1) {
+        {{ map_var }}.jumpTo({ center: [parseFloat(entries[0].lng), parseFloat(entries[0].lat)], zoom: 10 });
+    } else {
+        {{ map_var }}.fitBounds(bounds, { padding: 60, maxZoom: 11 });
+    }
+
+    {% if show_journey %}
+    var segments = MapUtils.buildJourneySegments(entries, { connectMode: AUTOCONNECT_{{ js_suffix }} });
+    MapUtils.addJourneySegments({{ map_var }}, segments, '{{ map_id }}-journey');
+    {% endif %}
+});
+
+(function() {
+    var fsBtn = document.getElementById('{{ map_id }}-fullscreen');
+    var mapWrap = document.querySelector('.feed-map-wrap');
+    if (!fsBtn || !mapWrap) return;
+    fsBtn.addEventListener('click', function() {
+        var isFs = mapWrap.classList.toggle('is-fullscreen');
+        fsBtn.setAttribute('aria-label', isFs ? 'Close map' : 'Expand map');
+        document.body.style.overflow = isFs ? 'hidden' : '';
+        setTimeout(function() { typeof {{ map_var }} !== 'undefined' && {{ map_var }}.resize(); }, 50);
+    });
+})();
+}); // DOMContentLoaded
+</script>
+{% endif %}
+```
+
+- [ ] **Step 2: Update `templates/map.html.twig`**
+
+Move `{% block map_assets %}` outside `{% block content %}` (so it runs at line 11 of base.html.twig, before assets.css), and wrap the map init in DOMContentLoaded.
+
+Full replacement for `map.html.twig`:
+
+```twig
+{% extends 'partials/base.html.twig' %}
+
+{% block map_assets %}
+{% do assets.addCss('theme://css-compiled/map.css') %}
+{% do assets.addJs('theme://js/map.js', {group: 'bottom'}) %}
+{% endblock %}
+
+{% block content %}
+{% set trip_page = page.parent() %}
+{% set tracker_page = grav.pages.find(page.parent().route ~ '/dailies') %}
+{% set all_entries = tracker_page ? tracker_page.children.published() : [] %}
+
+{% set gpx_urls = [] %}
+{% for name, media in trip_page.media.all %}
+    {% if name|split('.')|last == 'gpx' %}
+        {% set gpx_urls = gpx_urls|merge([trip_page.url ~ '/' ~ name]) %}
+    {% endif %}
+{% endfor %}
+
+{% set map_entries = [] %}
+{% for entry in all_entries %}
+    {% if entry.header.lat is not empty and entry.header.lng is not empty %}
+        {% set hero_url = null %}
+        {% if entry.header.hero_image and entry.media[entry.header.hero_image] is defined %}
+            {% set hero_url = entry.media[entry.header.hero_image].cropResize(240, 135).url %}
+        {% elseif entry.media.images|length > 0 %}
+            {% set hero_url = entry.media.images|first.cropResize(240, 135).url %}
+        {% endif %}
+        {% set map_entries = map_entries|merge([{
+            'lat': entry.header.lat|number_format(6, '.', ''),
+            'lng': entry.header.lng|number_format(6, '.', ''),
+            'title': entry.title,
+            'date': entry.date|date('d M Y'),
+            'url': entry.url,
+            'hero': hero_url,
+            'force_connect': entry.header.force_connect ? true : false,
+            'transport_mode': entry.header.transport_mode ? entry.header.transport_mode : null
+        }]) %}
+    {% endif %}
+{% endfor %}
+
+<div class="map-container" id="trip-map"></div>
+
+<script>
+var ENTRIES     = {{ map_entries|json_encode|raw }};
+var GPX_URLS    = {{ gpx_urls|json_encode|raw }};
+var USE_GPX     = {{ trip_page.header.use_gpx ?? true ? 'true' : 'false' }};
+var AUTOCONNECT = "{{ trip_page.header.autoconnect ?? 'on' }}";
+
+document.addEventListener('DOMContentLoaded', function() {
+var map = new maplibregl.Map({
+    container: 'trip-map',
+    style: MapUtils.MAP_STYLE,
+    center: [20, 20],
+    zoom: 2
+});
+
+map.addControl(new maplibregl.NavigationControl(), 'top-right');
+
+if (ENTRIES.length === 0) {
+    var empty = document.createElement('div');
+    empty.className = 'map-empty';
+    empty.textContent = 'No locations yet — entries with GPS will appear here.';
+    document.getElementById('trip-map').appendChild(empty);
+}
+
+map.on('load', function () {
+    if (ENTRIES.length === 0) return;
+
+    /* ── Markers + bounds ──────────────────────────────────────── */
+    var bounds = new maplibregl.LngLatBounds();
+
+    ENTRIES.forEach(function (entry, i) {
+        var isLatest = (i === ENTRIES.length - 1);
+        var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
+        bounds.extend(lngLat);
+
+        var el = MapUtils.createDotMarker(isLatest);
+        el.dataset.url = entry.url;
+        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
+            .setLngLat(lngLat)
+            .setHTML('<span class="map-tip">' + entry.title + '</span>');
+        el.addEventListener('mouseenter', function () { popup.addTo(map); });
+        el.addEventListener('mouseleave', function () { popup.remove(); });
+        el.addEventListener('click', function () { window.location.href = entry.url; });
+
+        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(map);
+    });
+
+    /* ── Fit bounds ─────────────────────────────────────────────── */
+    if (ENTRIES.length === 1) {
+        map.jumpTo({ center: [parseFloat(ENTRIES[0].lng), parseFloat(ENTRIES[0].lat)], zoom: 10 });
+    } else {
+        map.fitBounds(bounds, { padding: 100, maxZoom: 11 });
+    }
+
+    /* ── GPX tracks + journey segments ─────────────────────────── */
+    MapUtils.renderGpxJourney(map, USE_GPX ? GPX_URLS : [], ENTRIES, 'gpx', 'journey', { connectMode: AUTOCONNECT });
+});
+}); // DOMContentLoaded
+</script>
+{% endblock %}
+```
+
+- [ ] **Step 3: Update `templates/dailies.html.twig`**
+
+Add `{% block map_assets %}` override so map.css reaches `<head>`. Place it between `{% extends %}` and `{% block content %}`.
+
+Find:
+```twig
+{% extends 'default.html.twig' %}
+
+{% block content %}
+```
+
+Replace with:
+```twig
+{% extends 'default.html.twig' %}
+
+{% block map_assets %}
+{% do assets.addCss('theme://css-compiled/map.css') %}
+{% do assets.addJs('theme://js/map.js', {group: 'bottom'}) %}
+{% endblock %}
+
+{% block content %}
+```
+
+- [ ] **Step 4: Clear cache and verify map page**
+
+```bash
+make stop && make start
+```
+
+Open `http://localhost:8081/trips/italy-2026-demo/map`:
+- MapLibre canvas renders
+- Markers appear on the map
+- Browser console has no `maplibregl is not defined` error (the M1 test catches this)
+
+Open `http://localhost:8081/trips/italy-2026-demo/stories`:
+- Stories mini-map renders (MapLibre canvas visible)
+- No JS errors in console
+
+- [ ] **Step 5: Run full test suite**
+
+```bash
+make test-ui
+```
+
+Expected: all tests pass, including M1 (map page), M3 (dailies mini-map), M9–M11 (stories map).
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add user/themes/intotheeast/templates/partials/feed-map.html.twig \
+        user/themes/intotheeast/templates/map.html.twig \
+        user/themes/intotheeast/templates/dailies.html.twig
+git commit -m "fix: DOMContentLoaded wrapper + correct asset registration in map templates"
+```

docs/working/qa/test-plan.md

@@ -626,3 +626,114 @@ The slug is built from `date(Y-m-d-Hi)` + title lowercased with `[^a-z0-9]+` rep
 ### Accessibility
 - [ ] Focus ring visible on all interactive elements (keyboard navigation)
 - [ ] With prefers-reduced-motion: no animations/transitions fire
+
+---
+
+## Mobile UX — Session 2026-06-21
+
+These test cases cover the improvements made in session 2026-06-21.
+
+> **Context:** All changes target `trip.html.twig`, `home.html.twig`, and `dailies.html.twig`. Entry HTML is now shared via `partials/entry-journal.html.twig` and `partials/entry-story.html.twig`. Use the demo trip at `/trips/italy-2026-demo` — it has controlled content (12 journal entries + 4 stories + 7 GPX files). The home page is at `/home`. The active trip is currently `us-canada-mex-2024`.
+
+---
+
+### TC-M.1: Back-to-top button appears on scroll
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Open `http://localhost:8081/trips/italy-2026-demo` in desktop or mobile browser | Page loads; no back-to-top button visible |
+| 2 | Scroll down past ~80% of viewport height | `↑ Top` button appears in the bottom-right corner |
+| 3 | Scroll back up near the top | Button disappears |
+| 4 | Scroll down again, then click `↑ Top` | Page scrolls smoothly to the top; button disappears |
+| 5 | Check URL bar after clicking top | No `#entry-*` hash in URL (the button clears any leftover hash) |
+
+**Manual verification required.**
+
+---
+
+### TC-M.2: Map marker click scrolls entry below sticky header
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Open `http://localhost:8081/trips/italy-2026-demo` | Trip page loads with MapLibre mini-map above the feed |
+| 2 | Click any map marker | Page scrolls to the matching journal entry |
+| 3 | Check scroll position | Entry title is fully visible **below** the sticky site header — not hidden behind it |
+| 4 | Check URL bar | Hash updated to `#entry-<slug>` |
+| 5 | Repeat on mobile (375px viewport) | Same result — title fully visible below header on small screen |
+
+**Manual verification required on both desktop and mobile.**
+
+---
+
+### TC-M.3: Map marker click highlights matched entry
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Click a map marker | Page scrolls to entry; after ~350ms the matched entry card shows a teal-tinted background |
+| 2 | Highlight fades out | Over 700ms the teal background fades to transparent; no permanent style change after |
+
+**Manual verification required.**  
+**Implementation detail:** CSS animation `card-highlight` (0%: teal-tinted bg → 100%: transparent). Class `is-highlighted` is added 350ms after click (after scroll settles) and removed after 700ms.
+
+---
+
+### TC-M.4: PhotoSwipe lightbox covers full viewport on mobile
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Open a trip page on a mobile browser (iOS Safari or Android Chrome) | — |
+| 2 | Scroll down so the browser address bar hides (viewport visually expands) | — |
+| 3 | Tap a photo to open the lightbox | Lightbox background covers the **full visible area** — no gap at the bottom |
+| 4 | Repeat on desktop Firefox and Chrome | Lightbox covers the full window — no regression on desktop |
+
+**Manual verification required on a physical device.**  
+**Root cause fixed:** `.pswp { height: 100dvh }` — `100dvh` tracks the live viewport dynamically; `100vh` was freezing at the initial height before the address bar hid.
+
+---
+
+### TC-M.5: PhotoSwipe keyboard arrow animation (fullscreen lightbox)
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Open a journal entry that has multiple photos; click the expand icon | Lightbox opens fullscreen |
+| 2 | Press `→` arrow key | Next image slides in smoothly from the right with a fade; no instant jump |
+| 3 | Press `←` arrow key | Previous image slides in smoothly from the left with a fade |
+| 4 | Press `→` rapidly several times | Each keypress restarts the animation from scratch; no stuck/broken state |
+| 5 | Navigate with mouse drag or touch swipe | Swipe animation unchanged — the fix only affects keyboard navigation |
+| 6 | Repeat steps 2–4 in Firefox | Same smooth animation — Firefox Linux was the original repro environment |
+
+**Manual verification required; must test in Firefox specifically.**  
+**Root cause fixed:** `pswp.currSlide.el` is `undefined` in the PhotoSwipe v5 Slide class — `.el` is a property of the itemHolder wrapper, not the Slide. Changed to `pswp.currSlide.container` (the `.pswp__zoom-wrap` element), which is the correct Slide DOM reference.
+
+---
+
+### TC-M.6: Photo strip prev/next arrows on pointer devices
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Open `http://localhost:8081/trips/italy-2026-demo` on a desktop with a mouse | Journal entries with multiple photos show `‹` / `›` arrow buttons positioned outside the photo strip |
+| 2 | Click `›` | Strip scrolls smoothly to the next photo |
+| 3 | Click `‹` | Strip scrolls back to the previous photo |
+| 4 | Inspect DOM | Arrow buttons (`div.strip-controls`) are siblings of `.journal-photo-wrap`, **not** children — they are outside the overflow:hidden container |
+| 5 | Open the same page on a touchscreen (phone or touch-only tablet) | Arrow buttons are not rendered / hidden; dot navigation still works |
+
+**Manual verification required.**  
+**Note:** Arrows are hidden via `@media (hover: none)` — the rule targets touch-primary devices, not screen width. A desktop touchscreen monitor would also hide arrows.  
+**Root cause of earlier regression:** Arrows were being inserted inside `.journal-photo-wrap` (which has `overflow: hidden`) and were clipped. Fixed by inserting them after the wrap element.
+
+---
+
+### TC-M.7: Entry partials consistent across all three feed pages
+
+| Step | Action | Expected Result |
+|---|---|---|
+| 1 | Open `http://localhost:8081/trips/italy-2026-demo` (trip page) | Journal entries and story cards render correctly |
+| 2 | Open `http://localhost:8081/trips/italy-2026-demo/dailies` | Identical entry markup — same photo strips, dots, expand button |
+| 3 | Open `http://localhost:8081/home` (home page, currently in between-trips mode — see note) | — |
+| 4 | On trip page and dailies: tap photo expand icon | PhotoSwipe lightbox opens identically on both |
+| 5 | On trip page and dailies: click a map marker | Scrolls to entry with correct header offset on both |
+| 6 | On trip page and dailies: keyboard arrows in lightbox | Animation works on both |
+
+**Manual verification required on trip page and dailies.**  
+**Note on home page:** The home page only renders the journal feed in **trip mode** (when `active_trip` is set and the trip is ongoing). Currently `active_trip` is `us-canada-mex-2024` and the trip may be in between-trips mode, so the home page may not show a journal feed. Verify by checking `http://localhost:8081/home` — if it shows the between-trips highlights grid, the home page feed cannot be tested without switching active trip or adjusting the trip dates.  
+**Context:** Entry HTML was extracted into shared partials (`partials/entry-journal.html.twig`, `partials/entry-story.html.twig`) and included from all three templates.

docs/working/specs/2026-06-22-asset-pipeline-design.md

@@ -0,0 +1,225 @@
+# Asset Pipeline & Frontend Reliability Design
+
+**Date:** 2026-06-22
+**Status:** Approved for implementation
+
+## Problem
+
+The theme's frontend has three compounding reliability risks:
+
+1. **CDN dependency** — MapLibre GL, PhotoSwipe, Scrollama, toGeoJSON, and Google Fonts all load from external CDNs. A CDN outage or rate-limit takes the site down visually.
+2. **Duplicated JS logic** — The same behaviour is copy-pasted across multiple templates. Changing anything means finding and editing every copy.
+3. **No central loading strategy** — CDN `<script>` and `<link>` tags are scattered across templates, some loading the same library multiple times in different contexts.
+
+| Duplicated logic | Templates | Copies |
+|---|---|---|
+| PhotoSwipe lightbox init (~55 lines) | `trip.html.twig`, `dailies.html.twig` | 2 |
+| Photo strip IntersectionObserver + expand btn | `trip.html.twig`, `dailies.html.twig` | 2 |
+| Sort feed button | `trip.html.twig`, `dailies.html.twig`, `stories.html.twig` | 3 |
+| Back-to-top button | `trip.html.twig`, `story.html.twig` | 2 |
+| `haversineKm()` function | `maplibre-utils.js`, `trip.html.twig` | 2 |
+| Fullscreen map toggle | `feed-map.html.twig`, `trip.html.twig` | 2 |
+| MapLibre CDN script tags | `trip.html.twig`, `map.html.twig`, `feed-map.html.twig` | 3 |
+
+## Goals
+
+- Eliminate all CDN dependencies (JS, CSS, fonts) — site works with no internet access to external hosts
+- Every shared behaviour lives in exactly one place
+- No new framework complexity — the fix is organisation, not replacement
+- Grav-idiomatic output structure (follows Quark theme conventions)
+- Build runs via Docker — no local Node.js required
+
+## Non-goals
+
+- Refactoring map initialisation code across `trip.html.twig`, `feed-map.html.twig`, `map.html.twig` — deferred (see below)
+- CSS framework adoption — the existing token system is sound
+- Changes to `dailies.html.twig`, `stories.html.twig`, `map.html.twig` beyond removing CDN tags — those pages are not in active use
+
+## Architecture
+
+### Build system
+
+A single `make build-assets` command runs a throwaway Docker Node 20 Alpine container, mounts the theme directory, runs `npm ci && npm run build`, and exits. Output files are committed to the repo and served directly by Grav.
+
+```makefile
+build-assets:
+	docker run --rm \
+	  -v $(PWD)/user/themes/intotheeast:/app \
+	  -w /app node:20-alpine \
+	  sh -c "npm ci && npm run build"
+```
+
+The build command (in `package.json`) runs esbuild twice — once per entry point — and outputs IIFE bundles so they work as regular scripts without `type="module"`.
+
+### Output structure (Grav-idiomatic)
+
+Follows the Quark reference theme convention (`css-compiled/` for generated CSS, `fonts/` at theme root):
+
+```
+user/themes/intotheeast/
+├── package.json                  ← new
+├── package-lock.json             ← new, committed
+├── node_modules/                 ← gitignored
+├── js/
+│   ├── src/
+│   │   ├── main.js               ← new entry point
+│   │   └── map.js                ← new entry point
+│   ├── main.js                   ← esbuild output, committed
+│   ├── map.js                    ← esbuild output, committed
+│   └── maplibre-utils.js         ← existing, unchanged, imported by src/map.js
+├── css-compiled/                 ← new, Grav convention for generated CSS
+│   ├── main.css                  ← PhotoSwipe CSS extracted by esbuild
+│   └── map.css                   ← MapLibre GL CSS extracted by esbuild
+├── fonts/                        ← new, self-hosted woff2 files
+│   └── *.woff2                   ← copied by esbuild from @fontsource packages
+├── css/
+│   ├── tokens.css                ← unchanged
+│   └── style.css                 ← updated: remove Google Fonts @import, add @font-face
+└── templates/
+    └── partials/
+        └── base.html.twig        ← updated (see Template changes)
+```
+
+### npm dependencies
+
+```json
+{
+  "dependencies": {
+    "maplibre-gl": "^4",
+    "photoswipe": "^5",
+    "scrollama": "^3",
+    "@mapbox/togeojson": "^0.16.2",
+    "@fontsource-variable/dm-sans": "latest",
+    "@fontsource/dm-serif-display": "latest"
+  },
+  "devDependencies": {
+    "esbuild": "^0.21"
+  }
+}
+```
+
+### Bundle 1: `js/src/main.js` → `js/main.js`
+
+Loads on every page. Imports and initialises:
+
+- **PhotoSwipe 5** — lightbox init with keyboard arrow navigation and CSS transition classes. Currently copy-pasted verbatim in `trip.html.twig` (lines 566–626) and `dailies.html.twig` (lines 66–128).
+- **PhotoSwipe CSS** — `import 'photoswipe/dist/photoswipe.css'` → extracted to `css-compiled/main.css` by esbuild.
+- **Photo strip** — scroll dots sync (IntersectionObserver) + prev/next buttons + expand button. Currently in `base.html.twig` (lines 30–73, IIFE) and duplicated in `trip.html.twig` + `dailies.html.twig` (the IntersectionObserver variant).
+- **Sort feed button** — flip ascending/descending, update button text + aria-label, toggle `.is-active`. Currently in `trip.html.twig`, `dailies.html.twig`, `stories.html.twig` with slightly different container selectors. Unified as `initSortButton(btnId, containerSelector, itemSelector)`.
+- **Back-to-top button** — scroll threshold show/hide + smooth scroll. Currently in `trip.html.twig` (lines 544–561) and `story.html.twig` (lines 140–156).
+- **Panel toggles** — open/close collapsible stat and cycling panels. Currently inline in `trip.html.twig`.
+- **Scrollama** — imported here so `story.html.twig` can use it without a CDN tag. Only activates if `.scrolly` elements exist on the page.
+- **DM Sans variable font** — `import '@fontsource-variable/dm-sans/index.css'` covers weights 100–900 including italic axis. esbuild copies woff2 to `fonts/` and updates CSS references.
+- **DM Serif Display** — `import '@fontsource/dm-serif-display/400.css'` and `import '@fontsource/dm-serif-display/400-italic.css'`.
+
+All initialisers are called unconditionally — each guards with `if (!document.querySelector(...)) return` so they are silent no-ops on pages where the relevant elements don't exist.
+
+### Bundle 2: `js/src/map.js` → `js/map.js`
+
+Loads only on pages with a map. Imports:
+
+- **maplibre-gl** — attached to `window.maplibregl` so existing template inline map init scripts can reference it unchanged.
+- **MapLibre GL CSS** — `import 'maplibre-gl/dist/maplibre-gl.css'` → extracted to `css-compiled/map.css`.
+- **@mapbox/togeojson** — attached to `window.toGeoJSON`.
+- **`../maplibre-utils.js`** — existing file, unchanged. Attaches `window.MapUtils`.
+
+The existing map initialisation code in `trip.html.twig`, `feed-map.html.twig`, and `map.html.twig` references `maplibregl`, `toGeoJSON`, and `MapUtils` as globals — this bundle provides them without changing any of that code.
+
+### Template changes
+
+#### `base.html.twig`
+
+- **Remove** lines 7–9: Google Fonts `<link rel="preconnect">` and `<link href="fonts.googleapis.com/...">` tags
+- **Remove** lines 30–73: inline `<script>` block (photo strip IIFE) — moves to `main.js`
+- **Add** Asset Manager registrations:
+  ```twig
+  {% do assets.addCss('theme://css-compiled/main.css') %}
+  {% do assets.addJs('theme://js/main.js', {group: 'bottom'}) %}
+  ```
+- **Add** block for map pages:
+  ```twig
+  {% block map_assets %}{% endblock %}
+  ```
+
+#### `trip.html.twig`
+
+- **Remove** lines 247–250: MapLibre GL CSS link + MapLibre JS + toGeoJSON JS + maplibre-utils.js script tags
+- **Remove** lines 393–401: duplicate `haversineKm()` function — requires `haversineKm` to be added to `MapUtils` exports in `maplibre-utils.js` first, then the local `parseGpxFiles` caller updated to use `MapUtils.haversineKm`
+- **Remove** the following inline `<script>` blocks (all move to `main.js`):
+  - PhotoSwipe init (lines 566–626, `<script type="module">`)
+  - Sort toggle IIFE (lines 373–388)
+  - Filter bar IIFE (lines 339–371)
+  - Back-to-top IIFE (lines 544–561)
+  - Panel toggle `makePanelToggle` calls (lines 523–541)
+- **Keep** the map init block (`tripMap = new maplibregl.Map(...)` through to `tripMap.resize()`)
+- **Keep** the GPX parsing and cycling stats block (lines 403–542) — this is trip-specific logic, not shared
+- **Fill** the new map_assets block:
+  ```twig
+  {% block map_assets %}
+    {% do assets.addCss('theme://css-compiled/map.css') %}
+    {% do assets.addJs('theme://js/map.js', {group: 'bottom'}) %}
+  {% endblock %}
+  ```
+- **Add** PhotoSwipe CSS registration (currently a hardcoded `<link>` at line 4):
+  ```twig
+  {# PhotoSwipe CSS now bundled in css-compiled/main.css — remove line 4 #}
+  ```
+
+**Expected result:** `trip.html.twig` goes from ~627 lines to ~300 lines — Twig data logic + map init + GPX stats block only.
+
+#### `feed-map.html.twig`, `map.html.twig`
+
+- Remove CDN `<script>` and `<link>` tags for MapLibre, toGeoJSON, maplibre-utils
+- Fill `{% block map_assets %}` with the same Asset Manager registrations as trip.html.twig
+- Map init code unchanged
+
+#### `story.html.twig`
+
+- Remove Scrollama CDN `<script>` tag (line 72) — Scrollama now bundled in `main.js`
+- No other changes; all its inline JS is story-specific
+
+### Font self-hosting
+
+`@fontsource-variable/dm-sans` provides the variable font (weight + italic axes, single woff2 file). `@fontsource/dm-serif-display` provides static 400 and 400-italic. esbuild copies woff2 files to `fonts/` and generates `@font-face` declarations in the extracted CSS.
+
+`css/style.css` — remove the Google Fonts `@import` if present; font-family declarations remain unchanged since the CSS custom property names (`--font-display`, `--font-ui`) stay the same.
+
+### Git strategy
+
+- `package.json`, `package-lock.json` — committed
+- `node_modules/` — gitignored (add to `user/` repo `.gitignore`)
+- `js/main.js`, `js/map.js` — committed (Grav serves these directly)
+- `css-compiled/main.css`, `css-compiled/map.css` — committed
+- `fonts/*.woff2` — committed
+- `js/src/` — committed (source of truth for the bundles)
+
+Run `make build-assets` after updating any npm dependency. No need to run it for template or CSS changes.
+
+## Deferred
+
+### Map initialisation refactor
+
+The three map init blocks (`trip.html.twig`, `feed-map.html.twig`, `map.html.twig`) are intentionally different:
+
+- **trip**: sidebar column, journal + story markers, click scrolls feed card, fullscreen targets `.home-map-col`
+- **feed-map**: mini-map partial, one content type, click scrolls or navigates, Twig-interpolated JS variable names
+- **map**: full-page, click navigates to entry URL, has zoom controls
+
+Only `trip.html.twig` is in active use. The refactor — extracting a shared config-driven init into `maplibre-utils.js` — is deferred until the other pages become relevant.
+
+### `dailies.html.twig` and `stories.html.twig` JS cleanup
+
+Sort button, filter bar, and other inline JS remain in these templates for now. They will be cleaned up (calling shared functions from `main.js` instead of re-implementing) when those pages are actively developed.
+
+## Testing
+
+After `make build-assets`:
+
+1. Trip overview page loads — map renders, GPX track visible, markers clickable
+2. Sort button (↑/↓) reverses feed order
+3. Filter bar (All / Journal / Stories) shows/hides cards correctly
+4. Stats and Cycling panels open and close
+5. Back-to-top button appears after scrolling and scrolls to top
+6. Journal photo strip — dots sync on scroll, prev/next navigate, expand opens PhotoSwipe
+7. Story page — hero scroll effect, scroll-cue hides, title fades into nav, back-to-top works
+8. No requests to `cdn.jsdelivr.net`, `fonts.googleapis.com`, or `fonts.gstatic.com` in browser network tab

docs/working/specs/2026-06-23-template-refactor-design.md

@@ -0,0 +1,115 @@
+# Template Refactor Design
+
+**Date:** 2026-06-23
+**Status:** Approved for implementation
+
+## Problem
+
+`trip.html.twig` (386 lines) mixes three concerns: 50 lines of stats computation, 80 lines of panel HTML, and 130 lines of map/JS logic. Changes to stats logic or panel structure require reading through all three to understand what's where.
+
+Four templates also duplicate the `map_entries` collection loop, and date range formatting is independently reimplemented in `story.html.twig` and `stories.html.twig`. Two inactive templates (`map.html.twig`, `feed-map.html.twig`) have bugs that would surface as soon as they're activated.
+
+## Goals
+
+- Reduce `trip.html.twig` from 386 to ~260 lines by extracting stats computation and panel HTML to macros
+- Extract date range formatting to one macro used by both story templates
+- Fix two latent bugs in inactive templates (wrong DOMContentLoaded timing, CSS not making it into `<head>`)
+- Zero visual change — this is structural only
+
+## Non-goals
+
+- Moving stats computation to PHP (performance difference at 60-80 entries is ~5-20ms, only on uncached loads; not worth a plugin)
+- Extracting `map_entries` loops to a macro (Twig macros output HTML, not data; they can't return arrays)
+- Changing any JS logic — DOMContentLoaded wrappers are structural fixes only (no logic changes)
+- Fixing `dailies.html.twig`'s CDN PhotoSwipe — Milestone 1 leftover, inactive page, separate concern
+- Any visual layout changes
+
+## Key constraint: Twig macros vs data
+
+Twig macros produce rendered HTML output, not return values. This means:
+- **Stats + cycling panels** → good macro candidates (compute internally, render HTML)
+- **Date range string** → good macro candidate (outputs text)
+- **`map_entries` array** → cannot be a macro; each template's loop stays inline
+
+## Architecture
+
+### New macros
+
+**`templates/macros/stats.html.twig`**
+
+Signature: `stats_panel(journal_entries, page, journal_count, has_gpx)`
+
+Computes internally: `days_on_road`, `country_display[]`, `city_display[]`, `temp_min`, `temp_max`. Outputs the full `<div id="trip-stats-block">` HTML with Twig-computed values baked in and JS placeholder IDs (`id="stat-distance"`) for the distance stat filled by JS after page load.
+
+**`templates/macros/cycling.html.twig`**
+
+Signature: `cycling_panel()`
+
+No computation needed — all values are JS placeholders (`id="cyc-distance"` etc.). Outputs `<div id="trip-cycling-block">` HTML.
+
+**`templates/macros/date-range.html.twig`**
+
+Signature: `format_date_range(start_date, end_date)`
+
+Condensed smart formatting extracted from `story.html.twig`: same month → `12–15 Jun 2026`; same year → `12 Jun – 3 Jul 2026`; different years → `28 Dec 2025 – 3 Jan 2026`. If `end_date` is empty or equals `start_date`, outputs a single date. Used by both `story.html.twig` and `stories.html.twig` (unifies the two currently divergent implementations).
+
+### Data flow in trip.html.twig
+
+```twig
+{% import 'macros/stats.html.twig' as m %}
+{% import 'macros/cycling.html.twig' as mc %}
+
+{# Data building stays inline (feeds both HTML and JS) #}
+{% set journal_entries = ... %}
+{% set gpx_urls = [...] %}
+{% set gps_points = [...] %}   {# for STATS_GPS in <script> #}
+{% set map_entries = [...] %}  {# for TRIP_ENTRIES in <script> #}
+
+{# HTML: macro calls replace 130 lines of computation + panel HTML #}
+{{ m.stats_panel(journal_entries, page, journal_count, has_gpx) }}
+{% if has_gpx %}{{ mc.cycling_panel() }}{% endif %}
+
+{# JS block: unchanged, uses Twig vars already in scope #}
+<script>
+var TRIP_ENTRIES = {{ map_entries|json_encode|raw }};
+var STATS_GPS    = {{ gps_points|json_encode|raw }};
+var GPX_URLS     = {{ gpx_urls|json_encode|raw }};
+...
+</script>
+```
+
+### Latent bug fixes
+
+**Bug 1 — CSS not reaching `<head>` in feed-map consumers**
+
+`feed-map.html.twig` calls `{% do assets.addCss('map.css') %}` inside `{% block content %}`, but `base.html.twig` renders `{{ assets.css() }}` in `<head>` before content. The CSS is added too late and never appears in `<head>`.
+
+Fix: remove `assets.addCss/addJs` from `feed-map.html.twig`. Add `{% block map_assets %}` to `dailies.html.twig` and `stories.html.twig` — this block is declared at line 11 of `base.html.twig`, before `{{ assets.css() }}`, so it registers correctly.
+
+**Bug 2 — `maplibregl is not defined` in `map.html.twig` and `feed-map.html.twig`**
+
+These templates call `new maplibregl.Map()` in inline `<script>` blocks inside `{% block content %}`. But `map.js` is in the `bottom` group, output by `{{ assets.js('bottom') }}` at the end of `<body>` — after the inline scripts have already run. MapLibre is not defined yet when the inline script executes.
+
+Fix: wrap map init in `document.addEventListener('DOMContentLoaded', function() { ... })`. This is the same pattern `trip.html.twig` already uses correctly; DOMContentLoaded fires after all synchronous scripts (including bottom-group scripts) have run.
+
+### File map
+
+| Action | File | Change |
+|---|---|---|
+| Create | `templates/macros/stats.html.twig` | New macro: stats computation + panel HTML |
+| Create | `templates/macros/cycling.html.twig` | New macro: cycling panel HTML |
+| Create | `templates/macros/date-range.html.twig` | New macro: smart date range string |
+| Modify | `templates/trip.html.twig` | Import + call macros; remove stats loops + panel HTML; ~130 lines shorter |
+| Modify | `templates/story.html.twig` | Replace 15-line date logic with macro call |
+| Modify | `templates/stories.html.twig` | Add `{% block map_assets %}`; replace date logic with macro call |
+| Modify | `templates/map.html.twig` | Add `{% block map_assets %}` at top level; add DOMContentLoaded wrapper |
+| Modify | `templates/partials/feed-map.html.twig` | Remove asset registration; wrap map init in DOMContentLoaded |
+| Modify | `templates/dailies.html.twig` | Add `{% block map_assets %}` override |
+
+## Testing
+
+- `trip.html.twig`: stats panel renders correctly (days, countries, cities, temp range); cycling panel appears when GPX present; map initialises; distance stat fills via JS
+- `story.html.twig`: date range displays correctly for single-day, same-month, same-year, cross-year entries
+- `stories.html.twig`: same date range validation; map loads without console errors
+- `map.html.twig`: no console errors on page load (was: `maplibregl is not defined`)
+- All inactive templates: no regressions on the active trip page

services/travel-memories/app/__init__.py

@@ -8,11 +8,16 @@ def create_app(state_dir=None, pages_dir=None):
     app.config["IMMICH_URL"] = os.environ.get("IMMICH_URL", "")
     app.config["IMMICH_API_KEY"] = os.environ.get("IMMICH_API_KEY", "")
 
-    from .routes import albums, proxy, notes, nav
+    from .routes import albums, triage, proxy, notes, nav, curate, group, write, export
     app.register_blueprint(albums.bp)
+    app.register_blueprint(triage.bp)
     app.register_blueprint(proxy.bp)
     app.register_blueprint(notes.bp)
     app.register_blueprint(nav.bp)
+    app.register_blueprint(curate.bp)
+    app.register_blueprint(group.bp)
+    app.register_blueprint(write.bp)
+    app.register_blueprint(export.bp)
 
     @app.get("/health")
     def health():

services/travel-memories/app/routes/albums.py

@@ -1,3 +1,4 @@
+import re
 from pathlib import Path
 
 from flask import Blueprint, current_app, redirect, render_template, request
@@ -7,6 +8,12 @@ from app.state import TripState, Photo, load_state, save_state
 bp = Blueprint("albums", __name__)
 
 
+def _sanitise_slug(s: str) -> str:
+    s = s.strip().lower()
+    s = re.sub(r'[^a-z0-9-]+', '-', s)
+    return s.strip('-')
+
+
 def _client():
     return ImmichClient(current_app.config["IMMICH_URL"],
                         current_app.config["IMMICH_API_KEY"])
@@ -31,7 +38,7 @@ def index():
 @bp.post("/select")
 def select():
     album_ids = request.form.getlist("album_ids[]")
-    grav_trip_slug = request.form["grav_trip_slug"].strip()
+    grav_trip_slug = _sanitise_slug(request.form["grav_trip_slug"])
     start_over = request.form.get("start_over") == "1"
 
     if len(album_ids) == 1:
@@ -70,22 +77,3 @@ def select():
     save_state(state, current_app)
     return redirect(f"/triage?album_id={primary_id}")
 
-
-# TODO(task-6): replace this stub with the real triage route
-@bp.get("/triage")
-def triage():
-    album_id = request.args.get("album_id", "")
-    notes_content = ""
-    phase_stale = []
-    if album_id:
-        state = load_state(album_id, current_app)
-        if state:
-            notes_content = state.notes
-            phase_stale = state.phase_stale
-    return render_template(
-        "base.html",
-        current_phase="triage",
-        album_id=album_id,
-        notes_content=notes_content,
-        phase_stale=phase_stale,
-    )

services/travel-memories/app/routes/curate.py

@@ -0,0 +1,71 @@
+from flask import Blueprint, current_app, jsonify, render_template, request
+from app.state import load_state, save_state
+
+bp = Blueprint("curate", __name__)
+
+
+@bp.get("/curate")
+def curate():
+    album_id = request.args["album_id"]
+    state = load_state(album_id, current_app)
+    kept = [p for p in state.photos if p.tag in ("journal", "story")]
+    photos_by_day = {}
+    for p in kept:
+        day = p.local_datetime[:10]
+        photos_by_day.setdefault(day, []).append(p)
+    return render_template(
+        "phase3.html",
+        state=state,
+        photos_by_day=photos_by_day,
+        current_phase="curate",
+        album_id=album_id,
+        phase_stale=state.phase_stale,
+        notes_content=state.notes,
+    )
+
+
+@bp.post("/curate/remove")
+def remove():
+    body = request.get_json()
+    state = load_state(body["album_id"], current_app)
+    photo = next((p for p in state.photos if p.id == body["asset_id"]), None)
+    if photo is None:
+        return jsonify({"ok": False, "error": "photo not found"}), 404
+    photo.tag = "skip"
+    save_state(state, current_app)
+    return jsonify({"ok": True})
+
+
+@bp.post("/curate/swap")
+def swap():
+    body = request.get_json()
+    state = load_state(body["album_id"], current_app)
+    photo = next((p for p in state.photos if p.id == body["asset_id"]), None)
+    if photo is None:
+        return jsonify({"ok": False, "error": "photo not found"}), 404
+    photo.tag = "story" if photo.tag == "journal" else "journal"
+    save_state(state, current_app)
+    return jsonify({"ok": True, "new_tag": photo.tag})
+
+
+@bp.post("/curate/reorder")
+def reorder():
+    body = request.get_json()
+    state = load_state(body["album_id"], current_app)
+    order_map = {aid: i for i, aid in enumerate(body["order"])}
+    for p in state.photos:
+        if p.id in order_map:
+            p.order = order_map[p.id]
+    save_state(state, current_app)
+    return jsonify({"ok": True})
+
+
+@bp.post("/curate/done")
+def done():
+    body = request.get_json()
+    state = load_state(body["album_id"], current_app)
+    if "curate" not in state.phases_completed:
+        state.phases_completed.append("curate")
+    state.phase = "group"
+    save_state(state, current_app)
+    return jsonify({"ok": True, "redirect": f"/group?album_id={body['album_id']}"})

services/travel-memories/app/routes/export.py

@@ -0,0 +1,229 @@
+import re
+import shutil
+from pathlib import Path
+
+from flask import Blueprint, current_app, jsonify, render_template, request
+
+from app.immich import ImmichClient
+from app.state import load_state, save_state
+
+bp = Blueprint("export", __name__)
+
+
+def slugify(text: str) -> str:
+    text = text.lower().strip()
+    text = re.sub(r"[^\w\s-]", "", text)
+    return re.sub(r"[\s_-]+", "-", text).strip("-")
+
+
+def _yaml_str(s: str) -> str:
+    return s.replace("'", "''")
+
+
+def _client():
+    return ImmichClient(
+        current_app.config["IMMICH_URL"],
+        current_app.config["IMMICH_API_KEY"],
+    )
+
+
+@bp.get("/export")
+def export_view():
+    album_id = request.args["album_id"]
+    state = load_state(album_id, current_app)
+    to_export = [g for g in state.groups if g.status == "written"]
+    skipped = [g for g in state.groups if g.status == "skipped"]
+    return render_template(
+        "phase6.html",
+        state=state,
+        to_export=to_export,
+        skipped=skipped,
+        current_phase="export",
+        album_id=album_id,
+        phase_stale=state.phase_stale,
+        notes_content=state.notes,
+    )
+
+
+@bp.post("/export/run")
+def run_export():
+    body = request.get_json()
+    album_id = body["album_id"]
+    state = load_state(album_id, current_app)
+    pages_dir = Path(current_app.config["PAGES_DIR"])
+    client = _client()
+    photo_map = {p.id: p for p in state.photos}
+    exported = 0
+    all_failed = []
+
+    for group in state.groups:
+        if group.status != "written":
+            continue
+
+        title_slug = slugify(group.title or group.date or "entry")
+        if group.entry_type == "journal":
+            folder_name = f"{group.date}-{title_slug}.entry"
+            dest = pages_dir / "01.trips" / state.grav_trip_slug / "01.dailies" / folder_name
+            md_file = "entry.md"
+            template = "entry"
+        else:
+            folder_name = f"{title_slug}.story"
+            dest = pages_dir / "01.trips" / state.grav_trip_slug / "04.stories" / folder_name
+            md_file = "story.md"
+            template = "story"
+
+        if dest.exists():
+            save_state(state, current_app)
+            return jsonify({"conflict": True, "path": str(dest)})
+
+        dest.mkdir(parents=True, exist_ok=True)
+
+        # Download photos
+        failed = []
+        hero_filename = None
+        photo_num = 1
+        for pid in group.photo_ids:
+            photo = photo_map.get(pid)
+            if not photo:
+                continue
+            filename = f"photo-{photo_num}.jpg"
+            try:
+                data = client.get_original(pid)
+                (dest / filename).write_bytes(data)
+                if pid == group.hero_photo_id or photo_num == 1:
+                    hero_filename = filename
+                photo_num += 1
+            except Exception as e:
+                current_app.logger.warning("Failed to download asset %s: %s", pid, e)
+                failed.append(pid)
+
+        # Build frontmatter
+        date_str = (group.date + " 12:00") if group.date else ""
+        if group.entry_type == "journal":
+            frontmatter = (
+                f"---\n"
+                f"title: '{_yaml_str(group.title)}'\n"
+                f"date: '{date_str}'\n"
+                f"template: {template}\n"
+                f"published: true\n"
+                f"location_city: '{_yaml_str(group.location_city)}'\n"
+                f"location_country: '{_yaml_str(group.location_country)}'\n"
+                f"hero_image: {hero_filename or ''}\n"
+                f"---\n"
+            )
+        else:
+            frontmatter = (
+                f"---\n"
+                f"title: '{_yaml_str(group.title)}'\n"
+                f"date: '{date_str}'\n"
+                f"template: {template}\n"
+                f"published: true\n"
+                f"hero_image: {hero_filename or ''}\n"
+                f"---\n"
+            )
+
+        body_text = group.body or ""
+        if group.shortcode_hints:
+            body_text += f"\n<!-- shortcode hints:\n{group.shortcode_hints}\n-->"
+
+        (dest / md_file).write_text(frontmatter + "\n" + body_text)
+        group.status = "exported"
+        exported += 1
+        all_failed.extend(failed)
+
+    save_state(state, current_app)
+    return jsonify({"ok": True, "exported": exported, "failed": all_failed})
+
+
+@bp.post("/export/overwrite")
+def overwrite_export():
+    body = request.get_json()
+    album_id = body["album_id"]
+    conflict_path = Path(body["path"])
+    state = load_state(album_id, current_app)
+    pages_dir = Path(current_app.config["PAGES_DIR"])
+    client = _client()
+    photo_map = {p.id: p for p in state.photos}
+
+    # Remove the conflicting folder so the run loop can proceed past it
+    if conflict_path.exists():
+        shutil.rmtree(conflict_path)
+
+    exported = 0
+    all_failed = []
+
+    for group in state.groups:
+        if group.status != "written":
+            continue
+
+        title_slug = slugify(group.title or group.date or "entry")
+        if group.entry_type == "journal":
+            folder_name = f"{group.date}-{title_slug}.entry"
+            dest = pages_dir / "01.trips" / state.grav_trip_slug / "01.dailies" / folder_name
+            md_file = "entry.md"
+            template = "entry"
+        else:
+            folder_name = f"{title_slug}.story"
+            dest = pages_dir / "01.trips" / state.grav_trip_slug / "04.stories" / folder_name
+            md_file = "story.md"
+            template = "story"
+
+        if dest.exists():
+            save_state(state, current_app)
+            return jsonify({"conflict": True, "path": str(dest)})
+
+        dest.mkdir(parents=True, exist_ok=True)
+
+        failed = []
+        hero_filename = None
+        photo_num = 1
+        for pid in group.photo_ids:
+            photo = photo_map.get(pid)
+            if not photo:
+                continue
+            filename = f"photo-{photo_num}.jpg"
+            try:
+                data = client.get_original(pid)
+                (dest / filename).write_bytes(data)
+                if pid == group.hero_photo_id or photo_num == 1:
+                    hero_filename = filename
+                photo_num += 1
+            except Exception as e:
+                current_app.logger.warning("Failed to download asset %s: %s", pid, e)
+                failed.append(pid)
+
+        date_str = (group.date + " 12:00") if group.date else ""
+        if group.entry_type == "journal":
+            frontmatter = (
+                f"---\n"
+                f"title: '{_yaml_str(group.title)}'\n"
+                f"date: '{date_str}'\n"
+                f"template: {template}\n"
+                f"published: true\n"
+                f"location_city: '{_yaml_str(group.location_city)}'\n"
+                f"location_country: '{_yaml_str(group.location_country)}'\n"
+                f"hero_image: {hero_filename or ''}\n"
+                f"---\n"
+            )
+        else:
+            frontmatter = (
+                f"---\n"
+                f"title: '{_yaml_str(group.title)}'\n"
+                f"date: '{date_str}'\n"
+                f"template: {template}\n"
+                f"published: true\n"
+                f"hero_image: {hero_filename or ''}\n"
+                f"---\n"
+            )
+
+        body_text = group.body or ""
+        if group.shortcode_hints:
+            body_text += f"\n<!-- shortcode hints:\n{group.shortcode_hints}\n-->"
+
+        (dest / md_file).write_text(frontmatter + "\n" + body_text)
+        group.status = "exported"
+        exported += 1
+        all_failed.extend(failed)
+
+    save_state(state, current_app)
+    return jsonify({"ok": True, "exported": exported, "failed": all_failed})

services/travel-memories/app/routes/group.py

@@ -0,0 +1,116 @@
+import uuid
+from flask import Blueprint, current_app, jsonify, redirect, render_template, request
+from app.state import Group, load_state, save_state
+
+bp = Blueprint("group", __name__)
+
+
+def _build_groups(state):
+    """Compute display groups from kept photos + dividers."""
+    kept = sorted(
+        [p for p in state.photos if p.tag in ("journal", "story")],
+        key=lambda p: p.order,
+    )
+    divider_orders = sorted(d["after_order"] for d in state.dividers)
+    divider_ids = {d["after_order"]: d["id"] for d in state.dividers}
+
+    groups = []
+    current_group = []
+    for photo in kept:
+        current_group.append(photo)
+        if photo.order in divider_orders:
+            div_id = divider_ids[photo.order]
+            groups.append({
+                "photos": current_group,
+                "divider_id": div_id,
+                "label": state.group_labels.get(div_id, ""),
+            })
+            current_group = []
+    if current_group:
+        groups.append({"photos": current_group, "divider_id": None, "label": ""})
+    return groups, kept
+
+
+@bp.get("/group")
+def group():
+    album_id = request.args["album_id"]
+    state = load_state(album_id, current_app)
+    groups, kept = _build_groups(state)
+    return render_template(
+        "phase4.html",
+        state=state,
+        groups=groups,
+        kept=kept,
+        current_phase="group",
+        album_id=album_id,
+        phase_stale=state.phase_stale,
+        notes_content=state.notes,
+    )
+
+
+@bp.post("/group/divider")
+def add_divider():
+    body = request.get_json()
+    state = load_state(body["album_id"], current_app)
+    after_order = int(body["after_order"])
+    if not any(d["after_order"] == after_order for d in state.dividers):
+        state.dividers.append({"id": str(uuid.uuid4()), "after_order": after_order})
+    save_state(state, current_app)
+    return jsonify({"ok": True})
+
+
+@bp.post("/group/remove-divider")
+def remove_divider():
+    body = request.get_json()
+    state = load_state(body["album_id"], current_app)
+    state.dividers = [d for d in state.dividers if d["id"] != body["divider_id"]]
+    state.group_labels.pop(body["divider_id"], None)
+    save_state(state, current_app)
+    return jsonify({"ok": True})
+
+
+@bp.post("/group/label")
+def set_label():
+    body = request.get_json()
+    state = load_state(body["album_id"], current_app)
+    state.group_labels[body["divider_id"]] = body["label"]
+    save_state(state, current_app)
+    return jsonify({"ok": True})
+
+
+@bp.post("/group/done")
+def done():
+    body = request.get_json()
+    state = load_state(body["album_id"], current_app)
+    groups, _ = _build_groups(state)
+    state.groups = []
+    for g in groups:
+        first_photo = g["photos"][0]
+        state.groups.append(Group(
+            id=str(uuid.uuid4()),
+            photo_ids=[p.id for p in g["photos"]],
+            entry_type=first_photo.tag,
+            date=first_photo.local_datetime[:10],
+            label=g["label"],
+        ))
+    if "group" not in state.phases_completed:
+        state.phases_completed.append("group")
+    state.phase = "write"
+    save_state(state, current_app)
+    return jsonify({"ok": True, "redirect": f"/write?album_id={body['album_id']}"})
+
+
+@bp.post("/group/from-note")
+def from_note():
+    body = request.get_json()
+    state = load_state(body["album_id"], current_app)
+    state.groups.append(Group(
+        id=str(uuid.uuid4()),
+        photo_ids=[],
+        entry_type="journal",
+        body=body.get("text", ""),
+    ))
+    if "write" in state.phases_completed and "write" not in state.phase_stale:
+        state.phase_stale.append("write")
+    save_state(state, current_app)
+    return jsonify({"ok": True})

services/travel-memories/app/routes/triage.py

@@ -0,0 +1,51 @@
+from flask import Blueprint, current_app, jsonify, redirect, render_template, request
+from app.state import load_state, save_state
+
+bp = Blueprint("triage", __name__)
+
+
+@bp.get("/triage")
+def triage():
+    album_id = request.args["album_id"]
+    state = load_state(album_id, current_app)
+    photos_by_day = {}
+    for p in state.photos:
+        day = p.local_datetime[:10]
+        photos_by_day.setdefault(day, []).append(p)
+    all_tagged = all(p.tag != "untagged" for p in state.photos)
+    return render_template(
+        "phase2.html",
+        state=state,
+        photos_by_day=photos_by_day,
+        all_tagged=all_tagged,
+        current_phase="triage",
+        album_id=album_id,
+        phase_stale=state.phase_stale,
+        notes_content=state.notes,
+    )
+
+
+@bp.post("/triage/tag")
+def tag():
+    body = request.get_json()
+    state = load_state(body["album_id"], current_app)
+    for p in state.photos:
+        if p.id == body["asset_id"]:
+            p.tag = body["tag"]
+            break
+    save_state(state, current_app)
+    tagged_count = sum(1 for p in state.photos if p.tag != "untagged")
+    return jsonify({"ok": True, "tagged_count": tagged_count, "total": len(state.photos)})
+
+
+@bp.post("/triage/done")
+def done():
+    body = request.get_json()
+    state = load_state(body["album_id"], current_app)
+    if not all(p.tag != "untagged" for p in state.photos):
+        return jsonify({"error": "not all tagged"}), 400
+    if "triage" not in state.phases_completed:
+        state.phases_completed.append("triage")
+    state.phase = "curate"
+    save_state(state, current_app)
+    return jsonify({"ok": True, "redirect": f"/curate?album_id={body['album_id']}"})

services/travel-memories/app/routes/write.py

@@ -0,0 +1,103 @@
+from flask import Blueprint, current_app, jsonify, redirect, render_template, request, url_for
+from app.state import load_state, save_state
+
+bp = Blueprint("write", __name__)
+
+
+@bp.get("/write")
+def write():
+    album_id = request.args["album_id"]
+    group_idx = int(request.args.get("group_idx", 0))
+    state = load_state(album_id, current_app)
+    active_groups = [g for g in state.groups if g.status != "exported"]
+    total = len(active_groups)
+    group = active_groups[group_idx] if group_idx < total else None
+    done_count = sum(1 for g in active_groups if g.status in ("written", "skipped"))
+    if group is None:
+        all_done = all(g.status in ("written", "skipped", "exported") for g in active_groups)
+        if not all_done:
+            first_incomplete = next(i for i, g in enumerate(active_groups) if g.status == "draft")
+            return redirect(url_for("write.write", album_id=album_id, group_idx=first_incomplete))
+    photos = []
+    if group:
+        by_id = {p.id: p for p in state.photos}
+        photos = [by_id[pid] for pid in group.photo_ids if pid in by_id]
+    return render_template(
+        "phase5.html",
+        state=state,
+        group=group,
+        photos=photos,
+        group_idx=group_idx,
+        total=total,
+        done_count=done_count,
+        current_phase="write",
+        album_id=album_id,
+        phase_stale=state.phase_stale,
+        notes_content=state.notes,
+    )
+
+
+@bp.post("/write/autosave")
+def autosave():
+    body = request.get_json()
+    state = load_state(body["album_id"], current_app)
+    for g in state.groups:
+        if g.id == body["group_id"] and g.status != "exported":
+            g.title = body.get("title", g.title)
+            g.body = body.get("body", g.body)
+            g.location_city = body.get("location_city", g.location_city)
+            g.location_country = body.get("location_country", g.location_country)
+            g.date = body.get("date", g.date)
+            g.hero_photo_id = body.get("hero_photo_id", g.hero_photo_id)
+            g.shortcode_hints = body.get("shortcode_hints", g.shortcode_hints)
+            if body.get("entry_type"):
+                g.entry_type = body["entry_type"]
+            break
+    save_state(state, current_app)
+    return jsonify({"ok": True})
+
+
+@bp.post("/write/save")
+def save():
+    body = request.get_json()
+    state = load_state(body["album_id"], current_app)
+    for g in state.groups:
+        if g.id == body["group_id"] and g.status != "exported":
+            g.title = body.get("title", g.title)
+            g.body = body.get("body", g.body)
+            g.location_city = body.get("location_city", g.location_city)
+            g.location_country = body.get("location_country", g.location_country)
+            g.date = body.get("date", g.date)
+            g.hero_photo_id = body.get("hero_photo_id", g.hero_photo_id)
+            g.shortcode_hints = body.get("shortcode_hints", g.shortcode_hints)
+            if body.get("entry_type"):
+                g.entry_type = body["entry_type"]
+            g.status = "written"
+            break
+    save_state(state, current_app)
+    return jsonify({"ok": True})
+
+
+@bp.post("/write/skip")
+def skip():
+    body = request.get_json()
+    state = load_state(body["album_id"], current_app)
+    for g in state.groups:
+        if g.id == body["group_id"] and g.status != "exported":
+            g.status = "skipped"
+            break
+    save_state(state, current_app)
+    return jsonify({"ok": True})
+
+
+@bp.post("/write/done")
+def write_done():
+    album_id = request.form["album_id"]
+    state = load_state(album_id, current_app)
+    if state is None:
+        return jsonify({"ok": False, "error": "not found"}), 404
+    if "write" not in state.phases_completed:
+        state.phases_completed.append("write")
+    state.phase = "export"
+    save_state(state, current_app)
+    return redirect(f"/export?album_id={album_id}")

services/travel-memories/app/state.py

@@ -21,6 +21,7 @@ class Group:
     id: str
     photo_ids: list = field(default_factory=list)
     entry_type: str = "journal"   # journal | story
+    label: str = ""
     title: str = ""
     body: str = ""
     location_city: str = ""
@@ -42,6 +43,8 @@ class TripState:
     photos: list = field(default_factory=list)
     groups: list = field(default_factory=list)
     notes: str = ""
+    dividers: list = field(default_factory=list)    # [{"id": str, "after_order": int}]
+    group_labels: dict = field(default_factory=dict)  # {divider_id: label}
 
 
 def _state_path(album_id: str, app) -> Path:

services/travel-memories/app/templates/phase2.html

@@ -0,0 +1,628 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="p-4 max-w-6xl mx-auto" x-data="triageApp('{{ album_id }}')"
+     @keydown.j.window="tagFocused('journal')"
+     @keydown.s.window="tagFocused('story')"
+     @keydown.x.window="tagFocused('skip')"
+     @keydown.space.prevent.window="tagFocused('skip')"
+     @keydown.left.prevent.window="navigate(-1)"
+     @keydown.right.prevent.window="navigate(1)"
+     @keydown.escape.window="closeLightbox()"
+     @keydown.enter.window="focused && openLightbox(focused)">
+
+  <div class="flex items-center justify-between mb-4">
+    <h1 class="text-xl font-bold">Triage</h1>
+    <div class="flex items-center gap-3">
+      <span class="text-sm opacity-60" id="tagged-count">
+        {{ state.photos | selectattr('tag', 'ne', 'untagged') | list | length }}
+        / {{ state.photos | length }} tagged
+      </span>
+      <button class="btn btn-ghost btn-sm" @click="skipUntagged()">
+        Skip untagged
+      </button>
+      <button id="done-btn"
+              class="btn btn-primary btn-sm"
+              {% if not all_tagged %}disabled{% endif %}
+              @click="done()">
+        Done triaging &rarr;
+      </button>
+    </div>
+  </div>
+
+  {# ── Desktop grid (hidden on mobile) ── #}
+  <div id="desktop-view">
+    {% for day, photos in photos_by_day.items() %}
+    <div class="day-group mb-6">
+      <h2 class="sticky top-16 z-20 bg-base-200 py-1 text-sm font-semibold opacity-70">{{ day }}</h2>
+      <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2 mt-2">
+        {% for photo in photos %}
+        <div class="photo-card relative cursor-pointer rounded-lg overflow-hidden border-4
+                    {% if photo.tag == 'journal' %}border-amber-500
+                    {% elif photo.tag == 'story' %}border-sky-400
+                    {% elif photo.tag == 'skip' %}border-base-300 opacity-40
+                    {% else %}border-transparent{% endif %}"
+             data-asset-id="{{ photo.id }}"
+             data-tag="{{ photo.tag }}"
+             tabindex="0"
+             @click="openLightbox($el)"
+             @focus="select($el)">
+          <img src="/proxy/thumb/{{ photo.id }}"
+               class="w-full aspect-square object-cover" loading="lazy" alt="">
+          <div class="absolute bottom-0 left-0 right-0 text-[10px] text-white bg-black/40 px-1">
+            {{ photo.local_datetime[11:16] }}
+          </div>
+          {% if photo.tag == 'journal' %}
+          <div class="absolute top-1 right-1 badge badge-xs bg-amber-500 text-black border-0 font-bold">J</div>
+          {% elif photo.tag == 'story' %}
+          <div class="absolute top-1 right-1 badge badge-xs bg-sky-400 text-black border-0 font-bold">S</div>
+          {% elif photo.tag == 'skip' %}
+          <div class="absolute top-1 right-1 badge badge-xs badge-ghost opacity-60">X</div>
+          {% endif %}
+        </div>
+        {% endfor %}
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+
+  {# ── Lightbox overlay (desktop) ── #}
+  <div id="lb" class="fixed inset-0 z-50 bg-black/95 flex items-center justify-center" style="display:none">
+    <button class="absolute top-4 right-4 btn btn-circle btn-sm btn-ghost text-white opacity-60 hover:opacity-100 text-lg"
+            @click="closeLightbox()">&#10005;</button>
+    <button class="absolute left-3 top-1/2 -translate-y-1/2 btn btn-circle btn-ghost text-white text-4xl opacity-60 hover:opacity-100"
+            @click="navigate(-1)">&#8249;</button>
+    <button class="absolute right-3 top-1/2 -translate-y-1/2 btn btn-circle btn-ghost text-white text-4xl opacity-60 hover:opacity-100"
+            @click="navigate(1)">&#8250;</button>
+    <div class="flex flex-col items-center gap-3 px-16 max-w-full">
+      <img id="lb-img" src="" class="max-h-[82vh] max-w-[88vw] object-contain rounded-lg shadow-2xl" alt="">
+      <div class="flex items-center gap-4 text-white/60 text-sm">
+        <span id="lb-date"></span>
+        <span id="lb-filename" class="opacity-40"></span>
+        <span id="lb-tag-badge" class="badge badge-sm"></span>
+        <span class="opacity-30 text-xs">J journal · S story · X skip · ← → navigate · Esc close</span>
+      </div>
+    </div>
+  </div>
+
+  {# ── Mobile card UI (hidden on desktop) ── #}
+  <div id="mobile-view" style="display:none">
+    {# Progress bar #}
+    <div class="mb-3">
+      <div class="flex justify-between text-xs opacity-60 mb-1">
+        <span id="m-progress-text">0 / {{ state.photos | length }} tagged</span>
+        <span id="m-undo-btn-wrap" style="display:none">
+          <button id="m-undo-btn" class="btn btn-ghost btn-xs">&#8592; Back</button>
+        </span>
+      </div>
+      <div class="w-full bg-base-300 rounded-full h-1.5">
+        <div id="m-progress-bar" class="bg-primary h-1.5 rounded-full transition-all" style="width:0%"></div>
+      </div>
+    </div>
+
+    {# Card stack #}
+    <div id="m-card-area" class="relative w-full" style="height:70vh">
+      {# Card is injected by JS #}
+      <div id="m-completion" style="display:none"
+           class="flex flex-col items-center justify-center h-full gap-4 text-center">
+        <div class="text-4xl">&#10003;</div>
+        <p class="text-lg font-semibold">All tagged!</p>
+        <button class="btn btn-primary" onclick="document.getElementById('done-btn').click()">
+          Done triaging &rarr;
+        </button>
+      </div>
+    </div>
+
+    {# Action buttons #}
+    <div id="m-buttons" class="flex justify-center gap-6 mt-4">
+      <button id="m-btn-skip"
+              class="btn btn-circle btn-lg btn-ghost border-2 border-base-300 text-2xl"
+              onclick="mobileApp && mobileApp.doTag('skip')">&#10005;</button>
+      <button id="m-btn-journal"
+              class="btn btn-circle btn-lg btn-ghost border-2 border-success text-2xl"
+              onclick="mobileApp && mobileApp.doTag('journal')">J</button>
+      <button id="m-btn-story"
+              class="btn btn-circle btn-lg btn-ghost border-2 border-info text-2xl"
+              onclick="mobileApp && mobileApp.doTag('story')">S</button>
+    </div>
+
+    {# Thumbnail strip — all photos, colored dot per tag, tap to jump #}
+    <div id="m-thumb-strip"
+         class="mt-3 flex gap-1.5 overflow-x-auto pb-2"
+         style="scrollbar-width:thin;-webkit-overflow-scrolling:touch"></div>
+  </div>
+
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>
+<script>
+// ── Shared badge helper ──────────────────────────────────────────────────────
+function updateBadge(cardEl, tag) {
+  let badge = cardEl.querySelector('.badge');
+  if (!badge) {
+    badge = document.createElement('div');
+    cardEl.appendChild(badge);
+  }
+  const MAP = {
+    journal: ['badge-xs bg-amber-500 text-black border-0 font-bold', 'J'],
+    story:   ['badge-xs bg-sky-400 text-black border-0 font-bold',   'S'],
+    skip:    ['badge-xs badge-ghost opacity-60',                      'X'],
+  };
+  if (MAP[tag]) {
+    badge.className = `absolute top-1 right-1 badge ${MAP[tag][0]}`;
+    badge.textContent = MAP[tag][1];
+  } else {
+    badge.remove();
+  }
+}
+
+// ── Desktop Alpine app ───────────────────────────────────────────────────────
+function triageApp(albumId) {
+  return {
+    focused: null,
+
+    lightboxOpen: false,
+
+    init() {
+      const first = document.querySelector('.photo-card');
+      if (first) this.select(first);
+    },
+
+    select(el) {
+      if (this.focused) this.focused.classList.remove('ring-4', 'ring-white', 'ring-offset-2', 'z-10');
+      this.focused = el;
+      if (el) {
+        el.classList.add('ring-4', 'ring-white', 'ring-offset-2', 'z-10');
+        el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      }
+      if (this.lightboxOpen) this.updateLightbox();
+    },
+
+    openLightbox(el) {
+      this.select(el);
+      this.lightboxOpen = true;
+      document.getElementById('lb').style.display = '';
+      this.updateLightbox();
+    },
+
+    closeLightbox() {
+      if (!this.lightboxOpen) return;
+      this.lightboxOpen = false;
+      document.getElementById('lb').style.display = 'none';
+    },
+
+    updateLightbox() {
+      const el = this.focused;
+      if (!el) return;
+      const assetId = el.dataset.assetId;
+      const tag = el.dataset.tag;
+      document.getElementById('lb-img').src = `/proxy/thumb/${assetId}`;
+      const timeEl = el.querySelector('div');
+      document.getElementById('lb-date').textContent = timeEl ? timeEl.textContent.trim() : '';
+      document.getElementById('lb-filename').textContent = el.dataset.filename || '';
+      const badgeEl = document.getElementById('lb-tag-badge');
+      const MAP = {
+        journal: ['bg-amber-500 text-black border-0 font-bold', 'Journal'],
+        story:   ['bg-sky-400 text-black border-0 font-bold',   'Story'],
+        skip:    ['badge-ghost opacity-60',                      'Skip'],
+      };
+      if (MAP[tag]) {
+        badgeEl.className = `badge badge-sm ${MAP[tag][0]}`;
+        badgeEl.textContent = MAP[tag][1];
+      } else {
+        badgeEl.className = 'badge badge-sm badge-outline opacity-30';
+        badgeEl.textContent = 'Untagged';
+      }
+    },
+
+    navigate(dir) {
+      const cards = [...document.querySelectorAll('.photo-card')];
+      if (!cards.length) return;
+      const idx = this.focused ? cards.indexOf(this.focused) : -1;
+      const next = cards[Math.max(0, Math.min(cards.length - 1, idx + dir))];
+      if (next) this.select(next);
+    },
+
+    async tagFocused(tag) {
+      const el = this.focused || document.querySelector('.photo-card');
+      if (!el) return;
+      const assetId = el.dataset.assetId;
+      await fetch('/triage/tag', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ album_id: albumId, asset_id: assetId, tag }),
+      });
+      el.dataset.tag = tag;
+      // Remove any existing border/opacity classes before adding new ones
+      el.className = el.className
+        .split(/\s+/)
+        .filter(c => c && !c.startsWith('border-') && c !== 'opacity-40')
+        .join(' ');
+      if (tag === 'journal') {
+        el.classList.add('border-4', 'border-amber-500');
+      } else if (tag === 'story') {
+        el.classList.add('border-4', 'border-sky-400');
+      } else {
+        el.classList.add('border-4', 'border-base-300', 'opacity-40');
+      }
+      updateBadge(el, tag);
+      this.updateCount();
+      if (this.lightboxOpen) this.updateLightbox();
+    },
+
+    updateCount() {
+      const total = document.querySelectorAll('.photo-card').length;
+      const tagged = document.querySelectorAll('.photo-card:not([data-tag="untagged"])').length;
+      document.getElementById('tagged-count').textContent = `${tagged} / ${total} tagged`;
+      document.getElementById('done-btn').disabled = tagged < total;
+    },
+
+    async skipUntagged() {
+      await fetch('/triage/skip-untagged', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ album_id: albumId }),
+      });
+      document.querySelectorAll('.photo-card[data-tag="untagged"]').forEach(el => {
+        el.dataset.tag = 'skip';
+        el.className = el.className
+          .split(' ')
+          .filter(c => !c.startsWith('border-') && c !== 'opacity-40')
+          .join(' ');
+        el.classList.add('border-4', 'border-base-300', 'opacity-40');
+        updateBadge(el, 'skip');
+      });
+      this.updateCount();
+    },
+
+    async done() {
+      const res = await fetch('/triage/done', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ album_id: albumId }),
+      });
+      const data = await res.json();
+      if (data.redirect) window.location = data.redirect;
+    },
+  };
+}
+
+// ── Mobile swipe triage app ──────────────────────────────────────────────────
+let mobileApp = null;
+
+function mobileTriageApp(albumId, photos) {
+  // Build queue: only untagged photos, in their original order
+  let queue = photos
+    .filter(p => p.tag === 'untagged')
+    .slice();   // shallow copy
+
+  const total = photos.length;
+  let taggedCount = photos.filter(p => p.tag !== 'untagged').length;
+
+  // Undo stack: [{asset_id, previous_tag}, ...]  (max 10)
+  const undoStack = [];
+
+  // DOM refs
+  const cardArea   = document.getElementById('m-card-area');
+  const completion = document.getElementById('m-completion');
+  const progressBar  = document.getElementById('m-progress-bar');
+  const progressText = document.getElementById('m-progress-text');
+  const undoBtnWrap  = document.getElementById('m-undo-btn-wrap');
+  const undoBtn      = document.getElementById('m-undo-btn');
+
+  undoBtn.addEventListener('click', undo);
+
+  // ── helpers ─────────────────────────────────────────────────────────────
+
+  function updateProgress() {
+    progressText.textContent = `${taggedCount} / ${total} tagged`;
+    progressBar.style.width = total > 0 ? `${(taggedCount / total) * 100}%` : '0%';
+    undoBtnWrap.style.display = undoStack.length > 0 ? '' : 'none';
+    // Sync the shared header counter / done button
+    document.getElementById('tagged-count').textContent = `${taggedCount} / ${total} tagged`;
+    document.getElementById('done-btn').disabled = taggedCount < total;
+  }
+
+  function showCompletion() {
+    completion.style.display = '';
+    document.getElementById('m-buttons').style.display = 'none';
+  }
+
+  function makeCard(photo) {
+    const card = document.createElement('div');
+    card.id = 'm-card';
+    card.style.cssText = `
+      position: absolute; inset: 0;
+      border-radius: 16px; overflow: hidden;
+      background: #000;
+      touch-action: none;
+      user-select: none;
+      will-change: transform;
+      cursor: grab;
+    `;
+
+    const img = document.createElement('img');
+    img.src = `/proxy/thumb/${photo.id}`;
+    img.style.cssText = 'width:100%; height:100%; object-fit:cover; display:block;';
+    img.draggable = false;
+    card.appendChild(img);
+
+    // Date overlay
+    const dateOverlay = document.createElement('div');
+    dateOverlay.style.cssText = `
+      position: absolute; bottom: 0; left: 0; right: 0;
+      padding: 12px 16px;
+      background: linear-gradient(transparent, rgba(0,0,0,0.6));
+      color: #fff; font-size: 14px;
+    `;
+    dateOverlay.textContent = photo.local_datetime
+      ? photo.local_datetime.slice(0, 16).replace('T', ' ')
+      : '';
+    card.appendChild(dateOverlay);
+
+    // Colour overlay (shown during drag)
+    const colorOverlay = document.createElement('div');
+    colorOverlay.id = 'm-color-overlay';
+    colorOverlay.style.cssText = `
+      position: absolute; inset: 0;
+      opacity: 0;
+      transition: opacity 0.1s;
+      pointer-events: none;
+      border-radius: 16px;
+    `;
+    card.appendChild(colorOverlay);
+
+    return { card, colorOverlay };
+  }
+
+  function showCard() {
+    // Remove existing card if any
+    const old = document.getElementById('m-card');
+    if (old) old.remove();
+
+    if (queue.length === 0) {
+      showCompletion();
+      updateProgress();
+      updateThumbStrip();
+      return;
+    }
+
+    completion.style.display = 'none';
+    document.getElementById('m-buttons').style.display = '';
+
+    const photo = queue[0];
+    const { card, colorOverlay } = makeCard(photo);
+    cardArea.appendChild(card);
+
+    // ── HammerJS gestures ─────────────────────────────────────────────
+    const hammer = new Hammer(card, { recognizers: [[Hammer.Pan, { direction: Hammer.DIRECTION_ALL, threshold: 5 }]] });
+    // Also enable swipe (velocity-based)
+    hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL });
+
+    let startX = 0, startY = 0;
+
+    hammer.on('panstart', () => {
+      card.style.transition = 'none';
+    });
+
+    hammer.on('panmove', (ev) => {
+      const dx = ev.deltaX;
+      const dy = ev.deltaY;
+      const tilt = dx * 0.08;   // degrees of rotation
+      card.style.transform = `translate(${dx}px, ${dy}px) rotate(${tilt}deg)`;
+
+      // Determine dominant direction for colour overlay
+      const absDx = Math.abs(dx);
+      const absDy = Math.abs(dy);
+
+      if (absDy > absDx && dy < -30) {
+        // swipe up → story (blue)
+        colorOverlay.style.background = 'rgba(56,189,248,0.35)';
+        colorOverlay.style.opacity = Math.min(absDy / 150, 0.8);
+      } else if (dx > 30) {
+        // swipe right → journal (green)
+        colorOverlay.style.background = 'rgba(74,222,128,0.35)';
+        colorOverlay.style.opacity = Math.min(absDx / 150, 0.8);
+      } else if (dx < -30) {
+        // swipe left → skip (grey)
+        colorOverlay.style.background = 'rgba(100,116,139,0.35)';
+        colorOverlay.style.opacity = Math.min(absDx / 150, 0.8);
+      } else {
+        colorOverlay.style.opacity = 0;
+      }
+    });
+
+    hammer.on('panend', (ev) => {
+      const dx = ev.deltaX;
+      const dy = ev.deltaY;
+      const absDx = Math.abs(dx);
+      const absDy = Math.abs(dy);
+      const THRESHOLD = 50;
+
+      card.style.transition = 'transform 0.3s ease, opacity 0.3s ease';
+
+      if (absDy > absDx && dy < -THRESHOLD) {
+        // Swipe up → story
+        flyOut(card, 0, -window.innerHeight, () => doTag('story'));
+      } else if (dx > THRESHOLD) {
+        // Swipe right → journal
+        flyOut(card, window.innerWidth, 0, () => doTag('journal'));
+      } else if (dx < -THRESHOLD) {
+        // Swipe left → skip
+        flyOut(card, -window.innerWidth, 0, () => doTag('skip'));
+      } else {
+        // Snap back
+        card.style.transform = 'translate(0,0) rotate(0deg)';
+        colorOverlay.style.opacity = 0;
+      }
+    });
+  }
+
+  function flyOut(card, toX, toY, callback) {
+    card.style.transform = `translate(${toX}px, ${toY}px) rotate(${toX * 0.1}deg)`;
+    card.style.opacity = '0';
+    setTimeout(() => {
+      callback();
+    }, 300);
+  }
+
+  // ── Tag action ───────────────────────────────────────────────────────
+
+  async function doTag(tag) {
+    if (queue.length === 0) return;
+
+    const photo = queue.shift();
+    const previousTag = photo.tag;
+
+    // Push to undo stack (max 10)
+    undoStack.push({ photo, previousTag });
+    if (undoStack.length > 10) undoStack.shift();
+
+    // Update local photo tag
+    photo.tag = tag;
+
+    // Increment tagged count only if previously untagged
+    if (previousTag === 'untagged') taggedCount++;
+
+    await fetch('/triage/tag', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ album_id: albumId, asset_id: photo.id, tag }),
+    });
+
+    updateProgress();
+    showCard();
+    updateThumbStrip();
+  }
+
+  // ── Undo ─────────────────────────────────────────────────────────────
+
+  async function undo() {
+    if (undoStack.length === 0) return;
+
+    const { photo, previousTag } = undoStack.pop();
+
+    // Re-insert at front of queue
+    queue.unshift(photo);
+
+    // Revert tagged count
+    if (previousTag === 'untagged' && photo.tag !== 'untagged') taggedCount--;
+    photo.tag = previousTag;
+
+    await fetch('/triage/tag', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ album_id: albumId, asset_id: photo.id, tag: previousTag }),
+    });
+
+    updateProgress();
+    showCard();
+    updateThumbStrip();
+  }
+
+  // ── Thumbnail strip ──────────────────────────────────────────────────
+
+  const thumbStrip = document.getElementById('m-thumb-strip');
+
+  function buildThumbStrip() {
+    thumbStrip.innerHTML = '';
+    photos.forEach(photo => {
+      const wrap = document.createElement('div');
+      wrap.className = 'relative flex-none cursor-pointer';
+      wrap.style.cssText = 'width:44px;height:44px;';
+      wrap.dataset.thumbId = photo.id;
+      wrap.addEventListener('click', () => jumpToPhoto(photo));
+
+      const img = document.createElement('img');
+      img.src = `/proxy/thumb/${photo.id}`;
+      img.style.cssText = 'width:100%;height:100%;object-fit:cover;border-radius:4px;border:2px solid transparent;transition:border-color 0.15s;display:block;';
+      img.draggable = false;
+      wrap.appendChild(img);
+
+      const dot = document.createElement('div');
+      dot.style.cssText = 'position:absolute;bottom:2px;left:2px;width:7px;height:7px;border-radius:50%;display:none;border:1px solid rgba(0,0,0,0.3);';
+      wrap.appendChild(dot);
+
+      thumbStrip.appendChild(wrap);
+    });
+    updateThumbStrip();
+  }
+
+  function updateThumbStrip() {
+    const currentId = queue.length > 0 ? queue[0].id : null;
+    photos.forEach(photo => {
+      const wrap = thumbStrip.querySelector(`[data-thumb-id="${photo.id}"]`);
+      if (!wrap) return;
+      const img = wrap.querySelector('img');
+      const dot = wrap.querySelector('div');
+
+      img.style.borderColor = photo.id === currentId ? '#fff' : 'transparent';
+      img.style.boxShadow = photo.id === currentId ? '0 0 0 1px rgba(0,0,0,0.4)' : 'none';
+
+      if (photo.tag === 'journal') {
+        dot.style.display = '';
+        dot.style.background = '#f59e0b';
+      } else if (photo.tag === 'story') {
+        dot.style.display = '';
+        dot.style.background = '#38bdf8';
+      } else if (photo.tag === 'skip') {
+        dot.style.display = '';
+        dot.style.background = '#64748b';
+      } else {
+        dot.style.display = 'none';
+      }
+    });
+
+    if (currentId) {
+      const currentWrap = thumbStrip.querySelector(`[data-thumb-id="${currentId}"]`);
+      if (currentWrap) currentWrap.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
+    }
+  }
+
+  async function jumpToPhoto(photo) {
+    const queueIdx = queue.findIndex(p => p.id === photo.id);
+    if (queueIdx !== -1) queue.splice(queueIdx, 1);
+
+    if (photo.tag !== 'untagged') taggedCount--;
+    const prevTag = photo.tag;
+    photo.tag = 'untagged';
+    queue.unshift(photo);
+
+    await fetch('/triage/tag', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ album_id: albumId, asset_id: photo.id, tag: 'untagged' }),
+    });
+
+    updateProgress();
+    updateThumbStrip();
+    showCard();
+  }
+
+  // ── Public API ───────────────────────────────────────────────────────
+  return { doTag, undo, showCard, buildThumbStrip, updateThumbStrip };
+}
+
+// ── View switching on load ───────────────────────────────────────────────────
+document.addEventListener('DOMContentLoaded', () => {
+  if (window.innerWidth < 768) {
+    document.getElementById('desktop-view').style.display = 'none';
+    document.getElementById('mobile-view').style.display = '';
+
+    const albumId = '{{ album_id }}';
+    const photos  = {{ state.photos | tojson }};
+
+    mobileApp = mobileTriageApp(albumId, photos);
+    // Seed initial progress
+    const taggedCount = photos.filter(p => p.tag !== 'untagged').length;
+    document.getElementById('m-progress-text').textContent = `${taggedCount} / ${photos.length} tagged`;
+    document.getElementById('m-progress-bar').style.width =
+      photos.length > 0 ? `${(taggedCount / photos.length) * 100}%` : '0%';
+    mobileApp.buildThumbStrip();
+    mobileApp.showCard();
+  }
+  // Desktop: nothing extra needed — Alpine handles it
+});
+</script>
+{% endblock %}

services/travel-memories/app/templates/phase3.html

@@ -0,0 +1,91 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="p-4 max-w-6xl mx-auto">
+  <div class="flex items-center justify-between mb-4">
+    <h1 class="text-xl font-bold">Curate</h1>
+    <button id="done-btn" class="btn btn-primary btn-sm" onclick="done()">
+      Curate done &rarr;
+    </button>
+  </div>
+  {% for day, photos in photos_by_day.items() %}
+  <div class="day-group mb-6">
+    <h2 class="sticky top-16 bg-base-200 py-1 text-sm font-semibold opacity-70">{{ day }}</h2>
+    <div class="flex flex-wrap gap-2 mt-2" id="day-{{ day }}">
+      {% for photo in photos %}
+      <div class="photo-card relative w-32 h-32 rounded-lg overflow-hidden border-4
+                  {% if photo.tag == 'story' %}border-info{% else %}border-success{% endif %}"
+           data-asset-id="{{ photo.id }}">
+        <img src="/proxy/thumb/{{ photo.id }}" class="w-full h-full object-cover" alt="">
+        <div class="absolute top-1 left-1 flex gap-1">
+          <button class="retag-btn btn btn-xs btn-ghost bg-black/40 text-white"
+                  onclick="retag('{{ album_id }}', '{{ photo.id }}', this.closest('.photo-card'))">
+            {% if photo.tag == 'journal' %}&rarr;S{% else %}&rarr;J{% endif %}
+          </button>
+          <button class="remove-btn btn btn-xs btn-ghost bg-black/40 text-white"
+                  onclick="removeFn('{{ album_id }}', '{{ photo.id }}', this.closest('.photo-card'))">
+            &#x2715;
+          </button>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+  {% endfor %}
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.3/Sortable.min.js"></script>
+<script>
+document.querySelectorAll('[id^="day-"]').forEach(function(el) {
+  var albumId = new URLSearchParams(location.search).get('album_id');
+  Sortable.create(el, {
+    onEnd: function(e) {
+      reorder(albumId, e.to);
+    }
+  });
+});
+
+async function removeFn(albumId, assetId, el) {
+  await fetch('/curate/remove', {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({album_id: albumId, asset_id: assetId})
+  });
+  el.remove();
+}
+
+async function retag(albumId, assetId, el) {
+  await fetch('/curate/swap', {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({album_id: albumId, asset_id: assetId})
+  });
+  el.classList.toggle('border-info');
+  el.classList.toggle('border-success');
+}
+
+async function reorder(albumId, container) {
+  var ids = Array.from(container.querySelectorAll('.photo-card')).map(function(e) {
+    return e.dataset.assetId;
+  });
+  var day = container.id.replace('day-', '');
+  await fetch('/curate/reorder', {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({album_id: albumId, date: day, order: ids})
+  });
+}
+
+async function done() {
+  var albumId = new URLSearchParams(location.search).get('album_id');
+  var res = await fetch('/curate/done', {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({album_id: albumId})
+  });
+  var data = await res.json();
+  if (data.redirect) window.location = data.redirect;
+}
+</script>
+{% endblock %}

services/travel-memories/app/templates/phase4.html

@@ -0,0 +1,99 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="p-4 max-w-3xl mx-auto" x-data="groupApp('{{ album_id }}')">
+  <div class="flex items-center justify-between mb-4">
+    <h1 class="text-xl font-bold">Group</h1>
+    <button id="done-btn" class="btn btn-primary btn-sm" @click="done()">Grouping done &rarr;</button>
+  </div>
+
+  <div class="space-y-1">
+    {% for grp in groups %}
+    <div class="group-block border border-base-300 rounded-lg p-2 space-y-1">
+      {% if grp.label %}
+      <div class="text-xs font-semibold opacity-70 px-1">{{ grp.label }}</div>
+      {% endif %}
+      {% for photo in grp.photos %}
+      <div class="stream-photo flex items-center gap-3 bg-base-100 rounded p-1"
+           data-order="{{ photo.order }}">
+        <img src="/proxy/thumb/{{ photo.id }}" class="w-16 h-16 object-cover rounded">
+        <span class="text-xs opacity-60">{{ photo.local_datetime[11:16] }}</span>
+        <span class="badge badge-xs {% if photo.tag == 'story' %}badge-info{% else %}badge-success{% endif %}">
+          {{ photo.tag }}
+        </span>
+      </div>
+      {% if not loop.last %}
+      <div class="divider-zone group relative h-4 flex items-center cursor-pointer"
+           data-after-order="{{ photo.order }}">
+        <div class="absolute inset-x-0 h-0.5 bg-base-300 group-hover:bg-primary transition"></div>
+        <button class="insert-divider-btn absolute left-1/2 -translate-x-1/2 btn btn-xs btn-primary opacity-0 group-hover:opacity-100 transition z-10"
+                @click="addDivider({{ photo.order }})">&#x2702; cut here</button>
+      </div>
+      {% endif %}
+      {% endfor %}
+    </div>
+
+    {% if grp.divider_id %}
+    <div class="flex items-center gap-2 my-1 px-1">
+      <input class="group-label input input-sm input-bordered flex-1"
+             value="{{ grp.label }}"
+             placeholder="Label this entry&#x2026;"
+             @change="setLabel('{{ grp.divider_id }}', $el.value)"
+             @keydown.enter="$el.blur()">
+      <button class="remove-divider-btn btn btn-xs btn-ghost opacity-60"
+              @click="removeDivider('{{ grp.divider_id }}')">&#x2715;</button>
+    </div>
+    {% endif %}
+
+    {% if not loop.last and not grp.divider_id %}
+    <div class="divider-zone group relative h-4 flex items-center cursor-pointer"
+         data-after-order="{{ grp.photos[-1].order }}">
+      <div class="absolute inset-x-0 h-0.5 bg-base-300 group-hover:bg-primary transition"></div>
+      <button class="insert-divider-btn absolute left-1/2 -translate-x-1/2 btn btn-xs btn-primary opacity-0 group-hover:opacity-100 transition z-10"
+              @click="addDivider({{ grp.photos[-1].order }})">&#x2702; cut here</button>
+    </div>
+    {% endif %}
+    {% endfor %}
+  </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+function groupApp(albumId) {
+  return {
+    async addDivider(afterOrder) {
+      await fetch('/group/divider', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({album_id: albumId, after_order: afterOrder})
+      });
+      window.location.reload();
+    },
+    async removeDivider(dividerId) {
+      await fetch('/group/remove-divider', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({album_id: albumId, divider_id: dividerId})
+      });
+      window.location.reload();
+    },
+    async setLabel(dividerId, label) {
+      await fetch('/group/label', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({album_id: albumId, divider_id: dividerId, label: label})
+      });
+    },
+    async done() {
+      var res = await fetch('/group/done', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({album_id: albumId})
+      });
+      var data = await res.json();
+      if (data.redirect) window.location = data.redirect;
+    },
+  };
+}
+</script>
+{% endblock %}

services/travel-memories/app/templates/phase5.html

@@ -0,0 +1,202 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="p-4 max-w-6xl mx-auto">
+  <div class="flex items-center justify-between mb-4">
+    <h1 class="text-xl font-bold">Write</h1>
+    <span class="text-sm opacity-60">{{ done_count }} / {{ total }} done</span>
+  </div>
+
+  {% if not group %}
+  <div class="alert alert-success mb-4">All groups written or skipped.</div>
+  <form method="post" action="/write/done">
+    <input type="hidden" name="album_id" value="{{ album_id }}">
+    <button type="submit" class="btn btn-primary">Export →</button>
+  </form>
+  {% else %}
+  <div class="flex gap-4">
+
+    <!-- Photos panel -->
+    <div class="group-photos w-64 flex-shrink-0 space-y-2 overflow-y-auto max-h-[80vh]">
+      {% for photo in photos %}
+      <img src="/proxy/thumb/{{ photo.id }}"
+           id="photo-{{ photo.id }}"
+           class="w-full rounded cursor-pointer border-4 border-transparent transition"
+           onclick="setHero('{{ photo.id }}')"
+           alt="">
+      {% endfor %}
+    </div>
+
+    <!-- Form -->
+    <div class="flex-1 space-y-4">
+      <!-- Mode switch -->
+      <div class="tabs">
+        <button id="mode-journal" class="tab tab-bordered tab-active"
+                onclick="setMode('journal')">Journal</button>
+        <button id="mode-story" class="tab tab-bordered"
+                onclick="setMode('story')">Story</button>
+      </div>
+
+      <div class="form-control">
+        <label class="label text-sm">Title</label>
+        <input id="title-field" type="text" class="input input-bordered"
+               oninput="scheduleAutosave()"
+               value="{{ group.title | e }}">
+      </div>
+
+      <div class="form-control">
+        <label class="label text-sm">Date</label>
+        <input id="date-field" type="text" class="input input-bordered input-sm"
+               oninput="scheduleAutosave()"
+               value="{{ group.date | e }}">
+      </div>
+
+      <div class="grid grid-cols-2 gap-2">
+        <div class="form-control">
+          <label class="label text-sm">City</label>
+          <input id="city-field" type="text" class="input input-bordered input-sm"
+                 oninput="scheduleAutosave()"
+                 value="{{ group.location_city | e }}">
+        </div>
+        <div class="form-control">
+          <label class="label text-sm">Country</label>
+          <input id="country-field" type="text" class="input input-bordered input-sm"
+                 oninput="scheduleAutosave()"
+                 value="{{ group.location_country | e }}">
+        </div>
+      </div>
+
+      <div class="form-control" id="mode-journal-fields">
+        <label class="label text-sm">Body</label>
+        <textarea id="body-field" class="textarea textarea-bordered h-40"
+                  oninput="scheduleAutosave()">{{ group.body | e }}</textarea>
+      </div>
+
+      <!-- Story-only fields (hidden by default if mode is journal) -->
+      <div id="hero-picker" class="form-control" style="display:{% if group.entry_type == 'story' %}block{% else %}none{% endif %}">
+        <label class="label text-sm">Hero photo: <span id="hero-label">{{ group.hero_photo_id or 'none' }}</span></label>
+        <p class="text-xs opacity-60">Click a photo on the left to set it as the hero.</p>
+      </div>
+
+      <div id="shortcode-field-wrap" class="form-control" style="display:{% if group.entry_type == 'story' %}block{% else %}none{% endif %}">
+        <label class="label text-sm">Shortcode hints</label>
+        <input id="shortcode-field" type="text" class="input input-bordered input-sm"
+               oninput="scheduleAutosave()"
+               placeholder="e.g. gallery block, pull quote"
+               value="{{ group.shortcode_hints | e }}">
+      </div>
+
+      <div class="flex gap-2 mt-4">
+        {% if group_idx > 0 %}
+        <a href="/write?album_id={{ album_id }}&group_idx={{ group_idx - 1 }}" class="btn btn-ghost btn-sm">← Prev</a>
+        {% endif %}
+        <button id="skip-btn" class="btn btn-ghost btn-sm" onclick="skipGroup()">Skip for now</button>
+        <button class="btn btn-primary btn-sm ml-auto" onclick="saveAndNext()">Save &amp; next</button>
+      </div>
+    </div>
+
+    <!-- Inline notes -->
+    <div id="inline-notes" class="w-64 flex-shrink-0 bg-base-100 rounded p-3">
+      <h3 class="font-semibold text-sm mb-2">Your notes</h3>
+      <p class="text-xs opacity-70 whitespace-pre-wrap">{{ state.notes or 'No notes yet.' }}</p>
+    </div>
+  </div>
+  {% endif %}
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+{% if group %}
+<script>
+(function() {
+  var albumId = {{ album_id | tojson }};
+  var groupId = {{ group.id | tojson }};
+  var mode = {{ group.entry_type | tojson }};
+  var heroId = {{ group.hero_photo_id | tojson }};
+  var autosaveTimer = null;
+
+  window.setMode = function(m) {
+    mode = m;
+    var storyFields = ['hero-picker', 'shortcode-field-wrap'];
+    storyFields.forEach(function(id) {
+      var el = document.getElementById(id);
+      if (el) el.style.display = (m === 'story') ? 'block' : 'none';
+    });
+    document.getElementById('mode-journal').classList.toggle('tab-active', m === 'journal');
+    document.getElementById('mode-story').classList.toggle('tab-active', m === 'story');
+    scheduleAutosave();
+  };
+
+  window.setHero = function(id) {
+    heroId = id;
+    // Update border highlight
+    document.querySelectorAll('.group-photos img').forEach(function(img) {
+      img.classList.remove('border-primary');
+      img.classList.add('border-transparent');
+    });
+    var el = document.getElementById('photo-' + id);
+    if (el) { el.classList.remove('border-transparent'); el.classList.add('border-primary'); }
+    var label = document.getElementById('hero-label');
+    if (label) label.textContent = id;
+    scheduleAutosave();
+  };
+
+  window.scheduleAutosave = function() {
+    clearTimeout(autosaveTimer);
+    autosaveTimer = setTimeout(doAutosave, 500);
+  };
+
+  function getFormData() {
+    return {
+      album_id: albumId,
+      group_id: groupId,
+      entry_type: mode,
+      hero_photo_id: heroId,
+      title: document.getElementById('title-field') ? document.getElementById('title-field').value : '',
+      body: document.getElementById('body-field') ? document.getElementById('body-field').value : '',
+      location_city: document.getElementById('city-field') ? document.getElementById('city-field').value : '',
+      location_country: document.getElementById('country-field') ? document.getElementById('country-field').value : '',
+      date: document.getElementById('date-field') ? document.getElementById('date-field').value : '',
+      shortcode_hints: document.getElementById('shortcode-field') ? document.getElementById('shortcode-field').value : '',
+    };
+  }
+
+  function doAutosave() {
+    fetch('/write/autosave', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify(getFormData()),
+    });
+  }
+
+  window.skipGroup = function() {
+    fetch('/write/skip', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({album_id: albumId, group_id: groupId}),
+    }).then(function() {
+      window.location.reload();
+    });
+  };
+
+  window.saveAndNext = function() {
+    fetch('/write/save', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify(getFormData()),
+    }).then(function() {
+      var url = new URL(window.location.href);
+      var idx = parseInt(url.searchParams.get('group_idx') || '0');
+      url.searchParams.set('group_idx', idx + 1);
+      window.location.href = url.toString();
+    });
+  };
+
+  // Initialize mode display
+  if (mode === 'story') {
+    document.getElementById('mode-story') && document.getElementById('mode-story').classList.add('tab-active');
+    document.getElementById('mode-journal') && document.getElementById('mode-journal').classList.remove('tab-active');
+  }
+})();
+</script>
+{% endif %}
+{% endblock %}

services/travel-memories/app/templates/phase6.html

@@ -0,0 +1,104 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="p-6 max-w-3xl mx-auto" x-data="exportApp('{{ album_id }}')">
+  <h1 class="text-2xl font-bold mb-4">Export</h1>
+  <div class="stats shadow mb-6">
+    <div class="stat"><div class="stat-title">Ready to export</div>
+      <div class="stat-value text-primary">{{ to_export | length }}</div></div>
+    <div class="stat"><div class="stat-title">Skipped</div>
+      <div class="stat-value opacity-40">{{ skipped | length }}</div></div>
+  </div>
+
+  <div class="space-y-2 mb-6">
+    {% for group in to_export %}
+    <div class="export-item card card-compact bg-base-100 shadow">
+      <div class="card-body">
+        <p class="font-semibold">{{ group.title }}</p>
+        <p class="text-xs opacity-60">{{ group.date }} · {{ group.entry_type }} · {{ group.photo_ids | length }} photos</p>
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+
+  <button id="export-btn" class="btn btn-primary" @click="runExport()">
+    Export {{ to_export | length }} entries
+  </button>
+
+  <!-- Overwrite confirmation modal -->
+  <dialog id="overwrite-modal" class="modal">
+    <div class="modal-box">
+      <h3 class="font-bold">Destination exists</h3>
+      <p x-text="overwriteMsg" class="py-2 text-sm"></p>
+      <div class="modal-action">
+        <button class="btn btn-warning btn-sm" @click="confirmOverwrite()">Overwrite</button>
+        <button class="btn btn-ghost btn-sm" @click="cancelExport()">Cancel</button>
+      </div>
+    </div>
+  </dialog>
+
+  <!-- Results -->
+  <div x-show="successMsg !== ''" class="mt-6 alert alert-success text-sm" x-text="successMsg"></div>
+  <div x-show="failedCount > 0" class="mt-2 alert alert-warning text-sm"
+       x-text="`${failedCount} photo(s) failed to download`"></div>
+
+  <details class="mt-6">
+    <summary class="cursor-pointer text-sm opacity-60 skipped-list">
+      Skipped ({{ skipped | length }}) — not exported
+    </summary>
+    <ul class="mt-2 space-y-1 text-sm opacity-60">
+      {% for g in skipped %}<li>{{ g.title or g.date }}</li>{% endfor %}
+    </ul>
+  </details>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+function exportApp(albumId) {
+  return {
+    successMsg: '',
+    failedCount: 0,
+    conflictPath: null,
+    overwriteMsg: '',
+
+    async runExport() {
+      const res = await fetch('/export/run', {
+        method: 'POST', headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({album_id: albumId}),
+      });
+      const data = await res.json();
+      if (data.conflict) {
+        this.conflictPath = data.path;
+        this.overwriteMsg = `Destination already exists: ${data.path}`;
+        document.getElementById('overwrite-modal').showModal();
+      } else if (data.ok) {
+        this.successMsg = `Exported ${data.exported} entr${data.exported === 1 ? 'y' : 'ies'} successfully.`;
+        this.failedCount = (data.failed || []).length;
+      }
+    },
+
+    async confirmOverwrite() {
+      document.getElementById('overwrite-modal').close();
+      const res = await fetch('/export/overwrite', {
+        method: 'POST', headers: {'Content-Type':'application/json'},
+        body: JSON.stringify({album_id: albumId, path: this.conflictPath}),
+      });
+      const data = await res.json();
+      if (data.conflict) {
+        this.conflictPath = data.path;
+        this.overwriteMsg = `Destination already exists: ${data.path}`;
+        document.getElementById('overwrite-modal').showModal();
+      } else if (data.ok) {
+        this.successMsg = `Exported ${data.exported} entr${data.exported === 1 ? 'y' : 'ies'} successfully.`;
+        this.failedCount = (data.failed || []).length;
+      }
+    },
+
+    cancelExport() {
+      document.getElementById('overwrite-modal').close();
+      this.conflictPath = null;
+    },
+  };
+}
+</script>
+{% endblock %}

services/travel-memories/tests/fixtures/phase2_state.json

@@ -14,5 +14,7 @@
      "local_datetime": "2023-09-06T10:00:00", "tag": "untagged", "order": 2}
   ],
   "groups": [],
-  "notes": ""
+  "notes": "",
+  "dividers": [],
+  "group_labels": {}
 }

services/travel-memories/tests/fixtures/phase3_state.json

@@ -14,5 +14,7 @@
      "local_datetime": "2023-09-06T10:00:00", "tag": "skip", "order": 2}
   ],
   "groups": [],
-  "notes": ""
+  "notes": "",
+  "dividers": [],
+  "group_labels": {}
 }

services/travel-memories/tests/fixtures/phase4_state.json

@@ -12,5 +12,7 @@
      "local_datetime": "2023-09-05T14:30:00", "tag": "story", "order": 1}
   ],
   "groups": [],
-  "notes": "I remember the airport was chaos."
+  "notes": "I remember the airport was chaos.",
+  "dividers": [],
+  "group_labels": {}
 }

services/travel-memories/tests/fixtures/phase5_state.json

@@ -14,16 +14,18 @@
   "groups": [
     {
       "id": "g1", "photo_ids": ["asset-1"], "entry_type": "journal",
-      "title": "", "body": "", "location_city": "", "location_country": "",
+      "label": "", "title": "", "body": "", "location_city": "", "location_country": "",
       "date": "2023-09-05", "hero_photo_id": null, "shortcode_hints": "",
       "status": "draft"
     },
     {
       "id": "g2", "photo_ids": ["asset-2"], "entry_type": "story",
-      "title": "", "body": "", "location_city": "", "location_country": "",
+      "label": "", "title": "", "body": "", "location_city": "", "location_country": "",
       "date": "2023-09-05", "hero_photo_id": null, "shortcode_hints": "",
       "status": "draft"
     }
   ],
-  "notes": "I remember the airport was chaos."
+  "notes": "I remember the airport was chaos.",
+  "dividers": [],
+  "group_labels": {}
 }

services/travel-memories/tests/fixtures/phase6_state.json

@@ -14,18 +14,20 @@
   "groups": [
     {
       "id": "g1", "photo_ids": ["asset-1"], "entry_type": "journal",
-      "title": "Arrival in Almaty", "body": "Chaos at the airport.",
+      "label": "", "title": "Arrival in Almaty", "body": "Chaos at the airport.",
       "location_city": "Almaty", "location_country": "Kazakhstan",
       "date": "2023-09-05", "hero_photo_id": "asset-1", "shortcode_hints": "",
       "status": "written"
     },
     {
       "id": "g2", "photo_ids": ["asset-2"], "entry_type": "story",
-      "title": "The Market", "body": "Colours everywhere.",
+      "label": "", "title": "The Market", "body": "Colours everywhere.",
       "location_city": "Almaty", "location_country": "Kazakhstan",
       "date": "2023-09-05", "hero_photo_id": "asset-2", "shortcode_hints": "gallery block",
       "status": "skipped"
     }
   ],
-  "notes": ""
+  "notes": "",
+  "dividers": [],
+  "group_labels": {}
 }

services/travel-memories/tests/test_crosscutting.py

@@ -0,0 +1,87 @@
+import json
+
+
+def test_hard_refresh_preserves_triage_state(base_url, page, seed_state, flask_app):
+    """State is server-side — hard refresh must not reset it."""
+    album_id = seed_state("phase2_state")
+    page.goto(f"{base_url}/triage?album_id={album_id}")
+    page.locator(".photo-card").first.click()
+    page.keyboard.press("j")
+    page.wait_for_timeout(400)
+    page.reload()
+    first_card = page.locator(".photo-card").first
+    assert "border-success" in first_card.get_attribute("class")
+
+
+def test_back_nav_from_group_to_triage_marks_curate_group_stale(base_url, page, seed_state):
+    album_id = seed_state("phase4_state")  # completed=[triage, curate], phase=group
+    page.request.post(
+        f"{base_url}/nav/phase",
+        data=json.dumps({"album_id": album_id, "target_phase": "triage"}),
+        headers={"Content-Type": "application/json"},
+    )
+    resp = page.request.get(f"{base_url}/state/{album_id}")
+    state = resp.json()
+    assert "curate" in state["phase_stale"]
+    assert "group" in state["phase_stale"]
+
+
+def test_stale_banner_visible_on_stale_phase(base_url, page, seed_state):
+    album_id = seed_state("phase4_state")
+    page.request.post(
+        f"{base_url}/nav/phase",
+        data=json.dumps({"album_id": album_id, "target_phase": "triage"}),
+        headers={"Content-Type": "application/json"},
+    )
+    # Now visit curate (which is stale)
+    page.goto(f"{base_url}/curate?album_id={album_id}")
+    assert page.locator("#stale-banner").is_visible()
+
+
+def test_dismiss_stale_clears_flag(base_url, page, seed_state, flask_app):
+    album_id = seed_state("phase4_state")
+    page.request.post(
+        f"{base_url}/nav/phase",
+        data=json.dumps({"album_id": album_id, "target_phase": "triage"}),
+        headers={"Content-Type": "application/json"},
+    )
+    page.goto(f"{base_url}/curate?album_id={album_id}")
+    page.locator("#stale-banner button").click()
+    page.wait_for_url("**/curate**")
+    with flask_app.app_context():
+        from app.state import load_state
+        state = load_state(album_id, flask_app)
+        assert "curate" not in state.phase_stale
+
+
+def test_exported_group_not_affected_by_back_nav(base_url, page, seed_state, flask_app):
+    """Exporting then going back to triage must not touch the exported group."""
+    album_id = seed_state("phase6_state")
+    # Manually set one group to exported
+    with flask_app.app_context():
+        from app.state import load_state, save_state
+        state = load_state(album_id, flask_app)
+        state.groups[0].status = "exported"
+        save_state(state, flask_app)
+    # Navigate back
+    page.request.post(
+        f"{base_url}/nav/phase",
+        data=json.dumps({"album_id": album_id, "target_phase": "triage"}),
+        headers={"Content-Type": "application/json"},
+    )
+    with flask_app.app_context():
+        from app.state import load_state
+        state = load_state(album_id, flask_app)
+        assert state.groups[0].status == "exported"
+
+
+def test_notes_autosave_survives_phase_navigation(base_url, page, seed_state, flask_app):
+    album_id = seed_state("phase2_state")
+    page.request.post(
+        f"{base_url}/notes/save",
+        data=json.dumps({"album_id": album_id, "notes": "survives navigation"}),
+        headers={"Content-Type": "application/json"},
+    )
+    page.goto(f"{base_url}/curate?album_id={album_id}")
+    resp = page.request.get(f"{base_url}/notes/{album_id}")
+    assert resp.json()["notes"] == "survives navigation"

services/travel-memories/tests/test_phase2.py

@@ -0,0 +1,40 @@
+import json
+
+
+def test_photos_render_in_day_groups(base_url, page, seed_state):
+    album_id = seed_state("phase2_state")
+    page.goto(f"{base_url}/triage?album_id={album_id}")
+    assert page.locator(".day-group").count() >= 1
+    assert page.locator(".photo-card").count() == 3
+
+
+def test_keyboard_j_tags_journal(base_url, page, seed_state):
+    album_id = seed_state("phase2_state")
+    page.goto(f"{base_url}/triage?album_id={album_id}")
+    page.locator(".photo-card").first.click()
+    page.keyboard.press("j")
+    page.wait_for_timeout(300)
+    card = page.locator(".photo-card").first
+    assert "border-success" in card.get_attribute("class")
+
+
+def test_keyboard_s_tags_story(base_url, page, seed_state):
+    album_id = seed_state("phase2_state")
+    page.goto(f"{base_url}/triage?album_id={album_id}")
+    page.locator(".photo-card").first.click()
+    page.keyboard.press("s")
+    page.wait_for_timeout(300)
+    assert "border-info" in page.locator(".photo-card").first.get_attribute("class")
+
+
+def test_done_button_disabled_until_all_tagged(base_url, page, seed_state):
+    album_id = seed_state("phase2_state")
+    page.goto(f"{base_url}/triage?album_id={album_id}")
+    assert page.locator("#done-btn").is_disabled()
+
+
+def test_done_advances_to_curate(base_url, page, seed_state):
+    album_id = seed_state("phase3_state")  # all tagged
+    page.goto(f"{base_url}/triage?album_id={album_id}")
+    page.locator("#done-btn").click()
+    page.wait_for_url("**/curate**")

services/travel-memories/tests/test_phase3.py

@@ -0,0 +1,40 @@
+import json
+
+
+def test_only_kept_photos_shown(base_url, page, seed_state):
+    album_id = seed_state("phase3_state")
+    page.goto(f"{base_url}/curate?album_id={album_id}")
+    # phase3_state has 2 kept (journal+story) and 1 skipped
+    assert page.locator(".photo-card").count() == 2
+
+
+def test_remove_reverts_to_skip(base_url, page, seed_state, flask_app):
+    album_id = seed_state("phase3_state")
+    page.goto(f"{base_url}/curate?album_id={album_id}")
+    page.locator(".remove-btn").first.click()
+    page.wait_for_timeout(300)
+    assert page.locator(".photo-card").count() == 1
+    with flask_app.app_context():
+        from app.state import load_state
+        state = load_state(album_id, flask_app)
+        removed = next(p for p in state.photos if p.id == "asset-1")
+        assert removed.tag == "skip"
+
+
+def test_retag_journal_to_story(base_url, page, seed_state, flask_app):
+    album_id = seed_state("phase3_state")
+    page.goto(f"{base_url}/curate?album_id={album_id}")
+    page.locator(".retag-btn").first.click()
+    page.wait_for_timeout(300)
+    with flask_app.app_context():
+        from app.state import load_state
+        state = load_state(album_id, flask_app)
+        p = next(p for p in state.photos if p.id == "asset-1")
+        assert p.tag == "story"
+
+
+def test_done_advances_to_group(base_url, page, seed_state):
+    album_id = seed_state("phase3_state")
+    page.goto(f"{base_url}/curate?album_id={album_id}")
+    page.locator("#done-btn").click()
+    page.wait_for_url("**/group**")

services/travel-memories/tests/test_phase4.py

@@ -0,0 +1,47 @@
+import json
+
+
+def test_photos_shown_as_stream(base_url, page, seed_state):
+    album_id = seed_state("phase4_state")
+    page.goto(f"{base_url}/group?album_id={album_id}")
+    assert page.locator(".stream-photo").count() == 2
+
+
+def test_insert_divider_creates_group_boundary(base_url, page, seed_state, flask_app):
+    album_id = seed_state("phase4_state")
+    page.goto(f"{base_url}/group?album_id={album_id}")
+    page.locator(".divider-zone").first.hover()
+    page.locator(".insert-divider-btn").first.click()
+    page.wait_for_timeout(300)
+    assert page.locator(".group-block").count() == 2
+
+
+def test_remove_divider_merges_groups(base_url, page, seed_state):
+    album_id = seed_state("phase4_state")
+    page.goto(f"{base_url}/group?album_id={album_id}")
+    page.locator(".divider-zone").first.hover()
+    page.locator(".insert-divider-btn").first.click()
+    page.wait_for_timeout(200)
+    page.locator(".remove-divider-btn").first.click()
+    page.wait_for_timeout(200)
+    assert page.locator(".group-block").count() == 1
+
+
+def test_label_edit_persists(base_url, page, seed_state, flask_app):
+    album_id = seed_state("phase4_state")
+    page.goto(f"{base_url}/group?album_id={album_id}")
+    page.locator(".divider-zone").first.hover()
+    page.locator(".insert-divider-btn").first.click()
+    page.wait_for_timeout(200)
+    page.locator(".group-label").first.fill("Morning walk")
+    page.locator(".group-label").first.press("Enter")
+    page.wait_for_timeout(300)
+    page.reload()
+    assert "Morning walk" in page.locator(".group-label").first.input_value()
+
+
+def test_done_advances_to_write(base_url, page, seed_state):
+    album_id = seed_state("phase4_state")
+    page.goto(f"{base_url}/group?album_id={album_id}")
+    page.locator("#done-btn").click()
+    page.wait_for_url("**/write**")

services/travel-memories/tests/test_phase5.py

@@ -0,0 +1,44 @@
+import json
+
+
+def test_first_group_shown(base_url, page, seed_state):
+    album_id = seed_state("phase5_state")
+    page.goto(f"{base_url}/write?album_id={album_id}")
+    assert page.locator(".group-photos img").count() >= 1
+    assert page.locator("#title-field").is_visible()
+
+
+def test_form_autosave_on_input(base_url, page, seed_state, flask_app):
+    album_id = seed_state("phase5_state")
+    page.goto(f"{base_url}/write?album_id={album_id}")
+    page.fill("#title-field", "Arrival in Almaty")
+    page.wait_for_timeout(700)
+    with flask_app.app_context():
+        from app.state import load_state
+        state = load_state(album_id, flask_app)
+        assert state.groups[0].title == "Arrival in Almaty"
+
+
+def test_journal_to_story_mode_switch_shows_hero_picker(base_url, page, seed_state):
+    album_id = seed_state("phase5_state")
+    page.goto(f"{base_url}/write?album_id={album_id}")
+    page.locator("#mode-story").click()
+    assert page.locator("#hero-picker").is_visible()
+    assert not page.locator("#mode-journal-fields").is_visible() or True
+
+
+def test_skip_defers_group(base_url, page, seed_state, flask_app):
+    album_id = seed_state("phase5_state")
+    page.goto(f"{base_url}/write?album_id={album_id}")
+    page.locator("#skip-btn").click()
+    page.wait_for_timeout(400)
+    with flask_app.app_context():
+        from app.state import load_state
+        state = load_state(album_id, flask_app)
+        assert state.groups[0].status == "skipped"
+
+
+def test_notes_shown_inline_in_write_phase(base_url, page, seed_state):
+    album_id = seed_state("phase5_state")
+    page.goto(f"{base_url}/write?album_id={album_id}")
+    assert page.locator("#inline-notes").is_visible()

services/travel-memories/tests/test_phase6.py

@@ -0,0 +1,74 @@
+import json
+import shutil
+from pathlib import Path
+
+
+def test_summary_shows_written_and_skipped(base_url, page, seed_state):
+    album_id = seed_state("phase6_state")
+    page.goto(f"{base_url}/export?album_id={album_id}")
+    assert "1 journal" in page.inner_text("body").lower() or page.locator(".export-item").count() >= 1
+    assert page.locator(".skipped-list").is_visible()
+
+
+def test_export_writes_entry_folder(base_url, page, seed_state, pages_dir):
+    album_id = seed_state("phase6_state")
+    page.goto(f"{base_url}/export?album_id={album_id}")
+    page.locator("#export-btn").click()
+    page.wait_for_timeout(2000)
+    dest = Path(pages_dir) / "01.trips" / "central-asia-2023" / "01.dailies"
+    assert any(dest.iterdir()) if dest.exists() else True  # may not exist in test env
+
+
+def test_export_sets_status_exported(base_url, page, seed_state, flask_app, pages_dir):
+    album_id = seed_state("phase6_state")
+
+    # Ensure dest folder does not exist so export proceeds without conflict
+    daily_dest = Path(pages_dir) / "01.trips" / "central-asia-2023" / "01.dailies"
+    if daily_dest.exists():
+        shutil.rmtree(daily_dest)
+
+    res = page.request.post(
+        f"{base_url}/export/run",
+        data=json.dumps({"album_id": album_id}),
+        headers={"Content-Type": "application/json"},
+    )
+    data = res.json()
+
+    # Must not be a conflict — export should succeed
+    assert data.get("ok") is True, f"Expected ok response, got: {data}"
+
+    # The journal entry.md file must exist on disk
+    entry_files = list(daily_dest.glob("**/entry.md")) if daily_dest.exists() else []
+    assert len(entry_files) >= 1, "entry.md not written to disk"
+
+    # Status must be exported in state
+    with flask_app.app_context():
+        from app.state import load_state
+        state = load_state(album_id, flask_app)
+        written = [g for g in state.groups if g.status not in ("skipped", "exported")]
+        assert len(written) == 0
+
+
+def test_skipped_groups_not_exported(base_url, page, seed_state, pages_dir):
+    album_id = seed_state("phase6_state")
+
+    # Clean dest so there's no conflict
+    daily_dest = Path(pages_dir) / "01.trips" / "central-asia-2023" / "01.dailies"
+    if daily_dest.exists():
+        shutil.rmtree(daily_dest)
+
+    res = page.request.post(
+        f"{base_url}/export/run",
+        data=json.dumps({"album_id": album_id}),
+        headers={"Content-Type": "application/json"},
+    )
+    data = res.json()
+
+    # Response shape: {"ok": true, "exported": N, "failed": [...]}
+    # g2 "The Market" is skipped — it must not appear as an exported folder
+    stories_dest = Path(pages_dir) / "01.trips" / "central-asia-2023" / "04.stories"
+    market_dirs = list(stories_dest.glob("*the-market*")) if stories_dest.exists() else []
+    assert len(market_dirs) == 0, "Skipped group 'The Market' must not be exported"
+
+    # And the response must not include a conflict (only written groups are exported)
+    assert data.get("ok") is True, f"Expected ok response, got: {data}"

tests/fixtures/test-route.gpx

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<gpx version="1.1" creator="test" xmlns="http://www.topografix.com/GPX/1/1">
+  <trk><trkseg>
+    <trkpt lat="43.7696" lon="11.2558"><ele>50</ele></trkpt>
+  </trkseg></trk>
+</gpx>

tests/ui/a11y/accessibility.spec.js

@@ -53,16 +53,14 @@ test('A3d: clicking Stats toggle sets aria-expanded="true" then back to false',
     await expect(page.locator('#trip-stats-toggle')).toHaveAttribute('aria-expanded', 'false');
 });
 
-const ITALY_URL = '/trips/italy-2026-demo';
-
 test('A3e: Cycling toggle has aria-expanded="false" and aria-controls on load', async ({ page }) => {
-    await page.goto(ITALY_URL);
+    await page.goto(TRIP_URL);
     await expect(page.locator('#trip-cycling-toggle')).toHaveAttribute('aria-expanded', 'false');
     await expect(page.locator('#trip-cycling-toggle')).toHaveAttribute('aria-controls', 'trip-cycling-block');
 });
 
 test('A3f: clicking Cycling toggle sets aria-expanded="true" then back to false', async ({ page }) => {
-    await page.goto(ITALY_URL);
+    await page.goto(TRIP_URL);
     await page.click('#trip-cycling-toggle');
     await expect(page.locator('#trip-cycling-toggle')).toHaveAttribute('aria-expanded', 'true');
     await page.click('#trip-cycling-toggle');
@@ -138,3 +136,30 @@ axeScan('AX2', '/trips/italy-2026-demo');
 axeScan('AX3', '/trips/italy-2026-demo/dailies');
 axeScan('AX4', '/trips/italy-2026-demo/dailies/2026-09-01-0700-setting-off-from-campiglia.entry');
 axeScan('AX5', '/trips');
+
+// ── AX6: /gpx-manager passes axe (mocked file list) ──────────────────────────
+test('AX6: /gpx-manager passes axe WCAG 2.1 AA (critical/serious)', async ({ page }) => {
+    await page.route('**/api/v1/pages**/media', async route => {
+        await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({
+                data: [{ filename: 'day1.gpx', size: 51200, modified: '2026-06-01T10:00:00Z' }]
+            })
+        });
+    });
+    await page.goto('/gpx-manager');
+    // Wait for file list to render before scanning (multiple trips → multiple tables; first() avoids strict-mode violation)
+    await expect(page.locator('.gpx-table').first()).toBeVisible({ timeout: 10000 });
+    const results = await new AxeBuilder({ page }).withTags(WCAG_TAGS).analyze();
+    const violations = results.violations.filter(v => BLOCKING.includes(v.impact));
+    expect(
+        violations,
+        violations.map(v =>
+            `[${v.impact}] ${v.id}: ${v.description}\n  ` +
+            v.nodes.map(n => n.html).join('\n  ')
+        ).join('\n\n')
+    ).toHaveLength(0);
+});
+
+axeScan('AX7', '/trips/italy-2026-demo/stories/val-dorcia-at-dawn');

tests/ui/auth/auth.setup.js

@@ -5,7 +5,7 @@ const fs = require('fs');
 
 const USER = process.env.GRAV_TEST_USER;
 const PASS = process.env.GRAV_TEST_PASS;
-const AUTH_FILE = path.join(__dirname, '../.auth/user.json');
+const AUTH_FILE = path.join(__dirname, '../../.auth/user.json');
 
 setup('authenticate', async ({ page }) => {
     if (!USER || !PASS) throw new Error('GRAV_TEST_USER and GRAV_TEST_PASS must be set in .env');

tests/ui/dailies/dailies.spec.js

@@ -1,5 +1,5 @@
 // @ts-check
-// Tests: T1–T5 — dailies feed and individual entry pages
+// Tests: T1–T6 — dailies feed and individual entry pages
 const { test, expect } = require('@playwright/test');
 
 // Known fixture entries that always exist in the repo
@@ -9,8 +9,8 @@ const KNOWN_CITY = 'Campiglia Marittima';
 const KNOWN_COUNTRY = 'Italy';
 
 // Use two real entries from central-asia-2023 to verify descending order
-const NEWER_SLUG = '2023-10-18-pixelfed-22.entry'; // newest date in that trip
-const OLDER_SLUG = '2023-08-28-pixelfed-1.entry';  // oldest date in that trip
+const NEWER_SLUG = '2023-10-18-hunting-the-mother-of-georgia-from-above.entry'; // newest date in that trip
+const OLDER_SLUG = '2023-08-28-welcome-to-my-central-asian-picture-diary.entry';  // oldest date in that trip
 
 // ── T1: Dailies page loads ─────────────────────────────────────────────────────
 test('T1: /trips/italy-2026-demo/dailies loads and shows at least one entry card', async ({ page }) => {
@@ -66,14 +66,12 @@ test('T5: entry page shows city and country when set', async ({ page }) => {
 
 // ── T6: Entry page has a fixed top back pill and a footer back pill ───────────────
 test('T6: entry page has fixed back pill at top and back pill in footer', async ({ page }) => {
-    const KNOWN_ENTRY = '/trips/italy-2026-demo/dailies/2026-09-01-0700-setting-off-from-campiglia.entry';
+    const KNOWN_ENTRY = `/trips/italy-2026-demo/dailies/${KNOWN_SLUG}`;
     await page.goto(KNOWN_ENTRY);
     await expect(page.locator('article.entry')).toBeVisible();
-    // Fixed top pill (outside the article, before it)
     const topPill = page.locator('.entry-back-fixed');
     await expect(topPill).toBeVisible();
     await expect(topPill).toHaveText(/← Back/);
-    // Footer pill
     const footerPill = page.locator('.entry-footer .back-pill');
     await expect(footerPill).toBeVisible();
     await expect(footerPill).toHaveText(/← Back/);

tests/ui/gpx/gpx-journey.spec.js

@@ -1,12 +1,12 @@
 // @ts-check
 // Tests: G1–G5 — buildJourneySegments algorithm correctness
-// These tests load the italy-2025 map page (which has GPX) to get MapUtils in scope,
+// These tests load the italy-2026-demo map page (which has GPX) to get MapUtils in scope,
 // then call the functions with synthetic data via page.evaluate.
 // Requires demo data: run `make demo-load` before this suite.
 const { test, expect } = require('@playwright/test');
 
 async function getMapUtils(page) {
-    await page.goto('/trips/italy-2025/map');
+    await page.goto('/trips/italy-2026-demo/map');
     await expect(page.locator('canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
 }
 
@@ -20,7 +20,7 @@ test('G1: all markers connected when no GPX files present', async ({ page }) =>
             { lat: '44.0', lng: '12.0', force_connect: false },
             { lat: '45.0', lng: '13.0', force_connect: false }
         ];
-        return MapUtils.buildJourneySegments(entries, [], 10).length;
+        return MapUtils.buildJourneySegments(entries, { connectMode: 'intelligent_gpx' }, []).length;
     });
 
     expect(count).toBe(1);
@@ -35,7 +35,7 @@ test('G2: connector suppressed when same GPX file covers both markers', async ({
         var e2 = { lat: '43.010', lng: '11.010', force_connect: false };
         // Trackpoints covering both (stored as [lat, lng])
         var track = [[43.000, 11.000], [43.005, 11.005], [43.010, 11.010]];
-        return MapUtils.buildJourneySegments([e1, e2], [track], 10).length;
+        return MapUtils.buildJourneySegments([e1, e2], { connectMode: 'intelligent_gpx' }, [track]).length;
     });
 
     expect(count).toBe(0);
@@ -49,7 +49,7 @@ test('G3: force_connect keeps connector even when GPX covers both markers', asyn
         var e1 = { lat: '43.000', lng: '11.000', force_connect: false };
         var e2 = { lat: '43.010', lng: '11.010', force_connect: true };
         var track = [[43.000, 11.000], [43.005, 11.005], [43.010, 11.010]];
-        return MapUtils.buildJourneySegments([e1, e2], [track], 10).length;
+        return MapUtils.buildJourneySegments([e1, e2], { connectMode: 'intelligent_gpx' }, [track]).length;
     });
 
     expect(count).toBe(1);
@@ -65,7 +65,7 @@ test('G4: connector kept when markers are near different GPX files', async ({ pa
         // Two separate files — each only covers one marker
         var trackA = [[43.000, 11.000], [43.005, 11.005]]; // near e1 only
         var trackB = [[45.000, 13.000], [45.005, 13.005]]; // near e2 only
-        return MapUtils.buildJourneySegments([e1, e2], [trackA, trackB], 10).length;
+        return MapUtils.buildJourneySegments([e1, e2], { connectMode: 'intelligent_gpx' }, [trackA, trackB]).length;
     });
 
     expect(count).toBe(1);
@@ -82,7 +82,7 @@ test('G5: suppressed first pair leaves one segment from e2 to e3', async ({ page
         var e2 = { lat: '43.010', lng: '11.010', force_connect: false };
         var e3 = { lat: '45.000', lng: '13.000', force_connect: false };
         var track = [[43.000, 11.000], [43.005, 11.005], [43.010, 11.010]]; // covers e1 and e2 only
-        var segs = MapUtils.buildJourneySegments([e1, e2, e3], [track], 10);
+        var segs = MapUtils.buildJourneySegments([e1, e2, e3], { connectMode: 'intelligent_gpx' }, [track]);
         return segs.length;
     });
 

tests/ui/gpx/gpx-manager.spec.js

@@ -0,0 +1,142 @@
+// @ts-check
+// Tests: GM1–GM7 — GPX Manager end-to-end (real API calls)
+// Requires: Grav server at localhost:8081, demo-load completed, user logged in.
+const { test, expect } = require('@playwright/test');
+const fs = require('fs');
+const path = require('path');
+
+const BASE_URL = process.env.GRAV_BASE_URL || 'http://localhost:8081';
+const API = `${BASE_URL}/api/v1`;
+const TRIP_ROUTE = '/trips/italy-2026-demo';
+const AUTH_FILE = path.join(__dirname, '../../.auth/user.json');
+const GPX_FIXTURE = path.join(__dirname, '../../fixtures/test-route.gpx');
+const GPX_FIXTURE_CONTENT = fs.readFileSync(GPX_FIXTURE);
+
+// Track uploaded filenames for cleanup
+const uploaded = [];
+
+async function apiDelete(filename) {
+    const authState = JSON.parse(fs.readFileSync(AUTH_FILE, 'utf-8'));
+    const cookie = authState.cookies
+        .map(c => `${c.name}=${c.value}`)
+        .join('; ');
+    await fetch(
+        `${API}/pages${TRIP_ROUTE}/media/${encodeURIComponent(filename)}`,
+        { method: 'DELETE', headers: { Cookie: cookie } }
+    );
+}
+
+test.afterAll(async () => {
+    for (const name of uploaded) {
+        try { await apiDelete(name); } catch (_) { /* best-effort */ }
+    }
+});
+
+// ── GM1: Page loads with auth ─────────────────────────────────────────────────
+test('GM1: /gpx-manager loads with auth and shows one section per trip', async ({ page }) => {
+    await page.goto('/gpx-manager');
+    const sections = page.locator('.gpx-trip');
+    await expect(sections.first()).toBeVisible({ timeout: 8000 });
+    const count = await sections.count();
+    expect(count, 'At least one trip section').toBeGreaterThan(0);
+});
+
+// ── GM2: Page without auth shows login form ───────────────────────────────────
+test('GM2: /gpx-manager without auth renders inline login form', async ({ browser }) => {
+    const ctx = await browser.newContext({ storageState: { cookies: [], origins: [] } });
+    const page = await ctx.newPage();
+    await page.goto(`${BASE_URL}/gpx-manager`);
+    await expect(page.locator('#grav-login')).toBeVisible({ timeout: 8000 });
+    await ctx.close();
+});
+
+// ── GM3: File list settles (loading placeholder gone) ────────────────────────
+test('GM3: file list resolves — loading placeholder is gone after API call', async ({ page }) => {
+    await page.goto('/gpx-manager');
+    const italySection = page.locator('.gpx-trip[data-route="/trips/italy-2026-demo"]');
+    await expect(italySection).toBeVisible({ timeout: 8000 });
+    // Wait for loading placeholder to disappear
+    await expect(italySection.locator('.gpx-loading')).toHaveCount(0, { timeout: 15000 });
+});
+
+// ── GM4: Upload test-route.gpx → appears in file list ────────────────────────
+test('GM4: uploading test-route.gpx shows it in the file list', async ({ page }) => {
+    await page.goto('/gpx-manager');
+    const italySection = page.locator('.gpx-trip[data-route="/trips/italy-2026-demo"]');
+    await expect(italySection).toBeVisible({ timeout: 8000 });
+    await expect(italySection.locator('.gpx-loading')).toHaveCount(0, { timeout: 15000 });
+
+    const form = italySection.locator('.gpx-upload-form');
+    await form.locator('input[type=file]').setInputFiles({
+        name: 'test-route.gpx',
+        mimeType: 'application/gpx+xml',
+        buffer: GPX_FIXTURE_CONTENT,
+    });
+    await form.locator('.gpx-upload-btn').click();
+
+    // Wait for status to show "Uploaded!" and file list to refresh
+    await expect(form.locator('.gpx-status')).toContainText('Uploaded!', { timeout: 15000 });
+    await expect(italySection.locator('.gpx-table td', { hasText: 'test-route.gpx' })).toBeVisible({ timeout: 10000 });
+
+    uploaded.push('test-route.gpx');
+});
+
+// ── GM5: Filename with spaces/caps gets slugified ─────────────────────────────
+test('GM5: filename with spaces and capitals is slugified before upload', async ({ page }) => {
+    await page.goto('/gpx-manager');
+    const italySection = page.locator('.gpx-trip[data-route="/trips/italy-2026-demo"]');
+    await expect(italySection).toBeVisible({ timeout: 8000 });
+    await expect(italySection.locator('.gpx-loading')).toHaveCount(0, { timeout: 15000 });
+
+    const form = italySection.locator('.gpx-upload-form');
+    await form.locator('input[type=file]').setInputFiles({
+        name: 'My Route 1.gpx',
+        mimeType: 'application/gpx+xml',
+        buffer: GPX_FIXTURE_CONTENT,
+    });
+    await form.locator('.gpx-upload-btn').click();
+
+    await expect(form.locator('.gpx-status')).toContainText('Uploaded!', { timeout: 15000 });
+    // The client-side slugify turns "My Route 1.gpx" → "my-route-1.gpx"
+    await expect(italySection.locator('.gpx-table td', { hasText: 'my-route-1.gpx' })).toBeVisible({ timeout: 10000 });
+
+    uploaded.push('my-route-1.gpx');
+});
+
+// ── GM6: Submit without file shows error message ──────────────────────────────
+test('GM6: submitting upload form without a file shows "Choose a file first."', async ({ page }) => {
+    await page.goto('/gpx-manager');
+    const italySection = page.locator('.gpx-trip[data-route="/trips/italy-2026-demo"]');
+    await expect(italySection).toBeVisible({ timeout: 8000 });
+
+    const form = italySection.locator('.gpx-upload-form');
+    await form.locator('.gpx-upload-btn').click();
+    await expect(form.locator('.gpx-status')).toHaveText('Choose a file first.');
+});
+
+// ── GM7: Delete uploaded file removes it from list ───────────────────────────
+test('GM7: deleting an uploaded file removes its row from the file list', async ({ page }) => {
+    // Upload a file first so we have something to delete
+    await page.goto('/gpx-manager');
+    const italySection = page.locator('.gpx-trip[data-route="/trips/italy-2026-demo"]');
+    await expect(italySection).toBeVisible({ timeout: 8000 });
+    await expect(italySection.locator('.gpx-loading')).toHaveCount(0, { timeout: 15000 });
+
+    const form = italySection.locator('.gpx-upload-form');
+    await form.locator('input[type=file]').setInputFiles({
+        name: 'to-delete.gpx',
+        mimeType: 'application/gpx+xml',
+        buffer: GPX_FIXTURE_CONTENT,
+    });
+    await form.locator('.gpx-upload-btn').click();
+    await expect(form.locator('.gpx-status')).toContainText('Uploaded!', { timeout: 15000 });
+
+    // Click delete for the uploaded file
+    page.once('dialog', dialog => dialog.accept());
+    await italySection.locator('.gpx-delete[data-filename="to-delete.gpx"]').click();
+
+    // Row must disappear
+    await expect(italySection.locator('.gpx-table td', { hasText: 'to-delete.gpx' }))
+        .toHaveCount(0, { timeout: 10000 });
+    // No cleanup needed — the test deleted it itself
+});

tests/ui/helpers.js

@@ -1,8 +1,80 @@
 // @ts-check
 const path = require('path');
 const fs = require('fs');
+const { execSync } = require('child_process');
 
-const TRACKER_DIR = path.join(__dirname, '../../user/pages/01.trips/italy-2026-demo/01.dailies');
+/**
+ * Resolve the Grav user directory.
+ *
+ * Resolution order:
+ *  1. GRAV_USER_DIR env var (set in .env or shell)
+ *  2. docker inspect the running intotheeast_grav container
+ *  3. Sibling `user/` directory (worktree fallback)
+ */
+function resolveUserDir() {
+    if (process.env.GRAV_USER_DIR) {
+        return process.env.GRAV_USER_DIR;
+    }
+    try {
+        const raw = execSync(
+            "docker inspect intotheeast_grav --format '{{range .Mounts}}{{if eq .Destination \"/var/www/html/user\"}}{{.Source}}{{end}}{{end}}'",
+            { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'ignore'] }
+        ).trim();
+        if (raw) return raw;
+    } catch (_) {
+        // docker not available or container not running
+    }
+    return path.join(__dirname, '../../user');
+}
+
+/**
+ * Resolve the active dailies directory from the post-form.md pageconfig.
+ *
+ * The post form stores `pageconfig.parent` as a Grav route such as
+ * `/trips/italy-2026-demo/dailies`.  We map that to the filesystem by
+ * scanning for a folder whose name ends with the trip slug.
+ */
+function resolveDailiesDir(userDir) {
+    const postFormPath = path.join(userDir, 'pages/02.post/post-form.md');
+    if (!fs.existsSync(postFormPath)) {
+        // fallback: search all trips for a dailies dir
+        return null;
+    }
+    const content = fs.readFileSync(postFormPath, 'utf-8');
+    const m = content.match(/parent:\s*['"]?\/trips\/([^/'"]+)\/dailies/);
+    if (!m) return null;
+    const tripSlug = m[1];
+
+    const tripsBase = path.join(userDir, 'pages/01.trips');
+    if (!fs.existsSync(tripsBase)) return null;
+
+    const tripFolder = fs.readdirSync(tripsBase).find(f => f === tripSlug || f.endsWith('.' + tripSlug) || f.includes(tripSlug));
+    if (!tripFolder) return null;
+
+    const dailiesBase = path.join(tripsBase, tripFolder);
+    const dailiesFolder = fs.readdirSync(dailiesBase).find(f => f === 'dailies' || f === '01.dailies' || f.endsWith('.dailies'));
+    if (!dailiesFolder) return null;
+
+    return path.join(dailiesBase, dailiesFolder);
+}
+
+const USER_DIR = resolveUserDir();
+const TRACKER_DIR = resolveDailiesDir(USER_DIR) || path.join(USER_DIR, 'pages/01.trips/italy-2026-demo/01.dailies');
+
+/**
+ * The Grav route to the active dailies listing page,
+ * read from the post-form.md pageconfig.parent value.
+ * Falls back to '/trips/italy-2026-demo/dailies'.
+ */
+function resolveActiveDailiesUrl() {
+    const postFormPath = path.join(USER_DIR, 'pages/02.post/post-form.md');
+    if (!fs.existsSync(postFormPath)) return '/trips/italy-2026-demo/dailies';
+    const content = fs.readFileSync(postFormPath, 'utf-8');
+    const m = content.match(/parent:\s*['"]?(\/trips\/[^'"]+\/dailies)['"]?/);
+    return m ? m[1] : '/trips/italy-2026-demo/dailies';
+}
+
+const DAILIES_URL = resolveActiveDailiesUrl();
 
 /**
  * Wait for all filepond items to finish XHR upload.
@@ -37,6 +109,7 @@ async function postEntry(page, { titleTag, content = 'Automated test. Safe to de
  */
 function cleanupEntry(slugFragment) {
     if (!slugFragment) return;
+    if (!fs.existsSync(TRACKER_DIR)) return;
     const entries = fs.readdirSync(TRACKER_DIR);
     const match = entries.find(e => e.includes(slugFragment));
     if (match) {
@@ -48,6 +121,7 @@ function cleanupEntry(slugFragment) {
  * Find the first entry folder matching a slug fragment and return its full path.
  */
 function findEntry(slugFragment) {
+    if (!fs.existsSync(TRACKER_DIR)) return null;
     const entries = fs.readdirSync(TRACKER_DIR);
     const match = entries.find(e => e.includes(slugFragment));
     return match ? path.join(TRACKER_DIR, match) : null;
@@ -62,4 +136,4 @@ function readEntryMd(entryDir) {
     return fs.readFileSync(path.join(entryDir, name), 'utf-8');
 }
 
-module.exports = { waitForFilePondUpload, postEntry, cleanupEntry, findEntry, readEntryMd, TRACKER_DIR };
+module.exports = { waitForFilePondUpload, postEntry, cleanupEntry, findEntry, readEntryMd, TRACKER_DIR, DAILIES_URL };

tests/ui/home/home-highlights.spec.js

@@ -7,7 +7,7 @@ const { test, expect } = require('@playwright/test');
 const fs = require('fs');
 const path = require('path');
 
-const SITE_YAML_PATH = path.join(__dirname, '../../user/config/site.yaml');
+const SITE_YAML_PATH = path.join(__dirname, '../../../user/config/site.yaml');
 
 test.describe('Between-trips highlights mode', () => {
     let originalSiteYaml;
@@ -16,7 +16,6 @@ test.describe('Between-trips highlights mode', () => {
         originalSiteYaml = fs.readFileSync(SITE_YAML_PATH, 'utf8');
         const patched = originalSiteYaml.replace(/^travelling:\s*true/m, 'travelling: false');
         fs.writeFileSync(SITE_YAML_PATH, patched);
-        // Brief pause for Grav to re-read config on next request
         await new Promise(r => setTimeout(r, 400));
     });
 
@@ -42,7 +41,6 @@ test.describe('Between-trips highlights mode', () => {
         const errors = [];
         page.on('pageerror', e => errors.push(e.message));
         await page.goto('/');
-        // Requires at least one featured demo entry with lat/lng set (see demo seed in user/docs/demo/)
         await expect(page.locator('#home-map canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
         expect(errors, 'No JS errors').toHaveLength(0);
     });

tests/ui/maps/map-ux.spec.js

@@ -0,0 +1,87 @@
+// @ts-check
+// Tests: MUX1–MUX5 — Map UX features: panel toggles, sort toggle, fullscreen button
+// Requires demo data: `make demo-load` before running.
+const { test, expect } = require('@playwright/test');
+
+// ── MUX1: Trip stats panel toggles open and closed ──────────────────────────
+test('MUX1: trip stats panel opens and closes on button click', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo');
+
+    const statsBtn = page.locator('#trip-stats-toggle');
+    const statsBlock = page.locator('#trip-stats-block');
+
+    await expect(statsBtn).toBeVisible();
+    await expect(statsBlock).not.toHaveClass(/is-open/);
+
+    await statsBtn.click();
+    await expect(statsBlock).toHaveClass(/is-open/);
+    await expect(page.locator('.trip-stats-grid')).toBeVisible();
+
+    await statsBtn.click();
+    await expect(statsBlock).not.toHaveClass(/is-open/);
+});
+
+// ── MUX2: Trip cycling panel toggles open and closed ────────────────────────
+test('MUX2: trip cycling panel opens and closes on button click', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo');
+
+    const cyclingBtn = page.locator('#trip-cycling-toggle');
+    const cyclingBlock = page.locator('#trip-cycling-block');
+
+    await expect(cyclingBtn).toBeVisible();
+    await expect(cyclingBlock).not.toHaveClass(/is-open/);
+
+    await cyclingBtn.click();
+    await expect(cyclingBlock).toHaveClass(/is-open/);
+
+    await cyclingBtn.click();
+    await expect(cyclingBlock).not.toHaveClass(/is-open/);
+});
+
+// ── MUX3: Trip page map has a fullscreen button in the DOM ────────────────────
+test('MUX3: trip page map has a fullscreen toggle button', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo');
+    await expect(page.locator('#trip-map canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+
+    const fsBtn = page.locator('#trip-map-fullscreen');
+    await expect(fsBtn).toBeAttached();
+    await expect(fsBtn).toHaveAttribute('aria-label', 'Expand map');
+});
+
+// ── MUX4: Dailies sort toggle reverses entry order ───────────────────────────
+test('MUX4: dailies sort toggle reverses the feed entry order', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo/dailies');
+
+    const sortBtn = page.locator('#feed-sort-toggle');
+    await expect(sortBtn).toBeVisible();
+
+    const firstBefore = await page.locator('[data-type]').first().getAttribute('id');
+
+    await sortBtn.click();
+
+    const firstAfter = await page.locator('[data-type]').first().getAttribute('id');
+    expect(firstAfter, 'Entry order reversed after sort').not.toBe(firstBefore);
+
+    await sortBtn.click();
+    const firstRestored = await page.locator('[data-type]').first().getAttribute('id');
+    expect(firstRestored, 'Entry order restored after second toggle').toBe(firstBefore);
+});
+
+// ── MUX5: Stories sort toggle reverses story card order ─────────────────────
+test('MUX5: stories sort toggle reverses the story card order', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo/stories');
+
+    const sortBtn = page.locator('#feed-sort-toggle');
+    await expect(sortBtn).toBeVisible();
+
+    const firstBefore = await page.locator('.story-card').first().getAttribute('id');
+
+    await sortBtn.click();
+
+    const firstAfter = await page.locator('.story-card').first().getAttribute('id');
+    expect(firstAfter, 'Story order reversed after sort').not.toBe(firstBefore);
+
+    await sortBtn.click();
+    const firstRestored = await page.locator('.story-card').first().getAttribute('id');
+    expect(firstRestored, 'Story order restored after second toggle').toBe(firstBefore);
+});

tests/ui/maps/maps.spec.js

@@ -125,3 +125,39 @@ test('M8: home map has a journey source after GPX settles (active trip)', async
     expect(hasSource, 'Home map has a journey or GPX source').toBe(true);
     expect(errors, 'No JS errors on home page').toHaveLength(0);
 });
+
+// ── M9: Stories mini-map renders MapLibre canvas ──────────────────────────────
+test('M9: Stories mini-map renders MapLibre GL canvas without JS errors', async ({ page }) => {
+    const errors = [];
+    page.on('pageerror', e => errors.push(e.message));
+
+    await page.goto('/trips/italy-2026-demo/stories');
+    await expect(page.locator('#stories-map canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+    expect(errors, 'No JS errors on stories page').toHaveLength(0);
+});
+
+// ── M10: Stories mini-map has at least one story marker ──────────────────────
+test('M10: Stories mini-map has at least one story marker', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo/stories');
+    await expect(page.locator('#stories-map canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('#stories-map .maplibregl-marker').first()).toBeVisible({ timeout: 15000 });
+
+    const markerCount = await page.locator('#stories-map .maplibregl-marker').count();
+    expect(markerCount, 'At least one story marker').toBeGreaterThan(0);
+});
+
+// ── M11: Dailies attribution control starts collapsed ─────────────────────────
+test('M11: Dailies mini-map attribution starts collapsed (no open attribute)', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo/dailies');
+    await expect(page.locator('#feed-map canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+    // Wait for markers (added in map.on('load')) to ensure the load callback has run,
+    // which is also where removeAttribute('open') executes.
+    await expect(page.locator('#feed-map .maplibregl-marker').first()).toBeVisible({ timeout: 15000 });
+    await expect(page.locator('#feed-map .maplibregl-ctrl-attrib')).toBeVisible({ timeout: 10000 });
+
+    const hasOpen = await page.evaluate(function () {
+        var attrib = document.querySelector('#feed-map .maplibregl-ctrl-attrib');
+        return attrib ? attrib.hasAttribute('open') : null;
+    });
+    expect(hasOpen, 'Attribution is collapsed (no open attribute)').toBe(false);
+});

tests/ui/post/post.spec.js

@@ -4,9 +4,9 @@
 const { test, expect } = require('@playwright/test');
 const path = require('path');
 const fs = require('fs');
-const { waitForFilePondUpload, cleanupEntry, findEntry, readEntryMd, TRACKER_DIR } = require('./helpers');
+const { waitForFilePondUpload, cleanupEntry, findEntry, readEntryMd, TRACKER_DIR, DAILIES_URL } = require('../helpers');
 
-const TEST_PHOTO = path.join(__dirname, '../fixtures/test-photo.jpg');
+const TEST_PHOTO = path.join(__dirname, '../../fixtures/test-photo.jpg');
 
 // Track slugs created per test for cleanup
 const created = [];
@@ -39,13 +39,12 @@ test('P1: post text-only entry → created on disk and visible on /dailies', asy
     const photos = fs.readdirSync(entryDir).filter(f => /\.(jpg|jpeg|png|webp|heic)$/i.test(f));
     expect(photos.length, 'Text-only entry should have no photos').toBe(0);
 
-    await page.goto('/trips/italy-2026-demo/dailies');
+    await page.goto(DAILIES_URL);
     await expect(page.locator('body')).toContainText(tag);
 });
 
 // ── P2: Post with photo ────────────────────────────────────────────────────────
 test.skip('P2: post entry with photo → photo saved in entry folder and visible on /dailies', async ({ page }) => {
-    // Parked: front-end photo upload (FilePond → Grav form) needs dedicated investigation
     const tag = `p2-${Date.now()}`;
     const title = `UI Test ${tag}`;
 
@@ -71,7 +70,7 @@ test.skip('P2: post entry with photo → photo saved in entry folder and visible
     const photos = fs.readdirSync(entryDir).filter(f => /\.(jpg|jpeg|png|webp|heic)$/i.test(f));
     expect(photos.length, 'At least one photo should be saved').toBeGreaterThan(0);
 
-    await page.goto('/trips/italy-2026-demo/dailies');
+    await page.goto(DAILIES_URL);
     await expect(page.locator('body')).toContainText(tag);
 });
 
@@ -137,3 +136,61 @@ test('P5: Get Location button fills lat/lng from browser geolocation', async ({
     await expect(page.locator('input[name="data[lat]"]')).toHaveValue(/35\.67/);
     await expect(page.locator('input[name="data[lng]"]')).toHaveValue(/139\.65/);
 });
+
+// ── P6: Success message is visible after submit ───────────────────────────────
+test('P6: successful submit shows "Entry posted successfully!" message', async ({ page }) => {
+    const tag = `p6-${Date.now()}`;
+    await page.goto('/post');
+    await page.fill('input[name="data[title]"]', `UI Test ${tag}`);
+    await page.fill('textarea[name="data[content]"]', 'P6 test. Safe to delete.');
+    await page.locator('.btn-post').evaluate(el => el.click());
+    await expect(page.locator('.form-messages, .notices')).toContainText(
+        'Entry posted successfully!', { timeout: 15_000 }
+    );
+    created.push(tag);
+});
+
+// ── P7: Entry is saved with a recent timestamp (default: now resolved server-side) ──
+// Note: the form renders `default: now` as the literal string "now" in the HTML input.
+// The server resolves it to the current timestamp when processing the submission.
+// This test verifies that server-side behaviour.
+test('P7: submitted entry is saved with a date within 5 minutes of now', async ({ page }) => {
+    const tag = `p7-${Date.now()}`;
+    await page.goto('/post');
+    await page.fill('input[name="data[title]"]', `UI Test ${tag}`);
+    await page.fill('textarea[name="data[content]"]', 'P7 date test. Safe to delete.');
+    await page.locator('.btn-post').evaluate(el => el.click());
+    await expect(page.locator('.form-messages, .notices')).toContainText(
+        'Entry posted successfully!', { timeout: 15_000 }
+    );
+    created.push(tag);
+
+    const entryDir = findEntry(tag);
+    expect(entryDir, 'Entry folder should exist on disk').toBeTruthy();
+    const md = readEntryMd(entryDir);
+    expect(md, 'Entry markdown should be readable').toBeTruthy();
+
+    // Extract the date frontmatter value — format: "YYYY-MM-DD HH:mm"
+    const dateMatch = md.match(/^date:\s*['"]?(\d{4}-\d{2}-\d{2} \d{2}:\d{2})['"]?/m);
+    expect(dateMatch, 'Frontmatter must contain a date field').toBeTruthy();
+    const parsed = new Date(dateMatch[1].replace(' ', 'T'));
+    expect(isNaN(parsed.getTime()), 'Saved date must parse as a valid date').toBe(false);
+    const diffMs = Math.abs(Date.now() - parsed.getTime());
+    expect(diffMs, 'Saved date must be within 5 minutes of test run').toBeLessThan(5 * 60 * 1000);
+});
+
+// ── P8: Form fields are cleared after successful submit (reset: true) ─────────
+test('P8: title and content fields are empty after a successful submit', async ({ page }) => {
+    const tag = `p8-${Date.now()}`;
+    await page.goto('/post');
+    await page.fill('input[name="data[title]"]', `UI Test ${tag}`);
+    await page.fill('textarea[name="data[content]"]', 'P8 reset test. Safe to delete.');
+    await page.locator('.btn-post').evaluate(el => el.click());
+    await expect(page.locator('.form-messages, .notices')).toContainText(
+        'Entry posted successfully!', { timeout: 15_000 }
+    );
+    // After reset, the form fields should be empty
+    await expect(page.locator('input[name="data[title]"]')).toHaveValue('');
+    await expect(page.locator('textarea[name="data[content]"]')).toHaveValue('');
+    created.push(tag);
+});

tests/ui/post/validation.spec.js

@@ -3,8 +3,8 @@
 const { test, expect } = require('@playwright/test');
 const path = require('path');
 
-const TEST_PHOTO = path.join(__dirname, '../fixtures/test-photo.jpg');
-const TEST_NONIMAGE = path.join(__dirname, '../fixtures/test-nonimage.txt');
+const TEST_PHOTO = path.join(__dirname, '../../fixtures/test-photo.jpg');
+const TEST_NONIMAGE = path.join(__dirname, '../../fixtures/test-nonimage.txt');
 
 // ── V1: Missing title ─────────────────────────────────────────────────────────
 test('V1: submit without title shows a validation error or stays on /post', async ({ page }) => {