A Photos/Videos Organiser With Preact

@testcase
def test_boots_into_titled_shell(page):
    """The Solid app loads from the import map and renders its title."""
    open_app(page)
    expect(heading(page)).to_have_text("Memories")
    print("  PASS: boots into titled shell")

import { render } from 'solid-js/web';
import html from 'solid-js/html';
import { createSignal, createResource, createMemo, createEffect, For, Index, Show, onMount, onCleanup } from 'solid-js';
import { client, getAuthNeeded, subscribeAuth } from '../shared/gql.js';

const IPFS = '';   // https://ipfs.konubinix.eu/p/... is on the same origin as the app
const [authNeeded, setAuthNeeded] = createSignal(getAuthNeeded());
subscribeAuth(setAuthNeeded);
const PV_CTX = { additionalTypenames: ['Photovideo'] };
async function gql(query, variables, ctx){
    const r = await (/^\s*mutation\b/.test(query)
        ? client.mutation(query, variables, ctx)
        : client.query(query, variables, ctx ?? { requestPolicy: 'network-only' })).toPromise();
    if(r.error) throw new Error(r.error.message);
    return r.data;
}

render(App, document.getElementById('app'));
document.body.setAttribute('data-app-ready', '1');
if('serviceWorker' in navigator) navigator.serviceWorker.register('sw.js').catch(() => {});

