# 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.