vh/booth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(desk): the Desk row, booth dates, and the theme toggle (r2b merge 2: D1 + D1b + D3)

Browse Source 
Operator rulings, 2026-09-23.

D1, the Desk row:
- Kept vs ephemeral reads at a glance: an always-visible lifetime pill in
  the right column (sage ★ kept, amber held, ◷ counting down).
- The facts line is facts only.
- zip / keep|release / wipe are one cluster, with zip out of the middle.
  Where a real hover exists it floats over the preview strip (covering
  pictures, never information), appears on hover or keyboard focus, and
  takes no room. Anywhere else (touch, any coarse pointer) it is the
  row's last line, visible, with 32px controls. × hides too (the operator
  answered yes).
D1b: "created 12 Sep" (filesystem birth time; nothing when unknown) and
  "updated 5d ago" (the content clock), as <time> facts on the row and in
  the booth header, from one macro and one clock per page.
D3, the theme toggle: System · Light · Dark in the top bar.
- Stored in localStorage and applied in <head> before any stylesheet.
- System removes data-theme, so the OS query follows the OS live, with
  no listener.
- The token sheet is re-vendored at the same SVOS SHA with a scoping-only
  transform (155 declarations, the same set, both directions), so forced
  themes win over the OS and high contrast follows the theme in effect.
- The ask chrome inside verbatim pages follows the choice through
  data-bk-theme on our own fragments, live across tabs. The host page's
  <html> is never touched.

