Street light

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useId,  useRef,  useState,  type PointerEvent as ReactPointerEvent,} from 'react';import { DemoPointer, runDemo, type Point } from './demo-pointer';import {  OPTICS,  WINDOW,  ZONES,  lanternAt,  ratingText,  report,  type Lantern,  type Mix,  type Optic,  type Rating,

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The light model of the street light: a point source with an intensity distribution, in metres * and lux. It is a teaching model, not a lighting design tool, but every number it gives comes * from the same physics: illuminance E = I(direction) · cos(incidence) / distance². * * - The world: x runs along the street, y across it (towards the houses), z up. The pole stands on *   the near pavement; its arm reaches over the road, so "forward" for the lantern is +y. * - An optic is a relative intensity f(local direction), in the lantern's own frame (nadir is *   straight down). Tilt turns that frame about the street axis, towards the houses. * - Every optic emits the same flux (LUMENS). Its candela table is f scaled so that the integral *   of I over the sphere is that flux, so a tighter optic is brighter in its beam. * - Where the flux goes (road, pavements, behind the pole, gardens, houses, sky) is found by *   tracing a fixed grid of directions, each weighted by the solid angle it stands for. * - The BUG rating (backlight, uplight, glare) is read from the same directions: the share of the *   flux behind the lantern, above the horizon, and at high angles in front, each banded 0 to 3 *   (4 for the worst glare). */export type Vec = { x: number; y: number; z: number };/** The three optics, in the order of their cards. */export const OPTICS = ['narrow', 'wide', 'asymmetric'] as const;

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The diorama, as geometry: a street on a rounded plinth, in metres (x along the street, y across * it towards the houses, z up). It only describes shapes: faces with a fill and maybe light on * them, and hairlines. renderer.ts projects and paints them. * * - Every solid is drawn with its three faces the camera can see: the top, the front (facing -y) *   and the right end (facing +x). Objects are painted far to near, so a nearer face hides what *   is behind it; ground-level shapes go first, in their own layer. * - Faces marked `lit` receive the street light: horizontal ones share one illuminance texture of *   the whole ground, vertical ones (the facade, the fronts of walls) get a texture of their own. */import { BANDS, HOUSES, POLE, ROAD_LEVEL, lanternAt, type Optic, type Vec } from './photometry';export type Tone = 'line' | 'faint' | 'bright' | 'none';export type Fill =  | 'plinth'  | 'side'  | 'road'  | 'pave'  | 'kerb'  | 'grass'

// Copyright (c) 2026 Bruno Delorence. MIT License./* * Paints the diorama on a canvas at the device's pixel ratio: fills, light, hairlines, then the * glow of the lantern. Nothing here holds React state; street-light.tsx calls paint() with the * current lantern and blends whenever something moved. * * - The light is a texture of illuminance. The ground has one, 0.25 m a texel, laid on every *   horizontal face through the affine map of the ground plane; each lit wall has its own. A texel *   is either warm light (its strength eased from the lux) or a colour of the lux map, on a *   logarithmic scale from 0.5 to 100 lx; the two cross-fade. * - Isolux lines (1, 2, 5, 10, 20, 50, 100, 200 lx) come from marching squares over the same *   grids, faint in the warm view, white on the map. * - Every face is opaque and painted far to near, so the light on a face hides with it. * - The glow: a soft cone from the lens to the pool it lights (an ellipse from the moments of the *   ground's illuminance), a halo on the lens, and a haze in the sky above the roofs, as strong *   as the share of the flux that goes up or hits the houses. */import { BANDS, illuminance, type Lantern, type Vec } from './photometry';import {  FLOOR,  PAVE,  PILLAR,

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import type { CSSProperties, Ref } from 'react';/* * The demo's pointer, and the steps that move it. A demo is a script of awaited steps: wait, or * glide the pointer somewhere. Stopping the demo (the reader takes over, or it scrolls away) ends * the step in progress at once: its promise rejects, which ends the script right there, and the * pointer fades out. * * Each glide is a curved flight played by the Web Animations API, so nothing runs frame by frame. * The points of the flight are handed to whoever wants to move along with it (the eye of the * badge, which plays its own animation on the same clock). The arrow and the hand are HTML boxes * that swap by their visibility: a change of style inside an SVG would lay the SVG out again. */export type Point = { x: number; y: number };/** A glide's path and timing, for an animation that plays along with it. */export type Flight = { points: Point[]; timing: KeyframeAnimationOptions };export type Demo = {

// 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. */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);    const observer = new IntersectionObserver(

/* Street light (street-light.tsx): a near-black technical figure, "Fig 1", over a panel of   controls set in small, tracked monospace capitals.   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 canvas cannot read tokens, so a hidden probe turns white or black with   the scheme and the script repaints when its colour changes.   Sizes are the figure's own at about 1080 px wide: 13 px labels tracked 0.1em, 14 to 15 px   values. Below 600 px the sliders and the optic cards stack. */.root {  /* The stage, and the panel's hairlines. */  --surface: #111;  --line: #2a2a2a;  --edge: #363636;  --edge-strong: #d8d8d8;  --track: #3d3d3d;  /* Words: values, labels, and the dim ones. */  --ink: #f0f0f0;  --muted: #777;  --soft: #a8a8a8;  /* Where the light goes: one colour per zone. */  --road: #e4c28b;