Composable vs canvas: say which scenes are meant to sit on top of others

The top of the gallery is full of black frames with a bright element on them.
That is genuinely varied and thin to watch, and the reason it ranks is that the
gallery previews every scene ALONE — which is not how anyone watches one.

Measured, the split is not marginal: 37 of 66 scenes paint under 30% of the
frame, and the sparsest are exactly the ones topping the ranking. Storm Rift and
Pendulum Trace paint 0%, Droste Feedback and Spectrum Sculpture 2%. At the other
end Block Mosh covers 98% and Scan Tear 96%.

So a scene now declares a `surface`. A canvas fills the frame and belongs
underneath; two of them stacked is two pictures fighting rather than one picture
with depth. A composable scene is mostly empty by design and reads as elements
ON something. The distinction was implicit in `role: 'accent'`, which marked the
depth passes and said nothing about the sixty scenes treated as interchangeable
backgrounds while half of them were sparse.

Verified rather than trusted, in the pattern the rest of the project uses: a
gate renders every scene and measures what it actually paints, failing a
composable that covers more than 55% — it would hide whatever it sits on — and a
canvas that covers less than 8%, which is a canvas in name only. The gate also
prints the whole coverage table, since that list is how the library gets
labelled in the first place.

Casting uses it: only composable scenes are drawn as overlays, and because what
goes on top is now guaranteed to leave the shot underneath visible, layering
happens far more often — the overlay chance went from 0.12 to 0.3 at its base.

The gallery shows coverage and surface beside each score, sorts by sparsest, and
says in the header why the two numbers explain each other.

Nothing is labelled `composable` yet. Every scene keeps the behaviour it had
through `surfaceOf`, which defaults to canvas unless the scene is an accent, so
this commit changes the mechanism and not the output. The coverage table is what
the labelling should be read off.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

flow-state/gallery.html

@@ -55,6 +55,12 @@
     .row.flat .meter i { background: #ef4444; }
     .row.thin .meter i { background: #eab308; }
     .blocks { color: #5c6577; font-size: 11px; }
+    /* Coverage sits next to the score because the two explain each other: a
+       scene painting 2% of the frame scores well for variety and is thin to
+       watch alone. */
+    .surf { font-size: 11px; padding: 1px 6px; border-radius: 3px; }
+    .surf.canvas { background: #16232b; color: #7dd3fc; }
+    .surf.composable { background: #2a1f30; color: #d8b4fe; }
     .thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
     .thumbs figure { margin: 0; }
     .thumbs canvas { width: 100%; display: block; background: #05070a; border-radius: 2px; aspect-ratio: 16 / 9; }
@@ -76,7 +82,12 @@
         A scene whose six frames are interchangeable is one the song cannot change.
         Sorted least-varied first, scored on the same structural descriptor the
         variety harness uses, with colour excluded so six palettes cannot disguise
-        one image. <a href="/debug.html">← all debug tools</a>
+        one image.
+        <strong>Coverage</strong> is shown beside each score because the two explain
+        each other: the highest-scoring scenes are often a few bright elements on
+        black, which is varied and thin to watch on its own. Those are
+        <em>composable</em> — they are meant to sit on top of a <em>canvas</em>.
+        <a href="/debug.html">← all debug tools</a>
     </p>
 
     <div class="bar" id="bar">
@@ -86,6 +97,7 @@
             <option value="variety">sort: least varied first</option>
             <option value="name">sort: by name</option>
             <option value="family">sort: by family</option>
+        <option value="coverage">sort: sparsest first</option>
         </select>
         <span id="status">checking cache…</span>
         <div class="ctx" id="ctx"></div>
@@ -119,6 +131,7 @@ function draw() {
     const mode = sortSel.value;
     const sorted = rows.slice().sort((a, b) => (
         mode === 'name' ? a.name.localeCompare(b.name)
+        : mode === 'coverage' ? (a.coverage || 0) - (b.coverage || 0)
         : mode === 'family' ? (a.family.localeCompare(b.family) || a.variety - b.variety)
         : a.variety - b.variety));
 
@@ -142,6 +155,7 @@ function draw() {
             <div class="head">
                 <span class="name">${row.name}</span>
                 <span class="fam">${row.family}${row.role === 'accent' ? ' · accent' : ''}</span>
+                <span class="surf ${row.surface}" title="paints ${((row.coverage || 0) * 100).toFixed(0)}% of the frame">${row.surface || '?'} ${((row.coverage || 0) * 100).toFixed(0)}%</span>
                 <span class="score">
                     <span class="meter"><i style="width:${Math.min(100, row.variety * 500)}%"></i><b style="left:${MIN_VARIETY * 500}%" title="minimum ${MIN_VARIETY}"></b></span>
                     ${row.variety.toFixed(3)}
@@ -174,6 +188,7 @@ function summarise(built) {
     const broken = rows.filter((r) => r.error).length;
     return `${rows.length} scenes · ${flat} below the ${MIN_VARIETY} bar` +
         (broken ? ` · ${broken} BROKEN` : '') +
+        ` · ${rows.filter((r) => (r.coverage || 0) < 0.3).length} paint under 30% of the frame` +
         (built ? ` · built ${new Date(built).toLocaleString()}` : '');
 }
 
@@ -204,6 +219,7 @@ async function build(fingerprint) {
             rows.push({
                 name: row.module.name, family: row.module.family,
                 role: row.module.role || 'stage', variety: row.variety,
+                coverage: row.coverage, surface: row.surface,
                 byBlock: row.byBlock, error: row.error,
                 blobs: await Promise.all(row.thumbs.map(
                     (px) => pixelsToBlob(px, THUMB.width, THUMB.height))),