Projection mapping: warped zones for images and the live visual

New Mappatura tab + mapping.js engine: each zone is a quad warped with a
projective homography (square->quad closed form, inverted per fragment)
on a dedicated WebGL2 canvas above the visual, black outside. Sources:
the live visual (with a source sub-rect for multi-panel LED walls) or an
image file (corner-pin onto physical surfaces). Edit mode draws handles
ON THE OUTPUT: corners (or whole quads) are dragged while looking at the
real projection, edits flow back to the panel which persists them. Zone
list with name, source portion, opacity and delete; included in
recordings; re-sent when the output restarts.

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

src/style.css

@@ -39,6 +39,18 @@ body.hide-cursor { cursor: none; }
   display: block;
 }
 
+/* Projection-mapping layer: sits over the visual, black outside the zones */
+#map-canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: none;
+  pointer-events: none;
+}
+#map-canvas.show { display: block; }
+#map-canvas.edit { pointer-events: auto; cursor: crosshair; }
+
 /* ============ CONTROL WINDOW LAYOUT ============ */
 body.control {
   display: flex;
@@ -882,3 +894,29 @@ kbd {
   opacity: 0.7;
 }
 .glb-models .hint-mini { grid-column: 1 / -1; }
+
+/* Projection-mapping zone list */
+.map-zone {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  margin: 4px 0;
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 9px;
+  font-size: 11.5px;
+}
+.map-zone .mz-ico { flex: 0 0 auto; }
+.map-zone .mz-name { width: 90px; flex: 0 0 auto; }
+.map-zone .mz-src { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.75; }
+.map-zone .mz-rect { flex: 1; display: flex; align-items: center; gap: 2px; white-space: nowrap; opacity: 0.9; }
+.map-zone .mz-r { width: 44px; flex: 0 0 auto; }
+.map-zone .mz-op { flex: 0 0 70px; }
+.map-zone .mz-del {
+  flex: 0 0 auto;
+  width: auto;
+  background: transparent;
+  border: none;
+  color: #ff8a8a;
+  padding: 0 3px;
+}