@jossuealcala/madre 1.0.1 → 1.0.3

package/public/macroverso.js

@@ -1,3 +1,5 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// MADRE · © 2026 Jossue Alcalá · GNU AGPL v3 with additional terms (Section 7): ADDITIONAL-TERMS.md
 // THE MACROVERSE: every room on this Mac as a NOSTROMO in open space (docs/MACROVERSO.md, phase 3a).
 // It is entered from SALAS and only on a large screen; on a phone SALAS is the list and nothing more.
 //
@@ -22,7 +24,8 @@
 // for less motion gets one still frame redrawn when something changes. No line joins two universes
 // until a link exists (phase 3c).
 
-import { COLLAPSED, FOCUS_VEIL, MEMORY_COLORS, PITCH_LIMIT, TURN_PER_PIXEL, alongCurve, collapsedChip, createNostromo, currentAlong, dwarfChip, hexAlpha, hexMix, magmaMap, texturesReady } from './nostromo-engine.js';
+import { COLLAPSED, FOCUS_VEIL, MEMORY_COLORS, NEURAL_AXON, NEURAL_CROSSFADE, NEURAL_IGNITION, PITCH_LIMIT, TURN_PER_PIXEL, alongCurve, collapsedChip, createNostromo, currentAlong, drawNeuralBulb, dwarfChip, hexAlpha, hexMix, magmaMap, neuralGround, neuronGlow, texturesReady } from './nostromo-engine.js';
+import { createStrain, inviteNeural, neuralKey, paintNeuralKey } from './neural.js';
 
 const KINDS = Object.keys(MEMORY_COLORS);
 const TILT = 0.42;                 // how flat the orbits read: the plane seen a little from above
