A Photos/Videos Organiser With Solid

SEND_LABEL = "zzsend"
SEND_BYTES = ["send-c", "send-w", "send-t",        # the complete photo
              "send-nc", "send-nt",                # never downscaled: no web copy
              "send-vc", "send-vw", "send-vt"]     # the video
def send_docs():
    b = {n: serve_bytes(n) for n in SEND_BYTES}
    return [
        {"cid": b["send-c"], "date": "2020-05-15T12:00:00Z", "mimetype": "image/jpeg",
         "thumbnailCid": b["send-t"], "webCid": b["send-w"], "filename": "holiday.jpg",
         "labels": SEND_LABEL, "state": "todo"},
        {"cid": b["send-nc"], "date": "2020-05-16T12:00:00Z", "mimetype": "image/jpeg",
         "thumbnailCid": b["send-nt"], "labels": SEND_LABEL, "state": "todo"},
        {"cid": b["send-vc"], "date": "2020-05-17T12:00:00Z", "mimetype": "video/quicktime",
         "thumbnailCid": b["send-vt"], "webCid": b["send-vw"],
         "labels": SEND_LABEL, "state": "todo"},
    ]

@testcase
def test_sharing_a_few_photos(page):
    """Someone asks for an afternoon's photos: search the tag, pick, and take each
    at the size that suits."""
    docs = send_docs()
    for d in docs: gql(DELETE, {"cid": d["cid"]}); gql(CREATE, {"p": d})
    try:
        open_app(page)
        search_for(page, SEND_LABEL)
        expect(tiles(page)).to_have_count(len(docs))
        photo, never_downscaled, video = 0, 1, 2      # shown oldest first
        tiles(page).nth(photo).click()                          # the one worth sending
        expect(checks(page)).to_have_count(1)
        tb, got = toolbar(page), {}
        for res in ["web", "orig"]:
            with page.expect_download() as di:
                tb.get_by_role("button", name=res, exact=True).click()
            got[res] = (di.value.url, di.value.suggested_filename)
        assert docs[photo]["webCid"] in got["web"][0], f"web → webCid: {got}"
        assert docs[photo]["cid"] in got["orig"][0], f"orig → the doc's own cid: {got}"
        print("  PASS: download selection")
        names = {res: name for res, (_, name) in got.items()}   # the two the photo just yielded
        assert len({*names.values()}) == len(names), f"same name → they collide in the folder: {names}"
        for res in names:
            assert res in names[res], f"rendition missing from the name: {names}"
        print("  PASS: download names by resolution")
        tiles(page).nth(never_downscaled).click()
        expect(checks(page)).to_have_count(2)
        saved = []                                              # armed here: only this click's files count
        page.on("download", lambda d: saved.append(d.url))
        toolbar(page).get_by_role("button", name="web", exact=True).click()
        wait_until(page, lambda: len(saved) >= 1, label="the doc that has a web copy saves it")
        page.wait_for_timeout(500)                              # room for a second, unwanted save to land
        assert len(saved) == 1, f"expected the one web copy, got {len(saved)}: {saved}"
        assert docs[photo]["webCid"] in saved[0], f"the wrong rendition came down: {saved[0]}"
        print("  PASS: download skips a missing rendition")
        tiles(page).nth(photo).click()
        tiles(page).nth(never_downscaled).click()
        tiles(page).nth(video).click()
        expect(checks(page)).to_have_count(1)
        tb, ext = toolbar(page), {}
        for res in ["orig", "web"]:
            with page.expect_download() as di:
                tb.get_by_role("button", name=res, exact=True).click()
            ext[res] = di.value.suggested_filename.rsplit(".", 1)[-1]
        assert ext["orig"] == "mov", f"original keeps its real type: {ext}"
        assert ext["web"] == "mp4", f"a video's web copy is mp4: {ext}"
        print("  PASS: download extensions by rendition")
    finally:
        for d in docs: gql(DELETE, {"cid": d["cid"]})
        unserve_bytes(*SEND_BYTES)

CABINET_MS, CABINET_UI_IDLE_MS = 1200, 2000
CABINET_QS = f"?ms={CABINET_MS}&uiidle={CABINET_UI_IDLE_MS}"
FRAME_REENTRY_GRACE_MS = 300

