@pascal-app/editor 1.0.4 → 1.0.5

package/src/components/editor/room-labels.tsx

@@ -4,14 +4,17 @@ import {
   type AnyNode,
   type AnyNodeId,
   area,
+  containsPoint,
   DEFAULT_LEVEL_HEIGHT,
   emitter,
+  type Polygon,
   polygonInteriorPoint,
+  type Ring,
   sceneRegistry,
   useScene,
   type ZoneNode,
 } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { timeSpan, useViewer } from '@pascal-app/viewer'
 import { Html } from '@react-three/drei'
 import { useFrame, useThree } from '@react-three/fiber'
 import {
@@ -27,9 +30,19 @@ import {
   useMemo,
   useRef,
   useState,
+  useSyncExternalStore,
 } from 'react'
 import { createPortal } from 'react-dom'
-import { type Group, type Object3D, Vector3 } from 'three'
+import {
+  type Camera,
+  type Group,
+  Matrix4,
+  type Object3D,
+  Ray,
+  Raycaster,
+  Vector2,
+  Vector3,
+} from 'three'
 import { useShallow } from 'zustand/react/shallow'
 import { useRoomRecords } from '../../hooks/use-selected-room'
 import { getAreaUnitLabel, type LinearUnit, squareMetersToAreaUnit } from '../../lib/measurements'
@@ -122,31 +135,45 @@ function useRoomLabelsVisible() {
   })
 }
 
-type LabelRect = { left: number; top: number; right: number; bottom: number }
+export type LabelRect = { left: number; top: number; right: number; bottom: number }
+type PaneSize = { width: number; height: number }
 
 /** A pill's screen rect: centred on where its anchor lands, at its size. */
 export function pillRect(x: number, y: number, [width, height]: readonly [number, number]) {
   return { left: x - width / 2, top: y - height / 2, right: x + width / 2, bottom: y + height / 2 }
 }
 
-/** A pill to place: where its room's anchor lands on screen, its full size and its room's area. */
+/** A pill's measured size: its full width, its height, and its width with the name alone. */
+export type PillSize = readonly [fullWidth: number, height: number, nameWidth: number]
+
+/** How much of a pill shows: dot, name and area; dot and name; its dot; nothing. */
+export type PillTier = 'full' | 'name' | 'dot' | 'hidden'
+
+/** Where a pill goes: how much of it shows, moved `dy` px off its anchor. */
+export type PillPlacement = { tier: PillTier; dy: number }
+
+/**
+ * A pill to place: where its room's anchor lands on screen, its size, its
+ * room's area and the part of the room's outline in front of the camera, on
+ * screen.
+ */
 export type PillCandidate = {
   id: string
   x: number
   y: number
-  size: readonly [number, number]
+  size: PillSize
   area: number
+  outline: Polygon
 }
 
-/** Where a pill goes: in full (moved `dy` px off its anchor), as its colour dot, or nowhere. */
-export type PillPlacement = { mode: 'full' | 'dot' | 'hidden'; dy: number }
-
 /** The collapsed pill: its colour dot in a small round box. */
-export const PILL_DOT_SIZE = 16
-const PILL_GAP = 2
+const PILL_DOT_SIZE = 16
+/** The clear space around a placed pill, and around the detail chip. */
+export const PILL_GAP = 4
 const NUDGE_STEP = 4
+const TIERS = ['full', 'name', 'dot'] as const
 