:root{ --bg:#1b1d2e; --fg:#e8e8f0; }
body{ background:var(--bg); color:var(--fg); font-family:system-ui,sans-serif; margin:0; padding:12px; }
h1{ font-size:18px; margin:0 0 12px; }

@testcase
def test_shows_auth_required_when_unauthorized(page):
    """A 401 from /graphql surfaces a clear 'authorization required' banner."""
    page.route("**/graphql", lambda route: route.fulfill(
        status=401, content_type="text/plain", body="Unauthorized"))
    open_app(page)
    expect(page.get_by_role("alert")).to_contain_text(re.compile("authoriz", re.I))
    print("  PASS: shows auth required when unauthorized")

<${Show} when=${() => authNeeded()}>
  <div class="authwall" role="alert">
    <strong>Authorization required.</strong>
    This device can't read your photos yet — open a fresh access link on it.
  </div>
<//>

.authwall{ background:#f9a826; color:#1b1d2e; padding:10px 14px; border-radius:8px;
           margin:0 0 12px; line-height:1.45; }
.authwall strong{ display:block; }

@testcase
def test_shows_thumbnails(page):
    """The grid fills with thumbnail images from the archive."""
    open_app(page)
    chip(page, "all").click()                        # the whole archive — not the (possibly empty) todo default
    # clicking "all" keeps the previous (todo) tiles until the heavy full-archive fetch
    # resolves, so *wait* for the wall to populate rather than reading an instant count —
    # which otherwise catches a single leftover todo tile, or the wall mid-load, and flakes.
    wait_until(page, lambda: tiles(page).count() > 10, timeout=15000)
    wait_until(page, lambda: "/ipfs/" in (thumb_imgs(page).first.get_attribute("src") or ""))
    print("  PASS: shows thumbnails")

@testcase
def test_thumbnail_shows_whole_image(page):
    """A grid thumbnail fits the whole image, never a cropped centre."""
    open_fixtures(page)
    img = thumb_imgs(page).first
    assert img.evaluate("el => getComputedStyle(el).objectFit") == "contain", \
        "thumbnail crops instead of fitting whole"
    print("  PASS: thumbnail shows whole image")

const SEARCH = `query(${PHOTO_FILTER_DECL}, $states:[State!], $cap:Int!){
  photovideosSample(${PHOTO_FILTER_ARGS}, states:$states, cap:$cap, first:8000){
    nodes{ ...PhotoCore state myrandom }
  }
  photovideosCount(${PHOTO_FILTER_ARGS}, states:$states)
}
${PHOTO_CORE}`;
// The server samples ~SAMPLE_CAP across the range, and only *drops* rows when the
// match count exceeds that cap. So "was it sampled?" is "did it return fewer rows
// than match?" — the honest trigger for the notice. Every node is shown (those
// without a thumbnail get a placeholder tile), so shown == returned. `first` sits
// well above the cap so GraphQL never truncates before the sampler does.
const fetchPhotos = async (key) => {
    const d = await gql(SEARCH, { ...photoVars(key), states: key.state === 'all' ? null : [key.state], cap: SAMPLE_CAP }, PV_CTX);
    const nodes = d?.photovideosSample?.nodes ?? [];
    const total = d?.photovideosCount ?? nodes.length;
    return { items: nodes, total, sampled: nodes.length < total };
};

import { parseQuery, segSpan, segAt, replaceSeg, dslSuggestions } from '../shared/dsl.js';
import { SAMPLE_CAP, photoVars, UPDATE_PHOTO, PHOTO_CORE, PHOTO_FILTER_DECL, PHOTO_FILTER_ARGS, LABEL_COMPLETIONS } from '../shared/data.js';

@testcase
def test_filter_by_owner(page):
    """An owner: token narrows the wall to one person's photos."""
    drop_fixtures()
    docs = [{"cid": "https://ipfs.konubinix.eu/p/zzown-k", "date": "2020-01-15T12:00:00Z", "mimetype": "image/jpeg",
             "thumbnailCid": "https://ipfs.konubinix.eu/p/zzown-k-t", "labels": "zzown", "state": "todo", "owner": "konubinix"},
            {"cid": "https://ipfs.konubinix.eu/p/zzown-a", "date": "2020-02-15T12:00:00Z", "mimetype": "image/jpeg",
             "thumbnailCid": "https://ipfs.konubinix.eu/p/zzown-a-t", "labels": "zzown", "state": "todo", "owner": "aylapomme"}]
    for d in docs: gql(CREATE, {"p": d})
    try:
        open_app(page); chip(page, "all").click()
        search_for(page, "zzown")
        expect(tiles(page)).to_have_count(2)                  # both owners shown
        search_for(page, "zzown; owner:konubinix")
        expect(tiles(page)).to_have_count(1)                  # narrowed to one
        expect(thumb_imgs(page).first).to_have_attribute("src", "https://ipfs.konubinix.eu/p/zzown-k-t")
        print("  PASS: filter by owner")
    finally:
        for d in docs:
            try: gql(DELETE, {"cid": d["cid"]})
            except Exception: pass

@testcase
def test_filter_by_month(page):
    """A month: token keeps that month across every year the window spans."""
    docs = [{"cid": "https://ipfs.konubinix.eu/p/zzmon-j19", "date": "2019-06-15T12:00:00Z", "mimetype": "image/jpeg",
             "thumbnailCid": "https://ipfs.konubinix.eu/p/zzmon-j19-t", "labels": "zzmon", "state": "todo", "owner": "konubinix"},
            {"cid": "https://ipfs.konubinix.eu/p/zzmon-j21", "date": "2021-06-10T12:00:00Z", "mimetype": "image/jpeg",
             "thumbnailCid": "https://ipfs.konubinix.eu/p/zzmon-j21-t", "labels": "zzmon", "state": "todo", "owner": "konubinix"},
            {"cid": "https://ipfs.konubinix.eu/p/zzmon-m20", "date": "2020-03-20T12:00:00Z", "mimetype": "image/jpeg",
             "thumbnailCid": "https://ipfs.konubinix.eu/p/zzmon-m20-t", "labels": "zzmon", "state": "todo", "owner": "konubinix"}]
    for d in docs: gql(CREATE, {"p": d})
    try:
        open_app(page); chip(page, "all").click()
        search_for(page, "zzmon")
        expect(tiles(page)).to_have_count(3)
        search_for(page, "zzmon; month:6")
        expect(tiles(page)).to_have_count(2)                  # both Junes, across years
        search_for(page, "zzmon; month:march")
        expect(tiles(page)).to_have_count(1)
        print("  PASS: filter by month")
    finally:
        for d in docs:
            try: gql(DELETE, {"cid": d["cid"]})
            except Exception: pass

@testcase
def test_filter_by_year(page):
    """A year: token narrows the wall to one calendar year."""
    docs = [{"cid": f"https://ipfs.konubinix.eu/p/zzyr-{y}", "date": f"{y}-06-15T12:00:00Z", "mimetype": "image/jpeg",
             "thumbnailCid": f"https://ipfs.konubinix.eu/p/zzyr-{y}-t", "labels": "zzyr", "state": "todo"} for y in (2019, 2020, 2021)]
    for d in docs: gql(DELETE, {"cid": d["cid"]}); gql(CREATE, {"p": d})
    try:
        open_app(page); chip(page, "all").click()
        search_for(page, "zzyr")
        expect(tiles(page)).to_have_count(3)
        search_for(page, "zzyr; year:2020")
        expect(tiles(page)).to_have_count(1)
        expect(thumb_imgs(page).first).to_have_attribute("src", "https://ipfs.konubinix.eu/p/zzyr-2020-t")
    finally:
        for d in docs:
            try: gql(DELETE, {"cid": d["cid"]})
            except Exception: pass
    print("  PASS: filter by year")

function App(){
    // the search box persists locally, so a reload (or the frame's reboot) restores
    // the same query — and thus the same frame show.
    const SEARCH_KEY = 'memories.search';
    const [search, setSearch] = createSignal(localStorage.getItem(SEARCH_KEY) || '');
    createEffect(() => localStorage.setItem(SEARCH_KEY, search()));
    const [searchFocus, setSearchFocus] = createSignal(false);
    // hiding the suggestions on blur is deferred (so a click on one lands first); refocusing
    // must cancel that pending hide, or the list blinks away ~150ms after you're back in.
    let searchBlurT;
    const [caret, setCaret] = createSignal(0);        // cursor position, so completion follows it
    // keyboard-driving the suggestion list (only one box is focused at a time, so a single
    // highlight is enough): the focused box's Suggest reports its items here and reads the
    // active index back. ↓ enters at the top and ↑ at the bottom — both cycle through the
    // -1 "none" slot so either key reaches the list and either escapes it. Enter applies the
    // highlighted word (or, with nothing highlighted, runs the box's own commit).
    const [sugItems, setSugItems] = createSignal([]);
    const [sugActive, setSugActive] = createSignal(-1);
    const reportSug = list => { setSugItems(list); setSugActive(-1); };   // a new list clears the highlight
    const sugNav = (e, commit) => {
        const n = sugItems().length;
        if(e.key === 'ArrowDown' && n){ e.preventDefault(); setSugActive(i => i >= n - 1 ? -1 : i + 1); }
        else if(e.key === 'ArrowUp' && n){ e.preventDefault(); setSugActive(i => i < 0 ? n - 1 : i - 1); }
        else if(e.key === 'Enter'){ e.preventDefault();
            commit(sugActive() >= 0 ? sugItems()[sugActive()] : null); setSugActive(-1); }
    };
    // apply a search suggestion to the caret's segment. A finished label gets a "; "
    // so the next one starts without typing the separator; a DSL token (since:, type:…)
    // keeps drilling. Either way the box stays open so you can keep going.
    const pickSearch = w => { const [s, e] = segSpan(search(), caret());
        const lead = (search().slice(s, e).match(/^\s*/) || [''])[0];
        const tail = w.includes(':') ? '' : '; ';
        const next = search().slice(0, s) + lead + w + tail + search().slice(e);
        setSearch(next); setCaret(s + lead.length + w.length + tail.length); setSearchFocus(true); };
    // the chip choice persists; the first-ever visit defaults to the triage view (todo)
    const STATE_KEY = 'memories.state';
    const [stateFilter, setStateFilter] = createSignal(localStorage.getItem(STATE_KEY) || 'todo');
    createEffect(() => localStorage.setItem(STATE_KEY, stateFilter()));
    // the last label applied (lightbox or batch), offered for one-tap reuse on the next
    // doc so labelling a run of photos doesn't mean retyping the same word each time.
    const [lastLabel, setLastLabel] = createSignal('');
    // thumbnail size is user-adjustable and persisted; past a threshold the tiles source
    // from web_cid so an enlarged image isn't a pixelated little thumbnail.
    const SIZE_KEY = 'memories.thumbSize';
    const [thumbSize, setThumbSize] = createSignal(+localStorage.getItem(SIZE_KEY) || 96);
    createEffect(() => localStorage.setItem(SIZE_KEY, thumbSize()));
    const bumpSize = d => setThumbSize(s => Math.max(80, Math.min(320, s + d * 40)));
    // Ctrl+wheel zooms the wall — the browser's own zoom gesture, turned on the tiles
    // (preventDefault so the page itself doesn't zoom). One step per burst via a short
    // cooldown, so a trackpad pinch doesn't rocket through the range; scroll up = bigger.
    let zoomAt = 0;
    const onGridWheel = e => {
        if(!e.ctrlKey) return;
        e.preventDefault();
        const now = performance.now();
        if(now - zoomAt < 120) return;
        zoomAt = now; bumpSize(e.deltaY < 0 ? 1 : -1);
    };
    // the fetch key excludes sort (a client-side reorder shouldn't re-query); compared
    // as a string so a sort-only change doesn't refetch the same sample.
    const queryStr = createMemo(() => { const p = parseQuery(search());
        return JSON.stringify({ search: p.search, since: p.since, until: p.until,
                                kinds: p.kinds, owners: p.owners, aday: p.aday, awin: p.awin,
                                month: p.month, mwin: p.mwin, state: stateFilter() }); });
    const [photos, { refetch }] = createResource(() => JSON.parse(queryStr()), fetchPhotos);
    const sortKey = createMemo(() => parseQuery(search()).sort);
    const total = () => photos()?.total ?? 0;          // how many actually match
    const items = createMemo(() => { const a = photos()?.items ?? [];   // shown docs, in wall order
        return sortKey() === 'random' ? [...a].sort((x, y) => (x.myrandom ?? 0) - (y.myrandom ?? 0)) : a; });
    const STATES = ['todo', 'next', 'done', 'delete'];
    // the picked set persists, so an accidental refresh mid-session doesn't drop the run
    const SEL_KEY = 'memories.selected';
    const [selected, setSelected] = createSignal(new Set(JSON.parse(localStorage.getItem(SEL_KEY) || '[]')));
    createEffect(() => localStorage.setItem(SEL_KEY, JSON.stringify([...selected()])));
    const [labelText, setLabelText] = createSignal('');
    const [labelFocus, setLabelFocus] = createSignal(false);
    const [anchor, setAnchor] = createSignal(null);
    const [rangeMode, setRangeMode] = createSignal(false);   // touch: extend on next tap
    const [allMatching, setAllMatching] = createSignal(false);   // act on the whole filter, not the sample
    const isSel = cid => selected().has(cid);
    const selCount = () => selected().size;
    const clearSel = () => { setSelected(new Set()); setRangeMode(false); setAllMatching(false); };
    const toggle = cid => { setAllMatching(false); setSelected(s => {
        const n = new Set(s); n.has(cid) ? n.delete(cid) : n.add(cid); return n;
    }); };

    // select-all toggles the whole shown wall on/off (it lives outside the selection
    // toolbar, which is hidden when nothing is selected).
    const shownCids = () => items().map(p => p.cid);
    const allSelected = () => { const a = shownCids(); return a.length > 0 && a.every(isSel); };
    const toggleAll = () => allSelected() ? clearSel() : setSelected(new Set(shownCids()));

    // select the whole contiguous run from the anchor to cid, in the wall's date order.
    const extendTo = cid => {
        const list = items().map(p => p.cid);
        const a = list.indexOf(anchor()), b = list.indexOf(cid);
        if(a < 0 || b < 0){ toggle(cid); setAnchor(cid); return; }
        const [lo, hi] = a < b ? [a, b] : [b, a];
        setSelected(s => { const n = new Set(s);
            for(let i = lo; i <= hi; i++) n.add(list[i]); return n; });
    };
    // plain click toggles one tile and moves the anchor. A range is extended either by
    // shift-click (desktop) or by arming the toolbar's range toggle then tapping the end
    // tile (touch — no modifier key). Either way it clears range mode afterwards.
    const onTileClick = (e, cid) => {
        setCursor(cid);   // a click plants the keyboard cursor, so the arrows carry on from here
        if((e.shiftKey || rangeMode()) && anchor() !== null){
            extendTo(cid); setRangeMode(false); return;
        }
        toggle(cid); setAnchor(cid);
    };

    // double-tap a tile to start a range — the fast touch gesture (the toolbar ↔ range toggle
    // is the explicit route). The tapped tile becomes the anchor and arms range mode, so the
    // next tap selects the run to it.
    const armRange = cid => {
        setSelected(s => { const n = new Set(s); n.add(cid); return n; });
        setAnchor(cid); setRangeMode(true);
    };

    // press-and-hold a tile to open it in the lightbox — the deliberate gesture asks for one
    // doc, full size. A move (a scroll) or an early release cancels the press; the press's own
    // click is swallowed so it doesn't fall through to a select once the modal is up.
    let lpTimer = null, lpFired = false, lpAt = null;
    const lpCancel = () => { clearTimeout(lpTimer); lpTimer = null; };
    const onTileDown = (e, photo) => {
        lpFired = false; lpAt = { x: e.clientX, y: e.clientY }; lpCancel();
        lpTimer = setTimeout(() => { lpFired = true; lpCancel(); openPhoto(photo); }, 500);
    };
    const onTileMove = e => { if(lpAt && Math.hypot(e.clientX - lpAt.x, e.clientY - lpAt.y) > 10) lpCancel(); };
    const onTileUp = () => lpCancel();
    const onTilePress = (e, cid) => { if(lpFired){ lpFired = false; return; } onTileClick(e, cid); };

    async function patchSelected(patchFor){
        const byCid = new Map(items().map(p => [p.cid, p]));
        for(const cid of selected())
            await gql(UPDATE_PHOTO, { cid, patch: patchFor(byCid.get(cid)) });
        clearSel();
        await refetch();
    }
    // labels are a ;-delimited list, so the same split parses both a doc's stored labels and
    // what's typed into an add-label box — typing "a; b" adds two labels in one go.
    const splitWords = s => (s || '').split(';').map(x => x.trim()).filter(Boolean);
    const splitLabels = p => splitWords(p.labels);

    // "all matching" applies to *every* doc the filter matches (server-side, beyond the
    // ~2000 sample), via the bulk functions, using the same query the wall is showing.
    const filterVars = () => ({ ...photoVars(parseQuery(search())),
                                states: stateFilter() === 'all' ? null : [stateFilter()] });
    const BULK = k => `mutation(${PHOTO_FILTER_DECL}, $states:[State!], $v:${k === 'SetState' ? 'State' : 'String'}!){
      photovideos${k}(input:{${PHOTO_FILTER_ARGS}, states:$states, ${k === 'SetState' ? 'toState' : 'label'}:$v}){ result } }`;
    async function applyBulk(kind, v){ await gql(BULK(kind), { ...filterVars(), v }, PV_CTX); clearSel(); await refetch(); }

    const addLabel = async () => {
        const words = splitWords(labelText()); if(!words.length) return;
        setLastLabel(words[words.length - 1]);
        if(allMatching()){ for(const w of words) await applyBulk('AddLabel', w); }
        else await patchSelected(p => { const cur = splitLabels(p);
            for(const w of words) if(!cur.includes(w)) cur.push(w); return { labels: cur.join('; ') }; });
        setLabelText('');
    };
    const removeLabel = async () => {
        const words = splitWords(labelText()); if(!words.length) return;
        if(allMatching()){ for(const w of words) await applyBulk('RemoveLabel', w); }
        else await patchSelected(p => ({ labels: splitLabels(p).filter(x => !words.includes(x)).join('; ') }));
        setLabelText('');
    };
    const setStateFor = st => allMatching() ? applyBulk('SetState', st)
                                            : patchSelected(() => ({ state: st }));

    // save the picked docs as files — one per doc, at a chosen resolution: the original
    // (=cid=), the downscaled =web_cid=, or the =thumbnail=. It acts on the explicit
    // selection (the shown, ticked docs), not "all matching" — there's no client-side list
    // of the whole filter to fetch. The browser asks once before saving several files.
    // the original's extension comes from the db mimetype (a cid carries none, and a missing
    // /ipfs/ object answers text/plain); a few common ones get a friendly extension, the rest
    // fall back to the mimetype subtype.
    const MIME_EXT = { 'image/jpeg': 'jpg', 'image/png': 'png', 'image/gif': 'gif',
                       'image/webp': 'webp', 'image/heic': 'heic', 'image/heif': 'heif',
                       'image/tiff': 'tiff', 'video/quicktime': 'mov', 'video/x-matroska': 'mkv',
                       'video/x-msvideo': 'avi' };
    const extOf = mt => MIME_EXT[mt] || (mt && mt.split('/')[1]) || '';
    function downloadSelection(res){
        const byCid = new Map(items().map(p => [p.cid, p]));
        for(const cid of selected()){
            const p = byCid.get(cid); if(!p) continue;
            const path = res === 'thumb' ? (p.thumbnailCid || p.cid)
                       : res === 'web' ? (p.webCid || p.cid) : p.cid;
            // the renditions are fixed formats (like the legacy slider): a thumbnail is a
            // JPEG, a video's web copy is an MP4 (an image's is a JPEG); only the original
            // keeps its true type from the db mimetype. Tag the resolution so one doc's
            // orig/web/thumb never collide in the download folder.
            const isVid = (p.mimetype || '').startsWith('video');
            const ext = res === 'thumb' ? 'jpg' : res === 'web' ? (isVid ? 'mp4' : 'jpg') : extOf(p.mimetype);
            const raw = p.filename || p.cid.split('/').pop() || 'download';
            const dot = raw.lastIndexOf('.'), base = dot > 0 ? raw.slice(0, dot) : raw;
            const a = document.createElement('a');
            a.href = IPFS + path;
            a.download = ext ? `${base}-${res}.${ext}` : `${base}-${res}`;
            document.body.appendChild(a); a.click(); a.remove();
        }
    }
    const [opened, setOpened] = createSignal(null);
    const [lbText, setLbText] = createSignal('');
    const [lbFocus, setLbFocus] = createSignal(false);
    const isVideo = p => (p?.mimetype || '').startsWith('video');
    const mediaSrc = p => IPFS + (p?.webCid || p?.thumbnailCid || '');
    // a video needs its web_cid to play; an image can fall back to its thumbnail
    const hasMedia = p => isVideo(p) ? !!p?.webCid : !!(p?.webCid || p?.thumbnailCid);
    const labelsOf = p => splitWords(p?.labels);
    const openPhoto = p => { history.pushState({ lb: p.cid }, ''); setOpened(p); };
    const closePhoto = () => { setOpened(null); setLbText(''); };
    const dismissPhoto = () => (history.state && history.state.lb) ? history.back() : closePhoto();

    async function applyLabels(labels){
        const cid = opened().cid;
        setOpened({ ...opened(), labels });          // optimistic — keep the modal correct
        await gql(UPDATE_PHOTO, { cid, patch: { labels } });
        await refetch();
    }
    const lbAdd = input => {
        const words = splitWords(input); if(!words.length) return;
        setLastLabel(words[words.length - 1]);
        const cur = labelsOf(opened());
        for(const w of words) if(!cur.includes(w)) cur.push(w);
        setLbText('');
        return applyLabels(cur.join('; '));
    };
    const lbRemove = w => applyLabels(labelsOf(opened()).filter(x => x !== w).join('; '));
    // the box's S-RET counterpart to lbAdd: strip every typed label from the open doc
    const lbDrop = input => { const words = splitWords(input); if(!words.length) return;
        setLbText(''); return applyLabels(labelsOf(opened()).filter(x => !words.includes(x)).join('; ')); };

    // change the open doc's state. Like the frame's frameEdit, the edit may push it out of
    // the current filter; if so re-anchor on the previous doc (else keep it; close if none).
    async function lbSetState(st){
        const list = items(), cur = opened(); if(!cur) return;
        const i = list.findIndex(p => p.cid === cur.cid);
        const prevCid = i > 0 ? list[i - 1].cid : null;
        await gql(UPDATE_PHOTO, { cid: cur.cid, patch: { state: st } });
        await refetch();
        requestAnimationFrame(() => {
            const l2 = items(); if(!l2.length){ dismissPhoto(); return; }
            const stay = l2.find(p => p.cid === cur.cid);
            setOpened(stay || (prevCid && l2.find(p => p.cid === prevCid)) || l2[0]);
        });
    }

    // step to the previous/next doc in the wall (date order), wrapping at the ends.
    const step = delta => {
        const list = items(); if(!list.length || !opened()) return;
        const i = list.findIndex(p => p.cid === opened().cid);
        setOpened(list[((i < 0 ? 0 : i) + delta + list.length) % list.length]); setLbText('');
    };
    // while a video is playing, an arrow seeks it ±5s; only at the end/start (or for a
    // paused video / a photo) does it give up and step to the next/previous doc.
    let lbVideo = null;
    const seekOrStep = dir => {
        const v = lbVideo;
        if(v && isVideo(opened()) && !v.paused &&
           (dir > 0 ? v.currentTime < v.duration - 0.25 : v.currentTime > 0.25))
            v.currentTime = Math.max(0, Math.min(v.duration, v.currentTime + dir * 5));
        else step(dir);
    };
    // horizontal swipe on the media navigates (mobile); arrows do the same on desktop.
    let swipeX = null;
    const onSwipeStart = e => { swipeX = e.clientX; };
    const onSwipeEnd = e => { if(swipeX == null) return;
        const dx = e.clientX - swipeX; swipeX = null;
        if(Math.abs(dx) > 40) step(dx < 0 ? 1 : -1); };

    // S-scroll: Shift + wheel steps prev/next (plain scroll stays free for the panel). Shift
    // can map the wheel to the horizontal axis, so read whichever delta is set. One step per
    // scroll burst via a short cooldown, so a flick doesn't skip several docs.
    let wheelAt = 0;
    const onWheel = e => {
        if(!e.shiftKey) return;
        const d = e.deltaY || e.deltaX;
        const now = performance.now();
        if(Math.abs(d) < 1 || now - wheelAt < 200) return;
        wheelAt = now; step(d > 0 ? 1 : -1);
    };

    onMount(() => {
        const onKey = e => {
            if(!opened()) return;
            // ‹ › step the wall, but not while a text field has focus — there the arrows
            // move the cursor (and ↑/↓/Enter drive the label box's suggestions).
            const editing = /^(INPUT|TEXTAREA)$/.test(e.target.tagName);
            if(e.key === 'Escape') dismissPhoto();
            else if(!editing && e.key === 'ArrowRight'){ e.preventDefault(); seekOrStep(1); }
            else if(!editing && e.key === 'ArrowLeft'){ e.preventDefault(); seekOrStep(-1); }
            else if(!editing && e.key === 'Delete'){ e.preventDefault(); lbDelete(e.shiftKey); }
            else if(!editing && e.key === 'Enter'){ e.preventDefault(); toggle(opened().cid); }
            else if(!editing && e.key === ' ' && isVideo(opened()) && lbVideo){
                e.preventDefault(); const v = lbVideo;
                if(v.currentTime >= v.duration - 0.25){ v.currentTime = 0; v.play(); }   // replay from the end
                else if(v.paused) v.play(); else v.pause();                              // else toggle play/pause
            }
        };
        window.addEventListener('keydown', onKey);
        onCleanup(() => window.removeEventListener('keydown', onKey));
    });
    const ZOOM_MAX = 4;
    const [zoom, setZoom] = createSignal(1);              // scale of the centred slide, 1‒ZOOM_MAX
    const [panX, setPanX] = createSignal(0), [panY, setPanY] = createSignal(0);   // its translation, px
    const zoomed = () => zoom() > 1;
    const [zoomBeat, setZoomBeat] = createSignal(0);      // bumped per gesture, to re-arm the idle reset
    const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
    // keep the doc on its pane: with the transform anchored top-left, tx spans [W(1−s), 0]
    // and ty spans [H(1−s), 0] — so a magnified slide can be dragged to either edge, no further.
    const clampPan = (s, tx, ty) => { const w = stripEl?.clientWidth || 1, h = stripEl?.clientHeight || 1;
        return [clamp(tx, w * (1 - s), 0), clamp(ty, h * (1 - s), 0)]; };
    // zoom toward a focal screen point: the point under (fx,fy) keeps its place as the scale
    // changes (t' = f − (f − t)·s'/s), which is what makes a pinch feel anchored to the fingers.
    const zoomToward = (ns, fx, fy) => { const s = zoom(); ns = clamp(ns, 1, ZOOM_MAX); const r = ns / s;
        let tx = ns === 1 ? 0 : fx - (fx - panX()) * r, ty = ns === 1 ? 0 : fy - (fy - panY()) * r;
        [tx, ty] = clampPan(ns, tx, ty);
        setZoom(ns); setPanX(tx); setPanY(ty); setZoomBeat(b => b + 1); };
    const panBy = (dx, dy) => { const [tx, ty] = clampPan(zoom(), panX() + dx, panY() + dy);
        setPanX(tx); setPanY(ty); setZoomBeat(b => b + 1); };
    const onZoomWheel = e => { if(!e.ctrlKey) return; e.preventDefault();
        zoomToward(zoom() * Math.exp(-e.deltaY * 0.01), e.clientX, e.clientY); };
    const zptr = new Map();                               // live pointers, by id
    let lastMid = null, lastGap = 0, lastPan = null;      // previous-frame pinch/drag anchors
    let tapFrom = null;                                   // where a lone finger went down, while it could still be a tap
    const TAP_SLOP = 10;                                  // travel past this (px) makes it a swipe, not a tap
    const pts = () => [...zptr.values()];
    const span = () => { const [a, b] = pts();
        return { d: Math.hypot(a.x - b.x, a.y - b.y), x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }; };
    const onZoomDown = e => { zptr.set(e.pointerId, { x: e.clientX, y: e.clientY });
        if(zptr.size === 2){ const s = span(); lastGap = s.d; lastMid = { x: s.x, y: s.y }; tapFrom = null; }  // a pinch, not a tap
        else if(zptr.size === 1){ lastPan = { x: e.clientX, y: e.clientY }; tapFrom = { x: e.clientX, y: e.clientY }; } };
    const onZoomMove = e => { if(!zptr.has(e.pointerId)) return;
        zptr.set(e.pointerId, { x: e.clientX, y: e.clientY });
        if(tapFrom && Math.hypot(e.clientX - tapFrom.x, e.clientY - tapFrom.y) > TAP_SLOP) tapFrom = null;  // travelled → a swipe
        if(zptr.size >= 2){ const s = span();
            if(lastMid){ panBy(s.x - lastMid.x, s.y - lastMid.y); zoomToward(zoom() * s.d / lastGap, s.x, s.y); }
            lastGap = s.d; lastMid = { x: s.x, y: s.y }; }
        else if(zptr.size === 1 && zoomed() && lastPan){
            panBy(e.clientX - lastPan.x, e.clientY - lastPan.y); lastPan = { x: e.clientX, y: e.clientY }; } };
    const onZoomUp = e => { zptr.delete(e.pointerId);
        if(zptr.size === 1){ const p = pts()[0]; lastPan = { x: p.x, y: p.y }; lastMid = null; }   // pinch → drag
        else if(zptr.size === 0){ lastMid = null; lastPan = null;
            if(e.type === 'pointerup' && tapFrom) onFrameTap(e);   // a lone, still finger lifted → the side-tap step
            tapFrom = null; } };
    const [frame, setFrame] = createSignal(false);
    const [playing, setPlaying] = createSignal(true);
    const [frameUI, setFrameUI] = createSignal(false);     // controls revealed on tap
    const [frameLabel, setFrameLabel] = createSignal('');
    const [frameLabelFocus, setFrameLabelFocus] = createSignal(false);
    const [frameCenterCid, setFrameCenterCid] = createSignal(null);   // the settled slide, for present-aware completion
    const [frameCenterIdx, setFrameCenterIdx] = createSignal(1);      // its strip index, for the load bands
    const FRAME_MS = Number(new URLSearchParams(location.search).get('ms')) || 60000;
    const [intervalMs, setIntervalMs] = createSignal(FRAME_MS);
    // the frame plays the wall *in the order shown* (date, or sort:random — same as the
    // grid). An infinite carousel: clone the last slide before the first and the first
    // after the last. Real slide 0 sits at strip index 1; a scroll that settles on a clone
    // (index 0 or n+1) silently jumps to its real twin, so swiping past either edge loops.
    const frameSlides = () => { const o = items();
        return o.length ? [o[o.length - 1], ...o, o[0]] : []; };
    let stripEl, wakeLock = null;
    // index and position by the slides' own geometry — never the rounded clientWidth (see prose)
    const slideW = () => stripEl && stripEl.children.length ? stripEl.scrollWidth / stripEl.children.length : (stripEl?.clientWidth || 1);
    const slideAt = () => Math.round((stripEl?.scrollLeft || 0) / slideW());      // nearest slide index
    const slideLeft = i => { const k = stripEl && stripEl.children[i]; return k ? k.offsetLeft : i * slideW(); };
    const frameGo = delta => { if(!stripEl) return;
        stripEl.scrollTo({ left: slideLeft(slideAt() + delta), behavior: 'smooth' }); };
    const FRAME_CID_KEY = 'memories.frame.cid';
    let snapT;
    const onFrameScroll = () => {
        if(stripEl) setFrameCenterIdx(slideAt());          // the load bands ride the live scroll, not just the settle
        clearTimeout(snapT); snapT = setTimeout(() => {   // ~150ms after the last scroll
        if(!stripEl) return;
        const n = items().length;
        let i = slideAt();
        if(i <= 0){ stripEl.scrollLeft = slideLeft(n); i = n; }       // leading clone(last) → real last
        else if(i >= n + 1){ stripEl.scrollLeft = slideLeft(1); i = 1; }  // trailing clone(first) → real first
        const target = slideLeft(i);
        if(Math.abs(stripEl.scrollLeft - target) > 1) stripEl.scrollTo({ left: target, behavior: 'smooth' });
        const doc = items()[i - 1];                            // remember where we are, to resume on reboot
        setFrameCenterIdx(i);
        if(doc){ localStorage.setItem(FRAME_CID_KEY, doc.cid); setFrameCenterCid(doc.cid); }
    }, 150); };
    const FRAME_ON_KEY = 'memories.frame.on';              // remembers we're in frame mode
    async function enterFrame(){
        if(!items().length) return;
        setFrame(true); setPlaying(true); setFrameUI(false);
        localStorage.setItem(FRAME_ON_KEY, '1');           // so a relaunch (PWA shortcut) re-enters
        history.pushState({ frame: true }, '');           // so the back button leaves the frame
        try { await document.documentElement.requestFullscreen?.(); } catch(e) {}
        try { wakeLock = await navigator.wakeLock?.request('screen'); } catch(e) {}
    }
    function closeFrame(){                                 // the teardown itself
        setFrame(false);
        localStorage.setItem(FRAME_ON_KEY, '0');           // leaving turns off auto-enter
        try { wakeLock?.release(); } catch(e) {} wakeLock = null;
        try { if(document.fullscreenElement) document.exitFullscreen?.(); } catch(e) {}
    }
    // Esc / the exit button unwind the history entry (→ popstate → closeFrame), so back
    // and explicit-exit leave history balanced.
    const exitFrame = () => (history.state && history.state.frame) ? history.back() : closeFrame();

    // edit the centered doc from within the frame. The edit may push it out of the current
    // filter; if so, re-anchor on the *previous* doc (so the next advance shows the one
    // that filled the gap rather than skipping it); if it stayed, keep it centered.
    const frameIndex = () => Math.max(0, Math.min(items().length - 1, slideAt() - 1));
    async function frameEdit(patchFor){
        const list = items(); if(!list.length || !stripEl) return;
        const i = frameIndex(), cur = list[i], prevCid = i > 0 ? list[i - 1].cid : null;
        await gql(UPDATE_PHOTO, { cid: cur.cid, patch: patchFor(cur) });
        setFrameLabel('');
        await refetch();
        requestAnimationFrame(() => {
            const l2 = items(); if(!l2.length) { exitFrame(); return; }
            const stay = l2.findIndex(p => p.cid === cur.cid);
            let t = stay >= 0 ? stay : (prevCid ? l2.findIndex(p => p.cid === prevCid) : 0);
            stripEl.scrollLeft = slideLeft(Math.max(0, t) + 1);
        });
    }
    const frameSetState = st => frameEdit(() => ({ state: st }));
    const frameAddWord = input => { const words = splitWords(input); if(!words.length) return;
        return frameEdit(p => { const cur = splitLabels(p);
            for(const w of words) if(!cur.includes(w)) cur.push(w); return { labels: cur.join('; ') }; }); };
    const frameAddLabel = () => frameAddWord(frameLabel());
    const frameDropLabel = () => { const words = splitWords(frameLabel()); if(!words.length) return;
        return frameEdit(p => ({ labels: splitLabels(p).filter(x => !words.includes(x)).join('; ') })); };
    // auto-start the show as soon as the (persisted) wall loads — when we were last in the
    // frame (the frame launches from a PWA shortcut, no query string), or when forced with
    // ?frame=1. Once only, so exiting doesn't immediately re-enter.
    const FRAME_AUTO = localStorage.getItem(FRAME_ON_KEY) === '1'
        || new URLSearchParams(location.search).get('frame') === '1';
    let autoEntered = false;
    createEffect(() => {
        if(FRAME_AUTO && !autoEntered && items().length > 0){ autoEntered = true; enterFrame(); }
    });
    // open on the slide we left off (resume across reboot), else the first real slide.
    createEffect(() => { if(frame() && stripEl) requestAnimationFrame(() => {
        const saved = localStorage.getItem(FRAME_CID_KEY);
        const r = saved ? items().findIndex(p => p.cid === saved) : -1;
        stripEl.scrollLeft = slideLeft(r >= 0 ? r + 1 : 1);   // +1 for the leading clone
        setFrameCenterIdx(r >= 0 ? r + 1 : 1);                             // seed the centre before any scroll
        setFrameCenterCid((items()[r >= 0 ? r : 0] || {}).cid || null);
    }); });
    // a video scrolled out of view must stop — pause any slide video that's mostly off-screen
    createEffect(() => {
        if(!frame() || !stripEl) return;
        const io = new IntersectionObserver(
            es => es.forEach(e => { if(e.intersectionRatio < 0.5) e.target.pause(); }),
            { root: stripEl, threshold: 0.5 });
        requestAnimationFrame(() => stripEl.querySelectorAll('video').forEach(v => io.observe(v)));
        onCleanup(() => io.disconnect());
    });
    createEffect(() => {
        if(!frame() || !playing() || zoomed()) return;   // a pinch freezes the slide (next section)
        const id = setInterval(() => {
            if(stripEl && [...stripEl.querySelectorAll('video')].some(v => !v.paused && !v.ended)) return;
            frameGo(1);
        }, intervalMs());
        onCleanup(() => clearInterval(id));
    });
    onMount(() => {
        const onKey = e => {
            if(!frame()) return;
            const editing = /^(INPUT|TEXTAREA)$/.test(e.target.tagName);   // leave the arrows to the label box
            if(e.key === 'Escape') exitFrame();
            else if(!editing && e.key === 'ArrowRight'){ e.preventDefault(); frameGo(1); }
            else if(!editing && e.key === 'ArrowLeft'){ e.preventDefault(); frameGo(-1); }
        };
        const onVis = async () => {
            if(frame() && document.visibilityState === 'visible' && !wakeLock)
                try { wakeLock = await navigator.wakeLock?.request('screen'); } catch(e) {}
        };
        const onPop = () => {                                // the back button unwinds frame, then lightbox
            if(frame()) closeFrame();
            const st = history.state || {};
            if(opened() && !st.lb) closePhoto();             // popped past the lightbox → grid
            if(!opened() && st.lb){ const p = items().find(x => x.cid === st.lb); if(p) setOpened(p); }   // back into the lightbox under the frame
        };
        window.addEventListener('keydown', onKey);
        window.addEventListener('popstate', onPop);
        document.addEventListener('visibilitychange', onVis);
        onCleanup(() => { window.removeEventListener('keydown', onKey);
                          window.removeEventListener('popstate', onPop);
                          document.removeEventListener('visibilitychange', onVis); });
    });
    const WEB_NEAR = 2, KEEP_FAR = 10;
    const frameSrc = (p, k) => { const d = Math.abs(k - frameCenterIdx());
        if(d > KEEP_FAR) return BLANK;                            // far → unloaded
        if(d <= WEB_NEAR) return IPFS + (p?.webCid || p?.thumbnailCid || '');   // near → full-res
        return IPFS + (p?.thumbnailCid || p?.webCid || ''); };    // middle → thumbnail
    const onFrameTap = e => {
        if(zoomed()) return;
        const w = window.innerWidth || 1;
        if(e.clientX < w / 3) frameGo(-1);
        else if(e.clientX > w * 2 / 3) frameGo(1);
        else setFrameUI(v => !v);
    };
    createEffect(() => { if(!frame() || !stripEl) return; const el = stripEl;
        const on = (t, h, o) => el.addEventListener(t, h, o), off = (t, h) => el.removeEventListener(t, h);
        on('wheel', onZoomWheel, { passive: false }); on('pointerdown', onZoomDown);
        on('pointermove', onZoomMove); on('pointerup', onZoomUp); on('pointercancel', onZoomUp);
        onCleanup(() => { off('wheel', onZoomWheel); off('pointerdown', onZoomDown);
            off('pointermove', onZoomMove); off('pointerup', onZoomUp); off('pointercancel', onZoomUp); }); });
    createEffect(() => { const s = zoom(), tx = panX(), ty = panY(); if(!frame() || !stripEl) return;
        const i = slideAt();
        [...stripEl.children].forEach((sl, k) => { const m = sl.querySelector('.slide-media');
            if(!m) return;
            m.style.transformOrigin = '0 0';
            m.style.transform = (k === i && s > 1) ? `translate(${tx}px,${ty}px) scale(${s})` : ''; }); });
    const ZOOM_IDLE_MS = Number(new URLSearchParams(location.search).get('zoomidle')) || 300000;
    const resetZoom = () => { setZoom(1); setPanX(0); setPanY(0); };
    createEffect(() => { if(!zoomed()) return; zoomBeat();
        const id = setTimeout(resetZoom, ZOOM_IDLE_MS); onCleanup(() => clearTimeout(id)); });
    const frameFromHere = () => { const cur = opened(); if(!cur) return;
        localStorage.setItem(FRAME_CID_KEY, cur.cid);    // the slide the frame will open on
        closePhoto();                                    // hide the modal but leave its history entry, so Back returns to it
        enterFrame(); };
    const lbDelete = force => { if(force || confirm('Mark this for deletion?')) lbSetState('delete'); };
    // the cursor persists too, so a refresh lands back on the focused tile, not the first one
    const CURSOR_KEY = 'memories.cursor';
    const [cursor, setCursor] = createSignal(localStorage.getItem(CURSOR_KEY));
    createEffect(() => { const c = cursor(); c ? localStorage.setItem(CURSOR_KEY, c) : localStorage.removeItem(CURSOR_KEY); });
    let gridEl, rangeBase = new Set(), extending = false;
    // a row is however many columns the responsive grid is showing right now
    const gridCols = () => gridEl ? getComputedStyle(gridEl).gridTemplateColumns.split(' ').length : 1;
    const moveCursor = (delta, extend) => {
        const list = items(); if(!list.length) return;
        const at = list.findIndex(p => p.cid === cursor());
        const ni = at < 0 ? 0 : Math.max(0, Math.min(list.length - 1, at + delta));
        setCursor(list[ni].cid);
        if(extend && anchor() !== null){
            if(!extending){ extending = true; rangeBase = new Set(selected()); }   // snapshot before the run
            const a = list.findIndex(p => p.cid === anchor()), [lo, hi] = a < ni ? [a, ni] : [ni, a];
            setSelected(new Set([...rangeBase, ...list.slice(lo, hi + 1).map(p => p.cid)]));
        } else { extending = false; setAnchor(list[ni].cid); }   // a plain move re-anchors and ends the run
        requestAnimationFrame(scrollCursorIntoView);
    };
    const scrollCursorIntoView = () => {
        const tile = gridEl?.querySelector('[data-cursor="1"]'); if(!tile) return;
        const r = tile.getBoundingClientRect();
        const bar = document.querySelector('.toolbar');
        const floor = innerHeight - (bar ? bar.getBoundingClientRect().height : 0);
        if(r.top < 0) scrollBy(0, r.top);                          // head above the fold → pull it down
        else if(r.bottom > floor) scrollBy(0, r.bottom - floor);   // foot under the bar → push it up
    };
    createEffect(() => {
        const shown = selCount() > 0;   // tracked synchronously; the toolbar mounts on this turn
        requestAnimationFrame(() => {
            const bar = shown && document.querySelector('.toolbar');
            document.body.style.paddingBottom = bar ? bar.getBoundingClientRect().height + 'px' : '';
        });
    });
    onMount(() => {
        const onKey = e => {
            if(opened() || frame() || /^(INPUT|TEXTAREA)$/.test(e.target.tagName)) return;
            const step = d => { e.preventDefault(); moveCursor(d, e.shiftKey); };
            if(e.key === 'ArrowRight') step(1);
            else if(e.key === 'ArrowLeft') step(-1);
            else if(e.key === 'ArrowDown') step(gridCols());
            else if(e.key === 'ArrowUp') step(-gridCols());
            else if(e.key === ' ' && cursor()){ e.preventDefault(); toggle(cursor()); setAnchor(cursor()); }
            else if(e.key === 'Enter' && cursor()){ e.preventDefault(); openPhoto(items().find(p => p.cid === cursor())); }
            else if((e.ctrlKey || e.metaKey) && (e.key === 'a' || e.key === 'A')){ e.preventDefault(); setSelected(new Set(shownCids())); }
        };
        window.addEventListener('keydown', onKey);
        onCleanup(() => window.removeEventListener('keydown', onKey));
    });
    const [marquee, setMarquee] = createSignal(null);   // {x0,y0,x1,y1} in client coords, or null
    let marqueeFrom = null;
    const marqueeRect = m => ({ l: Math.min(m.x0, m.x1), r: Math.max(m.x0, m.x1),
                                t: Math.min(m.y0, m.y1), b: Math.max(m.y0, m.y1) });
    const marqueeSelect = () => {
        const m = marquee(); if(!m) return;
        const r = marqueeRect(m), list = items(), kids = gridEl.children, next = new Set(selected());
        for(let i = 0; i < kids.length && i < list.length; i++){
            const b = kids[i].getBoundingClientRect();
            if(b.left < r.r && b.right > r.l && b.top < r.b && b.bottom > r.t) next.add(list[i].cid);
        }
        setAllMatching(false); setSelected(next);
    };
    const onGridDown = e => {
        if(e.pointerType === 'touch' || e.button !== 0 || e.target !== gridEl) return;
        marqueeFrom = { x: e.clientX, y: e.clientY };
        setMarquee({ x0: e.clientX, y0: e.clientY, x1: e.clientX, y1: e.clientY });
        gridEl.setPointerCapture?.(e.pointerId);
    };
    const onGridMove = e => {
        if(!marqueeFrom) return;
        setMarquee({ x0: marqueeFrom.x, y0: marqueeFrom.y, x1: e.clientX, y1: e.clientY });
        marqueeSelect();
    };
    const onGridUp = () => { if(marqueeFrom){ marqueeSelect(); marqueeFrom = null; setMarquee(null); } };
    onMount(() => {
        const onKey = e => {
            if((e.key !== 'l' && e.key !== '.') || frame()) return;    // the frame has its own bar
            if(/^(INPUT|TEXTAREA)$/.test(e.target.tagName)) return;    // a field already owns the key
            const box = opened() ? document.querySelector('.lb .batch-label')
                      : selCount() > 0 ? document.querySelector('.toolbar .batch-label') : null;
            if(!box) return;
            e.preventDefault();
            if(e.key === '.' && lastLabel())                           // '.' re-drops the label applied last
                (opened() ? setLbText : setLabelText)(lastLabel());
            box.focus();
        };
        window.addEventListener('keydown', onKey);
        onCleanup(() => window.removeEventListener('keydown', onKey));
    });
    onMount(() => {
        history.pushState({ app: true }, '');          // the root entry the back button stops on
        const onExit = () => {
            const st = history.state || {};
            if(!frame() && !opened() && !st.lb && !st.app){      // popped below the root with nothing open
                if(confirm('Leave Memories?')) history.back();   // really leave
                else history.pushState({ app: true }, '');       // stay — restore the root
            }
        };
        window.addEventListener('popstate', onExit);
        onCleanup(() => window.removeEventListener('popstate', onExit));
    });
    return html`
      <${Show} when=${() => authNeeded()}>
        <div class="authwall" role="alert">
          <strong>Authorization required.</strong>
          This device can't read your photos yet — open a fresh access link on it.
        </div>
      <//>
      <h1>Memories</h1>
      <div class="complete">
        <input class="search" type="search" aria-label="search labels"
               placeholder="labels; since:2010; until:2015; type:video; sort:random"
               value=${() => search()}
               onInput=${e => { setSearch(e.target.value); setCaret(e.target.selectionStart);
                                clearTimeout(searchBlurT); setSearchFocus(true); }}
               onKeyUp=${e => setCaret(e.target.selectionStart)}
               onClick=${e => setCaret(e.target.selectionStart)}
               onFocus=${() => { clearTimeout(searchBlurT); setSearchFocus(true); }}
               onKeyDown=${e => sugNav(e, w => { if(w) pickSearch(w); })}
               onBlur=${() => { searchBlurT = setTimeout(() => setSearchFocus(false), 150); }} />
        <${Show} when=${() => searchFocus() && !opened()}>
          <${Suggest} text=${search} caret=${caret} dsl=${true}
                      active=${sugActive} onItems=${reportSug} onPick=${pickSearch} />
        <//>
      </div>
      <div class="chips" role="group" aria-label="filter by state">
        ${['all', ...STATES].map(st => html`
          <button class="chip" aria-pressed=${() => stateFilter() === st ? 'true' : 'false'}
                  onClick=${() => setStateFilter(st)}>${st}</button>`)}
        <button class="chip selall" aria-pressed=${() => allSelected() ? 'true' : 'false'}
                onClick=${toggleAll}>${() => allSelected() ? 'clear' : 'select all'}</button>
        <button class="chip frame-start" onClick=${enterFrame}>▶ frame</button>
      </div>
      <${Show} when=${() => selCount() > 0}>
        <div class="toolbar" role="toolbar" aria-label="selection actions">
          <!-- scope: what the actions apply to -->
          <span class="count">${() => allMatching() ? `all ${total()} matching` : `${selCount()} selected`}</span>
          <button class="allmatch" aria-pressed=${() => allMatching() ? 'true' : 'false'}
                  onClick=${() => setAllMatching(m => !m)}>all ${() => total()} matching</button>
          <button class="range" aria-pressed=${() => rangeMode() ? 'true' : 'false'}
                  onClick=${() => setRangeMode(m => !m)}>↔ range</button>
          <span class="tb-sep" aria-hidden="true"></span>
          <!-- label edit -->
          <div class="complete">
            <input class="batch-label" placeholder="add a label…" aria-label="label for the selection"
                   value=${() => labelText()} onInput=${e => { setLabelText(e.target.value); setLabelFocus(true); }}
                   onFocus=${() => setLabelFocus(true)}
                   onKeyDown=${e => { if(e.key === 'Enter' && e.shiftKey){ e.preventDefault(); removeLabel(); return; }
                     sugNav(e, w => w ? setLabelText(replaceSeg(labelText(), w) + '; ') : addLabel()); }}
                   onBlur=${() => setTimeout(() => setLabelFocus(false), 150)} />
            <${Show} when=${() => labelFocus()}>
              <${Suggest} text=${labelText} active=${sugActive} onItems=${reportSug}
                          onPick=${w => setLabelText(replaceSeg(labelText(), w) + '; ')} />
            <//>
          </div>
          <button aria-label="add label" onClick=${addLabel}>＋ label</button>
          <button aria-label="remove label" onClick=${removeLabel}>－ label</button>
          <span class="tb-sep" aria-hidden="true"></span>
          <!-- state -->
          ${STATES.map(st => html`
            <button class="st" onClick=${() => setStateFor(st)}>${st}</button>`)}
          <span class="tb-sep" aria-hidden="true"></span>
          <!-- download the selection, one file per doc, at a chosen resolution -->
          <span class="dl-grp" aria-hidden="true">&#x2193;</span>
          <button class="dl" onClick=${() => downloadSelection('orig')}>orig</button>
          <button class="dl" onClick=${() => downloadSelection('web')}>web</button>
          <button class="dl" onClick=${() => downloadSelection('thumb')}>thumb</button>
          <span class="tb-sep" aria-hidden="true"></span>
          <button class="clear" onClick=${clearSel}>clear</button>
        </div>
      <//>
      <${Show} when=${() => !photos.loading && items().length === 0 && !authNeeded()}>
        <p class="empty">No photos.</p>
      <//>
      <${Show} when=${() => items().length > 0}>
        <p class="countline">${() => photos()?.sampled
          ? `showing a spread of ${items().length} from ${total()} — narrow the search or date range to see them all`
          : `showing all ${items().length}`}</p>
      <//>
      <div class="sizer">
        <button aria-label="smaller thumbnails" onClick=${() => bumpSize(-1)}>−</button>
        <button aria-label="bigger thumbnails" onClick=${() => bumpSize(1)}>＋</button>
      </div>
      <div class="grid" role="list" aria-label="photos" style=${() => '--tile:' + thumbSize() + 'px'}
           ref=${el => gridEl = el} onWheel=${onGridWheel}
           onPointerDown=${onGridDown} onPointerMove=${onGridMove}
           onPointerUp=${onGridUp} onPointerCancel=${onGridUp}>
        <${For} each=${() => items()}>${photo => {
          // each tile loads its image only while near the viewport (watchVisible
          // observes it via ref), and drops back to BLANK when it scrolls away — so
          // the wall can grow huge without keeping every image decoded.
          const [near, setNear] = createSignal(false);
          const tileSrc = () => IPFS + (thumbSize() > 160 && photo.webCid && !isVideo(photo) ? photo.webCid : photo.thumbnailCid);
          return html`
          <div class="tile" role="listitem" data-selected=${() => isSel(photo.cid) ? '1' : '0'}
               data-cursor=${() => cursor() === photo.cid ? '1' : '0'}
               onPointerDown=${e => onTileDown(e, photo)} onPointerMove=${onTileMove}
               onPointerUp=${onTileUp} onPointerCancel=${onTileUp}
               onContextMenu=${e => e.preventDefault()}
               onClick=${e => onTilePress(e, photo.cid)}
               onDblClick=${() => armRange(photo.cid)}>
            <${Show} when=${() => photo.thumbnailCid}
                     fallback=${html`<div class="thumb noimg" title=${photo.filename || photo.date.slice(0, 10)}>
                       <span class="ph">${isVideo(photo) ? '🎬' : '🖼'}</span></div>`}>
              <img class="thumb" ref=${el => watchVisible(el, setNear)} alt=${photo.date.slice(0, 10)} title=${photo.date.slice(0, 10)}
                   src=${() => near() ? tileSrc() : BLANK} />
            <//>
            <${Show} when=${() => isVideo(photo) && photo.thumbnailCid}>
              <span class="play" title="video">▶</span>
            <//>
            <${Show} when=${() => isSel(photo.cid)}><span class="check">✓</span><//>
            <span class="badge">${photo.state || ''}</span>
            <${Show} when=${() => !!photo.labels}>
              <span class="labels" title=${photo.labels}>${photo.labels}</span>
            <//>
          </div>`;
        }}
        <//>
      </div>
      <${Show} when=${() => marquee()}>
        <div class="marquee" style=${() => { const r = marqueeRect(marquee());
          return `left:${r.l}px;top:${r.t}px;width:${r.r - r.l}px;height:${r.b - r.t}px`; }}></div>
      <//>
      <${Show} when=${() => opened()}>
        <div class="lb" onClick=${dismissPhoto}>
          <div class="lb-inner" role="dialog" aria-modal="true" aria-label="photo"
               onClick=${e => e.stopPropagation()}
               onPointerDown=${onSwipeStart} onPointerUp=${onSwipeEnd} onWheel=${onWheel}>
            <button class="lb-close" aria-label="close" onClick=${dismissPhoto}>✕</button>
            <button class="lb-select" aria-pressed=${() => isSel(opened()?.cid) ? 'true' : 'false'}
                    onClick=${() => toggle(opened().cid)}>${() => isSel(opened()?.cid) ? '✓ selected' : 'select'}</button>
            <button class="lb-frame" aria-label="frame from here" onClick=${frameFromHere}>▶ frame</button>
            <button class="lb-nav lb-prev" aria-label="previous photo" onClick=${() => step(-1)}>‹</button>
            <button class="lb-nav lb-next" aria-label="next photo" onClick=${() => step(1)}>›</button>
            <${Show} when=${() => hasMedia(opened())}
                     fallback=${html`<div class="lb-media noimg">
                       <span class="ph">${() => isVideo(opened()) ? '🎬' : '🖼'}</span>
                       <span class="mt">no preview · ${() => opened()?.filename || opened()?.mimetype || ''}</span></div>`}>
              <${Show} when=${() => isVideo(opened())}
                       fallback=${html`<img class="lb-media" src=${() => mediaSrc(opened())} />`}>
                <video class="lb-media" controls autoplay ref=${el => lbVideo = el} src=${() => IPFS + opened()?.webCid}></video>
              <//>
            <//>
            <div class="lb-meta">
              <span class="lb-date">${() => opened()?.date ? new Date(opened().date).toLocaleString("fr-FR") : ''}</span>
              <a class="lb-orig" target="_blank" href=${() => IPFS + (opened()?.cid || '')} target="_blank" rel="noopener"
                 aria-label="original" title="original — full resolution, new tab">⤢</a>
            </div>
            <div class="lb-states">
              <${For} each=${() => STATES}>${st => html`
                <button class="lb-st" aria-pressed=${() => opened()?.state === st ? 'true' : 'false'}
                        onClick=${() => lbSetState(st)}>${st}</button>`}
              <//>
            </div>
            <div class="lb-labels">
              <${For} each=${() => labelsOf(opened())}>${w => html`
                <span class="lb-chip"><button class="lb-chip-word"
                      onClick=${() => { setSearch(w); dismissPhoto(); }}>${w}</button><button class="x"
                      aria-label=${'remove ' + w} onClick=${() => lbRemove(w)}>×</button></span>`}
              <//>
              <${Show} when=${() => lastLabel() && !labelsOf(opened()).includes(lastLabel())}>
                <button class="lb-reuse" onClick=${() => lbAdd(lastLabel())}>＋ ${() => lastLabel()}</button>
              <//>
              <div class="complete">
                <input class="batch-label" placeholder="add a label…" aria-label="add a label"
                       value=${() => lbText()} onInput=${e => { setLbText(e.target.value); setLbFocus(true); }}
                       onFocus=${() => setLbFocus(true)} onBlur=${() => setTimeout(() => setLbFocus(false), 150)}
                       onKeyDown=${e => { if(e.key === 'Enter' && e.shiftKey){ e.preventDefault(); lbDrop(lbText()); return; }
                         sugNav(e, w => w ? setLbText(replaceSeg(lbText(), w) + '; ') : lbAdd(lbText())); }} />
                <${Show} when=${() => lbFocus()}>
                  <${Suggest} text=${lbText} present=${() => labelsOf(opened())} active=${sugActive} onItems=${reportSug}
                              onPick=${w => setLbText(replaceSeg(lbText(), w) + '; ')} />
                <//>
              </div>
            </div>
          </div>
        </div>
      <//>
      <${Show} when=${() => frame()}>
        <div class=${() => 'frame' + (zoomed() ? ' zoomed' : '')}>
          <div class="strip" role="list" aria-label="slideshow"
               ref=${el => { stripEl = el; el.addEventListener('scroll', onFrameScroll); }}>
            <${Index} each=${() => frameSlides()}>${(slide, k) => {
              const src = createMemo(() => frameSrc(slide(), k));   // band-chosen source, re-picked as the centre moves
              const [loaded, setLoaded] = createSignal(false);      // until this slide's CURRENT source paints
              createEffect(() => { src(); setLoaded(false); });     // a fresh source — doc swapped in, or band re-picked — re-shows the mark
              return html`
              <div class="slide" role="listitem">
                <${Show} when=${() => hasMedia(slide())}
                         fallback=${html`<div class="slide-media noimg">
                           <span class="ph">${() => isVideo(slide()) ? '🎬' : '🖼'}</span></div>`}>
                  <${Show} when=${() => isVideo(slide())}
                           fallback=${html`<div class="slide-pic">
                             <${Show} when=${() => !loaded()}>
                               <span class="ph load-ph" aria-label="loading">🖼</span><//>
                             <img class="slide-media" loading="lazy"
                                  src=${src} onLoad=${() => setLoaded(true)} /></div>`}>
                    <video class="slide-media" controls src=${() => IPFS + slide().webCid}></video>
                  <//>
                <//>
              </div>`; }}
            <//>
          </div>
          <${Show} when=${() => frameUI()}>
            <div class="frame-bar" role="toolbar" aria-label="frame actions">
              <button aria-label=${() => playing() ? 'pause' : 'play'}
                      onClick=${() => setPlaying(p => !p)}>${() => playing() ? '⏸' : '▶'}</button>
              <label>every <input class="ivl" type="number" min="2" aria-label="seconds per photo"
                     value=${() => Math.round(intervalMs() / 1000)}
                     onChange=${e => setIntervalMs(Math.max(2, +e.target.value) * 1000)} />s</label>
              ${STATES.map(st => html`
                <button class="st" onClick=${() => frameSetState(st)}>${st}</button>`)}
              <div class="complete">
                <input class="frame-label" placeholder="add a label…" aria-label="add a label in the frame"
                       value=${() => frameLabel()} onInput=${e => { setFrameLabel(e.target.value); setFrameLabelFocus(true); }}
                       onFocus=${() => setFrameLabelFocus(true)}
                       onBlur=${() => setTimeout(() => setFrameLabelFocus(false), 150)}
                       onKeyDown=${e => { if(e.key === 'Enter' && e.shiftKey){ e.preventDefault(); frameDropLabel(); return; }
                         sugNav(e, w => w ? setFrameLabel(replaceSeg(frameLabel(), w) + '; ') : frameAddLabel()); }} />
                <${Show} when=${() => frameLabelFocus()}>
                  <${Suggest} text=${frameLabel} present=${() => labelsOf(items().find(p => p.cid === frameCenterCid()))}
                              active=${sugActive} onItems=${reportSug}
                              onPick=${w => setFrameLabel(replaceSeg(frameLabel(), w) + '; ')} />
                <//>
              </div>
              <button aria-label="exit frame" onClick=${exitFrame}>✕ exit</button>
            </div>
          <//>
        </div>
      <//>
    `;
}