@testcase
def test_the_cabinet_plays_on_its_own(page):
    """A tablet left on the cabinet: it advances by itself, yields its controls to a
    passer-by, and comes back where it was after a relaunch."""
    make_fixtures()
    open_app(page, CABINET_QS)
    search_for(page, FIXTURE_LABEL)
    chip(page, "all").click()
    expect(tiles(page)).to_have_count(len(FIXTURES))
    page.get_by_role("button", name=re.compile("frame", re.I)).click()
    strip = page.get_by_role("list", name="slideshow")
    expect(strip).to_be_visible()
    bar = page.get_by_role("toolbar", name="frame actions")
    for src in ["thumb-0", "thumb-1", "thumb-2"]:                   # date order
        wait_until(page, lambda s=src: strip.evaluate(CENTERED) == f"https://ipfs.konubinix.eu/p/zzbatchfix-{s}")
    print("  PASS: frame auto-advances")
    strip.click()                                                  # a tap reveals the frame bar
    expect(bar).to_be_visible()
    colours = [bar.get_by_role("button", name=st, exact=True).evaluate("el => getComputedStyle(el).color")
               for st in ["todo", "next", "done", "delete"]]
    assert len(set(colours)) == 4, f"each state pill should have its own colour, got {colours}"
    print("  PASS: frame state pills are colour coded")
    def shown(k):     # the date the bar should be reading, as the browser renders it
        return page.evaluate("d => new Date(d).toLocaleString('fr-FR')", FIXTURES[k]["date"])
    i = centred_slide(strip)                                   # whichever slide the show stopped on
    expect(bar.locator(".frame-date")).to_have_text(shown(i))
    page.keyboard.press("ArrowRight")                          # step to the next slide
    j = (i + 1) % len(FIXTURES)
    wait_until(page, lambda: strip.evaluate(CENTERED) == f"https://ipfs.konubinix.eu/p/zzbatchfix-thumb-{j}")
    expect(bar.locator(".frame-date")).to_have_text(shown(j))  # follows the slide
    print("  PASS: frame shows date")
    expect(bar).to_be_visible()                       # still up from the tap that raised it
    expect(bar).to_be_hidden()                        # and gone once the window has run out
    print("  PASS: frame bar auto-hides when idle")
    strip.click()                                     # bring the bar back up
    expect(bar).to_be_visible()
    pause = bar.get_by_role("button", name=re.compile("pause|play"))
    for _ in range(3):
        pause.click(); page.wait_for_timeout(CABINET_UI_IDLE_MS // 3)
    page.wait_for_timeout(CABINET_UI_IDLE_MS // 3)    # now well past a window since the first press
    expect(bar).to_be_visible()                       # still up: each press restarted the count
    expect(bar).to_be_hidden()                        # now left alone → it finally hides
    print("  PASS: frame bar idle resets on use")
    if centred_slide(strip) == 0:                              # park it away from the cold-start slide
        page.keyboard.press("ArrowRight")
        wait_until(page, lambda: centred_slide(strip) != 0,
                   label="the show steps off the slide a cold start would pick")
    i = centred_slide(strip)
    was = strip.evaluate(CENTERED)                             # the slide it is showing when it goes down
    remembered = lambda: page.evaluate("() => localStorage.getItem('memories.frame.cid')")
    wait_until(page, lambda: remembered() == FIXTURES[i]["cid"],
               label="the slide it is on is the one written down",
               detail=lambda: f"written down: {remembered()}")
    open_app(page, CABINET_QS)                                 # reboot: a plain relaunch
    strip = page.get_by_role("list", name="slideshow")
    expect(strip).to_be_visible()
    expect(tiles(page)).to_have_count(len(FIXTURES))           # the docs it places from are in
    page.evaluate("() => new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)))")
    came_back_on = strip.evaluate(CENTERED)                    # read at once, not waited for
    assert came_back_on == was, f"resumed on {came_back_on}, not the {was} it went down on"
    print("  PASS: frame resumes position")
    page.keyboard.press("Escape")                              # leaving turns the memory off
    expect(strip).to_be_hidden()
    open_app(page, CABINET_QS)
    expect(page.get_by_role("list", name="slideshow")).to_be_hidden()   # stays on the wall
    print("  PASS: frame mode persists")
    expect(tiles(page)).to_have_count(len(FIXTURES))           # the persisted query brought the wall back
    page.get_by_role("button", name=re.compile("frame", re.I)).click()   # set it going again → remembered
    expect(page.get_by_role("list", name="slideshow")).to_be_visible()
    open_app(page, CABINET_QS)                                 # relaunch: remembered → auto-enters, no click
    strip = page.get_by_role("list", name="slideshow")
    expect(strip).to_be_visible()
    page.keyboard.press("Escape")                              # exit within this launch
    page.wait_for_timeout(FRAME_REENTRY_GRACE_MS)              # long enough for a re-entry to fire
    expect(strip).to_be_hidden()                               # once per launch — it doesn't
    print("  PASS: frame autostart")

SWIPE_DOCS = [{"cid": f"https://ipfs.konubinix.eu/p/zzswipe-{i}", "date": f"20{10+i:02d}-01-15T12:00:00Z",
               "mimetype": "image/jpeg", "thumbnailCid": f"https://ipfs.konubinix.eu/p/zzswipe-t-{i}",
               "labels": "zzswipe", "state": "todo"} for i in range(12)]
STILL_QS = "?ms=999999"                        # a tempo no test will ever outwait
LIVE_MS, LIVE_RESUME_MS = 400, 2500
LIVE_QS = f"?ms={LIVE_MS}&idleresume={LIVE_RESUME_MS}"
LIVE_SETTLE_MS = 300
FRAME_STEP_GRACE_MS = 300

@testcase
def test_somebody_stops_to_look(page):
    """Taking the show over by hand — arrows and taps step it, two fingers don't, a
    fling coasts under control — then giving it back and letting it run on."""
    for d in SWIPE_DOCS: gql(DELETE, {"cid": d["cid"]}); gql(CREATE, {"p": d})
    try:
        open_app(page, STILL_QS)
        search_for(page, "zzswipe")
        expect(tiles(page)).to_have_count(len(SWIPE_DOCS))
        page.get_by_role("button", name=re.compile("frame", re.I)).click()
        strip = page.get_by_role("list", name="slideshow")
        expect(strip).to_be_visible()
        wait_until(page, lambda: strip.evaluate(ON_SLIDE) > 0, label="the strip settles")
        first = strip.evaluate(ON_SLIDE)
        box = strip.bounding_box(); midY = box["y"] + box["height"] / 2
        page.keyboard.press("ArrowLeft")                               # off the front → the last doc
        wait_until(page, lambda: strip.evaluate(ON_SLIDE) == len(SWIPE_DOCS),
                   label="a step back off the first lands on the last",
                   detail=lambda: f"on slide {strip.evaluate(ON_SLIDE)} of {len(SWIPE_DOCS)}")
        page.keyboard.press("ArrowRight")                              # off the end → the first
        wait_until(page, lambda: strip.evaluate(ON_SLIDE) == first)
        print("  PASS: frame wraps both ways")
        page.mouse.click(box["x"] + box["width"] / 2, midY)            # centre third → the bar
        expect(page.get_by_role("toolbar", name="frame actions")).to_be_visible()
        assert strip.evaluate(ON_SLIDE) == first, "a centre tap must not navigate"
        print("  PASS: frame centre tap reveals the bar")
        page.keyboard.press("ArrowRight")                              # focus is on the body, not a control
        wait_until(page, lambda: strip.evaluate(ON_SLIDE) == first + 1)
        page.keyboard.press("ArrowLeft")                               # back where we started
        wait_until(page, lambda: strip.evaluate(ON_SLIDE) == first)
        print("  PASS: frame arrow steps off control")
        page.mouse.click(box["x"] + box["width"] * 0.92, midY)         # right third → forward
        wait_until(page, lambda: strip.evaluate(ON_SLIDE) == first + 1)
        page.mouse.click(box["x"] + box["width"] * 0.08, midY)         # left third → back
        wait_until(page, lambda: strip.evaluate(ON_SLIDE) == first)
        print("  PASS: frame tap zones step the show")
        x = box["x"] + box["width"] * 0.92                             # the right third — a lone tap here would step forward
        cdp = page.context.new_cdp_session(page)
        cdp.send("Emulation.setTouchEmulationEnabled", {"enabled": True, "maxTouchPoints": 2})
        cdp.send("Input.dispatchTouchEvent", {"type": "touchStart",
                 "touchPoints": [{"x": x - 20, "y": midY}, {"x": x + 20, "y": midY}]})
        cdp.send("Input.dispatchTouchEvent", {"type": "touchEnd", "touchPoints": []})
        page.wait_for_timeout(FRAME_STEP_GRACE_MS)                     # long enough for a step to show
        assert strip.evaluate(ON_SLIDE) == first, "a two-finger gesture must not step the show"
        print("  PASS: frame two-finger gesture does not step")
        CONTROLLED_SLIDES = 4
        before = strip.evaluate(ON_SLIDE)
        hard_frame_flick(page, strip)
        landed = strip.evaluate(ON_SLIDE)
        assert landed - before <= CONTROLLED_SLIDES, \
            f"the swipe flung {landed - before} slides on — past the controlled range"
        print("  PASS: frame swipe does not overshoot")
        CENTRED_PX = 20
        w = strip.evaluate(SLIDE_W); rest = strip.evaluate("el => el.scrollLeft")
        off = min(rest % w, w - (rest % w))                           # distance to the nearest slide boundary
        assert off < CENTRED_PX, f"the strip rested {off:.0f}px off a slide boundary — straddling two docs"
        print("  PASS: frame swipe settles centered")
        page.go_back()
        expect(strip).to_be_hidden()
        expect(heading(page)).to_be_visible()                          # still on the app, not gone
        print("  PASS: frame exits on back")
        # …and set it going again, unattended, at a tempo worth watching
        open_app(page, LIVE_QS)
        expect(tiles(page)).to_have_count(len(SWIPE_DOCS))
        page.get_by_role("button", name=re.compile("frame", re.I)).click()
        strip = page.get_by_role("list", name="slideshow")
        expect(strip).to_be_visible()
        box = strip.bounding_box()
        opened = strip.evaluate(ON_SLIDE)                              # wherever the show resumed
        wait_until(page, lambda: strip.evaluate(ON_SLIDE) > opened,    # …and it is advancing from there
                   label="the show is running before we touch it")
        page.mouse.click(box["x"] + box["width"] / 2, box["y"] + box["height"] / 2)  # a centre tap: real interaction, no nav
        page.wait_for_timeout(LIVE_MS + LIVE_SETTLE_MS)                # let any in-flight step settle
        held = strip.evaluate(ON_SLIDE)
        page.wait_for_timeout(LIVE_RESUME_MS // 2)                     # several tempo ticks, still inside the resume span
        assert strip.evaluate(ON_SLIDE) == held, f"interaction must stop the show; it drifted {held}→{strip.evaluate(ON_SLIDE)}"
        wait_until(page, lambda: strip.evaluate(ON_SLIDE) > held)      # quiet long enough → resumes on its own
        print("  PASS: frame pauses on interaction")
    finally:
        for d in SWIPE_DOCS: gql(DELETE, {"cid": d["cid"]})

SAVE_GRACE_MS = 800

@testcase
def test_fixing_a_date(page):
    """A photo dated wrong: open it, reach for the picker (and back out of it), then
    correct the date and watch the wall re-order."""
    open_fixtures(page)
    page.keyboard.press("d")                                      # no doc open
    open_doc(page, 0)
    d = dialog(page)
    expect(d.get_by_role("button", name="edit date")).to_be_visible()   # opens in display mode…
    expect(d.get_by_label("date", exact=True)).to_have_count(0)         # …not the picker
    print("  PASS: date shortcut ignored without a doc")
    page.keyboard.press("d")
    expect(d.get_by_label("date", exact=True)).to_be_focused()
    print("  PASS: date shortcut focuses editor")
    want = page.evaluate("d => { const t = new Date(d), p = n => String(n).padStart(2, '0');"
                         " return `${t.getFullYear()}-${p(t.getMonth()+1)}-${p(t.getDate())}T${p(t.getHours())}:${p(t.getMinutes())}`; }",
                         FIXTURES[0]["date"])
    expect(d.get_by_label("date", exact=True)).to_have_value(want)   # seeded with the stored instant, in local time
    print("  PASS: date editor seeds current value")
    unmoved = tile_dates(page)                                            # the wall as it stands
    box = d.get_by_label("date", exact=True)
    box.fill("1999-01-01T00:00")
    box.press("Escape")
    expect(d).to_be_visible()                                             # still open
    page.wait_for_timeout(SAVE_GRACE_MS)                                  # room for a save to land
    assert tile_dates(page) == unmoved, f"the backed-out date was written anyway: {tile_dates(page)}"
    print("  PASS: date edit escape cancels")
    d.get_by_placeholder("add a label…").click()                  # focus the label box
    page.keyboard.press("d")
    expect(d.get_by_label("date", exact=True)).to_have_count(0)   # the picker stayed shut
    print("  PASS: date shortcut stands aside in a field")
    d.get_by_role("button", name="edit date").click()          # the date is a button — open the picker
    box = d.get_by_label("date", exact=True)
    box.fill("2020-12-15T12:00")                     # push it past the other two
    box.press("Enter")                               # save
    d.get_by_role("button", name="close").click()    # back to the wall
    expect(tiles(page)).to_have_count(len(FIXTURES))
    # the tile's alt is its day (set straight from the date, no lazy load), so the edited
    # doc — now the latest — sits last on the date-sorted wall.
    expect(thumb_imgs(page).nth(2)).to_have_attribute("alt", "2020-12-15")
    print("  PASS: lightbox edit date re-orders")

@testcase
def test_putting_words_on_a_photo(page):
    """The labelling run: several words at once, the keyboard for add and remove, the
    last word reused on the next photo, and all of it written down."""
    open_fixtures(page)
    open_doc(page, 0)
    d = dialog(page)
    expect(d).to_be_visible()
    box = d.get_by_placeholder("add a label…")
    box.click(); box.press_sequentially(FIXTURE_LABEL + "; zzmulti-a; zzmulti-b", delay=20)   # one existing + two new, typed
    box.press("Enter")
    expect(d.get_by_role("button", name="zzmulti-a", exact=True)).to_be_visible()
    expect(d.get_by_role("button", name="zzmulti-b", exact=True)).to_be_visible()
    expect(d.get_by_role("button", name=FIXTURE_LABEL, exact=True)).to_have_count(1)  # not duplicated
    print("  PASS: lightbox adds several labels")
    box.click(); box.press_sequentially("zzlbret", delay=10); box.press("Enter")
    expect(d.get_by_role("button", name="zzlbret", exact=True)).to_be_visible()    # added
    box.press_sequentially("zzlbret", delay=10); box.press("Shift+Enter")
    expect(d.get_by_role("button", name="zzlbret", exact=True)).to_have_count(0)   # removed
    print("  PASS: lightbox enter adds, shift-enter removes")
    box.fill("zzreuse"); box.press("Enter")
    expect(d.get_by_role("button", name="zzreuse", exact=True)).to_be_visible()  # applied here
    d.get_by_role("button", name="next photo").click()
    reuse = d.get_by_role("button", name="＋ zzreuse", exact=True)
    expect(reuse).to_be_visible()                                                # offered on the next
    reuse.click()
    expect(d.get_by_role("button", name="zzreuse", exact=True)).to_be_visible()  # reused, no retype
    print("  PASS: lightbox reuse last label")
    box.click(); box.press_sequentially("lbadded", delay=20); box.press("Enter")
    d.get_by_role("button", name="remove " + FIXTURE_LABEL).click()
    d.get_by_role("button", name="close").click()
    search_for(page, "lbadded")                             # the word put on: the photo answers
    expect(tiles(page)).to_have_count(1)
    search_for(page, FIXTURE_LABEL)                         # the word taken off: it no longer does
    expect(tiles(page)).to_have_count(len(FIXTURES) - 1)
    print("  PASS: lightbox edits labels")

@testcase
def test_saying_no_quickly(page):
    """Running down a stack marking rejects: it asks the first time, takes Shift for the
    rest, and stays out of the way while you are typing."""
    open_fixtures(page)
    open_doc(page, 0)
    d = dialog(page)
    del_btn = d.get_by_role("button", name="delete", exact=True)
    expect(del_btn).to_have_attribute("aria-pressed", "false")
    asked = []
    page.on("dialog", lambda dlg: (asked.append(dlg.message), dlg.accept()))
    page.keyboard.press("Delete")
    expect(del_btn).to_have_attribute("aria-pressed", "true")   # moved to delete
    assert asked, "Delete should have asked to confirm"
    print("  PASS: lightbox delete confirms")
    d.get_by_role("button", name="next photo").click()
    expect(del_btn).to_have_attribute("aria-pressed", "false")   # a fresh doc, not yet condemned
    asked.clear()
    page.keyboard.press("Shift+Delete")
    expect(del_btn).to_have_attribute("aria-pressed", "true")
    assert not asked, "Shift+Delete should not ask to confirm"
    print("  PASS: lightbox shift-delete skips confirm")
    d.get_by_role("button", name="next photo").click()
    expect(del_btn).to_have_attribute("aria-pressed", "false")
    box = d.get_by_placeholder("add a label…")
    box.click(); box.press_sequentially("zzoops", delay=10)
    box.press("ArrowLeft"); box.press("Delete")                  # rubbing out the last letter
    expect(box).to_have_value("zzoop")
    expect(del_btn).to_have_attribute("aria-pressed", "false")   # the photo is untouched
    print("  PASS: lightbox delete in a field is text editing")

@testcase
def test_judging_a_run_down_to_nothing(page):
    """Working a filter to the end: each judgement hands you the next photo, the last
    comes round to the first, and emptying the run closes it."""
    make_fixtures()
    fourth = {"cid": "https://ipfs.konubinix.eu/p/zzbatchfix-3", "date": "2020-04-15T12:00:00Z", "mimetype": "image/jpeg",
              "thumbnailCid": "https://ipfs.konubinix.eu/p/zzbatchfix-thumb-3", "labels": FIXTURE_LABEL, "state": "todo"}
    gql(DELETE, {"cid": fourth["cid"]}); gql(CREATE, {"p": fourth})
    for f in FIXTURES[1:]:
        gql(UPDATE, {"cid": f["cid"], "patch": {"state": "todo"}})    # four todos, Jan..Apr
    try:
        open_app(page)
        search_for(page, FIXTURE_LABEL)
        expect(tiles(page)).to_have_count(4)                  # default filter is todo
        expect(thumb_imgs(page).nth(3)).to_have_attribute("src", re.compile(r"/ipfs/"))  # loaded, not still blank
        behind, ahead = (thumb_imgs(page).nth(i).get_attribute("src") for i in (0, 2))
        open_doc(page, 1)                                     # the second of four
        d = dialog(page)
        img = d.get_by_role("img")
        d.get_by_role("button", name="done", exact=True).click()   # leaves the todo filter
        expect(d).to_be_visible()                             # still open…
        expect(img).to_have_attribute("src", ahead)           # …on the doc that took its place
        assert img.get_attribute("src") != behind, "the modal stepped backwards"
        print("  PASS: judging one lands on the next, not the previous")
        onto_last = thumb_imgs(page).nth(2).get_attribute("src")   # the last of the three left
        d.get_by_role("button", name="next photo").click()
        expect(img).to_have_attribute("src", onto_last)            # settled on it before judging it
        d.get_by_role("button", name="done", exact=True).click()
        expect(d).to_be_visible()
        expect(img).to_have_attribute("src", behind)          # round to the first, not back to the end
        print("  PASS: judging the last comes round to the first")
        d.get_by_role("button", name="done", exact=True).click()
        expect(img).to_have_attribute("src", ahead)           # round again, to the one still standing…
        d.get_by_role("button", name="done", exact=True).click()
        expect(d).to_be_hidden()                              # …and with that one gone, nothing to show
        expect(tiles(page)).to_have_count(0)
        print("  PASS: the last one judged closes the run")
    finally:
        gql(DELETE, {"cid": fourth["cid"]})

@testcase
def test_doing_one_thing_to_forty_photos(page):
    """Taking a run in hand: pick it up without the wall moving, then put a word on all
    of it and take it off again, by button and by key."""
    open_fixtures(page)
    n = tiles(page).count()
    t = tiles(page)
    expect(toolbar(page)).to_be_hidden()       # nothing picked yet, so the bar is not there
    before = t.first.bounding_box()
    t.nth(0).click()                           # the first pick — the bar arrives on this one
    expect(toolbar(page)).to_be_visible()
    after = t.first.bounding_box()
    assert abs(before["y"] - after["y"]) < 1, f"grid shifted: {before['y']} -> {after['y']}"
    print("  PASS: select doesn't shift grid")
    t.nth(1).click()                           # a second one joins it
    expect(checks(page)).to_have_count(2)
    expect(toolbar(page).get_by_text("2 selected")).to_be_visible()
    t.nth(0).click()                           # toggle one back off
    expect(checks(page)).to_have_count(1)
    print("  PASS: select toggles tiles")
    select_all(page).click()
    tb = toolbar(page)
    tb.get_by_placeholder("add a label…").fill("addedbybatch")
    tb.get_by_role("button", name="add label").click()
    expect(checks(page)).to_have_count(0)            # selection clears once applied
    search_for(page, "addedbybatch")                # the fresh word now finds them all
    expect(tiles(page)).to_have_count(n)
    print("  PASS: batch add label")
    select_all(page).click()
    tb.get_by_placeholder("add a label…").fill("addedbybatch")
    tb.get_by_role("button", name="remove label").click()
    expect(tiles(page)).to_have_count(0)
    print("  PASS: batch remove label")
    search_for(page, FIXTURE_LABEL)                  # back to the run itself
    expect(tiles(page)).to_have_count(n)
    select_all(page).click()
    box = toolbar(page).get_by_placeholder("add a label…")
    box.click(); box.press_sequentially("zzbatchret")
    expect(box).to_have_value("zzbatchret")          # the word is in the live box
    box.press("Enter")                               # ＋ via RET
    expect(checks(page)).to_have_count(0)            # applied → selection clears
    search_for(page, "zzbatchret")
    expect(tiles(page)).to_have_count(n)             # every selected photo got it
    print("  PASS: batch enter adds")
    select_all(page).click()
    expect(checks(page)).to_have_count(n)            # selection settled
    box.click(); box.press_sequentially("zzbatchret")
    expect(box).to_have_value("zzbatchret")          # the word is in the live box
    box.press("Shift+Enter")                         # － via S-RET
    expect(tiles(page)).to_have_count(0)             # the docs no longer carry the label → gone from the wall
    print("  PASS: batch shift-enter removes")
    search_for(page, FIXTURE_LABEL)
    expect(tiles(page)).to_have_count(n)
    select_all(page).click()
    tb.get_by_placeholder("add a label…").fill(FIXTURE_LABEL + "; ")   # as a picked suggestion leaves it
    tb.get_by_role("button", name="remove label").click()
    expect(tiles(page)).to_have_count(0)             # the trailing sep didn't defeat the match
    print("  PASS: batch remove label trailing separator")

HUNT_LABEL = "zzhunt"
HUNT_DOCS = [
    # (day, owner) — June across three years, a March, and one that is not mine
    ("2019-06-15", "konubinix"), ("2020-06-15", "konubinix"), ("2021-06-10", "konubinix"),
    ("2020-03-20", "konubinix"), ("2020-06-20", "aylapomme"), ("2020-06-25", "konubinix"),
]

def hunt_docs():
    return [{"cid": f"https://ipfs.konubinix.eu/p/zzhunt-{i}", "date": f"{day}T12:00:00Z", "mimetype": "image/jpeg",
             "thumbnailCid": f"https://ipfs.konubinix.eu/p/zzhunt-{i}-t", "labels": HUNT_LABEL, "state": "todo",
             "owner": owner}
            for i, (day, owner) in enumerate(HUNT_DOCS)]

def narrow(page, *tokens):
    search_for(page, "; ".join([HUNT_LABEL, *tokens]))

@testcase
def test_hunting_for_a_photo(page):
    """Finding a photo from what memory kept: whose, what month, what year, what day —
    each guess cutting the wall down, and one taken back giving its share straight
    back."""
    docs = hunt_docs()
    for d in docs: gql(DELETE, {"cid": d["cid"]}); gql(CREATE, {"p": d})
    try:
        open_app(page); chip(page, "all").click()
        narrow(page)
        expect(tiles(page)).to_have_count(len(docs))      # nothing guessed yet
        narrow(page, "owner:konubinix")
        expect(tiles(page)).to_have_count(5)                  # everyone else's set aside
        print("  PASS: filter by owner")
        narrow(page, "owner:konubinix", "month:6")
        expect(tiles(page)).to_have_count(4)                  # every June, whatever the year
        narrow(page, "owner:konubinix", "month:march")        # named, not numbered
        expect(tiles(page)).to_have_count(1)
        print("  PASS: filter by month")
        narrow(page, "owner:konubinix", "month:6", "year:2020")
        expect(tiles(page)).to_have_count(2)                  # of those Junes, the one year
        print("  PASS: filter by year")
        narrow(page, "owner:konubinix", "month:6")            # the year guess withdrawn
        expect(tiles(page)).to_have_count(4)                  # its Junes returned, and no more
        print("  PASS: a withdrawn guess costs only itself")
        narrow(page, "owner:konubinix", "date:2020-06")       # the month and the year, in one token
        expect(tiles(page)).to_have_count(2)                  # the same two the pair had left
        narrow(page, "owner:konubinix", "date:2020-06-15")    # and down to the day
        expect(tiles(page)).to_have_count(1)
        expect(thumb_imgs(page).first).to_have_attribute("alt", "2020-06-15")   # the one asked for
        print("  PASS: filter by date")
    finally:
        for d in docs:
            try: gql(DELETE, {"cid": d["cid"]})
            except Exception: pass

VOCAB_ADD = "mutation($w:String!){ createLabelVocab(input:{labelVocab:{word:$w, n:1}}){ clientMutationId } }"
VOCAB_DEL = "mutation($w:String!){ deleteLabelVocab(input:{word:$w}){ clientMutationId } }"

HALF_KNOWN = ["zzcosmo", "Zzélodie", "zzupa", "zzupb", "zzbalade", "zzalois"]

def seed_vocab(words):
    for w in words: gql(VOCAB_DEL, {"w": w}); gql(VOCAB_ADD, {"w": w})

def drop_vocab(words):
    for w in words:
        try: gql(VOCAB_DEL, {"w": w})
        except Exception: pass

def guess(page, fragment):
    sb = search_box(page)
    sb.fill(""); sb.click()
    sb.press_sequentially(fragment, delay=20)
    expect(options(page).first).to_be_visible()

@testcase
def test_typing_a_word_you_half_know(page):
    """Building a query out of half-memories: a fragment from the middle of a word, a
    word whose spelling you are unsure of, and the list staying with you throughout."""
    seed_vocab(HALF_KNOWN)
    try:
        open_app(page)
        sb = search_box(page)
        guess(page, "osmo")                              # sits inside zzcosmo, nowhere near its start
        expect(options(page).filter(has_text="zzcosmo").first).to_be_visible()
        print("  PASS: completion matches inside label")
        guess(page, "zzelod")                            # no capital, no accent
        texts = [t.strip() for t in options(page).all_inner_texts()]
        assert "Zzélodie" in texts, f"expected the label as written, got {texts}"
        options(page).filter(has_text="Zzélodie").first.click()
        expect(sb).to_have_value("Zzélodie; ")
        print("  PASS: completion preserves case and accent")
        guess(page, "zzup")                              # two words, so there is a bottom to enter at
        items = [t.strip() for t in options(page).all_inner_texts()]
        assert items == ["zzupa", "zzupb"], f"unexpected suggestions: {items}"
        sb.press("ArrowUp")                              # from nothing selected — must enter at the bottom
        sel = page.get_by_role("option", selected=True)
        assert sel.count() == 1 and sel.inner_text().strip() == "zzupb", \
            "ArrowUp from none should select the last suggestion"
        print("  PASS: suggestion up enters from none")
        guess(page, "zzbal")                                     # a fragment of one word we know
        word = options(page).first.inner_text().strip()
        options(page).first.click()
        expect(sb).to_have_value(word + "; ")                    # the picked label, then a ';' for the next
        print("  PASS: label completion")
        page.keyboard.type("zzalo", delay=20)                    # straight on, into whatever holds the keys
        expect(options(page).filter(has_text="zzalois").first).to_be_visible()   # must reappear
        print("  PASS: completion reopens after pick")
        guess(page, "zzup")
        offered = [t.strip() for t in options(page).all_inner_texts()]
        assert len(offered) == 2, f"this needs two to choose between, got {offered}"
        sb.press("ArrowDown"); sb.press("ArrowDown")             # past the first, onto the second
        sb.press("Enter")                                        # apply the highlighted one
        expect(sb).to_have_value(offered[1] + "; ")              # the second — taking the first is the easy bug
        print("  PASS: search suggestion keyboard")
        guess(page, "owner")                                        # 2+ chars → the key is offered
        expect(options(page).filter(has_text="owner:").first).to_be_visible()
        sb.press_sequentially(":k", delay=20)                       # owner:k → its values
        opt = options(page).filter(has_text="konubinix").first
        expect(opt).to_be_visible()
        opt.click()
        expect(sb).to_have_value("owner:konubinix; ")               # a closed-vocab value is done — a ';' opens the next token
        print("  PASS: owner token completes")
    finally:
        drop_vocab(HALF_KNOWN)

KEY_N = 24

def key_docs():
    return [{"cid": f"https://ipfs.konubinix.eu/p/zzkey-{i}", "date": f"2021-01-{i + 1:02d}T12:00:00Z",
             "mimetype": "image/jpeg", "thumbnailCid": f"https://ipfs.konubinix.eu/p/zzkey-t-{i}",
             "labels": "zzkey", "state": "todo"} for i in range(KEY_N)]

def key_thumb(i):
    return f"https://ipfs.konubinix.eu/p/zzkey-t-{i}"

@testcase
def test_working_the_wall_without_the_mouse(page):
    """Running a wall down from the keys: walk it, open one, pick one, drag a run to
    the foot of it, and gather the lot."""
    docs = key_docs()
    for d in docs: gql(DELETE, {"cid": d["cid"]}); gql(CREATE, {"p": d})
    try:
        page.set_viewport_size({"width": 420, "height": 600})   # narrow and short: it overflows
        open_app(page)
        search_for(page, "zzkey")
        expect(tiles(page)).to_have_count(KEY_N)
        page.keyboard.press("ArrowRight")               # the first arrow focuses the first tile
        page.keyboard.press("ArrowRight")               # → the second
        page.keyboard.press("Enter")                    # Enter opens the focused doc
        d = dialog(page)
        expect(d.get_by_role("img")).to_have_attribute("src", key_thumb(1))
        page.keyboard.press("Escape")
        expect(d).to_be_hidden()
        print("  PASS: grid cursor opens focused doc")
        expect(checks(page)).to_have_count(0)           # nothing picked by walking about
        page.keyboard.press(" ")                        # Space picks the focused one
        expect(checks(page)).to_have_count(1)
        page.keyboard.press(" ")                        # Space again unpicks it
        expect(checks(page)).to_have_count(0)
        print("  PASS: grid cursor space toggles selection")
        tiles(page).nth(5).click()                       # reach for the mouse for one tile
        page.keyboard.press("ArrowRight")               # the arrows carry on from there
        page.keyboard.press("Enter")                     # open the now-focused tile
        expect(dialog(page).get_by_role("img")).to_have_attribute("src", key_thumb(6))
        page.keyboard.press("Escape")
        toolbar(page).get_by_role("button", name="clear").click()   # drop what the click picked up
        expect(checks(page)).to_have_count(0)
        print("  PASS: cursor starts at last clicked tile")
        page.keyboard.press("ArrowRight")               # a plain move re-anchors where it lands
        expect(checks(page)).to_have_count(0)           # and selects nothing
        page.keyboard.press("Shift+ArrowRight")         # reach on…
        page.keyboard.press("Shift+ArrowRight")         # …and on again
        expect(checks(page)).to_have_count(3)           # the whole run from the anchor
        print("  PASS: grid cursor shift extends selection")
        page.keyboard.press("Shift+ArrowLeft")          # back one → the far end drops off
        expect(checks(page)).to_have_count(2)
        page.keyboard.press("Shift+ArrowLeft")          # back onto the anchor → only it remains
        expect(checks(page)).to_have_count(1)
        toolbar(page).get_by_role("button", name="clear").click()
        expect(checks(page)).to_have_count(0)
        print("  PASS: grid cursor shift reduces on return")
        tiles(page).nth(0).click()                      # plant the cursor at the top-left
        toolbar(page).get_by_role("button", name="clear").click()
        cols = grid(page).evaluate("el => getComputedStyle(el).gridTemplateColumns.split(' ').length")
        page.keyboard.press("ArrowDown")                # → one row down, i.e. index `cols`
        page.keyboard.press("Enter")
        expect(dialog(page).get_by_role("img")).to_have_attribute("src", key_thumb(cols))
        page.keyboard.press("Escape")
        print("  PASS: grid cursor down steps a row")
        tiles(page).nth(0).click()                               # start the run at the top-left
        for _ in range(KEY_N): page.keyboard.press("Shift+ArrowDown")   # drag it down past the fold
        last = tiles(page).nth(KEY_N - 1).bounding_box()
        bar = toolbar(page).bounding_box()                       # the run raised the toolbar
        assert last["y"] >= 0, f"tile head scrolled above the fold: {last}"
        assert last["y"] + last["height"] <= bar["y"] + 1, f"tile foot behind the toolbar: {last} vs {bar}"
        toolbar(page).get_by_role("button", name="clear").click()
        print("  PASS: grid cursor reveals tile above toolbar")
        for _ in range(KEY_N): page.keyboard.press("ArrowUp")    # climb back out, plain moves
        first = tiles(page).nth(0).bounding_box()
        assert first["y"] >= 0, f"the cursor climbed above the fold and stayed there: {first}"
        print("  PASS: grid cursor reveals a tile climbed back to")
        page.keyboard.press("Control+a")
        expect(checks(page)).to_have_count(KEY_N)       # the whole wall at once
        print("  PASS: ctrl+a selects whole wall")
    finally:
        for d in docs: gql(DELETE, {"cid": d["cid"]})

@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, on, For, Index, Show, onMount, onCleanup } from 'solid-js';
import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';
import { client, getAuthNeeded, subscribeAuth, queryFresh } 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'));
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: calc(12px + env(safe-area-inset-top))    calc(12px + env(safe-area-inset-right))
               calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); }
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; }

