import type { ClipboardEvent } from 'react'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { createPortal } from 'react-dom'
/* The panel's styles ride WITH the panel. Imported from `main.tsx` they were
   in the entry CSS of every production build; here they are part of this
   module, so when the dev-only gate in `App.tsx` drops the module the
   stylesheet goes with it. */
import '../lab.css'
import {
  BLENDS,
  addEntry,
  addNote,
  forgetShares,
  hoverInfo,
  chooseVariant,
  chosenKeys,
  undoTo,
  clearGrain,
  dropVariantSet,
  loadLab,
  noteLine,
  pick,
  removeEntry,
  putShot,
  removeNote,
  setActive,
  setPicking,
  sayVariant,
  showVariant,
  shotUrl,
  toCss,
  variantCss,
  toggleNote,
  updateActive,
  labOn,
  useGrainLab,
  watchDisk,
  watchPush,
  openThreadOn,
  resolveThread,
  sayOnThread,
  showThread,
  type Target,
  type Thread,
  type VariantSet,
  addPending,
  describe,
  dropPending,
  clearIdlePending,
  markComposer,
  noteTrail,
  scrubTo,
  snapOf,
  trailCss,
  dropThread,
} from '@/lib/lab'

/**
 * LiGMA — the annotation + grain overlay — `?grain` on the URL, nothing otherwise.
 *
 * Two jobs. Grain is dialled live and copied out as CSS. Notes are written
 * against a selector and saved to `.lab/state.json`, where whoever is editing
 * the source reads them — so "click a thing, say what is wrong with it" ends
 * up as a durable instruction rather than a sentence typed into a chat and
 * lost.
 *
 * The three modes are the thing to understand before changing anything here.
 * They used to be two independent controls — a `picking` toggle and a
 * `preview` button side by side, looking like the same kind of switch while
 * meaning different things — and the panel could end up in a state it did not
 * describe. They are one exclusive control now, each named for what a click
 * on the page does in it:
 *
 *     pick     a click selects the element under the cursor
 *     browse   the page behaves normally, panel stays up
 *     preview  the panel folds away too, leaving only a way back
 *
 * Pick mode listens in the capture phase so a click lands here before a link
 * navigates; without that the page would be gone before the element could be
 * inspected.
 *
 * The rules go into a live `<style>` element that is created once and then
 * only has its text replaced. Recreating it per change is what made the first
 * version look unreactive: removing and re-appending a stylesheet drops it to
 * the end of the cascade and back, so some edits appeared to do nothing.
 */

/* THREE modes. There is no global `pick` any more: a picker belongs to the
   component it was opened on, and "arm the whole page" was the thing that had
   to go. `comment` arms it long enough to choose one element and then stands
   down. */
/**
 * The overlay's own surfaces — everything the picker must treat as NOT the
 * page.
 *
 * This was `.gl-panel` alone, which was true when the panel was the only
 * thing the tool drew. It is not any more: the FAB, the pins, the armed ring
 * and the stand-in cursor are all siblings of the panel in one portal, so the
 * picker happily hovered and PICKED its own chrome. Clicking the FAB a second
 * time to disarm was the worst of it — the capture listener here runs before
 * React's, so the toggle never fired and you got a thread opened on the FAB's
 * own `<span>` instead, reported as "the fab is creating a prompt element for
 * itself".
 *
 * One list, used by every test that asks "is this the page or is this us".
 * Anything new the overlay draws at the top level belongs in it.
 */
/**
 * Two preferences about the TOOL, not the page.
 *
 * Both live in localStorage, because where you like the panel and whether you
 * like a hover card are facts about you, not about the design under review —
 * the same reasoning that keeps `showing` off disk.
 *
 * PEEK: the identity card follows the pointer WITHOUT arming the picker. The
 * picker swallows every click on the site, which is the right price for
 * "click a component and comment on it" and the wrong price for "what is
 * that". Peek is the second question answered on its own: hover, read the
 * selector, the share count and the element's words, and the page keeps every
 * click. It runs the same rAF-gated `hoverInfo()` hot path the picker does —
 * GOTCHAS §6 is why it is not `describe()`.
 *
 * DOCK: the panel is either a floating card that goes where it is put, or a
 * drawer on the right edge that slides in and out and leaves a tab behind.
 * The card is right until it is over the thing you are reading; the drawer is
 * right when you are working through a list and want the page to stay put
 * beside it. Neither is right for everyone, so it is a switch.
 *
 * There used to be a third preference here — three complete looks, cycled
 * from the FAB. They were written to find a better answer than the original
 * panel; the answer is folded into `lab.css` and the switch is gone.
 */
/* a stable empty array: a fresh `[]` on every render restarts the placement
   effect below it every frame */
const EMPTY: Target[] = []

/* ══ PARKED, 2026-09-22 ═══════════════════════════════════════════════════
   Two surfaces switched off rather than deleted, because the workflow moved
   past them and "for now" is not "for good".

   THE PANEL — grain, the notes list, the selected-element note box, the
   variants tab, and the `≡` and dock controls that reach it. Everything it
   does has a better home: a note is a thread pinned to its component, and
   variant chips live in that component's bubble. What is left in the panel is
   the old one-element-at-a-time flow and the grain dialler.

   PEEK — the hover card without the picker, and the `h` that toggled it.

   Flags rather than commented-out JSX, deliberately. Commenting out a block
   this size means the code stops being compiled, stops being type-checked and
   stops being formatted, and the next change to the store silently rots it —
   this file has already lost an afternoon to a JSX comment that swallowed the
   tag after it. Gated, everything still builds and one word brings it back.

   ONE CONSEQUENCE worth knowing before flipping the panel off again: a
   variant set NOT attached to a thread is only reachable there, so parking
   the panel strands it. `lab.mjs stale` lists them and `drop` clears them. */
const SHOW_PANEL: boolean = false
const SHOW_PEEK: boolean = false

/* ── the asks you make over and over ───────────────────────────────────────
   Three things get typed at almost every component, and typing them out is
   the same tax this tool exists to remove — it took the POINTING away and
   left the same three sentences to write by hand.

   THEY SEND. One click opens the thread with that sentence as its first
   message; the box is not involved and whatever was half-typed in it is
   dropped. They were built to fill the box instead, on the reasoning that a
   misclick would otherwise put a thread on disk and claim an agent — and that
   was the wrong trade: it made the common case two steps to avoid a rare one
   that a two-click remove already undoes.

   The wording is the instruction, not a hint. It goes on disk verbatim and
   the watcher reads it out, so each has to be a sentence that is actionable
   with nothing else attached. */
const ASKS = [
  {
    key: 'variants',
    label: '5 variants',
    hint: 'ask for five treatments to compare on the page',
    text: "Give me 5 variants of this component and I'll pick one.",
  },
  {
    key: 'what',
    label: 'what is this',
    hint: 'what the component is for, and where else it is used',
    text: 'What is this component, what is it for, and where else is it used?',
  },
  {
    key: 'direction',
    label: 'direction',
    hint: 'a design direction for this component, with the reasoning',
    text: 'Suggest a design direction for this component and say why.',
  },
] as const

/* ── where a bubble sits relative to the component it is about ─────────────
   Four sides OUTSIDE the element's box, and `over` for when none of them
   fits — an element the size of the screen has no outside. `BUBBLE_W` has to
   match `--gl-bw` in the stylesheet; `BUBBLE_H` is an estimate of a
   composer's height, used only to ask whether there is room and never to
   place anything. */
type Side = 'right' | 'left' | 'up' | 'down' | 'over'
const BUBBLE_W = 320
const BUBBLE_H = 210
const GUTTER = 18

const PEEK_KEY = 'gl-peek'
const DOCK_KEY = 'gl-dock'
type Dock = 'float' | 'drawer'

const LAB_UI =
  '.gl-panel, .gl-dock-tab, .gl-fab-set, .gl-pins, .gl-cursor, .gl-band, .gl-armed, .gl-hi, .gl-pick-float, .gl-draw'

type Mode = 'comment' | 'browse' | 'preview'

/** the only key a focused field lets by. `a` is NOT in here: it is a letter
    first and a shortcut second, and a note is prose. */
const MODE_KEYS = new Set(['escape'])

/** what a click on the page does right now, said in one line */
const MODE_HINT: Record<Mode, string> = {
  comment: 'click a component to pin it · a toggles all · esc clears',
  browse: 'the page works normally',
  preview: '',
}

/**
 * The pinned threads, drawn on the page under the elements they are about.
 *
 * ── why page coordinates ────────────────────────────────────────────────────
 *
 * Every pin is `position: absolute` in DOCUMENT space — the element's rect plus
 * the current scroll — inside a layer at the top of `<body>`. That means
 * scrolling moves the pins for free, with no listener and no frame loop. The
 * obvious alternative, `position: fixed` plus a scroll handler, is a rAF
 * running the whole time the mode is on, to arrive at the same pixels.
 *
 * Positions are recomputed only when the page's SHAPE changes: a resize, a
 * route change, or a thread appearing. A `ResizeObserver` on `<body>` catches
 * the third kind — an image loading above a pin, a section expanding — which
 * is the case a resize listener alone misses.
 *
 * ── why a thread can go missing ─────────────────────────────────────────────
 *
 * A thread is anchored by the same unique path a note uses. If the component
 * moves in the source, that path stops matching and the thread has nothing to
 * hang from. It is NOT dropped: it keeps its place in the file and the panel
 * lists it, because a conversation about a component that just got rewritten is
 * the conversation you least want thrown away.
 */
/**
 * The field that runs over a component while an agent is rewriting it.
 *
 * It is React Bits' `PixelBlast` — a noise field quantised through an ordered
 * Bayer matrix and drawn as a grid of circles, with ripples crossing it —
 * done on a 2D canvas instead of in a fragment shader.
 *
 * ── why not the real thing ──────────────────────────────────────────────────
 *
 * That component is WebGL with three.js behind it. An install of this tool is
 * a copy of six source files with no build and no dependencies (see
 * INSTALL.md), and a dev overlay is the last place that should drag a
 * renderer into an app's graph. The maths is small enough to write out, so it
 * is, with the constants named after the component's own props.
 *
 * ── the parts that make it look like itself ─────────────────────────────────
 *
 * THE BAYER STEP. Value noise alone gives soft blobs. Quantising it against
 * an 8×8 ordered threshold — a different cut-off for every cell in an 8×8
 * tile — is what turns the gradient into a stipple that holds its structure
 * instead of dissolving into grey. That is the whole trick, and it is the
 * demo's own lineage (github.com/zavalit/bayer-dithering-webgl-demo).
 *
 * JITTER. Every circle the same size reads as a halftone print. Perturbing
 * each radius by a value hashed from the cell — fixed for that cell, not
 * re-rolled per frame — is what keeps it looking alive rather than mechanical.
 *
 * RIPPLES, on a timer rather than a pointer. The original throws one from
 * every click. This layer must never take the pointer, because the component
 * underneath is the thing you are meant to be clicking, so rings are spawned
 * at intervals from random points instead. Same picture, and nobody has to
 * touch a page they are trying to look at.
 *
 * `liquid` is off in the config this was built to, so it is not implemented.
 */
const PIXEL = 4 /* pixelSize */
const P_SCALE = 3.75 /* patternScale */
const P_DENSITY = 1.85 /* patternDensity */
const JITTER = 1.85 /* pixelSizeJitter */
const SPEED = 2.85
const EDGE_FADE = 0.18
const RIPPLE_SPEED = 0.4
const RIPPLE_THICK = 0.12
const RIPPLE_GAIN = 1.5
/** seconds between rings; the original throws one per click, this one ticks */
const RIPPLE_EVERY = 1.5

/**
 * The field's ink, per ground.
 *
 * `#b497cf` is the colour this was configured to and it is right on a dark
 * ground, which is what the demo sits on. On a white sheet it is 1.9:1 —
 * there, but not visible — so the light theme takes the same hue carried down
 * to where it reads. A field that cannot be seen on half the site's pages is
 * not a loading indicator.
 */
/* ── the field's ink ──────────────────────────────────────────────────────
   Black or white, and NOTHING ELSE. It was violet on both themes, which was a
   hue the tool no longer owns anywhere — and it read as a stain rather than
   as the tool, because a colour nobody could place is exactly what an overlay
   must not put on somebody's design.

   Which of the two is decided by WHAT THE FIELD SITS ON, not by the page
   theme. A white pill in an ember hero is a light ground in a dark-ish band,
   and keying off the theme got that backwards: the component you are looking
   at is the thing the field has to stay legible against. */
const INK_ON_LIGHT = [12, 12, 16]
const INK_ON_DARK = [255, 255, 255]
/* Raised from 0.72/0.8. Under a blur the dither is the only thing carrying
   texture — the component under it is already soft — so it has to be denser
   than it was when it sat on readable type and had to stay out of the way. */
const A_ON_LIGHT = 0.92
const A_ON_DARK = 0.95

/**
 * Whether the page is dark RIGHT NOW.
 *
 * `data-theme` first, because that is what a site's own toggle writes and it
 * beats the OS setting; the media query is the fallback for a page with no
 * toggle. Read per frame rather than subscribed to: two property reads at
 * 24fps, and a theme flip then costs nothing to follow — no observer, no
 * listener, no way to leak one.
 */
const darkNow = (mq: MediaQueryList | null) => {
  const set = document.documentElement.dataset.theme
  if (set === 'dark') return true
  if (set === 'light') return false
  return !!mq?.matches
}

/* ── what is actually painted under a component ───────────────────────────
   A component is usually transparent and inherits the band behind it, so this
   walks up for the first ancestor with a background the eye can see. Anything
   under half opacity is skipped: it tints what is behind it rather than
   replacing it, so it is not the ground.

   Nothing painted the whole way up means the page has not said, and the theme
   is the fallback — which is the one case where the old theme-only answer was
   right.

   The threshold is 0.3 rather than 0.5 because this is choosing ink for a
   dither at 70-80% alpha, not body text: ember at 0.17 wants white on it,
   and a mid grey is more forgiving of white than of black. */
const groundIsLight = (el: Element): boolean => {
  for (let n: Element | null = el; n; n = n.parentElement) {
    const m = /rgba?\(([\d.]+),\s*([\d.]+),\s*([\d.]+)(?:,\s*([\d.]+))?\)/.exec(
      getComputedStyle(n).backgroundColor,
    )
    if (!m) continue
    if (m[4] !== undefined && Number(m[4]) < 0.5) continue
    const [r, g, b] = [Number(m[1]), Number(m[2]), Number(m[3])].map((v) => {
      const c = v / 255
      return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
    })
    return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.3
  }
  return !darkNow(matchMedia('(prefers-color-scheme: dark)'))
}

/* the 8×8 ordered-dither threshold matrix */
const BAYER8 = [
  0, 32, 8, 40, 2, 34, 10, 42, 48, 16, 56, 24, 50, 18, 58, 26, 12, 44, 4, 36, 14, 46, 6,
  38, 60, 28, 52, 20, 62, 30, 54, 22, 3, 35, 11, 43, 1, 33, 9, 41, 51, 19, 59, 27, 49, 17,
  57, 25, 15, 47, 7, 39, 13, 45, 5, 37, 63, 31, 55, 23, 61, 29, 53, 21,
]

/** deterministic 0..1 from a pair of integers */
function hash2(x: number, y: number) {
  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263)
  h = Math.imul(h ^ (h >>> 13), 1274126177)
  return ((h ^ (h >>> 16)) >>> 0) / 4294967295
}

/** smooth value noise, the field the dither is cut out of */
function vnoise(x: number, y: number) {
  const xi = Math.floor(x)
  const yi = Math.floor(y)
  const xf = x - xi
  const yf = y - yi
  const u = xf * xf * (3 - 2 * xf)
  const v = yf * yf * (3 - 2 * yf)
  const a = hash2(xi, yi)
  const b = hash2(xi + 1, yi)
  const c = hash2(xi, yi + 1)
  const d = hash2(xi + 1, yi + 1)
  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v
}

/** three octaves — enough structure to read as a pattern, cheap enough to run */
const fbm = (x: number, y: number) =>
  vnoise(x, y) * 0.55 +
  vnoise(x * 2.03, y * 2.03) * 0.28 +
  vnoise(x * 4.01, y * 4.01) * 0.17

function PixelBlast({ w, h, light }: { w: number; h: number; light: boolean }) {
  const ref = useRef<HTMLCanvasElement | null>(null)

  useEffect(() => {
    const cv = ref.current
    if (!cv || w < 2 || h < 2) return
    /* capped at 2: past that it is more pixels for a field of small circles
       nobody is inspecting */
    const dpr = Math.min(window.devicePixelRatio || 1, 2)
    cv.width = Math.max(1, Math.round(w * dpr))
    cv.height = Math.max(1, Math.round(h * dpr))
    const ctx = cv.getContext('2d')
    if (!ctx) return
    ctx.scale(dpr, dpr)

    const cols = Math.max(1, Math.ceil(w / PIXEL))
    const rows = Math.max(1, Math.ceil(h / PIXEL))
    const still = matchMedia('(prefers-reduced-motion: reduce)').matches
    /** live rings: where they started, and when */
    const rings: { x: number; y: number; born: number }[] = []
    let nextRing = 0
    let raf = 0
    let last = 0

    const draw = (t: number) => {
      const ink = light ? INK_ON_LIGHT : INK_ON_DARK
      const maxA = light ? A_ON_LIGHT : A_ON_DARK
      ctx.clearRect(0, 0, w, h)
      ctx.fillStyle = `rgb(${ink[0]},${ink[1]},${ink[2]})`

      if (t >= nextRing) {
        rings.push({ x: Math.random(), y: Math.random(), born: t })
        nextRing = t + RIPPLE_EVERY
        /* a ring is spent once it has crossed the box; keeping them would be
           a list that only grows */
        while (rings.length > 4) rings.shift()
      }

      const drift = t * SPEED * 0.06
      for (let gy = 0; gy < rows; gy++) {
        const v = gy / rows
        for (let gx = 0; gx < cols; gx++) {
          const u = gx / cols
          let n = fbm(u * P_SCALE + drift, v * P_SCALE - drift * 0.7)
          /* density pushes the field away from the middle, which is what
             decides how much of the grid lights up rather than how bright it
             gets */
          n = (n - 0.5) * P_DENSITY + 0.5

          /* the rings, added before the threshold so they cut new cells IN
             rather than just brightening the ones already lit */
          for (const r of rings) {
            const age = t - r.born
            const rad = age * RIPPLE_SPEED
            const d = Math.hypot(u - r.x, (v - r.y) * (h / w || 1))
            const band = Math.abs(d - rad)
            if (band < RIPPLE_THICK) {
              const edge = 1 - band / RIPPLE_THICK
              n += edge * edge * RIPPLE_GAIN * Math.max(0, 1 - age * 0.35)
            }
          }

          const th = (BAYER8[(gy & 7) * 8 + (gx & 7)] + 0.5) / 64
          if (n <= th) continue

          /* `edgeFade`: the field dissolves into the element's own edges
             instead of stopping on a line. A hard edge would be a frame, and
             the one thing this layer must not do is draw a box round
             somebody's component and call it design. */
          const near = Math.min(gx / cols, gy / rows, 1 - gx / cols, 1 - gy / rows)
          const soft = Math.min(1, near / EDGE_FADE)
          if (soft <= 0) continue

          const lit = Math.min(1, (n - th) / (1 - th))
          /* jitter is hashed from the cell, so a circle keeps its size frame
             to frame — re-rolling it every frame is static, not life */
          const j = 1 + (hash2(gx, gy) - 0.5) * JITTER * 0.35
          const rad = (PIXEL / 2) * (0.45 + 0.55 * lit) * j
          if (rad < 0.3) continue

          ctx.globalAlpha = lit * soft * maxA
          ctx.beginPath()
          ctx.arc(gx * PIXEL + PIXEL / 2, gy * PIXEL + PIXEL / 2, rad, 0, Math.PI * 2)
          ctx.fill()
        }
      }
      ctx.globalAlpha = 1
    }

    /* One frame and stop. It used to watch `data-theme` from in here so a
       still field would follow the ground; the ground is a PROP now, so a
       change to it re-runs this effect and repaints on its own. Watching the
       theme here as well would be two answers to one question — and the
       measuring half of it lives in `place()`, which is where the element is. */
    if (still) {
      draw(0)
      return
    }
    const loop = (ms: number) => {
      raf = requestAnimationFrame(loop)
      /* ~24fps. It does not read better at 60 and it is a panel on someone
         else's page — it should not be the reason their scroll stutters. */
      if (ms - last < 42) return
      last = ms
      if (!document.hidden) draw(ms / 1000)
    }
    raf = requestAnimationFrame(loop)
    return () => cancelAnimationFrame(raf)
  }, [w, h, light])

  return <canvas ref={ref} className="gl-blast" aria-hidden />
}