@@ -327,7 +330,7 @@ function farMemories(data) {
 
 // One universe painted once: its scene placed, settled and drawn into a sprite by the engine. A
 // room that is asleep, sealed, outdated or unreachable is MOTHER alone: cold, or caged.
-function paintUniverse(one, dpr, shown = null) {
+function paintUniverse(one, dpr, shown = null, neural = false) {
   const side = Math.min(SPRITE_MAX, Math.round(Math.max(SIDE_MIN, shown ?? one.reach * 2) * dpr));
   const css = side / dpr;
   const canvas = canvasOf(side, side);
@@ -343,6 +346,8 @@ function paintUniverse(one, dpr, shown = null) {
   }
   scene.cam = { x: 0, y: 0, scale: (css / 2 - 4) / BODY_REACH, manual: true };
   if (data?.sealed) scene.cage = { at: 0, closed: true };
+  // Neural mode (public/neural.js): the universe drawn as a cluster of neurons round its bulb.
+  scene.neural = neural;
   engine.projectNostromo();
   engine.drawNostromo(0.7);
   if (!one.room.open) {
@@ -406,7 +411,7 @@ function paintStars(seed, count, biggest, dpr) {
   return { canvas, side };
 }
 
-export function openMacroverso({ host, rooms, here, enlaces = [], accent = '#9bff66', accentInk = '#0a1405', bishop = null, words, actions }) {
+export function openMacroverso({ host, rooms, here, enlaces = [], accent = '#9bff66', accentInk = '#0a1405', bishop = null, words, actions, neural: neuralStart = false }) {
   const reduced = reducedMotion();
   const layer = document.createElement('section');
   layer.className = 'mv';
@@ -452,12 +457,23 @@ export function openMacroverso({ host, rooms, here, enlaces = [], accent = '#9bf
   recenter.className = 'mother-close mv-recenter';
   recenter.textContent = words.recenter ?? 'RECENTER';
   recenter.hidden = true;
+  // Leaving: the room's close, a sunk track and the cross that turns (styles.css, .x-close), as
+  // every window closes; what it does is in its name.
+  const backTrack = document.createElement('span');
+  backTrack.className = 'surface-modes';
   const back = document.createElement('button');
   back.type = 'button';
-  back.className = 'mother-close mv-back';
-  back.append(words.back);
-  back.insertAdjacentHTML('beforeend', '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M5.5 5.5l9 9M14.5 5.5l-9 9" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>'); // trusted: our own SVG
-  keys.append(recenter, back);
+  back.className = 'surface-mode close x-close x-only mv-back';
+  back.setAttribute('aria-label', words.back);
+  back.title = words.back;
+  back.insertAdjacentHTML('beforeend', '<span class="x-icon"><svg viewBox="0 0 20 20" focusable="false" aria-hidden="true"><path d="M5.5 5.5l9 9M14.5 5.5l-9 9" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></span>'); // trusted: our own SVG
+  backTrack.append(back);
+  // Neural mode (public/neural.js): the same space drawn as neurons, chosen here or in a project.
+  const neuralButton = document.createElement('button');
+  neuralButton.type = 'button';
+  neuralButton.className = 'mother-close neural-key';
+  neuralKey(neuralButton);
+  keys.append(neuralButton, recenter, backTrack);
   head.append(title, sub, legend, keys);
   const card = document.createElement('aside');
   card.className = 'mv-card';
@@ -486,6 +502,9 @@ export function openMacroverso({ host, rooms, here, enlaces = [], accent = '#9bf
   let raf = 0;
   let last = performance.now();
   let clock = 0;
+  let neural = Boolean(neuralStart);   // drawn as neurons (setNeuralMode)
+  let neuralSince = null;               // when it came on, for the light running out from the centre
+  let fade = null;                      // the space as it was, fading over the new drawing
   let queued = false;
   let resizeTimer = 0;
   const drag = { active: false, moved: false, turning: false, link: null, x: 0, y: 0, x0: 0, y0: 0 };
@@ -495,6 +514,36 @@ export function openMacroverso({ host, rooms, here, enlaces = [], accent = '#9bf
   let orb = null;
   const gaze = { x: 0, y: 0, open: 0, at: 0, jumpAt: 0, jx: 0, jy: 0, blinkAt: -1, nextBlink: 3 + Math.random() * 4, twice: false };
   let pointer = null;
+  // Neural mode, switched from its key or because a project switched it: the space as it was fades
+  // over the new drawing, the light runs out from the centre, every universe is drawn again its new
+  // way (a sleeping one, painted once, is painted again), and the choice is kept (actions.neural).
+  paintNeuralKey(neuralButton, neural);
+  function setNeuralMode(on) {
+    if (neural === on) return;
+    if (!reduced && canvas.width && canvas.height) {
+      const held = document.createElement('canvas');
+      held.width = canvas.width;
+      held.height = canvas.height;
+      held.getContext('2d').drawImage(canvas, 0, 0);
+      fade = { canvas: held, at: clock };
+    }
+    neural = on;
+    neuralSince = on && !reduced ? clock : null;
+    paintNeuralKey(neuralButton, on);
+    layer.querySelector('.neural-invite')?.remove();
+    const now = performance.now() / 1000;
+    for (const one of universes) {
+      if (!one.sprite?.scene) continue;
+      if (one.room.open && !reducedMotion()) one.sprite.engine.setNeural(on, now);
+      else one.dirty = true;
+    }
+    live?.engine.setNeural(on, now);
+    actions.neural?.(on);
+    redraw();
+  }
+  neuralButton.addEventListener('click', () => setNeuralMode(!neural));
+  // When this machine does not give the space its frames, the key invites to try the mode.
+  const strain = createStrain({ onStrain: () => { if (!neural) inviteNeural({ key: neuralButton, host: layer, map: 'projects', onTry: () => setNeuralMode(true) }); } });
   const motes = Array.from({ length: ORB_MOTES }, (_, i) => { const rnd = random(hash(`mote${i}`)); return { phase: rnd() * Math.PI * 2, reach: 1.3 + rnd() * 0.65, speed: 0.12 + rnd() * 0.2, tilt: (rnd() - 0.5) * 0.5, size: 0.35 + rnd() * 0.6 }; });
 
   function layout(all) {
@@ -593,7 +642,7 @@ export function openMacroverso({ host, rooms, here, enlaces = [], accent = '#9bf
     const next = [focus, ...universes].find((one) => one && one.dirty);
     if (!next) return false;
     if (!next.data) { if (!next.loading?.data) void load(next); return false; }
-    next.sprite = paintUniverse(next, view.dpr, next.shown ?? null);
+    next.sprite = paintUniverse(next, view.dpr, next.shown ?? null, neural);
     next.dirty = false;
     return true;
   }
@@ -648,6 +697,7 @@ export function openMacroverso({ host, rooms, here, enlaces = [], accent = '#9bf
       }
       engine.placeNostromo();
       scene.words = words;
+      scene.neural = neural;
       if (data.sealed) scene.cage = { at: 0, closed: true };
       // The pointer reaches it through its own canvas, which is nowhere on the page: it answers
       // from the origin, and the pointer is moved into its frame before it is asked.
@@ -711,7 +761,9 @@ export function openMacroverso({ host, rooms, here, enlaces = [], accent = '#9bf
   }
 
   function frame(now) {
+    const started = performance.now();
     advance(now);
+    strain.frame(performance.now() - started, now);
     raf = reduced && !camera.to ? 0 : requestAnimationFrame(frame);
   }
   // One frame's worth of everything, without asking for the next: what frame() does, and what
@@ -764,10 +816,13 @@ export function openMacroverso({ host, rooms, here, enlaces = [], accent = '#9bf
     ctx.setTransform(view.dpr, 0, 0, view.dpr, 0, 0);
     ctx.globalCompositeOperation = 'source-over';
     ctx.globalAlpha = 1;
-    if (nebula) ctx.drawImage(nebula, 0, 0, view.w, view.h);
+    const beat = reduced ? 0.4 : 0.5 + 0.5 * Math.sin(clock * 5.46);
+    // Neural mode: no nebula and no stars, the dark the neurons stand on.
+    if (neural) neuralGround(ctx, view.w, view.h, beat);
+    else if (nebula) ctx.drawImage(nebula, 0, 0, view.w, view.h);
     // Stars: the near ones move with the camera, the far ones barely. The tiles repeat under any
     // movement, so the space has no edge.
-    stars.forEach((tile, depth) => {
+    if (!neural) stars.forEach((tile, depth) => {
       const speed = [0.04, 0.1, 0.22][depth] * camera.zoom;
       const ox = (((-camera.x * speed - clock * (reduced ? 0 : 1.5 * (depth + 1))) % tile.side) + tile.side) % tile.side;
       const oy = (((-camera.y * speed) % tile.side) + tile.side) % tile.side;
@@ -781,14 +836,13 @@ export function openMacroverso({ host, rooms, here, enlaces = [], accent = '#9bf
     const span = Math.min(view.w, view.h * 1.7);
     ctx.lineWidth = 1;
     for (const orbit of [INNER, OUTER]) {
-      ctx.strokeStyle = 'rgba(242, 241, 238, .11)';
+      ctx.strokeStyle = neural ? `rgba(${NEURAL_AXON}, .1)` : 'rgba(242, 241, 238, .11)';
       ctx.setLineDash(orbit === OUTER ? [3, 7] : []);
       ctx.beginPath();
       ctx.ellipse(centre.x, centre.y, span * orbit * camera.zoom, span * orbit * TILT * camera.zoom, 0, 0, Math.PI * 2);
       ctx.stroke();
     }
     ctx.setLineDash([]);
-    const beat = reduced ? 0.4 : 0.5 + 0.5 * Math.sin(clock * 5.46);
     drawVeins(ctx);
     drawCentre(ctx, beat);
 
@@ -805,6 +859,12 @@ export function openMacroverso({ host, rooms, here, enlaces = [], accent = '#9bf
     if (veil > 0.004) { ctx.fillStyle = `rgba(2, 1, 4, ${veil})`; ctx.fillRect(0, 0, view.w, view.h); }
     const top = order.find((entry) => entry.one === lifted);
     if (top) drawUniverse(ctx, top.one, top.at, beat);
+    // Changing the drawing: the space as it was fades over the new one.
+    if (fade) {
+      const k = (clock - fade.at) / NEURAL_CROSSFADE;
+      if (k >= 1 || k < 0) fade = null;
+      else { ctx.save(); ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.globalAlpha = 1 - k * (2 - k); ctx.drawImage(fade.canvas, 0, 0); ctx.restore(); }
+    }
   }
 
   // One universe on screen: MOTHER's warmth, the live scene or its own living canvas, its rings
@@ -828,7 +888,7 @@ export function openMacroverso({ host, rooms, here, enlaces = [], accent = '#9bf
     const away = at.light * at.light * (0.55 + 0.45 * Math.min(1, camera.zoom));
     const reach = r * (2.3 + 0.2 * beat);
     const halo = ctx.createRadialGradient(p.x, p.y, r * 0.6, p.x, p.y, reach);
-    halo.addColorStop(0, awake ? `rgba(226, 40, 22, ${(0.16 + 0.05 * beat) * away})` : `rgba(120, 150, 200, ${0.08 * away})`);
+    halo.addColorStop(0, neural ? (awake ? `rgba(${NEURAL_AXON}, ${(0.12 + 0.04 * beat) * away})` : `rgba(120, 150, 200, ${0.05 * away})`) : awake ? `rgba(226, 40, 22, ${(0.16 + 0.05 * beat) * away})` : `rgba(120, 150, 200, ${0.08 * away})`);
     halo.addColorStop(1, 'rgba(0, 0, 0, 0)');
     ctx.fillStyle = halo;
     ctx.beginPath(); ctx.arc(p.x, p.y, reach, 0, Math.PI * 2); ctx.fill();
@@ -842,8 +902,8 @@ export function openMacroverso({ host, rooms, here, enlaces = [], accent = '#9bf
     } else {
       // Not read yet: an ember where it will be.
       const ember = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, r);
-      ember.addColorStop(0, awake ? '#ff7a3a' : '#56637a');
-      ember.addColorStop(1, awake ? 'rgba(168, 23, 12, 0)' : 'rgba(27, 33, 48, 0)');
+      ember.addColorStop(0, neural ? (awake ? '#9fdcff' : '#56637a') : awake ? '#ff7a3a' : '#56637a');
+      ember.addColorStop(1, neural ? 'rgba(20, 60, 110, 0)' : awake ? 'rgba(168, 23, 12, 0)' : 'rgba(27, 33, 48, 0)');
       ctx.fillStyle = ember;
       ctx.beginPath(); ctx.arc(p.x, p.y, r, 0, Math.PI * 2); ctx.fill();
     }
@@ -897,85 +957,91 @@ export function openMacroverso({ host, rooms, here, enlaces = [], accent = '#9bf
     const centre = toScreen(0, 0);
     const p = { x: centre.x, y: centre.y + float * Math.max(0.6, camera.zoom) };
     const r = 30 * clamp(camera.zoom, 0.75, 1.8);
-    core.screen = { x: p.x, y: p.y, r: r * 1.3 };
-    // Where it looks: at the person (the pointer) first; at the universe being carried, or the
-    // chosen one, when the pointer is away; wandering slowly when nothing is there. A living eye
-    // never holds still: small jumps every second or so.
-    const seen = linking?.from ?? (focus && !focus.centre ? focus : null);
-    let target = pointer ?? seen?.screen ?? null;
-    if (!target && !reduced) target = { x: p.x + Math.cos(clock * 0.21) * 160, y: p.y + Math.sin(clock * 0.34) * 90 };
-    if (!reduced && clock > gaze.jumpAt) { gaze.jumpAt = clock + 0.6 + Math.random() * 1.2; gaze.jx = (Math.random() - 0.5) * 0.07; gaze.jy = (Math.random() - 0.5) * 0.05; }
-    const toward = target ? { x: target.x - p.x, y: target.y - p.y } : { x: 0, y: 0 };
-    const far = Math.hypot(toward.x, toward.y) + 180;
-    const step = reduced ? 1 : clamp((clock - gaze.at) * 6, 0, 1);
-    gaze.at = clock;
-    gaze.x += (clamp(toward.x / far + gaze.jx, -1, 1) - gaze.x) * step;
-    gaze.y += (clamp(toward.y / far + gaze.jy, -1, 1) - gaze.y) * step;
-    gaze.open += ((linking?.over === core ? 1 : hover === core ? 0.45 : 0) - gaze.open) * step;
-    // A blink now and then, sometimes two; the lids close fast and open a little slower.
-    if (!reduced && awake && clock > gaze.nextBlink) {
-      gaze.blinkAt = clock;
-      gaze.twice = !gaze.twice && Math.random() < 0.25;
-      gaze.nextBlink = clock + (gaze.twice ? 0.32 : 4 + Math.random() * 6);
-    }
-    const since = clock - gaze.blinkAt;
-    const lid = gaze.blinkAt < 0 || since > 0.26 ? 0 : since < 0.09 ? since / 0.09 : 1 - (since - 0.09) / 0.17;
-    if (clock - orb.paintedAt >= 1 / ORB_FPS || orb.paintedAt < 0 || lid > 0) {
-      orb.paint(reduced ? 0 : clock, { x: gaze.x, y: gaze.y, open: gaze.open, lid: clamp(lid, 0, 1) * 0.94, asleep: !awake });
-      orb.paintedAt = clock;
-    }
-    const life = awake ? 1 : 0.5;
-    // The atmosphere: violet into blue, breathing slowly.
-    ctx.globalCompositeOperation = 'lighter';
-    const air = ctx.createRadialGradient(p.x, p.y, r * 0.8, p.x, p.y, r * (2.7 + 0.12 * beat));
-    air.addColorStop(0, `rgba(122, 58, 238, ${0.3 * life})`);
-    air.addColorStop(0.45, `rgba(72, 112, 255, ${0.12 * life})`);
-    air.addColorStop(1, 'rgba(40, 20, 120, 0)');
-    ctx.fillStyle = air;
-    ctx.beginPath(); ctx.arc(p.x, p.y, r * (2.7 + 0.12 * beat), 0, Math.PI * 2); ctx.fill();
-    // The wisps, turning two ways at once, as gas does.
-    const span = r * orb.reach * 2;
-    for (const [speed, alpha] of [[0.05, 0.8], [-0.033, 0.5]]) {
-      ctx.save();
-      ctx.translate(p.x, p.y);
-      ctx.rotate(reduced ? 0 : clock * speed);
-      ctx.globalAlpha = alpha * life;
-      ctx.drawImage(orb.wisps, -span / 2, -span / 2, span, span);
-      ctx.restore();
-    }
-    // The motes behind it, then the sphere, then the motes in front.
-    const drawMotes = (front) => {
-      for (const mote of motes) {
-        const a = mote.phase + (reduced ? 0 : clock * mote.speed);
-        const ahead = Math.sin(a) > 0;
-        if (ahead !== front) continue;
-        const mx = p.x + Math.cos(a) * r * mote.reach;
-        const my = p.y + Math.sin(a) * r * mote.reach * 0.3 + mote.tilt * r * Math.cos(a);
-        const size = mote.size * (ahead ? 1 : 0.7) * clamp(camera.zoom, 0.7, 1.4);
-        const glow = ctx.createRadialGradient(mx, my, 0, mx, my, size * 3);
-        glow.addColorStop(0, `rgba(214, 206, 255, ${(ahead ? 0.6 : 0.25) * life})`);
-        glow.addColorStop(1, 'rgba(120, 140, 255, 0)');
-        ctx.fillStyle = glow;
-        ctx.beginPath(); ctx.arc(mx, my, size * 3, 0, Math.PI * 2); ctx.fill();
+    core.screen = { x: p.x, y: p.y, r: r * (neural ? 1.8 : 1.3) };
+    // Neural mode: the centre of the brain, its bulb, in the Coordinator's violet; no eye, no gas.
+    if (neural) {
+      const ignite = neuralSince === null ? 1 : clamp((clock - neuralSince) / NEURAL_IGNITION, 0, 1);
+      drawNeuralBulb(ctx, p.x, p.y, r * 1.6, clock, { beat, light: awake ? 1 : 0.6, ignite, tone: 'bishop', still: reduced });
+    } else {
+      // Where it looks: at the person (the pointer) first; at the universe being carried, or the
+      // chosen one, when the pointer is away; wandering slowly when nothing is there. A living eye
+      // never holds still: small jumps every second or so.
+      const seen = linking?.from ?? (focus && !focus.centre ? focus : null);
+      let target = pointer ?? seen?.screen ?? null;
+      if (!target && !reduced) target = { x: p.x + Math.cos(clock * 0.21) * 160, y: p.y + Math.sin(clock * 0.34) * 90 };
+      if (!reduced && clock > gaze.jumpAt) { gaze.jumpAt = clock + 0.6 + Math.random() * 1.2; gaze.jx = (Math.random() - 0.5) * 0.07; gaze.jy = (Math.random() - 0.5) * 0.05; }
+      const toward = target ? { x: target.x - p.x, y: target.y - p.y } : { x: 0, y: 0 };
+      const far = Math.hypot(toward.x, toward.y) + 180;
+      const step = reduced ? 1 : clamp((clock - gaze.at) * 6, 0, 1);
+      gaze.at = clock;
+      gaze.x += (clamp(toward.x / far + gaze.jx, -1, 1) - gaze.x) * step;
+      gaze.y += (clamp(toward.y / far + gaze.jy, -1, 1) - gaze.y) * step;
+      gaze.open += ((linking?.over === core ? 1 : hover === core ? 0.45 : 0) - gaze.open) * step;
+      // A blink now and then, sometimes two; the lids close fast and open a little slower.
+      if (!reduced && awake && clock > gaze.nextBlink) {
+        gaze.blinkAt = clock;
+        gaze.twice = !gaze.twice && Math.random() < 0.25;
+        gaze.nextBlink = clock + (gaze.twice ? 0.32 : 4 + Math.random() * 6);
       }
-    };
-    drawMotes(false);
-    ctx.globalCompositeOperation = 'source-over';
-    ctx.globalAlpha = awake ? 1 : 0.8;
-    ctx.drawImage(orb.canvas, p.x - r, p.y - r, r * 2, r * 2);
-    ctx.globalAlpha = 1;
-    // Its own thin atmosphere, brighter on the side the light comes from.
-    ctx.globalCompositeOperation = 'lighter';
-    const limb = ctx.createRadialGradient(p.x - r * 0.1, p.y - r * 0.12, r * 0.9, p.x, p.y, r * 1.14);
-    limb.addColorStop(0, 'rgba(120, 150, 255, 0)');
-    limb.addColorStop(0.55, `rgba(130, 160, 255, ${0.28 * life})`);
-    limb.addColorStop(1, 'rgba(90, 60, 220, 0)');
-    ctx.fillStyle = limb;
-    ctx.beginPath(); ctx.arc(p.x, p.y, r * 1.14, 0, Math.PI * 2); ctx.fill();
-    ctx.globalCompositeOperation = 'source-over';
-    ctx.globalCompositeOperation = 'lighter';
-    drawMotes(true);
-    ctx.globalCompositeOperation = 'source-over';
+      const since = clock - gaze.blinkAt;
+      const lid = gaze.blinkAt < 0 || since > 0.26 ? 0 : since < 0.09 ? since / 0.09 : 1 - (since - 0.09) / 0.17;
+      if (clock - orb.paintedAt >= 1 / ORB_FPS || orb.paintedAt < 0 || lid > 0) {
+        orb.paint(reduced ? 0 : clock, { x: gaze.x, y: gaze.y, open: gaze.open, lid: clamp(lid, 0, 1) * 0.94, asleep: !awake });
+        orb.paintedAt = clock;
+      }
+      const life = awake ? 1 : 0.5;
+      // The atmosphere: violet into blue, breathing slowly.
+      ctx.globalCompositeOperation = 'lighter';
+      const air = ctx.createRadialGradient(p.x, p.y, r * 0.8, p.x, p.y, r * (2.7 + 0.12 * beat));
+      air.addColorStop(0, `rgba(122, 58, 238, ${0.3 * life})`);
+      air.addColorStop(0.45, `rgba(72, 112, 255, ${0.12 * life})`);
+      air.addColorStop(1, 'rgba(40, 20, 120, 0)');
+      ctx.fillStyle = air;
+      ctx.beginPath(); ctx.arc(p.x, p.y, r * (2.7 + 0.12 * beat), 0, Math.PI * 2); ctx.fill();
+      // The wisps, turning two ways at once, as gas does.
+      const span = r * orb.reach * 2;
+      for (const [speed, alpha] of [[0.05, 0.8], [-0.033, 0.5]]) {
+        ctx.save();
+        ctx.translate(p.x, p.y);
+        ctx.rotate(reduced ? 0 : clock * speed);
+        ctx.globalAlpha = alpha * life;
+        ctx.drawImage(orb.wisps, -span / 2, -span / 2, span, span);
+        ctx.restore();
+      }
+      // The motes behind it, then the sphere, then the motes in front.
+      const drawMotes = (front) => {
+        for (const mote of motes) {
+          const a = mote.phase + (reduced ? 0 : clock * mote.speed);
+          const ahead = Math.sin(a) > 0;
+          if (ahead !== front) continue;
+          const mx = p.x + Math.cos(a) * r * mote.reach;
+          const my = p.y + Math.sin(a) * r * mote.reach * 0.3 + mote.tilt * r * Math.cos(a);
+          const size = mote.size * (ahead ? 1 : 0.7) * clamp(camera.zoom, 0.7, 1.4);
+          const glow = ctx.createRadialGradient(mx, my, 0, mx, my, size * 3);
+          glow.addColorStop(0, `rgba(214, 206, 255, ${(ahead ? 0.6 : 0.25) * life})`);
+          glow.addColorStop(1, 'rgba(120, 140, 255, 0)');
+          ctx.fillStyle = glow;
+          ctx.beginPath(); ctx.arc(mx, my, size * 3, 0, Math.PI * 2); ctx.fill();
+        }
+      };
+      drawMotes(false);
+      ctx.globalCompositeOperation = 'source-over';
+      ctx.globalAlpha = awake ? 1 : 0.8;
+      ctx.drawImage(orb.canvas, p.x - r, p.y - r, r * 2, r * 2);
+      ctx.globalAlpha = 1;
+      // Its own thin atmosphere, brighter on the side the light comes from.
+      ctx.globalCompositeOperation = 'lighter';
+      const limb = ctx.createRadialGradient(p.x - r * 0.1, p.y - r * 0.12, r * 0.9, p.x, p.y, r * 1.14);
+      limb.addColorStop(0, 'rgba(120, 150, 255, 0)');
+      limb.addColorStop(0.55, `rgba(130, 160, 255, ${0.28 * life})`);
+      limb.addColorStop(1, 'rgba(90, 60, 220, 0)');
+      ctx.fillStyle = limb;
+      ctx.beginPath(); ctx.arc(p.x, p.y, r * 1.14, 0, Math.PI * 2); ctx.fill();
+      ctx.globalCompositeOperation = 'source-over';
+      ctx.globalCompositeOperation = 'lighter';
+      drawMotes(true);
+      ctx.globalCompositeOperation = 'source-over';
+    }
     // A ring in the accent while a universe is carried onto it, and while it waits for the person;
     // a white one while it is pointed at or chosen.
     const target2 = linking?.over === core;
@@ -983,14 +1049,15 @@ export function openMacroverso({ host, rooms, here, enlaces = [], accent = '#9bf
       ctx.strokeStyle = accent;
       ctx.globalAlpha = target2 ? 0.95 : reduced ? 0.6 : 0.45 + 0.35 * Math.sin(clock * 2.4);
       ctx.lineWidth = 2;
-      ctx.beginPath(); ctx.arc(p.x, p.y, r * 1.5, 0, Math.PI * 2); ctx.stroke();
+      ctx.beginPath(); ctx.arc(p.x, p.y, r * (neural ? 2.2 : 1.5), 0, Math.PI * 2); ctx.stroke();
       ctx.globalAlpha = 1;
     } else if (core === hover || core === focus) {
       ctx.strokeStyle = core === focus ? 'rgba(255, 255, 255, .85)' : 'rgba(255, 255, 255, .4)';
       ctx.lineWidth = core === focus ? 1.4 : 1;
-      ctx.beginPath(); ctx.arc(p.x, p.y, r * 1.5, 0, Math.PI * 2); ctx.stroke();
+      ctx.beginPath(); ctx.arc(p.x, p.y, r * (neural ? 2.2 : 1.5), 0, Math.PI * 2); ctx.stroke();
     }
-    const below = p.y + r * 1.62 + 8;
+    // The bulb's stem reaches lower than the orb did: its name stands under the stem.
+    const below = p.y + r * (neural ? 3.25 : 1.62) + 8;
     ctx.textAlign = 'center';
     ctx.textBaseline = 'top';
     ctx.lineJoin = 'round';
@@ -1031,6 +1098,32 @@ export function openMacroverso({ host, rooms, here, enlaces = [], accent = '#9bf
       const from = back ? pb : pa, to = back ? pa : pb;
       // MOTHER's red leaves the room that serves and the accent arrives where it is read; both
       // ways, red at both ends with the accent between them.
+      // Neural mode: an axon between two clusters, in one cold line, and what crosses it a light
+      // with the stretch it has just run lit behind it.
+      if (neural) {
+        ctx.globalCompositeOperation = 'lighter';
+        ctx.strokeStyle = `rgba(${NEURAL_AXON}, ${0.18 + 0.22 * lately})`;
+        ctx.lineWidth = 0.9 + 0.6 * lately;
+        ctx.beginPath(); ctx.moveTo(pa.x, pa.y); ctx.quadraticCurveTo(cx, cy, pb.x, pb.y); ctx.stroke();
+        vein.pulses = vein.pulses.filter((pulse) => clock - pulse.born < VEIN_LIFE);
+        for (const pulse of vein.pulses) {
+          const u = Math.min(1, (clock - pulse.born) / VEIN_LIFE);
+          const along = (k) => alongCurve(pa.x, pa.y, cx, cy, pb.x, pb.y, pulse.back ? 1 - k : k);
+          let behind = along(u);
+          const head = behind;
+          for (let step = 1; step <= 6; step += 1) {
+            const back = along(Math.max(0, u - step * 0.03));
+            ctx.strokeStyle = hexAlpha(accent, 0.5 - step * 0.07);
+            ctx.lineWidth = 2 - step * 0.22;
+            ctx.beginPath(); ctx.moveTo(behind.x, behind.y); ctx.lineTo(back.x, back.y); ctx.stroke();
+            behind = back;
+          }
+          const size = (6 + 4 * Math.sin(u * Math.PI)) * Math.max(0.7, Math.min(1.4, camera.zoom));
+          ctx.drawImage(neuronGlow(accent), head.x - size, head.y - size, size * 2, size * 2);
+        }
+        ctx.globalCompositeOperation = 'source-over';
+        continue;
+      }
       const red = '#e22816';
       const arriving = enlace.direction === 'both' ? red : accent;
       const head = reduced ? 0.5 : ((clock * (0.06 + 0.2 * recent) + vein.seed) % 1 + 1) % 1;

package/public/market-art.js

@@ -0,0 +1,161 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// MADRE · © 2026 Jossue Alcalá · GNU AGPL v3 with additional terms (Section 7): ADDITIONAL-TERMS.md
+// The Market's pictures (2026-10-18): drawn here, in code, not photographed. One scene for each
+// module the carousel features — what it does, shown the way a person would see it happen — and a
+// poster made from the icon for every other module. No words inside the drawings, so they read the
+// same in both languages; each sits on its module's own colors (market.js, `hue`), whatever the
+// room's light. Every id inside a drawing is made unique, because two of them can share a page.
+
+import { cleanSvg, moduleFace, remoteEntry } from './market.js';
+
+let drawn = 0;
+const svg = (body, { width = 560, height = 400 } = {}) => `<svg viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">${body}</svg>`;
+// A soft shadow under a card, and a card itself: the glass every scene is built from.
+const shadow = (id) => `<filter id="${id}" x="-20%" y="-20%" width="140%" height="150%"><feDropShadow dx="0" dy="10" stdDeviation="12" flood-color="#000" flood-opacity=".22"/></filter>`;
+const bar = (x, y, w, h, fill, opacity = 1) => `<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="${h / 2}" fill="${fill}" fill-opacity="${opacity}"/>`;
+
+// TEST BROWSER: a page open in a browser, the pointer pressing its button, the screenshot that
+// comes back, and the console the agent reads.
+function browserScene() {
+  const id = `mka${++drawn}`;
+  return svg(`<defs>${shadow(`${id}s`)}<linearGradient id="${id}h" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#bfdbfe"/><stop offset="1" stop-color="#60a5fa"/></linearGradient></defs>
+  <g filter="url(#${id}s)">
+    <rect x="60" y="44" width="440" height="296" rx="18" fill="#ffffff"/>
+    <path d="M78 44h404a18 18 0 0 1 18 18v22H60V62a18 18 0 0 1 18-18z" fill="#eef2f7"/>
+    <circle cx="84" cy="64" r="5.5" fill="#ff5f57"/><circle cx="101" cy="64" r="5.5" fill="#febc2e"/><circle cx="118" cy="64" r="5.5" fill="#28c840"/>
+    <rect x="150" y="54" width="260" height="20" rx="10" fill="#ffffff" stroke="#dbe3ee"/>
+    ${bar(166, 61, 120, 6, '#94a3b8', .7)}
+    ${bar(88, 108, 200, 16, '#1d4ed8', .92)}
+    ${bar(88, 134, 160, 9, '#94a3b8', .55)}${bar(88, 150, 186, 9, '#94a3b8', .4)}
+    <rect x="88" y="174" width="96" height="30" rx="15" fill="#1d4ed8"/>${bar(108, 186, 56, 6, '#ffffff', .9)}
+    <rect x="316" y="104" width="156" height="104" rx="14" fill="url(#${id}h)"/>
+    <circle cx="352" cy="136" r="12" fill="#ffffff" fill-opacity=".8"/><path d="M316 192l40-36 30 26 22-18 64 48v6a14 14 0 0 1-14 14H330a14 14 0 0 1-14-14z" fill="#1d4ed8" fill-opacity=".45"/>
+    <rect x="88" y="228" width="118" height="84" rx="14" fill="#f1f5f9"/><rect x="221" y="228" width="118" height="84" rx="14" fill="#f1f5f9"/><rect x="354" y="228" width="118" height="84" rx="14" fill="#f1f5f9"/>
+    ${bar(102, 244, 44, 8, '#1d4ed8', .55)}${bar(102, 262, 84, 6, '#94a3b8', .5)}${bar(102, 276, 66, 6, '#94a3b8', .4)}
+    ${bar(235, 244, 44, 8, '#1d4ed8', .55)}${bar(235, 262, 84, 6, '#94a3b8', .5)}${bar(235, 276, 66, 6, '#94a3b8', .4)}
+    ${bar(368, 244, 44, 8, '#1d4ed8', .55)}${bar(368, 262, 84, 6, '#94a3b8', .5)}${bar(368, 276, 66, 6, '#94a3b8', .4)}
+  </g>
+  <circle cx="160" cy="196" r="20" fill="#ffffff" fill-opacity=".35"/><circle cx="160" cy="196" r="11" fill="#ffffff" fill-opacity=".55"/>
+  <path d="M158 192l26 10-11 4-4 11z" fill="#0f172a" stroke="#ffffff" stroke-width="2.5" stroke-linejoin="round"/>
+  <g filter="url(#${id}s)" transform="rotate(-7 455 300)">
+    <rect x="380" y="250" width="150" height="104" rx="12" fill="#ffffff"/>
+    <rect x="390" y="260" width="130" height="70" rx="7" fill="#e0e7ff"/>${bar(398, 268, 60, 7, '#1d4ed8', .8)}${bar(398, 282, 44, 5, '#94a3b8', .6)}<rect x="398" y="294" width="32" height="12" rx="6" fill="#1d4ed8"/>
+    <rect x="466" y="268" width="46" height="34" rx="6" fill="url(#${id}h)"/>
+    ${bar(390, 338, 70, 6, '#94a3b8', .5)}
+  </g>
+  <circle cx="523" cy="252" r="16" fill="#22c55e" stroke="#ffffff" stroke-width="3"/><path d="M516 252l5 5 9-10" fill="none" stroke="#ffffff" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <g filter="url(#${id}s)">
+    <rect x="24" y="292" width="178" height="78" rx="14" fill="#0f172a" fill-opacity=".94"/>
+    ${bar(40, 310, 12, 6, '#4ade80')}${bar(58, 310, 96, 6, '#e2e8f0', .7)}
+    ${bar(40, 326, 12, 6, '#4ade80')}${bar(58, 326, 120, 6, '#e2e8f0', .5)}
+    ${bar(40, 342, 12, 6, '#60a5fa')}${bar(58, 342, 70, 6, '#e2e8f0', .35)}
+  </g>`);
+}
+
+// CONTINUITY: one agent hands the work to another, and the project's state stays in .ahp/, beside
+// the code, with what was checked.
+function handoffScene() {
+  const id = `mka${++drawn}`;
+  const row = (y, done = true) => `<circle cx="210" cy="${y}" r="11" fill="${done ? '#10b981' : '#e2e8f0'}"/>${done ? `<path d="M205 ${y}l4 4 7-8" fill="none" stroke="#ffffff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>` : ''}${bar(232, y - 9, 118, 8, '#0f172a', .7)}${bar(232, y + 3, 82, 6, '#94a3b8', .5)}`;
+  return svg(`<defs>${shadow(`${id}s`)}
+    <linearGradient id="${id}a" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fbbf24"/><stop offset="1" stop-color="#ea580c"/></linearGradient>
+    <linearGradient id="${id}b" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#818cf8"/><stop offset="1" stop-color="#7c3aed"/></linearGradient></defs>
+  <path d="M120 150C150 80 200 70 236 82" fill="none" stroke="#ffffff" stroke-opacity=".8" stroke-width="3" stroke-dasharray="2 10" stroke-linecap="round"/>
+  <path d="M376 300c40 30 70 22 92-6" fill="none" stroke="#ffffff" stroke-opacity=".8" stroke-width="3" stroke-dasharray="2 10" stroke-linecap="round"/>
+  <g filter="url(#${id}s)">
+    <path d="M176 84h66l14 16h112a20 20 0 0 1 20 20v188a20 20 0 0 1-20 20H176a20 20 0 0 1-20-20V104a20 20 0 0 1 20-20z" fill="#ffffff"/>
+    <rect x="182" y="118" width="70" height="22" rx="11" fill="#ecfdf5"/>
+    <text x="217" y="133.5" text-anchor="middle" font-family="ui-monospace, Menlo, monospace" font-size="12.5" font-weight="700" fill="#047857">.ahp/</text>
+    ${row(170)}${row(214)}${row(258)}${row(302, false)}
+  </g>
+  <g filter="url(#${id}s)"><circle cx="96" cy="182" r="40" fill="url(#${id}a)"/></g>
+  <path d="M96 164l5 12.5 13 5.5-13 5.5-5 12.5-5-12.5-13-5.5 13-5.5z" fill="#ffffff"/>
+  <g filter="url(#${id}s)"><circle cx="474" cy="262" r="40" fill="url(#${id}b)"/></g>
+  <path d="M458 262l10 10 20-22" fill="none" stroke="#ffffff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+  <g filter="url(#${id}s)" transform="rotate(-18 432 112)"><rect x="404" y="98" width="62" height="26" rx="13" fill="#ffffff"/>${bar(418, 108, 34, 6, '#10b981', .9)}</g>
+  <circle cx="470" cy="70" r="5" fill="#ffffff" fill-opacity=".7"/><circle cx="74" cy="300" r="4" fill="#ffffff" fill-opacity=".6"/><circle cx="520" cy="170" r="3" fill="#ffffff" fill-opacity=".6"/>`);
+}
+
+// IMAGES: what was asked, in a line, and what came back: the picture, with its other takes beside it.
+function imagesScene() {
+  const id = `mka${++drawn}`;
+  const take = (y, stops, chosen = false) => `<g filter="url(#${id}s)"><rect x="384" y="${y}" width="128" height="68" rx="12" fill="url(#${id}${stops})"/>${chosen ? `<rect x="381" y="${y - 3}" width="134" height="74" rx="14" fill="none" stroke="#ffffff" stroke-width="3"/>` : ''}<path d="M384 ${y + 52}l30-20 22 16 18-12 58 22v2a12 12 0 0 1-12 12H396a12 12 0 0 1-12-12z" fill="#000" fill-opacity=".22"/></g>`;
+  return svg(`<defs>${shadow(`${id}s`)}
+    <linearGradient id="${id}sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#fde68a"/><stop offset=".5" stop-color="#fb7185"/><stop offset="1" stop-color="#7c3aed"/></linearGradient>
+    <linearGradient id="${id}t1" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#a7f3d0"/><stop offset="1" stop-color="#0ea5e9"/></linearGradient>
+    <linearGradient id="${id}t2" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fef3c7"/><stop offset="1" stop-color="#f97316"/></linearGradient>
+    <linearGradient id="${id}t3" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fbcfe8"/><stop offset="1" stop-color="#9333ea"/></linearGradient>
+    <linearGradient id="${id}go" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#fb7185"/><stop offset="1" stop-color="#c026d3"/></linearGradient>
+    <clipPath id="${id}c"><rect x="56" y="116" width="304" height="232" rx="18"/></clipPath></defs>
+  <g filter="url(#${id}s)">
+    <rect x="56" y="36" width="456" height="54" rx="27" fill="#ffffff"/>
+    <circle cx="84" cy="63" r="14" fill="#fdf2f8"/><path d="M84 54l2.6 6.4 6.4 2.6-6.4 2.6-2.6 6.4-2.6-6.4-6.4-2.6 6.4-2.6z" fill="#db2777"/>
+    ${bar(108, 54, 170, 8, '#0f172a', .65)}${bar(108, 68, 120, 6, '#94a3b8', .55)}
+    <rect x="404" y="45" width="96" height="36" rx="18" fill="url(#${id}go)"/>${bar(426, 60, 52, 6, '#ffffff', .9)}
+  </g>
+  <g filter="url(#${id}s)">
+    <rect x="56" y="116" width="304" height="232" rx="18" fill="url(#${id}sky)"/>
+    <g clip-path="url(#${id}c)">
+      <circle cx="244" cy="206" r="40" fill="#fff7ed" fill-opacity=".92"/>
+      <path d="M56 300l70-70 50 44 46-40 70 56 68-46v104H56z" fill="#831843" fill-opacity=".72"/>
+      <path d="M56 330l92-52 64 34 58-28 90 46v18H56z" fill="#4c1d95" fill-opacity=".85"/>
+    </g>
+    <rect x="56" y="116" width="304" height="232" rx="18" fill="none" stroke="#ffffff" stroke-width="5"/>
+  </g>
+  ${take(116, 't1')}${take(198, 't2', true)}${take(280, 't3')}
+  <path d="M30 150l3 7.5 7.5 3-7.5 3-3 7.5-3-7.5-7.5-3 7.5-3z" fill="#ffffff" fill-opacity=".85"/>
+  <path d="M530 116l2.2 5.4 5.4 2.2-5.4 2.2-2.2 5.4-2.2-5.4-5.4-2.2 5.4-2.2z" fill="#ffffff" fill-opacity=".8"/>
+  <path d="M352 104l1.8 4.4 4.4 1.8-4.4 1.8-1.8 4.4-1.8-4.4-4.4-1.8 4.4-1.8z" fill="#ffffff" fill-opacity=".8"/>`);
+}
+
+// LOCAL AI: the computer itself thinking — a memory of linked notes on its screen — with no cloud
+// above it and a lock beside it: nothing leaves.
+function localScene() {
+  const id = `mka${++drawn}`;
+  const nodes = [[220, 132], [300, 112], [360, 160], [326, 214], [244, 206], [200, 172], [288, 166]];
+  const links = [[0, 1], [1, 2], [2, 3], [3, 4], [4, 5], [5, 0], [6, 0], [6, 1], [6, 2], [6, 3], [6, 4], [6, 5]];
+  const net = links.map(([a, b]) => `<line x1="${nodes[a][0]}" y1="${nodes[a][1]}" x2="${nodes[b][0]}" y2="${nodes[b][1]}" stroke="#86efac" stroke-opacity=".55" stroke-width="2"/>`).join('')
+    + nodes.map(([x, y], index) => (index === 6 ? `<circle cx="${x}" cy="${y}" r="22" fill="#4ade80" fill-opacity=".22"/><circle cx="${x}" cy="${y}" r="13" fill="#4ade80"/>` : `<circle cx="${x}" cy="${y}" r="7" fill="#bbf7d0"/>`)).join('');
+  return svg(`<defs>${shadow(`${id}s`)}<radialGradient id="${id}g" cx=".5" cy=".45" r=".6"><stop offset="0" stop-color="#14532d"/><stop offset="1" stop-color="#052e16"/></radialGradient></defs>
+  <g filter="url(#${id}s)">
+    <rect x="128" y="64" width="320" height="206" rx="16" fill="#ffffff"/>
+    <rect x="140" y="76" width="296" height="182" rx="9" fill="url(#${id}g)"/>
+    <path d="M96 278h384l-26 30H122z" fill="#ffffff"/><rect x="250" y="282" width="76" height="7" rx="3.5" fill="#cbd5e1"/>
+  </g>
+  ${net}
+  <g filter="url(#${id}s)">
+    <rect x="22" y="112" width="104" height="58" rx="12" fill="#ffffff"/>${bar(36, 128, 58, 7, '#15803d', .85)}${bar(36, 142, 76, 6, '#94a3b8', .55)}${bar(36, 154, 48, 6, '#94a3b8', .4)}
+    <rect x="452" y="186" width="104" height="58" rx="12" fill="#ffffff"/>${bar(466, 202, 58, 7, '#15803d', .85)}${bar(466, 216, 76, 6, '#94a3b8', .55)}${bar(466, 228, 48, 6, '#94a3b8', .4)}
+  </g>
+  <path d="M126 141c40 0 50-6 74 28" fill="none" stroke="#ffffff" stroke-opacity=".75" stroke-width="2.5" stroke-dasharray="2 8" stroke-linecap="round"/>
+  <path d="M452 215c-46 0-60 2-92-50" fill="none" stroke="#ffffff" stroke-opacity=".75" stroke-width="2.5" stroke-dasharray="2 8" stroke-linecap="round"/>
+  <g transform="translate(452 40)">
+    <path d="M22 50h52a20 20 0 0 0 2-40 28 28 0 0 0-52-6A22 22 0 0 0 22 50z" fill="#ffffff" fill-opacity=".9"/>
+    <path d="M14 8l70 52" stroke="#15803d" stroke-width="6" stroke-linecap="round"/>
+  </g>
+  <g filter="url(#${id}s)"><circle cx="80" cy="282" r="34" fill="#ffffff"/></g>
+  <rect x="66" y="280" width="28" height="22" rx="5" fill="#15803d"/><path d="M71 280v-6a9 9 0 0 1 18 0v6" fill="none" stroke="#15803d" stroke-width="4.5"/>
+  <circle cx="80" cy="290" r="3" fill="#ffffff"/>`);
+}
+
+const SCENES = { playwright: browserScene, ahp: handoffScene, 'image-studio': imagesScene, ollama: localScene };
+
+// Every other module: its icon, large, with the cards of what it touches floating round it.
+function poster(item) {
+  const id = `mka${++drawn}`;
+  const face = moduleFace(item);
+  return svg(`<defs>${shadow(`${id}s`)}<radialGradient id="${id}r" cx=".5" cy=".5" r=".5"><stop offset="0" stop-color="#ffffff" stop-opacity=".35"/><stop offset="1" stop-color="#ffffff" stop-opacity="0"/></radialGradient></defs>
+  <circle cx="280" cy="200" r="190" fill="url(#${id}r)"/>
+  <g filter="url(#${id}s)">
+    <rect x="58" y="74" width="138" height="72" rx="14" fill="#ffffff" fill-opacity=".92"/>${bar(74, 92, 70, 8, '#0f172a', .6)}${bar(74, 108, 100, 6, '#94a3b8', .55)}${bar(74, 122, 64, 6, '#94a3b8', .4)}
+    <rect x="370" y="258" width="138" height="72" rx="14" fill="#ffffff" fill-opacity=".92"/>${bar(386, 276, 70, 8, '#0f172a', .6)}${bar(386, 292, 100, 6, '#94a3b8', .55)}${bar(386, 306, 64, 6, '#94a3b8', .4)}
+    <rect x="200" y="120" width="160" height="160" rx="38" fill="#ffffff" fill-opacity=".2" stroke="#ffffff" stroke-opacity=".7" stroke-width="2"/>
+  </g>
+  <g transform="translate(220 140) scale(6)" color="#ffffff">${face.icon}</g>
+  <circle cx="420" cy="110" r="6" fill="#ffffff" fill-opacity=".7"/><circle cx="140" cy="300" r="5" fill="#ffffff" fill-opacity=".6"/>`);
+}
+
+// The picture of a module: its own scene when it has one — drawn here, or sent with the catalog
+// (kept to the shapes a drawing needs, market.js) — and its poster otherwise.
+export const marketArt = (item) => (SCENES[item?.id] ? SCENES[item.id]() : cleanSvg(remoteEntry(item?.id)?.art) ?? poster(item));
+export const hasScene = (item) => Boolean(SCENES[item?.id] || remoteEntry(item?.id)?.art);