blockyard 0.0.9 → 0.1.0

package/public/js/blockscene3d.js

@@ -912,8 +912,20 @@ export const FX_NONE = Object.freeze({ glow: 0, outline: 0, lift: 0, color: null
 // just outside one side of the board and leaving past the other
 export function fxFront(fx) {
   const qs = [0, fx.gridW * fx.dx, fx.gridH * fx.dy, fx.gridW * fx.dx + fx.gridH * fx.dy];
-  const lo = Math.min(...qs) - 4, hi = Math.max(...qs) + 4;
-  return lo + fx.u * (hi - lo);
+  // THE MARGIN IS THE PANEL'S, NOT A CONSTANT (operator, 2026-09-15: "It needs to cleanly travel on
+  // and off screen"). Four units clears the BOARD, and the panel reaches much further than that --
+  // measured 21.8 units beyond a 96-wide board -- so a front that started four units out began its
+  // sweep in plain view and ended it there. render3d measures the real overhang from the viewRect
+  // and puts it on `fx.margin`; four is the fallback for a caller with no panel (tests).
+  const m = fx.margin ?? 4;
+  const lo = Math.min(...qs) - m, hi = Math.max(...qs) + m;
+  // A SEARCHLIGHT PANS (operator, 2026-09-15: "the scanner needs to be more like a search light,
+  // slowly panning back and forth"). A single linear pass is a scanner; sweeping out and back is a
+  // light being AIMED, which is what reads as something looking for things. `pan` is set for the
+  // top-down board only -- on the price chart the camera is low and one pass along the hours is
+  // the right motion.
+  const t = fx.pan ? 1 - Math.abs(((fx.u * 2) % 2) - 1) : fx.u;
+  return lo + t * (hi - lo);
 }
 
 // a deterministic 0..1 from an integer: where a firework bursts, which cube flares. Hashed, not
@@ -957,8 +969,26 @@ export function fxAt(t, fx) {
       return { glow: A * w, outline: 0.8 * A * w, lift: 0, color: [255, 255, 255] };
     }
     case 'scan': {
-      const w = g((along() - fxFront(fx)) / 1.6);
-      return { glow: 0.8 * A * w, outline: 0.5 * A * w, lift: 0, color: [120, 220, 255] };
+      // the beam's own width -- ten units, so a whole swath of blocks is lit as it passes
+      // (2026-09-15: "Reach more blocks with the scanner effect")
+      // THE LIGHT IS THE POINT (operator, 2026-09-15: "We really need to make it much more obvious
+      // somehow that the blocks are being illuminated"). The swath tracks the beam's own half-width
+      // (fx.beamR, set with the cone) so light and geometry cannot disagree, and it hits harder:
+      // a near-white glow, a bright outline and real lift, so a struck cube stands up out of the
+      // board rather than merely brightening.
+      const w = g((along() - fxFront(fx)) / (fx.beamR ?? 5.5));
+      return { glow: Math.min(1, 1.6 * A * w), outline: Math.min(1, 1.2 * A * w), lift: 1.4 * A * w, color: [225, 248, 255] };
+    }
+    case 'xray': {
+      // X-RAY (2026-09-15, operator: "Add xray as additional choosable effect"): a front sweeps the
+      // board and behind it every tile goes x-ray -- its body dims to glass and its edges and a
+      // raster across its faces light up (buildScene's xray treatment) -- then develops back to
+      // solid over a few units, the front itself a bright edge
+      const d = fxFront(fx) - along();                                // > 0 once the front has passed
+      const edge = g(d / 1.2);
+      const back = d > 0 && d < 9 ? (d < 5 ? 1 : 1 - (d - 5) / 4) : 0;
+      const xray = Math.max(edge, back) * A;
+      return xray > 0.02 ? { glow: 0.5 * A * edge, outline: A * Math.max(edge, 0.8 * back), lift: 0, color: [190, 240, 255], xray } : FX_NONE;
     }
     case 'ball': {
       // "illuminating everything it comes near": brightest right under the ball, gone ~5 units off
@@ -997,30 +1027,41 @@ export function fxAt(t, fx) {
       return { glow: hot * A * w, outline: 0.8 * hot * A * w, lift: (inward ? 0.4 : 3.2) * A * w,
         color: inward ? [150, 190, 255] : [255, 255, 245] };
     }
-    case 'firework': {
-      // three bursts, each at its own moment and place, each a ring that expands and dies
-      let glow = 0, outline = 0, lift = 0, col = [255, 200, 120];
-      for (let i = 0; i < 3; i++) {
-        const t0 = 0.05 + 0.26 * i, life = 0.45;
-        const v = (fx.u - t0) / life;
-        if (!(v > 0 && v < 1)) continue;
-        const bx = fxHash(fx.seed + i * 31 + 1) * fx.gridW, by = fxHash(fx.seed + i * 31 + 2) * fx.gridH;
-        const r = 9 * Math.pow(v, 0.55);
-        const w = g((Math.hypot(cx - bx, cy - by) - r) / 1.4) * (1 - v);
-        if (w > glow) {
-          glow = w; outline = 0.9 * w; lift = 1.8 * w;
-          col = [[255, 170, 110], [140, 220, 255], [220, 160, 255]][i];
-        }
-      }
-      return glow > 0.02 ? { glow: A * glow, outline: A * outline, lift: A * lift, color: col } : FX_NONE;
-    }
+    // 'firework' lights through fxNow's heads now (details3d fireworkShells): one head per live
+    // shell, in the shell's colour -- see the heads branch below
     case 'flare': {
       // one cube goes supernova and lights its neighbourhood -- the same hashed cube every replay
       const fxp = fxHash(fx.seed + 7) * fx.gridW, fyp = fxHash(fx.seed + 8) * fx.gridH;
       const bell = Math.sin(Math.PI * fx.u);
       const d = Math.hypot(cx - fxp, cy - fyp);
-      const w = g(d / (1.2 + 7 * bell)) * bell;
-      return w > 0.02 ? { glow: A * w, outline: 0.8 * A * w, lift: 1.4 * A * w, color: [255, 245, 205] } : FX_NONE;
+      // A SUPERNOVA'S LIGHT (2026-09-15, drawn in details3d drawSupernova): on a thin board -- the
+      // price board, eight deep -- the light reaches three times as far, so the chart is lit, and
+      // it cools with the remnant, gold to red to violet, after the white of the blast
+      const thin = fx.gridH <= 12;
+      const w = g(d / (1.2 + (thin ? 22 : 7) * bell)) * bell;
+      const cool = Math.max(0, Math.min(1, (fx.u - 0.2) / 0.8));
+      // white at the blast, then blue, then violet, as the cloud goes (details3d drawSupernova)
+      const col = cool < 0.3 ? [Math.round(255 - 105 * cool / 0.3), Math.round(255 - 60 * cool / 0.3), 255] : [Math.round(150 + 25 * (cool - 0.3) / 0.7), Math.round(195 - 85 * (cool - 0.3) / 0.7), 255];
+      // THE SHOCKWAVE THROWS WHAT IT CROSSES (operator, 2026-09-15: "Consider perturbing all the
+      // candles that are affected by the shockwave"): the ring drawn in drawSupernova (4.5 shell
+      // radii, out over u 0.14-0.6) runs through the tiles here too -- a tile it reaches is thrown
+      // up hard and lit white, and shakes itself out for a while after the front has passed
+      let lift = 1.4 * A * w, glow = A * w, outline = 0.8 * A * w, colour = col;
+      if (fx.u >= 0.14) {
+        const fr = Math.min(1, (fx.u - 0.14) / 0.46), ring = (thin ? 27 : 31) * (1 - Math.pow(1 - fr, 2.2));
+        const front = g((d - ring) / 1.8) * (1 - fr * 0.6);
+        const passed = ring - d;                              // > 0 once the front has gone by
+        // the shaking starts as the front APPROACHES, five units out, not once it has passed
+        // (operator: "trigger their shaking sooner in the blast radius")
+        const shake = passed > -5 && fx.u < 0.75 ? Math.max(0, Math.sin(fx.u * 70 + jitterOf(t.txid, 'sn' + fx.seed) * 6.28)) * Math.exp(-Math.max(0, passed) / 12) * (1 - (fx.u - 0.14) / 0.61) : 0;
+        if (front > 0.02 || shake > 0.02) {
+          lift = Math.max(lift, 0.5 * A * front + 0.12 * A * shake);   // a tenth of the first cut (operator: "affects the candles too much", "half as much still", "we really need to turn down the block shaking")
+          glow = Math.max(glow, A * front + 0.4 * A * shake);
+          outline = Math.max(outline, A * front);
+          if (front > w) colour = [255, 255, 255];
+        }
+      }
+      return glow > 0.02 || lift > 0.05 ? { glow: Math.min(1, glow), outline: Math.min(1, outline), lift, color: colour } : FX_NONE;
     }
     case 'wave': {
       // a swell rolling across the board: the cubes rise and fall with it, several crests at once
@@ -1125,6 +1166,9 @@ export function fxAt(t, fx) {
       const col = [Math.round(140 + 115 * ph), Math.round(90 + 140 * (1 - ph)), Math.round(190 + 60 * ph)];
       return { glow: 0.85 * A * w, outline: 0.2 * A * w, lift: 0, color: col };
     }
+    case 'pulse':        // the price line's surge lights the candles under its head (details3d fxNow)
+    case 'firework':     // each shell lights its surroundings in its colour (details3d fxNow)
+    case 'blackhole':    // the hole's head shrinks the candles it reaches toward nothing (scale) and lights the rest orange
     case 'lightcycle':
     case 'packets':
     case 'centipede':
@@ -1151,10 +1195,29 @@ export function fxAt(t, fx) {
           // the very fade that meant it was working. Measured: 0 cubes hidden over a whole run.
           // So the physical effect uses PROXIMITY alone and the visual effect keeps using w.
           const reach = g(Math.hypot(ddx, ddy) / Math.max(0.2, hd.r ?? 0.8));
+          // `release` (1 unless the head says otherwise): the head letting go of everything it
+          // holds, evenly -- the pull and the scale fade by it, so a tile under the head glides
+          // home over the head's whole release rather than when its reach finally passes it
+          const rel = hd.release ?? 1;
           best = {
             glow: 0.85 * w, outline: 0.8 * w, lift: (hd.lift ?? 0) * w, color: hd.color,
             hide: (hd.hide ?? 0) > 0 && reach > 0.45 ? 1 : 0,
-            scale: hd.scale == null ? 1 : 1 - (1 - hd.scale) * reach,
+            scale: hd.scale == null ? 1 : 1 - (1 - hd.scale) * reach * rel,
+            // `pull`: how hard the head drags this tile toward itself (the black hole; buildScene
+            // shears the faces toward the head's screen point by it)
+            pull: (hd.pull ?? 0) * reach * rel, pullAt: hd.pull ? { x: hd.x, y: hd.y, z: hd.z ?? 0 } : null,
+            // the pull at the head's full size (rPeak): the orbit is laid out against this, so it
+            // does not unwind as the head shrinks; the current pull only says how far along the
+            // line from home to that orbit the tile sits
+            pullPeak: (hd.pull ?? 0) * (hd.rPeak ? g(Math.hypot(ddx, ddy) / Math.max(0.2, hd.rPeak)) : reach),
+            // `lean`: how much the corners lean and stretch toward the head on top of the glide
+            // (1 on the price board; 0 on the block board, where the cubes are lifted out whole)
+            lean: hd.lean ?? 1,
+            // `shrink`: scale the footprint with the height, so the cube stays a cube as it goes
+            shrink: hd.shrink ? 1 : 0,
+            // `orbitR`: the head's reach in grid units -- buildScene lays the block board's orbits
+            // out at a fixed distance round the hole from it, rather than part-way home
+            orbitR: hd.r ?? 0,
           };
         }
       }
@@ -1220,6 +1283,12 @@ export function buildScene(tiles, o = {}) {
   const ground = [];
   const air = [];
   const shadows = [];
+  // IN THE AIR, PAINTED LAST (operator, 2026-09-15, of the black hole on the block board: "There
+  // are too many collision errors happening"): a cube pulled off the board toward the hole was
+  // still painted in the board's own order, so it cut through the neighbours it was passing over.
+  // Its faces are moved to the end of the frame instead, the least-pulled first, so the ones
+  // nearest the hole are on top of everything
+  const pulled = new Map();
   let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
   const note = (p) => {
     if (p.x < minX) minX = p.x;
@@ -1266,10 +1335,70 @@ export function buildScene(tiles, o = {}) {
     // A SHORTER CUBE, the same way: `tall` on a copy. A collapse or a dig is a height override,
     // never an edit to the tile the board was built from.
     const sc = fxv.scale == null ? 1 : fxv.scale;
-    const shaped = sc < 0.999 ? { ...t, tall: Math.max(0.04, cubeHeight(t) * sc) } : t;
+    let shaped = sc < 0.999 ? { ...t, tall: Math.max(0.04, cubeHeight(t) * sc) } : t;
+    // a WHOLE smaller cube, not a plate, where the head asks for it (the black hole over the block
+    // board): the footprint shrinks about its centre with the height
+    if (sc < 0.999 && fxv.shrink) { const s2 = Math.max(0.08, t.s * Math.max(0.08, sc)); shaped = { ...shaped, x: t.x + (t.s - s2) / 2, y: t.y + (t.s - s2) / 2, s: s2 }; }
     // NEON is a flat cube: no facets, no crown -- solid faces and the tubes on their edges
     const f = tileFaces(fxv.lift > 0.001 ? { ...shaped, fxz: fxv.lift } : shaped, o, t.s >= facetMin && o.neon !== true);
-    const a = t.alpha ?? 1;
+    // SPAGHETTIFIED (operator, 2026-09-15: "the candles need to stretch and bend toward the hole
+    // before they shrink"): a tile within a pulling head's reach has its faces sheared toward the
+    // head's point on screen -- the top corners dragged hard, the base corners a little -- so it
+    // leans and lengthens toward the hole before the scale takes it. Each corner object is moved
+    // once, however many faces share it.
+    if (fxv.pull > 0.001 && fxv.pullAt) {
+      pulled.set(String(t.txid), fxv.pull);
+      // ...AND ORBITS (operator, 2026-09-15: "The chart bars need to cleanly orbit the disc"): the
+      // tile is swept round the hole along the disk's flow as it is drawn in -- its centre swings
+      // about the hole by an angle that grows with the pull and the clock, on a radius that
+      // shrinks with the pull, flattened toward the disk's plane -- and its corners lean and
+      // stretch toward the hole on top of that
+      const hp = project(fxv.pullAt.x, fxv.pullAt.y, fxv.pullAt.z, o);
+      // EVERY CORNER THE CUBE HAS, the bevel's inner quad included -- it was left at home while
+      // the top and sides moved, so a bevelled cube on the block board drew as a slab stretched
+      // from its old place to its new one (operator, 2026-09-15: "too much bad shearing"); the
+      // crown's points are projected later through f.P, which is shifted the same way below
+      const pts = [...f.top, ...f.sides.flatMap((sd) => sd.points), ...(f.inset ?? [])];
+      const uniq = [...new Set(pts)];
+      const cx0 = uniq.reduce((a, p) => a + p.x, 0) / uniq.length, cy0 = uniq.reduce((a, p) => a + p.y, 0) / uniq.length;
+      // THE ORBIT IS LAID OUT AGAINST THE HOLE'S FULL SIZE, and the tile sits somewhere on the
+      // straight line between its home and that orbit by the CURRENT pull (operator, 2026-09-15:
+      // "Instead of the bars reversing into place, can they just reorient themselves into their
+      // original positions when the blackhole starts to disappear?"). While the hole grows the
+      // tile glides out to its orbit and turns with it; while it shrinks the pull falls and the
+      // tile glides straight home -- the orbit never unwinds.
+      // STEADILY (operator, 2026-09-15: "The bars don't cleanly leave or return ... They sorta get
+      // ripped off, and snapped back into place"): the capture and the release are eased with a
+      // smoothstep, and the orbit is KEPLERIAN -- its angular speed goes with the square of the
+      // pull, so a bar far out barely turns and one close in whips round -- where before every
+      // bar's target swept a wide circle at one speed and a bar just being caught was yanked after
+      // it. The angle's starting offset is small for the same reason.
+      const peak = Math.max(fxv.pullPeak ?? fxv.pull, 0.001), kl = Math.min(1, fxv.pull / peak), k0 = kl * kl * (3 - 2 * kl);
+      const dx = cx0 - hp.x, dy = cy0 - hp.y, r0 = Math.hypot(dx, dy) || 1, a0 = Math.atan2(dy, dx);
+      // HALF THE SPEED (operator, 2026-09-15: "The bars sping around much much too quickly. Try to
+      // calm it down by at least half to start" -- then "slow the spin ... by another half. Want it
+      // smoother and calmer"): 0.00035 a millisecond at full pull, a quarter of the 0.0014 it was
+      const swing = peak * peak * (o.now ?? 0) * 0.00035 + 0.5 * peak;   // clockwise on screen, Keplerian
+      // ROUND THE HOLE, on the block board (operator, 2026-09-15: "the blocks don't look right"):
+      // part-way home from a hole twenty units up left the cubes hanging in the middle distance;
+      // each is carried instead to its own ring round the hole, one and a half to three reaches
+      // out in screen pixels, and glides straight back from it as the pull falls
+      const ring = fxv.lean === 0 && fxv.orbitR > 0 && o.unit ? fxv.orbitR * o.unit * (1.5 + 1.5 * fxHash(Math.round(t.x * 31 + t.y * 7 + 3))) : null;
+      const r1 = ring != null ? r0 + (ring - r0) * peak : r0 * (1 - 0.55 * peak), a1 = a0 + swing;
+      const cx1 = hp.x + Math.cos(a1) * r1, cy1 = hp.y + Math.sin(a1) * r1 * (1 - 0.6 * peak);      // flattened toward the disk
+      const sx = (cx1 - cx0) * k0, sy = (cy1 - cy0) * k0;
+      const tops = new Set([...f.top, ...f.sides.flatMap((sd) => [sd.points[0], sd.points[1]])]);
+      for (const p of uniq) {
+        p.x += sx; p.y += sy;                                           // carried toward, and round, the orbit
+        const k = (tops.has(p) ? 0.55 : 0.2) * peak * k0 * (fxv.lean ?? 1);   // and leaning in (not on the block board: lean 0)
+        p.x += (hp.x - p.x) * k; p.y += (hp.y - p.y) * k;
+      }
+      const P0 = f.P, kc = 0.55 * peak * k0 * (fxv.lean ?? 1);
+      f.P = (x, y, z) => { const p = P0(x, y, z); const q = { x: p.x + sx, y: p.y + sy }; q.x += (hp.x - q.x) * kc; q.y += (hp.y - q.y) * kc; return q; };
+    }
+    // an x-rayed tile's body is glass: most of its alpha goes, and its edges come back below
+    const xray = fxv.xray ?? 0;
+    const a = (t.alpha ?? 1) * (1 - 0.72 * xray);
     const airborne = (t.z ?? 0) > 0.02;
     const out = airborne && !o.oblique ? air : ground;
     // A tile that just locked flashes brighter for a moment -- the Tetris
@@ -1582,6 +1711,23 @@ export function buildScene(tiles, o = {}) {
     // a tint at the top's weight (0.5) was there in the pixels and nowhere to the eye (measured:
     // the scan's peak moved a candle's face by a 0.26 cyan wash). At 0.85 it reads as struck.
     if (pulse > 0.03 && o.axes) for (const side of f.sides) out.push({ txid: t.txid, face: 'glow', points: side.points, fill: `rgba(${fxv.color.join(',')},${round3(0.85 * pulse * a)})` });
+    // THE X-RAY TREATMENT: bright edges round every face, and a raster of thin lines across the top
+    // and the sides, so the tile reads as a wireframe scan of itself
+    if (xray > 0.02) {
+      const xc = `rgba(200,245,255,${round3(0.95 * xray)})`;
+      out.push({ txid: t.txid, face: 'outline', points: f.top, fill: 'rgba(0,0,0,0)', stroke: xc, lw: 1.2, always: true });
+      for (const side of f.sides) out.push({ txid: t.txid, face: 'outline', points: side.points, fill: 'rgba(0,0,0,0)', stroke: xc, lw: 1.2, always: true });
+      const raster = (poly) => {
+        const [p0, p1, p2, p3] = poly;                                 // p0->p1 and p3->p2 are the edges the lines run between
+        for (let i = 1; i <= 3; i++) {
+          const u = i / 4;
+          const a0 = { x: p0.x + (p3.x - p0.x) * u, y: p0.y + (p3.y - p0.y) * u }, b0 = { x: p1.x + (p2.x - p1.x) * u, y: p1.y + (p2.y - p1.y) * u };
+          out.push({ txid: t.txid, face: 'outline', points: [a0, b0], fill: 'rgba(0,0,0,0)', stroke: `rgba(160,230,255,${round3(0.45 * xray)})`, lw: 0.8, always: true });
+        }
+      };
+      raster(f.top);
+      for (const side of f.sides) raster(side.points);
+    }
     if (fxv.outline > 0.03) {
       const col = fxv.color.join(',');
       out.push({ txid: t.txid, face: 'outline', points: f.top, fill: 'rgba(0,0,0,0)', stroke: `rgba(${col},${round3(0.95 * fxv.outline * a)})`, lw: 1 + 4 * fxv.outline });
@@ -1630,7 +1776,13 @@ export function buildScene(tiles, o = {}) {
       if (o.oblique && !viewerLit && zt < 1.5) shadows.push(...restingShadowOps(t, o, 1 - zt / 1.5));
     }
   }
-  const ops = o.oblique ? [...shadows, ...ground] : [...ground, ...shadows, ...air];
+  let ops = o.oblique ? [...shadows, ...ground] : [...ground, ...shadows, ...air];
+  if (pulled.size) {
+    const rest = [], lifted = [];
+    ops.forEach((op, i) => (pulled.has(String(op.txid)) ? lifted : rest).push({ op, i }));
+    lifted.sort((p, q) => (pulled.get(String(p.op.txid)) - pulled.get(String(q.op.txid))) || (p.i - q.i));
+    ops = [...rest.map((e) => e.op), ...lifted.map((e) => e.op)];
+  }
   return { ops, bounds: ops.length ? { minX, maxX, minY, maxY } : null, count: ordered.length };
 }
 

package/public/js/charts.js

@@ -12,12 +12,11 @@
 // old chart and calling it current is the same sin as inventing a number, so the
 // pill says how old it is.
 const M = { top: 8, right: 10, bottom: 18, left: 46 };
-const COL = {
-  grid: '#20252d', axis: '#2c323c', text: '#6a7484', textDim: '#4d5665',
-  accent: '#f7931a', ok: '#2ecc8f', warn: '#f0b429', bad: '#ef5a5a',
-  info: '#58a6ff', purple: '#a78bfa', cyan: '#4dd0e1', pink: '#f06ba7',
-};
-const PALETTE = [COL.accent, COL.info, COL.ok, COL.purple, COL.cyan, COL.pink, COL.warn, COL.bad];
+// THE COLOURS COME FROM THE THEME (theme.js, 2026-09-16): COL is the theme module's live object,
+// refilled when the operator picks a theme, and the chrome colours below read INK the same way --
+// a chart painted from literals of the dark look was unreadable on a light card.
+import { COL, INK } from './theme.js';
+const palette = () => [COL.accent, COL.info, COL.ok, COL.purple, COL.cyan, COL.pink, COL.warn, COL.bad];
 
 function prep(canvas) {
   const dpr = Math.min(window.devicePixelRatio || 1, 2);
@@ -64,7 +63,7 @@ export function resetCanvas(canvas) {
 export function empty(canvas, msg = 'no data from the node yet') {
   if (canvas.__hasData) { markStale(canvas, msg); return; }
   const { ctx, w, h } = prep(canvas);
-  ctx.fillStyle = '#4d5665';
+  ctx.fillStyle = INK.textDim;
   ctx.textAlign = 'center';
   ctx.fillText(msg, w / 2, h / 2);
   ctx.textAlign = 'left';
@@ -83,8 +82,8 @@ export function markStale(canvas, msg = 'no fresh samples') {
   const tw = ctx.measureText(label).width;
   const pw = tw + 20;
   const x = Math.max(4, w - pw - 6);
-  ctx.fillStyle = '#12151a';
-  ctx.strokeStyle = '#3d4552';
+  ctx.fillStyle = INK.panel;
+  ctx.strokeStyle = INK.panelLine;
   ctx.lineWidth = 1;
   ctx.beginPath();
   ctx.roundRect(x, 4, pw, 16, 5);
@@ -94,7 +93,7 @@ export function markStale(canvas, msg = 'no fresh samples') {
   ctx.beginPath();
   ctx.arc(x + 9, 12, 3, 0, 7);
   ctx.fill();
-  ctx.fillStyle = '#b9c3d1';
+  ctx.fillStyle = INK.label;
   ctx.textAlign = 'left';
   ctx.fillText(label, x + 15, 12);
 }
@@ -205,7 +204,8 @@ export function lineChart(canvas, series, opts = {}) {
 
   for (let si = 0; si < pts.length; si++) {
     const s = pts[si];
-    const color = s.color ?? PALETTE[si % PALETTE.length];
+    const pal = palette();
+    const color = s.color ?? pal[si % pal.length];
     const yOf = s.axis === 'right' ? Y2 : (opts.logY ? (v) => logY(v, lo, hi, L, plotH) : Y);
     const sorted = s.points.slice().sort((a, b) => a.t - b.t);
 
@@ -318,15 +318,15 @@ function attachLineTip(canvas, opts) {
     if (!rows.length) return hideTip(canvas);
     redraw(canvas);
     const { ctx } = ctxOf(canvas);
-    ctx.strokeStyle = '#ffffff30';
+    ctx.strokeStyle = INK.faintLine;
     ctx.beginPath(); ctx.moveTo(nearX, c.L.top); ctx.lineTo(nearX, c.L.top + c.plotH); ctx.stroke();
     const fmt = opts.fmtTip ?? ((v, s) => short(v));
     const boxW = 118;
     const boxH = 14 + rows.length * 12;
     const bx = Math.min(c.w - boxW - 4, nearX + 8);
     const by = c.L.top + 4;
-    ctx.fillStyle = '#0c0e11e8';
-    ctx.strokeStyle = '#2c323c';
+    ctx.fillStyle = INK.tip;
+    ctx.strokeStyle = INK.tipLine;
     ctx.beginPath(); ctx.roundRect(bx, by, boxW, boxH, 5); ctx.fill(); ctx.stroke();
     ctx.textAlign = 'left';
     ctx.fillStyle = COL.text;
@@ -335,11 +335,11 @@ function attachLineTip(canvas, opts) {
       const y = by + 20 + i * 12;
       ctx.fillStyle = row.color;
       ctx.fillRect(bx + 6, y - 3, 6, 2);
-      ctx.fillStyle = '#c7cfdb';
+      ctx.fillStyle = INK.tipText;
       const label = (row.label || '').slice(0, 12);
       ctx.fillText(label, bx + 16, y - 2);
       ctx.textAlign = 'right';
-      ctx.fillStyle = '#e8edf5';
+      ctx.fillStyle = INK.bright;
       ctx.fillText(fmt(row.v, row), bx + boxW - 6, y - 2);
       ctx.textAlign = 'left';
     });
@@ -512,7 +512,7 @@ export function meter(canvas, { value, max, label, danger = 0.9, fmt }) {
   const a1 = Math.PI * 2;
   ctx.lineWidth = Math.max(7, r * 0.34);
   ctx.lineCap = 'butt';
-  ctx.strokeStyle = '#171b21';
+  ctx.strokeStyle = INK.panel;
   ctx.beginPath(); ctx.arc(cx, cy, r, a0, a1); ctx.stroke();
   // the region past which the node starts feerate-evicting
   ctx.strokeStyle = hexA(COL.bad, 0.5);
@@ -520,7 +520,7 @@ export function meter(canvas, { value, max, label, danger = 0.9, fmt }) {
   const col = pct >= danger ? COL.bad : pct > 0.75 ? COL.warn : COL.ok;
   ctx.strokeStyle = col;
   ctx.beginPath(); ctx.arc(cx, cy, r, a0, a0 + Math.PI * Math.min(1, pct)); ctx.stroke();
-  ctx.fillStyle = '#e8edf5';
+  ctx.fillStyle = INK.bright;
   ctx.textAlign = 'center';
   ctx.font = '600 17px ui-monospace, monospace';
   ctx.fillText(`${((value / max) * 100).toFixed(1)}%`, cx, cy - 4);
@@ -556,12 +556,12 @@ export function stackedBars(canvas, rows, opts = {}) {
     ctx.fillStyle = COL.text;
     ctx.textAlign = 'right';
     ctx.fillText(String(r.label ?? '').slice(0, 20), L.left - 6, y + rowH / 2);
-    ctx.fillStyle = '#12151a';
+    ctx.fillStyle = INK.panel;
     ctx.fillRect(L.left, y + 2, plotW, rowH - 5);
     const bw = (r.value / max) * plotW;
     ctx.fillStyle = r.color ?? COL.accent;
     ctx.fillRect(L.left, y + 2, Math.max(1, bw), rowH - 5);
-    ctx.fillStyle = '#e8edf5';
+    ctx.fillStyle = INK.bright;
     ctx.textAlign = 'left';
     ctx.fillText(String(r.display ?? short(r.value)), L.left + Math.min(bw + 5, plotW - 40), y + rowH / 2);
   });
@@ -632,4 +632,4 @@ function hexA(hex, a) {
 }
 function clampN(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
 
-export { COL, PALETTE };
+export { COL, palette };

package/public/js/depthchart.js

@@ -10,15 +10,15 @@
 // gives 500 levels, OKX 5000 -- a percent or two either side) is not extended: its line ends,
 // the end is marked, and the total past it counts only the books that reach.
 import { niceTicks } from './charts.js';
+import { INK } from './theme.js';   // the axis, grid and tooltip colours of the chosen theme
 import { prep } from './pricechart.js';
 
 export const AGOS = [[60, '1m'], [300, '5m'], [600, '10m'], [1800, '30m'], [3600, '1h']];
 export const ZOOMS = [[0.01, '±1%'], [0.025, '±2.5%'], [0.05, '±5%'], [0.1, '±10%']];
 export const DEPTH_MS = 30_000;
 const D = { data: null, at: 0, busy: false, key: null, ago: 600, zoom: 0.05, hover: null, bound: false, error: null };
-const BID = '#3dff7a', ASK = '#ff4545';
-const BID_T = 'rgba(61,255,122,0.32)', ASK_T = 'rgba(255,69,69,0.32)';
-const BID_THEN = 'rgba(61,255,122,0.55)', ASK_THEN = 'rgba(255,69,69,0.55)';
+// the two sides' colours come from the theme's ink (theme.js, 2026-09-16): neon green and red on a
+// dark ground, the theme's own good and bad on a light one, where neon has no contrast
 const PAD_FULL = { top: 28, right: 62, bottom: 22, left: 56 };
 // COMPACT, for the kiosk. The full chart spends 62 px on the right purely to label the change
 // bars' axis and 56 on the left for the cumulative-BTC labels plus a rotated caption -- on a wall
@@ -90,13 +90,13 @@ export function depthSums(ser, pct) {
   return { bids: ser.bid[ib] ?? null, asks: ser.ask[ia] ?? null, atLeast: Boolean(ser.bidPart?.[ib] || ser.askPart?.[ia]) };
 }
 
-export function drawDepth(canvas, ser, { zoom = 0.05, hover = null, compact = false } = {}) {
+export function drawDepth(canvas, ser, { zoom = 0.05, hover = null, compact = false, empty = null } = {}) {
   if (!canvas?.getContext) return null;
   const PAD = compact ? PAD_COMPACT : PAD_FULL;
   const { ctx, w, h } = prep(canvas);
   if (!ser) {
-    ctx.fillStyle = '#6a7484'; ctx.textAlign = 'center';
-    ctx.fillText('asking the exchanges for their order books…', w / 2, h / 2);
+    ctx.fillStyle = INK.text; ctx.textAlign = 'center';
+    ctx.fillText(empty ?? 'asking the exchanges for their order books…', w / 2, h / 2);
     return null;
   }
   const plotW = Math.max(10, w - PAD.left - PAD.right), plotH = Math.max(40, h - PAD.top - PAD.bottom);
@@ -120,13 +120,13 @@ export function drawDepth(canvas, ser, { zoom = 0.05, hover = null, compact = fa
   for (const v of niceTicks(0, vmax, Math.max(3, Math.floor(plotH / 44)))) {
     const y = Math.round(Y(v)) + 0.5;
     if (y < PAD.top) continue;
-    ctx.strokeStyle = '#1a2029'; line(PAD.left, y, w - PAD.right, y);
-    ctx.fillStyle = '#7d8898'; ctx.fillText(btc(v), PAD.left - 6, y);
+    ctx.strokeStyle = INK.grid; line(PAD.left, y, w - PAD.right, y);
+    ctx.fillStyle = INK.axisText; ctx.fillText(btc(v), PAD.left - 6, y);
   }
   if (!compact) {
     ctx.save?.();
     ctx.translate(12, PAD.top + plotH / 2); ctx.rotate(-Math.PI / 2);
-    ctx.textAlign = 'center'; ctx.fillStyle = '#56606e'; ctx.fillText('BTC, cumulative', 0, 0);
+    ctx.textAlign = 'center'; ctx.fillStyle = INK.textDim; ctx.fillText('BTC, cumulative', 0, 0);
     ctx.restore?.();
   }
   ctx.setTransform(Math.min(globalThis.devicePixelRatio || 1, 2), 0, 0, Math.min(globalThis.devicePixelRatio || 1, 2), 0, 0);
@@ -137,10 +137,10 @@ export function drawDepth(canvas, ser, { zoom = 0.05, hover = null, compact = fa
       const v = e === 0 ? 0 : Math.sign(e) * 10 ** Math.abs(e);
       const y = Math.round(YC(v)) + 0.5;
       if (!compact) {
-        ctx.fillStyle = '#7d8898';
+        ctx.fillStyle = INK.axisText;
         ctx.fillText(v === 0 ? '0' : `${v > 0 ? '' : '-'}${shortN(Math.abs(v))}`, w - PAD.right + 6, y);
       }
-      if (v === 0) { ctx.strokeStyle = '#2a323d'; line(PAD.left, y, w - PAD.right, y); }
+      if (v === 0) { ctx.strokeStyle = INK.axis; line(PAD.left, y, w - PAD.right, y); }
     }
   }
   // price axis
@@ -148,10 +148,10 @@ export function drawDepth(canvas, ser, { zoom = 0.05, hover = null, compact = fa
   for (const p of niceTicks(pmin, pmax, Math.max(3, Math.floor(plotW / 90)))) {
     const x = Math.round(X(p)) + 0.5;
     if (x < PAD.left || x > w - PAD.right) continue;
-    ctx.strokeStyle = '#161b22'; line(x, PAD.top, x, PAD.top + plotH);
-    ctx.fillStyle = '#7d8898'; ctx.fillText(zoom <= 0.01 ? money(p) : kUsd(p), x, h - PAD.bottom / 2);
+    ctx.strokeStyle = INK.grid; line(x, PAD.top, x, PAD.top + plotH);
+    ctx.fillStyle = INK.axisText; ctx.fillText(zoom <= 0.01 ? money(p) : kUsd(p), x, h - PAD.bottom / 2);
   }
-  ctx.strokeStyle = '#2a323d';
+  ctx.strokeStyle = INK.axis;
   line(PAD.left + 0.5, PAD.top, PAD.left + 0.5, PAD.top + plotH);
   line(w - PAD.right + 0.5, PAD.top, w - PAD.right + 0.5, PAD.top + plotH);
   line(PAD.left, PAD.top + plotH + 0.5, w - PAD.right, PAD.top + plotH + 0.5);
@@ -180,15 +180,15 @@ export function drawDepth(canvas, ser, { zoom = 0.05, hover = null, compact = fa
     ctx.stroke();
     ctx.setLineDash([]); ctx.lineWidth = 1;
   };
-  for (const e of ser.exchanges) { curve(e.bids, BID_T, 1); curve(e.asks, ASK_T, 1); }
-  if (ser.change) { curve(ser.thenBid, BID_THEN, 1.4, [5, 4]); curve(ser.thenAsk, ASK_THEN, 1.4, [5, 4]); }
+  for (const e of ser.exchanges) { curve(e.bids, INK.bidT, 1); curve(e.asks, INK.askT, 1); }
+  if (ser.change) { curve(ser.thenBid, INK.bidThen, 1.4, [5, 4]); curve(ser.thenAsk, INK.askThen, 1.4, [5, 4]); }
   const only = (arr, part, want) => arr.map((v, i) => (v != null && (part[i] === want || (i > 0 && part[i - 1] === want) || (i < arr.length - 1 && part[i + 1] === want)) ? v : null));
-  curve(only(ser.bid, ser.bidPart, true), 'rgba(61,255,122,0.5)', 2.2, [2, 3]);
-  curve(only(ser.ask, ser.askPart, true), 'rgba(255,69,69,0.5)', 2.2, [2, 3]);
-  curve(only(ser.bid, ser.bidPart, false), BID, 2.2);
-  curve(only(ser.ask, ser.askPart, false), ASK, 2.2);
+  curve(only(ser.bid, ser.bidPart, true), INK.bidHalf, 2.2, [2, 3]);
+  curve(only(ser.ask, ser.askPart, true), INK.askHalf, 2.2, [2, 3]);
+  curve(only(ser.bid, ser.bidPart, false), INK.bid, 2.2);
+  curve(only(ser.ask, ser.askPart, false), INK.ask, 2.2);
   // the mid, and where each shallow book ends
-  ctx.strokeStyle = 'rgba(220,230,240,0.35)';
+  ctx.strokeStyle = INK.dash;
   const xm = Math.round(X(ser.mid)) + 0.5;
   line(xm, PAD.top, xm, PAD.top + plotH);
   ctx.font = '10px ui-monospace, SFMono-Regular, Menlo, monospace';
@@ -197,9 +197,9 @@ export function drawDepth(canvas, ser, { zoom = 0.05, hover = null, compact = fa
     for (const p of [r.low, r.high]) {
       if (p == null || p < pmin || p > pmax) continue;
       const x = Math.round(X(p)) + 0.5;
-      ctx.strokeStyle = 'rgba(200,210,225,0.5)'; line(x, PAD.top + plotH - 8, x, PAD.top + plotH);
+      ctx.strokeStyle = INK.dash; line(x, PAD.top + plotH - 8, x, PAD.top + plotH);
       if (!compact) {
-        ctx.fillStyle = '#8994a3'; ctx.textAlign = 'center';
+        ctx.fillStyle = INK.label; ctx.textAlign = 'center';
         ctx.fillText(`${r.name} ends`, x, PAD.top + plotH - 14 - 11 * (lane++ % 3));
       }
     }
@@ -207,14 +207,14 @@ export function drawDepth(canvas, ser, { zoom = 0.05, hover = null, compact = fa
   ctx.font = '11px ui-monospace, SFMono-Regular, Menlo, monospace';
 
   // readout: the pointer's price, or the sums near the mid
-  ctx.textAlign = 'left'; ctx.fillStyle = '#dfe6ee';
+  ctx.textAlign = 'left'; ctx.fillStyle = INK.bright;
   if (hover && hover.x >= PAD.left && hover.x <= w - PAD.right) {
     const p = pmin + ((hover.x - PAD.left) / plotW) * (pmax - pmin);
     const i = Math.max(0, Math.min(ser.prices.length - 1, Math.round((p - ser.prices[0]) / ser.step)));
     const bidSide = ser.prices[i] <= ser.mid;
     const cum = bidSide ? ser.bid[i] : ser.ask[i];
     const per = ser.exchanges.map((e) => [e.name, bidSide ? e.bids[i] : e.asks?.[i]]).filter(([, v]) => v != null).map(([nm, v]) => `${nm} ${btc(v)}`).join(' · ');
-    ctx.strokeStyle = 'rgba(200,215,230,0.5)'; ctx.setLineDash([3, 3]);
+    ctx.strokeStyle = INK.dash; ctx.setLineDash([3, 3]);
     const x = Math.round(X(ser.prices[i])) + 0.5;
     line(x, PAD.top, x, PAD.top + plotH);
     ctx.setLineDash([]);
@@ -237,8 +237,12 @@ export function depthBarHtml(ago = D.ago, zoom = D.zoom) {
     <div class="mkgrp"><span class="mklab">price window</span>${ZOOMS.map(([z, l]) => b('data-zoom', z, l, z === zoom)).join('')}</div>`;
 }
 
+// what the empty chart says while the feed is off: the switch, or the server's hard off
+const offText = (d) => (d?.enabled === false ? (d.polling === false ? 'market polling is off — Display settings → Markets & Price → Enable market polling' : 'market data is off on this server') : null);
+
 export function depthNote(d, fmt) {
   if (!d) return 'asking the exchanges for their order books…';
+  if (d.enabled === false) return d.note ?? 'market data is off on this monitor';
   if (d.warming) return 'reading the order books for the first time…';
   const agoL = AGOS.find(([s]) => s === d.ago)?.[1] ?? `${d.ago} s`;
   const parts = [`books read at ${clock(d.at)} UTC, every ${Math.round((d.bookMs ?? DEPTH_MS) / 1000)} s while this tab is open`];
@@ -252,7 +256,7 @@ export function depthNote(d, fmt) {
 function draw() {
   const canvas = document.getElementById('mkDepth');
   if (!canvas) return;
-  drawDepth(canvas, depthSeries(D.data), { zoom: D.zoom, hover: D.hover });
+  drawDepth(canvas, depthSeries(D.data), { zoom: D.zoom, hover: D.hover, empty: offText(D.data) });
 }
 
 /**
@@ -282,7 +286,7 @@ export function renderDepthInto(canvasId, h, { zoom = 0.025, compact = true } =
   ensureDepth(h);
   const canvas = document.getElementById(canvasId);
   if (!canvas) return null;
-  return drawDepth(canvas, depthSeries(D.data), { zoom, compact });
+  return drawDepth(canvas, depthSeries(D.data), { zoom, compact, empty: offText(D.data) });
 }
 
 export function renderDepth(h) {