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/src/look/LookGenerator.js

@@ -7,7 +7,7 @@
 import { Rng, hashSamples } from '../engine/rng.js';
 import { AudioPalette, generateUsablePalette } from './palette.js';
 import { scenes, scenesInFamily, FAMILIES } from '../scenes/registry.js';
-import { sampleValues, defaultValues } from '../params/schema.js';
+import { sampleValues, defaultValues, surfaceOf } from '../params/schema.js';
 import { planShots } from './shots.js';
 import {
     generatePersonality, sceneHonours, signatureWeight, describePersonality,
@@ -296,12 +296,22 @@ function buildStack(module, accentRoster, overlayRoster, bias, rng, temperament)
     // Roughly a third of stacks on busy material, rarely on quiet material, and
     // never on a background that is itself a full-frame glitch — two competing
     // corruption passes is noise, not depth.
+    // Layering is much more likely now that what goes on top is guaranteed to
+    // leave the shot underneath visible.
     const overlayChance = module.family === 'glitch'
-        ? 0.05
-        : 0.12 + bias.energy * 0.35 + (temperament ? Math.max(0, temperament.detail) * 0.2 : 0);
+        ? 0.1
+        : 0.3 + bias.energy * 0.4 + (temperament ? Math.max(0, temperament.detail) * 0.2 : 0);
 
-    const overlays = overlayRoster.filter((m) => m.family !== module.family && m.name !== module.name);
-    if (overlays.length && rng.bool(Math.min(0.6, overlayChance))) {
+    // Only COMPOSABLE scenes go on top. A second canvas over the first is two
+    // pictures fighting rather than one picture with depth, and it is what the
+    // library did for as long as every scene was treated as interchangeable.
+    //
+    // The other half of the trade: a composable scene alone is a few bright
+    // things on black, which scores well for variety and is thin to watch.
+    // Layering is what turns both halves into one image.
+    const overlays = overlayRoster.filter((m) => m.name !== module.name
+        && surfaceOf(m) === 'composable');
+    if (overlays.length && rng.bool(Math.min(0.8, overlayChance))) {
         const overlay = rng.pick(overlays);
         // Screen and add keep the background readable underneath; softlight and
         // overlay tint it instead. All four preserve the shot; 'normal' would