THE ALTITUDE ATLAS — DRAWING SETSHEET 1 / 14

the RENDER LOOP

ALTITUDE 1 — lit-ui-router 1.16.5 · the client circuit drawn as one isometric scene: every leg of the loop is a road on the grid, the document a browser window whose DOM rises in plates, and the six package entries a door strip along the footer · version read from census-files.json

LOCATION history · hash · Navigation API @uirouter/core state registry · match · go() TRANSITION HALL onBefore | onStart · resolve | onSuccess TransitionController ReactiveController skybridge registers hooks <ui-view name='detail'> <ui-view> LIT RENDER RoutedLitTemplate · html`` uiSrefActive perch — toggles .active below uiSrefTarget bubbles up scenery — your content THE DOCUMENT — a browser window at /people its DOM rising in plates: body → shell → <ui-view> → <a> lit-ui-router.dev/people/32 ← the link, in situ DETAIL — the same window, flat popstate / navigate match → run viewconfigs activate state.component / template directives commit <a href=/people/32> uiSref(…) element part click → stateService.go() → pushState SIX DOORS INTO THE SAME MACHINE . registers everything ./pure no side effects ./register all elements ./ui-router.register one element ./ui-view.register one element ./context the context seam
FIG. 1The loop sits on the ground: every leg is a road that turns along the iso axes and stops short of the wall it points at. The city breaks its metaphor once, on purpose — the document is not a building but a browser window whose DOM rises in plates. The core matches, the hall runs its hook bays, Lit commits onto a layer, and a click on the topmost plate flies back to location.

GENERAL NOTES

Why redraw a 2D loop in 3D: the cycle itself is flat, but the third axis is free to carry the relations flat arrows kept fumbling. Containment: the child <ui-view> literally stands on its parent's roof — nesting is stacking, not a box-in-a-box. Propagation: uiSrefTarget events rise past the document's plates to the uiSrefActive perch, which is how link tracking works — no registry, just bubbling. Instrumentation: TransitionController is a skybridge that taps the hall without standing on the route.

The document breaks the metaphor on purpose. Every other station is a building; the document is drawn the way Firefox's old Tilt inspector drew it — a browser window whose DOM rises as stacked plates by depth, window → body → app shell → <ui-view> content → the <a> element on top. It is the one structure on this sheet that really is layered, so it alone earns the literal treatment.

Service discovery is still DOM events. A nested view finds its parent with a composed context CustomEvent; every uiSref announces its targetState upward. The document tree is the dependency graph — which is exactly why the drawing can stand everything in one window.

The six doors are one seam. The bare entry registers custom elements as a side effect; ./pure is the same API with registration torn off. sideEffects in the manifest names exactly the four register files.

KEY

the render loop (roads on the iso grid)
the click flying back to location
events rising / hook taps
plates = DOM depth (window → link)
elevated = overlay, not on the route
faint plate = scenery (your content)
PROJECTTHE ALTITUDE ATLAS
SHEET TITLEthe RENDER LOOP
SCALEONE PACKAGE
FORMISO CIRCUIT
CLIENTlit-ui-router · simshanith
DATE / REV2026-10-18 · H
DRAWN BYFable (Claude, AI)
SHEET1 OF 14