ranger-compiler 3.5.0 → 3.5.2

package/dist/lib/evg/EVGDisplayList.rgr

@@ -0,0 +1,4186 @@
+; SPDX-License-Identifier: MIT
+
+; EVGDisplayList.rgr — one traversal, a flat list of draw commands
+;
+; EVG computes geometry and stops there; something else has to paint it. Today
+; five painters each walk the laid-out tree themselves and each decide again
+; what a box means:
+;
+;   EVGPDFRenderer          -> PDF operators
+;   evg_png_tool + raster   -> CPU pixels
+;   EVGHTMLRenderer         -> absolutely positioned <div>s
+;   v2 ui/UIContext         -> framebuffer fillRect
+;   game_engine/ui/UILayer  -> interactive HUD on the same framebuffer
+;
+; Five copies of the same walk is how border-radius came to work in PDF and
+; silently not in PNG: one painter read `el.box.borderRadius` and the other
+; read a stale `el.borderRadius` that nothing wrote. A sixth backend (GL,
+; WebGL, SDL2) should not be a sixth copy.
+;
+; So: walk once, emit commands, and let a backend consume them.
+;
+; Two backends consume this today and neither walks a tree: `gl/evg-webgl.js`
+; and `html/evg-html.js`. The second one is worth knowing about from here,
+; because it says something about the shape of this list rather than about the
+; DOM: SVG has a native answer for seven of the eight kinds, and the two it
+; answers BETTER than the GPU does are PATH (rings and a fill rule, no stencil)
+; and the CLIP STACK (nested clip paths intersect by construction, where a
+; scissor is one rectangle that has to be intersected by hand). The two are
+; checked against each other pixel for pixel — see
+; gallery/pptx/web/html/parity.mjs.
+;
+; What neither of them can do is keep an element's IDENTITY, because a command
+; below carries none: an `id` here is the one field that would let a DOM
+; backend patch nodes instead of rebuilding them, and let a transition, a focus
+; ring or a native <input> attach to something that survives a frame. A command is
+; deliberately dumb — absolute pixels, resolved colours, no tree, no units —
+; because that is what a GPU backend wants: quads it can batch, glyph runs it
+; can look up in an atlas, and clip rectangles it can push and pop.
+;
+; This module is pure. It reads a laid-out tree and allocates no device
+; resources, so it compiles to every target Ranger has, which is what lets the
+; same list drive WebGL in a browser and SDL2 on a Raspberry Pi.
+
+Import "EVGElement.rgr"
+Import "EVGColor.rgr"
+Import "EVGTextEngine.rgr"
+Import "SVGPathParser.rgr"
+Import "VectorViewBox.rgr"
+Import "SvgParser.rgr"
+
+; Command kinds. Kept as ints so a backend can switch on them cheaply.
+;   0 RECT   filled box, possibly rounded
+;   1 BORDER stroked outline, possibly rounded
+;   2 IMAGE  textured quad, src names the file
+;   3 TEXT   one run on one line, already positioned at its baseline
+;   4 PUSH_CLIP / 5 POP_CLIP  scissor rectangle
+;   6 PATH   filled vector outline, as flattened rings
+;   7 STROKE stroked vector outline, as flattened rings
+class EVGDrawCmd {
+    def kind:int 0
+    def x:double 0.0
+    def y:double 0.0
+    def w:double 0.0
+    def h:double 0.0
+    ; The TOP-LEFT radius, and — when `perCorner` is set — the other three.
+    ; One number is what every backend but the WebGL painter reads, and it is
+    ; what a box with one radius has always emitted, so nothing that consumes
+    ; this had to change to keep working.
+    def radius:double 0.0
+    def perCorner:boolean false
+    def radiusTR:double 0.0
+    def radiusBR:double 0.0
+    def radiusBL:double 0.0
+    def thickness:double 0.0
+    ; Colour, pre-resolved to 0-255 + alpha 0-1 so a backend needs no EVGColor.
+    def r:int 0
+    def g:int 0
+    def b:int 0
+    def a:double 1.0
+    ; TEXT
+    def text:string ""
+    def fontFamily:string ""
+    def fontSize:double 0.0
+    ; Optional paragraph alignment for SoftCanvas: left / center / right.
+    ; When set, `w` is the text-box content width used to measure & place the run.
+    def textAlign:string ""
+    def fontWeight:string ""
+    ; CSS `letter-spacing` in pixels, zero for the font's own. It rides on
+    ; the command rather than being folded into `x` because a run is drawn
+    ; as one string: the painter has to space it, nobody else can.
+    def letterSpacing:double 0.0
+    ; STROKE (kind 7): 0 butt / 1 round / 2 square, and 0 miter / 1 round /
+    ; 2 bevel. Zero on both is the chain of butt-jointed bars the painter
+    ; drew before, so a backend that ignores them is not wrong, only plain.
+    def strokeCap:int 0
+    def strokeJoin:int 0
+    ; `stroke-dasharray`, verbatim: "6 4", "2 2 6 2". A string because the
+    ; record that crosses a thread is fixed-width and the pattern is not,
+    ; and the string pool already carries the text and the font name. An
+    ; empty one is a solid line, which is every stroke drawn before this.
+    def strokeDash:string ""
+    def strokeDashOffset:double 0.0
+    def maxWidth:double 0.0
+    ; Optional 2-stop gradient for RECT (kind 0)
+    def hasGrad:boolean false
+    def gradDir:int 0
+    def r2:int 0
+    def g2:int 0
+    def b2:int 0
+    def a2:double 1.0
+    ; `backdrop-filter: blur(Npx)` on a RECT: soften what is already painted
+    ; behind this rectangle before drawing it, clipped to the rectangle and its
+    ; radius. 0 is no filter.
+    ;
+    ; It is on the RECT and not a command of its own because it is a property
+    ; of the surface, and a backend that cannot do it draws the rectangle and
+    ; loses only the softening — which is the right failure. A separate
+    ; "blur this region" command would leave such a backend with a hole.
+    def backdropBlur:double 0.0
+    ; The EFFECT INSTANCE this rectangle belongs to, by name, or "" for the
+    ; rectangle that carries none — which is every rectangle on nearly every
+    ; page ever drawn.
+    ;
+    ; A NAME and not an index, because the commands of a clean subtree are
+    ; KEPT and re-emitted from the cache without the walk that built them: an
+    ; index into an array rebuilt this frame would point at whatever happens
+    ; to be there now. The name is the element's own `id`, so it survives the
+    ; cache, a reflow, and being read by a person.
+    ;
+    ; WHY ON THE RECTANGLE. The effect has to be drawn SOMEWHERE in paint
+    ; order — a starfield behind a card's text is not the same picture as one
+    ; over it — and paint order is what the command stream is. This is where
+    ; the element's own background sits, so this is where its effect goes.
+    def effectId:string ""
+    ; Optional drop shadow under RECT / PATH
+    def hasShadow:boolean false
+    def shadowX:double 0.0
+    def shadowY:double 0.0
+    def shadowBlur:double 0.0
+    def shadowR:int 0
+    def shadowG:int 0
+    def shadowB:int 0
+    def shadowA:double 0.35
+    ; IMAGE
+    def src:string ""
+    ; An image drawn mirrored in its own box: a deck can say `flipH` / `flipV`
+    ; on a picture, and mirroring is the texture read backwards rather than a
+    ; transform of the quad.
+    def flipH:boolean false
+    def flipV:boolean false
+    ; The window into the source, in the bitmap's own 0..1 space, when the
+    ; picture is shown cropped rather than whole. `hasCrop` is what says the
+    ; four numbers mean anything: 0,0,1,1 is a legal window and is also what
+    ; an uncropped command leaves behind, so the flag cannot be inferred.
+    def hasCrop:boolean false
+    def cropX:double 0.0
+    def cropY:double 0.0
+    def cropW:double 1.0
+    def cropH:double 1.0
+    ; PATH / STROKE. The rings are already flattened and already in page
+    ; coordinates: a GPU backend should not have to carry a path parser, and
+    ; the curve subdivision belongs where the drawn size is known. `ringEnds`
+    ; gives the index in `pts` one past each ring's last coordinate, so a shape
+    ; with a hole survives as two rings rather than one confused outline.
+    def pts:[double]
+    def ringEnds:[int]
+    def evenOdd:boolean false
+    ; Rotation in degrees, as the element asked for it. Text is what first
+    ; needed this — an axis title on its side.
+    def rotate:double 0.0
+    ; What it turns ABOUT. Unset means the command's own box centre, which is
+    ; right for a lone rotated label and wrong for everything else: a box, its
+    ; text and its children have to turn about ONE point or they come apart.
+    ;
+    ; A text command is where that shows first and worst. The painter draws
+    ; glyphs in a quad sized to the ink, not to the line box the command
+    ; carries, so "rotate each command about its own centre" puts the words
+    ; somewhere the box is not. A backend that ignores these two fields keeps
+    ; the old behaviour exactly, which is why they are additive rather than a
+    ; change to `rotate`.
+    ; Which element emitted this, as an `EVGElement.inspectSlot`, or -1 when
+    ; nothing was inspecting. Written only while `EVGDisplayList.attribute` is
+    ; on, and written to the JSON only then, so a list built without an
+    ; inspector is byte-identical to the one built before this field existed.
+    def node:int (0 - 1)
+
+    def rotOriginX:double 0.0
+    def rotOriginY:double 0.0
+    def hasRotOrigin:boolean false
+    ; On a PUSH_CLIP: which scroll layer this clip opens, 1-based, or 0 for
+    ; a clip that is not one. See `EVGDisplayList.refreshLayers`.
+    def layer:int 0
+
+    Constructor () {
+    }
+
+    fn kindName:string () {
+        if (kind == 0) {
+            return "RECT"
+        }
+        if (kind == 1) {
+            return "BORDER"
+        }
+        if (kind == 2) {
+            return "IMAGE"
+        }
+        if (kind == 3) {
+            return "TEXT"
+        }
+        if (kind == 4) {
+            return "PUSH_CLIP"
+        }
+        if (kind == 5) {
+            return "POP_CLIP"
+        }
+        if (kind == 6) {
+            return "PATH"
+        }
+        return "STROKE"
+    }
+}
+
+; ==============================================================================
+; EVGSceneBinary — the same display list, as typed arrays instead of text
+; ==============================================================================
+;
+; `toJson` is the bridge every host has used to get a picture out of the
+; engine, and on a chart-heavy slide it is what the frame costs. Measured, one
+; slide of 10 084 commands and 88 656 point coordinates:
+;
+;     buildFrame      12 ms      the layout — the actual work
+;     toJson          62 ms      turning it into 1.47 MB of text
+;     JSON.parse      19 ms      the host turning that text back into objects
+;
+; Five sixths of a frame spent handing over a picture that took a sixth to
+; compute. And the text is not the cost either: assembling 1.47 MB with 200 000
+; concatenations is 3 ms, and formatting every number is 25. It is death by
+; half a million small operations, so no faster string writer would help.
+;
+; Typed arrays do not have the problem at all. `int_buffer` is an `Int32Array`
+; on the JavaScript target and a flat block of memory everywhere else; filling
+; 500 000 of them takes 3 ms, and the host reads the SAME array — nothing is
+; parsed, nothing is copied, nothing is allocated per command.
+;
+; WHY FIXED POINT. `toJson` writes two decimals and no more — `num` rounds to
+; hundredths — so a coordinate multiplied by 100 and rounded is not an
+; approximation of what the JSON carried, it is exactly it. The two bridges
+; therefore describe the same picture to the last unit, which is what lets a
+; test compare them field by field.
+;
+; WHY THE STRINGS ARE STILL STRINGS. There are 203 text runs and 1 158
+; characters in that same frame, against 88 656 coordinates. Text is a
+; rounding error in this payload; packing it into the array would cost more in
+; complexity than it saves in time, so a command carries an INDEX into a small
+; pool and the pool crosses as an array of strings.
+class EVGSceneBinary {
+    ; One fixed-size record per command; see `EVGDisplayList.STRIDE`.
+    def cmds:int_buffer (int_buffer_alloc 0)
+    ; Every ring's coordinates, in hundredths, one command's after another's.
+    def pts:int_buffer (int_buffer_alloc 0)
+    ; Where each command's rings stop, in the same order.
+    def ends:int_buffer (int_buffer_alloc 0)
+    ; The text, font, weight and image names a command names by index.
+    def strings:[string]
+    def count:int 0
+    def width:double 0.0
+    def height:double 0.0
+    ; The camera, beside the page size rather than inside the record: three
+    ; numbers on the envelope leave the per-command stride alone, so a reader
+    ; that knows nothing about views reads this buffer exactly as before.
+    def viewX:double 0.0
+    def viewY:double 0.0
+    def viewScale:double 1.0
+    def hasView:boolean false
+
+    Constructor () {
+        def s:[string]
+        strings = s
+    }
+}
+
+class EVGDisplayList {
+    def cmds:[EVGDrawCmd]
+    ; Attribution, off by default. On, every command records the element that
+    ; emitted it — see `addCmd` and `walk`.
+    def attribute:boolean false
+    def curNode:int (0 - 1)
+    ; Overlay surfaces met during the first pass, drawn by the second. See
+    ; `build`.
+    def deferredOverlays:[EVGElement]
+    ; How many turns the walk is inside. A clip is a scissor rectangle and
+    ; a turn cannot be written into one, so inside a turn there is no clip.
+    def turnedDepth:int 0
+    ; The same engine layout measured with. A paragraph is emitted one command
+    ; per LINE, broken exactly where layout broke it — a backend that got the
+    ; whole string would draw one long run straight out of its box, which is
+    ; the disagreement between measure and paint this engine exists to avoid.
+    def textEngine:EVGTextEngine (new EVGTextEngine())
+
+    ; THE CAMERA, and not an element property.
+    ;
+    ; A display list is written in the coordinates its commands are drawn at,
+    ; and a host that pans or zooms has always done that by putting a
+    ; transform on a world element — which means the tree changes when the
+    ; view does, so the walk runs, the layout runs, and every path is
+    ; flattened again for a move that changed no geometry at all.
+    ;
+    ; With a view, the list is in SCENE coordinates and carries the camera
+    ; beside them: a painter multiplies at the last moment, so a frame
+    ; already built can be drawn somewhere else for the cost of a uniform.
+    ; See PLAN_VIEW_TRANSFORM.md.
+    ;
+    ; NO VIEW IS AN IDENTITY VIEW, which is exactly the list every consumer
+    ; gets today — a PDF, a PNG, an SVG export and every golden test see
+    ; byte-identical output unless a host asks for a camera. `hasView` is
+    ; what keeps it byte-identical: the numbers are written only when they
+    ; are not the identity.
+    def viewX:double 0.0
+    def viewY:double 0.0
+    def viewScale:double 1.0
+    def hasView:boolean false
+    ; See `setRegion`.
+    def regionLeft:double 0.0
+    def regionTop:double 0.0
+    def regionRight:double 0.0
+    def regionBottom:double 0.0
+    def hasRegion:boolean false
+
+    Constructor () {
+    }
+
+    ; The camera for this list. Scene coordinates times `scale` plus (x, y)
+    ; land on the page. A rotating camera would want a matrix here; nothing
+    ; asks for one, and a rotation that belongs to the PICTURE is an element
+    ; transform and is baked as it always was.
+    fn setView:void (x:double y:double scale:double) {
+        viewX = x
+        viewY = y
+        viewScale = scale
+        hasView = (((x != 0.0) || (y != 0.0)) || (scale != 1.0))
+    }
+
+    ; THE REGION THIS LIST IS BUILT FOR, in scene coordinates.
+    ;
+    ; Culling asks "is this inside the clip", and the outermost clip has
+    ; always been the page — the right question while the list is in page
+    ; coordinates. A list with a camera is not: the scene is the whole board
+    ; and the page is a window onto it, so the question becomes "is this
+    ; inside the part of the scene this frame was built to show".
+    ;
+    ; That part is the viewport mapped back through the camera and grown by
+    ; an overscan, so a pan has somewhere to go before the frame has to be
+    ; built again — the same trick the scroll layers already play in one
+    ; dimension (`setOverscan`), in two.
+    ;
+    ; Unset is what every caller had: culling starts off and the first clip
+    ; turns it on.
+    fn setRegion:void (l:double t:double r:double b:double) {
+        regionLeft = l
+        regionTop = t
+        regionRight = r
+        regionBottom = b
+        hasRegion = true
+    }
+
+    fn clearRegion:void () {
+        hasRegion = false
+    }
+
+    fn clearView:void () {
+        viewX = 0.0
+        viewY = 0.0
+        viewScale = 1.0
+        hasView = false
+    }
+
+    fn setTextEngine:void (e:EVGTextEngine) {
+        textEngine = e
+    }
+
+    ; Every command in this file is appended here, so the element being walked
+    ; is stamped on it in one place rather than at twenty. The walk sets
+    ; `curNode`; this is the only thing that reads it.
+    fn addCmd:void (c:EVGDrawCmd) {
+        c.node = curNode
+        push cmds c
+    }
+
+    fn count:int () {
+        return (array_length cmds)
+    }
+
+    fn at:EVGDrawCmd (i:int) {
+        return (itemAt cmds i)
+    }
+
+    ; ------------------------------------------------------------ primitives --
+    ; Every component that draws into a display list needs the same four
+    ; commands, and each one that encoded them for itself encoded them slightly
+    ; differently. They live here, where `cmds` does, so a dialog, a grid and a
+    ; chart put the same bytes in the list.
+    ; ------------------------------------------- commands a host built --------
+    ; Some content is neither a box nor an SVG: a chart is a list of commands a
+    ; host produced for one size and one set of numbers. It cannot be made
+    ; during the walk, because it needs its card's rectangle and the walk is
+    ; what hands that out — so it is made after the layout and handed in here,
+    ; AGAINST THE ELEMENT IT BELONGS TO.
+    ;
+    ; The walk then emits it where that element is. Appended after the tree
+    ; instead — which is what a host has to do without this — it paints over
+    ; every dialog and every dropdown on the page, because "after everything"
+    ; is exactly what the end of the list means. And it lands outside the
+    ; scroll layer's range, so a kept list moves the page out from under it.
+    ;
+    ; Registered BEFORE `build`, which does not clear the registry: a list is
+    ; built once and a fresh one is made for the next frame.
+    def paintIds:[string]
+    def paintStart:[int]
+    def paintCount:[int]
+    def paintPool:[EVGDrawCmd]
+
+    ; Take another list's commands and hold them against `id`. The commands
+    ; are in page coordinates — the host emitted them where the element is —
+    ; so nothing here moves them.
+    fn paintAt:void (id:string from:EVGDisplayList) {
+        if ((strlen id) == 0) {
+            return
+        }
+        push paintIds id
+        push paintStart (array_length paintPool)
+        def n:int (from.count())
+        def i:int 0
+        while (i < n) {
+            push paintPool (from.at(i))
+            i = (i + 1)
+        }
+        push paintCount n
+    }
+
+    fn paintedCount:int () {
+        return (array_length paintIds)
+    }
+
+    ; Emit what was registered for this element, if anything. Called from the
+    ; walk with the element's own clip still open, so a chart is clipped by its
+    ; card the way its children are.
+    fn emitPainted:void (id:string) {
+        def i:int 0
+        def n:int (array_length paintIds)
+        while (i < n) {
+            if ((itemAt paintIds i) == id) {
+                def from:int (itemAt paintStart i)
+                def count:int (itemAt paintCount i)
+                def k:int 0
+                while (k < count) {
+                    this.addCmd((itemAt paintPool (from + k)))
+                    k = (k + 1)
+                }
+            }
+            i = (i + 1)
+        }
+    }
+
+    ; ------------------------------------------------------------ the ring ----
+    ; WHERE THE KEYBOARD IS. `EVGFocus` decides which element has the focus;
+    ; this is what makes it visible, and it is in the list rather than in a
+    ; host so a renderer gets the ring for the same reason it gets a border.
+    ; An id nothing in the tree carries draws nothing, which is what a focus
+    ; that outlived its element should look like.
+    def focusRingId@(mutable):string ""
+    def focusRingR@(mutable):int 125
+    def focusRingG@(mutable):int 211
+    def focusRingB@(mutable):int 252
+    def focusRingA@(mutable):double 1.0
+    def focusRingWidth@(mutable):double 2.0
+    ; Outside the box, the way a browser's outline sits outside the border.
+    def focusRingPad@(mutable):double 2.0
+    ; WHERE THE RING ENDED UP, so a kept list can move it. The ring is drawn
+    ; last of all and outside every clip, which puts it outside every layer's
+    ; range too — so a frame that only scrolled moved the whole page under a
+    ; ring that stayed where it was. `refreshRing` is what stops that.
+    def ringCmd@(mutable):int (0 - 1)
+    def ringEl@(mutable+optional):EVGElement
+
+    fn setFocusRing:void (id:string) {
+        focusRingId = id
+    }
+
+    fn setFocusRingStyle:void (r:int g:int b:int alpha:double width:double pad:double) {
+        focusRingR = r
+        focusRingG = g
+        focusRingB = b
+        focusRingA = alpha
+        focusRingWidth = width
+        focusRingPad = pad
+    }
+
+    ; Last of all, so it is over everything and outside every clip: a ring
+    ; half-hidden by the panel the focused button sits in is a ring that does
+    ; not say where the keyboard is.
+    fn paintFocusRing:void (root:EVGElement) {
+        if ((strlen focusRingId) == 0) {
+            return
+        }
+        def found@(optional):EVGElement (EVGDisplayList.ringTarget(root focusRingId))
+        if found {
+            this.ringAround((unwrap found))
+        }
+    }
+
+    fn ringAround:void (el:EVGElement) {
+        if (el.calculatedWidth <= 0.0) {
+            return
+        }
+        if (el.calculatedHeight <= 0.0) {
+            return
+        }
+        def col:EVGColor (EVGColor.rgba(focusRingR focusRingG focusRingB focusRingA))
+        def c:EVGDrawCmd (new EVGDrawCmd)
+        c.kind = 1
+        c.x = (el.calculatedX - focusRingPad)
+        c.y = (el.calculatedY - focusRingPad)
+        c.w = (el.calculatedWidth + (focusRingPad * 2.0))
+        c.h = (el.calculatedHeight + (focusRingPad * 2.0))
+        c.thickness = focusRingWidth
+        ; The element's own corner, opened out by however far the ring sits
+        ; off it, so a pill keeps its ends.
+        def rad:double el.box.borderRadiusPx
+        if (rad > 0.0) {
+            c.radius = (rad + focusRingPad)
+        }
+        c.r = (col.red())
+        c.g = (col.green())
+        c.b = (col.blue())
+        c.a = (col.alpha())
+        ; WHICH LAYER IT SCROLLS IN. The ring is emitted last and outside
+        ; every clip — so a button inside a panel is not half-ringed by the
+        ; panel's edge — and outside every clip is outside every LAYER too.
+        ; A host that moves a kept frame by a per-layer offset rather than by
+        ; rebuilding it then moved the whole page and left the ring behind:
+        ; `refreshRing` keeps the LIST right and this keeps the FRAME right.
+        ; The painter reads `layer` off a command that carries one.
+        c.layer = (this.layerAround(el))
+        this.addCmd(c)
+        ringCmd = ((array_length cmds) - 1)
+        ringEl = el
+    }
+
+    ; The scroll layer an element is inside, as the painter numbers them
+    ; (1-based, 0 for none) — the innermost, which is the last one whose
+    ; container holds it.
+    fn layerAround:int (el:EVGElement) {
+        def found@(mutable):int 0
+        def i:int 0
+        while (i < (array_length layerEls)) {
+            if ((itemAt layerKind i) == 0) {
+                if (EVGDisplayList.holds((itemAt layerEls i) el)) {
+                    found = (i + 1)
+                }
+            }
+            i = (i + 1)
+        }
+        return found
+    }
+
+    sfn holds:boolean (parent:EVGElement el:EVGElement) {
+        if (parent == el) {
+            return true
+        }
+        def i:int 0
+        def n:int (parent.getChildCount())
+        while (i < n) {
+            if (EVGDisplayList.holds((parent.getChild(i)) el)) {
+                return true
+            }
+            i = (i + 1)
+        }
+        return false
+    }
+
+    ; The ring against the box it is round, as that box stands now. A scroll
+    ; moves the boxes, and the layers' commands with them; this is the one
+    ; command that belongs to no layer, so it is put back by hand — one
+    ; element read, and no walk of anything.
+    fn refreshRing:void () {
+        if (ringCmd < 0) {
+            return
+        }
+        if (ringCmd >= (array_length cmds)) {
+            return
+        }
+        if ringEl {
+            def el:EVGElement (unwrap ringEl)
+            def c:EVGDrawCmd (itemAt cmds ringCmd)
+            c.x = (el.calculatedX - focusRingPad)
+            c.y = (el.calculatedY - focusRingPad)
+            c.w = (el.calculatedWidth + (focusRingPad * 2.0))
+            c.h = (el.calculatedHeight + (focusRingPad * 2.0))
+        }
+    }
+
+    ; THE VISIBLE ONE. An id can be in the tree twice — this app draws the same
+    ; navigation as a rail and as a bar, and the stylesheet folds one of them
+    ; away at every width — so a search that takes the first match rings the
+    ; copy that is not on the screen, which is a ring nobody can see. A hidden
+    ; branch is not searched, and a box laid out to nothing is not a target.
+    sfn ringTarget@(optional):EVGElement (el:EVGElement id:string) {
+        def none@(optional):EVGElement
+        if el.a11yHidden {
+            return none
+        }
+        if (el.display == "none") {
+            return none
+        }
+        if (el.id == id) {
+            if (el.calculatedWidth > 0.0) {
+                if (el.calculatedHeight > 0.0) {
+                    def hit@(optional):EVGElement el
+                    return hit
+                }
+            }
+        }
+        def i:int 0
+        def n:int (el.getChildCount())
+        while (i < n) {
+            def found@(optional):EVGElement (EVGDisplayList.ringTarget((el.getChild(i)) id))
+            if found {
+                return found
+            }
+            i = (i + 1)
+        }
+        return none
+    }
+
+    fn addRect:void (x:double y:double w:double h:double col:EVGColor) {
+        def c:EVGDrawCmd (new EVGDrawCmd)
+        c.kind = 0
+        c.x = x
+        c.y = y
+        c.w = w
+        c.h = h
+        c.r = (col.red())
+        c.g = (col.green())
+        c.b = (col.blue())
+        c.a = (col.alpha())
+        this.addCmd(c)
+    }
+
+    fn addFrame:void (x:double y:double w:double h:double thickness:double col:EVGColor) {
+        this.addTurnedFrame(x y w h thickness col 0.0 0.0 0.0)
+    }
+
+    ; The same, turned about a point of its own. A selection ring around a
+    ; layer that is not upright has to lean the way the layer does or it says
+    ; the wrong thing about it — an axis-aligned box around a turned shape
+    ; reads as "this is straight and bigger than it looks".
+    fn addTurnedFrame:void (x:double y:double w:double h:double thickness:double col:EVGColor deg:double ox:double oy:double) {
+        def c:EVGDrawCmd (new EVGDrawCmd)
+        c.kind = 1
+        c.x = x
+        c.y = y
+        c.w = w
+        c.h = h
+        c.thickness = thickness
+        c.r = (col.red())
+        c.g = (col.green())
+        c.b = (col.blue())
+        c.a = (col.alpha())
+        if ((deg > 0.001) || (deg < (0.0 - 0.001))) {
+            c.rotate = deg
+            c.rotOriginX = ox
+            c.rotOriginY = oy
+            c.hasRotOrigin = true
+        }
+        this.addCmd(c)
+    }
+
+    ; The measured width and height come from the caller, because the list has
+    ; no text renderer of its own and the measurement must be the one the
+    ; caller laid out with.
+    ; A textured quad. `src` names the picture rather than carrying it: every
+    ; backend here already resolves a name to a texture — the browser host
+    ; keys a blob URL by it, the PDF renderer opens the file — and two format
+    ; readers now emit one, which is why this moved out of `PptxToEvg` and
+    ; into the layer both of them draw through.
+    fn addImage:void (src:string x:double y:double w:double h:double flipH:boolean flipV:boolean rotate:double) {
+        if ((strlen src) == 0) {
+            return
+        }
+        def c:EVGDrawCmd (new EVGDrawCmd)
+        c.kind = 2
+        c.x = x
+        c.y = y
+        c.w = w
+        c.h = h
+        c.src = src
+        c.a = 1.0
+        c.flipH = flipH
+        c.flipV = flipV
+        c.rotate = rotate
+        this.addCmd(c)
+    }
+
+    fn addText:void (text:string x:double y:double size:double col:EVGColor family:string bold:boolean italic:boolean width:double height:double) {
+        if ((strlen text) == 0) {
+            return
+        }
+        def c:EVGDrawCmd (new EVGDrawCmd)
+        c.kind = 3
+        c.x = x
+        c.y = y
+        c.w = width
+        c.h = height
+        c.text = text
+        c.fontFamily = family
+        c.fontSize = size
+        if bold {
+            c.fontWeight = "bold"
+        }
+        if italic {
+            c.textAlign = "italic"
+        }
+        c.r = (col.red())
+        c.g = (col.green())
+        c.b = (col.blue())
+        c.a = (col.alpha())
+        this.addCmd(c)
+    }
+
+    ; One side's contribution to the box-wide scale factor: the smaller of what
+    ; we have and this side's length over the two radii that share it. A side
+    ; whose radii are zero contributes nothing, which is why the guard is on
+    ; the SUM and not on the side.
+    ; A radius in pixels, re-resolving a percentage against the box's OWN size.
+    ; `already` is what the box worked out from its parent, which is right for
+    ; every unit but a percentage.
+    sfn radiusPx:double (isPct:boolean pct:double already:double own:double) {
+        if isPct {
+            return ((pct / 100.0) * own)
+        }
+        return already
+    }
+
+    sfn sideFactor:double (soFar:double side:double sum:double) {
+        if (sum <= 0.0) {
+            return soFar
+        }
+        def f:double (side / sum)
+        if (f < soFar) {
+            return f
+        }
+        return soFar
+    }
+
+    fn addClip:void (x:double y:double w:double h:double) {
+        def c:EVGDrawCmd (new EVGDrawCmd)
+        c.kind = 4
+        c.x = x
+        c.y = y
+        c.w = w
+        c.h = h
+        this.addCmd(c)
+    }
+
+    ; A stroked polyline and a filled polygon, given in page coordinates.
+    ; The SVG walk below already emits kind 6/7 commands, but only from a
+    ; parsed `<path>`: anything that computes its own geometry — a chart line,
+    ; a graph edge — had no way to say so, and each such caller either
+    ; approximated the curve with thin rects or drew nothing on the GPU. The
+    ; points are already flattened, which is the contract kind 6/7 carry.
+    fn addPolyline:void (pts:[double] thickness:double col:EVGColor) {
+        if ((array_length pts) < 4) {
+            return
+        }
+        def c (new EVGDrawCmd())
+        c.kind = 7
+        c.thickness = thickness
+        c.r = (col.red())
+        c.g = (col.green())
+        c.b = (col.blue())
+        c.a = (col.alpha())
+        def i:int 0
+        while (i < (array_length pts)) {
+            push c.pts (itemAt pts i)
+            i = (i + 1)
+        }
+        push c.ringEnds (array_length c.pts)
+        this.setPolyBounds(c)
+        this.addCmd(c)
+    }
+
+    ; A filled shape made of SEVERAL rings, with holes.
+    ;
+    ; `addPolygon` takes one ring, so a caller with an outline — a magnifier's
+    ; glass, a letter O, any shape drawn as outer-boundary-then-inner — had to
+    ; call it once per ring, and each call fills independently. The hole comes
+    ; out solid. `EVGDrawCmd` has carried `ringEnds` and `evenOdd` all along
+    ; for the SVG walk to use; this is the same thing for anyone who computes
+    ; rings themselves.
+    ;
+    ; `rings` is a list of flattened point arrays, already in page coordinates.
+    fn addPolyRings:void (rings:[PathRing] col:EVGColor evenOddFill:boolean) {
+        if ((array_length rings) == 0) {
+            return
+        }
+        def c (new EVGDrawCmd())
+        c.kind = 6
+        c.evenOdd = evenOddFill
+        c.r = (col.red())
+        c.g = (col.green())
+        c.b = (col.blue())
+        c.a = (col.alpha())
+        def i:int 0
+        while (i < (array_length rings)) {
+            def ring:PathRing (itemAt rings i)
+            def j:int 0
+            while (j < (array_length ring.pts)) {
+                push c.pts (itemAt ring.pts j)
+                j = (j + 1)
+            }
+            push c.ringEnds (array_length c.pts)
+            i = (i + 1)
+        }
+        if ((array_length c.pts) < 6) {
+            return
+        }
+        this.setPolyBounds(c)
+        this.addCmd(c)
+    }
+
+    fn addPolygon:void (pts:[double] col:EVGColor) {
+        if ((array_length pts) < 6) {
+            return
+        }
+        def c (new EVGDrawCmd())
+        c.kind = 6
+        c.r = (col.red())
+        c.g = (col.green())
+        c.b = (col.blue())
+        c.a = (col.alpha())
+        def i:int 0
+        while (i < (array_length pts)) {
+            push c.pts (itemAt pts i)
+            i = (i + 1)
+        }
+        push c.ringEnds (array_length c.pts)
+        this.setPolyBounds(c)
+        this.addCmd(c)
+    }
+
+    ; A path command still carries a box, because the GL backend scissors and
+    ; batches by it. Derived from the points rather than left at zero, which
+    ; clipped every computed path to a 0x0 rectangle.
+    fn setPolyBounds:void (c:EVGDrawCmd) {
+        def minX:double 0.0
+        def minY:double 0.0
+        def maxX:double 0.0
+        def maxY:double 0.0
+        def n:int (idiv (array_length c.pts) 2)
+        def i:int 0
+        while (i < n) {
+            def x:double (itemAt c.pts (i * 2))
+            def yat:int ((i * 2) + 1)
+            def y:double (itemAt c.pts yat)
+            if (i == 0) {
+                minX = x
+                maxX = x
+                minY = y
+                maxY = y
+            } {
+                if (x < minX) { minX = x }
+                if (x > maxX) { maxX = x }
+                if (y < minY) { minY = y }
+                if (y > maxY) { maxY = y }
+            }
+            i = (i + 1)
+        }
+        c.x = minX
+        c.y = minY
+        c.w = (maxX - minX)
+        c.h = (maxY - minY)
+    }
+
+    fn addClipEnd:void () {
+        def c:EVGDrawCmd (new EVGDrawCmd)
+        c.kind = 5
+        this.addCmd(c)
+    }
+
+    ; --- COMMANDS APPENDED AFTER THE WALK, INSIDE A SCROLL ---------------------
+    ;
+    ; The walk puts a scroll container's commands inside its layer, so a kept
+    ; list moves them — see `refreshLayers`. Something APPENDED AFTERWARDS is
+    ; not inside anything: an application drawing a chart into a box the
+    ; layout placed cannot do it until the layout has placed it, so it comes
+    ; after the whole tree is down.
+    ;
+    ; Those commands used to sit at the position they were built at while the
+    ; kept list moved the page around them. On a scrolling diary that is a
+    ; chart's line floating over the page, on top of everything, snapping into
+    ; its card the moment the scroll stopped and the list was built again.
+    ;
+    ; This opens a clip that is A LAYER OF THE SAME CONTAINER: what is
+    ; appended between it and `addLayerClipEnd` moves exactly as the
+    ; container's own content moves, and stops being valid at exactly the
+    ; moment the container's content does — the cull range is the same one.
+    ; When the container has no layer in this list, because it does not scroll
+    ; or the list was built with culling off, this is an ordinary clip, which
+    ; is the right answer in both cases.
+    fn addLayerClip:void (el:EVGElement x:double y:double w:double h:double) {
+        def src:int (this.contentLayerFor(el))
+        def cp (new EVGDrawCmd())
+        cp.kind = 4
+        cp.x = x
+        cp.y = y
+        cp.w = w
+        cp.h = h
+        if (src >= 0) {
+            cp.layer = ((array_length layerEls) + 1)
+            push layerStack (array_length layerEls)
+            push layerEls el
+            ; Built now, so the offset it was built at is the offset now.
+            push layerTop el.scrollTop
+            push layerLeft el.scrollLeft
+            push layerShiftX 0.0
+            push layerShiftY 0.0
+            push layerClip (array_length cmds)
+            push layerFirst ((array_length cmds) + 1)
+            push layerLast ((array_length cmds) + 1)
+            ; The same range the content was built for, so the two go stale
+            ; together and one rebuild answers for both.
+            push layerCullL (itemAt layerCullL src)
+            push layerCullT (itemAt layerCullT src)
+            push layerCullR (itemAt layerCullR src)
+            push layerCullB (itemAt layerCullB src)
+            push layerKind 0
+            push layerScale 1.0
+            push layerPct 0
+            push layerLabel (0 - 1)
+        }
+        this.addCmd(cp)
+    }
+
+    fn addLayerClipEnd:void () {
+        if ((array_length layerStack) > 0) {
+            def done:int (itemAt layerStack ((array_length layerStack) - 1))
+            set layerLast done (array_length cmds)
+            removeLast layerStack
+        }
+        def pp (new EVGDrawCmd())
+        pp.kind = 5
+        this.addCmd(pp)
+    }
+
+    ; Is this rectangle inside what the list was BUILT FOR — the overscan
+    ; range of `el`'s scroll layer, not merely the part of it on the screen?
+    ;
+    ; The difference is what a kept list lives on. `emitCharts` and anything
+    ; else appending after the walk has to ask the same question the walk
+    ; asked, or it emits only what is visible NOW and the kept list has
+    ; nothing to show for a card that scrolls in: the card arrives complete
+    ; except for the one thing drawn outside the walk, which appears when the
+    ; list is next built — when the scroll stops.
+    ;
+    ; With no layer for `el` there is nothing kept and nothing to overscan, so
+    ; the answer is the plain overlap with the element's own box.
+    fn layerCovers:boolean (el:EVGElement x:double y:double w:double h:double) {
+        def i:int (this.contentLayerFor(el))
+        if (i < 0) {
+            if ((y + h) < el.calculatedY) {
+                return false
+            }
+            if (y > (el.calculatedY + el.calculatedHeight)) {
+                return false
+            }
+            if ((x + w) < el.calculatedX) {
+                return false
+            }
+            if (x > (el.calculatedX + el.calculatedWidth)) {
+                return false
+            }
+            return true
+        }
+        if ((y + h) < (itemAt layerCullT i)) {
+            return false
+        }
+        if (y > (itemAt layerCullB i)) {
+            return false
+        }
+        if ((x + w) < (itemAt layerCullL i)) {
+            return false
+        }
+        if (x > (itemAt layerCullR i)) {
+            return false
+        }
+        return true
+    }
+
+    ; The layer this element's CONTENT was built into, or -1. `layerFor` above
+    ; answers with whichever layer of the element comes first; a scroll
+    ; container has two — its content and its scrollbar thumb — and only the
+    ; content's range is the one an appended command belongs in.
+    fn contentLayerFor:int (el:EVGElement) {
+        def i:int 0
+        while (i < (array_length layerEls)) {
+            if ((itemAt layerKind i) == 0) {
+                if ((itemAt layerEls i) == el) {
+                    return i
+                }
+            }
+            i = (i + 1)
+        }
+        return (0 - 1)
+    }
+
+
+    ; The element's imported document, parsed once and kept on the element
+    ; — see `EVGElement.svgDoc`. Every frame that draws the element asked
+    ; for a fresh parse of the same markup before this.
+    fn svgDocumentOf:SvgDocument (el:EVGElement) {
+        def key@(mutable):string el.svgSource
+        if el.fillColor.isSet {
+            def fill:EVGColor el.fillColor
+            key = (key + ("|" + ((to_string fill.r) + ("," + ((to_string fill.g) + ("," + ((to_string fill.b) + ("," + (to_string fill.a)))))))))
+        }
+        if el.svgDoc {
+            if (el.svgDocKey == key) {
+                return (unwrap el.svgDoc)
+            }
+        }
+        def sp (new SvgParser())
+        if el.fillColor.isSet {
+            sp.setInitialFill((unwrap el.fillColor))
+        }
+        def doc:SvgDocument (sp.parse(el.svgSource))
+        el.svgDoc = doc
+        el.svgDocKey = key
+        return doc
+    }
+
+    ; A `<path>` element, flattened into rings and pushed as a fill and/or a
+    ; stroke. The transform is the one the raster and PDF targets build: the
+    ; viewBox mapping, then the element's position — so the points come out in
+    ; page coordinates and a backend can draw them as they are.
+    ; An imported SVG document (PLAN_VECTOR_IR.md Stage 4). Without this a
+    ; <Svg> would simply be absent from a GL backend while appearing in the
+    ; other three, which is the class of divergence this file exists to stop —
+    ; the same reason border-radius once worked in PDF and silently not in PNG.
+    ;
+    ; The importer has already resolved paint and baked group transforms, so
+    ; this is the single-path walk with the per-shape paint coming from the item
+    ; rather than from the element.
+    fn walkSvgDocument:void (el:EVGElement x:double y:double w:double h:double) {
+        def doc:SvgDocument (this.svgDocumentOf(el))
+        if ((doc.itemCount()) == 0) {
+            return
+        }
+
+        def vb:ViewBoxRect (doc.effectiveViewBox())
+        def m:Matrix2D (VectorViewBox.resolve(vb w h "xMidYMid meet"))
+        def steps:int (this.flattenSteps(w h))
+        def scale:double m.a
+        if (scale < 0.0) {
+            scale = (0.0 - scale)
+        }
+        if (scale <= 0.0) {
+            scale = 1.0
+        }
+
+        def k:int 0
+        while (k < (doc.itemCount())) {
+            def item:SvgVectorItem (itemAt doc.items k)
+            def parser:SVGPathParser (SVGPathParser.fromCommands(item.commands))
+            def rings:[PathRing] (parser.flattenRings(steps m.a m.b m.c m.d (m.e + x) (m.f + y)))
+            if ((array_length rings) > 0) {
+                if (item.hasFill()) {
+                    def cf (new EVGDrawCmd())
+                    cf.kind = 6
+                    cf.x = x
+                    cf.y = y
+                    cf.w = w
+                    cf.h = h
+                    cf.evenOdd = (item.fillRule == "evenodd")
+                    cf.r = (item.fillColor.red())
+                    cf.g = (item.fillColor.green())
+                    cf.b = (item.fillColor.blue())
+                    cf.a = (item.fillColor.alpha())
+                    this.copyRings(cf rings)
+                    this.addCmd(cf)
+                }
+                if (item.hasStroke()) {
+                    def cs (new EVGDrawCmd())
+                    cs.kind = 7
+                    cs.x = x
+                    cs.y = y
+                    cs.w = w
+                    cs.h = h
+                    cs.thickness = (item.strokeWidth * scale)
+                    cs.r = (item.strokeColor.red())
+                    cs.g = (item.strokeColor.green())
+                    cs.b = (item.strokeColor.blue())
+                    cs.a = (item.strokeColor.alpha())
+                    this.copyRings(cs rings)
+                    this.addCmd(cs)
+                }
+            }
+            k = (k + 1)
+        }
+    }
+
+    ; Subdivision chosen from the size it is drawn at, as every other target
+    ; does: a large shape must not show facets, a small one must not pay for
+    ; detail no pixel can show.
+    ;
+    ; DRAWN at, not laid out at. A transform is the difference between the
+    ; two, and on a canvas that zooms it is a large one: a Figma board at
+    ; 10% was flattening every glyph in it into the 48 segments a curve
+    ; 640 layout pixels wide deserves, to draw it five pixels long. The
+    ; scale of the transforms this subtree is under is carried down in
+    ; `drawScale` — see `walk` — so the count follows the pixels.
+    fn flattenSteps:int (w:double h:double) {
+        def span:double (w * drawScale)
+        def tall:double (h * drawScale)
+        if (tall > span) {
+            span = tall
+        }
+        def steps:int (to_int (span / 6.0))
+        if (steps < 4) {
+            steps = 4
+        }
+        if (steps > 48) {
+            steps = 48
+        }
+        return steps
+    }
+
+    fn walkPath:void (el:EVGElement x:double y:double w:double h:double) {
+        if ((strlen el.svgSource) > 0) {
+            this.walkSvgDocument(el x y w h)
+            return
+        }
+
+        def pathData:string el.svgPath
+        if ((strlen pathData) == 0) {
+            return
+        }
+        def steps:int (this.flattenSteps(w h))
+        def rings:[PathRing] (el.ringsCache)
+        def sameBox:boolean ((((el.ringsX == x) && (el.ringsY == y)) && (el.ringsW == w)) && (el.ringsH == h))
+        ; …and the FIT, which decides the matrix the rings were flattened
+        ; through. Left out of the key, a shape that started stretching went
+        ; on drawing the rings it had before it did.
+        def sameGeom:boolean ((((el.ringsSteps == steps) && (el.ringsPath == pathData)) && (el.ringsViewBox == el.viewBox)) && (el.ringsFit == el.preserveAspectRatio))
+        def fresh:boolean ((el.ringsHave && sameBox) && sameGeom)
+        if (fresh) {
+        } {
+            def parser (new SVGPathParser())
+            parser.parse(pathData)
+            def b:PathBounds (parser.getBounds())
+            def vb:ViewBoxRect (VectorViewBox.effectiveViewBox(el.viewBox b.minX b.minY b.width b.height))
+            def m:Matrix2D (VectorViewBox.resolve(vb w h el.preserveAspectRatio))
+            rings = (parser.flattenRings(steps m.a m.b m.c m.d (m.e + x) (m.f + y)))
+            ; Kept for the next walk — see the note on `EVGElement.ringsCache`.
+            el.ringsCache = rings
+            el.ringsHave = true
+            el.ringsPath = pathData
+            el.ringsX = x
+            el.ringsY = y
+            el.ringsW = w
+            el.ringsH = h
+            el.ringsSteps = steps
+            el.ringsScale = m.a
+            el.ringsViewBox = el.viewBox
+            el.ringsFit = el.preserveAspectRatio
+        }
+        if ((array_length rings) == 0) {
+            return
+        }
+
+        def fillColor:EVGColor el.fillColor
+        if (fillColor.isSet == false) {
+            fillColor = el.backgroundColor
+        }
+        if fillColor.isSet {
+            def cf (new EVGDrawCmd())
+            cf.kind = 6
+            cf.x = x
+            cf.y = y
+            cf.w = w
+            cf.h = h
+            cf.evenOdd = (el.fillRule == "evenodd")
+            cf.r = (fillColor.red())
+            cf.g = (fillColor.green())
+            cf.b = (fillColor.blue())
+            cf.a = (fillColor.alpha())
+            ; A GRADIENT ON A SHAPE THAT IS NOT ITS BOX. `hasGrad` was
+            ; written for rectangles only, so a vector filled with a ramp
+            ; kept its outline and lost the shading — or, flattened to the
+            ; average of its two ends, kept the shading and lost the ramp.
+            ; The command carries both: the rings say what shape it is, the
+            ; two stops and the direction say how it is shaded, and the box
+            ; the stops run across is the command's own x/y/w/h.
+            if (EVGDisplayList.hasLinearGradient(el)) {
+                EVGDisplayList.applyGradient(cf el)
+            }
+            this.copyRings(cf rings)
+            this.addCmd(cf)
+        }
+
+        ; A CONNECTOR'S HEADS, which are filled while its shaft is stroked.
+        ; They are a path of their own — see `EVGElement.arrowPath` — because
+        ; one path cannot be half filled: a fill closes every subpath it has,
+        ; and an orthogonal shaft closed is a triangle nobody asked for.
+        if ((strlen el.arrowPath) > 0) {
+            def hc:EVGColor (el.arrowFillColor())
+            if hc.isSet {
+                def hp (new SVGPathParser())
+                hp.parse(el.arrowPath)
+                def hb:PathBounds (hp.getBounds())
+                def hvb:ViewBoxRect (VectorViewBox.effectiveViewBox(el.viewBox hb.minX hb.minY hb.width hb.height))
+                def hm:Matrix2D (VectorViewBox.resolve(hvb w h el.preserveAspectRatio))
+                def hrings:[PathRing] (hp.flattenRings(steps hm.a hm.b hm.c hm.d (hm.e + x) (hm.f + y)))
+                if ((array_length hrings) > 0) {
+                    def ch (new EVGDrawCmd())
+                    ch.kind = 6
+                    ch.x = x
+                    ch.y = y
+                    ch.w = w
+                    ch.h = h
+                    ch.r = (hc.red())
+                    ch.g = (hc.green())
+                    ch.b = (hc.blue())
+                    ch.a = (hc.alpha())
+                    this.copyRings(ch hrings)
+                    this.addCmd(ch)
+                }
+            }
+        }
+
+        if el.strokeColor.isSet {
+            if (el.strokeWidth > 0.0) {
+                def sc:EVGColor el.strokeColor
+                def cs (new EVGDrawCmd())
+                cs.kind = 7
+                cs.x = x
+                cs.y = y
+                cs.w = w
+                cs.h = h
+                ; stroke-width is in user units, so it scales with the geometry.
+                def scale:double el.ringsScale
+                if (scale < 0.0) {
+                    scale = (0.0 - scale)
+                }
+                if (scale <= 0.0) {
+                    scale = 1.0
+                }
+                cs.thickness = (el.strokeWidth * scale)
+                cs.strokeCap = (EVGDisplayList.capCode(el.strokeLineCap))
+                cs.strokeJoin = (EVGDisplayList.joinCode(el.strokeLineJoin))
+                cs.strokeDash = el.strokeDashArray
+                cs.strokeDashOffset = el.strokeDashOffset
+                cs.r = (sc.red())
+                cs.g = (sc.green())
+                cs.b = (sc.blue())
+                cs.a = (sc.alpha())
+                this.copyRings(cs rings)
+                this.addCmd(cs)
+            }
+        }
+    }
+
+    fn copyRings:void (c:EVGDrawCmd rings:[PathRing]) {
+        def i:int 0
+        while (i < (array_length rings)) {
+            def ring:PathRing (itemAt rings i)
+            def k:int 0
+            while (k < (array_length ring.pts)) {
+                push c.pts (itemAt ring.pts k)
+                k = (k + 1)
+            }
+            ; A stroke is drawn segment by segment, so a ring Z closed gets
+            ; its closing edge as one more point — back to where it began.
+            ; A fill closes by itself and is left as it is.
+            if ((c.kind == 7) && ring.closed) {
+                if ((ring.pointCount()) >= 2) {
+                    push c.pts (itemAt ring.pts 0)
+                    push c.pts (itemAt ring.pts 1)
+                }
+            }
+            push c.ringEnds (array_length c.pts)
+            i = (i + 1)
+        }
+    }
+
+    ; Walk a LAID-OUT tree. Call after EVGLayout.layout(root).
+    ;
+    ; Two passes, because an overlay surface has to be drawn ABOVE the page and
+    ; not merely later in the tree. The first pass draws everything that is in
+    ; flow and puts each surface it meets aside; the second draws those, in the
+    ; order they were reached. A surface met INSIDE a surface is appended while
+    ; that loop is running, so a submenu lands after the menu that opened it.
+    ;
+    ; That order is a STACK — the order things opened in — not a z-index. There
+    ; is no number to get wrong and nothing for two components to disagree
+    ; about, and `EVGHitTest` builds the same list so that what is clicked is
+    ; what is seen.
+    ;
+    ; Deferring is also what takes a surface out of an ancestor's clip: the
+    ; second pass runs after the clip was popped, which is what a dropdown
+    ; inside a scrolling panel needs and what `overflow: hidden` would
+    ; otherwise forbid.
+    ; --- VIEWPORT CULLING -----------------------------------------------------
+    ;
+    ; A scrolled document is mostly not on the screen. Walking all of it to
+    ; emit commands for the tenth that is was the largest thing left in a
+    ; scroll frame of `gallery/realtrainer` once the layout stopped running:
+    ; `walkOpaque` alone — resolving corners, colours and gradients for rows
+    ; ten thousand pixels below the fold — was 17% of it, and the text it drew
+    ; had to be re-broken into lines to be drawn at all.
+    ;
+    ; So a subtree that cannot reach the clip it is inside is not walked. Two
+    ; things make that safe rather than merely fast:
+    ;
+    ;   It is tested against `EVGElement.paintTop`/`paintBottom` — the union
+    ;   of the subtree, written by the layout — and NOT against the element's
+    ;   own box, which says nothing about where its children are.
+    ;
+    ;   It happens only inside a real CLIP. An element that overflows a
+    ;   container that does not clip is drawn, and correctly: there is no clip
+    ;   rectangle in force, so nothing is culled. The scroll containers are
+    ;   exactly the elements that clip, which is why this needs no notion of
+    ;   scrolling at all.
+    ;
+    ; A subtree carrying a transform is never culled — see `paintUnbounded`.
+    ;
+    ; THE MARGIN is what keeps a fling from showing blank rows: the clip is
+    ; grown by `overscanBefore` above and `overscanAfter` below before
+    ; anything is tested, so the rows just past the edge are already drawn
+    ; when they arrive. A host that knows which way the finger went can make
+    ; the two different — big ahead, small behind — through `setOverscan`.
+    ; The default is one clip height each way, which also covers the shadow of
+    ; a box just off the edge.
+    def culling:boolean true
+    ; --- SCROLL LAYERS -------------------------------------------------------
+    ;
+    ; A scroll container's clip is a LAYER: the commands between its push
+    ; and its pop are the content the container shows, drawn with the
+    ; overscan above and below, in page coordinates at the offset the
+    ; container had when the list was built. Scrolling the container does
+    ; not need a new list — the same commands, moved by the difference —
+    ; until the offset leaves the range the overscan covered. That is what
+    ; `refreshLayers` does, and it is what lets a host keep this list, and
+    ; whatever it made from it, across a whole fling: a browser keeps its
+    ; vertex buffers on the card and changes one uniform per frame; a
+    ; CoreGraphics or Android painter paints the same commands, moved, and
+    ; pays no layout and no walk.
+    ;
+    ; The commands ARE moved, in place, so a painter that knows nothing of
+    ; layers draws the right frame. A painter that keeps something built from
+    ; the commands — the browser's buffers — reads `layerShiftX/Y`, the total
+    ; move since the build, and applies the part it has not built in.
+    ;
+    ; A layer is recorded only while culling is on: an uncut list is asked for
+    ; by a check that wants every command, and it should not be kept.
+    ;
+    ; `buildSeq` names the build, for a host that keeps what it made from a
+    ; list and has to know whether the list it was handed is the one it
+    ; built from. The app writes it: the list cannot number its own builds
+    ; across lists, and it is lists the host is telling apart.
+    def buildSeq:int 0
+    def layerEls:[EVGElement]
+    def layerTop:[double]
+    def layerLeft:[double]
+    def layerShiftX:[double]
+    def layerShiftY:[double]
+    def layerCullL:[double]
+    def layerCullT:[double]
+    def layerCullR:[double]
+    def layerCullB:[double]
+    def layerClip:[int]
+    def layerFirst:[int]
+    def layerLast:[int]
+    def layerStack:[int]
+    ; What a layer is: 0 the content of a scroll container, 1 the THUMB of
+    ; its scrollbar — a layer of its own, so a kept list moves it the way it
+    ; moves the content, by the scroll and `layerScale`, the thumb's pixels
+    ; per pixel of content.
+    def layerKind:[int]
+    def layerScale:[double]
+
+    ; --- SCROLLBARS ----------------------------------------------------------
+    ;
+    ; A scroll container draws its own bar: a track along its right edge
+    ; and a thumb whose length is the container's share of its content and
+    ; whose place is the offset. It is drawn by the list rather than by a
+    ; host, so every host has the same one, and it is drawn in three states
+    ; a host reports through `setScrollbarState`: 0, at rest — a thin,
+    ; faint thumb and no track, so it says where the page is without
+    ; asking to be looked at; 1, scrolling — wider and brighter, with the
+    ; track, which is what makes a fling readable; 2, the pointer on it or
+    ; dragging it — wider still. A container the pointer is over is named
+    ; through `setScrollbarHover` and drawn in state 2 whatever the rest are.
+    ;
+    ; The thumb is a layer (`layerKind` 1): a kept list moves it per frame
+    ; with the content, and a host that keeps its frame moves it with a
+    ; uniform. The bar's states are not per-frame — they change when a
+    ; scroll starts and ends and when the pointer arrives and leaves — and
+    ; each change is one build.
+    ;
+    ; Off unless an app asks: a list is also what the PDF and PNG targets and
+    ; the conformance oracles draw from, and a bar in those is a difference
+    ; nobody asked for.
+    ; --- FRAGMENTS -------------------------------------------------------------
+    ;
+    ; A subtree an app keeps (`EVGElement.keepLayout`) draws the same
+    ; commands each time it is walked: the text broken into the same lines,
+    ; the same icons flattened. So the first walk of it keeps the commands
+    ; it emitted, and the walks after emit THE SAME COMMANDS again — not
+    ; copies: the list that held them is the list being replaced. They are
+    ; where the subtree is, or are moved to it first: a kept list moves its
+    ; commands with the scroll exactly as the layout moves the elements, so
+    ; after a scroll they agree already, and after a rebuild that moved the
+    ; subtree by the flow they are moved by the difference, in place. The
+    ; difference is read off the first command's distance from the element,
+    ; which a move of both leaves alone.
+    ;
+    ; They hold while the sheet has written no paint in the subtree and the
+    ; layout has not laid it out for real since (`EVGElement.paintStamp`),
+    ; and while nothing is in flight anywhere, because a flight writes paint
+    ; between the sheet's passes. The recording walks the whole subtree,
+    ; culling off, so a card half over the edge is recorded whole and shown
+    ; whole when it arrives; a subtree that opened a scroll layer is not
+    ; kept, its layer would not be the new list's. On a diary of a hundred
+    ; workouts this is the difference between a list built by walking
+    ; twelve thousand commands' worth of elements and one built by walking
+    ; the shell.
+    def fragments:boolean true
+    ; How many kept subtrees this build drew from what they had, and how
+    ; many it walked — for a check, and for a bench.
+    def fragHits:int 0
+    def fragMisses:int 0
+    def fragEls:[EVGElement]
+    def fragLists:[[EVGDrawCmd]]
+    def fragStamps:[int]
+    def fragOffX:[double]
+    def fragOffY:[double]
+
+    fn setFragments:void (on:boolean) {
+        fragments = on
+    }
+
+    ; The fragments the last list kept, handed to this one by the app.
+    fn takeFragments:void (from:EVGDisplayList) {
+        fragEls = from.fragEls
+        fragLists = from.fragLists
+        fragStamps = from.fragStamps
+        fragOffX = from.fragOffX
+        fragOffY = from.fragOffY
+    }
+
+    fn forgetFragments:void () {
+        clear fragEls
+        clear fragLists
+        clear fragStamps
+        clear fragOffX
+        clear fragOffY
+    }
+
+    fn fragmentOf:int (el:EVGElement) {
+        def i:int 0
+        while (i < (array_length fragEls)) {
+            if ((itemAt fragEls i) == el) {
+                return i
+            }
+            i = (i + 1)
+        }
+        return (0 - 1)
+    }
+
+    ; Emit a kept subtree's commands again, moved to where it is now.
+    ; False when there is nothing kept that holds.
+    fn emitFragment:boolean (el:EVGElement) {
+        def fi:int (this.fragmentOf(el))
+        if (fi < 0) {
+            return false
+        }
+        if ((itemAt fragStamps fi) != el.paintStamp) {
+            return false
+        }
+        def kept:[EVGDrawCmd] (itemAt fragLists fi)
+        if ((array_length kept) == 0) {
+            return false
+        }
+        def first:EVGDrawCmd (itemAt kept 0)
+        def dx:double (el.calculatedX - (first.x + (itemAt fragOffX fi)))
+        def dy:double (el.calculatedY - (first.y + (itemAt fragOffY fi)))
+        for kept c:EVGDrawCmd ci {
+            if ((dx != 0.0) || (dy != 0.0)) {
+                c.x = (c.x + dx)
+                c.y = (c.y + dy)
+                if c.hasRotOrigin {
+                    c.rotOriginX = (c.rotOriginX + dx)
+                    c.rotOriginY = (c.rotOriginY + dy)
+                }
+                def n:int (array_length c.pts)
+                def p:int 0
+                while (p < n) {
+                    set c.pts p ((itemAt c.pts p) + dx)
+                    set c.pts (p + 1) ((itemAt c.pts (p + 1)) + dy)
+                    p = (p + 2)
+                }
+            }
+            this.addCmd(c)
+        }
+        return true
+    }
+
+    ; Keep what the walk just emitted for a subtree — or not, when it
+    ; opened a scroll layer, or emitted nothing to be placed by.
+    fn recordFragment:void (el:EVGElement start:int) {
+        def kept:[EVGDrawCmd]
+        def i:int start
+        def n:int (array_length cmds)
+        while (i < n) {
+            def c:EVGDrawCmd (itemAt cmds i)
+            if (c.layer > 0) {
+                return
+            }
+            push kept c
+            i = (i + 1)
+        }
+        if ((array_length kept) == 0) {
+            return
+        }
+        def first:EVGDrawCmd (itemAt kept 0)
+        def offX:double (el.calculatedX - first.x)
+        def offY:double (el.calculatedY - first.y)
+        def fi:int (this.fragmentOf(el))
+        if (fi < 0) {
+            push fragEls el
+            push fragLists kept
+            push fragStamps el.paintStamp
+            push fragOffX offX
+            push fragOffY offY
+            return
+        }
+        set fragLists fi kept
+        set fragStamps fi el.paintStamp
+        set fragOffX fi offX
+        set fragOffY fi offY
+    }
+
+    def scrollbars:boolean false
+    def barState:int 0
+    def barHover@(optional):EVGElement
+    ; The container the pointer is NEAR — within `barNearPx` of its right
+    ; edge — whose bar is up for it, so it can be found and taken. Near is
+    ; not on: nothing under the pointer is kept from a press by it.
+    def barNear@(optional):EVGElement
+    ; The thumb's label — "34 %" — and the percent it was written for: a
+    ; scroll that changes the number rewrites the text in place, which a
+    ; painter reads as it draws and a host that keeps its frame is told
+    ; about through `frameSeq`.
+    def layerPct:[int]
+    def layerLabel:[int]
+    ; Bumped whenever a command in a KEPT list changed in a way a frame
+    ; built from it cannot follow with a shift — a label's text. A host that
+    ; keeps its frame rebuilds it when this moves; the list is kept.
+    def frameSeq:int 0
+    ; What is painted under the element being walked: the nearest set
+    ; background up the tree, kept as the walk descends. The bar is ink on
+    ; it — light ink on a dark page, dark on a light one — because the
+    ; container's own text colour is not inherited onto it and a black thumb
+    ; on a black page was reported as no thumb at all.
+    def backdropR:int 255
+    def backdropG:int 255
+    def backdropB:int 255
+
+    fn setScrollbars:void (on:boolean) {
+        scrollbars = on
+    }
+
+    fn setScrollbarState:void (state:int) {
+        barState = state
+    }
+
+    fn setScrollbarHover:void (el@(optional):EVGElement) {
+        barHover = el
+    }
+
+    fn setScrollbarNear:void (el@(optional):EVGElement) {
+        barNear = el
+    }
+
+    ; How far from a container's right edge the pointer brings its bar up.
+    sfn barNearPx:double () {
+        return 36.0
+    }
+
+    sfn pctLabel:string (pct:int) {
+        return ((to_string pct) + " %")
+    }
+
+    ; How wide the thumb is in a state, in page pixels; `thin` is CSS's
+    ; `scrollbar-width: thin`.
+    sfn barWidth:double (state:int thin:boolean) {
+        if thin {
+            if (state >= 2) {
+                return 7.0
+            }
+            if (state == 1) {
+                return 5.0
+            }
+            return 3.0
+        }
+        if (state >= 2) {
+            return 11.0
+        }
+        if (state == 1) {
+            return 8.0
+        }
+        return 4.0
+    }
+
+    ; The bar for a container whose clip was just popped: the track when the
+    ; bar is up, and the thumb as a layer of its own, clipped to the track.
+    fn addScrollbar:void (el:EVGElement x:double y:double w:double h:double) {
+        def maxY:double (el.maxScrollTop())
+        if (maxY <= 0.0) {
+            return
+        }
+        def state@(mutable):int barState
+        if barNear {
+            if ((unwrap barNear) == el) {
+                if (state < 1) {
+                    state = 1
+                }
+            }
+        }
+        if barHover {
+            if ((unwrap barHover) == el) {
+                state = 2
+            }
+        }
+        if (el.scrollbarWidth == "none") {
+            return
+        }
+        def width:double (EVGDisplayList.barWidth(state (el.scrollbarWidth == "thin")))
+        def margin:double 3.0
+        def trackX:double ((x + w) - (width + margin))
+        def trackY:double (y + margin)
+        def trackH:double (h - (margin * 2.0))
+        if (trackH <= (width * 2.0)) {
+            return
+        }
+        ; The thumb's length is the container's share of its content, and
+        ; never so short a finger could not find it.
+        def thumbH@(mutable):double ((trackH * h) / (h + maxY))
+        if (thumbH < 24.0) {
+            thumbH = 24.0
+        }
+        if (thumbH > trackH) {
+            thumbH = trackH
+        }
+        def travel:double (trackH - thumbH)
+        def scale:double (travel / maxY)
+        def thumbY:double (trackY + (scale * el.scrollTop))
+        ; The container's own text colour, thinned: a bar that is the page's
+        ; ink at a fraction reads as part of the page on any theme.
+        def lum:int (idiv ((backdropR * 299) + ((backdropG * 587) + (backdropB * 114))) 1000)
+        ; The thumb's colour: the sheet's `scrollbar-color`, else ink on the
+        ; backdrop. Its alpha is the colour's own, thinned at rest and full
+        ; when lit — so a sheet that asks for a translucent thumb gets one
+        ; in every state.
+        def base@(mutable):EVGColor (EVGColor.rgba(30 30 30 1.0))
+        if (lum < 128) {
+            base = (EVGColor.rgba(235 235 235 1.0))
+        }
+        if el.scrollbarThumb.isSet {
+            base = (unwrap el.scrollbarThumb)
+        }
+        def cr:int (base.red())
+        def cg:int (base.green())
+        def cb:int (base.blue())
+        def own:double (base.alpha())
+        def thumbA@(mutable):double (own * 0.5)
+        if (state == 1) {
+            thumbA = (own * 0.72)
+        }
+        if (state >= 2) {
+            thumbA = (own * 0.92)
+        }
+        ; Lit from the left: the thumb is a gradient across itself, from the
+        ; colour lightened to the colour, which is what makes a flat bar
+        ; read as a rounded one.
+        def lit:EVGColor (base.lighten(0.38))
+        ; The ink of the label is what the pill is NOT: dark on a light
+        ; pill, light on a dark one.
+        def pillLum:int (idiv ((cr * 299) + ((cg * 587) + (cb * 114))) 1000)
+        def tr@(mutable):int 20
+        def tg@(mutable):int 20
+        def tb@(mutable):int 24
+        if (pillLum < 140) {
+            tr = 250
+            tg = 250
+            tb = 250
+        }
+        if (state > 0) {
+            def track (new EVGDrawCmd())
+            track.kind = 0
+            track.x = trackX
+            track.y = trackY
+            track.w = width
+            track.h = trackH
+            track.radius = (width / 2.0)
+            if el.scrollbarTrack.isSet {
+                track.r = (el.scrollbarTrack.red())
+                track.g = (el.scrollbarTrack.green())
+                track.b = (el.scrollbarTrack.blue())
+                track.a = (el.scrollbarTrack.alpha())
+            } {
+                track.r = cr
+                track.g = cg
+                track.b = cb
+                track.a = 0.12
+            }
+            this.addCmd(track)
+        }
+        ; The clip reaches left of the track to hold the label; the thumb
+        ; never leaves the track on its own, the offset is clamped.
+        def cp (new EVGDrawCmd())
+        cp.kind = 4
+        cp.x = (trackX - 64.0)
+        cp.y = trackY
+        cp.w = (width + 64.0)
+        cp.h = trackH
+        cp.layer = ((array_length layerEls) + 1)
+        push layerEls el
+        push layerTop el.scrollTop
+        push layerLeft el.scrollLeft
+        push layerShiftX 0.0
+        push layerShiftY 0.0
+        push layerClip (array_length cmds)
+        push layerFirst ((array_length cmds) + 1)
+        push layerLast ((array_length cmds) + 2)
+        push layerCullL 0.0
+        push layerCullT 0.0
+        push layerCullR 0.0
+        push layerCullB 0.0
+        push layerKind 1
+        push layerScale scale
+        def pct:int (to_int (((el.scrollTop * 100.0) / maxY) + 0.5))
+        push layerPct pct
+        push layerLabel (0 - 1)
+        this.addCmd(cp)
+        def thumb (new EVGDrawCmd())
+        thumb.kind = 0
+        thumb.x = trackX
+        thumb.y = thumbY
+        thumb.w = width
+        thumb.h = thumbH
+        thumb.radius = (width / 2.0)
+        thumb.hasGrad = true
+        thumb.gradDir = 1
+        thumb.r = (lit.red())
+        thumb.g = (lit.green())
+        thumb.b = (lit.blue())
+        thumb.a = thumbA
+        thumb.r2 = cr
+        thumb.g2 = cg
+        thumb.b2 = cb
+        thumb.a2 = thumbA
+        this.addCmd(thumb)
+        if ((state >= 1) && (el.scrollbarLabel != "none")) {
+            ; Where the page is, as a number beside the thumb: a pill in the
+            ; bar's ink with the text in the backdrop's, so it reads on any
+            ; page. It moves with the thumb — it is in the thumb's layer —
+            ; and its text is rewritten in place as the number changes.
+            def pillW:double 42.0
+            def pillH:double 18.0
+            def pillX:double ((trackX - pillW) - 6.0)
+            def pillY:double ((thumbY + (thumbH / 2.0)) - (pillH / 2.0))
+            def pill (new EVGDrawCmd())
+            pill.kind = 0
+            pill.x = pillX
+            pill.y = pillY
+            pill.w = pillW
+            pill.h = pillH
+            pill.radius = (pillH / 2.0)
+            pill.hasGrad = true
+            pill.gradDir = 0
+            pill.r = (lit.red())
+            pill.g = (lit.green())
+            pill.b = (lit.blue())
+            pill.a = (own * 0.94)
+            pill.r2 = cr
+            pill.g2 = cg
+            pill.b2 = cb
+            pill.a2 = (own * 0.94)
+            this.addCmd(pill)
+            def label (new EVGDrawCmd())
+            label.kind = 3
+            label.x = (pillX + 7.0)
+            label.y = (pillY + 2.0)
+            label.w = (pillW - 10.0)
+            label.h = (pillH - 4.0)
+            label.text = (EVGDisplayList.pctLabel(pct))
+            label.fontFamily = "sans-serif"
+            label.fontSize = 11.0
+            label.fontWeight = "600"
+            label.r = tr
+            label.g = tg
+            label.b = tb
+            label.a = 1.0
+            set layerLabel ((array_length layerEls) - 1) (array_length cmds)
+            this.addCmd(label)
+            set layerLast ((array_length layerEls) - 1) (array_length cmds)
+        }
+        def pp (new EVGDrawCmd())
+        pp.kind = 5
+        this.addCmd(pp)
+    }
+
+    ; The track column of a bar that is up, under a point: the layer index
+    ; of its thumb, or -1. A press here jumps the page to the point.
+    fn trackAt:int (px:double py:double) {
+        def i:int 0
+        while (i < (array_length layerEls)) {
+            if ((itemAt layerKind i) == 1) {
+                def cp:EVGDrawCmd (itemAt cmds (itemAt layerClip i))
+                def t:EVGDrawCmd (itemAt cmds (itemAt layerFirst i))
+                if ((px >= (t.x - 4.0)) && (px <= ((t.x + t.w) + 3.0))) {
+                    if ((py >= cp.y) && (py <= (cp.y + cp.h))) {
+                        return i
+                    }
+                }
+            }
+            i = (i + 1)
+        }
+        return (0 - 1)
+    }
+
+    ; The offset that puts a thumb's middle at `py`.
+    fn trackScrollFor:double (i:int py:double) {
+        def cp:EVGDrawCmd (itemAt cmds (itemAt layerClip i))
+        def t:EVGDrawCmd (itemAt cmds (itemAt layerFirst i))
+        def scale:double (itemAt layerScale i)
+        if (scale <= 0.0) {
+            return 0.0
+        }
+        return (((py - cp.y) - (t.h / 2.0)) / scale)
+    }
+
+    ; The scroll container whose right edge the point is near, as the index
+    ; of its CONTENT layer, or -1.
+    fn nearBarAt:int (px:double py:double) {
+        def i:int 0
+        while (i < (array_length layerEls)) {
+            if ((itemAt layerKind i) == 0) {
+                def cp:EVGDrawCmd (itemAt cmds (itemAt layerClip i))
+                if ((px >= ((cp.x + cp.w) - (EVGDisplayList.barNearPx()))) && (px <= (cp.x + cp.w))) {
+                    if ((py >= cp.y) && (py <= (cp.y + cp.h))) {
+                        return i
+                    }
+                }
+            }
+            i = (i + 1)
+        }
+        return (0 - 1)
+    }
+
+    ; The thumb under a point, as a layer index, or -1. A finger's width of
+    ; slack to the left of a thumb at rest, which is four pixels wide.
+    fn thumbAt:int (px:double py:double) {
+        def i:int 0
+        while (i < (array_length layerEls)) {
+            if ((itemAt layerKind i) == 1) {
+                def t:EVGDrawCmd (itemAt cmds (itemAt layerFirst i))
+                if ((px >= (t.x - 8.0)) && (px <= ((t.x + t.w) + 3.0))) {
+                    if ((py >= t.y) && (py <= (t.y + t.h))) {
+                        return i
+                    }
+                }
+            }
+            i = (i + 1)
+        }
+        return (0 - 1)
+    }
+
+    fn layerElement:EVGElement (i:int) {
+        return (itemAt layerEls i)
+    }
+
+    fn thumbScale:double (i:int) {
+        return (itemAt layerScale i)
+    }
+
+    ; The thumbs, as JSON, for a check to look at.
+    fn thumbsJson:string () {
+        def out@(mutable):string "["
+        def n@(mutable):int 0
+        def i:int 0
+        while (i < (array_length layerEls)) {
+            if ((itemAt layerKind i) == 1) {
+                def t:EVGDrawCmd (itemAt cmds (itemAt layerFirst i))
+                if (n > 0) {
+                    out = (out + ",")
+                }
+                out = (out + "{\"x\":" + (EVGDisplayList.num(t.x)) + ",\"y\":" + (EVGDisplayList.num(t.y)))
+                out = (out + ",\"w\":" + (EVGDisplayList.num(t.w)) + ",\"h\":" + (EVGDisplayList.num(t.h)) + ",\"a\":" + (EVGDisplayList.num(t.a)))
+                out = (out + ",\"c\":[" + (to_string t.r2) + "," + (to_string t.g2) + "," + (to_string t.b2) + "]}")
+                n = (n + 1)
+            }
+            i = (i + 1)
+        }
+        return (out + "]")
+    }
+
+    fn layerCount:int () {
+        return (array_length layerEls)
+    }
+
+    ; The layer this container's clip opens, or -1.
+    fn layerFor:int (el:EVGElement) {
+        def i:int 0
+        while (i < (array_length layerEls)) {
+            if ((itemAt layerEls i) == el) {
+                return i
+            }
+            i = (i + 1)
+        }
+        return (0 - 1)
+    }
+
+    ; Move every command in a layer's range — the content, the clips inside
+    ; it, the paths — by (dx, dy). The layer's own clip is not in the range:
+    ; the container stays where it is, its content moves.
+    fn shiftRange:void (first:int last:int dx:double dy:double) {
+        def i:int first
+        while (i < last) {
+            def c:EVGDrawCmd (itemAt cmds i)
+            c.x = (c.x + dx)
+            c.y = (c.y + dy)
+            if c.hasRotOrigin {
+                c.rotOriginX = (c.rotOriginX + dx)
+                c.rotOriginY = (c.rotOriginY + dy)
+            }
+            def n:int (array_length c.pts)
+            if (n > 0) {
+                def p:int 0
+                while (p < n) {
+                    set c.pts p ((itemAt c.pts p) + dx)
+                    set c.pts (p + 1) ((itemAt c.pts (p + 1)) + dy)
+                    p = (p + 2)
+                }
+            }
+            i = (i + 1)
+        }
+    }
+
+    ; Bring the layers up to their containers' current offsets. True when
+    ; every layer still covers what its container shows — the list is good
+    ; for this frame, moved — and false when one has scrolled past what was
+    ; built for it, which is the caller's cue to build again.
+    fn refreshLayers:boolean () {
+        def i:int 0
+        while (i < (array_length layerEls)) {
+            def el:EVGElement (itemAt layerEls i)
+            if ((itemAt layerKind i) == 1) {
+                def ty:double ((el.scrollTop - (itemAt layerTop i)) * (itemAt layerScale i))
+                def dsy:double (ty - (itemAt layerShiftY i))
+                if (dsy != 0.0) {
+                    this.shiftRange((itemAt layerFirst i) (itemAt layerLast i) 0.0 dsy)
+                    set layerShiftY i ty
+                }
+                if ((itemAt layerLabel i) >= 0) {
+                    def maxY:double (el.maxScrollTop())
+                    if (maxY > 0.0) {
+                        def pct:int (to_int (((el.scrollTop * 100.0) / maxY) + 0.5))
+                        if (pct != (itemAt layerPct i)) {
+                            set layerPct i pct
+                            def label:EVGDrawCmd (itemAt cmds (itemAt layerLabel i))
+                            label.text = (EVGDisplayList.pctLabel(pct))
+                            frameSeq = (frameSeq + 1)
+                        }
+                    }
+                }
+                i = (i + 1)
+                continue
+            }
+            def dy:double ((itemAt layerTop i) - el.scrollTop)
+            def dx:double ((itemAt layerLeft i) - el.scrollLeft)
+            ; The container's clip as it stands — an outer layer may have
+            ; moved it, and moved this layer's built range with it — has to
+            ; sit inside the built range once that range is moved by the
+            ; content's whole shift. Outside it, a row the viewport shows was
+            ; never built.
+            def cp:EVGDrawCmd (itemAt cmds (itemAt layerClip i))
+            if (cp.y < ((itemAt layerCullT i) + dy)) {
+                return false
+            }
+            if ((cp.y + cp.h) > ((itemAt layerCullB i) + dy)) {
+                return false
+            }
+            if (cp.x < ((itemAt layerCullL i) + dx)) {
+                return false
+            }
+            if ((cp.x + cp.w) > ((itemAt layerCullR i) + dx)) {
+                return false
+            }
+            def sx:double (dx - (itemAt layerShiftX i))
+            def sy:double (dy - (itemAt layerShiftY i))
+            if ((sx != 0.0) || (sy != 0.0)) {
+                this.shiftRange((itemAt layerFirst i) (itemAt layerLast i) sx sy)
+                set layerShiftX i dx
+                set layerShiftY i dy
+                ; The layers inside this one moved with its content, and so
+                ; did the ranges they were built for.
+                def j:int (i + 1)
+                while (j < (array_length layerEls)) {
+                    if ((itemAt layerClip j) > (itemAt layerClip i)) {
+                        if ((itemAt layerClip j) < (itemAt layerLast i)) {
+                            set layerCullL j ((itemAt layerCullL j) + sx)
+                            set layerCullR j ((itemAt layerCullR j) + sx)
+                            set layerCullT j ((itemAt layerCullT j) + sy)
+                            set layerCullB j ((itemAt layerCullB j) + sy)
+                        }
+                    }
+                    j = (j + 1)
+                }
+            }
+            i = (i + 1)
+        }
+        ; The layers are where their containers are; the ring belongs to none
+        ; of them and is put back against its own box.
+        this.refreshRing()
+        return true
+    }
+    def overscanBefore:double (0.0 - 1.0)
+    def overscanAfter:double (0.0 - 1.0)
+    ; The clip in force, and whether there is one. Not a stack: the rectangle
+    ; is intersected on the way down and restored on the way back up, which is
+    ; the stack, held in the recursion.
+    ; How much bigger or smaller than its layout box this subtree will be
+    ; drawn, from the transforms above it. One on a page that does not zoom.
+    def drawScale:double 1.0
+    def cullOn:boolean false
+    def cullLeft:double 0.0
+    def cullTop:double 0.0
+    def cullRight:double 0.0
+    def cullBottom:double 0.0
+
+    fn setCulling:void (on:boolean) {
+        culling = on
+    }
+
+    ; How far past the clip to draw anyway, in pixels, above and below. A
+    ; negative value means "one clip height", which is the default. Give the
+    ; direction of travel more room than the direction behind it.
+    fn setOverscan:void (before:double after:double) {
+        overscanBefore = before
+        overscanAfter = after
+    }
+
+    ; Is this subtree worth walking into?
+    fn cullable:boolean (el:EVGElement) {
+        if (cullOn == false) {
+            return false
+        }
+        if el.paintUnbounded {
+            return false
+        }
+        if (el.paintBottom < cullTop) {
+            return true
+        }
+        if (el.paintTop > cullBottom) {
+            return true
+        }
+        if (el.paintRight < cullLeft) {
+            return true
+        }
+        if (el.paintLeft > cullRight) {
+            return true
+        }
+        return false
+    }
+
+    fn build:void (root:EVGElement) {
+        clear cmds
+        clear deferredOverlays
+        clear layerEls
+        clear layerTop
+        clear layerLeft
+        clear layerShiftX
+        clear layerShiftY
+        clear layerCullL
+        clear layerCullT
+        clear layerCullR
+        clear layerCullB
+        clear layerClip
+        clear layerFirst
+        clear layerLast
+        clear layerStack
+        clear layerKind
+        clear layerScale
+        clear layerPct
+        clear layerLabel
+        fragHits = 0
+        fragMisses = 0
+        cullOn = false
+        if hasRegion {
+            ; The walk starts inside the region rather than outside every
+            ; clip. A clip met on the way down still narrows it, which is
+            ; what `walk` already does with a nested one.
+            cullOn = true
+            cullLeft = regionLeft
+            cullTop = regionTop
+            cullRight = regionRight
+            cullBottom = regionBottom
+        }
+        drawScale = 1.0
+        effectKind = ""
+        def noX:[double]
+        def noY:[double]
+        def noT:[double]
+        effectXs = noX
+        effectYs = noY
+        effectAges = noT
+        clear fxIds
+        clear fxKinds
+        clear fxTriggers
+        clear fxX
+        clear fxY
+        clear fxW
+        clear fxH
+        clear fxRadius
+        clear fxParamStart
+        clear fxParamCount
+        clear fxParamNames
+        clear fxParamValues
+        this.readEffect(root)
+        this.collectEffects(root)
+        this.walk(root)
+        def i:int 0
+        while (i < (array_length deferredOverlays)) {
+            ; Outside every clip: a surface is placed against the page, not
+            ; against whatever it was written inside.
+            cullOn = false
+            this.walk((itemAt deferredOverlays i))
+            i = (i + 1)
+        }
+        cullOn = false
+        ringCmd = (0 - 1)
+        def noRing@(optional):EVGElement
+        ringEl = noRing
+        this.paintFocusRing(root)
+    }
+
+    ; Apply `opacity` to everything this element and its subtree just emitted.
+    ;
+    ; The attribute has been in SPEC.md and on EVGElement all along, and
+    ; rangerflow's fade highlighter and book's slabs already set it — but
+    ; nothing ever read it, so every one of them painted at full strength. It
+    ; belongs here rather than in each painter: the display list is numbers, so
+    ; scaling the alpha once means WebGL, SDL, SoftCanvas, PDF and HTML all get
+    ; it without knowing the attribute exists.
+    ;
+    ; This scales each command's alpha rather than compositing the subtree
+    ; offscreen the way CSS `opacity` does. The difference shows only where two
+    ; faded children OVERLAP — there they blend with each other instead of as
+    ; one group. A display list cannot express the group form without a layer,
+    ; and this is the approximation every immediate-mode renderer makes.
+    fn fadeFrom:void (start:int factor:double) {
+        if (factor >= 1.0) {
+            return
+        }
+        def i:int start
+        while (i < (array_length cmds)) {
+            def c:EVGDrawCmd (itemAt cmds i)
+            c.a = (c.a * factor)
+            i = (i + 1)
+        }
+    }
+
+    ; A `transform` applied to everything this element and its children drew.
+    ;
+    ; The same shape as `fadeFrom` and for the same reason: a transform is a
+    ; property of a SUBTREE, and the display list has already flattened the
+    ; subtree by the time it is known what was in it. Recording where the
+    ; element's output began and rewriting that range afterwards is how both are
+    ; expressed without a transform stack in every backend. Nested transforms
+    ; compose because an outer element's range covers the inner one's output and
+    ; is rewritten after it.
+    ;
+    ; It is a similarity — rotation, uniform scale, translation — so each
+    ; command survives as a command rather than needing a matrix in the wire
+    ; format. Two different treatments, for two different kinds of command:
+    ;
+    ;   a box (rect, border, image, text) keeps its axis-aligned rectangle,
+    ;   moved and resized, and carries the ANGLE with the origin it turns
+    ;   about. The painter does the turning.
+    ;
+    ;   a path is turned in its GEOMETRY, here, because its shape does not live
+    ;   in `x/y/w/h` and no backend's quad rotation would reach it. That is the
+    ;   same choice `PathBuilder.rotateAbout` already makes, and it means SVG,
+    ;   PDF and raster all draw a turned icon without knowing what a transform
+    ;   is.
+    fn transformFrom:void (start:int el:EVGElement) {
+        def deg:double el.rotate
+        def sc:double el.scale
+        def tx:double el.translateX
+        def ty:double el.translateY
+        def flips:boolean el.flipY
+        def turns:boolean (deg != 0.0)
+        def scales:boolean (((fabs (sc - 1.0)) > 0.000001) || flips)
+        def shifts:boolean ((tx != 0.0) || (ty != 0.0))
+        if (((turns == false) && (scales == false)) && (shifts == false)) {
+            return
+        }
+        ; The y axis carries the reflection. A mirrored layer is a similarity
+        ; still — a turn, a factor and a flip — and read as a turn alone it
+        ; comes out backwards: a mirrored arrow on a board pointed the other
+        ; way, its head where its tail belonged.
+        def scy:double sc
+        if flips {
+            scy = (0.0 - sc)
+        }
+        ; What it turns about. `transform-origin` decides, and its default is
+        ; 50% 50% — the element's own centre. Measured against a browser rather
+        ; than assumed: a 100x40 box given a quarter turn about the default
+        ; comes back with its centre exactly where it started.
+        ;
+        ; Resolved HERE and not earlier, because a percentage needs the laid-out
+        ; box and this is the first place that exists.
+        def ox:double (el.calculatedX + (EVGElement.resolveOrigin(el.transformOriginX el.calculatedWidth)))
+        def oy:double (el.calculatedY + (EVGElement.resolveOrigin(el.transformOriginY el.calculatedHeight)))
+        def rad:double ((deg * 3.14159265358979) / 180.0)
+        def cs:double (cos rad)
+        def sn:double (sin rad)
+        def i:int start
+        def n:int (array_length cmds)
+        while (i < n) {
+            def c:EVGDrawCmd (itemAt cmds i)
+            if ((array_length c.pts) > 0) {
+                this.mapPoints(c ox oy sc scy cs sn tx ty)
+            } {
+                if scales {
+                    c.x = (ox + ((c.x - ox) * sc))
+                    c.y = (oy + ((c.y - oy) * scy))
+                    c.w = (c.w * sc)
+                    c.h = (c.h * scy)
+                    c.radius = ((fabs c.radius) * (fabs sc))
+                    c.thickness = ((fabs c.thickness) * (fabs sc))
+                    ; Type scales with the box. A button that grows on hover
+                    ; and keeps its old type size looks like a rendering fault.
+                    c.fontSize = ((fabs c.fontSize) * (fabs sc))
+                    ; A box has no negative side. The flip put the top edge
+                    ; below the bottom one, so the rectangle is turned the
+                    ; right way up and its corners follow: what was rounded
+                    ; at the top is rounded at the bottom now. An image is
+                    ; sampled the other way instead of moved.
+                    if (c.h < 0.0) {
+                        c.y = (c.y + c.h)
+                        c.h = (0.0 - c.h)
+                        if c.perCorner {
+                            def swTL:double c.radius
+                            c.radius = c.radiusBL
+                            c.radiusBL = swTL
+                            def swTR:double c.radiusTR
+                            c.radiusTR = c.radiusBR
+                            c.radiusBR = swTR
+                        }
+                        c.flipV = (c.flipV == false)
+                    }
+                    if (c.w < 0.0) {
+                        c.x = (c.x + c.w)
+                        c.w = (0.0 - c.w)
+                        if c.perCorner {
+                            def swTL2:double c.radius
+                            c.radius = c.radiusTR
+                            c.radiusTR = swTL2
+                            def swBL2:double c.radiusBL
+                            c.radiusBL = c.radiusBR
+                            c.radiusBR = swBL2
+                        }
+                        c.flipH = (c.flipH == false)
+                    }
+                }
+                if turns {
+                    ; A command already carrying its own rotation — a sideways
+                    ; axis label inside a turned panel — adds the two angles and
+                    ; has its pivot carried round by the outer one. Its own
+                    ; centre stops being the pivot, which is right: it is being
+                    ; carried, not spun in place.
+                    c.rotate = (c.rotate + deg)
+                    if (c.hasRotOrigin == false) {
+                        c.rotOriginX = ox
+                        c.rotOriginY = oy
+                        c.hasRotOrigin = true
+                    } {
+                        def rx:double (c.rotOriginX - ox)
+                        def ry:double (c.rotOriginY - oy)
+                        c.rotOriginX = (ox + ((rx * cs) - (ry * sn)))
+                        c.rotOriginY = (oy + ((rx * sn) + (ry * cs)))
+                    }
+                }
+                if shifts {
+                    c.x = (c.x + tx)
+                    c.y = (c.y + ty)
+                    if c.hasRotOrigin {
+                        c.rotOriginX = (c.rotOriginX + tx)
+                        c.rotOriginY = (c.rotOriginY + ty)
+                    }
+                }
+            }
+            i = (i + 1)
+        }
+    }
+
+    ; The whole similarity applied to a path's points. Rebuilt rather than
+    ; written in place: the array has no element assignment, and a fresh list
+    ; pushed back is clearer than an index dance anyway.
+    fn mapPoints:void (c:EVGDrawCmd ox:double oy:double sc:double scy:double cs:double sn:double tx:double ty:double) {
+        def moved:[double]
+        def i:int 0
+        def n:int (array_length c.pts)
+        while ((i + 1) < n) {
+            def px:double ((itemAt c.pts i) - ox)
+            def py:double ((itemAt c.pts (i + 1)) - oy)
+            def sx:double (px * sc)
+            def sy:double (py * scy)
+            push moved (((ox + ((sx * cs) - (sy * sn))) + tx))
+            push moved (((oy + ((sx * sn) + (sy * cs))) + ty))
+            i = (i + 2)
+        }
+        clear c.pts
+        def j:int 0
+        while (j < (array_length moved)) {
+            push c.pts (itemAt moved j)
+            j = (j + 1)
+        }
+    }
+
+    ; --- the background gradient -------------------------------------------
+    ;
+    ; TWO SHAPES AND NO MORE: down the box and across it. That is what `gd`
+    ; can say, and what every backend reading this list implements — the GL
+    ; shader mixes along one axis of the quad and the software canvas does the
+    ; same. So a linear gradient is snapped to the nearer axis and its stops
+    ; are swapped when it points the other way, which is exact for the four
+    ; right angles and an approximation for everything between them.
+    ;
+    ; A RADIAL gradient is not a direction at all, so it is not turned into
+    ; one: the box keeps whatever flat colour it had, and a viewer sees a
+    ; missing effect rather than a wrong one.
+    ;
+    ; Two stops, because the command carries two. A gradient authored with
+    ; more keeps its first and its last, and the ones between are dropped —
+    ; recorded here rather than hidden, since the alternative is a list format
+    ; change every backend would have to follow.
+    sfn normAngle:double (a:double) {
+        def v:double a
+        while (v < 0.0) {
+            v = (v + 360.0)
+        }
+        while (v >= 360.0) {
+            v = (v - 360.0)
+        }
+        return v
+    }
+
+    ; The element's drop shadow onto the command that carries its box.
+    ; `hasShadow` and slots 31-35 have been on the command and in the binary
+    ; all along and NOTHING EVER WROTE ONE FROM AN ELEMENT — the same gap a
+    ; gradient had. A board of FigJam stickies is 154 shadows, and every one
+    ; of them was a note sitting flat on the page.
+    ;
+    ; A shadow with no colour is not a shadow. An offset of zero with a
+    ; radius is, though — that is the soft halo under a sticky — so the test
+    ; is the colour and the radius, never the offset.
+    sfn applyShadow:void (c:EVGDrawCmd el:EVGElement) {
+        def col:EVGColor el.shadowColor
+        if (col.isSet == false) {
+            return
+        }
+        if ((col.alpha()) <= 0.0) {
+            return
+        }
+        def blur:double 0.0
+        if el.shadowRadius.isSet {
+            blur = el.shadowRadius.pixels
+        }
+        def dx:double 0.0
+        if el.shadowOffsetX.isSet {
+            dx = el.shadowOffsetX.pixels
+        }
+        def dy:double 0.0
+        if el.shadowOffsetY.isSet {
+            dy = el.shadowOffsetY.pixels
+        }
+        if (blur < 0.0) {
+            blur = 0.0
+        }
+        ; Nothing offset and nothing to soften draws exactly under the box it
+        ; would be hidden by, so it is not written at all.
+        if (((blur == 0.0) && (dx == 0.0)) && (dy == 0.0)) {
+            return
+        }
+        c.hasShadow = true
+        c.shadowX = dx
+        c.shadowY = dy
+        c.shadowBlur = blur
+        c.shadowR = (col.red())
+        c.shadowG = (col.green())
+        c.shadowB = (col.blue())
+        c.shadowA = (col.alpha())
+    }
+
+    ; The direction code as an angle — in TWO conventions, because the
+    ; painters do not share one and pretending otherwise rotates a gradient by
+    ; ninety degrees in one target and not the other.
+    ;
+    ; This list stores a direction as 0 or 1 because that is all a GPU backend
+    ; needs. `applyGradient` above is what reduces a CSS angle to that code, so
+    ; the inverses belong beside it rather than in each painter, where the two
+    ; would be free to disagree.
+    ;
+    ; `dir` 1 is the horizontal axis, 0 the vertical one, and the stops are
+    ; already in the order the axis is drawn in.
+
+    ; Screen space, y downwards, 0 degrees to the right: what the rasteriser's
+    ; `renderLinearGradient` takes, since it builds its direction vector
+    ; straight from (cos, sin).
+    sfn rasterAngleOfDir:double (dir:int) {
+        if (dir == 1) {
+            return 0.0
+        }
+        return 90.0
+    }
+
+    ; CSS, where an angle is the direction the gradient TRAVELS and 0 is to the
+    ; top: 90 runs left to right, 180 runs top to bottom. The PDF renderer
+    ; parses `linear-gradient(…deg…)` and reduces it the same way this file
+    ; does, so it wants the angle in the units it was written in.
+    sfn cssAngleOfDir:double (dir:int) {
+        if (dir == 1) {
+            return 90.0
+        }
+        return 180.0
+    }
+
+    sfn hasLinearGradient:boolean (el:EVGElement) {
+        ; The RGU1 pair — `gradient-from` / `gradient-to` / `gradient-dir` — is
+        ; already this list's own vocabulary: a direction and two colours, with
+        ; nothing to interpret.
+        if el.gradientSet {
+            return true
+        }
+        def g:EVGGradient el.gradient
+        if (g.isSet == false) {
+            return false
+        }
+        if (g.isLinear == false) {
+            return false
+        }
+        return ((g.getStopCount()) > 1)
+    }
+
+    sfn applyGradient:void (c:EVGDrawCmd el:EVGElement) {
+        if el.gradientSet {
+            def a0:EVGColor el.gradientFrom
+            def b0:EVGColor el.gradientTo
+            c.hasGrad = true
+            c.gradDir = el.gradientDir
+            c.r = (a0.red())
+            c.g = (a0.green())
+            c.b = (a0.blue())
+            c.a = (a0.alpha())
+            c.r2 = (b0.red())
+            c.g2 = (b0.green())
+            c.b2 = (b0.blue())
+            c.a2 = (b0.alpha())
+            return
+        }
+        def g:EVGGradient el.gradient
+        def ang:double (EVGDisplayList.normAngle(g.angle))
+        ; CSS reads the angle as the direction the gradient TRAVELS, with 0 to
+        ; the top and 90 to the right; the list reads a start corner. So the
+        ; two directions that run up or left are the same axis with the stops
+        ; the other way round.
+        def dir:int 0
+        def swap:boolean false
+        if ((ang >= 45.0) && (ang < 135.0)) {
+            dir = 1
+        }
+        if ((ang >= 225.0) && (ang < 315.0)) {
+            dir = 1
+            swap = true
+        }
+        if ((ang < 45.0) || (ang >= 315.0)) {
+            swap = true
+        }
+        def from:EVGColor (g.getStartColor())
+        def to:EVGColor (g.getEndColor())
+        if swap {
+            def tmp:EVGColor from
+            from = to
+            to = tmp
+        }
+        c.hasGrad = true
+        c.gradDir = dir
+        c.r = (from.red())
+        c.g = (from.green())
+        c.b = (from.blue())
+        c.a = (from.alpha())
+        c.r2 = (to.red())
+        c.g2 = (to.green())
+        c.b2 = (to.blue())
+        c.a2 = (to.alpha())
+    }
+
+    fn walk:void (el:EVGElement) {
+        ; `display: none` paints nothing, and nothing under it.
+        if (el.isHidden()) {
+            return
+        }
+        ; Nor does a subtree that cannot reach the clip it is inside.
+        if (this.cullable(el)) {
+            return
+        }
+        ; A subtree still owed a scroll is paid it before it is drawn — see
+        ; `EVGElement.shiftDx`. Its own box, which the test above read, was
+        ; already where it should be.
+        el.settleShift()
+        ; Where this element's own output begins, so `opacity` can scale
+        ; exactly what it and its children add — nested fades then multiply as
+        ; the recursion unwinds. A transform uses the same range.
+        def emitStart:int (array_length cmds)
+        ; The element every command appended below belongs to. Saved and put
+        ; back rather than cleared, because `walkOpaque` recurses through here
+        ; and a child must not leave its own slot behind for the commands its
+        ; parent emits afterwards.
+        ; A kept subtree, from what it emitted last time when that holds.
+        def keeping:boolean ((fragments && el.keepLayout) && (attribute == false))
+        if keeping {
+            if (this.emitFragment(el)) {
+                fragHits = (fragHits + 1)
+                return
+            }
+            fragMisses = (fragMisses + 1)
+        }
+        def prevNode:int curNode
+        if attribute {
+            curNode = el.inspectSlot
+        }
+        def hadCull:boolean cullOn
+        def hadCullL:double cullLeft
+        def hadCullT:double cullTop
+        def hadCullR:double cullRight
+        def hadCullB:double cullBottom
+        if keeping {
+            cullOn = false
+        }
+        def hadScale:double drawScale
+        def hadTurned:int turnedDepth
+        if (el.hasTransform()) {
+            def sc:double el.scale
+            if (sc < 0.0) {
+                sc = (0.0 - sc)
+            }
+            if (sc > 0.0) {
+                drawScale = (drawScale * sc)
+            }
+            if cullOn {
+                this.cullThroughTransform(el)
+            }
+            ; A clip inside a turn is a rectangle in a space the painter
+            ; cannot scissor to — see `clipsContent` below. Counted here,
+            ; where the turn is known, and counted for this element as well
+            ; as its children: its own clip is turned by it too.
+            if (el.rotate != 0.0) {
+                turnedDepth = (turnedDepth + 1)
+            }
+        }
+        this.walkOpaque(el)
+        turnedDepth = hadTurned
+        drawScale = hadScale
+        cullOn = hadCull
+        cullLeft = hadCullL
+        cullTop = hadCullT
+        cullRight = hadCullR
+        cullBottom = hadCullB
+        curNode = prevNode
+        this.fadeFrom(emitStart el.opacity)
+        this.transformFrom(emitStart el)
+        if keeping {
+            this.recordFragment(el emitStart)
+        }
+    }
+
+    ; The clip in force, carried into the space this element's children are
+    ; laid out in. A transform moves the pixels after the boxes are placed,
+    ; so a clip outside it is a rectangle in a different space from the
+    ; boxes below it — and testing one against the other is what made a
+    ; panned canvas draw nothing: a Figma board lays its frames out at
+    ; x = -13264 and a `translate` puts them on the screen, so every frame
+    ; measured as ten thousand pixels off and was skipped whole.
+    ;
+    ; `paintUnbounded` already spares the element that carries the
+    ; transform. Its children are not spared by it — they carry no
+    ; transform of their own — which is why the rectangle has to travel
+    ; rather than the flag. A rotation, which no rectangle here can follow,
+    ; turns culling off for the subtree instead of guessing at one.
+    fn cullThroughTransform:void (el:EVGElement) {
+        if (el.rotate != 0.0) {
+            cullOn = false
+            return
+        }
+        def sc:double el.scale
+        if ((fabs sc) < 0.000001) {
+            cullOn = false
+            return
+        }
+        def ox:double (el.calculatedX + (EVGElement.resolveOrigin(el.transformOriginX el.calculatedWidth)))
+        def oy:double (el.calculatedY + (EVGElement.resolveOrigin(el.transformOriginY el.calculatedHeight)))
+        def l:double (ox + (((cullLeft - el.translateX) - ox) / sc))
+        def r:double (ox + (((cullRight - el.translateX) - ox) / sc))
+        def t:double (oy + (((cullTop - el.translateY) - oy) / sc))
+        def b:double (oy + (((cullBottom - el.translateY) - oy) / sc))
+        if (l > r) {
+            def sw:double l
+            l = r
+            r = sw
+        }
+        if (t > b) {
+            def sw2:double t
+            t = b
+            b = sw2
+        }
+        cullLeft = l
+        cullTop = t
+        cullRight = r
+        cullBottom = b
+    }
+
+    fn walkOpaque:void (el:EVGElement) {
+        def x:double el.calculatedX
+        def y:double el.calculatedY
+        def w:double el.calculatedWidth
+        def h:double el.calculatedHeight
+
+        def radius:double el.box.borderRadiusPx
+        ; THE FOUR CORNERS, and the scale-down that makes them legal.
+        ;
+        ; CSS: if two radii on one side add up to more than that side, EVERY
+        ; radius on the box is multiplied by the same factor — the smallest
+        ; ratio over the four sides. Per-corner clamping is the classic wrong
+        ; answer and it comes out lopsided. Measured: 80px corners on a 100x40
+        ; box are drawn at 40, a factor of 0.5 applied to all four, and 60/20
+        ; on a 50x200 box become 37.5 and 12.5.
+        ;
+        ; It is done here and not in the box because it needs the DRAWN width
+        ; and height, which nothing knows until the layout has finished.
+        ; A PERCENTAGE IS AGAINST THIS BOX, not its parent. The box resolves
+        ; units when only the parent's dimensions are known, so it had nothing
+        ; else to use — `border-radius: 50%` on a 200x100 box inside a
+        ; 800x600 page came out 300, which the shader then clamped to 50 and
+        ; the PDF and raster backends did not. Re-resolved here against `w`,
+        ; where the box's own width is finally a number. Circular corners, so
+        ; one base: the browser would make an ellipse of it, and that is
+        ; recorded as a divergence rather than approximated.
+        def bx:EVGBox el.box
+        def uTL:EVGUnit bx.borderRadiusTL
+        def uTR:EVGUnit bx.borderRadiusTR
+        def uBR:EVGUnit bx.borderRadiusBR
+        def uBL:EVGUnit bx.borderRadiusBL
+        def uAll:EVGUnit bx.borderRadius
+        def rTL:double (EVGDisplayList.radiusPx((uTL.isSet && (uTL.isPercent())) uTL.value bx.borderRadiusTLPx w))
+        def rTR:double (EVGDisplayList.radiusPx((uTR.isSet && (uTR.isPercent())) uTR.value bx.borderRadiusTRPx w))
+        def rBR:double (EVGDisplayList.radiusPx((uBR.isSet && (uBR.isPercent())) uBR.value bx.borderRadiusBRPx w))
+        def rBL:double (EVGDisplayList.radiusPx((uBL.isSet && (uBL.isPercent())) uBL.value bx.borderRadiusBLPx w))
+        if ((bx.hasPerCornerRadius()) == false) {
+            def uni:double (EVGDisplayList.radiusPx((uAll.isSet && (uAll.isPercent())) uAll.value bx.borderRadiusPx w))
+            rTL = uni
+            rTR = uni
+            rBR = uni
+            rBL = uni
+        }
+        def f:double 1.0
+        f = (EVGDisplayList.sideFactor(f w (rTL + rTR)))
+        f = (EVGDisplayList.sideFactor(f h (rTR + rBR)))
+        f = (EVGDisplayList.sideFactor(f w (rBL + rBR)))
+        f = (EVGDisplayList.sideFactor(f h (rTL + rBL)))
+        if (f < 1.0) {
+            rTL = (rTL * f)
+            rTR = (rTR * f)
+            rBR = (rBR * f)
+            rBL = (rBL * f)
+        }
+        ; And the single number every other backend reads is the SCALED one.
+        ; It used to be the authored value: an 80-pixel radius on a 100-pixel
+        ; box went out as 80, and only the WebGL shader's own clamp made it
+        ; look right — PDF and the rasteriser drew what they were told.
+        radius = rTL
+        def perCorner:boolean (el.box.hasPerCornerRadius())
+
+        ; Background
+        ;
+        ; `painted` guards the case below it: an element carrying only a
+        ; `backdrop-filter` and no background of its own still has to emit a
+        ; rectangle, because the filter is the thing being drawn. CSS applies
+        ; `backdrop-filter` whether or not there is a background — a scrim that
+        ; softens the page and tints it not at all is an ordinary thing to want
+        ; — and gating the emit on a colour dropped that case entirely.
+        def painted:boolean false
+        def bgSet:boolean false
+        def bg:EVGColor (new EVGColor())
+        if el.backgroundColor {
+            def b0:EVGColor (unwrap el.backgroundColor)
+            if b0.isSet {
+                bg = b0
+                bgSet = true
+            }
+        }
+        ; A gradient is a background too, and until now it was the one kind
+        ; that never arrived: `hasGrad` has been on the command, in the JSON
+        ; and in the GL shader all along, and nothing wrote one from an
+        ; ELEMENT. So `background: linear-gradient(...)` with no
+        ; `background-color` beside it emitted no rectangle at all, and with
+        ; one it was painted flat.
+        def gradOk:boolean (EVGDisplayList.hasLinearGradient(el))
+        ; A PATH IS NOT ITS BOX. Its paint belongs on the path command, where
+        ; `walkPath` puts it, and a background rectangle beside it draws the
+        ; box the shape is not: a shaded pill came out sitting on a shaded
+        ; rectangle, grey leaking past its own rounded corner. The same is
+        ; true of a flat colour and always was — a path element carries it as
+        ; `fill` and never as `background-color`, so nothing noticed until a
+        ; gradient could be on both.
+        def paintsItsBox:boolean ((el.drawsPath()) == false)
+        if ((bgSet || gradOk) && paintsItsBox) {
+            def c (new EVGDrawCmd())
+            c.kind = 0
+            c.x = x
+            c.y = y
+            c.w = w
+            c.h = h
+            c.radius = radius
+            c.perCorner = perCorner
+            if perCorner {
+                c.radius = rTL
+                c.radiusTR = rTR
+                c.radiusBR = rBR
+                c.radiusBL = rBL
+            }
+            if bgSet {
+                c.r = (bg.red())
+                c.g = (bg.green())
+                c.b = (bg.blue())
+                c.a = (bg.alpha())
+            }
+            ; The gradient outranks the flat colour, the way `background-image`
+            ; is painted over `background-color` in a browser.
+            if gradOk {
+                EVGDisplayList.applyGradient(c el)
+            }
+            c.backdropBlur = el.backdropBlur
+            ; An ELEMENT-SCOPED EFFECT rides the element's own background,
+            ; which is where it belongs in paint order: the element's picture
+            ; first, then the effect, then its children on top.
+            if ((strlen el.surfaceEffect) > 0) {
+                c.effectId = el.effectRuntimeId
+            }
+            EVGDisplayList.applyShadow(c el)
+            this.addCmd(c)
+            painted = true
+        }
+        if (painted == false) {
+            ; A SHADOW UNDER SOMETHING WITH NO BACKGROUND. A FigJam sticky is
+            ; a container that paints nothing itself — its body arrives as a
+            ; child path — and the shadow is on the container. Gated on the
+            ; background, the shadow of every sticky on a board was dropped.
+            ;
+            ; The rectangle is the element's own box, fully transparent, and
+            ; carries only the shadow: the same shape the content fills, and
+            ; a backend that cannot draw shadows draws nothing, which is
+            ; what it did before this existed.
+            def probe (new EVGDrawCmd())
+            EVGDisplayList.applyShadow(probe el)
+            if ((probe.hasShadow && (el.backdropBlur <= 0.0)) && paintsItsBox) {
+                def cs (new EVGDrawCmd())
+                cs.kind = 0
+                cs.x = x
+                cs.y = y
+                cs.w = w
+                cs.h = h
+                cs.radius = radius
+                cs.perCorner = perCorner
+                if perCorner {
+                    cs.radius = rTL
+                    cs.radiusTR = rTR
+                    cs.radiusBR = rBR
+                    cs.radiusBL = rBL
+                }
+                cs.a = 0.0
+                EVGDisplayList.applyShadow(cs el)
+                this.addCmd(cs)
+            }
+            if (el.backdropBlur > 0.0) {
+                def cb (new EVGDrawCmd())
+                cb.kind = 0
+                cb.x = x
+                cb.y = y
+                cb.w = w
+                cb.h = h
+                cb.radius = radius
+                cb.perCorner = perCorner
+                if perCorner {
+                    cb.radius = rTL
+                    cb.radiusTR = rTR
+                    cb.radiusBR = rBR
+                    cb.radiusBL = rBL
+                }
+                ; Fully transparent: the rectangle exists to carry the filter,
+                ; and a backend that cannot filter draws nothing, which is
+                ; exactly right.
+                cb.a = 0.0
+                cb.backdropBlur = el.backdropBlur
+                EVGDisplayList.applyShadow(cb el)
+                this.addCmd(cb)
+            }
+            ; AN EFFECT ON A BOX THAT PAINTS NOTHING, which is the ordinary
+            ; case: a starfield is declared on an empty div and the stars are
+            ; the background. Same transparent carrier the filter above uses,
+            ; and a backend that has never heard of effects draws nothing,
+            ; which is exactly right.
+            if ((strlen el.surfaceEffect) > 0) {
+                def cf (new EVGDrawCmd())
+                cf.kind = 0
+                cf.x = x
+                cf.y = y
+                cf.w = w
+                cf.h = h
+                cf.radius = radius
+                cf.perCorner = perCorner
+                if perCorner {
+                    cf.radius = rTL
+                    cf.radiusTR = rTR
+                    cf.radiusBR = rBR
+                    cf.radiusBL = rBL
+                }
+                cf.a = 0.0
+                cf.effectId = el.effectRuntimeId
+                this.addCmd(cf)
+            }
+        }
+
+        ; Border. Read through the element's own accessor rather than a field
+        ; picked by hand: a CSS-declared border lands on `box`, an inline
+        ; camelCase one on the element, and this walk used to read one of each
+        ; — a width from the box and a colour from the element — so a
+        ; stylesheet border was silently dropped from every GPU backend.
+        def bw:double (el.effectiveBorderWidthPx())
+        if (bw > 0.0) {
+            def bc:EVGColor (el.effectiveBorderColor())
+            def c2 (new EVGDrawCmd())
+            c2.kind = 1
+            c2.x = x
+            c2.y = y
+            c2.w = w
+            c2.h = h
+            c2.radius = radius
+            c2.perCorner = perCorner
+            if perCorner {
+                c2.radius = rTL
+                c2.radiusTR = rTR
+                c2.radiusBR = rBR
+                c2.radiusBL = rBL
+            }
+            c2.thickness = bw
+            c2.r = (bc.red())
+            c2.g = (bc.green())
+            c2.b = (bc.blue())
+            c2.a = (bc.alpha())
+            this.addCmd(c2)
+        }
+
+
+        ; Vector paths. Flattened here, in page coordinates, because this is
+        ; where the drawn size is known — a GPU backend gets rings of points
+        ; and needs no path parser and no viewBox arithmetic of its own.
+        if (el.drawsPath()) {
+            this.walkPath(el x y w h)
+        }
+        ; Image
+        if ((strlen el.src) > 0) {
+            def c3 (new EVGDrawCmd())
+            c3.kind = 2
+            c3.x = x
+            c3.y = y
+            c3.w = w
+            c3.h = h
+            c3.radius = radius
+            c3.perCorner = perCorner
+            if perCorner {
+                c3.radius = rTL
+                c3.radiusTR = rTR
+                c3.radiusBR = rBR
+                c3.radiusBL = rBL
+            }
+            c3.src = el.src
+            if el.imageViewBoxSet {
+                c3.hasCrop = true
+                c3.cropX = el.imageViewBoxX
+                c3.cropY = el.imageViewBoxY
+                c3.cropW = el.imageViewBoxW
+                c3.cropH = el.imageViewBoxH
+            }
+            this.addCmd(c3)
+        }
+
+        ; Text. One command per element; a backend that shapes lines itself can
+        ; re-break, and one that does not can ask EVGTextEngine for the same
+        ; lines layout used.
+        if ((strlen el.textContent) > 0) {
+            def face:string (el.effectiveFontFamily())
+            def fs:double el.inheritedFontSize
+            if el.fontSize.isSet {
+                fs = el.fontSize.pixels
+            }
+            if (fs <= 0.0) {
+                fs = 14.0
+            }
+            ; The same rule the layout reserved the space by, so the line the
+            ; painter draws lands where the box was sized for it — and it is
+            ; the same CALL, not the same formula written twice.
+            ; `EVGElement.lineBoxFor` is where `normal`, a number and a length
+            ; are told apart; `normal` is the FACE's line box and not 1.2, and
+            ; a length is not a multiplier.
+            def lineBox:double (el.lineBoxFor(fs (textEngine.lineHeightFor(face fs))))
+            if (lineBox <= 0.0) {
+                lineBox = (fs * 1.2)
+            }
+            def avail:double (el.box.getInnerWidth(w))
+            ; The same width the layout counted the lines at — see
+            ; `EVGElement.wrapWidth`, which is zero for a `white-space` that
+            ; does not wrap. `avail` itself is still the box, because that is
+            ; what `text-align` centres inside.
+            ; The line objects, not just their strings: a paragraph gap is
+            ; a property of WHICH line this is, and the strings cannot say.
+            def broken:[EVGTextLine] (textEngine.breakLinesSpaced(el.textContent face fs (el.wrapWidth(avail)) el.letterSpacing))
+            def lines:[string]
+            def bi:int 0
+            while (bi < (array_length broken)) {
+                def bl:EVGTextLine (itemAt broken bi)
+                push lines bl.text
+                bi = (bi + 1)
+            }
+            def tr:int 0
+            def tg:int 0
+            def tb:int 0
+            def ta:double 1.0
+            if el.color {
+                def tc:EVGColor (unwrap el.color)
+                tr = (tc.red())
+                tg = (tc.green())
+                tb = (tc.blue())
+                ta = (tc.alpha())
+            }
+            def li:int 0
+            ; What the paragraph gaps above this line add to its place.
+            def paraShift:double 0.0
+            while (li < (array_length lines)) {
+                def lnObj:EVGTextLine (itemAt broken li)
+                if lnObj.startsParagraph {
+                    paraShift = (paraShift + el.paragraphSpacing)
+                }
+                def c4 (new EVGDrawCmd())
+                c4.kind = 3
+                ; `text-align`, which until now was parsed by EVGElement and
+                ; read by absolutely nothing — a documented attribute that did
+                ; not exist, which costs an afternoon every time someone
+                ; believes it.
+                ;
+                ; The offset is measured, not guessed: the painter draws a run
+                ; at c.x and sizes the quad to the ink, so centring means
+                ; asking the same engine that broke the line how wide the line
+                ; came out and moving the start by the slack.
+                def indent:double 0.0
+                if ((el.textAlign == "center") || (el.textAlign == "right")) {
+                    def m:EVGTextMetrics (textEngine.measureRunSpaced((itemAt lines li) face fs el.letterSpacing))
+                    def slack:double (avail - m.width)
+                    if (slack > 0.0) {
+                        if (el.textAlign == "center") {
+                            indent = (slack / 2.0)
+                        } {
+                            indent = slack
+                        }
+                    }
+                }
+                ; THE BORDER, as well as the padding. `avail` above is
+                ; `getInnerWidth`, which takes both off — and the layout's own
+                ; `calculatedBaseline` is measured from the border edge and
+                ; adds both. This did not, so a text element with a border
+                ; drew its text one border-width high and one left: over its
+                ; own top border, and measured against a width that assumed it
+                ; started inside it. EVG disagreeing with EVG, which is the
+                ; kind of divergence that survives longest because both halves
+                ; look right on their own.
+                def bw:double el.box.borderWidthPx
+                c4.x = (((x + bw) + el.box.paddingLeftPx) + indent)
+                c4.y = (((((y + bw) + el.box.paddingTopPx) + el.textShiftY) + ((to_double li) * lineBox)) + paraShift)
+                c4.w = avail
+                c4.h = lineBox
+                c4.text = (itemAt lines li)
+                c4.fontFamily = face
+                c4.fontSize = fs
+                ; The element's weight, which `addText` has always carried
+                ; and this walk never did: a `font-weight: 700` span was
+                ; laid out bold and painted regular by every GPU backend.
+                if ((strlen el.fontWeight) > 0) {
+                    if (el.fontWeight != "normal") {
+                        c4.fontWeight = el.fontWeight
+                    }
+                }
+                c4.letterSpacing = el.letterSpacing
+                c4.r = tr
+                c4.g = tg
+                c4.b = tb
+                c4.a = ta
+                this.addCmd(c4)
+                li = (li + 1)
+            }
+        }
+
+        ; Children, clipped when the element says so. EVERY overflow value but
+        ; `visible` clips — this used to name `hidden` alone, which meant a
+        ; scroll container drew its content straight over whatever was beside
+        ; it, and the one thing a scrolling box has to do is stay inside itself.
+        ; The backdrop under this element's children, and under its own
+        ; scrollbar: its background when it paints one, else what was there.
+        def hadBdR:int backdropR
+        def hadBdG:int backdropG
+        def hadBdB:int backdropB
+        def ownBg:EVGColor el.backgroundColor
+        if ownBg.isSet {
+            if ((ownBg.alpha()) > 0.5) {
+                backdropR = (ownBg.red())
+                backdropG = (ownBg.green())
+                backdropB = (ownBg.blue())
+            }
+        }
+        def clips:boolean (el.clipsContent())
+        ; NOT INSIDE A TURN. A clip crosses the list as x/y/w/h and every
+        ; backend makes it a scissor, which is axis-aligned; the rotation
+        ; that moved the pixels cannot move the rectangle with them. The
+        ; two then disagree, and a turned frame clipped away the very
+        ; thing it contains — a quarter-turned arrow on a FigJam board drew
+        ; nothing at all, its content sent a hundred pixels above a scissor
+        ; that stayed where the layout put it.
+        ;
+        ; So the clip is dropped rather than applied wrongly, which is the
+        ; same choice `cullThroughTransform` already makes for a rotation:
+        ; content that overflows a turned frame is drawn instead of being
+        ; cut in the wrong place. Anything else needs a stencil, and that is
+        ; a list format every backend would have to follow.
+        if (turnedDepth > 0) {
+            clips = false
+        }
+        ; A clip that can scroll is a layer — see `refreshLayers`.
+        def scrolls:boolean false
+        if ((clips && culling) && ((w > 0.0) && (h > 0.0))) {
+            if (((el.maxScrollTop()) > 0.0) || ((el.maxScrollLeft()) > 0.0)) {
+                scrolls = true
+            }
+        }
+        if clips {
+            def cp (new EVGDrawCmd())
+            cp.kind = 4
+            cp.x = x
+            cp.y = y
+            cp.w = w
+            cp.h = h
+            if scrolls {
+                cp.layer = ((array_length layerEls) + 1)
+                push layerStack (array_length layerEls)
+                push layerEls el
+                push layerTop el.scrollTop
+                push layerLeft el.scrollLeft
+                push layerShiftX 0.0
+                push layerShiftY 0.0
+                push layerClip (array_length cmds)
+                push layerFirst ((array_length cmds) + 1)
+                push layerLast ((array_length cmds) + 1)
+                push layerCullL 0.0
+                push layerCullT 0.0
+                push layerCullR 0.0
+                push layerCullB 0.0
+                push layerKind 0
+                push layerScale 1.0
+                push layerPct 0
+                push layerLabel (0 - 1)
+            }
+            this.addCmd(cp)
+        }
+        ; The clip narrows what is worth walking, and it is restored on the
+        ; way out — the recursion is the stack. See the note on culling above.
+        def hadCull:boolean cullOn
+        def hadL:double cullLeft
+        def hadT:double cullTop
+        def hadR:double cullRight
+        def hadB:double cullBottom
+        if (clips && culling) {
+            def before:double overscanBefore
+            def after:double overscanAfter
+            if (before < 0.0) { before = h }
+            if (after < 0.0) { after = h }
+            def l:double (x - w)
+            def t:double (y - before)
+            def r:double ((x + w) + w)
+            def b:double ((y + h) + after)
+            if cullOn {
+                ; Nested clips intersect: the inner one can only narrow.
+                if (l < cullLeft) { l = cullLeft }
+                if (t < cullTop) { t = cullTop }
+                if (r > cullRight) { r = cullRight }
+                if (b > cullBottom) { b = cullBottom }
+            }
+            cullOn = true
+            cullLeft = l
+            cullTop = t
+            cullRight = r
+            cullBottom = b
+            if scrolls {
+                def li:int (itemAt layerStack ((array_length layerStack) - 1))
+                set layerCullL li l
+                set layerCullT li t
+                set layerCullR li r
+                set layerCullB li b
+            }
+        }
+        def i:int 0
+        while (i < (el.getChildCount())) {
+            def kid:EVGElement (el.getChild(i))
+            ; A surface is not drawn here. `build` comes back to it once the
+            ; whole normal tree is down — see the note there.
+            if (kid.isSurface()) {
+                push deferredOverlays kid
+            } {
+                this.walk(kid)
+            }
+            i = (i + 1)
+        }
+        ; …and after them, whatever a host built for this element — see
+        ; `paintAt`. Inside the clip and inside the scroll layer's range,
+        ; because that is where the element itself is.
+        if ((array_length paintIds) > 0) {
+            if ((strlen el.id) > 0) {
+                this.emitPainted(el.id)
+            }
+        }
+        cullOn = hadCull
+        cullLeft = hadL
+        cullTop = hadT
+        cullRight = hadR
+        cullBottom = hadB
+        if clips {
+            if scrolls {
+                def done:int (itemAt layerStack ((array_length layerStack) - 1))
+                set layerLast done (array_length cmds)
+                removeLast layerStack
+            }
+            def pp (new EVGDrawCmd())
+            pp.kind = 5
+            this.addCmd(pp)
+            if (scrolls && scrollbars) {
+                this.addScrollbar(el x y w h)
+            }
+        }
+        backdropR = hadBdR
+        backdropG = hadBdG
+        backdropB = hadBdB
+    }
+
+    ; Serialize to JSON — the wire format between the engine and a backend.
+    ;
+    ; One flat array of commands. A backend needs no Ranger runtime to consume
+    ; it, which is what lets the WebGL renderer be plain JavaScript while the
+    ; SDL2 one is the same list decoded in C++.
+    ; How many ints one command occupies. Fixed, so a reader indexes rather
+    ; than walks: command `i` starts at `i * stride()`. Read it through this
+    ; function and never inline the number — it has changed once already, when
+    ; a rotation needed an origin to turn about.
+    ;
+    ; That instruction was there and a reader across the bridge had inlined it
+    ; anyway. The record went 24 -> 26, `pptx-host.mjs` went on multiplying by
+    ; 24, and from the second command on every field was read two ints early —
+    ; colours as coordinates, coordinates as flags — until a ring count taken
+    ; out of somebody's colour reached `new Array(n)`. So a comment is not the
+    ; mechanism: `sceneStride()` on the decoding side now DERIVES this by
+    ; dividing the buffer by the command count, which is exact because the
+    ; buffer is allocated as count * stride here, and it is checked against the
+    ; JSON path for every fixture by `pptx/web/host/scene-binary-check.mjs`.
+    ; Growing this number is safe; a reader that wants the new fields opts in.
+    sfn capCode:int (name:string) {
+        if (name == "round") {
+            return 1
+        }
+        if (name == "square") {
+            return 2
+        }
+        return 0
+    }
+
+    sfn joinCode:int (name:string) {
+        if (name == "round") {
+            return 1
+        }
+        if (name == "bevel") {
+            return 2
+        }
+        return 0
+    }
+
+    sfn stride:int () {
+        return 45
+    }
+
+    ; A value in hundredths, which is the precision `num` writes and therefore
+    ; the precision the JSON bridge has always carried.
+    sfn fixed:int (v:double) {
+        if (v < 0.0) {
+            return (0 - (to_int (((0.0 - v) * 100.0) + 0.5)))
+        }
+        return (to_int ((v * 100.0) + 0.5))
+    }
+
+    ; Three channels in one int, because a colour is three bytes and an
+    ; Int32Array holds four.
+    sfn packRgb:int (r:int g:int b:int) {
+        return (((r * 65536) + (g * 256)) + b)
+    }
+
+    ; The display list as typed arrays. See the banner on `EVGSceneBinary`.
+    fn toBinary:EVGSceneBinary () {
+        def out (new EVGSceneBinary())
+        def n:int (array_length cmds)
+        out.count = n
+        out.viewX = viewX
+        out.viewY = viewY
+        out.viewScale = viewScale
+        out.hasView = hasView
+        def stride:int (EVGDisplayList.stride())
+        def totalPts:int 0
+        def totalEnds:int 0
+        def i:int 0
+        while (i < n) {
+            def c:EVGDrawCmd (itemAt cmds i)
+            def pc:int (array_length c.pts)
+            totalPts = (totalPts + pc)
+            if (pc > 0) {
+                def ec:int (array_length c.ringEnds)
+                if (ec == 0) {
+                    ; One ring covering everything, which is what a command
+                    ; that set `pts` and no `ringEnds` means — the same rule
+                    ; `toJson` applies, and for the same reason.
+                    totalEnds = (totalEnds + 1)
+                } {
+                    totalEnds = (totalEnds + ec)
+                }
+            }
+            i = (i + 1)
+        }
+        def recs:int_buffer (int_buffer_alloc (n * stride))
+        def pbuf:int_buffer (int_buffer_alloc totalPts)
+        def ebuf:int_buffer (int_buffer_alloc totalEnds)
+        def pool:[string]
+        def poolIndex:[string:int]
+        def pAt:int 0
+        def eAt:int 0
+        def k:int 0
+        while (k < n) {
+            def c2:EVGDrawCmd (itemAt cmds k)
+            def base:int (k * stride)
+            int_buffer_set recs base c2.kind
+            int_buffer_set recs (base + 1) (EVGDisplayList.fixed(c2.x))
+            int_buffer_set recs (base + 2) (EVGDisplayList.fixed(c2.y))
+            int_buffer_set recs (base + 3) (EVGDisplayList.fixed(c2.w))
+            int_buffer_set recs (base + 4) (EVGDisplayList.fixed(c2.h))
+            int_buffer_set recs (base + 5) (EVGDisplayList.fixed(c2.radius))
+            int_buffer_set recs (base + 6) (EVGDisplayList.fixed(c2.thickness))
+            int_buffer_set recs (base + 7) (EVGDisplayList.packRgb(c2.r c2.g c2.b))
+            int_buffer_set recs (base + 8) (EVGDisplayList.fixed(c2.a))
+            def flags:int 0
+            if c2.hasGrad {
+                flags = (flags + 1)
+            }
+            if (c2.textAlign == "italic") {
+                flags = (flags + 2)
+            }
+            if c2.flipH {
+                flags = (flags + 4)
+            }
+            if c2.flipV {
+                flags = (flags + 8)
+            }
+            if c2.evenOdd {
+                flags = (flags + 16)
+            }
+            ; Whether slots 24 and 25 mean anything. A zero origin is a legal
+            ; place to turn about, so the flag cannot be inferred from the
+            ; numbers being zero.
+            if c2.hasRotOrigin {
+                flags = (flags + 32)
+            }
+            ; Slots 27-29 mean something: the other three corners.
+            if c2.perCorner {
+                flags = (flags + 64)
+            }
+            ; Slots 31-35 mean something: a drop shadow.
+            if c2.hasShadow {
+                flags = (flags + 128)
+            }
+            ; Slots 41-44 mean something: the crop window into the source.
+            if c2.hasCrop {
+                flags = (flags + 256)
+            }
+            int_buffer_set recs (base + 9) flags
+            int_buffer_set recs (base + 10) c2.gradDir
+            int_buffer_set recs (base + 11) (EVGDisplayList.packRgb(c2.r2 c2.g2 c2.b2))
+            int_buffer_set recs (base + 12) (EVGDisplayList.fixed(c2.a2))
+            int_buffer_set recs (base + 13) (EVGDisplayList.fixed(c2.fontSize))
+            int_buffer_set recs (base + 14) (EVGDisplayList.fixed(c2.rotate))
+            int_buffer_set recs (base + 24) (EVGDisplayList.fixed(c2.rotOriginX))
+            int_buffer_set recs (base + 25) (EVGDisplayList.fixed(c2.rotOriginY))
+            ; No flag beside it: zero is "no filter", which is a value a blur
+            ; radius cannot otherwise take. Contrast slot 24/25, where zero is
+            ; a legal place to turn about and the flag is the only way to tell.
+            int_buffer_set recs (base + 26) (EVGDisplayList.fixed(c2.backdropBlur))
+            ; --- what a host that keeps the frame across a thread needs ------
+            ;
+            ; The record grew from 27 to 36 when the list started crossing to
+            ; a painter on another thread (PLAN_NATIVE_HOSTS.md S1): a painter
+            ; fed from this buffer alone could not draw the three corners a
+            ; box rounds differently, could not tell a scroll layer's clip
+            ; from any other clip, and lost every shadow. The JSON bridge
+            ; carries the first two already; the shadow neither bridge did.
+            ; A reader derives the width from the buffer (ISSUES #4) and
+            ; reads the slots it knows, so the pptx decoder, which reads 23,
+            ; is untouched by this.
+            int_buffer_set recs (base + 27) (EVGDisplayList.fixed(c2.radiusTR))
+            int_buffer_set recs (base + 28) (EVGDisplayList.fixed(c2.radiusBR))
+            int_buffer_set recs (base + 29) (EVGDisplayList.fixed(c2.radiusBL))
+            int_buffer_set recs (base + 30) c2.layer
+            int_buffer_set recs (base + 31) (EVGDisplayList.fixed(c2.shadowX))
+            int_buffer_set recs (base + 32) (EVGDisplayList.fixed(c2.shadowY))
+            int_buffer_set recs (base + 33) (EVGDisplayList.fixed(c2.shadowBlur))
+            int_buffer_set recs (base + 34) (EVGDisplayList.packRgb(c2.shadowR c2.shadowG c2.shadowB))
+            int_buffer_set recs (base + 35) (EVGDisplayList.fixed(c2.shadowA))
+            ; 36: `letter-spacing`. The record is read by its width and not
+            ; by a version — a reader that wants 36 fields reads a 37-wide
+            ; buffer and ignores this, which is how the shadow slots were
+            ; added and why the pptx decoder that reads 23 is still right.
+            int_buffer_set recs (base + 36) (EVGDisplayList.fixed(c2.letterSpacing))
+            ; 37, 38: a stroke's cap and join, on the same terms.
+            int_buffer_set recs (base + 37) c2.strokeCap
+            int_buffer_set recs (base + 38) c2.strokeJoin
+            ; 39, 40: the dash pattern — its text in the pool, like the
+            ; font name, because the record is fixed-width and a pattern
+            ; is not — and how far into it the line starts.
+            def dashIdx:int (0 - 1)
+            if ((strlen c2.strokeDash) > 0) {
+                dashIdx = (EVGDisplayList.intern(pool poolIndex c2.strokeDash))
+            }
+            int_buffer_set recs (base + 39) dashIdx
+            int_buffer_set recs (base + 40) (EVGDisplayList.fixed(c2.strokeDashOffset))
+            ; 41-44: the crop window, in TEN-THOUSANDTHS. Every other slot is
+            ; hundredths because that is what `num` writes for a pixel; this
+            ; one is a fraction of a bitmap, where a hundredth is a whole
+            ; percent of the picture. `frac4` writes the JSON to match.
+            int_buffer_set recs (base + 41) (EVGDisplayList.fixed(c2.cropX * 100.0))
+            int_buffer_set recs (base + 42) (EVGDisplayList.fixed(c2.cropY * 100.0))
+            int_buffer_set recs (base + 43) (EVGDisplayList.fixed((c2.cropX + c2.cropW) * 100.0))
+            int_buffer_set recs (base + 44) (EVGDisplayList.fixed((c2.cropY + c2.cropH) * 100.0))
+            ; A command with no text names none of the three text strings, and
+            ; `toJson` writes none of them either — so the reader must be able
+            ; to tell "no text" from "empty text", which -1 says and 0 would
+            ; not.
+            def textIdx:int (0 - 1)
+            def fontIdx:int (0 - 1)
+            def weightIdx:int (0 - 1)
+            if ((strlen c2.text) > 0) {
+                textIdx = (EVGDisplayList.intern(pool poolIndex c2.text))
+                fontIdx = (EVGDisplayList.intern(pool poolIndex c2.fontFamily))
+                if ((strlen c2.fontWeight) > 0) {
+                    weightIdx = (EVGDisplayList.intern(pool poolIndex c2.fontWeight))
+                }
+            }
+            int_buffer_set recs (base + 15) textIdx
+            int_buffer_set recs (base + 16) fontIdx
+            int_buffer_set recs (base + 17) weightIdx
+            def srcIdx:int (0 - 1)
+            if ((strlen c2.src) > 0) {
+                srcIdx = (EVGDisplayList.intern(pool poolIndex c2.src))
+            }
+            int_buffer_set recs (base + 18) srcIdx
+            def pc2:int (array_length c2.pts)
+            int_buffer_set recs (base + 19) pAt
+            int_buffer_set recs (base + 20) pc2
+            def eStart:int eAt
+            if (pc2 > 0) {
+                def pi:int 0
+                while (pi < pc2) {
+                    int_buffer_set pbuf (pAt + pi) (EVGDisplayList.fixed((itemAt c2.pts pi)))
+                    pi = (pi + 1)
+                }
+                pAt = (pAt + pc2)
+                def ec2:int (array_length c2.ringEnds)
+                if (ec2 == 0) {
+                    int_buffer_set ebuf eAt pc2
+                    eAt = (eAt + 1)
+                } {
+                    def ei:int 0
+                    while (ei < ec2) {
+                        int_buffer_set ebuf (eAt + ei) (itemAt c2.ringEnds ei)
+                        ei = (ei + 1)
+                    }
+                    eAt = (eAt + ec2)
+                }
+            }
+            int_buffer_set recs (base + 21) eStart
+            int_buffer_set recs (base + 22) (eAt - eStart)
+            k = (k + 1)
+        }
+        out.cmds = recs
+        out.pts = pbuf
+        out.ends = ebuf
+        out.strings = pool
+        return out
+    }
+
+    ; One entry per distinct string. A slide names the same font on every run
+    ; it has, so the pool is a fraction of the number of commands.
+    sfn intern:int (pool:[string] index:[string:int] value:string) {
+        if (has index value) {
+            return (unwrap (get index value))
+        }
+        def at:int (array_length pool)
+        push pool value
+        set index value at
+        return at
+    }
+
+    ; The surface's post-process, written beside the commands and not as one of
+    ; them, because it applies to everything that was drawn rather than to a
+    ; rectangle in paint order. A backend that has never heard of it draws the
+    ; page and ignores the field, which is the whole reason it is here and not
+    ; in the command stream.
+    def effectKind:string ""
+    ; Every drop still in flight: x, y and how long ago, in step.
+    def effectXs:[double]
+    def effectYs:[double]
+    def effectAges:[double]
+    def effectSpeed:double 0.0
+    def effectWidth:double 0.0
+    def effectStrength:double 0.0
+    def effectDecay:double 0.0
+    def effectHighlight:double 0.0
+    def effectRings:double 1.0
+    def effectStagger:double 0.0
+    def effectFalloff:double 0.0
+    def effectShine:double 0.0
+    def effectGloss:double 1.0
+    def effectBump:double 0.0
+    def effectLightX:double 0.0
+    def effectLightY:double 0.0
+    def effectLightZ:double 1.0
+
+    ; --- AND THE SAME THING PER ELEMENT ---------------------------------------
+    ;
+    ; Everything above is the ORIGINAL surface effect: one per document, over
+    ; the whole page, its drops pushed in by the application. It stays exactly
+    ; as it was — `landing/`, the dashboard demo and their gates all draw
+    ; through it.
+    ;
+    ; This is the general form. Every element carrying `evg-surface-effect`
+    ; becomes one INSTANCE here, with the box the layout gave it, the trigger
+    ; the sheet declared and whatever `evg-fx-*` parameters were written on
+    ; it. The display list does not know what any of them mean — `ripple` and
+    ; `starfield` are strings here — and that is the point: a renderer plugin
+    ; the engine has never heard of gets its parameters through unharmed.
+    ;
+    ; Parallel arrays, and the parameters in one flat pair with a start and a
+    ; count per instance, because an array of objects would be an allocation
+    ; per frame for a page that has two of these.
+    def fxIds:[string]
+    def fxKinds:[string]
+    def fxTriggers:[string]
+    def fxX:[double]
+    def fxY:[double]
+    def fxW:[double]
+    def fxH:[double]
+    def fxRadius:[double]
+    def fxParamStart:[int]
+    def fxParamCount:[int]
+    def fxParamNames:[string]
+    def fxParamValues:[double]
+
+    ; Pick the effect up off the tree. The first element that names one wins:
+    ; a surface has one post-process, and two would be a question about order
+    ; that nobody asked.
+    fn readEffect:void (el:EVGElement) {
+        if ((strlen effectKind) > 0) {
+            return
+        }
+        if ((strlen el.surfaceEffect) > 0) {
+            effectKind = el.surfaceEffect
+            effectXs = el.rippleXs
+            effectYs = el.rippleYs
+            effectAges = el.rippleAges
+            effectSpeed = el.rippleSpeed
+            effectWidth = el.rippleWidth
+            effectStrength = el.rippleStrength
+            effectDecay = el.rippleDecay
+            effectHighlight = el.rippleHighlight
+            effectRings = el.rippleRings
+            effectStagger = el.rippleStagger
+            effectFalloff = el.rippleFalloff
+            effectShine = el.rippleShine
+            effectGloss = el.rippleGloss
+            effectBump = el.rippleBump
+            effectLightX = el.rippleLightX
+            effectLightY = el.rippleLightY
+            effectLightZ = el.rippleLightZ
+        }
+        ; Nothing below carries one, so there is nothing to find down there.
+        ; `paintHasEffect` is the layout's answer for the whole subtree; an
+        ; element whose own effect was set since the layout is still read
+        ; above, so only the search is short-circuited, never the element.
+        if ((el.paintHasEffect == false) && ((strlen el.surfaceEffect) == 0)) {
+            return
+        }
+        def i:int 0
+        while (i < (el.getChildCount())) {
+            this.readEffect((el.getChild(i)))
+            i = (i + 1)
+        }
+    }
+
+    ; --- THE EFFECT INSTANCES -------------------------------------------------
+    ;
+    ; Every element that names an effect, in tree order, with the box the
+    ; layout gave it. Pruned by `paintHasEffect` exactly as `readEffect` above
+    ; is: a page with no effect on it pays one comparison at the root.
+    fn collectEffects:void (el:EVGElement) {
+        if ((strlen el.surfaceEffect) > 0) {
+            this.addEffect(el)
+        }
+        if ((el.paintHasEffect == false) && ((strlen el.surfaceEffect) == 0)) {
+            return
+        }
+        def i:int 0
+        while (i < (el.getChildCount())) {
+            this.collectEffects((el.getChild(i)))
+            i = (i + 1)
+        }
+    }
+
+    ; One parameter on the instance being built, unless it already has one
+    ; under that name. The page's own `evg-fx-*` are pushed first and the
+    ; kind's defaults after, so what the author wrote wins and the JSON
+    ; carries each name once.
+    fn pushParam:void (start:int key:string value:double) {
+        def i:int start
+        while (i < (array_length fxParamNames)) {
+            if ((itemAt fxParamNames i) == key) {
+                return
+            }
+            i = (i + 1)
+        }
+        push fxParamNames key
+        push fxParamValues value
+    }
+
+    fn addEffect:void (el:EVGElement) {
+        ; ITS NAME. The element's `id` when it has one, so a host can drive
+        ; "hero-sky" by the name the document uses for it. Without one it is
+        ; positional and changes the moment another effect is declared above
+        ; it — which is why an effect meant to be driven should carry an id,
+        ; and why this does not silently pretend otherwise.
+        def id:string el.id
+        if ((strlen id) == 0) {
+            id = ("fx" + (to_string (array_length fxIds)))
+        }
+        el.effectRuntimeId = id
+        push fxIds id
+        push fxKinds el.surfaceEffect
+        push fxTriggers el.effectTrigger
+        push fxX el.calculatedX
+        push fxY el.calculatedY
+        push fxW el.calculatedWidth
+        push fxH el.calculatedHeight
+        push fxRadius el.box.borderRadiusPx
+        def start:int (array_length fxParamNames)
+        push fxParamStart start
+        def i:int 0
+        while (i < (array_length el.fxNames)) {
+            this.pushParam(start (itemAt el.fxNames i) (itemAt el.fxValues i))
+            i = (i + 1)
+        }
+        ; THE RIPPLE'S OWN PROPERTIES, AS PARAMETERS. `evg-ripple-speed` was
+        ; a named field back when the ripple was the only effect there was.
+        ; An element-scoped ripple reads the same numbers through the generic
+        ; channel, so a page that already styles a ripple keeps styling it the
+        ; way it always did and the plugin sees one kind of parameter.
+        if (el.surfaceEffect == "ripple") {
+            this.pushParam(start "speed" el.rippleSpeed)
+            this.pushParam(start "width" el.rippleWidth)
+            this.pushParam(start "strength" el.rippleStrength)
+            this.pushParam(start "decay" el.rippleDecay)
+            this.pushParam(start "highlight" el.rippleHighlight)
+            this.pushParam(start "rings" el.rippleRings)
+            this.pushParam(start "stagger" el.rippleStagger)
+            this.pushParam(start "falloff" el.rippleFalloff)
+            this.pushParam(start "shine" el.rippleShine)
+            this.pushParam(start "gloss" el.rippleGloss)
+            this.pushParam(start "bump" el.rippleBump)
+            this.pushParam(start "lightX" el.rippleLightX)
+            this.pushParam(start "lightY" el.rippleLightY)
+            this.pushParam(start "lightZ" el.rippleLightZ)
+        }
+        push fxParamCount ((array_length fxParamNames) - start)
+    }
+
+    fn toJson:string () {
+        def out:string "{"
+        if ((strlen effectKind) > 0) {
+            out = (out + "\"effect\":{\"kind\":\"" + effectKind + "\"")
+            out = (out + ",\"drops\":[")
+            def di:int 0
+            while (di < (array_length effectAges)) {
+                if (di > 0) {
+                    out = (out + ",")
+                }
+                out = (out + "[" + (EVGDisplayList.num((itemAt effectXs di))))
+                out = (out + "," + (EVGDisplayList.num((itemAt effectYs di))))
+                out = (out + "," + (EVGDisplayList.num((itemAt effectAges di))) + "]")
+                di = (di + 1)
+            }
+            out = (out + "]")
+            out = (out + ",\"speed\":" + (EVGDisplayList.num(effectSpeed)))
+            out = (out + ",\"width\":" + (EVGDisplayList.num(effectWidth)))
+            out = (out + ",\"strength\":" + (EVGDisplayList.num(effectStrength)))
+            out = (out + ",\"decay\":" + (EVGDisplayList.num(effectDecay)))
+            out = (out + ",\"highlight\":" + (EVGDisplayList.num(effectHighlight)))
+            out = (out + ",\"rings\":" + (EVGDisplayList.num(effectRings)))
+            out = (out + ",\"stagger\":" + (EVGDisplayList.num(effectStagger)))
+            out = (out + ",\"falloff\":" + (EVGDisplayList.num(effectFalloff)))
+            out = (out + ",\"shine\":" + (EVGDisplayList.num(effectShine)))
+            out = (out + ",\"gloss\":" + (EVGDisplayList.num(effectGloss)))
+            out = (out + ",\"bump\":" + (EVGDisplayList.num(effectBump)))
+            out = (out + ",\"light\":[" + (EVGDisplayList.num(effectLightX)) + "," +
+                (EVGDisplayList.num(effectLightY)) + "," +
+                (EVGDisplayList.num(effectLightZ)) + "]")
+            out = (out + "},")
+        }
+        ; THE ELEMENT-SCOPED EFFECTS, which is the general form of the block
+        ; above: one entry per element that declared one, each with the box
+        ; the layout gave it and whatever parameters were written on it. A
+        ; page with none writes nothing here, so every golden file that
+        ; predates this is the string it always was.
+        if ((array_length fxIds) > 0) {
+            out = (out + "\"effects\":[")
+            def fi:int 0
+            while (fi < (array_length fxIds)) {
+                if (fi > 0) {
+                    out = (out + ",")
+                }
+                out = (out + "{\"id\":" + (EVGDisplayList.jsonString((itemAt fxIds fi))))
+                out = (out + ",\"kind\":" + (EVGDisplayList.jsonString((itemAt fxKinds fi))))
+                if ((strlen (itemAt fxTriggers fi)) > 0) {
+                    out = (out + ",\"on\":" + (EVGDisplayList.jsonString((itemAt fxTriggers fi))))
+                }
+                out = (out + ",\"box\":[" + (EVGDisplayList.num((itemAt fxX fi))))
+                out = (out + "," + (EVGDisplayList.num((itemAt fxY fi))))
+                out = (out + "," + (EVGDisplayList.num((itemAt fxW fi))))
+                out = (out + "," + (EVGDisplayList.num((itemAt fxH fi))) + "]")
+                if ((itemAt fxRadius fi) > 0.0) {
+                    out = (out + ",\"r\":" + (EVGDisplayList.num((itemAt fxRadius fi))))
+                }
+                out = (out + ",\"p\":{")
+                def ps:int (itemAt fxParamStart fi)
+                def pn:int (itemAt fxParamCount fi)
+                def pi:int 0
+                while (pi < pn) {
+                    if (pi > 0) {
+                        out = (out + ",")
+                    }
+                    out = (out + (EVGDisplayList.jsonString((itemAt fxParamNames (ps + pi)))))
+                    out = (out + ":" + (EVGDisplayList.num((itemAt fxParamValues (ps + pi)))))
+                    pi = (pi + 1)
+                }
+                out = (out + "}}")
+                fi = (fi + 1)
+            }
+            out = (out + "],")
+        }
+        ; The camera on the envelope, not a field per command. Written only
+        ; when there is one, so a list with no view is the string it always
+        ; was — which is what every golden file in this repository compares.
+        if hasView {
+            out = (out + "\"view\":[" + (EVGDisplayList.fine(viewX)) + ",")
+            out = (out + (EVGDisplayList.fine(viewY)) + "," + (EVGDisplayList.fine(viewScale)) + "],")
+        }
+        out = (out + "\"cmds\":[")
+        def i:int 0
+        while (i < (array_length cmds)) {
+            def c:EVGDrawCmd (itemAt cmds i)
+            if (i > 0) {
+                out = out + ","
+            }
+            out = out + "{\"k\":" + (to_string c.kind)
+            if (c.layer > 0) {
+                out = out + ",\"layer\":" + (to_string c.layer)
+            }
+            if attribute {
+                out = out + ",\"n\":" + (to_string c.node)
+            }
+            out = out + ",\"x\":" + (EVGDisplayList.num(c.x))
+            out = out + ",\"y\":" + (EVGDisplayList.num(c.y))
+            out = out + ",\"w\":" + (EVGDisplayList.num(c.w))
+            out = out + ",\"h\":" + (EVGDisplayList.num(c.h))
+            if c.perCorner {
+                out = out + ",\"rc\":[" + (EVGDisplayList.num(c.radius)) + "," +
+                    (EVGDisplayList.num(c.radiusTR)) + "," +
+                    (EVGDisplayList.num(c.radiusBR)) + "," +
+                    (EVGDisplayList.num(c.radiusBL)) + "]"
+            }
+            if (c.radius > 0.0) {
+                out = out + ",\"r\":" + (EVGDisplayList.num(c.radius))
+            }
+            if (c.thickness > 0.0) {
+                out = out + ",\"t\":" + (EVGDisplayList.num(c.thickness))
+                if (c.strokeCap != 0) {
+                    out = out + ",\"cap\":" + (to_string c.strokeCap)
+                }
+                if (c.strokeJoin != 0) {
+                    out = out + ",\"join\":" + (to_string c.strokeJoin)
+                }
+                if ((strlen c.strokeDash) > 0) {
+                    out = out + ",\"dash\":" + (EVGDisplayList.jsonString(c.strokeDash))
+                    if (c.strokeDashOffset != 0.0) {
+                        out = out + ",\"dashoff\":" + (EVGDisplayList.num(c.strokeDashOffset))
+                    }
+                }
+            }
+            out = out + ",\"c\":[" + (to_string c.r) + "," + (to_string c.g)
+            out = out + "," + (to_string c.b) + "," + (EVGDisplayList.num(c.a)) + "]"
+            ; A two-stop gradient was on the command and in the software
+            ; canvas but never in the JSON, so every backend on the other side
+            ; of it painted the first stop flat across the box. `gd` is the
+            ; direction (1 = across, otherwise down) and `c2` the far stop.
+            if c.hasGrad {
+                out = out + ",\"gd\":" + (to_string c.gradDir)
+                out = out + ",\"c2\":[" + (to_string c.r2) + "," + (to_string c.g2)
+                out = out + "," + (to_string c.b2) + "," + (EVGDisplayList.num(c.a2)) + "]"
+            }
+            if ((strlen c.text) > 0) {
+                out = out + ",\"text\":" + (EVGDisplayList.jsonString(c.text))
+                out = out + ",\"font\":" + (EVGDisplayList.jsonString(c.fontFamily))
+                out = out + ",\"size\":" + (EVGDisplayList.num(c.fontSize))
+                ; Weight / slant so a canvas backend paints the same face the
+                ; SoftCanvas rasterizer picked.
+                if (c.letterSpacing != 0.0) {
+                    out = out + ",\"ls\":" + (EVGDisplayList.num(c.letterSpacing))
+                }
+                if ((strlen c.fontWeight) > 0) {
+                    out = out + ",\"weight\":" + (EVGDisplayList.jsonString(c.fontWeight))
+                }
+                if (c.textAlign == "italic") {
+                    out = out + ",\"italic\":true"
+                }
+            }
+            if ((strlen c.src) > 0) {
+                out = out + ",\"src\":" + (EVGDisplayList.jsonString(c.src))
+            }
+            if c.flipH {
+                out = out + ",\"fx\":true"
+            }
+            if c.flipV {
+                out = out + ",\"fy\":true"
+            }
+            ; Only when there IS a crop, so a list built without one is the
+            ; same bytes it was before this field existed.
+            if c.hasCrop {
+                out = out + ",\"cu\":[" + (EVGDisplayList.frac4(c.cropX)) + "," + (EVGDisplayList.frac4(c.cropY))
+                out = out + "," + (EVGDisplayList.frac4(c.cropX + c.cropW)) + "," + (EVGDisplayList.frac4(c.cropY + c.cropH)) + "]"
+            }
+            if (c.rotate != 0.0) {
+                out = out + ",\"rot\":" + (EVGDisplayList.num(c.rotate))
+                if c.hasRotOrigin {
+                    out = out + ",\"rox\":" + (EVGDisplayList.num(c.rotOriginX))
+                    out = out + ",\"roy\":" + (EVGDisplayList.num(c.rotOriginY))
+                }
+            }
+            if ((strlen c.effectId) > 0) {
+                out = out + ",\"efx\":" + (EVGDisplayList.jsonString(c.effectId))
+            }
+            if (c.backdropBlur > 0.0) {
+                out = out + ",\"bb\":" + (EVGDisplayList.num(c.backdropBlur))
+            }
+            ; The drop shadow, in the shape both painters read it: an offset,
+            ; a blur and a colour. The binary bridge has carried this since
+            ; slot 31; the JSON never did, so the two bridges disagreed about
+            ; a frame and only one of them was right.
+            if c.hasShadow {
+                out = out + ",\"sh\":{\"x\":" + (EVGDisplayList.num(c.shadowX))
+                out = out + ",\"y\":" + (EVGDisplayList.num(c.shadowY))
+                out = out + ",\"blur\":" + (EVGDisplayList.num(c.shadowBlur))
+                out = out + ",\"c\":[" + (to_string c.shadowR) + "," + (to_string c.shadowG)
+                out = out + "," + (to_string c.shadowB) + "," + (EVGDisplayList.num(c.shadowA)) + "]}"
+            }
+            ; The GEOMETRY decides whether there is a path, not the ring list:
+            ; a command built by hand — and there are several, in this gallery
+            ; and outside it — sets `pts` and forgets `ringEnds`, and gating
+            ; the points on the ring list dropped every one of those shapes on
+            ; the floor. A backend saw a path command with no path and skipped
+            ; it, silently, so an arrow or a bracket simply was not there. One
+            ; ring covering everything is what a single-contour path means
+            ; anyway, so say it here rather than expecting each caller to.
+            if ((array_length c.pts) > 0) {
+                out = out + ",\"pts\":["
+                def pi:int 0
+                while (pi < (array_length c.pts)) {
+                    if (pi > 0) {
+                        out = out + ","
+                    }
+                    out = out + (EVGDisplayList.num((itemAt c.pts pi)))
+                    pi = (pi + 1)
+                }
+                out = out + "],\"ends\":["
+                if ((array_length c.ringEnds) == 0) {
+                    out = out + (to_string (array_length c.pts))
+                } {
+                    def ei:int 0
+                    while (ei < (array_length c.ringEnds)) {
+                        if (ei > 0) {
+                            out = out + ","
+                        }
+                        out = out + (to_string (itemAt c.ringEnds ei))
+                        ei = (ei + 1)
+                    }
+                }
+                out = out + "]"
+                if c.evenOdd {
+                    out = out + ",\"eo\":1"
+                }
+            }
+            out = out + "}"
+            i = (i + 1)
+        }
+        ; The build's number and the layers' shifts, AFTER the commands: a
+        ; reader that wants only the commands takes the document from its
+        ; first byte, and one did.
+        out = (out + "],\"seq\":" + (to_string buildSeq) + ",\"shifts\":[")
+        def si:int 0
+        while (si < (array_length layerEls)) {
+            if (si > 0) {
+                out = (out + ",")
+            }
+            out = (out + "[" + (EVGDisplayList.num((itemAt layerShiftX si))) + "," + (EVGDisplayList.num((itemAt layerShiftY si))) + "]")
+            si = (si + 1)
+        }
+        out = (out + "]}")
+        return out
+    }
+
+    ; Two decimals is plenty for a pixel and keeps the payload small.
+    ; SIX decimals, for the handful of numbers where two is not enough: the
+    ; camera. Two is right for a coordinate — nothing is drawn to a hundredth
+    ; of a pixel and the payload halves — but a SCALE is multiplied into every
+    ; coordinate in the list. A zoom of 0.4053 written as "0.41" draws the whole
+    ; diagram 1.2% too large: the picture stops matching where the pointer
+    ; thinks it is, and it is invisible at zoom 1, which is where every check
+    ; was looking. Measured on the rangerflow board, as an 8-pixel slip at the
+    ; bottom of the canvas.
+    sfn fine:string (v:double) {
+        def limit:double 2000000000.0
+        def x:double 0.0
+        if (v > 0.0) {
+            x = v
+        }
+        if (v < 0.0) {
+            x = v
+        }
+        if (x > limit) {
+            x = limit
+        }
+        if (x < (0.0 - limit)) {
+            x = (0.0 - limit)
+        }
+        def neg:boolean (x < 0.0)
+        def av:double x
+        if neg {
+            av = (0.0 - x)
+        }
+        ; The whole and the fraction are scaled separately: a pan of 30,000
+        ; pixels times a million overflows the 32-bit integer the divide below
+        ; truncates to, and the number would come back wrapped rather than
+        ; merely rounded.
+        def whole:int (to_int av)
+        def rest:double (av - (to_double whole))
+        def frac:int (to_int ((rest * 1000000.0) + 0.5))
+        if (frac >= 1000000) {
+            whole = (whole + 1)
+            frac = 0
+        }
+        def fs:string (to_string frac)
+        while ((strlen fs) < 6) {
+            fs = ("0" + fs)
+        }
+        def out:string ((to_string whole) + "." + fs)
+        if neg {
+            if ((whole > 0) || (frac > 0)) {
+                out = ("-" + out)
+            }
+        }
+        return out
+    }
+
+    sfn num:string (v:double) {
+        ; WHATEVER COMES IN, A JSON NUMBER GOES OUT. This is the only writer of
+        ; every coordinate, size, radius and colour in the list, so a value it
+        ; cannot spell does not make one command wrong — it makes the whole
+        ; frame unparseable, and the page that was drawing it stops. Reported
+        ; as a ripple frozen mid-flight with `SyntaxError: Expected ',' or '}'
+        ; after property` beside it: the paint loop threw, and a loop that
+        ; throws does not ask for another frame.
+        ;
+        ; Two ways in. A value that is not a number came out as "0.NaN", since
+        ; the fraction was formatted from a NaN. And the integer divide below
+        ; TRUNCATES TO 32 BITS, so a magnitude past 2^31 wrapped: 1e10 came out
+        ; as "1410065408.858993459200", which parses and is simply wrong, and
+        ; past about 1e19 the leftover went exponential — "1.0000000001e+21"
+        ; as a FRACTION — which is where the JSON stops being JSON.
+        ;
+        ; So: NaN becomes zero, and the magnitude is pinned inside the range
+        ; the arithmetic below is exact over. Ten million pixels is four
+        ; thousand times the tallest page in this gallery, and it keeps the
+        ; scaled value under 2^31 with a factor of two to spare, so nothing a
+        ; real page draws is touched. Clamping does not make a wrong value
+        ; right — the frame will look wrong where the bad number was — but a
+        ; page that keeps drawing can be looked at, and one that has stopped
+        ; cannot.
+        def limit:double 10000000.0
+        ; A value is kept only if it compares as either side of zero. Zero
+        ; itself fails both and stays the zero it already is, which is why the
+        ; test can be this blunt — and a NaN fails both as well, because a NaN
+        ; fails EVERY comparison. That is the whole test, with no library
+        ; behind it, and it catches one thing more that an equality test does
+        ; not: a slot read past the end of an array, which on this target is
+        ; not a number at all and is equal to itself, so `v == v` waved it
+        ; through and the arithmetic below turned it back into a NaN.
+        def x:double 0.0
+        if (v > 0.0) {
+            x = v
+        }
+        if (v < 0.0) {
+            x = v
+        }
+        ; Infinities pass the comparison above and are pinned here with
+        ; everything else too big to spell.
+        if (x > limit) {
+            x = limit
+        }
+        if (x < (0.0 - limit)) {
+            x = (0.0 - limit)
+        }
+        ; Sign first, magnitude second. `to_int` FLOORS rather than truncating
+        ; here, so the old two-branch rounding turned -45 into "-46.99": the
+        ; scaled value floored to -4501 and then the integer divide floored
+        ; again. Every negative coordinate in every scene was off by one and a
+        ; bit — invisible until a rotation angle was written through it.
+        def neg:boolean (x < 0.0)
+        def av:double x
+        if neg {
+            av = (0.0 - x)
+        }
+        def scaled:int (to_int ((av * 100.0) + 0.5))
+        def whole:int (idiv scaled 100)
+        def frac:int (scaled - (whole * 100))
+        def fs:string (to_string frac)
+        if (frac < 10) {
+            fs = "0" + fs
+        }
+        def out:string ((to_string whole) + "." + fs)
+        if neg {
+            if (scaled > 0) {
+                out = ("-" + out)
+            }
+        }
+        return out
+    }
+
+
+    ; Four decimals, for a value that lives between 0 and 1. `num` writes
+    ; hundredths, which is right for a coordinate in pixels and far too
+    ; coarse for a fraction of a bitmap: a crop window rounded to 0.01 moves
+    ; by a full percent of the picture, sixteen pixels on a wide screenshot.
+    ; The binary bridge stores the same value as ten-thousandths, so the two
+    ; carry the same number to the same place.
+    sfn frac4:string (v:double) {
+        def x:double 0.0
+        if (v > 0.0) {
+            x = v
+        }
+        if (v < 0.0) {
+            x = v
+        }
+        if (x > 1000.0) {
+            x = 1000.0
+        }
+        if (x < (0.0 - 1000.0)) {
+            x = (0.0 - 1000.0)
+        }
+        def neg:boolean (x < 0.0)
+        def av:double x
+        if neg {
+            av = (0.0 - x)
+        }
+        def scaled:int (to_int ((av * 10000.0) + 0.5))
+        def whole:int (idiv scaled 10000)
+        def frac:int (scaled - (whole * 10000))
+        def fs:string (to_string frac)
+        while ((strlen fs) < 4) {
+            fs = ("0" + fs)
+        }
+        def out:string ((to_string whole) + "." + fs)
+        if neg {
+            if (scaled > 0) {
+                out = ("-" + out)
+            }
+        }
+        return out
+    }
+
+    sfn jsonString:string (v:string) {
+        def out:string "\""
+        def i:int 0
+        while (i < (strlen v)) {
+            def c:int (charAt v i)
+            if (c == 34) {
+                out = out + "\\\""
+            } {
+                if (c == 92) {
+                    out = out + "\\\\"
+                } {
+                    if (c < 32) {
+                        out = out + " "
+                    } {
+                        out = out + (strfromcode c)
+                    }
+                }
+            }
+            i = (i + 1)
+        }
+        return (out + "\"")
+    }
+
+    ; A backend-shaped summary: how many quads, how many text runs, how deep
+    ; the clip stack goes. Useful for sizing a vertex buffer up front.
+    ; Move every command by (dx, dy). A host builds a page's list in the page's
+    ; own coordinates and then places it in the window; doing that by walking
+    ; the list is what lets the page renderer stay ignorant of where on the
+    ; desk it landed. POP_CLIP carries no geometry, so it is left alone.
+    fn offsetBy:void (dx:double dy:double) {
+        def i:int 0
+        while (i < (array_length cmds)) {
+            def c:EVGDrawCmd (itemAt cmds i)
+            if (c.kind != 5) {
+                c.x = (c.x + dx)
+                c.y = (c.y + dy)
+                def pi:int 0
+                while (pi < (array_length c.pts)) {
+                    def even:boolean ((pi % 2) == 0)
+                    if even {
+                        set_at c.pts pi ((itemAt c.pts pi) + dx)
+                    } {
+                        set_at c.pts pi ((itemAt c.pts pi) + dy)
+                    }
+                    pi = (pi + 1)
+                }
+            }
+            i = (i + 1)
+        }
+    }
+
+    ; Scale every command by `s` about the origin. The other half of what a
+    ; host needs to PLACE a list built in its own coordinates: a drawing made
+    ; at one size and shown at another, a page laid out in one unit and drawn
+    ; in a second. Everything that is a length scales — the box, the points,
+    ; the stroke, the type size, a corner radius, a shadow's offset — and
+    ; nothing that is not: colours, text, a dash pattern's text (which is in
+    ; user units and rides on the stroke), and a clip's absence of geometry.
+    ;
+    ; A camera (`setView`) is the cheaper way to draw the WHOLE list at a
+    ; scale; this is for one list inside another, where a camera cannot say
+    ; "this part and not the rest".
+    fn scaleBy:void (s:double) {
+        if (s == 1.0) { return }
+        def i:int 0
+        while (i < (array_length cmds)) {
+            def c:EVGDrawCmd (itemAt cmds i)
+            if (c.kind != 5) {
+                c.x = (c.x * s)
+                c.y = (c.y * s)
+                c.w = (c.w * s)
+                c.h = (c.h * s)
+                c.radius = (c.radius * s)
+                c.radiusTR = (c.radiusTR * s)
+                c.radiusBR = (c.radiusBR * s)
+                c.radiusBL = (c.radiusBL * s)
+                c.thickness = (c.thickness * s)
+                c.fontSize = (c.fontSize * s)
+                c.letterSpacing = (c.letterSpacing * s)
+                c.maxWidth = (c.maxWidth * s)
+                c.shadowX = (c.shadowX * s)
+                c.shadowY = (c.shadowY * s)
+                c.shadowBlur = (c.shadowBlur * s)
+                c.strokeDashOffset = (c.strokeDashOffset * s)
+                c.rotOriginX = (c.rotOriginX * s)
+                c.rotOriginY = (c.rotOriginY * s)
+                def pi:int 0
+                while (pi < (array_length c.pts)) {
+                    set_at c.pts pi ((itemAt c.pts pi) * s)
+                    pi = (pi + 1)
+                }
+            }
+            i = (i + 1)
+        }
+    }
+
+    ; Append another list's commands to this one, in order. The commands are
+    ; shared rather than copied - the source list is finished with by the time
+    ; a caller does this, and copying a page of text would not be free.
+    fn appendFrom:void (src:EVGDisplayList) {
+        def i:int 0
+        while (i < (array_length src.cmds)) {
+            push cmds (itemAt src.cmds i)
+            i = (i + 1)
+        }
+    }
+
+    fn summary:string () {
+        def rects:int 0
+        def borders:int 0
+        def images:int 0
+        def texts:int 0
+        def clips:int 0
+        def i:int 0
+        while (i < (array_length cmds)) {
+            def c:EVGDrawCmd (itemAt cmds i)
+            if (c.kind == 0) {
+                rects = (rects + 1)
+            }
+            if (c.kind == 1) {
+                borders = (borders + 1)
+            }
+            if (c.kind == 2) {
+                images = (images + 1)
+            }
+            if (c.kind == 3) {
+                texts = (texts + 1)
+            }
+            if (c.kind == 4) {
+                clips = (clips + 1)
+            }
+            i = (i + 1)
+        }
+        def s:string ("rects=" + (to_string rects))
+        s = s + " borders=" + (to_string borders)
+        s = s + " images=" + (to_string images)
+        s = s + " text=" + (to_string texts)
+        s = s + " clips=" + (to_string clips)
+        return s
+    }
+}