/* ══ the drawing pad ══════════════════════════════════════════════════════
   "This, but like THIS" — pointed at with a pen instead of described. A
   screenshot can be pasted into a composer already; this is the same idea for
   an intention that does not exist yet, which is most of them: an arrow to
   where a thing should move, a box round what should go, a word where copy
   nobody has written should sit.

   Hand-built rather than an editor dropped in. The pad ships into every app
   LiGMA installs into, and a megabyte of scene graph, element model and
   collaborative state is a lot of dependency for a surface whose whole job is
   to become a PNG. What is here is the part that gets used.

   It rides the pasted-screenshot pipeline exactly — `putShot` takes any Blob,
   so a canvas export lands in `.lab/shots/` beside the pastes, appears in the
   same tray, and goes out with the message with no send-path changes at all.

   CLOSES ONLY ON ITS OWN BUTTONS. No backdrop click, no Escape: a drawing is
   minutes of work with no undo once it is gone, and both of those gestures
   are ones people make without deciding to. Escape cancels the shape under
   the pointer instead, which is the thing you actually want to take back
   mid-drag. */

type Kind =
  | 'pen'
  | 'line'
  | 'arrow'
  | 'text'
  | 'rect'
  | 'round'
  | 'ellipse'
  | 'tri'
  | 'diamond'
  | 'pent'
  | 'hex'
  | 'star'

/** One drawn thing. `pts` is every point for a pen line and the two dragged
    corners for everything else — one shape for the store, one redraw path. */
type Item = {
  kind: Kind
  pts: number[]
  color: string
  width: number
  erase?: boolean
  fill?: boolean
  text?: string
}

/* A FIXED LOGICAL SIZE, scaled by CSS to whatever room there is. Pointer
   coordinates are mapped into it, so the export is the same 1200×780 picture
   whatever window it was drawn in — and nothing has to be redrawn or rescaled
   when the window changes, which is where a canvas that tracks its own client
   size spends most of its code. */
const PAD_W = 1200
const PAD_H = 780
const NIBS = [2.5, 6, 13]
/* type rides the nib, so one control sets the weight of everything */
const TYPE_AT: Record<string, number> = { '2.5': 21, '6': 33, '13': 54 }
/* The eraser rides the nib too, times this. A 6px eraser is a scalpel and
   erasing with it is the most tedious thing the pad can ask of you; 30px
   clears a mistake in one pass and 65px clears a region. The footprint is
   drawn under the pointer so the size is never a guess. */
const ERASE_X = 5

/* Page brand hues, for marking up against the page's own language. The first
   is empty and resolves to the pad's own foreground at paint time, so it
   follows the paper rather than being a third grey nobody chose. */
const INKS = ['', '#e8461a', '#2f7fe0', '#3f8f2e', '#ffbf00']

/* The key is the letter that selects it. Kept beside the label rather than in
   a help panel, because a shortcut nobody can see is a shortcut nobody uses. */
const TOOLS: { k: Kind | 'erase' | 'shape' | 'select'; label: string; key: string }[] = [
  /* `v`, because every editor since Illustrator has put the arrow on `v` */
  { k: 'select', label: 'select', key: 'v' },
  { k: 'pen', label: 'pen', key: 'p' },
  { k: 'line', label: 'line', key: 'l' },
  { k: 'arrow', label: 'arrow', key: 'a' },
  /* one button for all eight shapes, with a flyout — see the toolbar */
  { k: 'shape', label: 'shapes', key: 's' },
  { k: 'text', label: 'text', key: 't' },
  { k: 'erase', label: 'eraser', key: 'e' },
]

/* ── regular polygons ──────────────────────────────────────────────────────
   One routine draws the pentagon, the hexagon and the star, inscribed in the
   ellipse of the dragged box so a wide drag gives a wide shape. `inner` makes
   every second vertex sit closer in, which is all a star is. Starts at the
   top, so a hexagon is pointy-side up and a pentagon stands on its base. */
function ring(
  n: number,
  cx: number,
  cy: number,
  rx: number,
  ry: number,
  inner = 1,
): [number, number][] {
  const out: [number, number][] = []
  const steps = inner < 1 ? n * 2 : n
  for (let i = 0; i < steps; i++) {
    const a = -Math.PI / 2 + (i * Math.PI * 2) / steps
    const f = inner < 1 && i % 2 ? inner : 1
    out.push([cx + rx * f * Math.cos(a), cy + ry * f * Math.sin(a)])
  }
  return out
}
/* the same routine at icon size, so the glyph is the shape it draws */
const ringPath = (n: number, inner = 1) =>
  ring(n, 8, 8.4, 5.8, 5.8, inner)
    .map(([x, y], i) => `${i ? 'L' : 'M'}${x.toFixed(2)} ${y.toFixed(2)}`)
    .join('') + 'Z'

const SHAPE_KINDS = new Set<Kind>([
  'rect',
  'round',
  'ellipse',
  'tri',
  'diamond',
  'pent',
  'hex',
  'star',
])
const SHAPES: { k: Kind; label: string }[] = [
  { k: 'rect', label: 'rectangle' },
  { k: 'round', label: 'rounded' },
  { k: 'ellipse', label: 'ellipse' },
  { k: 'tri', label: 'triangle' },
  { k: 'diamond', label: 'diamond' },
  { k: 'pent', label: 'pentagon' },
  { k: 'hex', label: 'hexagon' },
  { k: 'star', label: 'star' },
]

/* ── the glyphs ────────────────────────────────────────────────────────────
   One set, one stroke weight, one grid, drawn here rather than pulled from
   an icon font: eight tools and six controls is fourteen paths, and a font
   is a dependency plus a flash of missing glyphs on the first open. */
const ICON: Record<string, React.ReactNode> = {
  select: <path d="M4 2.5l8.5 6.5-3.8.7 2.3 4.2-1.9 1-2.3-4.2L4 13.2z" />,
  pen: <path d="M2 14l1-3.2L10.4 3.4a1.4 1.4 0 0 1 2 2L5 12.8 2 14z" />,
  line: <path d="M3 13 13 3" />,
  arrow: <path d="M3 13 13 3M7 3h6v6" />,
  rect: <rect x="2.5" y="3.5" width="11" height="9" rx="1" />,
  round: <rect x="2.5" y="3.5" width="11" height="9" rx="3" />,
  ellipse: <ellipse cx="8" cy="8" rx="5.5" ry="4.5" />,
  tri: <path d="M8 3l5.5 10h-11z" />,
  diamond: <path d="M8 2.5l5.5 5.5-5.5 5.5L2.5 8z" />,
  pent: <path d={ringPath(5)} />,
  hex: <path d={ringPath(6)} />,
  star: <path d={ringPath(5, 0.45)} />,
  text: <path d="M3.5 5.2V3h9v2.2M8 3v10M6 13h4" />,
  erase: (
    <path d="M2.7 10.3l6.6-6.6a1.4 1.4 0 0 1 2 0l2 2a1.4 1.4 0 0 1 0 2L8.2 12.8H5.2zM5.2 12.8H14M5.6 5.4l5 5" />
  ),
  undo: <path d="M3.5 7h6.5a3.5 3.5 0 0 1 0 7H7M3.5 7 6.5 4M3.5 7l3 3" />,
  redo: <path d="M12.5 7H6a3.5 3.5 0 0 0 0 7h3M12.5 7l-3-3M12.5 7l-3 3" />,
  trash: <path d="M3 4.5h10M6.5 4.5V3h3v1.5M4.5 4.5l.7 8.5h5.6l.7-8.5M6.8 7v4M9.2 7v4" />,
  grid: (
    <>
      {[4, 8, 12].flatMap((x) =>
        [4, 8, 12].map((y) => (
          <circle
            key={`${x}${y}`}
            cx={x}
            cy={y}
            r=".9"
            fill="currentColor"
            stroke="none"
          />
        )),
      )}
    </>
  ),
  outline: <rect x="3" y="3" width="10" height="10" rx="1.5" />,
  solid: <rect x="3" y="3" width="10" height="10" rx="1.5" fill="currentColor" />,
  close: <path d="M4 4l8 8M12 4l-8 8" />,
}
function Ico({ k }: { k: string }) {
  return (
    <svg
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
    >
      {ICON[k]}
    </svg>
  )
}

/* how many steps back the pad remembers */
const HIST_MAX = 80

/** where one element's drawing is kept between openings */
const padKey = (path: string) =>
  `ligma:pad:${typeof location === 'undefined' ? '' : location.pathname}:${path}`

/* ── drawing one item ──────────────────────────────────────────────────────
   Every shape is drawn from the same two dragged corners, normalised here, so
   a box dragged up-and-left is the same box as one dragged down-and-right and
   a triangle always points up. Nobody drags a shape twice to find out which
   direction the tool wanted. */
function drawItem(
  g: CanvasRenderingContext2D,
  it: Item,
  paper: string,
  fg: string,
): void {
  const col = it.erase ? paper : it.color || fg
  g.strokeStyle = col
  g.fillStyle = col
  g.lineWidth = it.width
  const [x0, y0, x1 = x0, y1 = y0] = it.pts
  const L = Math.min(x0, x1)
  const T = Math.min(y0, y1)
  const W = Math.abs(x1 - x0)
  const H = Math.abs(y1 - y0)

  if (it.kind === 'text') {
    g.font = `600 ${TYPE_AT[String(it.width)] ?? 33}px ui-sans-serif, system-ui, sans-serif`
    g.textBaseline = 'top'
    g.fillText(it.text ?? '', x0, y0)
    return
  }

  g.beginPath()
  if (it.kind === 'pen') {
    const { pts } = it
    g.moveTo(pts[0], pts[1])
    /* a tap is a dot, and a zero-length line draws nothing at all */
    if (pts.length === 2) g.lineTo(pts[0] + 0.01, pts[1])
    for (let n = 2; n < pts.length; n += 2) g.lineTo(pts[n], pts[n + 1])
    g.stroke()
    return
  }
  if (it.kind === 'line' || it.kind === 'arrow') {
    g.moveTo(x0, y0)
    g.lineTo(x1, y1)
    g.stroke()
    if (it.kind === 'arrow') {
      /* the head is sized off the nib, so a heavy arrow does not end in a
         hairline tick — and off the line's own angle, so it stays on it */
      const a = Math.atan2(y1 - y0, x1 - x0)
      const h = Math.max(14, it.width * 4.5)
      g.beginPath()
      g.moveTo(x1, y1)
      g.lineTo(x1 - h * Math.cos(a - 0.42), y1 - h * Math.sin(a - 0.42))
      g.moveTo(x1, y1)
      g.lineTo(x1 - h * Math.cos(a + 0.42), y1 - h * Math.sin(a + 0.42))
      g.stroke()
    }
    return
  }
  const cx = L + W / 2
  const cy = T + H / 2
  if (it.kind === 'rect') g.rect(L, T, W, H)
  if (it.kind === 'round') g.roundRect(L, T, W, H, Math.min(W, H) * 0.18)
  if (it.kind === 'ellipse') g.ellipse(cx, cy, W / 2, H / 2, 0, 0, Math.PI * 2)
  if (it.kind === 'tri') {
    g.moveTo(cx, T)
    g.lineTo(L + W, T + H)
    g.lineTo(L, T + H)
    g.closePath()
  }
  if (it.kind === 'diamond') {
    g.moveTo(cx, T)
    g.lineTo(L + W, cy)
    g.lineTo(cx, T + H)
    g.lineTo(L, cy)
    g.closePath()
  }
  const sides =
    it.kind === 'pent' ? 5 : it.kind === 'hex' ? 6 : it.kind === 'star' ? 5 : 0
  if (sides) {
    const pts = ring(sides, cx, cy, W / 2, H / 2, it.kind === 'star' ? 0.45 : 1)
    pts.forEach(([x, y], i) => (i ? g.lineTo(x, y) : g.moveTo(x, y)))
    g.closePath()
  }
  if (it.fill) g.fill()
  else g.stroke()
}

/* ── selection geometry ────────────────────────────────────────────────────
   Everything the select tool does is done to an item's BOX: hit-testing,
   the dashed outline, the handles, and the resize maths. One box routine,
   so a thing you can see the outline of is a thing you can grab. */
type Box = [number, number, number, number]

/* text has no points to take a box from, so it is measured — on a context
   made once and kept, since measuring needs a canvas and the pad's own is
   busy being drawn on */
let meter: CanvasRenderingContext2D | null = null
const textWidth = (it: Item) => {
  meter ??= document.createElement('canvas').getContext('2d')
  if (!meter) return 0
  meter.font = `600 ${TYPE_AT[String(it.width)] ?? 33}px ui-sans-serif, system-ui, sans-serif`
  return meter.measureText(it.text ?? '').width
}

function boxOf(it: Item): Box {
  if (it.kind === 'text') {
    const h = TYPE_AT[String(it.width)] ?? 33
    return [it.pts[0], it.pts[1], it.pts[0] + textWidth(it), it.pts[1] + h * 1.1]
  }
  let L = Infinity
  let T = Infinity
  let R = -Infinity
  let B = -Infinity
  for (let i = 0; i < it.pts.length; i += 2) {
    L = Math.min(L, it.pts[i])
    R = Math.max(R, it.pts[i])
    T = Math.min(T, it.pts[i + 1])
    B = Math.max(B, it.pts[i + 1])
  }
  /* a stroke has width, and a hairline's box would be too thin to hit */
  const pad = it.width / 2
  return [L - pad, T - pad, R + pad, B + pad]
}
/* the outline sits a little off the item so a handle never covers a corner */
const selBox = (it: Item): Box => {
  const [L, T, R, B] = boxOf(it)
  return [L - 3, T - 3, R + 3, B + 3]
}
const inBox = (b: Box, x: number, y: number, slack = 6) =>
  x >= b[0] - slack && x <= b[2] + slack && y >= b[1] - slack && y <= b[3] + slack

/* corners: 0 top-left, 1 top-right, 2 bottom-right, 3 bottom-left */
const corners = (b: Box): [number, number][] => [
  [b[0], b[1]],
  [b[2], b[1]],
  [b[2], b[3]],
  [b[0], b[3]],
]
const HANDLE = 9
const handleAt = (b: Box, x: number, y: number) =>
  corners(b).findIndex(
    ([hx, hy]) => Math.abs(hx - x) <= HANDLE && Math.abs(hy - y) <= HANDLE,
  )

/** The box round a whole selection. Move and resize work on this rather than
    on each item, so two shapes dragged by a corner keep their arrangement
    instead of each scaling about itself. */
function unionBox(items: Item[], idxs: number[]): Box | null {
  if (!idxs.length) return null
  const bs = idxs
    .map((i) => items[i])
    .filter(Boolean)
    .map(selBox)
  if (!bs.length) return null
  return [
    Math.min(...bs.map((b) => b[0])),
    Math.min(...bs.map((b) => b[1])),
    Math.max(...bs.map((b) => b[2])),
    Math.max(...bs.map((b) => b[3])),
  ]
}

/* TOUCHING, not containing. A marquee that only takes what it fully encloses
   makes you drag round the long tail of every pen stroke to catch it; every
   editor worth copying takes what the band touches. */
const touches = (a: Box, b: Box) =>
  a[0] <= b[2] && a[2] >= b[0] && a[1] <= b[3] && a[3] >= b[1]

const moved = (it: Item, dx: number, dy: number): Item => ({
  ...it,
  pts: it.pts.map((v, i) => v + (i % 2 ? dy : dx)),
})

/** Scale an item so corner `c` of its box `b` lands on the pointer, with the
    opposite corner staying put. Works on the points directly, so a pen
    stroke stretches the same way a box does — and a drag past the fixed
    corner flips it, which is what every editor does and what you would
    expect the maths to do. */
function scaled(it: Item, b: Box, c: number, px: number, py: number): Item {
  const [L, T, R, B] = b
  const fx = c === 1 || c === 2 ? L : R
  const fy = c === 2 || c === 3 ? T : B
  const ox = c === 1 || c === 2 ? R : L
  const oy = c === 2 || c === 3 ? B : T
  const sx = Math.abs(ox - fx) < 1 ? 1 : (px - fx) / (ox - fx)
  const sy = Math.abs(oy - fy) < 1 ? 1 : (py - fy) / (oy - fy)
  return {
    ...it,
    pts: it.pts.map((v, i) => (i % 2 ? fy + (v - fy) * sy : fx + (v - fx) * sx)),
  }
}

