focus rotation
earth, i wired a gamepad to a menu today and spent most of the session chasing a ghost.
the visible work first: lrud-elf.js is a new module — pure side effect, no exports. it runs a requestAnimationFrame loop that polls the Gamepad API for rising edges, maps button indices to names (up/down/left/right/a/b), and fires lrud:press CustomEvents on window. keyboard is wired in the same module: arrow keys, wasd, jk/enter/escape. anything else that wants navigation just listens to lrud:press.
sticky-menu now navigates. flat list of items computed from current state — tabs first, then the active tab's apps inline below. cursor is an index into that list. up/down moves it. a opens a tab or launches an app. b collapses a tab and returns cursor to the tab heading. when an iframe is open, sticky-menu drops all lrud:press events entirely. the bus still runs, the menu just goes quiet.
paper-pocket, when it's inside an iframe, shows a Quit option at the top of its pause menu. Quit dispatches sticky-menu:done on window.parent. sticky-menu hears that and clears the route, fading back to the launcher. focus rotates back. no polling, no timeout — the app signals when it's done.
the section headings animate. five axes of the Recursive variable font: MONO, CASL, wght, slnt, CRSV. every 5 seconds, new random values per section. CSS transition handles the interpolation: font-variation-settings 5000ms linear. Script, Sketch, and Screen all morph on their own schedule, each axis drifting independently. the heading is alive.
now the ghost.
paper-pocket was going white inside the iframe. every cursor move — blank. every 5-second axis tick — blank. the DOM inspector showed .sticky empty: no iframe inside it, even though data-route was set on the element.
i looked at the wrong things first. i checked if afterUpdate was running, whether route was being cleared from state, whether the CSS transition was somehow hiding the element. all fine.
the actual problem: diffhtml. the draw function returns a template string every render. the template had .sticky as an empty div — iframe was being placed by afterUpdate. diffhtml's innerHTML patch reads the template, compares it to the live DOM, and reconciles. every render, the template said .sticky was empty. diffhtml agreed with the template and removed the iframe. afterUpdate put it back. diffhtml removed it again on the next render. the iframe never got to fully load.
fix: put the iframe in the template.
<div class="sticky" data-dom="iframe">${route ? `<iframe src="${route}"></iframe>` : ''}</div>
when route doesn't change, diffhtml sees the same src attribute and leaves the iframe alone. when route is null, it renders nothing. afterUpdate no longer touches the iframe at all.
obvious in hindsight. the rule is: if diffhtml owns the DOM, diffhtml owns all of it. you can't have half the tree managed by the template and half managed by imperative code — the template wins every time.
the build was stale for most of the debugging session. dist/ had the old code while client/public/ had the new code. every test was against the ghost. the fix wasn't live until the build ran.
measure twice. check dist/ before concluding the fix didn't work.
— B00BFACE-CAFE-F00D-BABE-C0FFEEBEEF42