-function overlaps(a: LabelRect, b: LabelRect) {
+function near(a: LabelRect, b: LabelRect) {
   return (
     a.left < b.right + PILL_GAP &&
     b.left < a.right + PILL_GAP &&
@@ -155,52 +182,162 @@ function overlaps(a: LabelRect, b: LabelRect) {
   )
 }
 
-/** 0, then up and down by growing steps, up to `budget` px either way. */
-function* nudges(budget: number) {
+function tierSize(size: PillSize, tier: Exclude<PillTier, 'hidden'>): readonly [number, number] {
+  if (tier === 'full') return [size[0], size[1]]
+  if (tier === 'name') return [size[2], size[1]]
+  return [PILL_DOT_SIZE, PILL_DOT_SIZE]
+}
+
+/** The rect a placed pill takes on screen, or null when it is hidden. */
+export function placedRect(pill: PillCandidate, { tier, dy }: PillPlacement): LabelRect | null {
+  return tier === 'hidden' ? null : pillRect(pill.x, pill.y + dy, tierSize(pill.size, tier))
+}
+
+function segmentTouchesRect(
+  [ax, ay]: readonly [number, number],
+  [bx, by]: readonly [number, number],
+  rect: LabelRect,
+) {
+  if (
+    Math.max(ax, bx) < rect.left ||
+    Math.min(ax, bx) > rect.right ||
+    Math.max(ay, by) < rect.top ||
+    Math.min(ay, by) > rect.bottom
+  )
+    return false
+  // Liang–Barsky: narrow the segment's span to each side of the rect in turn.
+  let t0 = 0
+  let t1 = 1
+  const clip = (p: number, q: number) => {
+    if (p === 0) return q >= 0
+    const t = q / p
+    if (p < 0) {
+      if (t > t1) return false
+      if (t > t0) t0 = t
+    } else {
+      if (t < t0) return false
+      if (t < t1) t1 = t
+    }
+    return true
+  }
+  return (
+    clip(ax - bx, ax - rect.left) &&
+    clip(bx - ax, rect.right - ax) &&
+    clip(ay - by, ay - rect.top) &&
+    clip(by - ay, rect.bottom - ay)
+  )
+}
+
+function ringTouchesRect(ring: Ring, rect: LabelRect) {
+  for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+    if (segmentTouchesRect(ring[j]!, ring[i]!, rect)) return true
+  }
+  return false
+}
+
+/**
+ * Whether `rect` lies inside `outline`: no edge of the outline or its holes
+ * touches the rect, and the rect's centre is inside.
+ */
+function rectInPolygon(rect: LabelRect, outline: Polygon): boolean {
+  if (ringTouchesRect(outline.outer, rect)) return false
+  if (outline.holes.some((hole) => ringTouchesRect(hole, rect))) return false
+  return containsPoint([outline], [(rect.left + rect.right) / 2, (rect.top + rect.bottom) / 2])
+}
+
+/**
+ * 0, then the nudge the pill took last time (so it keeps to that side), then
+ * up and down by growing steps, up to `budget` px either way.
+ */
+function* nudges(budget: number, previous: number | undefined) {
   yield 0
+  if (previous) yield previous
   for (let d = NUDGE_STEP; d <= budget; d += NUDGE_STEP) {
-    yield -d
-    yield d
+    if (-d !== previous) yield -d
+    if (d !== previous) yield d
+  }
+}
+
+function ringBox(ring: Ring): LabelRect {
+  const box = { left: Infinity, top: Infinity, right: -Infinity, bottom: -Infinity }
+  for (const [x, y] of ring) {
+    box.left = Math.min(box.left, x)
+    box.top = Math.min(box.top, y)
+    box.right = Math.max(box.right, x)
+    box.bottom = Math.max(box.bottom, y)
   }
+  return box
+}
+
+function slotFor(
+  pill: PillCandidate,
+  bounds: PaneSize,
+  placed: LabelRect[],
+  previous: PillPlacement | undefined,
+): PillPlacement {
+  const { outline } = pill
+  // The pane, narrowed to the room's bounding box: cheap to reject against.
+  const box = ringBox(outline.outer)
+  box.left = Math.max(box.left, 0)
+  box.top = Math.max(box.top, 0)
+  box.right = Math.min(box.right, bounds.width)
+  box.bottom = Math.min(box.bottom, bounds.height)
+  for (const tier of TIERS) {
+    const size = tierSize(pill.size, tier)
+    // Wider or taller than the room's box: no nudge fits it.
+    if (size[0] > box.right - box.left || size[1] > box.bottom - box.top) continue
+    const budget = tier === 'dot' ? PILL_DOT_SIZE : pill.size[1]
+    for (const dy of nudges(budget, previous?.tier === tier ? previous.dy : undefined)) {
+      const rect = pillRect(pill.x, pill.y + dy, size)
+      if (
+        rect.left < box.left ||
+        rect.top < box.top ||
+        rect.right > box.right ||
+        rect.bottom > box.bottom
+      )
+        continue
+      if (!rectInPolygon(rect, outline)) continue
+      if (placed.some((other) => near(rect, other))) continue
+      placed.push(rect)
+      return { tier, dy }
+    }
+  }
+  return { tier: 'hidden', dy: 0 }
 }
 
 /**
- * Where every pill goes so none overlap. Larger rooms are placed first (ties
- * by id, so the order is stable while the camera moves). A pill that overlaps
- * one already placed takes the nearest free slot above or below its room,
- * within one pill height; failing that it collapses to its colour dot, which
- * takes the nearest free slot the same way; only a dot with no free slot is
- * hidden.
+ * Where every pill goes, so that none overlap and each stays inside its room
+ * and the pane. Larger rooms are placed first (ties by id, so the order holds
+ * while the camera moves). Each pill takes the first slot that fits: its full
+ * pill, then its name alone, then its dot, each at its anchor or nudged up or
+ * down; with no slot it is hidden. A room's size on screen decides how much of
+ * its label shows, so the detail follows the zoom.
  */
-export function placePills(candidates: readonly PillCandidate[]): Map<string, PillPlacement> {
+export function placePills(
+  candidates: readonly PillCandidate[],
+  bounds: PaneSize,
+  previous: ReadonlyMap<string, PillPlacement> = new Map(),
+): Map<string, PillPlacement> {
   const placed: LabelRect[] = []
   const placements = new Map<string, PillPlacement>()
   const order = [...candidates].sort(
     (a, b) => b.area - a.area || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0),
   )
-  for (const pill of order) {
-    let placement: PillPlacement = { mode: 'hidden', dy: 0 }
-    for (const dy of nudges(pill.size[1])) {
-      const rect = pillRect(pill.x, pill.y + dy, pill.size)
-      if (placed.some((other) => overlaps(rect, other))) continue
-      placed.push(rect)
-      placement = { mode: 'full', dy }
-      break
-    }
-    if (placement.mode === 'hidden') {
-      for (const dy of nudges(pill.size[1])) {
-        const dot = pillRect(pill.x, pill.y + dy, [PILL_DOT_SIZE, PILL_DOT_SIZE])
-        if (placed.some((other) => overlaps(dot, other))) continue
-        placed.push(dot)
-        placement = { mode: 'dot', dy }
-        break
-      }
-    }
-    placements.set(pill.id, placement)
-  }
+  for (const pill of order)
+    placements.set(pill.id, slotFor(pill, bounds, placed, previous.get(pill.id)))
   return placements
 }
 
+/** The placed pills whose rects come within the gap of `chip`. */
+export function suppressedBy(
+  chip: LabelRect,
+  rects: ReadonlyMap<string, LabelRect>,
+): ReadonlySet<string> {
+  const ids = new Set<string>()
+  for (const [id, rect] of rects) if (near(chip, rect)) ids.add(id)
+  return ids
+}
+
 export type RoomLabelEntry = {
   zoneId: string
   polygon: [number, number][]
@@ -209,6 +346,42 @@ export type RoomLabelEntry = {
 }
 type LabelEntry = RoomLabelEntry
 
+/** Where the pointer meets a room's plane: the point in it, and how far along the pointer's ray. */
+export type RoomHit = readonly [x: number, y: number, distance: number]
+
+// Planes closer together than this along the ray (in metres) count as one floor.
+const SAME_FLOOR = 1e-3
+
+/**
+ * The room under the pointer: of the rooms whose outline, holes excluded,
+ * holds the point where the pointer meets their plane, the nearest along the
+ * pointer's ray (the floor it reaches first), then the smallest (a zone drawn
+ * inside a room, on the same floor). `pointOn` gives that point for each room
+ * (in 3D, where the ray meets the room's floor), or null if it never meets it.
+ */
+export function roomAt(
+  entries: readonly RoomLabelEntry[],
+  pointOn: (entry: RoomLabelEntry) => RoomHit | null,
+): string | null {
+  let found: RoomLabelEntry | null = null
+  let foundAt = Number.POSITIVE_INFINITY
+  for (const entry of entries) {
+    const hit = pointOn(entry)
+    if (!hit) continue
+    const [x, y, distance] = hit
+    if (found) {
+      const nearer = distance < foundAt - SAME_FLOOR
+      const sameFloor = !nearer && distance <= foundAt + SAME_FLOOR
+      if (!(nearer || (sameFloor && entry.area < found.area))) continue
+    }
+    if (containsPoint([{ outer: entry.polygon, holes: entry.holes }], [x, y])) {
+      found = entry
+      foundAt = distance
+    }
+  }
+  return found?.zoneId ?? null
+}
+
 // Mid-height of a default storey: above furniture, below the ceiling.
 const LABEL_HEIGHT = DEFAULT_LEVEL_HEIGHT / 2
 // The view has to hold still this long before pills are re-placed; while it
@@ -217,9 +390,13 @@ const DECLUTTER_REST_SECONDS = 0.12
 // Below this the view counts as still: well under a pixel on screen.
 const VIEW_EPSILON = 1e-4
 /** How long a pill takes to fade, move or collapse. */
-export const PILL_FADE_MS = 180
-
-const labelWorld = new Vector3()
+const PILL_FADE_MS = 180
+/** How long the pointer rests on a room before its detail opens. */
+export const REVEAL_DWELL_MS = 80
+/** How long the detail stays once the pointer has left its room. */
+export const REVEAL_GRACE_MS = 120
+// The detail chip stays this far inside its layer.
+const DETAIL_INSET = 8
 
 function pillFadeMs(): number {
   return typeof window !== 'undefined' &&
@@ -241,6 +418,11 @@ export class DeclutterClock {
   private settled = false
   private dirty = true
 
+  /** Whether the view rests and its pills were placed for it. */
+  get atRest() {
+    return this.settled
+  }
+
   /** The pills changed (mounted, unmounted, resized): place them again. */
   invalidate() {
     this.dirty = true
@@ -290,56 +472,84 @@ export class PillElements extends Map<string, HTMLElement> {
   }
 }
 
-/** Read the full border-box in CSS pixels, even when the dot is showing. */
+/** Where each room's pill floats, level-local; moving one has the pills placed again. */
+export class RoomAnchors extends Map<string, Vector3> {
+  onMove: (() => void) | null = null
+
+  override set(id: string, position: Vector3) {
+    const moved = !this.get(id)?.equals(position)
+    super.set(id, position)
+    if (moved) this.onMove?.()
+    return this
+  }
+}
+
+/** Read a pill's full border-box and its width without the area, whatever it shows now. */
 export function measureFullPill(
   element: HTMLElement,
-  read: (element: HTMLElement) => Pick<CSSStyleDeclaration, 'width' | 'height'> = getComputedStyle,
-): readonly [number, number] {
-  const collapsed = element.dataset.roomLabelCollapsed
-  delete element.dataset.roomLabelCollapsed
+  read: (
+    element: Element,
+  ) => Pick<CSSStyleDeclaration, 'width' | 'height' | 'columnGap'> = getComputedStyle,
+): PillSize {
+  const tier = element.dataset.roomLabelTier
+  delete element.dataset.roomLabelTier
   try {
     const style = read(element)
-    return [Number.parseFloat(style.width), Number.parseFloat(style.height)]
+    const width = Number.parseFloat(style.width)
+    const areaLabel = element.querySelector('[data-room-label-area]')
+    const areaWidth = areaLabel
+      ? Number.parseFloat(read(areaLabel).width) + Number.parseFloat(style.columnGap)
+      : 0
+    return [width, Number.parseFloat(style.height), width - areaWidth]
   } finally {
-    if (collapsed !== undefined) element.dataset.roomLabelCollapsed = collapsed
+    if (tier !== undefined) element.dataset.roomLabelTier = tier
   }
 }
 
 type Timer = ReturnType<typeof setTimeout>
+// Wrapped, not passed as is: browsers throw "Illegal invocation" when the
+// global timers are called as methods of another object.
+const startTimer = (run: () => void, ms: number): Timer => setTimeout(run, ms)
+const stopTimer = (timer: Timer) => clearTimeout(timer)
 
 /**
  * Applies placements to the mounted pills as direct style writes: the nudge
- * as a `translate`, the dot as `data-room-label-collapsed`, both eased by the
- * pill's transition. A hidden pill fades out without taking the pointer, then
- * leaves the DOM (`gone`); one given room again mounts and fades back in.
+ * as a `translate`, the tier as `data-room-label-tier`, both eased by the
+ * pill's transition. A pill placed hidden fades out without taking the
+ * pointer, then leaves the DOM (`gone`); one given room again mounts and fades
+ * back in. A mounted pill that a pass leaves out (not measured yet, or its
+ * anchor off screen) waits hidden: no pill shows that placement has not
+ * cleared.
  */
 export class PillPlacer {
   gone: ReadonlySet<string> = new Set()
-  private placements = new Map<string, PillPlacement>()
+  /** The last pass's placements: a remounting pill takes its own at once. */
+  placements: ReadonlyMap<string, PillPlacement> = new Map()
   private readonly fading = new Map<string, Timer>()
+  private suppressed: ReadonlySet<string> = new Set()
+  private open: string | null = null
+  private shown = true
 
   constructor(
     private readonly elements: ReadonlyMap<string, HTMLElement>,
     private readonly onGone: (gone: ReadonlySet<string>) => void,
-    private readonly schedule: (run: () => void, ms: number) => Timer = setTimeout,
-    private readonly cancel: (timer: Timer) => void = clearTimeout,
+    private readonly schedule: (run: () => void, ms: number) => Timer = startTimer,
+    private readonly cancel: (timer: Timer) => void = stopTimer,
   ) {}
 
   apply(placements: ReadonlyMap<string, PillPlacement>, fadeMs = pillFadeMs()) {
-    this.placements = new Map([...this.placements, ...placements])
+    this.placements = placements
     for (const [id, element] of this.elements) {
       const placement = placements.get(id)
-      if (!placement) continue
-      if (placement.mode !== 'hidden') {
+      if (placement && placement.tier !== 'hidden') {
         const timer = this.fading.get(id)
         if (timer !== undefined) this.cancel(timer)
         this.fading.delete(id)
-        delete element.dataset.roomLabelHidden
-        placePill(element, placement)
+        this.show(element, placement)
         continue
       }
-      if (this.fading.has(id)) continue
       element.dataset.roomLabelHidden = ''
+      if (!placement || this.fading.has(id)) continue
       this.fading.set(
         id,
         this.schedule(() => {
@@ -348,18 +558,27 @@ export class PillPlacer {
         }, fadeMs),
       )
     }
-    const kept = [...this.gone].filter((id) => {
-      const placement = placements.get(id)
-      return !placement || placement.mode === 'hidden'
-    })
+    const kept = [...this.gone].filter((id) => (placements.get(id)?.tier ?? 'hidden') === 'hidden')
     if (kept.length !== this.gone.size) this.setGone(new Set(kept))
   }
 
-  /** A pill mounting takes its last placement at once. */
+  /** A pill mounting takes its last placement at once, or waits hidden for one. */
   mount(id: string, element: HTMLElement) {
     const placement = this.placements.get(id)
-    if (placement?.mode === 'hidden') element.dataset.roomLabelHidden = ''
-    else if (placement) placePill(element, placement)
+    if (placement && placement.tier !== 'hidden') this.show(element, placement)
+    else element.dataset.roomLabelHidden = ''
+    this.mark(id, element)
+  }
+
+  /**
+   * Fade the pills under the detail chip out of its way, and every other back.
+   * The open room's own pill fades too but still takes the pointer: the chip
+   * over it is read-only, so the pill stays the control.
+   */
+  suppress(ids: ReadonlySet<string>, open: string | null) {
+    this.suppressed = ids
+    this.open = open
+    for (const [id, element] of this.elements) this.mark(id, element)
   }
 
   /** Remount hidden pills invisibly so changed text or fonts can be measured. */
@@ -367,11 +586,13 @@ export class PillPlacer {
     if (this.gone.size) this.setGone(new Set())
   }
 
-  /** Fade every mounted pill out (the layer is leaving), or back in. */
+  /** Fade every mounted pill out (the layer is leaving), or the placed ones back in. */
   showAll(shown: boolean) {
+    this.shown = shown
     for (const [id, element] of this.elements) {
-      if (!shown) element.dataset.roomLabelHidden = ''
-      else if (!this.fading.has(id)) delete element.dataset.roomLabelHidden
+      const placement = this.placements.get(id)
+      if (shown && placement && placement.tier !== 'hidden') delete element.dataset.roomLabelHidden
+      else element.dataset.roomLabelHidden = ''
     }
   }
 
@@ -380,16 +601,141 @@ export class PillPlacer {
     this.fading.clear()
   }
 
+  private show(element: HTMLElement, { tier, dy }: PillPlacement) {
+    const translate = dy ? `0 ${dy}px` : ''
+    if (element.style.translate !== translate) element.style.translate = translate
+    if (tier === 'full') delete element.dataset.roomLabelTier
+    else if (element.dataset.roomLabelTier !== tier) element.dataset.roomLabelTier = tier
+    if (this.shown) delete element.dataset.roomLabelHidden
+    else element.dataset.roomLabelHidden = ''
+  }
+
+  private mark(id: string, element: HTMLElement) {
+    const { dataset } = element
+    if (id === this.open) dataset.roomLabelOpen = ''
+    else delete dataset.roomLabelOpen
+    if (id !== this.open && this.suppressed.has(id)) dataset.roomLabelSuppressed = ''
+    else delete dataset.roomLabelSuppressed
+  }
+
   private setGone(gone: ReadonlySet<string>) {
     this.gone = gone
     this.onGone(gone)
   }
 }
 
-function placePill(element: HTMLElement, placement: PillPlacement) {
-  element.style.translate = placement.dy ? `0 ${placement.dy}px` : ''
-  if (placement.mode === 'dot') element.dataset.roomLabelCollapsed = ''
-  else delete element.dataset.roomLabelCollapsed
+/**
+ * Which room's detail chip is open. A pill under the pointer, or a pill with
+ * keyboard focus, opens at once; when both are set, whichever moved last
+ * wins. Otherwise the room under the pointer opens once the pointer has
+ * rested on it for a moment, and stays a moment after the pointer leaves, so
+ * crossing a wall hands over from one room to the next without a gap and
+ * passing over a room opens nothing. Escape closes it until the pointer or
+ * focus moves on to another room.
+ */
+export class LabelReveal {
+  active: string | null = null
+  private activeFocused = false
+  private hovered: string | null = null
+  private focused: string | null = null
+  private picked: string | null = null
+  private keyboardLast = false
+  private dismissed: string | null = null
+  private pending: { id: string | null; timer: Timer } | null = null
+
+  constructor(
+    private readonly onChange: (id: string | null, focused: boolean) => void,
+    private readonly schedule: (run: () => void, ms: number) => Timer = startTimer,
+    private readonly cancel: (timer: Timer) => void = stopTimer,
+  ) {}
+
+  /** The pill under the pointer. */
+  hover(id: string | null) {
+    if (id !== null && id !== this.hovered) this.keyboardLast = false
+    this.hovered = id
+    this.update()
+  }
+
+  /** The pill with keyboard focus. */
+  focus(id: string | null) {
+    if (id !== null) this.keyboardLast = true
+    this.focused = id
+    this.update()
+  }
+
+  /** The room under the pointer. */
+  pick(id: string | null) {
+    this.picked = id
+    this.update()
+  }
+
+  /** Close what is open, and keep it closed while the pointer and focus stay on it. */
+  dismiss() {
+    if (this.active === null) return
+    this.dismissed = this.active
+    this.stop()
+    this.set(null)
+  }
+
+  /**
+   * Close at once and forget the pointer: the view moved, or the layer hid.
+   * Focus is kept, so a focused pill opens again once the view rests.
+   */
+  clear() {
+    this.hovered = null
+    this.picked = null
+    this.stop()
+    this.set(null)
+  }
+
+  private update() {
+    const direct = this.keyboardLast
+      ? (this.focused ?? this.hovered)
+      : (this.hovered ?? this.focused)
+    if (this.dismissed !== null) {
+      if ((direct ?? this.picked) === this.dismissed) {
+        this.stop()
+        return
+      }
+      this.dismissed = null
+    }
+    if (direct) {
+      this.stop()
+      this.set(direct)
+      return
+    }
+    const next = this.picked
+    if (next === this.active) {
+      this.stop()
+      this.set(next)
+      return
+    }
+    if (this.pending && this.pending.id === next) return
+    this.stop()
+    this.pending = {
+      id: next,
+      timer: this.schedule(
+        () => {
+          this.pending = null
+          this.set(next)
+        },
+        next ? REVEAL_DWELL_MS : REVEAL_GRACE_MS,
+      ),
+    }
+  }
+
+  private stop() {
+    if (this.pending) this.cancel(this.pending.timer)
+    this.pending = null
+  }
+
+  private set(id: string | null) {
+    const focused = id !== null && this.focused === id
+    if (id === this.active && focused === this.activeFocused) return
+    this.active = id
+    this.activeFocused = focused
+    this.onChange(id, focused)
+  }
 }
 
 /** True while `shown`, and through the fade once it turns false; then false, so the pills unmount. */
@@ -430,33 +776,150 @@ function useFadingLevels(levelId: string | null, visible: boolean) {
   return { levels, drop }
 }
 
+/** Where the detail chip opens, in its layer's px: on the pill's colour dot, or centred. */
+type DetailOrigin = { x: number; y: number; onDot: boolean; bounds: PaneSize }
+type RoomLabelDetailState = { id: string; open: boolean; focused: boolean; at: DetailOrigin }
+type PointerAt = { x: number; y: number }
+
 /**
- * The placement state of one layer: its mounted pills, the full size each
- * last rendered at (observed, so a web font arriving, a rename or a unit
- * change re-places them; kept for pills that have left the DOM), and the
- * placer that moves, collapses and fades them.
+ * One layer's placement and reveal, shared by its frame loop, its pointer
+ * listeners and its pills: the pills it has mounted, the size each last
+ * rendered at (kept for pills that left the DOM), the last placement pass, and
+ * which room's detail is open.
  */
-function usePillPlacement(shown: boolean, entries: readonly LabelEntry[]) {
-  const [elements] = useState(() => new PillElements())
-  const [clock] = useState(() => new DeclutterClock())
+class PillLayer {
+  readonly elements = new PillElements()
+  readonly clock = new DeclutterClock()
+  readonly sizes = new Map<string, PillSize>()
+  readonly placer: PillPlacer
+  readonly reveal: LabelReveal
+  container: () => HTMLElement | null = () => null
+  surface: () => Element | null | undefined = () => null
+  /** The pointer over the host in client px while no button is down, null off it. */
+  pointer: PointerAt | null = null
+  pointerMoved = false
+  private candidates = new Map<string, PillCandidate>()
+  private rects = new Map<string, LabelRect>()
+  private bounds: PaneSize = { width: 0, height: 0 }
+  private chip: LabelRect | null = null
+  // The open detail, a store of its own: see `OpenRoomLabelDetail`.
+  private detail: RoomLabelDetailState | null = null
+  private readonly detailListeners = new Set<() => void>()
+
+  constructor(onGone: (gone: ReadonlySet<string>) => void) {
+    this.placer = new PillPlacer(this.elements, onGone)
+    this.reveal = new LabelReveal((id, focused) => this.openDetail(id, focused))
+  }
+
+  subscribeDetail = (listener: () => void) => {
+    this.detailListeners.add(listener)
+    return () => {
+      this.detailListeners.delete(listener)
+    }
+  }
+
+  getDetail = () => this.detail
+
+  place(candidates: PillCandidate[], bounds: PaneSize) {
+    const placements = placePills(candidates, bounds, this.placer.placements)
+    this.placer.apply(placements)
+    this.bounds = { width: bounds.width, height: bounds.height }
+    this.candidates = new Map(candidates.map((candidate) => [candidate.id, candidate]))
+    this.rects = new Map()
+    for (const candidate of candidates) {
+      const rect = placedRect(candidate, placements.get(candidate.id)!)
+      if (rect) this.rects.set(candidate.id, rect)
+    }
+    // An open chip follows its pill to its new place.
+    if (this.detail?.open) this.openDetail(this.detail.id, this.detail.focused)
+    this.suppress()
+  }
+
+  /**
+   * After the frame's placement, if any: close the detail while the view
+   * moves; once it rests, follow the room under the pointer, again after each
+   * placement so a wheel zoom opens the room left under the cursor.
+   */
+  settle(placed: boolean, pick: (pointer: PointerAt) => string | null) {
+    if (!this.clock.atRest) {
+      this.reveal.clear()
+      return
+    }
+    if (!(placed || this.pointerMoved)) return
+    this.pointerMoved = false
+    this.reveal.pick(this.pointer && pick(this.pointer))
+  }
+
+  /** Where the detail chip now sits, or null once it closes or unmounts. */
+  placeDetail = (rect: LabelRect | null) => {
+    this.chip = rect
+    this.suppress()
+  }
+
+  private suppress() {
+    if (!this.chip) {
+      this.placer.suppress(new Set(), null)
+      return
+    }
+    const open = this.detail?.open ? this.detail.id : null
+    this.placer.suppress(suppressedBy(this.chip, this.rects), open)
+  }
+
+  private openDetail(id: string | null, focused: boolean) {
+    const at = id ? this.locate(id) : null
+    this.detail =
+      id && at ? { id, open: true, focused, at } : this.detail && { ...this.detail, open: false }
+    for (const listener of this.detailListeners) listener()
+  }
+
+  private locate(id: string): DetailOrigin | null {
+    const bounds = this.bounds
+    const rect = this.rects.get(id)
+    const dot = rect && this.elements.get(id)?.querySelector<HTMLElement>('[data-room-label-dot]')
+    if (rect && dot) {
+      // From the placed rect, not the pill's live box: it may still be easing in.
+      const x = rect.left + dot.offsetLeft + dot.offsetWidth / 2
+      return { x, y: (rect.top + rect.bottom) / 2, onDot: true, bounds }
+    }
+    const anchor = this.candidates.get(id)
+    if (anchor) return { x: anchor.x, y: anchor.y, onDot: false, bounds }
+    const box = this.container()?.getBoundingClientRect()
+    if (!(box && this.pointer)) return null
+    return { x: this.pointer.x - box.left, y: this.pointer.y - box.top, onDot: false, bounds }
+  }
+}
+
+const samePx = (a: number, b: number) => Math.abs(a - b) < 0.5
+
+/**
+ * The state of one layer of pills, kept in step with them: measured as they
+ * mount (and observed, so a web font arriving, a rename or a unit change
+ * places them again), shown and hidden with the layer, and its detail opened
+ * by keyboard focus or the pointer over `host`: over the `surface` (the canvas
+ * or the plan) or the layer's own labels, not the UI over them.
+ */
+function usePillLayer(
+  shown: boolean,
+  entries: readonly LabelEntry[],
+  host: HTMLElement | null,
+  container: () => HTMLElement | null,
+  surface: () => Element | null | undefined,
+) {
   const [gone, setGone] = useState<ReadonlySet<string>>(() => new Set())
-  const [placer] = useState(() => new PillPlacer(elements, setGone))
+  const [layer] = useState(() => new PillLayer(setGone))
+  layer.container = container
+  layer.surface = surface
   const unit = useViewer((s) => s.unit)
-  const sizes = useRef(new Map<string, readonly [number, number]>())
   const shownRef = useRef(shown)
   shownRef.current = shown
   useEffect(() => {
+    const { clock, elements, placer, sizes } = layer
     elements.onMeasure = (id, element) => {
       const size = measureFullPill(element)
-      if (!(size[0] > 0 && size[1] > 0)) return
-      const previous = sizes.current.get(id)
-      if (
-        previous &&
-        Math.abs(previous[0] - size[0]) < 0.01 &&
-        Math.abs(previous[1] - size[1]) < 0.01
-      )
-        return
-      sizes.current.set(id, size)
+      if (!(size[0] > 0 && size[1] > 0 && size[2] > 0)) return
+      const previous = sizes.get(id)
+      if (previous?.every((value, i) => samePx(value, size[i]!))) return
+      sizes.set(id, size)
       clock.invalidate()
     }
     const observer =
@@ -468,15 +931,23 @@ function usePillPlacement(shown: boolean, entries: readonly LabelEntry[]) {
               const id = element.dataset.roomLabel
               const box = record.borderBoxSize?.[0]
               if (!(id && box && box.inlineSize > 0)) continue
-              // A dot coming back on screen may have changed text while its
-              // wrapper was display:none, when its full width was unreadable.
-              if ('roomLabelCollapsed' in element.dataset) elements.measure(id)
-              else sizes.current.set(id, [box.inlineSize, box.blockSize])
+              // A new tier resizes the pill to a size already known; anything
+              // else (a dot back on screen with text changed while its wrapper
+              // was display:none) is measured again.
+              const tier = element.dataset.roomLabelTier
+              const size = sizes.get(id)
+              const expected =
+                size && tierSize(size, tier === 'name' || tier === 'dot' ? tier : 'full')
+              if (
+                expected &&
+                samePx(expected[0], box.inlineSize) &&
+                samePx(expected[1], box.blockSize)
+              )
+                continue
+              elements.measure(id)
             }
-            clock.invalidate()
           })
     elements.onMount = (id, element) => {
-      if (!shownRef.current) element.dataset.roomLabelHidden = ''
       placer.mount(id, element)
       elements.measure(id)
       observer?.observe(element)
@@ -499,21 +970,87 @@ function usePillPlacement(shown: boolean, entries: readonly LabelEntry[]) {
       document.fonts?.removeEventListener('loadingdone', fontsChanged)
       observer?.disconnect()
       placer.dispose()
+      layer.reveal.clear()
     }
-  }, [clock, elements, placer])
+  }, [layer])
   // biome-ignore lint/correctness/useExhaustiveDependencies: Hidden pills must remount to measure changed entries or units.
   useEffect(() => {
-    placer.remeasure()
-    clock.invalidate()
-  }, [clock, entries, placer, unit])
+    layer.placer.remeasure()
+    layer.clock.invalidate()
+  }, [entries, layer, unit])
   useEffect(() => {
-    placer.showAll(shown)
-    if (shown) clock.invalidate()
-  }, [clock, placer, shown])
-  return { elements, clock, gone, placer, sizes: sizes.current }
+    layer.placer.showAll(shown)
+    if (shown) layer.clock.invalidate()
+    else layer.reveal.clear()
+  }, [layer, shown])
+  useEffect(() => {
+    if (!host) return
+    const { reveal } = layer
+    const labelAt = (target: EventTarget | null) => {
+      const label =
+        target instanceof Element ? target.closest<HTMLElement>('[data-room-label]') : null
+      if (!(label && layer.container()?.contains(label))) return null
+      return label.dataset.roomLabel ?? null
+    }
+    const move = (event: PointerEvent) => {
+      const label = labelAt(event.target)
+      const over =
+        event.buttons === 0 &&
+        event.pointerType !== 'touch' &&
+        (label !== null ||
+          (event.target instanceof Node && !!layer.surface()?.contains(event.target)))
+      layer.pointer = over ? { x: event.clientX, y: event.clientY } : null
+      layer.pointerMoved = true
+      if (shownRef.current && layer.clock.atRest) reveal.hover(over ? label : null)
+    }
+    const leave = () => {
+      layer.pointer = null
+      reveal.hover(null)
+      reveal.pick(null)
+    }
+    const focusIn = (event: FocusEvent) => {
+      const id = labelAt(event.target)
+      if (id && shownRef.current && (event.target as Element).matches(':focus-visible'))
+        reveal.focus(id)
+    }
+    const focusOut = () => reveal.focus(null)
+    // The canvas and the plan pan while Space is held; on a pill, Space presses it.
+    const keepSpace = (event: KeyboardEvent) => {
+      if (event.code === 'Space' && labelAt(event.target)) event.stopPropagation()
+    }
+    const dismiss = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') reveal.dismiss()
+    }
+    // Captured: a plan or canvas handler stopping the move must not blind the layer.
+    host.addEventListener('pointermove', move, { capture: true, passive: true })
+    // A drag ending with the pointer held still picks the room under it once the view rests.
+    host.addEventListener('pointerup', move, { capture: true, passive: true })
+    host.addEventListener('pointerleave', leave)
+    host.addEventListener('focusin', focusIn)
+    host.addEventListener('focusout', focusOut)
+    host.addEventListener('keydown', keepSpace)
+    host.addEventListener('keyup', keepSpace)
+    document.addEventListener('keydown', dismiss)
+    return () => {
+      host.removeEventListener('pointermove', move, { capture: true })
+      host.removeEventListener('pointerup', move, { capture: true })
+      host.removeEventListener('pointerleave', leave)
+      host.removeEventListener('focusin', focusIn)
+      host.removeEventListener('focusout', focusOut)
+      host.removeEventListener('keydown', keepSpace)
+      host.removeEventListener('keyup', keepSpace)
+      document.removeEventListener('keydown', dismiss)
+    }
+  }, [host, layer])
+  return { layer, gone }
 }
 
-/** The pills of one level: every detected room, and every drawn zone that bounds none. */
+/**
+ * The pills of one level: every detected room, and every drawn zone that
+ * bounds none. A smaller one inside a larger one (a zone drawn in a room) is
+ * a hole in the larger: the label there, and the room under the pointer
+ * there, are the smaller one's.
+ */
 export function roomLabelEntries(
   rooms: readonly RoomSelectionRecord[],
   zones: readonly ZoneNode[],
@@ -522,7 +1059,7 @@ export function roomLabelEntries(
     zones.filter((zone) => zone.visible === false).map((zone) => zone.id),
   )
   const roomIds = new Set(rooms.map((room) => room.zoneId))
-  return [
+  const entries: RoomLabelEntry[] = [
     ...rooms
       .filter((room) => !hiddenIds.has(room.zoneId))
       .map((room) => ({
@@ -540,6 +1077,18 @@ export function roomLabelEntries(
         area: area([{ outer: zone.polygon, holes: zone.holes ?? [] }]),
       })),
   ]
+  const insides = entries.map((entry) =>
+    polygonInteriorPoint({ polygon: entry.polygon, holes: entry.holes }),
+  )
+  return entries.map((entry) => {
+    const outline = [{ outer: entry.polygon, holes: entry.holes }]
+    const nested = entries.filter(
+      (other, i) => other.area < entry.area && containsPoint(outline, insides[i]!),
+    )
+    return nested.length === 0
+      ? entry
+      : { ...entry, holes: [...entry.holes, ...nested.map((other) => other.polygon)] }
+  })
 }
 
 function useRoomLabelEntries(levelId: string | null): LabelEntry[] {
@@ -556,7 +1105,48 @@ function useRoomLabelEntries(levelId: string | null): LabelEntry[] {
   return useMemo(() => roomLabelEntries(rooms, zones), [rooms, zones])
 }
 
-/** The pill itself: a colour dot, the name, the area in the active unit. */
+/** A label's colour dot, name and area: a pill hides what its tier leaves out, the detail shows all. */
+function LabelParts({
+  color,
+  name,
+  areaLabel,
+  full,
+}: {
+  color: string
+  name: string
+  areaLabel: string
+  full: boolean
+}) {
+  return (
+    <>
+      <span
+        className="h-2 w-2 shrink-0 rounded-full"
+        data-room-label-dot=""
+        style={{ backgroundColor: color }}
+      />
+      <span
+        className={
+          full
+            ? 'min-w-0 font-medium [overflow-wrap:anywhere]'
+            : 'max-w-40 truncate font-medium [[data-room-label-tier=dot]>&]:hidden'
+        }
+      >
+        {name}
+      </span>
+      <span
+        className="shrink-0 whitespace-nowrap font-mono text-white/60 tabular-nums [[data-room-label-tier]>&]:hidden"
+        data-room-label-area=""
+      >
+        {areaLabel}
+      </span>
+    </>
+  )
+}
+
+/**
+ * The pill itself, a button: a colour dot, the name (cut at 160 px) and the
+ * area in the active unit, as much of it as its placement shows.
+ */
 export function RoomPillChip({
   zoneId,
   view,
@@ -573,28 +1163,31 @@ export function RoomPillChip({
   color: string
   name: string
   areaM2: number
-  elements?: Map<string, HTMLElement>
+  elements: Map<string, HTMLElement>
   onClick: (event: ReactMouseEvent) => void
   onHover: (event: ReactPointerEvent) => void
   onLeave: () => void
 }) {
   const unit = useViewer((s) => s.unit)
+  const areaLabel = formatRoomArea(areaM2, unit)
   // biome-ignore lint/correctness/useExhaustiveDependencies: A dot's border box does not resize when its hidden text changes.
   useLayoutEffect(() => {
     if (elements instanceof PillElements) elements.measure(zoneId)
   }, [areaM2, elements, name, unit, zoneId])
   const register = useCallback(
-    (element: HTMLDivElement | null) => {
-      if (element) elements?.set(zoneId, element)
-      else elements?.delete(zoneId)
+    (element: HTMLElement | null) => {
+      if (element) elements.set(zoneId, element)
+      else elements.delete(zoneId)
     },
     [elements, zoneId],
   )
   return (
-    <div
-      // Fades in as it mounts and out (taking no pointer) while the layer hides
-      // it; eases into its nudged place; collapsed, it is its dot until hovered.
-      className="pointer-events-auto flex cursor-pointer select-none items-center gap-1.5 whitespace-nowrap rounded-full border border-white/10 bg-neutral-950/75 px-2.5 py-1 text-white text-xs shadow-sm backdrop-blur-sm transition-[opacity,translate,background-color] duration-180 hover:bg-neutral-950/90 starting:opacity-0 data-room-label-hidden:pointer-events-none data-room-label-hidden:opacity-0 motion-reduce:transition-none [&[data-room-label-collapsed]:not(:hover)]:gap-0 [&[data-room-label-collapsed]:not(:hover)]:p-[3px]"
+    <button
+      aria-label={`${name}, ${areaLabel}`}
+      // Fades in once placed, and out while hidden (then out of the tab order)
+      // or under the detail chip (taking no pointer unless it is the open
+      // room's); eases into its nudged place and its tier.
+      className="pointer-events-auto flex cursor-pointer select-none items-center gap-1.5 whitespace-nowrap rounded-full border border-white/10 bg-neutral-950/75 px-2.5 py-1 text-white text-xs shadow-sm backdrop-blur-sm transition-[opacity,translate,visibility] duration-180 starting:opacity-0 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 focus-visible:ring-6 focus-visible:ring-neutral-950/85 data-room-label-hidden:pointer-events-none data-room-label-suppressed:pointer-events-none data-room-label-hidden:invisible data-room-label-hidden:opacity-0 data-room-label-open:opacity-0 data-room-label-suppressed:opacity-0 data-room-label-open:duration-150 data-room-label-suppressed:duration-150 data-[room-label-tier=dot]:gap-0 data-[room-label-tier=dot]:p-[3px] motion-reduce:transition-none"
       data-room-label={zoneId}
       data-room-label-view={view}
       onClick={(event) => {
@@ -608,16 +1201,51 @@ export function RoomPillChip({
       onPointerLeave={onLeave}
       onPointerMove={onHover}
       ref={register}
+      type="button"
     >
-      <span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: color }} />
-      <span className="font-medium [[data-room-label-collapsed]:not(:hover)>&]:hidden">{name}</span>
-      <span className="font-mono text-white/60 tabular-nums [[data-room-label-collapsed]:not(:hover)>&]:hidden">
-        {formatRoomArea(areaM2, unit)}
-      </span>
+      <LabelParts areaLabel={areaLabel} color={color} full={false} name={name} />
+    </button>
+  )
+}
+
+/**
+ * The detail chip: the open room's whole label, wrapping to fit its layer.
+ * It only reads: the pill under it is the control, and the pointer goes
+ * through it to the rooms it covers.
+ */
+export function RoomPillDetail({
+  zoneId,
+  view,
+  color,
+  name,
+  areaM2,
+}: {
+  zoneId: string
+  view: '2d' | '3d'
+  color: string
+  name: string
+  areaM2: number
+}) {
+  const unit = useViewer((s) => s.unit)
+  return (
+    <div
+      aria-hidden
+      className="flex select-none items-center gap-1.5 rounded-[13px] border border-white/10 bg-neutral-950/90 px-2.5 py-1 text-white text-xs shadow-elevation-3 backdrop-blur-sm"
+      data-room-label-detail={zoneId}
+      data-room-label-view={view}
+    >
+      <LabelParts areaLabel={formatRoomArea(areaM2, unit)} color={color} full name={name} />
     </div>
   )
 }
 
+function useLabelZone(zoneId: string) {
+  const zone = useScene((s) => s.nodes[zoneId as AnyNodeId] as ZoneNode | undefined)
+  return zone && zone.visible !== false ? zone : null
+}
+
+const labelName = (zone: ZoneNode) => zone.name?.trim() || zoneKindLabel(zone)
+
 /**
  * One room's pill in the editor. Hover and click take the same rule as the
  * zone's area in the plan (`hoverZoneArea`, `clickZoneArea`); only the pill
@@ -630,19 +1258,19 @@ function RoomPill({
 }: {
   entry: LabelEntry
   view: '2d' | '3d'
-  elements?: Map<string, HTMLElement>
+  elements: Map<string, HTMLElement>
 }) {
-  const zone = useScene((s) => s.nodes[entry.zoneId as AnyNodeId] as ZoneNode | undefined)
+  const zone = useLabelZone(entry.zoneId)
   // A pill that disappears under the cursor (its click selected something)
   // fires no leave: end the hover it set.
   useEffect(() => () => leaveZoneArea(entry.zoneId), [entry.zoneId])
-  if (!zone || zone.visible === false) return null
+  if (!zone) return null
   return (
     <RoomPillChip
       areaM2={entry.area}
       color={zone.color}
       elements={elements}
-      name={zone.name?.trim() || zoneKindLabel(zone)}
+      name={labelName(zone)}
       onClick={(event) => clickZoneArea(entry.zoneId, selectionModifiersFromEvent(event))}
       onHover={(event) => hoverZoneArea(entry.zoneId, selectionModifiersFromEvent(event))}
       onLeave={() => leaveZoneArea(entry.zoneId)}
@@ -652,6 +1280,103 @@ function RoomPill({
   )
 }
 
+function RoomDetail({ entry, view }: { entry: LabelEntry; view: '2d' | '3d' }) {
+  const zone = useLabelZone(entry.zoneId)
+  if (!zone) return null
+  return (
+    <RoomPillDetail
+      areaM2={entry.area}
+      color={zone.color}
+      name={labelName(zone)}
+      view={view}
+      zoneId={entry.zoneId}
+    />
+  )
+}
+
+/**
+ * The open room's whole label over its layer: opened with its colour dot on
+ * the pill's, or centred where a hidden room's label would sit, and kept 8 px
+ * inside the layer. The pills it covers fade out of its way; nothing moves.
+ * One chip serves every room, so a handoff moves it without fading it again.
+ */
+function RoomLabelDetail({
+  detail,
+  onPlaced,
+  children,
+}: {
+  detail: RoomLabelDetailState
+  onPlaced: (rect: LabelRect | null) => void
+  children: ReactNode
+}) {
+  const ref = useRef<HTMLDivElement>(null)
+  const { open, at } = detail
+  useLayoutEffect(() => {
+    const frame = ref.current
+    if (!(frame && open)) {
+      onPlaced(null)
+      return
+    }
+    const place = () => {
+      const width = frame.offsetWidth
+      const height = frame.offsetHeight
+      const dot = frame.querySelector<HTMLElement>('[data-room-label-dot]')
+      const x = at.onDot && dot ? at.x - dot.offsetLeft - dot.offsetWidth / 2 : at.x - width / 2
+      const left = Math.max(DETAIL_INSET, Math.min(x, at.bounds.width - DETAIL_INSET - width))
+      const top = Math.max(
+        DETAIL_INSET,
+        Math.min(at.y - height / 2, at.bounds.height - DETAIL_INSET - height),
+      )
+      frame.style.left = `${left}px`
+      frame.style.top = `${top}px`
+      onPlaced({ left, top, right: left + width, bottom: top + height })
+    }
+    place()
+    // Placed again when its text reflows: a rename, a unit change, a font arriving.
+    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(place)
+    observer?.observe(frame)
+    return () => observer?.disconnect()
+  }, [at, onPlaced, open])
+  // Gone with its room: the pills it covered come back.
+  useLayoutEffect(() => () => onPlaced(null), [onPlaced])
+  return (
+    <div
+      className="pointer-events-none absolute z-30 w-max origin-left rounded-[13px] transition-[opacity,scale] duration-150 ease-[cubic-bezier(0.22,1,0.36,1)] starting:scale-[0.98] starting:opacity-0 data-closed:scale-[0.98] data-closed:opacity-0 data-closed:duration-50 data-focused:outline-2 data-focused:outline-white data-focused:outline-offset-2 data-focused:ring-6 data-focused:ring-neutral-950/85 motion-reduce:transition-none"
+      data-closed={open ? undefined : ''}
+      data-focused={open && detail.focused ? '' : undefined}
+      ref={ref}
+      style={{ maxWidth: at.bounds.width - 2 * DETAIL_INSET }}
+    >
+      {children}
+    </div>
+  )
+}
+
+/**
+ * The open room's detail, read from the layer's own store where it renders,
+ * so a reveal re-renders the chip alone, not the canvas tree or every pill.
+ */
+function OpenRoomLabelDetail({
+  layer,
+  entries,
+  renderDetail,
+}: {
+  layer: PillLayer
+  entries: readonly LabelEntry[]
+  renderDetail: (entry: LabelEntry) => ReactNode
+}) {
+  const detail = useSyncExternalStore(layer.subscribeDetail, layer.getDetail, layer.getDetail)
+  const entry = detail && entries.find((candidate) => candidate.zoneId === detail.id)
+  if (!(detail && entry)) return null
+  return (
+    <RoomLabelDetail detail={detail} onPlaced={layer.placeDetail}>
+      {renderDetail(entry)}
+    </RoomLabelDetail>
+  )
+}
+
+const renderDetail2D = (entry: LabelEntry) => <RoomDetail entry={entry} view="2d" />
+
 /** Light name-and-area pills over each room and drawn zone of the active level. */
 export function RoomLabels3D() {
   const levelId = useViewer((s) => s.selection.levelId)
@@ -679,6 +1404,7 @@ function LevelRoomLabels3D({
     <RoomPillsLayer3D
       entries={entries}
       levelObject={() => sceneRegistry.nodes.get(levelId)}
+      renderDetail={(entry) => <RoomDetail entry={entry} view="3d" />}
       renderLabel={(entry, anchors, elements) => (
         <EditorRoomLabel3D anchors={anchors} elements={elements} entry={entry} />
       )}
@@ -704,16 +1430,140 @@ function EditorRoomLabel3D({
   )
 }
 
+const toScreen = new Matrix4()
+
+/** Where a level-local point lands in the canvas, in px, with its depth; null behind the camera. */
+function screenPoint(x: number, y: number, z: number, size: PaneSize) {
+  const e = toScreen.elements
+  const w = e[3] * x + e[7] * y + e[11] * z + e[15]
+  if (!(w > 0)) return null
+  return [
+    (((e[0] * x + e[4] * y + e[8] * z + e[12]) / w + 1) / 2) * size.width,
+    ((1 - (e[1] * x + e[5] * y + e[9] * z + e[13]) / w) / 2) * size.height,
+    (e[2] * x + e[6] * y + e[10] * z + e[14]) / w,
+  ] as const
+}
+
+// How far in front of the camera an outline is cut off (in clip-space w, the
+// depth along the view for a perspective camera): past it, points project
+// ever further out and then flip to the other side of the screen.
+const NEAR_W = 1e-3
+
+/**
+ * A level-local ring at height `y` on screen: cut to the part in front of the
+ * camera (Sutherland–Hodgman against w = NEAR_W, which is linear in the
+ * level's coordinates), then projected. Null when none of it is in front.
+ */
+function screenRing(points: readonly [number, number][], y: number, size: PaneSize): Ring | null {
+  const e = toScreen.elements
+  const w = ([x, z]: readonly [number, number]) => e[3] * x + e[7] * y + e[11] * z + e[15]
+  const ring: Ring = []
+  const add = (x: number, z: number) => {
+    const point = screenPoint(x, y, z, size)
+    if (point) ring.push([point[0], point[1]])
+  }
+  for (let i = 0, j = points.length - 1; i < points.length; j = i++) {
+    const a = points[j]!
+    const b = points[i]!
+    const wa = w(a)
+    const wb = w(b)
+    if (wa >= NEAR_W !== wb >= NEAR_W) {
+      const t = (wa - NEAR_W) / (wa - wb)
+      add(a[0] + t * (b[0] - a[0]), a[1] + t * (b[1] - a[1]))
+    }
+    if (wb >= NEAR_W) add(b[0], b[1])
+  }
+  return ring.length >= 3 ? ring : null
+}
+
+/** Where the pills of a level land on screen, each with the part of its room in front of the camera. */
+export function candidates3D(
+  entries: readonly LabelEntry[],
+  anchors: ReadonlyMap<string, Vector3>,
+  sizes: ReadonlyMap<string, PillSize>,
+  camera: Camera,
+  level: Object3D,
+  size: PaneSize,
+): PillCandidate[] {
+  toScreen.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse)
+  toScreen.multiply(level.matrixWorld)
+  const candidates: PillCandidate[] = []
+  for (const entry of entries) {
+    const anchor = anchors.get(entry.zoneId)
+    const pill = sizes.get(entry.zoneId)
+    if (!(anchor && pill)) continue
+    const at = screenPoint(anchor.x, anchor.y, anchor.z, size)
+    // Behind the camera or past its far plane: not on screen to collide.
+    if (!at || Math.abs(at[2]) > 1) continue
+    // The room's outline at its pill's height, where the pill has to fit.
+    const outer = screenRing(entry.polygon, anchor.y, size)
+    if (!outer) continue
+    const holes: Ring[] = []
+    for (const hole of entry.holes) {
+      const ring = screenRing(hole, anchor.y, size)
+      if (ring) holes.push(ring)
+    }
+    candidates.push({
+      id: entry.zoneId,
+      x: at[0],
+      y: at[1],
+      size: pill,
+      area: entry.area,
+      outline: { outer, holes },
+    })
+  }
+  return candidates
+}
+
+const pickRaycaster = new Raycaster()
+const pickPointer = new Vector2()
+const levelInverse = new Matrix4()
+const levelRay = new Ray()
+
+/** The room whose floor the pointer's ray meets first, testing each room at its own floor. */
+function pick3D(
+  entries: readonly LabelEntry[],
+  anchors: ReadonlyMap<string, Vector3>,
+  pointer: PointerAt,
+  camera: Camera,
+  level: Object3D,
+  size: PaneSize & { left: number; top: number },
+): string | null {
+  pickPointer.set(
+    ((pointer.x - size.left) / size.width) * 2 - 1,
+    -((pointer.y - size.top) / size.height) * 2 + 1,
+  )
+  pickRaycaster.setFromCamera(pickPointer, camera)
+  levelRay.copy(pickRaycaster.ray).applyMatrix4(levelInverse.copy(level.matrixWorld).invert())
+  const { origin, direction } = levelRay
+  return roomAt(entries, (entry) => {
+    const anchor = anchors.get(entry.zoneId)
+    if (!anchor) return null
+    const t = (anchor.y - LABEL_HEIGHT - origin.y) / direction.y
+    return t > 0 && Number.isFinite(t)
+      ? [origin.x + t * direction.x, origin.z + t * direction.z, t]
+      : null
+  })
+}
+
+// The detail chip's own Html sits at its layer's top-left corner and places
+// the chip itself, so drei must never hide it: the object it rides is not
+// where it shows.
+const atLayerOrigin = () => [0, 0]
+const keepShown = () => {}
+
 /**
  * The pills of one level in 3D, riding the level's object (so they follow
  * level stacking) and placed from where their anchors land on screen. They
  * live in their own stacking layer clipped to the canvas, so every piece of
- * UI over the canvas stays above them.
+ * UI over the canvas stays above them; the open room's chip, the label being
+ * read, has a layer of its own above the canvas's flags.
  */
 export function RoomPillsLayer3D({
   entries,
   levelObject,
   renderLabel,
+  renderDetail,
   shown = true,
 }: {
   entries: readonly LabelEntry[]
@@ -723,29 +1573,54 @@ export function RoomPillsLayer3D({
     anchors: Map<string, Vector3>,
     elements: Map<string, HTMLElement>,
   ) => ReactNode
+  renderDetail: (entry: LabelEntry) => ReactNode
   shown?: boolean
 }) {
   const ref = useRef<Group>(null)
-  const anchors = useRef(new Map<string, Vector3>())
+  const [anchors] = useState(() => new RoomAnchors())
   const view = useRef(new Float64Array(50))
-  const { elements, clock, gone, placer, sizes } = usePillPlacement(shown, entries)
   const host = useThree((s) => (s.events.connected ?? s.gl.domElement.parentNode) as HTMLElement)
-  const [container] = useState(() =>
-    typeof document === 'undefined' ? null : document.createElement('div'),
+  const [portals] = useState(() =>
+    typeof document === 'undefined'
+      ? null
+      : {
+          pills: { current: document.createElement('div') },
+          detail: { current: document.createElement('div') },
+        },
+  )
+  const canvas = useThree((s) => s.gl.domElement)
+  const { layer, gone } = usePillLayer(
+    shown,
+    entries,
+    host,
+    () => portals?.pills.current ?? null,
+    () => canvas,
   )
-  const portal = useMemo(() => (container ? { current: container } : null), [container])
   useEffect(() => {
-    if (!(host && container)) return
-    container.className = 'pointer-events-none absolute inset-0 isolate z-0 overflow-hidden'
-    host.appendChild(container)
-    return () => container.remove()
-  }, [container, host])
+    if (!(host && portals)) return
+    const { pills, detail } = portals
+    pills.current.className = 'pointer-events-none absolute inset-0 isolate z-0 overflow-hidden'
+    // Over the flags and guides on the canvas (z-index 25 at most), unlike the pills.
+    detail.current.className = 'pointer-events-none absolute inset-0 z-30'
+    host.append(pills.current, detail.current)
+    return () => {
+      pills.current.remove()
+      detail.current.remove()
+    }
+  }, [host, portals])
+
+  useEffect(() => {
+    anchors.onMove = () => layer.clock.invalidate()
+    return () => {
+      anchors.onMove = null
+    }
+  }, [anchors, layer])
 
   useEffect(() => {
     const ids = new Set(entries.map((entry) => entry.zoneId))
-    for (const id of anchors.current.keys()) if (!ids.has(id)) anchors.current.delete(id)
-    clock.invalidate()
-  }, [clock, entries])
+    for (const id of anchors.keys()) if (!ids.has(id)) anchors.delete(id)
+    layer.clock.invalidate()
+  }, [anchors, entries, layer])
 
   useFrame(({ camera, clock: frameClock, size }) => {
     if (!ref.current) return
@@ -754,6 +1629,7 @@ export function RoomPillsLayer3D({
     if (!level) return
     level.updateWorldMatrix(true, false)
     ref.current.matrix.copy(level.matrixWorld)
+    if (!shown) return
 
     const flat = view.current
     flat.set(camera.matrixWorld.elements, 0)
@@ -761,35 +1637,31 @@ export function RoomPillsLayer3D({
     flat.set(level.matrixWorld.elements, 32)
     flat[48] = size.width
     flat[49] = size.height
-    if (!(shown && clock.shouldRead(flat, frameClock.elapsedTime))) return
-
-    const candidates: PillCandidate[] = []
-    for (const entry of entries) {
-      const anchor = anchors.current.get(entry.zoneId)
-      const pill = sizes.get(entry.zoneId)
-      if (!(anchor && pill)) continue
-      labelWorld.copy(anchor).applyMatrix4(level.matrixWorld).project(camera)
-      // Behind the camera or past its far plane: not on screen to collide.
-      if (Math.abs(labelWorld.z) > 1) continue
-      candidates.push({
-        id: entry.zoneId,
-        x: ((labelWorld.x + 1) / 2) * size.width,
-        y: ((1 - labelWorld.y) / 2) * size.height,
-        size: pill,
-        area: entry.area,
-      })
+    const placed = layer.clock.shouldRead(flat, frameClock.elapsedTime)
+    if (placed) {
+      timeSpan('room-labels', () =>
+        layer.place(candidates3D(entries, anchors, layer.sizes, camera, level, size), size),
+      )
     }
-    placer.apply(placePills(candidates))
+    layer.settle(placed, (pointer) => pick3D(entries, anchors, pointer, camera, level, size))
   })
 
-  if (entries.length === 0 || !portal) return null
+  if (entries.length === 0 || !portals) return null
   return (
-    <PillPortalContext.Provider value={portal}>
+    <PillPortalContext.Provider value={portals.pills}>
       <HiddenPillsContext.Provider value={gone}>
         <group matrixAutoUpdate={false} ref={ref}>
           {entries.map((entry) => (
-            <Fragment key={entry.zoneId}>{renderLabel(entry, anchors.current, elements)}</Fragment>
+            <Fragment key={entry.zoneId}>{renderLabel(entry, anchors, layer.elements)}</Fragment>
           ))}
+          <Html
+            calculatePosition={atLayerOrigin}
+            onOcclude={keepShown}
+            portal={portals.detail}
+            style={{ pointerEvents: 'none' }}
+          >
+            <OpenRoomLabelDetail entries={entries} layer={layer} renderDetail={renderDetail} />
+          </Html>
         </group>
       </HiddenPillsContext.Provider>
     </PillPortalContext.Provider>
@@ -828,10 +1700,8 @@ export function RoomLabelAnchor3D({
       center
       portal={portal ?? undefined}
       position={position}
-      // The wrapper lets the canvas keep everything but the pill itself; a
-      // hovered pill (a dot opening to its full pill) comes to the front.
+      // The wrapper lets the canvas keep everything but the pill itself.
       style={{ pointerEvents: 'none' }}
-      wrapperClass="has-[[data-room-label]:hover]:z-30!"
       zIndexRange={[20, 0]}
     >
       {children}
@@ -868,7 +1738,13 @@ function LevelRoomLabels2D({
   const paneRef = useRef<HTMLDivElement>(null)
   const [host, setHost] = useState<HTMLElement | null>(null)
   const [nodes] = useState(() => new PillElements())
-  const { elements, clock, gone, placer, sizes } = usePillPlacement(shown, entries)
+  const { layer, gone } = usePillLayer(
+    shown,
+    entries,
+    host,
+    () => paneRef.current,
+    () => ref.current?.ownerSVGElement,
+  )
   const shownRef = useRef(shown)
   shownRef.current = shown
   const anchors = useMemo(
@@ -895,7 +1771,7 @@ function LevelRoomLabels2D({
     nodes.onMount = () => {
       lastKey = ''
     }
-    clock.invalidate()
+    layer.clock.invalidate()
     const tick = (now: number) => {
       raf = requestAnimationFrame(tick)
       const group = ref.current
@@ -906,13 +1782,11 @@ function LevelRoomLabels2D({
       const pane = svg.getBoundingClientRect()
       const origin = paneElement.offsetParent?.getBoundingClientRect() ?? { left: 0, top: 0 }
       const key = `${ctm.a},${ctm.b},${ctm.c},${ctm.d},${ctm.e},${ctm.f},${pane.left},${pane.top},${pane.width},${pane.height},${origin.left},${origin.top}`
-      const point = svg.createSVGPoint()
-      const place = (anchor: [number, number]) => {
-        point.x = anchor[0]
-        point.y = anchor[1]
-        const screen = point.matrixTransform(ctm)
-        return [screen.x - pane.left, screen.y - pane.top] as const
-      }
+      // A plan point in the pane's px.
+      const place = ([x, y]: readonly [number, number]): [number, number] => [
+        ctm.a * x + ctm.c * y + ctm.e - pane.left,
+        ctm.b * x + ctm.d * y + ctm.f - pane.top,
+      ]
       const inside = ([x, y]: readonly [number, number]) =>
         x >= 0 && x <= pane.width && y >= 0 && y <= pane.height
       if (key !== lastKey) {
@@ -942,24 +1816,49 @@ function LevelRoomLabels2D({
       view[7] = pane.top
       view[8] = pane.width
       view[9] = pane.height
-      if (!(shownRef.current && clock.shouldRead(view, now / 1000))) return
-      const candidates: PillCandidate[] = []
-      for (const entry of entries) {
-        const anchor = anchors.get(entry.zoneId)
-        const pill = sizes.get(entry.zoneId)
-        if (!(anchor && pill)) continue
-        const at = place(anchor)
-        if (!inside(at)) continue
-        candidates.push({ id: entry.zoneId, x: at[0], y: at[1], size: pill, area: entry.area })
+      if (!shownRef.current) return
+      const placed = layer.clock.shouldRead(view, now / 1000)
+      if (placed) {
+        timeSpan('room-labels', () => {
+          const candidates: PillCandidate[] = []
+          for (const entry of entries) {
+            const anchor = anchors.get(entry.zoneId)
+            const pill = layer.sizes.get(entry.zoneId)
+            if (!(anchor && pill)) continue
+            const at = place(anchor)
+            if (!inside(at)) continue
+            candidates.push({
+              id: entry.zoneId,
+              x: at[0],
+              y: at[1],
+              size: pill,
+              area: entry.area,
+              outline: {
+                outer: entry.polygon.map(place),
+                holes: entry.holes.map((hole) => hole.map(place)),
+              },
+            })
+          }
+          layer.place(candidates, pane)
+        })
       }
-      placer.apply(placePills(candidates))
+      layer.settle(placed, (pointer) => {
+        const inverse = ctm.inverse()
+        // The plan is one plane, met at the same distance for every room: the smallest wins.
+        const point: RoomHit = [
+          inverse.a * pointer.x + inverse.c * pointer.y + inverse.e,
+          inverse.b * pointer.x + inverse.d * pointer.y + inverse.f,
+          0,
+        ]
+        return roomAt(entries, () => point)
+      })
     }
     raf = requestAnimationFrame(tick)
     return () => {
       cancelAnimationFrame(raf)
       nodes.onMount = null
     }
-  }, [anchors, clock, entries, nodes, placer, present, sizes])
+  }, [anchors, entries, layer, nodes, present])
 
   return (
     <g ref={ref}>
@@ -971,7 +1870,7 @@ function LevelRoomLabels2D({
               .filter((entry) => !gone.has(entry.zoneId))
               .map((entry) => (
                 <div
-                  className="pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 has-[[data-room-label]:hover]:z-10"
+                  className="pointer-events-none absolute -translate-x-1/2 -translate-y-1/2"
                   key={entry.zoneId}
                   ref={(element) => {
                     if (element) nodes.set(entry.zoneId, element)
@@ -979,9 +1878,10 @@ function LevelRoomLabels2D({
                   }}
                   style={{ display: 'none' }}
                 >
-                  <RoomPill elements={elements} entry={entry} view="2d" />
+                  <RoomPill elements={layer.elements} entry={entry} view="2d" />
                 </div>
               ))}
+            <OpenRoomLabelDetail entries={entries} layer={layer} renderDetail={renderDetail2D} />
           </div>,
           host,
         )}