function DrawPad({
  selector,
  path,
  onCancel,
  onDone,
}: {
  selector: string
  path: string
  onCancel: () => void
  onDone: (b: Blob) => void
}) {
  const cv = useRef<HTMLCanvasElement | null>(null)
  const key = padKey(path)

  /* ── the drawing, and the way back through it ─────────────────────────
     One state, not two: every operation is "the page of items becomes this
     page of items", so undo and redo are an index and nothing has to know
     what kind of change it is undoing. A clear undoes the same way a stroke
     does, which is the thing a stack of inverse operations gets wrong.

     Restored from the last time this element was drawn on. A pad that forgets
     is a pad you cannot close to go and look at the thing you are drawing. */
  const [past, setPast] = useState<{ hist: Item[][]; at: number }>(() => {
    try {
      const raw = localStorage.getItem(padKey(path))
      const kept = raw ? (JSON.parse(raw) as Item[]) : []
      if (Array.isArray(kept) && kept.length) return { hist: [[], kept], at: 1 }
    } catch {
      /* private windows and blocked site data throw on ACCESS, not on read */
    }
    return { hist: [[]], at: 0 }
  })
  /* memoised for its IDENTITY, not its cost. The `?? []` is a fresh array
     every render, and it feeds both the repaint and the save — so without
     this the pad rewrote local storage on every render rather than on every
     change. */
  const items = useMemo(() => past.hist[past.at] ?? [], [past])

  const commit = useCallback((next: Item[]) => {
    setPast((p) => {
      /* anything redoable is dropped the moment you draw again — a branch you
         cannot see is a branch you cannot choose */
      const hist = [...p.hist.slice(0, p.at + 1), next].slice(-HIST_MAX)
      return { hist, at: hist.length - 1 }
    })
  }, [])
  const undo = useCallback(
    () => setPast((p) => ({ ...p, at: Math.max(0, p.at - 1) })),
    [],
  )
  const redo = useCallback(
    () => setPast((p) => ({ ...p, at: Math.min(p.hist.length - 1, p.at + 1) })),
    [],
  )

  /* the item under the pointer is a REF, not state: a point per pointermove
     through setState is a render per pixel of travel */
  const live = useRef<Item | null>(null)
  /* where the pointer is, for the eraser's footprint — same reasoning */
  const hover = useRef<[number, number] | null>(null)

  /* ── selection ─────────────────────────────────────────────────────────
     WHICH ITEMS are selected — a list, because a marquee catches several and
     because copying one thing at a time is not copying. Indices into `items`,
     which is safe for as long as a selection lives: every edit that reorders
     or removes commits a new list and clears or rewrites the selection in the
     same breath.

     The drag works on COPIES held in a ref and paints those in place of the
     real items; the real list is committed once, on release, so undo sees one
     move rather than four hundred one-pixel ones. */
  const [sel, setSel] = useState<number[]>([])
  const drag = useRef<null | {
    idxs: number[]
    mode: 'move' | 'resize' | 'marquee'
    corner: number
    from: [number, number]
    orig: Item[]
    box: Box
  }>(null)
  const work = useRef<Item[] | null>(null)
  /* the rubber band, while one is being pulled */
  const band = useRef<Box | null>(null)

  /* ── the clipboard ─────────────────────────────────────────────────────
     Kept in storage rather than in a ref, so it outlives the pad: copy a
     legend on one element's sketch, close the pad, open another element's
     and paste it. The system clipboard is not an option — it holds an image
     or text, and what has to survive here is the OBJECTS, with their kinds
     and colours intact. */
  const clip = useRef<Item[]>([])
  const [tool, setTool] = useState<Kind | 'erase' | 'select'>('pen')
  /* Every tool change goes through here so leaving the arrow drops the
     selection in the same breath — an outline left behind would sit there
     while you draw over it. Done at the source rather than by an effect
     watching `tool`, because an effect that sets state is a second render
     to reach a state the first one already knew. */
  const pickTool = useCallback((k: Kind | 'erase' | 'select') => {
    setTool(k)
    if (k !== 'select') setSel([])
  }, [])

  /* BELOW `pickTool`, which `paste` calls: a `const` read before its line
     is a TDZ crash at runtime that neither tsc nor the linter reliably
     catches inside a dependency array. */
  const CLIP_KEY = 'ligma:pad:clip'
  useEffect(() => {
    try {
      const raw = localStorage.getItem(CLIP_KEY)
      const kept = raw ? (JSON.parse(raw) as Item[]) : []
      if (Array.isArray(kept)) clip.current = kept
    } catch {
      /* no clipboard is a working pad, just a duller one */
    }
  }, [])

  /** Put items on the pad's clipboard. Copies are DEEP — `pts` is shared by
      reference otherwise, and pasting then nudging would drag the original
      along with the copy. */
  const putClip = useCallback((take: Item[]) => {
    clip.current = take.map((it) => ({ ...it, pts: [...it.pts] }))
    try {
      localStorage.setItem(CLIP_KEY, JSON.stringify(clip.current))
    } catch {
      /* it still pastes in this pad; it just will not outlive it */
    }
  }, [])

  /** Drop copies on the sheet, offset so they are visibly not the originals,
      and hand them the selection — what you paste is what you are about to
      move. */
  const paste = useCallback(
    (take: Item[], dx = 18, dy = 18) => {
      if (!take.length) return
      const born = take.map((it) => moved({ ...it, pts: [...it.pts] }, dx, dy))
      commit([...items, ...born])
      pickTool('select')
      setSel(born.map((_, n) => items.length + n))
    },
    [items, commit, pickTool],
  )
  /* the shape the flyout last chose — the shapes button selects it again,
     so a box-box-box session is three presses of `s`, not three menus */
  const [shape, setShape] = useState<Kind>('rect')
  const [nib, setNib] = useState(6)
  const [ink, setInk] = useState('')
  const [fill, setFill] = useState(false)
  const [grid, setGrid] = useState(true)
  const [typing, setTyping] = useState<{ x: number; y: number; v: string } | null>(null)

  /* The pad's two colours, read off the element rather than named here, so
     what the paper is and what the default ink is are decided once in the
     stylesheet and cannot drift apart. */
  const skin = useRef({ paper: '#fff', ink: '#111' })

  /* `bare` leaves off everything that is not the drawing — the eraser ring
     and the selection — for the export */
  const paint = useCallback(
    (bare = false) => {
      const c = cv.current
      const g = c?.getContext('2d')
      if (!c || !g) return
      const { paper, ink: fg } = skin.current
      g.fillStyle = paper
      g.fillRect(0, 0, PAD_W, PAD_H)
      if (grid) {
        /* Dots, not lines. A ruled grid competes with what is drawn on it —
         you end up reading the paper — where dots disappear at a glance and
         are still there when you want to line two things up. */
        g.fillStyle = fg
        g.globalAlpha = 0.13
        for (let x = 40; x < PAD_W; x += 40)
          for (let y = 40; y < PAD_H; y += 40) g.fillRect(x - 1, y - 1, 2, 2)
        g.globalAlpha = 1
      }
      g.lineCap = 'round'
      g.lineJoin = 'round'
      /* the items being dragged are painted from their working copies */
      const d = drag.current
      const w = work.current
      const list =
        d && w
          ? items.map((it, i) => {
              const n = d.idxs.indexOf(i)
              return n < 0 ? it : w[n]
            })
          : items
      for (const it of list) drawItem(g, it, paper, fg)
      if (live.current) drawItem(g, live.current, paper, fg)
      if (bare) return
      /* the eraser's footprint: a ring the size of the stroke it would leave,
       drawn last so it sits over everything. It is repainted away on the next
       move, and `attach` clears it before reading the canvas, so it never
       reaches the export. */
      if (tool === 'erase' && hover.current) {
        const [x, y] = hover.current
        g.save()
        g.globalAlpha = 0.5
        g.strokeStyle = fg
        g.lineWidth = 1.5
        g.setLineDash([4, 3])
        g.beginPath()
        g.arc(x, y, (nib * ERASE_X) / 2, 0, Math.PI * 2)
        g.stroke()
        g.restore()
      }
      /* ── the selection ────────────────────────────────────────────────
         A dashed box round the whole of it with handles on the corners,
         and — only when there is more than one — a hairline round each
         member, so you can see WHAT you caught and not just how much.
         One item needs no such hint: its own outline is the box. */
      if (tool === 'select' && sel.length) {
        const b = unionBox(list, sel)
        g.save()
        g.strokeStyle = '#2f7fe0'
        if (b && sel.length > 1) {
          g.globalAlpha = 0.55
          g.lineWidth = 1
          g.setLineDash([3, 3])
          for (const i of sel) {
            const m = list[i] && selBox(list[i])
            if (m) g.strokeRect(m[0], m[1], m[2] - m[0], m[3] - m[1])
          }
          g.globalAlpha = 1
        }
        if (b) {
          g.lineWidth = 1.5
          g.setLineDash([5, 4])
          g.strokeRect(b[0], b[1], b[2] - b[0], b[3] - b[1])
          g.setLineDash([])
          /* a lone text has one point and nothing to scale, so it moves but
             offers nothing to pull. In a group it scales with the rest —
             its point travels, its size does not, which is the honest
             result of scaling a thing that has no width of its own. */
          if (!(sel.length === 1 && list[sel[0]]?.kind === 'text')) {
            g.fillStyle = paper
            for (const [x, y] of corners(b)) {
              g.fillRect(x - HANDLE / 2, y - HANDLE / 2, HANDLE, HANDLE)
              g.strokeRect(x - HANDLE / 2, y - HANDLE / 2, HANDLE, HANDLE)
            }
          }
        }
        g.restore()
      }
      /* the rubber band itself */
      if (band.current) {
        const [x0, y0, x1, y1] = band.current
        g.save()
        g.fillStyle = 'rgba(47, 127, 224, 0.1)'
        g.strokeStyle = '#2f7fe0'
        g.lineWidth = 1
        g.setLineDash([4, 3])
        g.fillRect(x0, y0, x1 - x0, y1 - y0)
        g.strokeRect(x0, y0, x1 - x0, y1 - y0)
        g.restore()
      }
    },
    [items, grid, tool, nib, sel],
  )

  useEffect(() => {
    const c = cv.current
    if (!c) return
    const cs = getComputedStyle(c)
    skin.current = { paper: cs.backgroundColor, ink: cs.color }
    paint()
  }, [paint])

  /* kept on every change, so closing the pad to go and look at the component
     is free */
  useEffect(() => {
    try {
      if (items.length) localStorage.setItem(key, JSON.stringify(items))
      else localStorage.removeItem(key)
    } catch {
      /* nothing to do and nothing worth saying: the drawing is still on screen */
    }
  }, [key, items])

  /* ── keys ──────────────────────────────────────────────────────────────
     Capture phase on the window, which runs before anything the lab has
     bound, because the pad is modal and a page behind a modal must not act on
     a key. `r` selects the box here and must not also do whatever `r` does
     out there.

     Only what it handles is stopped, plus bare character keys — Tab, Enter
     and Space stay free so the toolbar is still operable from the keyboard,
     and a field with focus keeps every key it is given. */
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      const el = e.target as HTMLElement | null
      if (el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA')) return
      const meta = e.metaKey || e.ctrlKey
      const k = e.key.toLowerCase()
      const stop = () => {
        e.preventDefault()
        e.stopImmediatePropagation()
      }
      if (meta && k === 'z') {
        stop()
        if (e.shiftKey) redo()
        else undo()
        return
      }
      if (meta && k === 'y') {
        stop()
        redo()
        return
      }
      /* ── the clipboard and the selection, on the usual keys ──────────
         `items` and `sel` are read straight from the closure, which is
         current because this effect re-binds on both. */
      if (meta && k === 'a') {
        stop()
        pickTool('select')
        setSel(items.map((_, i) => i))
        return
      }
      if (meta && (k === 'c' || k === 'x') && sel.length) {
        stop()
        putClip(sel.map((i) => items[i]))
        if (k === 'x') {
          commit(items.filter((_, i) => !sel.includes(i)))
          setSel([])
        }
        return
      }
      if (meta && k === 'v' && clip.current.length) {
        stop()
        paste(clip.current)
        return
      }
      if (meta && k === 'd' && sel.length) {
        /* duplicate in place: a copy that never touches the clipboard, so
           it does not throw away what you were holding */
        stop()
        paste(sel.map((i) => items[i]))
        return
      }
      if (meta) return
      if (e.key === 'Escape') {
        /* the shape under the pointer, or the selection — not the pad */
        e.stopImmediatePropagation()
        live.current = null
        band.current = null
        setTyping(null)
        setSel([])
        paint()
        return
      }
      if (sel.length && (e.key === 'Delete' || e.key === 'Backspace')) {
        stop()
        commit(items.filter((_, i) => !sel.includes(i)))
        setSel([])
        return
      }
      if (sel.length && e.key.startsWith('Arrow')) {
        /* nudging: a pixel, or ten with shift, the way it works everywhere */
        stop()
        const n = e.shiftKey ? 10 : 1
        const dx = e.key === 'ArrowLeft' ? -n : e.key === 'ArrowRight' ? n : 0
        const dy = e.key === 'ArrowUp' ? -n : e.key === 'ArrowDown' ? n : 0
        commit(items.map((it, i) => (sel.includes(i) ? moved(it, dx, dy) : it)))
        return
      }
      if (e.key.length !== 1 || e.key === ' ') return
      e.stopImmediatePropagation()
      const t = TOOLS.find((x) => x.key === k)
      if (t) {
        pickTool(t.k === 'shape' ? shape : t.k)
        return
      }
      if (e.key === '[') setNib((n) => NIBS[Math.max(0, NIBS.indexOf(n) - 1)])
      else if (e.key === ']')
        setNib((n) => NIBS[Math.min(NIBS.length - 1, NIBS.indexOf(n) + 1)])
      else if (k === 'f') setFill((v) => !v)
      else if (k === 'g') setGrid((v) => !v)
    }
    window.addEventListener('keydown', onKey, true)
    return () => window.removeEventListener('keydown', onKey, true)
  }, [undo, redo, paint, shape, sel, items, commit, pickTool, putClip, paste])

  const at = (e: React.PointerEvent<HTMLCanvasElement>): [number, number] => {
    const r = e.currentTarget.getBoundingClientRect()
    return [
      ((e.clientX - r.left) / r.width) * PAD_W,
      ((e.clientY - r.top) / r.height) * PAD_H,
    ]
  }

  /* Shift constrains, the way it does everywhere else: a box becomes a square,
     an oval a circle, a line one of eight angles. Applied to the SECOND point
     only, so the corner you started from never moves under you. */
  const snap = (x0: number, y0: number, x: number, y: number, kind: Kind) => {
    if (kind === 'line' || kind === 'arrow') {
      const a = Math.round(Math.atan2(y - y0, x - x0) / (Math.PI / 4)) * (Math.PI / 4)
      const d = Math.hypot(x - x0, y - y0)
      return [x0 + d * Math.cos(a), y0 + d * Math.sin(a)]
    }
    const d = Math.max(Math.abs(x - x0), Math.abs(y - y0))
    return [x0 + Math.sign(x - x0) * d, y0 + Math.sign(y - y0) * d]
  }

  const undoable = past.at > 0
  const redoable = past.at < past.hist.length - 1

  /* the cursor says which tool is up before the first press does */
  /* the eraser hides the cursor: its footprint ring IS the cursor */
  const cursor =
    tool === 'text'
      ? 'text'
      : tool === 'erase'
        ? 'none'
        : tool === 'select'
          ? 'default'
          : 'crosshair'

  return createPortal(
    <div className="gl-draw" role="dialog" aria-modal aria-label={`draw on ${selector}`}>
      <div className="gl-draw-app">
        {/* ── title bar ────────────────────────────────────────────────── */}
        <div className="gl-draw-bar">
          <span className="gl-draw-name">
            <Ico k="pen" />
            <b>Draw</b>
            <i>{selector}</i>
          </span>
          <button
            type="button"
            className="gl-draw-x"
            onClick={onCancel}
            title="close the pad"
          >
            <Ico k="close" />
            Close
          </button>
        </div>

        {/* ── the desk: a dark ground with the sheet on it and the islands
            floating over it. Everything that used to be a row of chips is
            now placed where an editor puts it, which is how it reads as one:
            tools top-centre, properties down the left, history bottom-left,
            the way out bottom-right. ── */}
        <div className="gl-draw-desk">
          {/* ── properties, as a COLUMN of the desk rather than an island
              over it. Floating, it sat on the sheet's left edge whenever the
              sheet was height-bound — which on a wide window is always. In
              flow, the stage beside it is exactly the room that is left, and
              the sheet is fitted to that. ── */}
          <div className="gl-draw-side">
            <div className="gl-prop">
              <span className="gl-prop-l">Stroke</span>
              <span className="gl-prop-r gl-draw-inks">
                {INKS.map((c) => (
                  <button
                    key={c || 'ink'}
                    type="button"
                    className={`gl-ink-dot ${ink === c ? 'gl-on' : ''}`}
                    style={c ? ({ '--c': c } as React.CSSProperties) : undefined}
                    onClick={() => {
                      setInk(c)
                      if (tool === 'erase') pickTool('pen')
                    }}
                    title={c || 'default ink'}
                    aria-label={c ? `ink ${c}` : 'default ink'}
                    aria-pressed={ink === c}
                  />
                ))}
              </span>
            </div>
            <div className="gl-prop">
              <span className="gl-prop-l">Width</span>
              <span className="gl-prop-r">
                {NIBS.map((w, n) => (
                  <button
                    key={w}
                    type="button"
                    className={nib === w ? 'gl-on' : ''}
                    onClick={() => setNib(w)}
                    title={`${w}px, eraser ${w * ERASE_X}px — [ and ]`}
                    aria-label={`width ${w}`}
                    aria-pressed={nib === w}
                  >
                    <svg viewBox="0 0 16 16" aria-hidden>
                      <path
                        d="M2 8h12"
                        stroke="currentColor"
                        strokeLinecap="round"
                        strokeWidth={[1.5, 3, 5][n]}
                      />
                    </svg>
                  </button>
                ))}
              </span>
            </div>
            <div className="gl-prop">
              <span className="gl-prop-l">Style</span>
              <span className="gl-prop-r">
                <button
                  type="button"
                  className={!fill ? 'gl-on' : ''}
                  onClick={() => setFill(false)}
                  title="outline — f toggles"
                  aria-label="outline"
                  aria-pressed={!fill}
                >
                  <Ico k="outline" />
                </button>
                <button
                  type="button"
                  className={fill ? 'gl-on' : ''}
                  onClick={() => setFill(true)}
                  title="solid — f toggles"
                  aria-label="solid"
                  aria-pressed={fill}
                >
                  <Ico k="solid" />
                </button>
              </span>
            </div>
            <div className="gl-prop">
              <span className="gl-prop-l">Sheet</span>
              <span className="gl-prop-r">
                <button
                  type="button"
                  className={grid ? 'gl-on' : ''}
                  onClick={() => setGrid((v) => !v)}
                  title="dot grid — g"
                  aria-label="dot grid"
                  aria-pressed={grid}
                >
                  <Ico k="grid" />
                </button>
              </span>
            </div>
          </div>

          <div className="gl-draw-stage">
            <div className="gl-sheet">
              <canvas
                ref={cv}
                className="gl-draw-pad"
                width={PAD_W}
                height={PAD_H}
                style={{ cursor }}
                onPointerDown={(e) => {
                  const [x, y] = at(e)
                  if (tool === 'select') {
                    e.currentTarget.setPointerCapture(e.pointerId)
                    const lone = sel.length === 1 ? items[sel[0]] : null
                    const ub = unionBox(items, sel)
                    /* A handle first — it overlaps the item, and the handle is the
                       thing under the pointer. Not for a lone text, which has nothing
                       to scale and therefore draws none. */
                    if (ub && !(lone && lone.kind === 'text')) {
                      const c = handleAt(ub, x, y)
                      if (c >= 0) {
                        drag.current = {
                          idxs: sel,
                          mode: 'resize',
                          corner: c,
                          from: [x, y],
                          orig: sel.map((i) => items[i]),
                          box: ub,
                        }
                        work.current = sel.map((i) => items[i])
                        return
                      }
                    }
                    /* then the topmost item under the pointer */
                    let hit = -1
                    for (let i = items.length - 1; i >= 0; i--)
                      if (inBox(boxOf(items[i]), x, y)) {
                        hit = i
                        break
                      }
                    if (hit < 0) {
                      /* empty paper: pull a band. Shift keeps what is already held, so
                         a selection can be built up out of several sweeps. */
                      if (!e.shiftKey) setSel([])
                      drag.current = {
                        idxs: [],
                        mode: 'marquee',
                        corner: -1,
                        from: [x, y],
                        orig: [],
                        box: [x, y, x, y],
                      }
                      band.current = [x, y, x, y]
                      paint()
                      return
                    }
                    /* Shift toggles one in or out and starts nothing: adding to a
                       selection and dragging it are different intentions, and doing
                       both on one press moves things you have only just caught. */
                    if (e.shiftKey) {
                      setSel((v) =>
                        v.includes(hit) ? v.filter((i) => i !== hit) : [...v, hit],
                      )
                      return
                    }
                    /* A press inside an existing multi-selection moves the whole of
                       it — the alternative, collapsing to the one under the pointer,
                       is the thing that makes people re-select four times. */
                    const group = sel.includes(hit) ? sel : [hit]
                    if (!sel.includes(hit)) setSel([hit])
                    drag.current = {
                      idxs: group,
                      mode: 'move',
                      corner: -1,
                      from: [x, y],
                      orig: group.map((i) => items[i]),
                      box: unionBox(items, group) ?? boxOf(items[hit]),
                    }
                    work.current = group.map((i) => items[i])
                    return
                  }
                  if (tool === 'text') {
                    /* commit whatever is half-typed before moving the caret, or
                     clicking twice quietly throws the first word away */
                    if (typing?.v.trim())
                      commit([
                        ...items,
                        {
                          kind: 'text',
                          pts: [typing.x, typing.y],
                          color: ink,
                          width: nib,
                          text: typing.v,
                        },
                      ])
                    setTyping({ x, y, v: '' })
                    return
                  }
                  e.currentTarget.setPointerCapture(e.pointerId)
                  const kind: Kind = tool === 'erase' ? 'pen' : tool
                  live.current = {
                    kind,
                    pts: kind === 'pen' ? [x, y] : [x, y, x, y],
                    color: ink,
                    width: tool === 'erase' ? nib * ERASE_X : nib,
                    ...(tool === 'erase' && { erase: true }),
                    ...(fill && { fill: true }),
                  }
                  paint()
                }}
                onPointerMove={(e) => {
                  const [x, y] = at(e)
                  if (tool === 'select') {
                    const d = drag.current
                    if (d) {
                      if (d.mode === 'marquee') {
                        band.current = [d.from[0], d.from[1], x, y]
                        paint()
                        return
                      }
                      /* every item against the SAME box, so a group keeps its
                         arrangement instead of each member scaling about itself */
                      work.current = d.orig.map((it) =>
                        d.mode === 'move'
                          ? moved(it, x - d.from[0], y - d.from[1])
                          : scaled(it, d.box, d.corner, x, y),
                      )
                      paint()
                      return
                    }
                    /* idle: the cursor says what a press here would do. Set on the
                       element directly — a state change per pointer move would be a
                       render per pixel, and React only rewrites the style when the
                       prop it knows about changes, so this survives re-renders. */
                    let cur = 'default'
                    const lone = sel.length === 1 ? items[sel[0]] : null
                    const ub = unionBox(items, sel)
                    if (ub && !(lone && lone.kind === 'text')) {
                      const c = handleAt(ub, x, y)
                      if (c >= 0) cur = c % 2 ? 'nesw-resize' : 'nwse-resize'
                    }
                    if (cur === 'default')
                      for (let i = items.length - 1; i >= 0; i--)
                        if (inBox(boxOf(items[i]), x, y)) {
                          cur = 'move'
                          break
                        }
                    e.currentTarget.style.cursor = cur
                    return
                  }
                  if (tool === 'erase') hover.current = [x, y]
                  const it = live.current
                  if (!it) {
                    if (tool === 'erase') paint()
                    return
                  }
                  if (it.kind === 'pen') it.pts.push(x, y)
                  else {
                    const [nx, ny] = e.shiftKey
                      ? snap(it.pts[0], it.pts[1], x, y, it.kind)
                      : [x, y]
                    it.pts[2] = nx
                    it.pts[3] = ny
                  }
                  paint()
                }}
                onPointerUp={() => {
                  const d = drag.current
                  if (d) {
                    drag.current = null
                    const w = work.current
                    work.current = null
                    if (d.mode === 'marquee') {
                      const b = band.current
                      band.current = null
                      if (b) {
                        const box: Box = [
                          Math.min(b[0], b[2]),
                          Math.min(b[1], b[3]),
                          Math.max(b[0], b[2]),
                          Math.max(b[1], b[3]),
                        ]
                        /* a band with no size is a click on empty paper, which has
                           already cleared the selection — catching everything that
                           touches a zero-width box would select the lot */
                        const real = box[2] - box[0] > 2 || box[3] - box[1] > 2
                        const caught = real
                          ? items
                              .map((_, i) => i)
                              .filter((i) => touches(box, boxOf(items[i])))
                          : []
                        setSel((v) => [...new Set([...v, ...caught])])
                      }
                      paint()
                      return
                    }
                    /* a click that selected without moving is not a change to record */
                    const changed =
                      !!w &&
                      w.some((it, n) => it.pts.some((v, i) => v !== d.orig[n].pts[i]))
                    if (w && changed)
                      commit(
                        items.map((it, i) => {
                          const n = d.idxs.indexOf(i)
                          return n < 0 ? it : w[n]
                        }),
                      )
                    else paint()
                    return
                  }
                  const it = live.current
                  live.current = null
                  if (!it) return
                  /* a click that never moved is a shape with no size — a stray
                   press while reaching for a tool, not something drawn */
                  const empty =
                    it.kind !== 'pen' &&
                    Math.hypot(it.pts[2] - it.pts[0], it.pts[3] - it.pts[1]) < 4
                  if (empty) paint()
                  else {
                    commit([...items, it])
                    /* A shape is drawn and then adjusted, so it comes up selected with the
                       arrow ready — the flow of every editor. Pen, line, arrow and eraser
                       stay put: those are the tools you use several times in a row, and
                       handing you the arrow after each stroke would cost a key per stroke. */
                    if (SHAPE_KINDS.has(it.kind)) {
                      pickTool('select')
                      setSel([items.length])
                    }
                  }
                }}
                onPointerCancel={() => {
                  live.current = null
                  drag.current = null
                  work.current = null
                  band.current = null
                  paint()
                }}
                onPointerLeave={() => {
                  hover.current = null
                  paint()
                }}
              />
              {typing && (
                <input
                  className="gl-pad-text"
                  autoFocus
                  value={typing.v}
                  style={{
                    left: `${(typing.x / PAD_W) * 100}%`,
                    top: `${(typing.y / PAD_H) * 100}%`,
                    color: ink || undefined,
                    fontSize: `${((TYPE_AT[String(nib)] ?? 33) / PAD_W) * 100}cqw`,
                  }}
                  onChange={(e) => setTyping({ ...typing, v: e.target.value })}
                  onKeyDown={(e) => {
                    if (e.key === 'Escape') setTyping(null)
                    if (e.key !== 'Enter') return
                    e.preventDefault()
                    e.currentTarget.blur()
                  }}
                  onBlur={() => {
                    if (typing.v.trim()) {
                      commit([
                        ...items,
                        {
                          kind: 'text',
                          pts: [typing.x, typing.y],
                          color: ink,
                          width: nib,
                          text: typing.v,
                        },
                      ])
                      pickTool('select')
                      setSel([items.length])
                    }
                    setTyping(null)
                  }}
                  placeholder="type, then enter"
                  aria-label="text to place on the drawing"
                />
              )}
            </div>

            {/* ── tools, top centre. Icons with the key printed in the corner,
              the way every editor does it, because a shortcut you can see
              is a shortcut you learn. ── */}
            <div className="gl-isle gl-isle-tools" role="toolbar" aria-label="tools">
              {TOOLS.map((t) =>
                t.k === 'shape' ? (
                  /* ── the shapes button ─────────────────────────────────
                    One slot for eight shapes. The button shows whichever
                    shape was last chosen and selects it again; hovering or
                    focusing it opens the rest underneath. The menu is on
                    `:hover` and `:focus-within` in the stylesheet rather than
                    in state, which is what makes it survive the pointer
                    crossing the gap to reach it. */
                  <span key="shape" className="gl-fly">
                    <button
                      type="button"
                      className={SHAPE_KINDS.has(tool as Kind) ? 'gl-on' : ''}
                      onClick={() => pickTool(shape)}
                      title={`shapes — ${t.key}`}
                      aria-label="shapes"
                      aria-haspopup="menu"
                      aria-pressed={SHAPE_KINDS.has(tool as Kind)}
                    >
                      <Ico k={shape} />
                      <kbd>{t.key}</kbd>
                      <i className="gl-fly-mark" aria-hidden />
                    </button>
                    <div className="gl-fly-menu" role="menu" aria-label="shapes">
                      {SHAPES.map((sh) => (
                        <button
                          key={sh.k}
                          type="button"
                          role="menuitemradio"
                          className={tool === sh.k ? 'gl-on' : ''}
                          onClick={() => {
                            setShape(sh.k)
                            pickTool(sh.k)
                          }}
                          title={sh.label}
                          aria-label={sh.label}
                          aria-checked={tool === sh.k}
                        >
                          <Ico k={sh.k} />
                        </button>
                      ))}
                    </div>
                  </span>
                ) : (
                  <button
                    key={t.k}
                    type="button"
                    className={tool === t.k ? 'gl-on' : ''}
                    /* `shape` is the other branch of this ternary; TS does not narrow a
                       property access across it */
                    onClick={() => pickTool(t.k as Kind | 'erase' | 'select')}
                    title={`${t.label} — ${t.key}`}
                    aria-label={t.label}
                    aria-pressed={tool === t.k}
                  >
                    <Ico k={t.k} />
                    <kbd>{t.key}</kbd>
                  </button>
                ),
              )}
            </div>

            {/* ── history, bottom left ── */}
            <div className="gl-isle gl-isle-hist">
              <button
                type="button"
                onClick={undo}
                disabled={!undoable}
                title="undo — ⌘Z"
                aria-label="undo"
              >
                <Ico k="undo" />
              </button>
              <button
                type="button"
                onClick={redo}
                disabled={!redoable}
                title="redo — ⌘⇧Z"
                aria-label="redo"
              >
                <Ico k="redo" />
              </button>
              <span className="gl-isle-gap" aria-hidden />
              <button
                type="button"
                onClick={() => commit([])}
                disabled={!items.length}
                title="clear the sheet"
                aria-label="clear the sheet"
              >
                <Ico k="trash" />
              </button>
            </div>

            {/* ── the way out, bottom right ── */}
            <div className="gl-isle gl-isle-go">
              <span className="gl-draw-tip">
                {items.length
                  ? `${items.length} object${items.length === 1 ? '' : 's'}`
                  : 'nothing drawn yet'}
                <em>
                  {tool === 'select'
                    ? sel.length
                      ? ` · ${sel.length} selected · ⌘C ⌘V ⌘D · ⌫ removes`
                      : ' · drag a band to select · ⇧ adds · ⌘A all'
                    : ' · ⇧ constrain · ⌘Z'}
                </em>
              </span>
              <button
                type="button"
                className="gl-var-use"
                disabled={!items.length}
                onClick={() => {
                  /* the drawing alone — no eraser ring, no selection box */
                  paint(true)
                  cv.current?.toBlob((b) => b && onDone(b), 'image/png')
                }}
              >
                Attach drawing
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>,
    document.body,
  )
}