Declared test changes:
- two row tests replaced;
- the wipe-dialog test hovers first;
- four r2_flow rows retired, with successors in r2b.toml (45/45).
785 passed.
This commit is contained in:
vh
2026-09-23 19:25:32 -07:00
parent ca0641f55b
commit 436d234ca0
12 changed files with 868 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/test_flow_browser.py
+229 -73
View File
@@ -410,43 +410,6 @@ def test_the_next_arrow_clears_the_rail_only_beside_it(browser, live):
assert rights == {1400: "360px", 390: "0px"}
def test_a_rows_keep_release_and_wipe_take_no_room_of_their_own(browser, live):
"""Operator, on the live Desk: 'release and x take up space whether or not
they're visible.' They were `opacity:0` in their own side column, which
hides a control and still reserves its box. Each now sits on the facts
line beside the state it changes, visible without hover (a touch screen
never had hover), so a row with no badge has no side column at all."""
import os
base, root = live
past = time.time() - 10_000
for name, kept in (("kept1", True), ("loose", False)):
d = root / name
d.mkdir()
(d / "a.png").write_bytes(PNG)
os.utime(d / "a.png", (past, past))
(d / ".viewed").write_bytes(b"") # looked at since: no 'new' badge
if kept:
(d / ".forever").write_bytes(b"")
page = browser.new_page(viewport={"width": 1400, "height": 900})
page.goto(f"{base}/", wait_until="networkidle")
page.mouse.move(0, 0) # nothing hovered
out = {}
for name, form in (("kept1", "form.release"), ("kept1", "form.wipe-kept"),
("loose", "form.keepit"), ("loose", "form.wipe")):
btn = page.locator(f'.desk-row[data-booth="{name}"] {form} button')
out[(name, form)] = btn.is_visible() and btn.evaluate(
"b => { for (let e = b; e; e = e.parentElement)"
" if (getComputedStyle(e).opacity === '0') return false;"
" return true; }")
gaps = page.evaluate("""() => [...document.querySelectorAll('.desk-row')].map(r => {
const row = r.getBoundingClientRect(), main = r.querySelector('.desk-main').getBoundingClientRect();
return Math.round(row.right - main.right); })""")
page.close()
assert all(out.values()), out
# row padding (12) + border (1) + nothing else: no side column is reserved
assert gaps and max(gaps) <= 14, gaps
def test_the_desk_never_scrolls_sideways_at_any_width(browser, tmp_path):
"""The row-controls change made a Desk row a flex container, and a long
provenance line (nowrap, ellipsised) then set the Desk column's MINIMUM
@@ -492,42 +455,6 @@ def test_the_desk_never_scrolls_sideways_at_any_width(browser, tmp_path):
assert all(v <= 0 for v in over.values()), over
def test_on_a_touch_screen_the_row_controls_keep_their_tap_floor(browser, live):
"""Slate T2 (kimi, groa): moving keep/release/wipe onto the facts line
dropped the deliberate 28px tap target (`height:28px;min-width:28px`) to
about 19px, 4-6px from the zip link. With scripts off no confirm fires, so
a mis-tap on wipe POSTs the delete. On a coarse pointer every row control
is at least 28px square again and wipe stands clear of the zip link; a
fine pointer keeps the compact line."""
import os
base, root = live
past = time.time() - 10_000
for name, kept in (("kept1", True), ("loose", False)):
d = root / name
d.mkdir()
(d / "a.png").write_bytes(PNG)
os.utime(d / "a.png", (past, past))
(d / ".viewed").write_bytes(b"")
if kept:
(d / ".forever").write_bytes(b"")
ctx = browser.new_context(viewport={"width": 390, "height": 844}, has_touch=True, is_mobile=True)
page = ctx.new_page()
page.goto(f"{base}/", wait_until="networkidle")
coarse = page.evaluate("matchMedia('(pointer: coarse)').matches")
boxes = page.evaluate("""() => [...document.querySelectorAll('.desk-facts form button')].map(b => {
const r = b.getBoundingClientRect(); return [Math.round(r.width), Math.round(r.height)]; })""")
gaps = page.evaluate("""() => [...document.querySelectorAll('.desk-row')].map(row => {
const z = row.querySelector('.dl-link').getBoundingClientRect(),
w = row.querySelector('form.wipe button').getBoundingClientRect();
// the clearance between the two boxes on whichever axis separates them:
// beside each other on one line, or wipe wrapped onto the next
return Math.round(Math.max(w.left - z.right, z.left - w.right, w.top - z.bottom, z.top - w.bottom)); })""")
ctx.close()
assert coarse, "the emulation must present a coarse pointer, or this test measures nothing"
assert len(boxes) == 4 and all(w >= 28 and h >= 28 for w, h in boxes), boxes
assert all(g >= 8 for g in gaps), gaps
def test_the_wipe_dialog_shows_what_is_being_wiped_and_never_fails_open(browser, live):
"""Slate T4 (groa): the booth name travels as data, never into a script —
but the confirm TEXT showed it raw, so a name carrying a bidi override
@@ -548,6 +475,8 @@ def test_the_wipe_dialog_shows_what_is_being_wiped_and_never_fails_open(browser,
said = []
page.on("dialog", lambda dlg: (said.append(dlg.message), dlg.dismiss()))
page.goto(f"{base}/", wait_until="networkidle")
# r2b D1: the row's controls appear on hover (operator ruling), so hover first
page.locator(".desk-row").first.hover()
page.locator("form.wipe button").first.click()
page.wait_for_timeout(300)
page.evaluate("""() => { const f = document.createElement('form');
@@ -805,3 +734,230 @@ def test_the_test_browser_has_no_internet(browser, live):
page.close()
assert "ERR_NAME_NOT_RESOLVED" in str(err.value) and external < 3, (str(err.value)[:80], external)
assert local < 10, local
def _two_rows(root: pathlib.Path) -> None:
"""A kept and an ephemeral booth, both looked at since they landed (so no
'new' badge): the plainest rows the Desk draws."""
import os
past = time.time() - 10_000
for name, kept in (("kept1", True), ("loose", False)):
d = root / name
d.mkdir()
(d / "a.png").write_bytes(PNG)
os.utime(d / "a.png", (past, past))
(d / ".viewed").write_bytes(b"")
if kept:
(d / ".forever").write_bytes(b"")
_ROW_BOXES = """row => {
const box = e => { const r = e.getBoundingClientRect(); return [r.x, r.y, r.width, r.height].map(Math.round); };
const parts = [...row.querySelectorAll('.desk-strip, .desk-strip img, .desk-main, .desk-side, .life')];
return parts.map(box);
}"""
def test_the_row_controls_take_no_room_where_a_hover_exists(browser, live):
"""r2b D1 (operator: 'download, keep and release buttons only appear on
mouseover'; earlier: 'release and x take up space whether or not they're
visible'). Where a real hover exists the cluster floats over the preview
strip: at rest invisible AND unclickable; on hover visible AND clickable;
and every other box in the row is the same with the cluster removed. It
never covers the text or the side column, at any width."""
base, root = live
_two_rows(root)
over = {}
for w in (390, 720, 1000, 1400):
page = browser.new_page(viewport={"width": w, "height": 900})
page.goto(f"{base}/", wait_until="networkidle")
assert page.evaluate("matchMedia('(hover: hover) and (pointer: fine)').matches")
page.mouse.move(0, 0)
row = page.locator('.desk-row[data-booth="loose"]')
acts = row.locator(".desk-acts")
rest = acts.evaluate("a => [getComputedStyle(a).opacity, getComputedStyle(a).pointerEvents]")
with_acts = row.evaluate(_ROW_BOXES)
row.hover()
page.wait_for_timeout(350)
shown = acts.evaluate("a => [getComputedStyle(a).opacity, getComputedStyle(a).pointerEvents]")
over[w] = row.evaluate("""row => {
const a = row.querySelector('.desk-acts').getBoundingClientRect();
return [...row.querySelectorAll('.desk-main, .desk-side')].some(e => {
const r = e.getBoundingClientRect();
return a.left < r.right && r.left < a.right && a.top < r.bottom && r.top < a.bottom; }); }""")
acts.evaluate("a => a.remove()")
without = row.evaluate(_ROW_BOXES)
page.close()
assert rest == ["0", "none"], (w, rest)
assert shown == ["1", "auto"], (w, shown)
assert with_acts == without, (w, with_acts, without)
assert not any(over.values()), over
# and on hover a control is really pressable: keep reaches the server
page = browser.new_page(viewport={"width": 1400, "height": 900})
page.goto(f"{base}/", wait_until="networkidle")
row = page.locator('.desk-row[data-booth="loose"]')
row.hover()
page.wait_for_timeout(350)
with page.expect_navigation():
row.locator(".desk-acts form.keepit button").click()
page.close()
assert (root / "loose" / ".forever").exists()
def test_on_touch_the_row_controls_are_visible_in_flow_and_at_least_28px(browser, live):
"""r2b D1: hover-only would mean no controls at all on touch. Without a
real hover (here: a coarse, touch primary pointer) the cluster is visible,
in flow on its own line, and every control is at least the 28px floor
(Slate T2) — wipe clear of its neighbour."""
base, root = live
_two_rows(root)
ctx = browser.new_context(viewport={"width": 390, "height": 844}, has_touch=True, is_mobile=True)
page = ctx.new_page()
page.goto(f"{base}/", wait_until="networkidle")
coarse = page.evaluate("matchMedia('(pointer: coarse)').matches")
got = page.evaluate("""() => [...document.querySelectorAll('.desk-row')].map(row => {
const a = row.querySelector('.desk-acts'), cs = getComputedStyle(a);
const ctl = [...a.querySelectorAll('button, a')].map(b => b.getBoundingClientRect());
const main = row.querySelector('.desk-main').getBoundingClientRect();
const w = a.querySelector('form.wipe button').getBoundingClientRect();
const prev = ctl[ctl.length - 2];
return {opacity: cs.opacity, position: cs.position,
below: a.getBoundingClientRect().top >= main.bottom - 1,
small: ctl.filter(r => r.width < 28 || r.height < 28).length,
gap: Math.round(Math.max(w.left - prev.right, w.top - prev.bottom))}; })""")
ctx.close()
assert coarse, "the emulation must present a coarse pointer, or this test measures nothing"
for g in got:
assert g["opacity"] == "1" and g["position"] == "static" and g["below"], got
assert g["small"] == 0 and g["gap"] >= 8, got
def test_the_row_controls_run_zip_keep_or_release_then_wipe(browser, live):
"""r2b D1 (operator: 'the zip download button is in between keep/release and
wipe, and looks awkward'). Zip leads; release stays next to x."""
base, root = live
_two_rows(root)
page = browser.new_page(viewport={"width": 1400, "height": 900})
page.goto(f"{base}/", wait_until="networkidle")
order = page.evaluate("""() => Object.fromEntries([...document.querySelectorAll('.desk-row')].map(row =>
[row.dataset.booth, [...row.querySelectorAll('.desk-acts > *')].map(e => e.className.split(' ')[0])]))""")
page.close()
assert order == {"kept1": ["dl-link", "release", "wipe"], "loose": ["dl-link", "keepit", "wipe"]}, order
_VAR = "n => getComputedStyle(document.documentElement).getPropertyValue(n).trim()"
def test_the_theme_toggle_forces_light_and_dark_and_system_follows_the_os_live(browser, live):
"""r2b D3 (operator: 'light mode toggle at the top (dark, light, system)').
Light and Dark force the theme and survive a reload in the same browser
(localStorage). System hands the question back to the OS, and follows it
LIVE — an OS flip moves the page with no reload and no listener, because a
media query tracks the OS by construction."""
base, root = live
_set(root, 1)
ctx = browser.new_context(color_scheme="dark", viewport={"width": 1200, "height": 800})
page = ctx.new_page()
page.goto(f"{base}/b/g/", wait_until="networkidle")
dark = page.evaluate(_VAR, "--surface-base")
page.locator('.theme [data-theme-choice="light"]').click()
light = page.evaluate(_VAR, "--surface-base")
page.reload(wait_until="networkidle")
after_reload = page.evaluate(_VAR, "--surface-base")
pressed = page.locator('.theme [aria-pressed="true"]').get_attribute("data-theme-choice")
page.locator('.theme [data-theme-choice="system"]').click()
system_dark = page.evaluate(_VAR, "--surface-base")
page.emulate_media(color_scheme="light")
system_light = page.evaluate(_VAR, "--surface-base")
page.locator('.theme [data-theme-choice="dark"]').click()
forced_dark_on_light_os = page.evaluate(_VAR, "--surface-base")
ctx.close()
assert dark != light
assert after_reload == light and pressed == "light"
assert system_dark == dark and system_light == light, (system_dark, system_light)
assert forced_dark_on_light_os == dark
def test_a_forced_theme_follows_high_contrast(browser, live):
"""r2b D3: under prefers-contrast: more, a FORCED theme gets its own
high-contrast variant — forced dark resolves exactly what an OS-dark page
resolves, forced light exactly what an OS-light page does, whatever the OS
says about the scheme."""
base, root = live
_set(root, 1)
got = {}
for os_scheme in ("dark", "light"):
for forced in (None, "dark", "light"):
ctx = browser.new_context(color_scheme=os_scheme, reduced_motion="no-preference")
page = ctx.new_page()
page.emulate_media(color_scheme=os_scheme)
page.goto(f"{base}/b/g/", wait_until="networkidle")
page.evaluate("f => f ? document.documentElement.setAttribute('data-theme', f) : null", forced)
# contrast: more is emulated through CDP; Playwright has no option for it
cdp = ctx.new_cdp_session(page)
cdp.send("Emulation.setEmulatedMedia", {"features": [
{"name": "prefers-contrast", "value": "more"},
{"name": "prefers-color-scheme", "value": os_scheme}]})
got[(os_scheme, forced)] = page.evaluate(_VAR, "--surface-card")
ctx.close()
assert got[("light", "dark")] == got[("dark", None)] == got[("dark", "dark")]
assert got[("dark", "light")] == got[("light", None)] == got[("light", "light")]
assert got[("dark", None)] != got[("light", None)]
def test_the_theme_toggle_never_shows_without_js_and_a_storage_failure_still_applies(browser, live):
"""r2b D3: in the markup with `hidden`, never shown without JS (the page
follows the OS). With localStorage throwing, a click still applies to the
page; only the memory is lost."""
base, root = live
_set(root, 1)
ctx = browser.new_context(java_script_enabled=False)
page = ctx.new_page()
page.goto(f"{base}/", wait_until="networkidle")
nojs = page.locator(".theme").is_visible()
ctx.close()
ctx = browser.new_context(color_scheme="dark")
page = ctx.new_page()
errors = []
page.on("pageerror", lambda e: errors.append(str(e)))
page.add_init_script("""Storage.prototype.setItem = function () { throw new Error('quota'); };
Storage.prototype.getItem = function () { throw new Error('denied'); };""")
page.goto(f"{base}/", wait_until="networkidle")
before = page.evaluate(_VAR, "--surface-base")
page.locator('.theme [data-theme-choice="light"]').click()
after = page.evaluate(_VAR, "--surface-base")
ctx.close()
assert not nojs
assert before != after and errors == [], (before, after, errors)
def test_a_forced_theme_reaches_the_ask_chrome_inside_a_verbatim_page(browser, live):
"""r2b D3 (operator: 'theme toggle reaches inside'): the `.bk-ask` chrome
embed.js mounts in an author's page follows the stored choice, and a change
in another tab (the `storage` event) moves it live. The host page's own
<html> is never touched."""
from booth.marks import declare_pick
base, root = live
b = root / "rep"
b.mkdir()
declare_pick(b, "winner", {"prompt": "Which?", "options": ["A", "B"]})
(b / "index.html").write_text('<!doctype html><title>r</title><body><h1>R</h1>'
'<script src="/_booth/embed.js" defer></script></body>')
ctx = browser.new_context(color_scheme="dark")
page = ctx.new_page()
page.goto(f"{base}/b/rep/", wait_until="networkidle")
page.wait_for_selector(".bk-ask")
accent = lambda: page.evaluate("getComputedStyle(document.querySelector('.bk-ask')).getPropertyValue('--bk-accent').trim()")
os_dark = accent()
other = ctx.new_page() # the toggle, pressed in another tab
other.goto(f"{base}/", wait_until="networkidle")
other.locator('.theme [data-theme-choice="light"]').click()
page.wait_for_timeout(300)
forced_light = accent()
host_html = page.evaluate("document.documentElement.getAttribute('data-theme')")
page.reload(wait_until="networkidle")
page.wait_for_selector(".bk-ask")
after_reload = accent()
ctx.close()
assert os_dark == "#b2cd12" and forced_light == "#586519" and after_reload == "#586519", (os_dark, forced_light, after_reload)
assert host_html is None