page.route("**/graphql", lambda route: route.fulfill(
    status=500, content_type="text/plain", body="Server Error"))
open_app(page)
expect(page.get_by_role("alert")).to_contain_text(re.compile("load|reach|server", re.I))

expect(page.get_by_text("No photos.", exact=True)).to_have_count(0)

<${Show} when=${() => photos.error && !authNeeded()}>
  <div class="loadwall" role="alert">
    <strong>Couldn't load your photos.</strong>
    The server returned an error — try again in a moment.
  </div>
<//>

.loadwall{ background:#e5484d; color:#fff; padding:10px 14px; border-radius:8px;
           margin:0 0 12px; line-height:1.45; }
.loadwall 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!, $pick:String){
  photovideosSample(${PHOTO_FILTER_ARGS}, states:$states, cap:$cap, pick:$pick, first:8000){
    nodes{ ...PhotoCore state myrandom owner }
  }
  photovideosCount(${PHOTO_FILTER_ARGS}, states:$states)
}
${PHOTO_CORE}`;
const fetchPhotos = async (key, signal) => {
    const d = await queryFresh(SEARCH, { ...photoVars(key), states: key.state === 'all' ? null : [key.state],
                                         cap: key.cap ?? SAMPLE_CAP, pick: key.pick ?? null }, signal);
    const nodes = d?.photovideosSample?.nodes ?? [];
    const total = d?.photovideosCount ?? nodes.length;
    return { items: nodes, total, sampled: nodes.length < total, pick: key.pick ?? null };
};

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

narrow(page, "owner:konubinix")
expect(tiles(page)).to_have_count(5)                  # everyone else's set aside
print("  PASS: filter by owner")

narrow(page, "owner:konubinix", "month:6")
expect(tiles(page)).to_have_count(4)                  # every June, whatever the year
narrow(page, "owner:konubinix", "month:march")        # named, not numbered
expect(tiles(page)).to_have_count(1)
print("  PASS: filter by month")

narrow(page, "owner:konubinix", "month:6", "year:2020")
expect(tiles(page)).to_have_count(2)                  # of those Junes, the one year
print("  PASS: filter by year")

narrow(page, "owner:konubinix", "month:6")            # the year guess withdrawn
expect(tiles(page)).to_have_count(4)                  # its Junes returned, and no more
print("  PASS: a withdrawn guess costs only itself")

narrow(page, "owner:konubinix", "date:2020-06")       # the month and the year, in one token
expect(tiles(page)).to_have_count(2)                  # the same two the pair had left
narrow(page, "owner:konubinix", "date:2020-06-15")    # and down to the day
expect(tiles(page)).to_have_count(1)
expect(thumb_imgs(page).first).to_have_attribute("alt", "2020-06-15")   # the one asked for
print("  PASS: filter by date")

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);
    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 [sugLoading, setSugLoading] = createSignal(false);   // the focused box's list is fetching
    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); }
    };
    const pickSearch = w => { const [s, e] = segSpan(search(), caret());
        const lead = (search().slice(s, e).match(/^\s*/) || [''])[0];
        // still drillable → hold the box on this token
        const drilling = w.endsWith(':') || dslSuggestions(w).some(v => v.length > w.length);
        const tail = drilling ? '' : '; ';
        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('');
    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)));
    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);
    };
    const REFINE_CELL = 300;                    // drawn px
    const [cellPx, setCellPx] = createSignal(0);
    const measureCell = () => gridEl && setCellPx(parseFloat(getComputedStyle(gridEl).gridTemplateColumns) || 0);
    const watchCell = el => { const ro = new ResizeObserver(measureCell);
                              ro.observe(el); onCleanup(() => ro.disconnect()); };
    createEffect(() => { thumbSize(); measureCell(); });   // the slider moves the columns, not the grid's box
    const [thumbsInFlight, setThumbsInFlight] = createSignal(0);
    const refining = () => cellPx() > REFINE_CELL && thumbsInFlight() === 0;
    // 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.
    // the wall reads a COMMITTED query, not the live text — see the commit-search prose. Typing
    // updates the box + its completions; the wall re-reads only on commit (Enter / search button)
    // or a state chip. Seeded from the persisted search so the wall loads on first paint.
    const [committed, setCommitted] = createSignal(search());
    const commit = () => setCommitted(search());
    const dirty = () => search() !== committed();   // typed but not yet run → the wall is stale (see prose)
    const queryStr = createMemo(() => { const p = parseQuery(committed());
        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, events: p.events, eventsX: p.eventsX,
                                cap: p.cap, pick: p.pick, state: stateFilter() }); });
    const [mutating, setMutating] = createSignal(0);   // in-flight edit count → aria-busy
    // FREEZE: advance to the committed query only when idle — see the commit-search prose.
    const target = createMemo(() => ({ key: queryStr(), label: committed().trim() }));
    const [running, setRunning] = createSignal(target());
    let readCtl = null;                                // the in-flight read's AbortController, for the escape hatch
    const [photos, { refetch }] = createResource(() => JSON.parse(running().key),
        async (key, info) => { readCtl = new AbortController();
            try { return await fetchPhotos(key, readCtl.signal); }
            catch(e){ if(e && e.name === 'AbortError') return info.value ?? { items: [], total: 0, sampled: false }; throw e; } });
    createEffect(() => { if(!photos.loading && target().key !== running().key) setRunning(target()); });
    // ESCAPE HATCH: flush to lastSettled + abort the in-flight read — see the cancel-flow prose.
    const [lastSettled, setLastSettled] = createSignal(null);
    createEffect(() => { if(!photos.loading && !photos.error) setLastSettled(running()); });
    const cancelRead = () => {
        if(!photos.loading) return;
        const ctl = readCtl, s = lastSettled();
        if(s && s.key !== running().key){ setSearch(s.label); setCommitted(s.label); setRunning(s); }
        else { setSearch(''); setCommitted(''); setRunning(target()); }   // boot / no prior → everything
        ctl?.abort();
    };
    onMount(() => {   // Esc bails out of a frozen read (Back bails too, via the exit guard)
        const onEsc = e => { if(e.key === 'Escape' && photos.loading && !opened() && !frame()){ e.preventDefault(); cancelRead(); } };
        window.addEventListener('keydown', onEsc);
        onCleanup(() => window.removeEventListener('keydown', onEsc));
    });
    onMount(() => {   // suppress the OS context menu on our surfaces; text fields keep it (paste/select)
        const noMenu = e => { if(!e.target.closest('input, textarea, [contenteditable]')) e.preventDefault(); };
        window.addEventListener('contextmenu', noMenu);
        onCleanup(() => window.removeEventListener('contextmenu', noMenu));
    });
    const sortKey = createMemo(() => parseQuery(search()).sort);
    const total = () => photos()?.total ?? 0;          // how many actually match
    const items = createMemo(() => { const a = (photos.error ? undefined : photos())?.items ?? [];   // shown docs, in wall order
        return sortKey() === 'random' ? [...a].sort((x, y) => (x.myrandom ?? 0) - (y.myrandom ?? 0)) : a; });
    const eventWindow = createMemo(() => { const k = JSON.parse(running().key);
                                           return JSON.stringify({ since: k.since, until: k.until }); });
    const [wallEvents] = createResource(eventWindow, w => fetchWindowEvents(JSON.parse(w)));
    const docEvents = photo => { const evs = wallEvents(); if(!evs || !photo.owner) return [];
        const t = new Date(photo.date).getTime();
        return evs.filter(e => e.owner === photo.owner
            && new Date(e.starttime).getTime() <= t && t <= new Date(e.endtime).getTime()); };
    const EVENT_HUES = ['#8ecae6', '#ffb703', '#90be6d', '#ff8fab', '#bdb2ff', '#ffd6a5', '#a0c4ff', '#caffbf'];
    const eventKey = e => e.summary + '|' + e.starttime + '|' + e.owner;
    const eventColour = createMemo(() => { const m = new Map(); let i = 0;
        for(const p of items()) for(const e of docEvents(p))
            if(!m.has(eventKey(e))) m.set(eventKey(e), EVENT_HUES[i++ % EVENT_HUES.length]);
        return m; });
    const STATES = ['todo', 'next', 'done', 'delete'];
    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);
    const [allMatching, setAllMatching] = createSignal(false);
    const canRange = () => !photos()?.sampled || !!photos()?.pick;
    createEffect(() => { if(!canRange()) setRangeMode(false); });
    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;
    }); };
    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()));
    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; });
    };
    const extendRun = cid => {
        if(!canRange()) return;
        const list = items();
        const a = list.findIndex(p => p.cid === anchor()), ni = list.findIndex(p => p.cid === cid);
        if(a < 0 || ni < 0) return;
        if(!extending){ extending = true; rangeBase = new Set(selected()); }
        const [lo, hi] = a < ni ? [a, ni] : [ni, a];
        setSelected(new Set([...rangeBase, ...list.slice(lo, hi + 1).map(p => p.cid)]));
    };
    const onTileClick = (e, cid) => {
        setCursor(cid);
        if((e.shiftKey || rangeMode()) && anchor() !== null && canRange()){
            extendTo(cid); setRangeMode(false); return;
        }
        toggle(cid); setAnchor(cid);
    };
    const armRange = cid => {
        if(!canRange()) return;
        setSelected(s => { const n = new Set(s); n.add(cid); return n; });
        setAnchor(cid); setRangeMode(true); extending = false;
    };
    const tileCidAt = (x, y) => {
        const tile = document.elementFromPoint(x, y)?.closest('.tile');
        if(!tile || !gridEl) return null;
        const i = [...gridEl.children].indexOf(tile);
        return i < 0 ? null : items()[i]?.cid;
    };
    let lpTimer = null, lpFired = false, lpAt = null, lpEl = null, lpId = null, lpMoved = false, lpPos = null, lpRaf = 0;
    const lpCancel = () => { clearTimeout(lpTimer); lpTimer = null; };
    const dragExtendAt = (x, y) => { const cid = tileCidAt(x, y); if(cid){ extendRun(cid); lpMoved = true; } };
    const EDGE = 48, SCROLL_STEP = 14;
    const dragTick = () => {
        lpRaf = 0;
        if(!lpFired || !lpPos) return;
        const bar = document.querySelector('.toolbar');
        const floor = innerHeight - (bar ? bar.getBoundingClientRect().height : 0);
        const dy = lpPos.y < EDGE ? -SCROLL_STEP : lpPos.y > floor - EDGE ? SCROLL_STEP : 0;
        if(!dy) return;                                    // finger left the margin → stop the loop
        scrollBy(0, dy);
        dragExtendAt(lpPos.x, Math.max(EDGE, Math.min(lpPos.y, floor - 1)));   // hit-test clear of the bar
        lpRaf = requestAnimationFrame(dragTick);
    };
    const onTileDown = (e, photo) => {
        lpFired = false; lpMoved = false; lpAt = { x: e.clientX, y: e.clientY };
        lpEl = e.currentTarget; lpId = e.pointerId; lpCancel();
        lpTimer = setTimeout(() => { lpFired = true; lpCancel();
            try { lpEl.setPointerCapture(lpId); } catch(_){}
            armRange(photo.cid); }, 500);
    };
    const onTileMove = e => {
        if(lpFired){
            lpPos = { x: e.clientX, y: e.clientY };
            dragExtendAt(e.clientX, e.clientY);
            if(!lpRaf) dragTick();
            return;
        }
        if(lpAt && Math.hypot(e.clientX - lpAt.x, e.clientY - lpAt.y) > 10) lpCancel();
    };
    const dragStop = () => { if(lpRaf){ cancelAnimationFrame(lpRaf); lpRaf = 0; } lpPos = null; };
    const onTileUp = () => { if(lpFired && lpMoved){ setRangeMode(false); extending = false; } dragStop(); lpCancel(); };
    const onTilePress = (e, cid) => { if(lpFired){ lpFired = false; return; } onTileClick(e, cid); };
    onMount(() => gridEl?.addEventListener('touchmove',
        e => { if(lpFired) e.preventDefault(); }, { passive: false }));
    async function patchSelected(patchFor){
        setMutating(m => m + 1);
        try {
            const byCid = new Map(items().map(p => [p.cid, p]));
            for(const cid of selected()){
                const patch = patchFor(byCid.get(cid));
                if(patch) await gql(UPDATE_PHOTO, { cid, patch });
            }
            clearSel();
            await refetch();
        } finally { setMutating(m => m - 1); }
    }
    const splitWords = s => (s || '').split(';').map(x => x.trim()).filter(Boolean);
    const splitLabels = p => splitWords(p.labels);
    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){
        setMutating(m => m + 1);
        try { await gql(BULK(kind), { ...filterVars(), v }, PV_CTX); clearSel(); await refetch(); }
        finally { setMutating(m => m - 1); }
    }
    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 }));
    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 === 'web' ? p.webCid : p.cid;
            if(!path) continue;
            const isVid = (p.mimetype || '').startsWith('video');
            const ext = 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 [moveText, setMoveText] = createSignal('');
    const [moveFocus, setMoveFocus] = createSignal(false);
    const [moveTarget, setMoveTarget] = createSignal(null);   // the armed occasion, or null → nothing to apply
    const [moveEvents] = createResource(moveFocus,
        f => f ? fetchWindowEvents({ since: '1900-01-01T00:00:00Z', until: '2100-01-01T00:00:00Z' }) : []);
    const selectedDocs = () => { const byCid = new Map(items().map(p => [p.cid, p]));
        return [...selected()].map(c => byCid.get(c)).filter(Boolean); };
    const selMean = () => { const ts = selectedDocs().map(p => new Date(p.date).getTime()).filter(n => !isNaN(n));
        return ts.length ? ts.reduce((a, b) => a + b, 0) / ts.length : null; };
    const eventDist = (e, mean) => { if(mean == null) return 0;
        const s = new Date(e.starttime).getTime(), en = new Date(e.endtime).getTime();
        return mean < s ? s - mean : mean > en ? mean - en : 0; };
    const selOwners = () => new Set(selectedDocs().map(p => p.owner).filter(Boolean));
    const moveCandidates = () => { const q = moveText().trim().toLowerCase(), mean = selMean(), owners = selOwners();
        return (moveEvents() || []).filter(e => owners.has(e.owner))
            .filter(e => !q || (e.summary || '').toLowerCase().includes(q))
            .sort((a, b) => eventDist(a, mean) - eventDist(b, mean) || new Date(a.starttime) - new Date(b.starttime))
            .slice(0, 8); };
    const pickMove = e => { setMoveTarget(e); setMoveText(e.summary); setMoveFocus(false); };
    const moveToEvent = async () => { const ev = moveTarget(); if(!ev) return;
        await patchSelected(p => p.owner === ev.owner ? { date: ev.starttime } : null);
        setMoveText(''); setMoveTarget(null); };
    createEffect(() => { if(moveFocus()) reportSug(moveCandidates()); });
    createEffect(() => { selected(); setMoveText(''); setMoveTarget(null); });
    const [datingSel, setDatingSel] = createSignal(false);   // is the picker open?
    const [selDate, setSelDate] = createSignal('');          // its datetime-local value
    const openSelDate = () => { const m = selMean();
        setSelDate(m != null ? toLocalInput(new Date(m).toISOString()) : '');
        setDatingSel(true); };
    const stampSelDate = async () => { const v = selDate(); if(!v) return;
        await patchSelected(() => ({ date: new Date(v).toISOString() }));
        setDatingSel(false); };
    const [opened, setOpened] = createSignal(null);
    const [lbText, setLbText] = createSignal('');
    const [lbFocus, setLbFocus] = createSignal(false);
    const [editingDate, setEditingDate] = createSignal(false);
    const isVideo = p => (p?.mimetype || '').startsWith('video');
    const mediaSrc = p => IPFS + (p?.webCid || p?.thumbnailCid || '');
    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 });
        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('; '));
    const lbDrop = input => { const words = splitWords(input); if(!words.length) return;
        setLbText(''); return applyLabels(labelsOf(opened()).filter(x => !words.includes(x)).join('; ')); };
    async function lbPatch(patch){
        const list = items(), cur = opened(); if(!cur) return;
        const i = list.findIndex(p => p.cid === cur.cid);
        const nextCid = list.length > 1 ? list[(i + 1) % list.length].cid : null;
        await gql(UPDATE_PHOTO, { cid: cur.cid, patch });
        await refetch();
        requestAnimationFrame(() => {
            const l2 = items(); if(!l2.length){ dismissPhoto(); return; }
            const stay = l2.find(p => p.cid === cur.cid);
            setOpened(stay || (nextCid && l2.find(p => p.cid === nextCid)) || l2[0]);
        });
    }
    const lbSetState = st => lbPatch({ state: st });
    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('');
    };
    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);
    };
    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;
            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(); }
                else if(v.paused) v.play(); else v.pause();
            }
        };
        window.addEventListener('keydown', onKey);
        onCleanup(() => window.removeEventListener('keydown', onKey));
    });
    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
    const frameDoc = () => items().find(p => p.cid === frameCenterCid());   // the centred doc
    const [frameEditingDate, setFrameEditingDate] = createSignal(false);
    const [frameCenterIdx, setFrameCenterIdx] = createSignal(1);
    const [frameDir, setFrameDir] = createSignal(1);                  // last travel direction (+1 forward)
    const FRAME_MS = Number(new URLSearchParams(location.search).get('ms')) || 60000;
    const [intervalMs, setIntervalMs] = createSignal(FRAME_MS);
    const FRAME_IDLE_MS = Number(new URLSearchParams(location.search).get('idleresume')) || 60000;
    const [pokes, setPokes] = createSignal(0);
    const nudge = () => setPokes(n => n + 1);
    const [interacting, setInteracting] = createSignal(false);
    const [zoomed, setZoomed] = createSignal(false);
    const frameSlides = () => { const o = items();
        return o.length ? [o[o.length - 1], ...o, o[0]] : []; };
    let stripEl, wakeLock = null;
    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){ const i = slideAt(), c = frameCenterIdx();
            if(i !== c){ setFrameDir(i > c ? 1 : -1); setFrameCenterIdx(i); } }
        clearTimeout(snapT); snapT = setTimeout(() => {
        if(!stripEl) return;
        if(zoomed()) 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];
        setFrameCenterIdx(i);
        if(doc){ localStorage.setItem(FRAME_CID_KEY, doc.cid); setFrameCenterCid(doc.cid); }
    }, 150); };
    const FRAME_ON_KEY = 'memories.frame.on';
    async function enterFrame(){
        if(!items().length) return;
        setFrame(true); setPlaying(true); setFrameUI(false);
        localStorage.setItem(FRAME_ON_KEY, '1');
        history.pushState({ frame: true }, '');
        try { wakeLock = await navigator.wakeLock?.request('screen'); } catch(e) {}
    }
    function closeFrame(){
        setFrame(false);
        localStorage.setItem(FRAME_ON_KEY, '0');
        try { wakeLock?.release(); } catch(e) {} wakeLock = null;
    }
    const exitFrame = () => (history.state && history.state.frame) ? history.back() : closeFrame();
    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 => { if(st === 'delete' && !confirm('Mark this for deletion?')) return;
        return 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('; ') })); };
    let frameCancelDate = false;
    const frameCommitDate = v => { const skip = frameCancelDate; frameCancelDate = false; setFrameEditingDate(false);
        if(!skip && v) frameEdit(() => ({ date: new Date(v).toISOString() })); };
    const FRAME_AUTO = localStorage.getItem(FRAME_ON_KEY) === '1';
    let autoEntered = false;
    createEffect(() => {
        if(FRAME_AUTO && !autoEntered && items().length > 0){ autoEntered = true; enterFrame(); }
    });
    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);
    }); });
    createEffect(on([items, frame], () => {
        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()) return; const vv = window.visualViewport; if(!vv) return;
        const read = () => setZoomed(vv.scale > 1);
        read(); vv.addEventListener('resize', read); vv.addEventListener('scroll', read);
        onCleanup(() => { vv.removeEventListener('resize', read); vv.removeEventListener('scroll', read); }); });
    createEffect(() => {
        if(!frame() || !playing() || zoomed() || interacting()) return;
        const id = setInterval(() => {
            if(stripEl && [...stripEl.querySelectorAll('video')].some(v => !v.paused && !v.ended)) return;
            frameGo(1);
        }, intervalMs());
        onCleanup(() => clearInterval(id));
    });
    createEffect(() => { if(!pokes()) return;
        setInteracting(true);
        const id = setTimeout(() => setInteracting(false), FRAME_IDLE_MS); onCleanup(() => clearTimeout(id)); });
    createEffect(() => { if(!frame() || !stripEl) return;
        stripEl.addEventListener('pointerdown', nudge);
        onCleanup(() => stripEl.removeEventListener('pointerdown', nudge)); });
    onMount(() => {
        const onKey = e => {
            if(!frame()) return;
            const editing = /^(INPUT|TEXTAREA)$/.test(e.target.tagName);
            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 = () => {
            if(frame()) closeFrame();
            const st = history.state || {};
            if(opened() && !st.lb) closePhoto();
            if(!opened() && st.lb){ const p = items().find(x => x.cid === st.lb); if(p) setOpened(p); }
        };
        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 ZOOM_IDLE_MS = Number(new URLSearchParams(location.search).get('zoomidle')) || 300000;
    createEffect(() => { if(!frame() || !zoomed()) return; pokes();   // any touch re-arms the countdown
        const id = setTimeout(() => { const u = new URL(location.href);
            u.searchParams.set('z', String(Date.now()));   // an address the browser hasn't seen zoomed → it lands at 1:1
            location.href = u.href; }, ZOOM_IDLE_MS);
        onCleanup(() => clearTimeout(id)); });
    const WEB_BEHIND = 1, WEB_AHEAD = 3, KEEP_BEHIND = 6, KEEP_AHEAD = 14;
    const inReach = (k, behind, ahead) => { const t = (k - frameCenterIdx()) * frameDir();  // signed steps, in the way you're heading
        return t >= -behind && t <= ahead; };
    const thumbBand = (p, k) => inReach(k, KEEP_BEHIND, KEEP_AHEAD)              // base layer:
        ? IPFS + (p?.thumbnailCid || p?.webCid || '') : BLANK;                   // thumbnail kept in the window, blank past it
    const webBand = (p, k) => (inReach(k, WEB_BEHIND, WEB_AHEAD) && p?.webCid)   // overlay:
        ? IPFS + p.webCid : '';                                                  // full-res leads the way you're going
    const FrameSlide = (slide, k) => {
        const thumbSrc = createMemo(() => thumbBand(slide(), k));   // base layer's source
        const webSrc = createMemo(() => webBand(slide(), k));       // overlay's source ('' when far from centre)
        const [thumbOn, setThumbOn] = createSignal(false);          // the base thumbnail has painted
        const [webOn, setWebOn] = createSignal(false);              // the full-res overlay has painted
        createEffect(() => { thumbSrc(); setThumbOn(false); });     // each layer re-arms its mark on its own source change
        createEffect(() => { webSrc(); setWebOn(false); });
        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=${() => !thumbOn()}>
                         <span class="ph load-ph" aria-label="loading">🖼</span><//>
                       <img class="slide-media" loading="lazy"
                            src=${thumbSrc} onLoad=${() => setThumbOn(true)} />
                       <${Show} when=${() => webSrc()}>
                         <img class="slide-media web" classList=${() => ({ shown: webOn() })}
                              loading="lazy" src=${webSrc} onLoad=${() => setWebOn(true)} />
                         <${Show} when=${() => thumbOn() && !webOn()}>
                           <span class="upgrading" aria-label="fetching full resolution"></span><//>
                       <//></div>`}>
              <video class="slide-media" controls src=${() => IPFS + slide().webCid}></video>
            <//>
          <//>
        </div>`;
    };
    const onFrameTap = e => {
        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);
    };
    const TAP_SLOP = 10;
    let tapFrom = null;                                   // where a lone finger went down, while it could still be a tap
    const tapPtrs = new Set();
    const onTapDown = e => { tapPtrs.add(e.pointerId);
        tapFrom = tapPtrs.size === 1 ? { x: e.clientX, y: e.clientY } : null; };
    const onTapMove = e => { if(tapFrom && Math.hypot(e.clientX - tapFrom.x, e.clientY - tapFrom.y) > TAP_SLOP) tapFrom = null; };
    const onTapUp = e => { tapPtrs.delete(e.pointerId);
        if(e.type === 'pointerup' && tapFrom) onFrameTap(e);
        if(!tapPtrs.size) tapFrom = null; };
    createEffect(() => { if(!frame() || !stripEl) return; const el = stripEl;
        const on = (t, h) => el.addEventListener(t, h), off = (t, h) => el.removeEventListener(t, h);
        on('pointerdown', onTapDown); on('pointermove', onTapMove); on('pointerup', onTapUp); on('pointercancel', onTapUp);
        onCleanup(() => { off('pointerdown', onTapDown); off('pointermove', onTapMove);
            off('pointerup', onTapUp); off('pointercancel', onTapUp); }); });
    const FRAME_UI_IDLE_MS = Number(new URLSearchParams(location.search).get('uiidle')) || 20000;
    createEffect(() => { if(!frameUI()) return; pokes();
        const id = setTimeout(() => setFrameUI(false), FRAME_UI_IDLE_MS); onCleanup(() => clearTimeout(id)); });
    const frameParam = new URLSearchParams(location.search);
    const SYNC_URL = frameParam.get('yws') || location.origin.replace(/^http/, 'ws') + '/ywebsocket';
    const SYNC_ROOM = frameParam.get('room') || 'memories-nowshowing';
    const [roomLink, setRoomLink] = createSignal('idle');
    let showingRoom = null;
    const nowShowing = () => {
        if(!showingRoom){
            const shared = new Y.Doc();
            const provider = new WebsocketProvider(SYNC_URL, SYNC_ROOM, shared);
            setRoomLink('connecting');
            provider.on('status', e => setRoomLink(e.status === 'connected' ? 'live' : 'offline'));
            showingRoom = shared.getMap('showing');
        }
        return showingRoom;
    };
    createEffect(() => {
        if(!frame()) return;
        pokes();
        const d = frameDoc(); if(!d) return;
        nowShowing().set('doc', { cid: d.cid, webCid: d.webCid, mimetype: d.mimetype, date: d.date });
    });
    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'); };
    const toLocalInput = iso => { if(!iso) return '';
        const d = new Date(iso), p = n => String(n).padStart(2, '0');
        return `${d.getFullYear()}-${p(d.getMonth()+1)}-${p(d.getDate())}T${p(d.getHours())}:${p(d.getMinutes())}`; };
    let cancelEdit = false;
    const commitDate = v => { const skip = cancelEdit; cancelEdit = false; setEditingDate(false);
        if(!skip && v) lbPatch({ date: new Date(v).toISOString() }); };
    onMount(() => {
        const onKey = e => {
            if(e.key !== 'd' || !opened()) return;                     // only while a doc is open
            if(/^(INPUT|TEXTAREA)$/.test(e.target.tagName)) return;     // a field already owns the key
            e.preventDefault(); setEditingDate(true);
        };
        window.addEventListener('keydown', onKey);
        onCleanup(() => window.removeEventListener('keydown', onKey));
    });
    const EVENTS_FOR_DOC = `query($d:Datetime!,$o:OwnerType!){ eventsAt(d:$d, o:$o){ nodes{ summary starttime endtime } } }`;
    const fetchDocEvents = async o => (await gql(EVENTS_FOR_DOC, { d: o.date, o: o.owner }))?.eventsAt?.nodes ?? [];
    const dayBased = (s, en) => s.getUTCHours() === 0 && s.getUTCMinutes() === 0 && s.getUTCSeconds() === 0
                             && en.getUTCHours() === 23 && en.getUTCMinutes() === 59 && en.getUTCSeconds() === 59;
    const hhmm = t => t.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
    const eventWhen = e => {
        const s = new Date(e.starttime), en = new Date(e.endtime);
        const sd = s.toLocaleDateString('fr-FR'), ed = en.toLocaleDateString('fr-FR');
        if (dayBased(s, en)) return sd === ed ? sd : `${sd} – ${ed}`;
        return sd === ed ? `${sd} ${hhmm(s)} – ${hhmm(en)}` : `${sd} ${hhmm(s)} – ${ed} ${hhmm(en)}`;
    };
    // run the occasion's own event: search — the pill's jump into it
    const searchEvent = summary => { setSearch('event:' + summary); commit(); };
    const [lbEvents] = createResource(
        () => { const o = opened(); return o?.owner && o?.date ? o : null; }, fetchDocEvents);
    const [frameEvents] = createResource(
        () => { const o = frameDoc(); return o?.owner && o?.date ? o : null; }, fetchDocEvents);
    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;
    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){ extendRun(list[ni].cid); }   // grow-or-shrink the run to the cursor
        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));
    });
    history.scrollRestoration = 'manual';   // Back must not undo the follow (see prose)
    createEffect(() => { const c = opened()?.cid || (frame() ? frameCenterCid() : null); if(!c) return;
        setCursor(c);
        gridEl?.children[items().findIndex(p => p.cid === c)]?.scrollIntoView({ block: 'nearest' }); });
    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 || !canRange()) 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(photos.loading){ cancelRead(); history.pushState({ app: true }, ''); return; }   // bail out of a frozen read; stay
                if(document.querySelector('.suggest')){ setSearchFocus(false); history.pushState({ app: true }, ''); return; }   // retract the list; keep the root beneath
                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>
      <//>
      <${Show} when=${() => photos.error && !authNeeded()}>
        <div class="loadwall" role="alert">
          <strong>Couldn't load your photos.</strong>
          The server returned an error — try again in a moment.
        </div>
      <//>
      <h1>Memories</h1>
      <div class="complete">
        <input class=${() => dirty() ? 'search dirty' : 'search'} type="search" role="combobox" aria-label="search labels"
               disabled=${() => photos.loading}
               aria-description=${() => dirty() ? 'search edited — not yet applied; press Enter or the search button' : undefined}
               aria-expanded=${() => searchFocus() && !opened() && (sugLoading() || sugItems().length > 0) ? 'true' : 'false'}
               placeholder="labels; since:2010; until:2015; type:video; sort:random"
               value=${() => search()}
               onInput=${e => { setSearch(e.target.value); setCaret(e.target.selectionStart);
                                setSearchFocus(true); }}
               onKeyUp=${e => setCaret(e.target.selectionStart)}
               onClick=${e => setCaret(e.target.selectionStart)}
               onFocus=${() => setSearchFocus(true)}
               onKeyDown=${e => sugNav(e, w => { if(w) pickSearch(w); else commit(); })}
               onBlur=${() => setSearchFocus(false)} />
        <button class="search-run" aria-label="run search" disabled=${() => photos.loading}
                onMouseDown=${e => e.preventDefault()} onClick=${commit}>🔍</button>
        <${Show} when=${() => searchFocus() && !opened()}>
          <${Suggest} text=${search} caret=${caret} dsl=${true}
                      active=${sugActive} onItems=${reportSug} onLoading=${setSugLoading} onPick=${pickSearch} />
        <//>
      </div>
      <div class="chips" role="group" aria-label="filter by state">
        ${['all', ...STATES].map(st => html`
          <button class="chip" data-st=${st} disabled=${() => photos.loading}
                  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'}
                  disabled=${() => !canRange()}
                  title=${() => canRange() ? undefined : 'a spread is not a run — range select is off here'}
                  onClick=${() => setRangeMode(m => !m)}>↔ range</button>
          <span class="tb-sep" aria-hidden="true"></span>
          <!-- label edit -->
          <div class="complete">
            <input class="batch-label" role="combobox" placeholder="add a label…" aria-label="label for the selection"
                   aria-expanded=${() => labelFocus() && (sugLoading() || sugItems().length > 0) ? 'true' : 'false'}
                   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=${() => setLabelFocus(false)} />
            <${Show} when=${() => labelFocus()}>
              <${Suggest} text=${labelText} active=${sugActive} onItems=${reportSug} onLoading=${setSugLoading}
                          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>
          <!-- move the selection onto an occasion -->
          <div class="complete">
            <input class="batch-move" role="combobox" placeholder="move to event…" aria-label="move the selection to an event"
                   aria-expanded=${() => moveFocus() && moveCandidates().length > 0 ? 'true' : 'false'}
                   value=${() => moveText()}
                   onInput=${e => { setMoveText(e.target.value); setMoveTarget(null); setMoveFocus(true); }}
                   onFocus=${() => setMoveFocus(true)}
                   onKeyDown=${e => sugNav(e, picked => picked ? pickMove(picked) : moveToEvent())}
                   onBlur=${() => setMoveFocus(false)} />
            <${Show} when=${() => moveFocus() && moveCandidates().length > 0}>
              <ul class="suggest" role="listbox" aria-label="events">
                <${For} each=${() => moveCandidates()}>${(e, i) => html`
                  <li class=${() => 'sug' + (i() === sugActive() ? ' active' : '')} role="option"
                      aria-selected=${() => i() === sugActive() ? 'true' : 'false'}
                      onMouseDown=${ev => { ev.preventDefault(); pickMove(e); }}>
                    ${() => e.summary}<span class="ev-when">${() => eventWhen(e)}</span></li>`}
                <//>
              </ul>
            <//>
          </div>
          <button class="movebtn" aria-label="move to event" disabled=${() => !moveTarget()}
                  onClick=${moveToEvent}>→ event</button>
          <span class="tb-sep" aria-hidden="true"></span>
          <!-- stamp the selection with one instant -->
          <div class="batch-date">
            <button class="datebtn" aria-label="set date" title="set the selection's date"
                    aria-expanded=${() => datingSel() ? 'true' : 'false'}
                    onClick=${() => datingSel() ? setDatingSel(false) : openSelDate()}>&#x1F553;</button>
            <${Show} when=${() => datingSel()}>
              <div class="date-pop">
                <input type="datetime-local" aria-label="date for the selection"
                       value=${() => selDate()} onInput=${e => setSelDate(e.target.value)}
                       onKeyDown=${e => { if(e.key === 'Enter'){ e.preventDefault(); stampSelDate(); } }} />
                <button class="datestamp" aria-label="apply date" disabled=${() => !selDate()}
                        onClick=${stampSelDate}>&#x2192; date</button>
              </div>
            <//>
          </div>
          <span class="tb-sep" aria-hidden="true"></span>
          <!-- state -->
          ${STATES.map(st => html`
            <button class="st" data-st=${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>
          <span class="tb-sep" aria-hidden="true"></span>
          <button class="clear" onClick=${clearSel}>clear</button>
        </div>
      <//>
      <${Show} when=${() => !photos.loading && !photos.error && items().length === 0 && !authNeeded()}>
        <p class="empty">No photos.</p>
      <//>
      <${Show} when=${() => items().length > 0}>
        <p class="countline">${() => {
          if(!photos()?.sampled) return `showing all ${items().length}`;
          const end = photos()?.pick;
          return end ? `showing the ${end} ${items().length} of ${total()}`
            : `showing a spread of ${items().length} from ${total()} — narrow the search or date range to see them all`;
        }}</p>
      <//>
      <div class="sizer">
        <button aria-label="smaller thumbnails" onClick=${() => bumpSize(-1)}>−</button>
        <button aria-label="bigger thumbnails" onClick=${() => bumpSize(1)}>＋</button>
      </div>
      <${Show} when=${() => photos.loading || mutating()}>
        <${Show} when=${() => photos.loading && !mutating()}
                 fallback=${html`<div class="wall-busy" aria-hidden="true">updating…</div>`}>
          <button class="wall-busy busy-cancel" onClick=${cancelRead}
                  aria-label=${() => 'cancel search: ' + (running().label || 'everything')}>${() => `searching «${running().label || 'everything'}»`}</button>
        <//>
      <//>
      <div class="grid" role="list" aria-label="photos" aria-busy=${() => photos.loading || mutating() ? 'true' : 'false'}
           style=${() => '--tile:' + thumbSize() + 'px'}
           ref=${el => { gridEl = el; watchCell(el); }} onWheel=${onGridWheel}
           onPointerDown=${onGridDown} onPointerMove=${onGridMove}
           onPointerUp=${onGridUp} onPointerCancel=${onGridUp}>
        <${For} each=${() => items()}>${photo => {
          const [near, setNear] = createSignal(false);
          const [thumbOn, setThumbOn] = createSignal(false);
          const thumbSettled = () => setThumbOn(true);           // painted, or failed and never coming
          createEffect(() => { near(); setThumbOn(false); });     // re-shown → its source is refetched → waiting again
          createEffect(() => {                                   // one of the thumbnails the wall waits for…
              if(!(near() && photo.thumbnailCid && !thumbOn())) return;
              setThumbsInFlight(n => n + 1);
              onCleanup(() => setThumbsInFlight(n => n - 1));     // …until it settles or leaves
          });
          const [sharp, setSharp] = createSignal(false);
          createEffect(() => { if(!near()) setSharp(false);       // gone → both layers go
                               else if(thumbOn() && refining()) setSharp(true); });
          const webSrc = () => sharp() && !isVideo(photo) && photo.webCid ? IPFS + photo.webCid : '';
          const [webOn, setWebOn] = createSignal(false);
          createEffect(() => { webSrc(); setWebOn(false); });     // a new source → fade the overlay in again
          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}
               onClick=${e => onTilePress(e, photo.cid)}
               onDblClick=${() => openPhoto(photo)}>
            <${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" draggable="false" alt=${photo.date.slice(0, 10)} title=${photo.date.slice(0, 10)}
                   ref=${el => watchVisible(el, setNear)}
                   src=${() => near() ? IPFS + photo.thumbnailCid : BLANK}
                   onLoad=${thumbSettled} onError=${thumbSettled} />
              <${Show} when=${webSrc}>
                <img class="thumb web" classList=${() => ({ shown: webOn() })} alt="" draggable="false"
                     src=${webSrc} onLoad=${() => setWebOn(true)} />
              <//>
            <//>
            <${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>
            <div class="foot">
              <${Show} when=${() => !!photo.labels}>
                <span class="labels" title=${photo.labels}>${photo.labels}</span>
              <//>
              <${Show} when=${() => docEvents(photo).length}>
                <div class="events">
                  <${For} each=${() => docEvents(photo)}>${e => html`
                    <span class="ev-pill" style=${() => 'background:' + eventColour().get(eventKey(e))}>${() => e.summary}</span>`}<//>
                </div>
              <//>
            </div>
          </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=${e => {
               if(!e.target.closest('button, a, input, textarea, select, video, [role=option], [role=listbox]')) dismissPhoto(); }}>
          <div class="lb-inner" role="dialog" aria-modal="true" aria-label="photo" 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">
              <${Show} when=${() => editingDate()}
                       fallback=${html`<button class="lb-date" aria-label="edit date"
                           onClick=${() => setEditingDate(true)}>${() => opened()?.date ? new Date(opened().date).toLocaleString("fr-FR") : ''}</button>`}>
                <input class="lb-date-edit" type="datetime-local" aria-label="date"
                       ref=${el => { el.value = toLocalInput(opened()?.date); requestAnimationFrame(() => el.focus()); }}
                       onKeyDown=${e => { if(e.key === 'Enter'){ e.preventDefault(); e.target.blur(); } else if(e.key === 'Escape'){ e.preventDefault(); e.stopPropagation(); cancelEdit = true; e.target.blur(); } }}
                       onBlur=${e => commitDate(e.target.value)} />
              <//>
              <a class="lb-orig" href=${() => IPFS + (opened()?.cid || '')} target="_blank" rel="noopener"
                 aria-label="original" title="original — full resolution, new tab">⤢</a>
            </div>
            <div class="lb-events">
              <${For} each=${() => lbEvents() || []}>${e => html`
                <button class="lb-event" onClick=${() => { searchEvent(e.summary); dismissPhoto(); }}>${() => e.summary}<span class="ev-when">${() => eventWhen(e)}</span></button>`}
              <//>
            </div>
            <div class="lb-states">
              <${For} each=${() => STATES}>${st => html`
                <button class="lb-st" data-st=${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" role="combobox" placeholder="add a label…" aria-label="add a label"
                       aria-expanded=${() => lbFocus() && (sugLoading() || sugItems().length > 0) ? 'true' : 'false'}
                       value=${() => lbText()} onInput=${e => { setLbText(e.target.value); setLbFocus(true); }}
                       onFocus=${() => setLbFocus(true)} onBlur=${() => setLbFocus(false)}
                       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}
                              onLoading=${setSugLoading} onPick=${w => setLbText(replaceSeg(lbText(), w) + '; ')} />
                <//>
              </div>
            </div>
          </div>
        </div>
      <//>
      <${Show} when=${() => frame()}>
        <div class="frame">
          <div class="strip" role="list" aria-label="slideshow"
               ref=${el => { stripEl = el; el.addEventListener('scroll', onFrameScroll); }}>
            <${Index} each=${() => frameSlides()}>${(slide, k) => FrameSlide(slide, k)}<//>
          </div>
          <${Show} when=${() => frameUI()}>
            <div class="frame-bar" role="toolbar" aria-label="frame actions" onPointerDown=${nudge}>
              <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>
              <${Show} when=${() => frameEditingDate()}
                       fallback=${html`<button class="frame-date" aria-label="edit date"
                           onClick=${() => setFrameEditingDate(true)}>${() => { const d = frameDoc();
                             return d?.date ? new Date(d.date).toLocaleString("fr-FR") : ''; }}</button>`}>
                <input class="frame-date-edit" type="datetime-local" aria-label="date"
                       ref=${el => { el.value = toLocalInput(frameDoc()?.date); requestAnimationFrame(() => el.focus()); }}
                       onKeyDown=${e => { if(e.key === 'Enter'){ e.preventDefault(); e.target.blur(); } else if(e.key === 'Escape'){ e.preventDefault(); e.stopPropagation(); frameCancelDate = true; e.target.blur(); } }}
                       onBlur=${e => frameCommitDate(e.target.value)} />
              <//>
              <span class="room-link" data-state=${roomLink}>${roomLink}</span>
              <${For} each=${() => frameEvents() || []}>${e => html`
                <button class="frame-event" onClick=${() => { searchEvent(e.summary); exitFrame(); }}>${() => e.summary}<span class="ev-when">${() => eventWhen(e)}</span></button>`}
              <//>
              ${STATES.map(st => html`
                <button class="st" data-st=${st} onClick=${() => frameSetState(st)}>${st}</button>`)}
              <div class="complete">
                <input class="frame-label" role="combobox" placeholder="add a label…" aria-label="add a label in the frame"
                       aria-expanded=${() => frameLabelFocus() && (sugLoading() || sugItems().length > 0) ? 'true' : 'false'}
                       value=${() => frameLabel()} onInput=${e => { setFrameLabel(e.target.value); setFrameLabelFocus(true); }}
                       onFocus=${() => setFrameLabelFocus(true)}
                       onBlur=${() => setFrameLabelFocus(false)}
                       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(frameDoc())}
                              active=${sugActive} onItems=${reportSug} onLoading=${setSugLoading}
                              onPick=${w => setFrameLabel(replaceSeg(frameLabel(), w) + '; ')} />
                <//>
              </div>
              <button aria-label="exit frame" onClick=${exitFrame}>✕ exit</button>
            </div>
          <//>
        </div>
      <//>
    `;
}