function Pins({
  threads,
  variants,
  showing,
  scrub,
  open,
  route,
  compose,
  quiet,
  wake,
}: {
  /** put the pins back and open this thread — what a quiet marker does */
  wake: (id: string) => void
  /**
   * Hiding the pins hides what you asked for. It must not hide what is
   * HAPPENING: an agent editing the page under you is the one thing you
   * cannot infer from looking at it, and a change arriving with no warning
   * that anything was running is the failure this whole tool is against.
   *
   * So with the pins off, threads being worked keep a bare marker — no
   * number, no bubble, no hit area worth speaking of. Clicking one brings
   * the pins back and opens it, because the only reason to reach for a dot
   * that small is to ask what it is.
   */
  quiet: boolean
  /** every component picked and not yet said anything about — one box each */
  compose: Target[]
  threads: Thread[]
  /** every set; each thread shows only the ones asked for on it */
  variants: VariantSet[]
  showing: Record<string, string[]>
  /** where each thread's scrubber is parked, or null for live */
  scrub: Record<string, number | null>
  open: string | null
  route: string
}) {
  const [box, setBox] = useState<
    Record<
      string,
      { top: number; left: number; w: number; h: number; at: Side; light: boolean }
    >
  >({})
  /* The side each bubble opened on, kept OUTSIDE the state it is stored in.

     `place()` runs on every push from the watcher — ten a second — and it used
     to decide the side afresh each time from where the element was on screen
     AT THAT MOMENT. So scrolling past an open bubble made it hop from below
     its pin to above it and back, over and over, which reads exactly as the
     bubble travelling with the screen. Reported as: "the ligma picker is
     moving when i scroll... make sure it doesnt move unless its dragged."

     The position itself must keep being re-measured — that is what keeps the
     pin on a component whose size changed under a live variant. The SIDE must
     not: it is a decision taken once, when the bubble first appears, and the
     only thing allowed to move a bubble after that is a drag. */
  const side = useRef<Record<string, Side>>({})
  /* One draft per box, keyed by the thing it is about. A single string here
     meant every open composer showed the same half-typed line and sending one
     emptied the rest. */
  /* ── dragging a bubble out of the way ──────────────────────────────────
     A bubble opens on its element, which is exactly where the thing you are
     talking about is — so it covers it. Every position rule here is a guess
     about which side has room, and the person looking at the page knows
     better than the guess does.

     An offset per bubble, applied as a `translate` on top of whatever the
     flip logic chose, so dragging composes with it rather than replacing it.
     Local and unsaved: where you shoved a bubble to see behind it is not a
     fact about the design. Double-click the header to put it back. */
  const [drag, setDrag] = useState<Record<string, { x: number; y: number }>>({})
  const from = useRef<{
    key: string
    x: number
    y: number
    ox: number
    oy: number
  } | null>(null)

  const grab = (key: string) => (e: React.PointerEvent) => {
    /* the header carries the resolve and dismiss buttons; a press on one of
       those is a click, not the start of a drag */
    if ((e.target as HTMLElement).closest('button, input, a')) return
    const o = drag[key] ?? { x: 0, y: 0 }
    from.current = { key, x: e.clientX, y: e.clientY, ox: o.x, oy: o.y }
    e.currentTarget.setPointerCapture(e.pointerId)
    e.preventDefault()
  }
  const haul = (e: React.PointerEvent) => {
    const d = from.current
    if (!d) return
    setDrag((s) => ({
      ...s,
      [d.key]: { x: d.ox + e.clientX - d.x, y: d.oy + e.clientY - d.y },
    }))
  }
  const drop = () => {
    from.current = null
  }
  /* One path for every way of sending a composer: the button, Enter, and a
     preset. `text` is what a preset passes — it REPLACES the draft rather
     than joining it, because a preset is a whole instruction and not a
     phrase to build one out of. Anything pasted comes along, since an image
     is context for whatever is being asked. */
  const send = (c: Target, text?: string) => {
    openThreadOn(c, text ?? fresh[c.path] ?? '', route, pics[c.path] ?? [])
    setFresh((f) => ({ ...f, [c.path]: '' }))
    setPics((s) => ({ ...s, [c.path]: [] }))
  }

  /** what a dragged bubble needs on top of its placement */
  const shove = (key: string) => {
    const d = drag[key]
    return d ? { translate: `${d.x}px ${d.y}px` } : undefined
  }

  /* which thread has been asked to go, waiting on the second click. Removing
     a thread throws away a conversation and a pin at once, and a single ✕ next
     to `send` is the easiest thing in this panel to hit by accident. */
  const [axe, setAxe] = useState<string | null>(null)

  const [draft, setDraft] = useState<Record<string, string>>({})
  const [fresh, setFresh] = useState<Record<string, string>>({})
  /* Every box on this layer, by the key its draft is kept under — the
     composer by path, a reply by thread id. A preset fills the box and hands
     the caret back, and the grower below needs to reach them after a change
     that did not come from typing. */
  const boxes = useRef<Record<string, HTMLTextAreaElement | null>>({})

  /* ── the box grows with what is in it ─────────────────────────────────
     These were single-line `<input>`s, so anything longer than the bubble
     scrolled sideways out of view — and a preset drops a whole sentence in at
     once, which made the thing you were about to send the thing you could not
     read. A textarea that sizes to its content, capped so a long note cannot
     push the send button off the bottom of the bubble.

     Enter still sends and shift+enter is the newline, which is the habit the
     panel's own note field already set. */
  const grow = (el: HTMLTextAreaElement | null) => {
    if (!el) return
    el.style.height = 'auto'
    el.style.height = `${Math.min(el.scrollHeight, 108)}px`
  }
  /* a change that did not come from a keystroke — a preset, or a send that
     empties the box — still has to resize it */
  useEffect(() => {
    for (const el of Object.values(boxes.current)) grow(el)
  }, [fresh, draft, compose])

  /* ── pasted screenshots, per box ───────────────────────────────────────
     The panel's note field has taken a pasted image for a while; the bubbles
     are where the pointing actually happens now, and "this, but not like
     this" with a screenshot attached is most of what anyone wants to say
     about a component.

     Uploaded on PASTE rather than on send, so the thumbnail appears under the
     field and you know it took — and by the time enter is pressed the message
     already carries paths rather than blobs. Keyed like the drafts, because
     several boxes are open at once and an image belongs to one of them. */
  const [pics, setPics] = useState<Record<string, string[]>>({})
  const [busy, setBusy] = useState<Record<string, number>>({})
  /* which composer has the pad open, by path — one at a time, because it is
     a modal and two would be a stack nobody asked for */
  const [draw, setDraw] = useState<string | null>(null)

  /* ── what the off switch needs to know ────────────────────────────────
     Which composers have a sentence in them. The drafts stay local — several
     boxes are open at once and a half-typed line belongs to one of them — so
     this reports only the yes/no up to the store, where `clearIdlePending`
     can use it to throw away the abandoned boxes and keep the rest.

     Threads are not included on purpose: a thread is already on disk. This is
     about boxes that have never been anywhere. */
  useEffect(() => {
    for (const c of compose) {
      const has = !!(fresh[c.path] ?? '').trim() || !!(pics[c.path] ?? []).length
      markComposer(c.path, has)
    }
  }, [compose, fresh, pics])

  const grabPics = (key: string) => (e: React.ClipboardEvent) => {
    const files = Array.from(e.clipboardData.files).filter((f) =>
      f.type.startsWith('image/'),
    )
    if (!files.length) return
    e.preventDefault()
    setBusy((b) => ({ ...b, [key]: (b[key] ?? 0) + files.length }))
    void Promise.all(files.map(putShot)).then((paths) => {
      const kept = paths.filter((x): x is string => !!x)
      if (kept.length) setPics((s) => ({ ...s, [key]: [...(s[key] ?? []), ...kept] }))
      setBusy((b) => ({ ...b, [key]: Math.max(0, (b[key] ?? 0) - files.length) }))
    })
  }

  /* ── the history scrubber ──────────────────────────────────────────────
     Shown in the thread bubble AND in a composer opened on an element that
     already has a past. A plain function rather than a nested component, for
     the reason `tray` is one: a component declared inside another remounts on
     every render of the parent, and a slider that remounts mid-drag stops
     following the pointer.

     Only drawn when there is more than one moment, because a slider with a
     single stop cannot do anything. */
  const trailBar = (t: Thread) => {
    const trail = t.trail ?? []
    if (trail.length < 2) return null
    const at = scrub[t.id]
    const back = at == null ? 0 : trail.length - 1 - at
    return (
      <div className="gl-trail">
        <div className="gl-trail-top">
          <span>history</span>
          <b>{back <= 0 ? 'now' : `${back} change${back === 1 ? '' : 's'} back`}</b>
        </div>
        <input
          type="range"
          min={0}
          max={trail.length - 1}
          step={1}
          value={at ?? trail.length - 1}
          onChange={(e) => {
            const i = Number(e.target.value)
            /* the last stop is LIVE and is stored as null rather than as an
               index — an index would keep emitting a rule pinning the element
               to a snapshot of itself, and the page would stop reacting to
               whatever an agent did next */
            scrubTo(t.id, i >= trail.length - 1 ? null : i)
          }}
          aria-label={`history of ${t.selector}`}
        />
        {/* ── undo ──────────────────────────────────────────────────────
            Only once you are actually standing somewhere in the past: at
            the live end there is nothing to go back to, and a permanently
            visible `undo` that does nothing most of the time is a button
            you learn to ignore.

            The quiet chip, not the filled one. It does not write a file —
            it asks for one to be written — and the filled treatment is one
            control per surface, which here is already `send`. */}
        {back > 0 && (
          <button
            type="button"
            className="gl-trail-do"
            onClick={() => undoTo(t.id, at ?? 0)}
            title={`ask for ${t.selector} to be put back to this moment`}
          >
            undo to here
          </button>
        )}
      </div>
    )
  }

  /* ── an element's past, for a composer opened on it ────────────────────
     The trail lives on a thread, and a FINISHED thread is not drawn at all —
     so the history of every element an agent has actually changed was on disk
     and unreachable, which is precisely the history worth having. A composer
     opened on that element finds it by path, whatever became of the thread.

     Newest wins: an element commented on twice has two threads, and the later
     one holds the more recent moments. */
  const pastOf = (path: string) =>
    threads.filter((t) => t.path === path && (t.trail?.length ?? 0) > 1).at(-1)

  /* the thumbnails under a box, and the "attaching…" line while they upload.
     A plain function rather than a nested component: one declared inside
     another remounts on every render of the parent, which for a list of
     <img> means re-decoding them on every keystroke. */
  const tray = (k: string) => {
    const mine = pics[k] ?? []
    const n = busy[k] ?? 0
    if (!mine.length && !n) return null
    return (
      <div className="gl-att">
        {n > 0 && <span className="gl-att-n">attaching {n}…</span>}
        <div className="gl-shots gl-shots-sm">
          {mine.map((path) => (
            <span key={path} className="gl-shot">
              <img src={shotUrl(path)} alt="" />
              <button
                type="button"
                className="gl-shot-x"
                title="remove"
                onClick={() =>
                  setPics((s) => ({ ...s, [k]: (s[k] ?? []).filter((x) => x !== path) }))
                }
              >
                ×
              </button>
            </span>
          ))}
        </div>
      </div>
    )
  }

  /* Everything unfinished, in both modes.

     Quiet used to keep only `working`, which meant the mark appeared when an
     AGENT got to the thread rather than when you sent it — a gap of seconds
     at best and minutes at worst, and in that gap nothing on the page said
     your note had landed anywhere. What is unfinished is the honest set;
     whether anyone is on it yet is said by the mark MOVING, below. */
  const here = threads.filter((t) => t.route === route && t.status !== 'done')

  /* ── an undecided set plays itself ────────────────────────────────────
     Five treatments only help if they are SEEN, and a row of chips asks you
     to do the seeing — click, look, click, look, hold the last one in your
     head. So a set nobody has touched cycles on its own: original, then each
     option, then round again, every 3.69 seconds, with the element easing
     between them (the transition is injected by `variantCss`).

     THE FIRST CLICK STOPS IT, for that set and for good. The loop exists to
     show you the options; the moment you are steering, a timer moving the
     page under you is the opposite of help. `steered` is STATE rather than a
     ref: taking the wheel has to tear the timer down, and a ref would not
     re-run the effect that owns it — which is the same reason the hooks lint
     refuses to let it be read during render.

     Decided sets and sets on threads not on this route are skipped, so this
     is only ever running for something you can actually see. */
  const [steered, setSteered] = useState<Record<string, true>>({})

  /* ── a composer over the component hushes its set ─────────────────────
     A composer means you are WRITING ABOUT that component, and two things
     follow. The page must stop changing under you — a treatment swapping
     mid-sentence is the page arguing with the note. And what you are
     describing has to be the real design: a note that says "make this
     bigger" written while the set happens to be showing `bigger names` is a
     note about something nobody chose, and it goes to an agent as though it
     were about the page.

     So the set stops AND drops back to the original. Only for sets that were
     cycling on their own — a treatment you steered to yourself is a choice,
     and throwing it away because you then went to comment on it would be the
     tool overruling you. */
  const composedOn = new Set(compose.map((c) => c.path))
  const hushed = variants
    .filter((v) => v.chosen === null && !steered[v.id])
    .filter((v) => {
      const t = here.find((x) => x.id === v.thread)
      return !!t && composedOn.has(t.path)
    })
    .map((v) => v.id)
    .join(',')

  useEffect(() => {
    if (!hushed) return
    for (const id of hushed.split(',')) showVariant(id, '')
  }, [hushed])

  const playable = variants
    .filter((v) => v.chosen === null && !steered[v.id])
    /* ── AN OPEN BUBBLE STOPS ITS OWN SET ──────────────────────────────
       The loop is for when you are NOT looking at the chips: it shows you
       five treatments you would otherwise have to click through one at a
       time. Open the bubble and that job is done — you are there to choose,
       the chips are in front of you, and a timer changing the component
       every few seconds while you compare is the tool talking over you.

       It resumes if you close the bubble without picking, because then
       nobody is looking again and the loop is back to being useful. Only a
       CHOICE stops a set for good. */
    .filter((v) => v.thread !== open)
    .filter((v) => {
      const t = here.find((x) => x.id === v.thread)
      return !!t && !composedOn.has(t.path)
    })
  const playing = playable.map((v) => v.id).join(',')

  useEffect(() => {
    if (!playing) return
    const ids = playing.split(',')
    const timers = ids.map((id) => {
      const v = variants.find((x) => x.id === id)
      if (!v) return 0
      /* the original is one of the stops, because a treatment only means
         anything against what is already there */
      const stops = ['', ...v.options.map((o) => o.key)]
      let at = 0
      return window.setInterval(() => {
        at = (at + 1) % stops.length
        showVariant(id, stops[at])
      }, 3690)
    })
    return () => timers.forEach((t) => t && clearInterval(t))
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [playing])

  /** a chip click takes the wheel: this set stops cycling */
  const steer = (setId: string, key: string) => {
    setSteered((was) => ({ ...was, [setId]: true }))
    showVariant(setId, key)
  }

  useEffect(() => {
    /** measure everything, and report which elements were found */
    const place = (): Element[] => {
      const next: Record<
        string,
        { top: number; left: number; w: number; h: number; at: Side; light: boolean }
      > = {}
      /* the composer is placed by the same rule as a pin, so a new thread does
         not jump when it becomes one */
      /* Finished threads whose element has a composer on it are measured too
         — not to draw anything, but so their trail keeps growing while you
         are looking at it. Without this the history stops at the moment the
         thread was closed, which is the moment the agent's change landed. */
      const revisit = compose
        .map((c) => pastOf(c.path))
        .filter((t): t is Thread => !!t && !here.some((h) => h.id === t.id))
      const all = [
        ...here,
        ...revisit,
        ...compose.map((c) => ({ id: `::new:${c.path}`, path: c.path }) as Thread),
      ]
      /* the elements found this pass, so the observer below can watch the
         ones that actually matter rather than the whole document */
      const found: Element[] = []
      for (const t of all) {
        let el: Element | null = null
        try {
          el = document.querySelector(t.path)
        } catch {
          /* a path that no longer parses is the same as one that misses */
        }
        if (!el) continue
        found.push(el)
        /* ── the element's own history ──────────────────────────────────
           Recorded here because this is the one place that already holds
           both the thread and its live element, and it re-runs whenever
           anything moves — including after an agent's edit reaches the
           browser, which is the moment worth catching.

           Only the page's OWN truth: skipped while a preview is showing or a
           scrubber is parked in the past, or the history would fill up with
           states the design never actually had. `noteTrail` writes nothing
           when the read is unchanged, which is almost always. */
        const previewing = variants.some(
          (v) => v.thread === t.id && v.chosen === null && showing[v.id]?.length,
        )
        if (!previewing && scrub[t.id] == null && !t.id.startsWith('::new:')) {
          noteTrail(t.id, snapOf(el))
        }
        const r = el.getBoundingClientRect()
        /* ── where the pin goes ────────────────────────────────────────────
           The element's TOP-left corner, not its bottom-left. On a short
           element there is nothing in it; on a tall one — a card the height
           of the screen — the bottom edge is below the fold, so the pin and
           everything hanging off it went with it. The top corner is where
           the element announces itself, and it is the convention every tool
           that does this uses.

           ── and which way the bubble opens ──────────────────────────────
           OUTSIDE THE ELEMENT'S BOX, on whichever side has the most room on
           screen. It used to open down-and-right from this corner and flip
           only to stay on screen — and since the corner is the element's own
           top-left, that put the bubble INSIDE anything bigger than it. You
           picked a headline and the box landed on the headline.

           Measured here rather than in a scroll handler on purpose — the
           whole pin layer is positioned in DOCUMENT space so it needs no
           scroll listener at all. */
        /* decided once, on the pass that first places this bubble — see the
           note on `side`. Re-deciding here is what made bubbles hop on scroll. */
        const gaps: [Side, number][] = [
          ['right', window.innerWidth - r.right - BUBBLE_W],
          ['left', r.left - BUBBLE_W],
          ['down', window.innerHeight - r.bottom - BUBBLE_H],
          ['up', r.top - BUBBLE_H],
        ]
        const room = gaps.filter(([, px]) => px >= GUTTER).sort((a, b) => b[1] - a[1])
        const face = side.current[t.id] ?? room[0]?.[0] ?? 'over'
        side.current[t.id] = face
        next[t.id] = {
          top: r.top + window.scrollY,
          left: r.left + window.scrollX,
          /* what is painted under this component, so the work-in-progress
             field can be the opposite of it rather than the opposite of the
             page theme — a white pill in an ember band is a light ground in a
             dark-ish one */
          light: groundIsLight(el),
          /* the element's own box — the work-in-progress outline is drawn at
             this size, and the CSS places the bubble off the far edge of it */
          w: r.width,
          h: r.height,
          at: face,
        }
      }
      /* a bubble that is gone forgets its side, so a thread picked up again
         later is placed against the screen it is picked up ON */
      for (const k of Object.keys(side.current)) if (!(k in next)) delete side.current[k]
      setBox(next)
      return found
    }

    /* ── keeping the box on the component ──────────────────────────────────
       The outline is drawn at the element's measured size, so a stale
       measurement is a box that no longer fits — reported as the mark sitting
       off the card by a centimetre.

       `document.body` alone could not see it. A body observer fires when the
       BODY's box changes, and an element resizing inside a page that is
       already taller than the screen changes nothing about the body — which
       is exactly what a live variant does: it rewrites the stylesheet, the
       card changes size, the body does not, and the mark keeps the old one.

       So each anchored element is observed as well. Re-subscribed on every
       pass because the set of elements changes with the threads, and cheap
       either way: it is one observer over a handful of nodes. */
    const watched = new Set<Element>()
    const sync = () => {
      for (const el of place()) {
        /* `observe` on a node already observed is a no-op, but the set keeps
           the callback from re-entering the observer on every single frame of
           a transition, which is where a ResizeObserver loop comes from */
        if (watched.has(el)) continue
        watched.add(el)
        ro.observe(el)
      }
    }
    const ro = new ResizeObserver(sync)
    ro.observe(document.body)
    sync()
    const onResize = () => void place()
    window.addEventListener('resize', onResize)
    /* A theme switch repaints the page, so the ground under every pin can
       flip from light to dark without a single box changing size. Nothing
       else here would notice: the observers watch geometry. */
    const theme = new MutationObserver(() => void place())
    theme.observe(document.documentElement, { attributeFilter: ['data-theme'] })
    return () => {
      ro.disconnect()
      theme.disconnect()
      window.removeEventListener('resize', onResize)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [threads, route, compose, open, variants, showing, scrub])

  /* `data-lenis-prevent` — a page running Lenis (the lottery landing does)
     hands every wheel event to one interpolated page scroll, including the ones
     aimed at this overlay. Lenis skips anything under an element carrying this
     attribute, and it checks ANCESTORS, so putting it on the roots covers every
     scroller inside them: the note list, the three panes in a bubble, the
     message history. Harmless where Lenis is not installed — it is an unread
     data attribute.

     This is a plain block comment and not a JSX one, deliberately:
     `createPortal(` takes an expression, and a JSX comment in argument position
     is a block containing a comment, which is not an expression. (Writing the
     JSX comment form inside a block comment does not work either — the comment
     close sequence inside it ends the block early, which is how this was
     discovered.) */
  return createPortal(
    <div className="gl-pins" data-lenis-prevent>
      {/* One composer per component picked and not yet answered. The picker
          suspends while any of these is open — see `composing` in `Lab` — so
          the page stops being hunted while you answer the box, and re-arms
          the moment you send it or dismiss it. */}
      {compose.map((c, n) => {
        const at = box[`::new:${c.path}`]
        if (!at) return null
        return (
          <div
            key={c.path}
            className={`gl-pin-at is-on at-${at.at}`}
            style={
              {
                top: `${at.top}px`,
                left: `${at.left}px`,
                '--gl-w': `${at.w}px`,
                '--gl-h': `${at.h}px`,
              } as React.CSSProperties
            }
          >
            {/* ── which component this box is about ──────────────────────
                The bubble opens ON the element, which means it covers it —
                so without this there is nothing on screen saying WHICH thing
                you just picked, and a composer opened on the wrong element
                is the exact mistake this tool exists to prevent. You find out
                when the agent changes the wrong component.

                Same geometry as the work-in-progress outline and deliberately
                a quieter version of it: dashed and unfilled rather than the
                solid ring, because "you picked this" and "an agent is
                changing this" must not look the same at a glance. */}
            <span
              className={`gl-busy-box is-pick ${at.light ? 'on-light' : ''}`}
              style={{ width: `${at.w}px`, height: `${at.h}px` }}
              aria-hidden
            />
            <span className="gl-pin is-new">+</span>
            <div className="gl-thread" style={shove(c.path)}>
              <div
                className="gl-thread-top"
                onPointerDown={grab(c.path)}
                onPointerMove={haul}
                onPointerUp={drop}
                onDoubleClick={() => setDrag((s) => ({ ...s, [c.path]: { x: 0, y: 0 } }))}
              >
                <b>{c.sel}</b>
                {c.label && <span className="gl-said">“{c.label.slice(0, 30)}”</span>}
                <span className="gl-dim">
                  {c.shared > 1 ? `${c.shared} share this` : 'new thread'}
                </span>
                {/* a picked component you decide against has to have a way
                    out that is not "type something and resolve it" */}
                {/* the glyph is drawn in CSS — see `.gl-thread-x`. A typed
                    `×` is a multiplication sign and reads as a smudge at this
                    size, so the button carries its label rather than a
                    character. */}
                <button
                  type="button"
                  className="gl-thread-x"
                  onClick={() => dropPending(c.path)}
                  title="not this one — discard this composer"
                  aria-label="discard this composer"
                />
              </div>
              {tray(c.path)}
              {(() => {
                const past = pastOf(c.path)
                return past ? trailBar(past) : null
              })()}
              <div className="gl-asks">
                {ASKS.map((a) => (
                  <button
                    key={a.key}
                    type="button"
                    onClick={() => send(c, a.text)}
                    title={a.hint}
                  >
                    {a.label}
                  </button>
                ))}
              </div>
              <form
                className="gl-thread-say"
                onSubmit={(e) => {
                  e.preventDefault()
                  send(c)
                }}
              >
                <textarea
                  ref={(el) => {
                    boxes.current[c.path] = el
                  }}
                  rows={1}
                  /* only the newest one takes the caret: focusing every box
                     as it appears would yank it out of whatever you were
                     already typing into */
                  autoFocus={n === compose.length - 1}
                  value={fresh[c.path] ?? ''}
                  onChange={(e) => {
                    setFresh((f) => ({ ...f, [c.path]: e.target.value }))
                    grow(e.currentTarget)
                  }}
                  onPaste={grabPics(c.path)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' && !e.shiftKey) {
                      e.preventDefault()
                      send(c)
                    }
                  }}
                  placeholder="what about this component? ⌘V a shot"
                  aria-label={`start a thread on ${c.sel}`}
                />
                {/* ── draw ─────────────────────────────────────────────
                    On the action row rather than up with the presets: those
                    each SEND a sentence on click, and a control that opens a
                    surface instead would be the one chip in that row that
                    does not do what the others do.

                    A LABELLED CHIP, not a bare glyph. It was a naked pencil
                    wedged between the field and the send, which read as
                    something left behind rather than something to press —
                    and a pencil is not a word: it could as easily mean edit,
                    annotate or rename. */}
                <button
                  type="button"
                  className="gl-draw-open"
                  onClick={() => setDraw(c.path)}
                  title="sketch what you mean — it attaches to this message"
                >
                  <svg viewBox="0 0 16 16" aria-hidden>
                    <path
                      d="M2 14l1-3.2L10.4 3.4a1.4 1.4 0 012 2L5 12.8 2 14z"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="1.4"
                      strokeLinejoin="round"
                    />
                  </svg>
                  draw
                </button>
                <button
                  type="submit"
                  disabled={!(fresh[c.path] ?? '').trim() && !(pics[c.path] ?? []).length}
                >
                  open
                </button>
              </form>
            </div>
          </div>
        )
      })}

      {/* ── the pad ────────────────────────────────────────────────────────
          Outside the composer map and portalled to the body. Inside the map
          it would be a child of a `.gl-pin-at` — an absolutely positioned box
          the size of the component, clipped and stacked with the page — and a
          modal has no business inheriting any of that.

          `putShot` on the way out, so the drawing is a path by the time the
          message is sent, exactly like a paste. The busy count is the same
          one the paste path uses, so the tray says "attaching…" for a drawing
          too without knowing it is one. */}
      {draw !== null && (
        <DrawPad
          path={draw}
          selector={compose.find((c) => c.path === draw)?.sel ?? draw}
          onCancel={() => setDraw(null)}
          onDone={(blob) => {
            const key = draw
            setDraw(null)
            setBusy((b) => ({ ...b, [key]: (b[key] ?? 0) + 1 }))
            void putShot(blob).then((path) => {
              if (path) setPics((s) => ({ ...s, [key]: [...(s[key] ?? []), path] }))
              setBusy((b) => ({ ...b, [key]: Math.max(0, (b[key] ?? 0) - 1) }))
            })
          }}
        />
      )}

      {here.map((t, i) => {
        const at = box[t.id]
        if (!at) return null
        const on = !quiet && open === t.id
        const mine = variants.filter((v) => v.thread === t.id)
        /* ── waiting is not working ────────────────────────────────────────
           The field runs while an agent is CHANGING the component, and stops
           the moment the turn passes back to you. Two ways that happens:

           · chips are on the table and undecided. They exist to be COMPARED,
             and you cannot judge a component through a stipple.
           · the last word on the thread is the agent's. It has answered and
             is waiting for you to say whether that was right.

           The second one is the common failure and it is silent: an agent
           replies, does not close the thread, and its claim leaves the
           component dithering for as long as the page is open. Reported as
           "this is still loading even after it's done" — and it WAS done,
           the reply was sitting right there in the bubble.

           The claim itself is untouched either way, so nothing else picks
           the thread up. Only the motion stops, and the marker says whose
           turn it is. */
        const asked = mine.some((v) => v.chosen === null)
        const last = t.messages[t.messages.length - 1]
        /* A PICK IS TAKING YOUR TURN. The field stops when the agent spoke
           last, so one that answers without closing the thread cannot leave
           the component dithering — but choosing a chip is an answer that
           leaves no message, so the turn never came back and the field stayed
           stopped through exactly the window where the agent is writing the
           choice into the source.

           So the newest decision is compared against the last thing said. A
           set decided after the agent's reply hands the thread back to it. */
        const saidAt = last ? Date.parse(last.at) : 0
        /* Only a pick that chose SOMETHING counts. `chosen: []` is "keep the
           original", which is an answer that leaves nothing to write — so it
           must not start the field, or every thread that ends in "none of
           these" dithers forever waiting for work nobody is doing. */
        const pickedAt = mine.reduce(
          (n, v) =>
            Math.max(
              n,
              v.decidedAt && chosenKeys(v)?.length ? Date.parse(v.decidedAt) : 0,
            ),
          0,
        )
        const mineToAnswer = !!last && last.from !== 'you' && pickedAt <= saidAt
        /* WAITING STARTS WHEN YOU HIT SEND, not when an agent gets around to
           claiming the thread. `status` only becomes `working` when something
           runs `lab.mjs take`, and between the send and that call — which is
           every second of an agent reading the component, and is often the
           whole job, because an agent that answers in one pass never takes it
           at all — the component sat there looking untouched. Reported as
           "there was no blur and loading animation", about a set of variants
           that took a minute to arrive.

           So the field runs on whose turn it is, which the thread already
           knows without anyone reporting anything — and whose turn it is is
           exactly what the two conditions above already compute. There is no
           third clause to add: not-yours means either you spoke last, or you
           picked a chip after the agent last spoke, and both are already
           here. A `last.from === 'you'` clause was tried and was wrong for
           the second case, which is the common one — picking a chip leaves no
           message, so the agent is still the last to have spoken while it
           writes your choice into the source. */
        const live = !asked && !mineToAnswer
        return (
          <div
            key={t.id}
            className={`gl-pin-at ${on ? 'is-on' : ''} at-${at.at}`}
            style={
              {
                top: `${at.top}px`,
                left: `${at.left}px`,
                '--gl-w': `${at.w}px`,
                '--gl-h': `${at.h}px`,
              } as React.CSSProperties
            }
          >
            {/* ── being worked on ──────────────────────────────────────
                An outline round the component itself, not a mark near it.

                It appears the moment the thread exists — you sent a note,
                the thing you sent it about is marked, immediately. It starts
                MOVING when an agent claims the thread. Two states, two
                questions: "did that land on the right element" and "is
                anything actually happening", and a mark that only showed up
                once an agent arrived could not answer the first one.

                It started as a dot in the corner and that was unreadable —
                half a rem of amber on a grainy dark ground is nothing, and
                it was answering the wrong question anyway. What you want to
                know is WHICH COMPONENT is being edited under you, and the
                honest way to say that is to draw the component's own box.

                Inert and behind everything: it never takes a click, and the
                pin still does the talking. */}
            {/* While a set is showing itself the mark gets out of the way —
                see `.is-showcase`. `showing[v.id]` is defined the moment
                anything is being previewed, original included, which is
                exactly the window in which you are judging the design rather
                than looking for the pin. */}
            <span
              className={`gl-busy-box ${live ? 'is-live' : ''} ${
                at.light ? 'on-light' : ''
              } ${
                mine.some((v) => v.chosen === null && showing[v.id] !== undefined)
                  ? 'is-showcase'
                  : ''
              }`}
              style={{ width: `${at.w}px`, height: `${at.h}px` }}
              aria-hidden
            >
              {live && <PixelBlast w={at.w} h={at.h} light={at.light} />}
            </span>
            {/* `is-think` is the nobody-has-it-yet state: the field is
                running because the turn is not yours, but no agent has said
                it is on this, so the chip sheens and the word stays
                `thinking` rather than naming one. It used to read `queued`,
                which described the QUEUE rather than the agent and sounded
                as though nothing had started. */}
            {/* ── which treatment is on the page right now ──────────────
                The chips are in the bubble and the change is on the COMPONENT,
                which can be most of a screen away — so while a set is showing
                something, its name sits on the element itself.

                Keyed on the label so React remounts it per change and the
                entrance animation plays again; without the key it is one node
                whose text content swaps silently, which is the thing this is
                here to prevent. */}
            {!quiet &&
              mine.map((v) => {
                if (v.chosen !== null) return null
                const at = showing[v.id]
                if (!at) return null
                const name = at.length
                  ? (v.options.find((o) => o.key === at[0])?.label ?? at[0])
                  : 'original'
                return (
                  <span key={`${v.id}:${name}`} className="gl-now">
                    {name}
                  </span>
                )
              })}
            <button
              type="button"
              className={`gl-pin ${live ? 'is-working' : ''} ${
                quiet ? 'is-quiet' : ''
              } ${quiet && live && t.status !== 'working' ? 'is-think' : ''}`}
              onClick={() => (quiet ? wake(t.id) : showThread(on ? null : t.id))}
              title={
                quiet
                  ? asked || mineToAnswer
                    ? `${t.selector} — waiting on you, click to open it`
                    : t.status === 'working'
                      ? `${t.agent ?? 'an agent'} is working on ${t.selector} — click to open it`
                      : `${t.selector} — sent, waiting for an agent to pick it up`
                  : `${t.selector}${t.agent ? ` — ${t.agent} is on it` : ''}`
              }
            >
              {quiet ? (
                <>
                  <i className="gl-pin-dot" aria-hidden />
                  {asked || mineToAnswer
                    ? 'your call'
                    : t.status === 'working'
                      ? (t.agent ?? 'working')
                      : 'thinking'}
                </>
              ) : (
                i + 1
              )}
            </button>

            {on && (
              <div className="gl-thread" style={shove(t.id)}>
                <div
                  className="gl-thread-top"
                  onPointerDown={grab(t.id)}
                  onPointerMove={haul}
                  onPointerUp={drop}
                  onDoubleClick={() => setDrag((s) => ({ ...s, [t.id]: { x: 0, y: 0 } }))}
                >
                  <b>{t.selector}</b>
                  {t.label && <span className="gl-said">“{t.label.slice(0, 30)}”</span>}
                  <span className="gl-dim">
                    {asked
                      ? 'waiting on your pick'
                      : mineToAnswer
                        ? 'answered — waiting on you'
                        : t.status === 'working'
                          ? `${t.agent ?? 'an agent'} is on it`
                          : 'open'}
                  </span>
                </div>
                {/* ── history — its own scroller, so twenty lines of thread do
                    not push the reply box past the bottom of the screen ── */}
                <div className="gl-thread-msgs">
                  {t.messages.map((m) => (
                    <p key={m.id} className={`gl-say-${m.from}`}>
                      <b>{m.from === 'you' ? 'you' : (m.agent ?? 'claude')}</b> {m.text}
                      {!!m.shots?.length && (
                        <span className="gl-shots gl-shots-sm">
                          {m.shots.map((path) => (
                            <span key={path} className="gl-shot">
                              <img src={shotUrl(path)} alt="" />
                            </span>
                          ))}
                        </span>
                      )}
                    </p>
                  ))}
                </div>

                {/* ── what the agent is doing ──────────────────────────
                    A claim says the thread is taken; it does not say anything
                    is happening. On work that runs for minutes those are
                    different questions, and this answers the second one with
                    a list the agent writes itself rather than a spinner that
                    means nothing. Newest last, like the conversation. */}
                {(t.steps?.length ?? 0) > 0 && (
                  <details className="gl-thread-steps" open>
                    <summary>
                      {t.steps!.length} step{t.steps!.length === 1 ? '' : 's'}
                    </summary>
                    <ol>
                      {t.steps!.map((st) => (
                        <li key={st.id}>{st.text}</li>
                      ))}
                    </ol>
                  </details>
                )}

                {trailBar(t)}

                {/* ── the variant picker, for sets asked for ON this thread ─
                    They used to land in the panel's variants tab, which put
                    the question and its answers on opposite sides of the
                    screen. A set that belongs to a component belongs in that
                    component's bubble. */}
                {mine.map((v) => {
                  const live = showing[v.id] ?? []
                  const done = chosenKeys(v)
                  return (
                    <div key={v.id} className="gl-thread-vars">
                      <p className="gl-dim">{v.ask}</p>
                      <div className="gl-var-keys">
                        <button
                          type="button"
                          className={live.length === 0 ? 'gl-on' : ''}
                          onClick={() => steer(v.id, '')}
                        >
                          original
                        </button>
                        {v.options.map((o) => (
                          <button
                            key={o.key}
                            type="button"
                            className={live.includes(o.key) ? 'gl-on' : ''}
                            onClick={() => steer(v.id, o.key)}
                            title={o.note ?? o.label}
                          >
                            {o.label}
                          </button>
                        ))}
                      </div>
                      {live.length > 0 && !done && (
                        <button
                          type="button"
                          className="gl-var-use"
                          onClick={() => chooseVariant(v.id, live)}
                        >
                          use this
                        </button>
                      )}
                      {done && (
                        <span className="gl-dim">
                          chose{' '}
                          {done.length
                            ? (v.options.find((o) => o.key === done[0])?.label ?? done[0])
                            : 'original'}
                        </span>
                      )}
                    </div>
                  )
                })}
                <form
                  className="gl-thread-say"
                  onSubmit={(e) => {
                    e.preventDefault()
                    sayOnThread(t.id, draft[t.id] ?? '', pics[t.id] ?? [])
                    setDraft((d) => ({ ...d, [t.id]: '' }))
                    setPics((s) => ({ ...s, [t.id]: [] }))
                  }}
                >
                  <textarea
                    ref={(el) => {
                      boxes.current[t.id] = el
                    }}
                    rows={1}
                    autoFocus
                    value={draft[t.id] ?? ''}
                    onChange={(e) => {
                      setDraft((d) => ({ ...d, [t.id]: e.target.value }))
                      grow(e.currentTarget)
                    }}
                    onPaste={grabPics(t.id)}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter' && !e.shiftKey) {
                        e.preventDefault()
                        sayOnThread(t.id, draft[t.id] ?? '', pics[t.id] ?? [])
                        setDraft((d) => ({ ...d, [t.id]: '' }))
                        setPics((s) => ({ ...s, [t.id]: [] }))
                      }
                    }}
                    placeholder="reply… ⌘V a shot"
                    aria-label={`reply on ${t.selector}`}
                  />
                  <button
                    type="submit"
                    disabled={!(draft[t.id] ?? '').trim() && !(pics[t.id] ?? []).length}
                  >
                    send
                  </button>
                  {/* ── take the picker off this component ────────────────
                      Distinct from ✓, and the difference is what happens to
                      the record. RESOLVE means the work is done: the thread
                      goes `done`, stops drawing, and stays in the file as
                      what was asked and what was answered. REMOVE means the
                      thread should never have existed — opened on the wrong
                      element, or a note you no longer want — so it is deleted
                      outright, along with any chips asked for on it.

                      Two clicks, because there is no undo: the first arms it
                      and says so in the label. Anything else you press, or
                      opening another bubble, disarms it. */}
                  <button
                    type="button"
                    className={`gl-thread-kill ${axe === t.id ? 'is-armed' : ''}`}
                    onClick={() => {
                      if (axe === t.id) dropThread(t.id)
                      else setAxe(t.id)
                    }}
                    onBlur={() => setAxe((a) => (a === t.id ? null : a))}
                    title={
                      axe === t.id
                        ? 'click again to remove this thread for good'
                        : `remove the picker from ${t.selector}`
                    }
                  >
                    {axe === t.id ? 'remove?' : '✕'}
                  </button>
                  <button
                    type="button"
                    onClick={() => {
                      setAxe(null)
                      resolveThread(t.id)
                    }}
                    title="resolve — keeps the thread, stops the pin"
                  >
                    ✓
                  </button>
                </form>
              </div>
            )}
          </div>
        )
      })}
    </div>,
    document.body,
  )
}

