Thermal canvas

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useCallback,  useEffect,  useId,  useLayoutEffect,  useRef,  useState,  type FocusEvent as ReactFocusEvent,  type KeyboardEvent as ReactKeyboardEvent,  type PointerEvent as ReactPointerEvent,} from 'react';import {  AndonCard,  arrowKeys,  Handles,  MilkRunCard,  OeeCard,  PositionCard,  StockCard,  TighteningCard,

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useState, type KeyboardEvent } from 'react';import {  BANDS,  BAND_NAMES,  COLS,  HISTORY,  HOT,  LIMIT,  ROWS,  band,  cellName,  type Bed,} from './data';import { box, floor, patternId, type Frame, type Paint } from './iso';import styles from './thermal-canvas.module.css';/* * The press's own nodes on the board: the "Bed temperature" widget, drawn three ways (3D bars, * a flat grid, a line over time), the hot spot's card and Ben's comment. *

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useState, type KeyboardEvent, type ReactNode } from 'react';import { seeded } from './data';import { box, floor, patternId, project, wireBox, type Frame, type Paint } from './iso';import { DotPatterns } from './thermal';import styles from './thermal-canvas.module.css';/* * The other nodes on the board, two to a group: the line's OEE and its andon, a station's * tightening curves and a hole's true position, a flow rack's stock and the tugger's milk run. * Every number is invented; the ones that tick (the stop timer, the tugger, the bins) follow the * board's one-second clock, `tick`, so they all pause together. */export type NodeId = 'thermal' | 'oee' | 'andon' | 'tightening' | 'position' | 'stock' | 'milkrun';const PAINTS: Record<string, Paint> = {  gray: { top: 'var(--gray-top)', left: 'var(--gray-left)', right: 'var(--gray-right)' },  dark: { top: 'var(--column-left)', left: 'var(--column-left)', right: 'var(--column-right)' },  orange: { top: '#ff9f6a', left: '#fd7831', right: '#b5521f' },  yellow: { top: '#ffe073', left: '#f5cf46', right: '#ad9028' },

// Copyright (c) 2026 Bruno Delorence. MIT License./* * Isometric drawing in plain SVG paths, shared by every 3D picture on the board (the bed's bars, * the losses waterfall, the hole's histogram, the flow rack's bins). * * A point on the floor has two coordinates: u runs down and to the right on the screen, v up and * to the right, both at 30 degrees. z is height in px. A box is seen from the front, so three of * its faces show: the top, the face towards the reader on the left (v at its smallest) and the * face towards the reader on the right (u at its largest). *//** tan(30°): how far a step along u or v drops (or climbs) for each px it moves across. */export const ISO = Math.tan(Math.PI / 6);export type Pt = { x: number; y: number };/** A projection: `px` screen px across per unit of u or v, the floor's origin at `ox`, `oy`. */export type Frame = { ox: number; oy: number; px: number };/** Where floor point (u, v), lifted by z px, lands on the screen. */export function project(frame: Frame, u: number, v: number, z = 0): Pt {  return {    x: frame.ox + (u + v) * frame.px,

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The press bed's temperatures: 48 cells, 8 across (columns A–H, A on the right) by 6 deep (rows * 2–7 from the back; row 1 is the bed's clamp strip, which has no sensors), and how they drift * while the board is live. All of it is invented. * * Every cell eases back towards its own resting temperature with a little noise on top, and the * hot spot breathes around 224 °C, so the picture moves without ever wandering off. The numbers * start from fixed values and a seeded random source, so the server and the browser draw the same * first frame. */export const COLS = 8;export const ROWS = 6;/** The bed's limit, °C: any cell above it is an alert. */export const LIMIT = 210;/** Resting temperatures, °C, by row (r: 0 at the front edge) and column (c: 0 at the left). */const REST: number[][] = [  [175, 181, 178, 178, 172, 178, 175, 174],  [184, 184, 180, 177, 183, 183, 183, 182],  [183, 184, 182, 179, 190, 195, 194, 187],  [171, 177, 178, 184, 198, 219, 216, 194],

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useCallback, useEffect, useRef, useState } from 'react';/* * When a demo may play on its own: while part of it is on screen and the tab is visible, never * under reduced motion, and not while the reader is using it. `take()` hands it to the reader; it * takes back over `idle` ms after their last input. `visible` alone says whether it is on screen in * a visible tab, for work that runs whether or not the demo plays (live data). */export function useAutoplay<T extends HTMLElement>(idle = 6000) {  const ref = useRef<T>(null);  const [visible, setVisible] = useState(false);  const [reduced, setReduced] = useState(true);  const [taken, setTaken] = useState(false);  const timer = useRef(0);  useEffect(() => {    const element = ref.current;    if (!element) return;    let onScreen = false;    const update = () => setVisible(onScreen && !document.hidden);

/* Thermal canvas (thermal-canvas.tsx): a plant board on a stage. The board is laid out at 600 px   wide and scaled to its container with CSS zoom (set from script), so every size below is in the   board's own px; under 540 px the narrow board (data-narrow) lays itself out at the real width.   Colours are the tokens below, light-dark(light, dark) where the two differ: the component takes   the color-scheme it inherits from the page, or the one its colorScheme prop sets   (data-color-scheme). The data colours (bands, losses, bins) are the same on both.   Memory. The stage is one layout boundary; the canvas clips its world, and the world moves by one   transform. Bars, curves and bins are SVG paths, redrawn once a second at most; the cursors move   by transforms. */.root {  --page: #111312;  --board: #1e201f;  --canvas: #262827;  --grid: rgb(255 255 255 / 0.045);  --panel: #161817;  --hud: #0e100f;  --hud-2: #2d2f2e;  --tool-on: #3a3c3b;  --comment: #2c2e2d;  --card: #1e201f;  --card-panel: #262827;