export function Lab() {
  const {
    entries,
    notes,
    variants,
    threads,
    openThread,
    showing,
    scrub,
    active,
    target,
    pending,
    picking,
    loaded,
    saving,
  } = useGrainLab()
  /* the marquee, written to directly rather than rendered — see `band` in the
     picking effect */
  const band = useRef<HTMLDivElement | null>(null)
  const [hover, setHover] = useState<{
    sel: string
    label: string
    shared: number
    box: DOMRect
  } | null>(null)
  const [draft, setDraft] = useState('')
  const [shots, setShots] = useState<string[]>([])
  /* in-flight count, so a paste says something on the frame it happens rather
     than only once the bytes have landed */
  const [busy, setBusy] = useState(0)
  const [zoom, setZoom] = useState<string | null>(null)
  const [copied, setCopied] = useState(false)
  const [tab, setTab] = useState<'grain' | 'notes' | 'variants'>('grain')
  const [preview, setPreview] = useState(false)
  const [commenting, setCommenting] = useState(false)
  /* read inside the click handler, which is bound once when the picker arms —
     a captured `commenting` would be whatever it was at that moment */
  const commentRef = useRef(false)
  /* when `f` was last pressed, for the double-tap below. A ref and not state:
     nothing renders differently because a key was pressed once. */
  const lastF = useRef(0)
  useEffect(() => {
    commentRef.current = commenting
  }, [commenting])

  /* Whether the per-component pins are on screen. `a` and Escape drive THIS
     now, not the mode: once every clicked component carries its own pin, the
     question a keystroke answers is "show me all of them / get them out of my
     way", not "which single mode is the page in". */
  const [pinsOn, setPinsOn] = useState(true)

  /* the hover card without the picker — see the note on PEEK_KEY */
  const [peek, setPeek] = useState<boolean>(() => {
    try {
      return localStorage.getItem(PEEK_KEY) === '1'
    } catch {
      return false
    }
  })
  useEffect(() => {
    try {
      localStorage.setItem(PEEK_KEY, peek ? '1' : '0')
    } catch {
      /* private mode: it still works, it just will not be remembered */
    }
  }, [peek])

  /* floating card or right-edge drawer — see the note on DOCK_KEY. `panelRef`
     below closes over this directly and lists it as a dependency: a toggle
     hands React a new callback for the re-keyed node, which is exactly the
     lifetime the geometry cares about. (A ref written during render was the
     first attempt, and the hooks lint is right that it is a smell.) */
  const [dock, setDock] = useState<Dock>(() => {
    try {
      return localStorage.getItem(DOCK_KEY) === 'drawer' ? 'drawer' : 'float'
    } catch {
      return 'float'
    }
  })
  useEffect(() => {
    try {
      localStorage.setItem(DOCK_KEY, dock)
    } catch {
      /* same */
    }
  }, [dock])

  /* ── the button goes where it is put ──────────────────────────────────
     A fixed corner is the wrong corner about a third of the time: the thing
     you want to comment on is a footer CTA, and the button is sitting on it.

     Dragging is on the WHOLE set rather than the main button alone, so the
     count and the panel toggle travel with it — three controls that can be
     separated are three things to tidy up later.

     The click and the drag share one pointer: a press only becomes a drag
     after it has moved a few pixels, and the click handler is suppressed for
     exactly that case. Without the threshold every click jitters a pixel and
     arms nothing. */
  const fabRef = useCallback((el: HTMLDivElement | null) => {
    if (!el) return
    const KEY = 'gl-fab-at'

    /* FIXED, in the viewport — and it stays that way. It was moved into
       document space once, on a misreading of "the picker is moving when i
       scroll"; the client meant the per-component bubbles, and was blunt about
       the result: "make the fab a fucking fab, it should stick to the screen
       not the fucking page". A control whose whole job is to be reachable has
       to be reachable from wherever you are on the page. The bubbles are the
       things that belong to the page; this belongs to the window. */
    const put = (x: number, y: number) => {
      const w = el.offsetWidth
      const h = el.offsetHeight
      const left = Math.min(Math.max(8, x), Math.max(8, innerWidth - w - 8))
      const top = Math.min(Math.max(8, y), Math.max(8, innerHeight - h - 8))
      el.style.left = `${left}px`
      el.style.top = `${top}px`
      el.style.right = 'auto'
      el.style.bottom = 'auto'
    }

    try {
      const raw = localStorage.getItem(KEY)
      if (raw) {
        const at = JSON.parse(raw) as { x: number; y: number }
        if (typeof at?.x === 'number') put(at.x, at.y)
      }
    } catch {
      /* unreadable position is not worth a missing button */
    }

    let dx = 0
    let dy = 0
    let sx = 0
    let sy = 0
    let moved = false

    const move = (e: PointerEvent) => {
      /* the threshold is measured from where the POINTER went down. It used to
         compare against `offsetLeft`, which is a page coordinate now and was a
         viewport one then — mixing the two makes every press read as a drag */
      if (!moved && Math.hypot(e.clientX - sx, e.clientY - sy) < 3) return
      moved = true
      el.classList.add('is-dragging')
      put(e.clientX - dx, e.clientY - dy)
    }
    const up = () => {
      removeEventListener('pointermove', move)
      removeEventListener('pointerup', up)
      el.classList.remove('is-dragging')
      if (moved) {
        const b = el.getBoundingClientRect()
        try {
          localStorage.setItem(KEY, JSON.stringify({ x: b.left, y: b.top }))
        } catch {
          /* storage unavailable — it simply forgets where it was put */
        }
        /* swallow the click this pointer is about to fire, once */
        const eat = (c: MouseEvent) => {
          c.stopPropagation()
          c.preventDefault()
        }
        el.addEventListener('click', eat, { capture: true, once: true })
      }
    }
    const down = (e: PointerEvent) => {
      if (e.button !== 0) return
      const b = el.getBoundingClientRect()
      dx = e.clientX - b.left
      dy = e.clientY - b.top
      sx = e.clientX
      sy = e.clientY
      moved = false
      addEventListener('pointermove', move)
      addEventListener('pointerup', up)
    }

    el.addEventListener('pointerdown', down)
    return () => {
      el.removeEventListener('pointerdown', down)
      removeEventListener('pointermove', move)
      removeEventListener('pointerup', up)
    }
  }, [])

  /* The panel is now SECONDARY. The tool's entry point is one fixed button in
     the corner: click it, click a component, type. Everything the panel holds —
     the grain sliders, the note list, the variant chips — is still there, but
     it is a drawer you open when you want it rather than a slab of chrome the
     page wears the whole time. */
  const [panelOn, setPanelOn] = useState(false)
  const sheet = useRef<HTMLStyleElement | null>(null)
  const field = useRef<HTMLTextAreaElement | null>(null)
  /* The pick cursor. Positioned from the mousemove handler by writing to the
     node, never through state — a React render per mouse frame is exactly the
     cost this tool spent an afternoon removing from the hover path. */
  const cursor = useRef<HTMLDivElement | null>(null)

  /* `?grain` is checked HERE now, not at the mount site. The mount site's job
     is the build-time gate that keeps this module out of production; this is
     the run-time gate that keeps the panel out of the way until it is asked
     for. Two different questions, and conflating them is what put the overlay
     in the production bundle. */
  const on = labOn()

  const mode: Mode = preview ? 'preview' : commenting ? 'comment' : 'browse'
  const cfg = entries.find((e) => e.selector === active)?.cfg
  /* Grain and variants share the one live stylesheet. Variants come last so a
     variant can override a grain rule it also touches — the variant is the
     more specific intent of the two. */
  /* Sets asked for ON a thread render in that thread's bubble, so the panel
     shows the rest — the ones asked for in a plain note, which have no element
     of their own to sit under. Both still feed `variantCss` below: where the
     chips are drawn has nothing to do with which CSS is live. */
  const loose = variants.filter((v) => !v.thread)
  const open2 = loose.filter((v) => v.chosen === null)
  /* counted separately so the panel can still SAY there are pending sets it is
     not showing — otherwise hiding the pins hides the question entirely */
  const openOnThreads = variants.filter((v) => v.thread && v.chosen === null).length
  /* the thread drafts, one per set, kept out of the store: an unsent line is
     not a fact about the design and has no business on disk */
  const [says, setSays] = useState<Record<string, string>>({})
  /* grain, then any variant being previewed, then any element scrubbed back
     into its own past. Trail last so a scrub wins over a preview: they are
     two ways of showing something that is not the live page, and the one you
     are dragging is the one you mean. */
  const css = [toCss(entries), variantCss(variants, showing), trailCss(threads, scrub)]
    .filter(Boolean)
    .join('\n\n')
  const open = notes.filter((n) => !n.done).length
  const working = notes.filter((n) => n.working && !n.done).length
  /* Unfinished threads. It decides whether the pin layer draws at all: an
     unfinished thread keeps a mark on its component even with the pins turned
     off, so sending a note always leaves something on screen. */
  const onIt = threads.filter((t) => t.status !== 'done').length

  /* Sorted for reading, not stored sorted — the file keeps its write order, so
     nothing about what is on disk depends on how the panel happens to rank it.

     In flight first, because that is the one row you are watching and it must
     not be somewhere down a scrolling list; then what is still open; then the
     done ones, which are kept rather than hidden so a note can be un-ticked,
     but have no claim on the top of the list. Stable within each group. */
  const rank = (n: (typeof notes)[number]) => (n.done ? 2 : n.working ? 0 : 1)
  const ordered = notes
    .map((n, i) => ({ n, i }))
    .sort((a, b) => rank(a.n) - rank(b.n) || a.i - b.i)

  useEffect(() => {
    void loadLab()
    watchPush()
    return watchDisk()
  }, [])

  /* the share counts describe the document that is on screen, so they go when
     it does */
  useEffect(forgetShares, [])

  /* The one place that knows how three modes map onto two flags, so no call
     site has to remember that preview must also disarm the picker. */
  const setMode = (m: Mode) => {
    setPreview(m === 'preview')
    /* `comment` arms the SAME picker as `pick` — both need the page to answer
       a click with an element. What differs is where the answer goes: `pick`
       puts it in the panel's note field, `comment` opens a thread pinned to
       the element itself. One flag, two destinations, rather than two nearly
       identical hover-and-click implementations. */
    /* One picker, and it is comment's. It arms the page only until a
       component is chosen — see the click handler. */
    setPicking(m === 'comment')
    setCommenting(m === 'comment')
    /* Entering comment mode after Escape has hidden everything would otherwise
       arm a picker whose output you cannot see. */
    if (m === 'comment') setPinsOn(true)
    if (m !== 'comment') {
      showThread(null)
      /* Composers nobody typed into go with the mode. They are INVISIBLE
         outside comment mode — the pin layer is handed an empty list — but
         they still count as a pick in progress, and a pick in progress
         suspends the picker. So an empty box left behind by a stray click
         meant the picker came back armed and permanently deaf: ring up,
         cursor drawn, nothing pickable, for the rest of the tab's life.

         Ones with something in them stay. Escape is a panic key, and a
         half-written sentence thrown away by the key you press when the page
         stops responding is the tool deleting your work at the worst possible
         moment. They come back with the mode, and they go on suspending the
         picker — which is right: there is unfinished business on that
         element, and finishing or dismissing it is one click. */
      clearIdlePending()
    }
  }

  /* ── a pick in progress owns the pointer ───────────────────────────────
     The picker STAYS ARMED through a pick, which is what lets you walk a
     screen marking things. What it must not do is keep hunting while you are
     answering the box it just opened: the highlight chases the pointer across
     the page you are trying to read, and a stray click lands another composer
     somewhere you did not mean.

     So an open composer SUSPENDS the picker — highlight, stand-in cursor,
     click-to-pick and the armed ring, all off — until it is sent or dismissed,
     and then it re-arms itself. The mode is untouched: `picking` is still
     true, the FAB is still filled, nothing needs pressing to get back.

     The ring goes with it deliberately. It exists to say "this page is not
     behaving normally, the picker is eating your clicks" — and while the
     picker is suspended the page IS behaving normally, so a ring left up
     would be a lie about the one thing it is there to tell the truth about.

     Peek suspends on the same flag, for the same reason: it is the same
     highlight following the same pointer. */
  const composing = pending.length > 0

  /* ── the tool's power switch ───────────────────────────────────────────
     `ff` and the FAB's main button are the same act — "LiGMA on / LiGMA off"
     — so they run the same function rather than two copies of it that drift.

     WHAT "ON" LOOKS LIKE DEPENDS ON THE PLACEMENT. Armed is armed either way,
     but in a drawer the panel IS the tool's presence on screen: leaving it
     shut behind its tab while the picker is live means the one surface that
     says what is happening is the one thing you cannot see. So the drawer
     comes and goes with the picker.

     A FLOATING card does not, and that asymmetry is deliberate rather than an
     oversight. The card sits ON the page — over the very thing you just armed
     the picker to look at — and it has its own `≡` a centimetre away. The
     drawer takes its own column and covers nothing, which is exactly why it
     can afford to open on its own. */
  const toggleTool = () => {
    const on = !commenting
    setMode(on ? 'comment' : 'browse')
    if (dock === 'drawer') setPanelOn(on)
  }

  /* `a` toggles the two ends — the mode you work in and the mode you judge in.

     Both now drive the PINS: `a` toggles every per-component thread on the
     page, open and in-progress alike, and Escape hides them. That is the
     question worth a keystroke once each clicked component carries its own
     picker — the old behaviour toggled one global mode, which stopped being
     the thing in the way.

     ESCAPE fires from a focused field too, so you never have to click out of a
     thread's reply box to clear the page — it blurs the field on the way
     through.

     `a` does NOT, and the difference is the whole rule: Escape means nothing
     inside a sentence, `a` is a letter. Letting it through made the note box
     unable to type the commonest letter in English, which is a worse tool than
     one that needs a click to change mode.

     ESCAPE IS THE OFF SWITCH. It disarms the picker, hides the pins and
     closes whatever bubble was open — everything the overlay was doing to the
     page, off, in one key, from wherever you were and without checking what
     state you were in. The picker staying armed is what makes that
     load-bearing rather than a convenience: it swallows every click on the
     site, and the key someone presses when the page stops responding has to
     be the one that gives it back.

     `a` is the other half and only puts the PINS back — arming a picker from
     a keystroke is not something a letter should be able to do by accident.

     The FAB's main button is the deliberate version of both: click to arm,
     click to disarm, and it is filled while armed. */
  useEffect(() => {
    const typing = (t: EventTarget | null) =>
      t instanceof HTMLElement &&
      (t.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(t.tagName))

    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && zoom) {
        setZoom(null)
        return
      }
      if (e.metaKey || e.ctrlKey || e.altKey) return
      /* whatever had the caret gives it up — otherwise the next keystroke goes
         back into a field you can no longer see */
      const leave = () => {
        if (typing(e.target)) (e.target as HTMLElement).blur()
      }
      if (e.key.toLowerCase() === 'a' && !typing(e.target)) {
        e.preventDefault()
        setPinsOn((v) => !v)
        return
      }
      /* `h` is peek. A letter, so it is typing-guarded like `a` — and unlike
         `ff` it needs no double-tap, because turning peek on costs the page
         nothing: it swallows no clicks. */
      if (SHOW_PEEK && e.key.toLowerCase() === 'h' && !typing(e.target) && !e.repeat) {
        e.preventDefault()
        setPeek((v) => !v)
        return
      }
      /* ── ff: arm and disarm the picker ─────────────────────────────────
         DOUBLE, and that is the whole design of it. An armed picker swallows
         every click on the site, so a single letter that turns it on is a
         trap — you reach for a find-in-page, the page stops responding, and
         nothing on screen connects the two. Two taps inside 400ms is not
         something a hand does by accident, and it is still far less work than
         finding the button.

         Same typing guard as `a`, for the same reason: `f` is a letter first.
         Key repeat is ignored, or holding the key toggles forever. */
      if (e.key.toLowerCase() === 'f' && !typing(e.target) && !e.repeat) {
        const now = Date.now()
        if (now - lastF.current < 400) {
          lastF.current = 0
          e.preventDefault()
          toggleTool()
        } else {
          lastF.current = now
        }
        return
      }
      if (e.key === 'Escape') {
        leave()
        /* Escape only ever hides. It is the get-me-out key, and a key that
           sometimes puts a dozen bubbles BACK on the page is one you cannot
           use without first remembering what state you were in.

           DISARMING IS THE FIRST THING IT DOES, and that is not a detail: an
           armed picker swallows every click on the site, and it now stays
           armed until told otherwise, so the key people press when the page
           stops responding has to be the key that gives it back. It was not,
           for a while — Escape hid the pins and left the picker on, which is
           the same failure as the old sticky global picker wearing a
           different hat. */
        /* not from preview: preview IS the quiet state, and an off switch
           that turns the chrome back on is not one */
        if (!preview) setMode('browse')
        setPinsOn(false)
        showThread(null)
        /* and the drawer, for the same reason it opens with the picker: it is
           the tool's presence on screen, and an off switch that leaves a
           column of chrome over the page is not one. The floating card is
           left alone — Escape has never closed it, and it is not in the way
           of the page the way a drawer is. */
        if (dock === 'drawer') setPanelOn(false)
      }
    }
    window.addEventListener('keydown', onKey)
    return () => window.removeEventListener('keydown', onKey)
  })

  /* Picking something IS starting to write about it, so the caret goes there
     without a second click. `target` is a fresh object on every pick, so
     re-picking the same element focuses again — which is what you want when
     you clicked it a second time to say something else about it. */
  useEffect(() => {
    if (active) field.current?.focus()
  }, [active, target])

  /* The field grows with what is in it rather than scrolling inside a fixed
     two lines — a note is a sentence or two of prose, and one you cannot see
     the whole of is one you cannot re-read before sending. Capped so a long
     one does not push the list off the panel. */
  const grow = (el: HTMLTextAreaElement | null) => {
    if (!el) return
    el.style.height = 'auto'
    el.style.height = `${Math.min(el.scrollHeight, 132)}px`
  }
  useEffect(() => grow(field.current), [draft, active])

  /* one stylesheet, created once, text swapped in place */
  useEffect(() => {
    if (!sheet.current) {
      const el = document.createElement('style')
      el.id = 'grain-lab-sheet'
      document.head.appendChild(el)
      sheet.current = el
    }
    sheet.current.textContent = css
  }, [css])

  useEffect(
    () => () => {
      sheet.current?.remove()
      sheet.current = null
    },
    [],
  )

  /* picking */
  useEffect(() => {
    // no state reset here: the highlight is gated on `picking` at render, so a
    // stale box costs nothing, and clearing it synchronously in an effect
    // would cascade a render
    if (!picking || composing) return
    const inLab = (t: EventTarget | null) => t instanceof Element && t.closest(LAB_UI)

    /* ── seeing through the panel ──────────────────────────────────────────
       The panel COVERS PAGE. Floating it takes a corner; docked as a drawer
       it takes a whole column of every page, and everything in that column
       was unreachable — the picker bails on anything inside `LAB_UI`, so a
       hover or a click there hit the panel and stopped.

       So while the picker is armed, a hover or click that lands on the panel
       is resolved against WHAT IS UNDERNEATH it. `elementsFromPoint` returns
       the whole stack at the pointer, topmost first; the first entry that is
       not one of the overlay's own surfaces is the element the person is
       pointing at.

       Two things this is NOT, and why.

       It is not `pointer-events: none` on the panel. That removes `:hover`
       along with the clicks, so the panel could not fade itself out of the
       way — and anything computing its own visibility from hit-testing while
       hit-testing is what moves it flickers at the boundary.

       It is not a page reflow. Pushing the body over by the drawer's width is
       what a docked devtool does, and it is wrong twice here: the host page
       has four `position: fixed` elements — the island header among them —
       which do not move with the body and would stay buried anyway, and
       writing layout into the page under review is the exact class of bug
       that makes the TOOL look like the SITE is broken. This repo has already
       lost hours to a root `overflow` change breaking sticky.

       Only `.gl-panel` is seen through. The FAB stays solid on purpose: it is
       the one control that must always be clickable, because it is the way to
       disarm a picker that is swallowing every click. */
    const under = (t: EventTarget | null, x: number, y: number): Element | null => {
      if (!(t instanceof Element)) return null
      if (!t.closest('.gl-panel')) return t
      for (const el of document.elementsFromPoint(x, y)) {
        if (!el.closest(LAB_UI)) return el
      }
      return null
    }

    /* Decorative artwork is routinely `pointer-events: none` so it cannot eat
       a click meant for the page under it — and an element that is not a
       pointer target is never an event target either, so the picker walked
       straight past it and selected whatever section was behind. Reported as
       "the gif is not being selected"; it was every ornament on the site.

       So: while the picker is armed, hand those elements their pointer events
       back. Two things keep that from backfiring. It skips anything covering
       most of the viewport — a full-page grain film or a fixed wash would
       otherwise become the answer to every single pick — and it is a marker
       class, so the originals are restored exactly on disarm rather than
       guessed at. The walk happens ONCE per arming, not per mousemove. */
    const unmasked: Element[] = []
    for (const el of document.body.querySelectorAll('*')) {
      if (el.classList.contains('gl-pickable')) continue
      if (el.className && String(el.className).includes('gl-')) continue
      if (el.closest(LAB_UI)) continue
      if (getComputedStyle(el).pointerEvents !== 'none') continue
      const b = el.getBoundingClientRect()
      if (b.width < 2 || b.height < 2) continue
      if (b.width * b.height > innerWidth * innerHeight * 0.8) continue
      el.classList.add('gl-pickable')
      unmasked.push(el)
    }

    /* Hover is on the mouse's frame budget, so it does the least it can: bail
       when the element has not changed, then do the reading once per animation
       frame. The full `describe` — which walks the DOM for a unique path and
       queries the document again to verify it — happens on CLICK only. Running
       it per `mousemove` pinned the main thread hard enough that the page's own
       reveal observer never ran and whole sections stayed at opacity 0. */
    let last: Element | null = null
    let frame = 0

    document.documentElement.classList.add('gl-picking')

    const move = (e: MouseEvent) => {
      /* the cursor leads everything else: it must keep up with the pointer
         even over the tool's own surfaces, where the rest of this handler
         may bail */
      const c = cursor.current
      if (c) c.style.translate = `${e.clientX}px ${e.clientY}px`

      /* a drag in progress owns the pointer: no hover work, no highlight */
      if (from && e.buttons & 1) {
        const d = Math.hypot(e.clientX - from.x, e.clientY - from.y)
        if (dragging || d > 6) {
          dragging = true
          paint(e.clientX, e.clientY)
          last = null
          setHover(null)
          return
        }
      }

      const t = under(e.target, e.clientX, e.clientY)
      if (!t || inLab(t)) {
        c?.classList.add('is-off')
        last = null
        setHover(null)
        return
      }
      c?.classList.remove('is-off')
      if (t === last) return
      last = t
      cancelAnimationFrame(frame)
      frame = requestAnimationFrame(() => {
        const info = hoverInfo(t)
        if (info) setHover({ ...info, box: t.getBoundingClientRect() })
      })
    }
    /* The highlight is `position: fixed`, measured from the pointer — so a
       scroll with the picker armed left it hanging in mid-air while the
       component it belongs to slid away underneath. It is the ONE per-element
       overlay that is not in document space, because it has to keep up with a
       pointer, so it re-measures on scroll instead. `last` is the element it
       is drawn on, which is all that is needed to do it. */
    const reseat = () => {
      if (!last || !last.isConnected) return
      const el = last
      const info = hoverInfo(el)
      if (info) setHover({ ...info, box: el.getBoundingClientRect() })
    }

    /* ── drag a box over several components ────────────────────────────────
       A click picks one thing. A DRAG picks everything the box closes over,
       which is what a pass across a row of cards actually is.

       CONTAINMENT, not intersection. A box that grabs whatever it touches
       takes half-crossed neighbours you did not mean, and the correction is
       another drag; a box that takes only what it fully closed over is
       predictable, and widening it is the same gesture continued.

       OUTERMOST ONLY, and this is the part that makes it usable at all. Every
       element fully inside the box qualifies, so a card brings its heading,
       its paragraph, its every span — drag across three cards and you would
       open forty composers. An element whose PARENT is also inside is a child
       of something already taken, so it drops out. What is left is the layer
       you were pointing at.

       Capped, because a drag across the whole page is a gesture anyone makes
       once by accident and twenty composers is already more than anyone
       wants. */
    const MOST = 20
    const inside = (r: DOMRect, b: DOMRect) =>
      r.left >= b.left && r.top >= b.top && r.right <= b.right && r.bottom <= b.bottom

    const caught = (b: DOMRect) => {
      const hits: Element[] = []
      for (const el of document.body.querySelectorAll('*')) {
        if (el.closest(LAB_UI)) continue
        const r = el.getBoundingClientRect()
        /* rules, spacers and empty inline wrappers are not components */
        if (r.width < 6 || r.height < 6) continue
        if (inside(r, b)) hits.push(el)
      }
      const all = new Set(hits)
      return hits
        .filter((el) => !(el.parentElement && all.has(el.parentElement)))
        .slice(0, MOST)
    }

    let from: { x: number; y: number } | null = null
    let dragging = false
    /* a drag ends in a click event the browser sends anyway; without this it
       would land as a pick on whatever the pointer finished over */
    let swallow = false

    const paint = (x: number, y: number) => {
      const el = band.current
      if (!el || !from) return
      el.style.left = `${Math.min(from.x, x)}px`
      el.style.top = `${Math.min(from.y, y)}px`
      el.style.width = `${Math.abs(x - from.x)}px`
      el.style.height = `${Math.abs(y - from.y)}px`
      el.classList.add('is-on')
    }

    const click = (e: MouseEvent) => {
      if (swallow) {
        swallow = false
        e.preventDefault()
        e.stopPropagation()
        return
      }
      const t = under(e.target, e.clientX, e.clientY)
      if (!t || inLab(t)) return
      /* A modifier click is not a pick — it is someone trying to USE the page.
 
         Pick mode swallows clicks in the capture phase so an element can be
         inspected before the router navigates away, which is the whole point
         of it and also a trap: with the picker armed every link on the site
         silently does nothing, and nothing on screen says the overlay is the
         reason. ⌘/Ctrl/Shift and the middle button fall through to the page,
         the way they do in any browser inspector. */
      if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return
      e.preventDefault()
      e.stopPropagation()
      const what = describe(t)
      pick(t)
      /* In comment mode the picker STAYS ARMED and each click drops another
         composer. Disarming on the first pick meant annotating four things
         was four rounds of arm-click-type-send, with the page's clicks going
         off and on in between; you can now walk the page marking everything
         that is wrong and fill the boxes in afterwards, which is the order
         the thought actually arrives in. Escape and the FAB disarm it.

         Outside comment mode one pick is still the whole job — the panel's
         grain and note boxes are about one element at a time. */
      if (commentRef.current) addPending(what)
      else setPicking(false)
    }
    /* the button reads as pressable, so it has to press */
    const down = (e: MouseEvent) => {
      cursor.current?.classList.add('is-down')
      if (e.button !== 0 || inLab(e.target)) return
      /* Stop the browser starting a text selection on this press. The CSS
         above already makes the page unselectable while armed; this is the
         other half, because a selection ALREADY on the page from before the
         picker was armed survives and extends as you drag. Clearing it here
         is what makes the first drag behave like the tenth. */
      e.preventDefault()
      getSelection()?.removeAllRanges()
      from = { x: e.clientX, y: e.clientY }
      dragging = false
    }
    const up = (e: MouseEvent) => {
      cursor.current?.classList.remove('is-down')
      band.current?.classList.remove('is-on')
      if (!dragging || !from) {
        from = null
        return
      }
      const b = new DOMRect(
        Math.min(from.x, e.clientX),
        Math.min(from.y, e.clientY),
        Math.abs(e.clientX - from.x),
        Math.abs(e.clientY - from.y),
      )
      from = null
      dragging = false
      swallow = true
      e.preventDefault()
      e.stopPropagation()
      /* outside comment mode a drag has nowhere to put nine answers, so it
         selects the last one and behaves like a click */
      const got = caught(b)
      if (!got.length) return
      if (commentRef.current) for (const el of got) addPending(describe(el))
      else {
        pick(got[got.length - 1])
        setPicking(false)
      }
    }

    document.addEventListener('mousemove', move, true)
    document.addEventListener('click', click, true)
    document.addEventListener('mousedown', down, true)
    document.addEventListener('mouseup', up, true)
    /* passive: this only reads a rect and writes state, it never blocks the
       scroll it is following */
    addEventListener('scroll', reseat, { passive: true })
    return () => {
      cancelAnimationFrame(frame)
      for (const el of unmasked) el.classList.remove('gl-pickable')
      document.documentElement.classList.remove('gl-picking')
      document.removeEventListener('mousemove', move, true)
      document.removeEventListener('click', click, true)
      document.removeEventListener('mousedown', down, true)
      document.removeEventListener('mouseup', up, true)
      removeEventListener('scroll', reseat)
    }
    /* `composing` is in here so the whole effect tears down when a composer
       opens and builds back when it closes — one lifetime, not a flag checked
       in four handlers. The cost is that the unmask walk re-runs per compose
       cycle; it is one pass over the document and it was already paying it
       once per arming. */
  }, [picking, composing])

  /* ── peek: the card without the picker ─────────────────────────────────
     A SECOND copy of the picker's `move` and `reseat`, deliberately, rather
     than a shared helper. The picker's version carries three things this one
     must not: the stand-in cursor, `cursor: none` on the whole tree, and the
     capture-phase click that swallows the page's links. What is left is the
     part that answers "what is that" — and it keeps the same discipline: bail
     when the element has not changed, read once per animation frame, never
     call `describe()`. The picker's own effect takes over while armed, so this
     one stands down for it. */
  useEffect(() => {
    if (!SHOW_PEEK || !peek || picking || preview || composing) return
    const inLab = (t: EventTarget | null) => t instanceof Element && t.closest(LAB_UI)
    let last: Element | null = null
    let frame = 0
    const move = (e: MouseEvent) => {
      const t = e.target
      if (!(t instanceof Element) || inLab(t)) {
        last = null
        setHover(null)
        return
      }
      if (t === last) return
      last = t
      cancelAnimationFrame(frame)
      frame = requestAnimationFrame(() => {
        const info = hoverInfo(t)
        if (info) setHover({ ...info, box: t.getBoundingClientRect() })
      })
    }
    const reseat = () => {
      if (!last || !last.isConnected) return
      const el = last
      const info = hoverInfo(el)
      if (info) setHover({ ...info, box: el.getBoundingClientRect() })
    }
    const leave = () => {
      last = null
      setHover(null)
    }
    document.addEventListener('mousemove', move, true)
    document.addEventListener('mouseleave', leave)
    addEventListener('scroll', reseat, { passive: true })
    return () => {
      cancelAnimationFrame(frame)
      document.removeEventListener('mousemove', move, true)
      document.removeEventListener('mouseleave', leave)
      removeEventListener('scroll', reseat)
      setHover(null)
    }
  }, [peek, picking, preview, composing])

  const copy = (text: string) => {
    void navigator.clipboard.writeText(text).then(() => {
      setCopied(true)
      setTimeout(() => setCopied(false), 1500)
    })
  }

  /* A pasted image goes up as soon as it is pasted, not on submit — you can
     then see it sitting under the field and know it took, and the note's
     `shots` are already paths by the time enter is pressed. */
  const paste = (e: ClipboardEvent) => {
    const files = Array.from(e.clipboardData.files).filter((f) =>
      f.type.startsWith('image/'),
    )
    if (!files.length) return
    e.preventDefault()
    setBusy((n) => n + files.length)
    void Promise.all(files.map(putShot)).then((paths) => {
      const kept = paths.filter((p): p is string => !!p)
      if (kept.length) setShots((s) => [...s, ...kept])
      setBusy((n) => Math.max(0, n - files.length))
    })
  }

  const submitNote = () => {
    if (!active || (!draft.trim() && !shots.length)) return
    addNote(active, draft, shots)
    setDraft('')
    setShots([])
    setTab('notes')
    /* Hand the keyboard back. The note is written and the next thing you do is
       look at the page or press `a` — neither works with a caret still in the
       field, since every guard in this tool treats a focused textarea as
       typing. Deselecting too, so the focus effect does not simply put it
       back on the next render. */
    field.current?.blur()
    setActive(null)
  }

  /* ── the panel's geometry ──────────────────────────────────────────────
     Draggable by its bar, resizable by its own corner, and both remembered.

     The panel ships anchored to the bottom right, which is the right place
     for it until it is over the very thing you are trying to read — a note on
     a footer, a card in the last row. Rather than a "move to the other side"
     button, it goes where it is put.

     Geometry is written straight onto the node and kept in `localStorage`,
     never in React state: dragging through state would re-render the whole
     panel — notes, variants and all — on every mouse frame, and this is the
     same tool that already had to take a `describe()` call out of the hover
     path for exactly that reason.

     Resizing is the browser's own grip (`resize: both` in the stylesheet); a
     `ResizeObserver` only has to notice the result and write it down.

     A REF CALLBACK rather than an effect, and the difference is a bug that
     shipped: preview unmounts the panel outright, so coming back mounts a new
     node. An effect keyed on anything but the node itself kept its listeners
     on the old detached bar, and the panel stopped being draggable after one
     trip through preview. A ref callback is handed the node, and React 19
     calls the function it returns when that node goes away — the one lifetime
     any of this cared about. */
  const panelRef = useCallback(
    (el: HTMLDivElement | null) => {
      if (!el) return
      /* a drawer is placed by the stylesheet and nothing else: no saved corner,
       no drag, no resize. The node is fresh (keyed on `dock`), so there is
       nothing stale to clear either. */
      if (dock === 'drawer') return

      const KEY = 'gl-geom'
      const save = () => {
        const b = el.getBoundingClientRect()
        try {
          localStorage.setItem(
            KEY,
            JSON.stringify({
              x: b.left,
              y: b.top,
              w: el.offsetWidth,
              h: el.offsetHeight,
            }),
          )
        } catch {
          /* storage unavailable — the panel simply forgets */
        }
      }

      /* Anchoring flips from right/bottom to left/top the moment a position is
       known: a box pinned by two opposite edges cannot be moved by setting
       one of them. */
      const place = (x: number, y: number) => {
        const maxX = innerWidth - el.offsetWidth
        const maxY = innerHeight - el.offsetHeight
        el.style.right = 'auto'
        el.style.bottom = 'auto'
        el.style.left = `${Math.min(Math.max(0, x), Math.max(0, maxX))}px`
        el.style.top = `${Math.min(Math.max(0, y), Math.max(0, maxY))}px`
      }

      try {
        const raw = localStorage.getItem(KEY)
        if (raw) {
          const g = JSON.parse(raw) as Partial<Record<'x' | 'y' | 'w' | 'h', number>>
          if (typeof g.w === 'number') el.style.width = `${g.w}px`
          if (typeof g.h === 'number') el.style.height = `${g.h}px`
          if (typeof g.x === 'number' && typeof g.y === 'number') place(g.x, g.y)
        }
      } catch {
        /* unreadable geometry is not worth a broken panel */
      }

      const bar = el.querySelector<HTMLElement>('.gl-bar')
      let dx = 0
      let dy = 0

      const drag = (e: PointerEvent) => place(e.clientX - dx, e.clientY - dy)
      const drop = (e: PointerEvent) => {
        bar?.classList.remove('is-dragging')
        bar?.releasePointerCapture(e.pointerId)
        removeEventListener('pointermove', drag)
        removeEventListener('pointerup', drop)
        save()
      }
      const grab = (e: PointerEvent) => {
        if (e.button !== 0) return
        const b = el.getBoundingClientRect()
        dx = e.clientX - b.left
        dy = e.clientY - b.top
        bar?.classList.add('is-dragging')
        bar?.setPointerCapture(e.pointerId)
        addEventListener('pointermove', drag)
        addEventListener('pointerup', drop)
        e.preventDefault()
      }

      bar?.addEventListener('pointerdown', grab)
      const ro = new ResizeObserver(save)
      ro.observe(el)
      /* a window that shrinks past the panel drags it back into view */
      const reflow = () => {
        const b = el.getBoundingClientRect()
        if (el.style.left) place(b.left, b.top)
      }
      addEventListener('resize', reflow)

      return () => {
        bar?.removeEventListener('pointerdown', grab)
        removeEventListener('pointermove', drag)
        removeEventListener('pointerup', drop)
        removeEventListener('resize', reflow)
        ro.disconnect()
      }
    },
    [dock],
  )

  if (!on) return null

  if (preview)
    return createPortal(
      /* the one control that stays: without it preview is a one-way door and
         the only way back is a keystroke nobody can see */
      <button
        type="button"
        className="gl-pick-float"
        onClick={() => setMode('comment')}
        title="back to commenting — a toggles the pins, esc clears them"
      >
        grain lab
      </button>,
      document.body,
    )

  return createPortal(
    <>
      {/* ── the entry point ────────────────────────────────────────────────
          One button, fixed bottom right. Click it to arm the picker; click a
          component and the comment opens on that component.

          It is the whole tool's front door, which is why it says what state it
          is in rather than only what it does: armed, it is filled and the page
          has a ring round it, because a picker that is swallowing clicks and
          does not look like it is the failure this tool has already had. */}
      <div className="gl-fab-set" data-lenis-prevent ref={fabRef}>
        {/* UNFINISHED threads, not all of them. The count was `threads.length`
            — every thread ever opened on this page, resolved ones included —
            so it only ever went up, and a number that only goes up is not a
            count of anything you can act on. */}
        {onIt > 0 && (
          <button
            type="button"
            className={`gl-fab-mini ${pinsOn ? 'is-on' : ''}`}
            onClick={() => setPinsOn((v) => !v)}
            title={`${onIt} open thread(s) — a toggles them`}
          >
            {onIt}
          </button>
        )}
        {/* peek: the hover card without the picker. Lit while it is on, the
            way the count and the panel toggle are, so the three read as the
            same kind of control. */}
        {SHOW_PEEK && (
          <button
            type="button"
            className={`gl-fab-mini ${peek ? 'is-on' : ''}`}
            onClick={() => setPeek((v) => !v)}
            title={
              peek
                ? 'peek is on — hover shows what a thing is. h turns it off'
                : 'peek — hover to see what a thing is, without arming the picker. or press h'
            }
            aria-pressed={peek}
          >
            <span className="gl-glyph-peek" aria-hidden />
          </button>
        )}
        {/* where the panel lives: a floating card or a drawer on the edge */}
        {SHOW_PANEL && (
          <button
            type="button"
            className="gl-fab-mini"
            onClick={() => setDock((d) => (d === 'drawer' ? 'float' : 'drawer'))}
            title={
              dock === 'drawer'
                ? 'panel is a drawer — click to float it'
                : 'panel floats — click to dock it as a drawer'
            }
          >
            {dock === 'drawer' ? '⇤' : '⇥'}
          </button>
        )}
        {SHOW_PANEL && (
          <button
            type="button"
            className={`gl-fab-mini ${panelOn ? 'is-on' : ''}`}
            onClick={() => setPanelOn((v) => !v)}
            title="the panel — grain, notes, variants"
          >
            ≡
          </button>
        )}
        <button
          type="button"
          className={`gl-fab ${picking ? 'is-armed' : ''}`}
          onClick={toggleTool}
          title={
            picking
              ? `picking — click a component. esc or ff to stop${
                  dock === 'drawer' ? ' (and shut the drawer)' : ''
                }`
              : `comment on a component — or press ff${
                  dock === 'drawer' ? ' (it opens the drawer too)' : ''
                }`
          }
          aria-pressed={picking}
        >
          <span className="gl-fab-mark" aria-hidden />
        </button>
      </div>

      {/* A ring round the viewport whenever picking is armed.

          Pick mode swallows clicks so an element can be inspected before the
          router navigates, and the flag survives in `sessionStorage` for the
          whole tab — so a bare URL with no `?grain` on it can still have a
          live picker. That combination cost an afternoon: every link on the
          site did nothing, the URL looked innocent, and the panel in the
          corner is easy to stop seeing. The page itself now says when it is
          not behaving normally. */}
      {picking && !composing && <div className="gl-armed" aria-hidden />}

      {/* The pinned threads live on the PAGE, not in the panel — that is the
          whole feature. They are drawn whenever any exist, not only in comment
          mode: a thread you cannot see is one you forget you opened, and the
          pins are small enough to live with. */}
      {/* Drawn whenever there is anything to draw. `pinsOn` no longer decides
          WHETHER — it decides how much: off, the only thing left on the page
          is a bare marker on each component an agent is working, because
          "something is editing this under you" is not a preference. */}
      {(onIt > 0 || (pinsOn && pending.length > 0)) && (
        <Pins
          threads={threads}
          variants={variants}
          showing={showing}
          scrub={scrub}
          open={openThread}
          route={window.location.pathname}
          compose={pinsOn && mode === 'comment' ? pending : EMPTY}
          quiet={!pinsOn}
          wake={(id) => {
            setPinsOn(true)
            showThread(id)
          }}
        />
      )}

      {/* The pointer, while the picker is armed. The native cursor is hidden
          and this stands in for it: a crosshair with a button riding beside
          it, so what the pointer is FOR is legible without reading the panel.
          It is inert — the page never sees it, and it is positioned straight
          on the node from the mousemove handler above. */}
      {picking && !composing && <div className="gl-band" ref={band} aria-hidden />}

      {picking && !composing && (
        <div className="gl-cursor" ref={cursor} aria-hidden>
          <span className="gl-cursor-ring" />
          <span className="gl-cursor-dot" />
          <span className="gl-cursor-btn" />
        </div>
      )}

      {(picking || (SHOW_PEEK && peek)) && !composing && hover && (
        <div
          className={`gl-hi ${picking ? '' : 'is-peek'}`}
          style={{
            top: hover.box.top,
            left: hover.box.left,
            width: hover.box.width,
            height: hover.box.height,
          }}
        >
          <span>
            {hover.sel}
            {hover.shared > 1 && <em>×{hover.shared}</em>}
            {hover.label && <b>{hover.label.slice(0, 32)}</b>}
          </span>
        </div>
      )}

      {/* Full size, over everything, dismissed by clicking anywhere or by
          Escape — a preview you have to hunt for a close button on is worse
          than no preview. */}
      {zoom && (
        <div
          className="gl-zoom"
          data-lenis-prevent
          role="presentation"
          onClick={() => setZoom(null)}
        >
          {/* A visible way out, as well as the backdrop and Escape. Two of the
              three were invisible: a viewer you can only leave by guessing is
              a trap, however many keyboard routes it has.

              The image stops the click so only the backdrop and this button
              close it — otherwise the thing you opened to look at is also the
              thing that dismisses it the moment you touch it. */}
          <button
            type="button"
            className="gl-zoom-x"
            title="close"
            onClick={() => setZoom(null)}
          >
            × close <kbd>esc</kbd>
          </button>
          <img
            src={shotUrl(zoom)}
            alt=""
            role="presentation"
            onClick={(e) => e.stopPropagation()}
          />
        </div>
      )}

      {/* A closed drawer leaves a tab on the edge. A closed floating card
          leaves nothing, because the ≡ on the FAB is already that — and a
          drawer whose only way back is a small button in a corner it is not
          in is a drawer you lose. */}
      {SHOW_PANEL && dock === 'drawer' && !panelOn && (
        <button
          type="button"
          className="gl-dock-tab"
          onClick={() => setPanelOn(true)}
          title="open the panel"
        >
          <span aria-hidden>≡</span>
        </button>
      )}

      {/* KEYED ON `dock`. The geometry below is a ref callback that runs once
          per node: the saved position, the drag on the bar, the resize
          observer. A drawer wants none of it, and a card that turns back into
          one wants all of it back — so a toggle remounts the node rather than
          trying to attach and detach four listeners in place. */}
      {SHOW_PANEL && (
        <div
          key={dock}
          className={`gl-panel ${dock === 'drawer' ? 'gl-drawer' : ''} ${
            panelOn ? '' : 'gl-panel-off'
          }`}
          data-lenis-prevent
          ref={panelRef}
        >
          <div className="gl-bar">
            <b>grain lab</b>
            <span className="gl-dim">
              {!loaded ? (
                'loading…'
              ) : working ? (
                <span className="gl-busy">
                  <i />
                  claude is on {working === 1 ? 'a note' : `${working} notes`}
                </span>
              ) : saving ? (
                'saving…'
              ) : (
                ''
              )}
            </span>
            <button
              type="button"
              className="gl-bar-btn"
              onClick={() => setDock((d) => (d === 'drawer' ? 'float' : 'drawer'))}
              title={dock === 'drawer' ? 'float the panel' : 'dock the panel as a drawer'}
            >
              {dock === 'drawer' ? '⇤' : '⇥'}
            </button>
            <button
              type="button"
              className="gl-bar-btn"
              onClick={() => setPanelOn(false)}
              title="close the panel"
            >
              ×
            </button>
            <kbd>a</kbd>
          </div>

          {/* What a click on the page does, as one exclusive control with a line
            under it saying so. The old pair of independent toggles never
            answered that question, which is the whole job of this row. */}
          <div className="gl-seg" role="group" aria-label="mode">
            {(['comment', 'browse', 'preview'] as const).map((m) => (
              <button
                key={m}
                type="button"
                className={mode === m ? 'gl-on' : ''}
                onClick={() => setMode(m)}
              >
                {m}
              </button>
            ))}
          </div>
          <p className="gl-hint">{MODE_HINT[mode]}</p>

          {/* The selected element and the one thing you can do to it. Without
            the caption this was a bare selector floating above a text field,
            and nothing said the field wrote a note *about* that selector. */}
          {active ? (
            <div className="gl-sel">
              <span className="gl-cap">selected</span>
              <div className="gl-sel-head">
                <code>{active}</code>
                {target && target.shared > 1 && (
                  <span
                    className="gl-share"
                    title={`${target.shared} elements share ${active}`}
                  >
                    1 of {target.shared}
                  </span>
                )}
                <button type="button" onClick={() => setActive(null)} title="deselect">
                  ×
                </button>
              </div>
              {/* the element's own words. Without this the panel could not tell
                two `.btn`s apart, and neither could the notes file — a note on
                the contact submit came back as a change to the hero CTA. */}
              {target?.label && <span className="gl-said">“{target.label}”</span>}
              {/* A textarea, not an input: notes run to two or three sentences
                and a single line hid everything but the tail of them.

                Enter still sends, because that is the habit the tool was
                built with — shift+enter is the newline.

                The stopPropagation is what keeps `a` from toggling preview
                mid-word. Escape is let through it on purpose, so you can leave
                for preview without clicking out of the box first. */}
              <textarea
                ref={field}
                rows={1}
                value={draft}
                placeholder="what should change here?  ↵ to send, ⇧↵ newline, ⌘V an image"
                onChange={(e) => setDraft(e.target.value)}
                onPaste={paste}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault()
                    submitNote()
                    return
                  }
                  if (MODE_KEYS.has(e.key.toLowerCase())) return
                  e.stopPropagation()
                }}
              />
              {/* What is attached, said in words as well as in pictures. Small
                tiles in a dark panel are easy to miss, and "did that paste
                work?" is the one question this has to answer without being
                asked — so the count appears on the frame of the paste, not
                when the upload finishes. */}
              {(shots.length > 0 || busy > 0) && (
                <div className="gl-att">
                  <span className="gl-att-n">
                    {busy > 0
                      ? `attaching ${busy}…`
                      : `${shots.length} image${shots.length === 1 ? '' : 's'} attached`}
                  </span>
                  <div className="gl-shots">
                    {shots.map((p) => (
                      <span key={p} className="gl-shot">
                        <button type="button" title="preview" onClick={() => setZoom(p)}>
                          <img src={shotUrl(p)} alt="" />
                        </button>
                        <button
                          type="button"
                          className="gl-shot-x"
                          title="remove"
                          onClick={() => setShots((s) => s.filter((x) => x !== p))}
                        >
                          ×
                        </button>
                      </span>
                    ))}
                  </div>
                </div>
              )}
            </div>
          ) : (
            <p className="gl-hint gl-quiet">nothing selected</p>
          )}

          <div className="gl-tabs">
            <button
              type="button"
              className={tab === 'grain' ? 'gl-on' : ''}
              onClick={() => setTab('grain')}
            >
              grain {entries.length}
            </button>
            <button
              type="button"
              className={tab === 'notes' ? 'gl-on' : ''}
              onClick={() => setTab('notes')}
            >
              notes {open}/{notes.length}
            </button>
            <button
              type="button"
              className={tab === 'variants' ? 'gl-on' : ''}
              onClick={() => setTab('variants')}
            >
              variants {open2.length}
            </button>
          </div>

          {tab === 'variants' ? (
            <>
              <div className="gl-list gl-vars">
                {loose.length === 0 && (
                  <p className="gl-hint gl-quiet">
                    ask for variants in a note — “give me 3 versions of this”
                  </p>
                )}
                {openOnThreads > 0 && (
                  <p className="gl-hint gl-quiet">
                    {openOnThreads} more waiting on {openOnThreads === 1 ? 'a' : ''}{' '}
                    comment
                    {openOnThreads === 1 ? '' : 's'} — press <kbd>a</kbd> to show the pins
                  </p>
                )}
                {loose.map((v) => {
                  const live = showing[v.id] ?? []
                  const done = chosenKeys(v)
                  const thread = v.messages ?? []
                  return (
                    <div key={v.id} className={done ? 'gl-var gl-done' : 'gl-var'}>
                      <b>{v.selector}</b>
                      {v.label && (
                        <span className="gl-said">“{v.label.slice(0, 40)}”</span>
                      )}
                      <p>{v.ask}</p>

                      {/* The original is always one of the choices. Without it you
                        are comparing three alternatives to a memory of what was
                        there, which is how a set of variants talks you into a
                        change you did not want. */}
                      <div className="gl-var-keys">
                        <button
                          type="button"
                          className={live.length === 0 ? 'gl-on' : ''}
                          onClick={() => showVariant(v.id, '')}
                          title="as it is now"
                        >
                          original
                        </button>
                        {v.options.map((o) => (
                          <button
                            key={o.key}
                            type="button"
                            className={live.includes(o.key) ? 'gl-on' : ''}
                            onClick={() => showVariant(v.id, o.key)}
                            title={o.note ?? o.label}
                          >
                            {o.label}
                          </button>
                        ))}
                      </div>

                      {live.length > 0 && !done && (
                        <div className="gl-var-act">
                          <span className="gl-dim">
                            {v.options.find((o) => o.key === live[0])?.note ?? ''}
                          </span>
                          <button
                            type="button"
                            className="gl-var-use"
                            onClick={() => chooseVariant(v.id, live)}
                          >
                            use this
                          </button>
                        </div>
                      )}
                      {done && (
                        <div className="gl-var-act">
                          <span className="gl-dim">
                            chose{' '}
                            {done.length === 0
                              ? 'original'
                              : done
                                  .map(
                                    (k) => v.options.find((o) => o.key === k)?.label ?? k,
                                  )
                                  .join(' + ')}
                            {' · being written in'}
                          </span>
                          <button type="button" onClick={() => dropVariantSet(v.id)}>
                            dismiss
                          </button>
                        </div>
                      )}

                      {/* The words the chips cannot hold. A combination is often
                        "the second one's layout but keep the first one's
                        colour", which is not a subset of the options — so the
                        set carries a thread, it goes to disk like everything
                        else here, and the watcher reads it out. */}
                      {thread.length > 0 && (
                        <div className="gl-var-thread">
                          {thread.map((m) => (
                            <p key={m.id} className={`gl-say-${m.from}`}>
                              <b>{m.from}</b> {m.text}
                            </p>
                          ))}
                        </div>
                      )}
                      <form
                        className="gl-var-say"
                        onSubmit={(e) => {
                          e.preventDefault()
                          sayVariant(v.id, says[v.id] ?? '')
                          setSays({ ...says, [v.id]: '' })
                        }}
                      >
                        <input
                          value={says[v.id] ?? ''}
                          onChange={(e) => setSays({ ...says, [v.id]: e.target.value })}
                          placeholder="or say what you want combined…"
                          aria-label="message about these variants"
                        />
                        <button type="submit" disabled={!(says[v.id] ?? '').trim()}>
                          send
                        </button>
                      </form>
                    </div>
                  )
                })}
              </div>
            </>
          ) : tab === 'grain' ? (
            <>
              {entries.length > 0 && (
                <div className="gl-list">
                  {entries.map((e) => (
                    <div
                      key={e.selector}
                      className={e.selector === active ? 'gl-row gl-act' : 'gl-row'}
                    >
                      <button type="button" onClick={() => setActive(e.selector)}>
                        {e.selector}
                      </button>
                      <i>{e.cfg.op}</i>
                      <button
                        type="button"
                        onClick={() => removeEntry(e.selector)}
                        title="remove grain"
                      >
                        ×
                      </button>
                    </div>
                  ))}
                </div>
              )}

              {cfg ? (
                <div className="gl-ctl">
                  <label>
                    <span>opacity</span>
                    <input
                      type="range"
                      min={0}
                      max={1}
                      step={0.01}
                      value={cfg.op}
                      onChange={(e) => updateActive({ op: +e.target.value })}
                    />
                    <i>{cfg.op}</i>
                  </label>
                  <label>
                    <span>tile</span>
                    <input
                      type="range"
                      min={40}
                      max={480}
                      step={10}
                      value={cfg.size}
                      onChange={(e) => updateActive({ size: +e.target.value })}
                    />
                    <i>{cfg.size}px</i>
                  </label>
                  <label>
                    <span>blend</span>
                    <select
                      value={cfg.blend}
                      onChange={(e) => updateActive({ blend: e.target.value })}
                    >
                      {BLENDS.map((b) => (
                        <option key={b} value={b}>
                          {b}
                        </option>
                      ))}
                    </select>
                    <i />
                  </label>
                </div>
              ) : active ? (
                /* explicit, because clicking the page used to do this on its own
                 and quietly grained every container anyone ever pointed at */
                <div className="gl-acts">
                  <button type="button" onClick={() => addEntry(active)}>
                    + grain {active}
                  </button>
                </div>
              ) : (
                <p className="gl-hint gl-quiet">
                  {entries.length ? 'pick a row to dial it' : 'select something first'}
                </p>
              )}

              <div className="gl-acts">
                <button
                  type="button"
                  onClick={() => copy(css)}
                  disabled={!entries.length}
                >
                  {copied ? 'copied' : 'copy css'}
                </button>
                <button type="button" onClick={clearGrain} disabled={!entries.length}>
                  clear all
                </button>
              </div>
            </>
          ) : (
            <>
              <div className="gl-list gl-notes">
                {notes.length === 0 && (
                  <p className="gl-hint gl-quiet">select something, then write a note</p>
                )}
                {ordered.map(({ n }) => (
                  <div
                    key={n.id}
                    className={[
                      'gl-note',
                      n.done && 'gl-done',
                      !n.done && n.working && 'gl-working',
                    ]
                      .filter(Boolean)
                      .join(' ')}
                  >
                    <button
                      type="button"
                      className="gl-tick"
                      onClick={() => toggleNote(n.id)}
                      title={
                        n.done
                          ? 'mark not done'
                          : n.working
                            ? 'being worked on — click to mark done'
                            : 'mark done'
                      }
                    >
                      {n.done ? '✓' : n.working ? <i className="gl-spin" /> : '○'}
                    </button>
                    <div>
                      <b>{n.selector}</b>
                      {n.label && (
                        <span className="gl-said">“{n.label.slice(0, 40)}”</span>
                      )}
                      <span className="gl-route">{n.route}</span>
                      <p>{n.text}</p>
                      {n.shots?.length ? (
                        <div className="gl-shots gl-shots-sm">
                          {n.shots.map((p) => (
                            <span key={p} className="gl-shot">
                              <button
                                type="button"
                                title="preview"
                                onClick={() => setZoom(p)}
                              >
                                <img src={shotUrl(p)} alt="" />
                              </button>
                            </span>
                          ))}
                        </div>
                      ) : null}
                    </div>
                    <button type="button" onClick={() => removeNote(n.id)} title="delete">
                      ×
                    </button>
                  </div>
                ))}
              </div>
              <div className="gl-acts">
                <button
                  type="button"
                  onClick={() =>
                    copy(
                      notes
                        .filter((n) => !n.done)
                        .map(noteLine)
                        .join('\n'),
                    )
                  }
                  disabled={!open}
                >
                  {copied ? 'copied' : `copy ${open} open`}
                </button>
              </div>
            </>
          )}
        </div>
      )}
    </>,
    document.body,
  )
}