@pascal-app/editor 1.0.4 → 1.0.5

package/src/components/editor/room-labels.test.ts

@@ -1,19 +1,33 @@
 import { describe, expect, test } from 'bun:test'
+import type { Polygon } from '@pascal-app/core'
 import { ZoneNode } from '@pascal-app/core/schema'
+import { Object3D, PerspectiveCamera, Vector3 } from 'three'
 import type { RoomSelectionRecord } from '../../lib/room-selection'
 import {
+  candidates3D,
   DeclutterClock,
   formatRoomArea,
+  type LabelRect,
+  LabelReveal,
   measureFullPill,
-  PILL_DOT_SIZE,
+  PILL_GAP,
   type PillCandidate,
   type PillPlacement,
   PillPlacer,
+  type PillSize,
   pillRect,
+  placedRect,
   placePills,
+  REVEAL_DWELL_MS,
+  REVEAL_GRACE_MS,
+  RoomAnchors,
+  type RoomHit,
+  type RoomLabelEntry,
   type RoomLabelVisibilityState,
+  roomAt,
   roomLabelEntries,
   roomLabelsVisible,
+  suppressedBy,
 } from './room-labels'
 
 const resting: RoomLabelVisibilityState = {
@@ -28,6 +42,47 @@ const resting: RoomLabelVisibilityState = {
   isThumbnailCapture: false,
 }
 
+type Timer = ReturnType<typeof setTimeout>
+
+/** Timers on a clock the test advances by hand. */
+function manualClock() {
+  let now = 0
+  let nextId = 1
+  const due = new Map<number, { at: number; run: () => void }>()
+  return {
+    schedule: (run: () => void, ms: number) => {
+      const id = nextId++
+      due.set(id, { at: now + ms, run })
+      return id as unknown as Timer
+    },
+    cancel: (timer: Timer) => {
+      due.delete(timer as unknown as number)
+    },
+    pending: () => due.size,
+    advance(ms: number) {
+      const end = now + ms
+      for (;;) {
+        const [id, timer] = [...due].sort((a, b) => a[1].at - b[1].at)[0] ?? []
+        if (id === undefined || !timer || timer.at > end) break
+        due.delete(id)
+        now = timer.at
+        timer.run()
+      }
+      now = end
+    },
+  }
+}
+
+const square = (cx: number, cy: number, side: number): Polygon => ({
+  outer: [
+    [cx - side / 2, cy - side / 2],
+    [cx + side / 2, cy - side / 2],
+    [cx + side / 2, cy + side / 2],
+    [cx - side / 2, cy + side / 2],
+  ],
+  holes: [],
+})
+
 describe('room label pills', () => {
   test('show on the resting level, with only the site, building or level picked', () => {
     expect(roomLabelsVisible(resting)).toBe(true)
@@ -63,17 +118,26 @@ describe('room label pills', () => {
     expect(pillRect(100, 50, [80, 20])).toEqual({ left: 60, top: 40, right: 140, bottom: 60 })
   })
 
-  test('a collapsed pill measures its updated full label and stays collapsed', () => {
-    const element = { dataset: { roomLabelCollapsed: '' } } as unknown as HTMLElement
+  test('a pill showing less measures its whole label, and its width with the name alone', () => {
+    const areaLabel = {}
+    const element = {
+      dataset: { roomLabelTier: 'dot' },
+      querySelector: () => areaLabel,
+    } as unknown as HTMLElement
     let width = 161.5
-    const read = (target: HTMLElement) => ({
-      width: 'roomLabelCollapsed' in target.dataset ? '16px' : `${width}px`,
-      height: 'roomLabelCollapsed' in target.dataset ? '16px' : '26px',
-    })
-    expect(measureFullPill(element, read)).toEqual([161.5, 26])
+    const read = (target: Element) => {
+      if (target === areaLabel) return { width: '40px', height: '16px', columnGap: 'normal' }
+      const dot = 'roomLabelTier' in (target as HTMLElement).dataset
+      return {
+        width: dot ? '16px' : `${width}px`,
+        height: dot ? '16px' : '26px',
+        columnGap: '6px',
+      }
+    }
+    expect(measureFullPill(element, read)).toEqual([161.5, 26, 115.5])
     width = 176.25
-    expect(measureFullPill(element, read)).toEqual([176.25, 26])
-    expect(element.dataset.roomLabelCollapsed).toBe('')
+    expect(measureFullPill(element, read)).toEqual([176.25, 26, 130.25])
+    expect(element.dataset.roomLabelTier).toBe('dot')
   })
 
   test('invisible rooms and drawn zones do not reserve space for a pill', () => {
@@ -102,97 +166,282 @@ describe('room label pills', () => {
       area: 9,
     })
   })
+
+  test('a zone drawn inside a room is a hole in it, so their labels and the pointer agree', () => {
+    const living = square(5, 5, 10)
+    const nook = square(7, 7, 3)
+    const entries = roomLabelEntries(
+      [],
+      [
+        ZoneNode.parse({ id: 'zone_living', name: 'Living room', polygon: living.outer }),
+        ZoneNode.parse({ id: 'zone_nook', name: 'Reading nook', polygon: nook.outer }),
+        ZoneNode.parse({ id: 'zone_hall', name: 'Hall', polygon: square(15, 5, 10).outer }),
+      ],
+    )
+    const [livingEntry, nookEntry, hallEntry] = entries
+    expect(livingEntry!.holes).toEqual([nook.outer])
+    expect(livingEntry!.area).toBe(100)
+    expect(nookEntry!.holes).toEqual([])
+    expect(hallEntry!.holes).toEqual([])
+    // At 40 px per metre, the living room's label next to the nook moves off it.
+    const onScreen = (zoneId: string, x: number, y: number): PillCandidate => {
+      const entry = entries.find((candidate) => candidate.zoneId === zoneId)!
+      const scale = ([px, py]: [number, number]): [number, number] => [px * 40, py * 40]
+      return {
+        id: zoneId,
+        x: x * 40,
+        y: y * 40,
+        size: [80, 24, 50],
+        area: entry.area,
+        outline: { outer: entry.polygon.map(scale), holes: entry.holes.map((h) => h.map(scale)) },
+      }
+    }
+    const placements = placePills([onScreen('zone_living', 7, 8.7), onScreen('zone_nook', 7, 7)], {
+      width: 1000,
+      height: 1000,
+    })
+    expect(placements.get('zone_living')).toEqual({ tier: 'full', dy: 8 })
+    expect(placements.get('zone_nook')).toEqual({ tier: 'full', dy: 0 })
+    expect(roomAt(entries, () => [7, 7, 0])).toBe('zone_nook')
+    expect(roomAt(entries, () => [2, 2, 0])).toBe('zone_living')
+  })
 })
 
 describe('pill placement', () => {
-  const pill = (id: string, x: number, y: number, area: number, width = 120): PillCandidate => ({
-    id,
-    x,
-    y,
-    size: [width, 24],
-    area,
-  })
-  const rectOf = (candidate: PillCandidate, dy: number, dot: boolean) =>
-    pillRect(candidate.x, candidate.y + dy, dot ? [PILL_DOT_SIZE, PILL_DOT_SIZE] : candidate.size)
-  const apart = (a: ReturnType<typeof pillRect>, b: ReturnType<typeof pillRect>) =>
-    a.right <= b.left || b.right <= a.left || a.bottom <= b.top || b.bottom <= a.top
+  const pane = { width: 1000, height: 1000 }
+  const everywhere = square(0, 0, 1e5)
+  const pill = (
+    id: string,
+    x: number,
+    y: number,
+    area: number,
+    size: PillSize = [120, 24, 70],
+    outline: Polygon = everywhere,
+  ): PillCandidate => ({ id, x, y, size, area, outline })
+  const near = (a: LabelRect, b: LabelRect) =>
+    a.left < b.right + PILL_GAP &&
+    b.left < a.right + PILL_GAP &&
+    a.top < b.bottom + PILL_GAP &&
+    b.top < a.bottom + PILL_GAP
 
-  test('apart, every pill stays on its room', () => {
-    const placements = placePills([pill('a', 100, 100, 20), pill('b', 400, 100, 10)])
+  test('apart, every pill shows in full at its anchor', () => {
+    const placements = placePills([pill('a', 100, 100, 20), pill('b', 400, 100, 10)], pane)
     expect([...placements.values()]).toEqual([
-      { mode: 'full', dy: 0 },
-      { mode: 'full', dy: 0 },
+      { tier: 'full', dy: 0 },
+      { tier: 'full', dy: 0 },
     ])
   })
 
   test('two overlapping pills: the larger room keeps its place, the other moves the least it can', () => {
     const big = pill('big', 100, 100, 30)
     const small = pill('small', 110, 106, 10)
-    const placements = placePills([small, big])
-    expect(placements.get('big')).toEqual({ mode: 'full', dy: 0 })
-    const moved = placements.get('small')!
-    expect(moved.mode).toBe('full')
-    expect(Math.abs(moved.dy)).toBeLessThanOrEqual(24)
-    expect(apart(rectOf(big, 0, false), rectOf(small, moved.dy, false))).toBe(true)
-    // 24 px tall, 6 px apart, 2 px gap: 20 px down is the nearest clear slot (up needs 32).
-    expect(moved.dy).toBe(20)
-  })
-
-  test('crowded beyond a pill height, a pill collapses to its dot; hidden only if the dot collides too', () => {
-    const wide = pill('wide', 200, 100, 40, 300)
-    const above = pill('above', 200, 74, 30, 300)
-    const below = pill('below', 200, 126, 20, 300)
-    const squeezed = pill('squeezed', 120, 100, 10)
-    const placements = placePills([squeezed, below, above, wide])
-    expect(placements.get('wide')?.mode).toBe('full')
-    expect(placements.get('above')?.mode).toBe('full')
-    expect(placements.get('below')?.mode).toBe('full')
-    // Its dot sits inside the wide pill: nothing left but to hide it.
-    expect(placements.get('squeezed')).toEqual({ mode: 'hidden', dy: 0 })
-
-    const nearEdge = pill('near-edge', 30, 100, 10)
-    const crowded = placePills([nearEdge, below, above, wide])
-    // Its full pill still collides, but its dot at the anchor is clear.
-    expect(crowded.get('near-edge')).toEqual({ mode: 'dot', dy: 0 })
-  })
-
-  test('a dot with no room at its anchor takes the nearest free slot instead of hiding', () => {
-    const big = pill('big', 100, 100, 30)
-    const closet = pill('closet', 100, 100, 5)
-    const placements = placePills([closet, big])
-    // The full pill would need 26 px (past its 24 px budget); its dot clears at 24 px up.
-    expect(placements.get('closet')).toEqual({ mode: 'dot', dy: -24 })
-    expect(apart(rectOf(big, 0, false), rectOf(closet, -24, true))).toBe(true)
+    const placements = placePills([small, big], pane)
+    expect(placements.get('big')).toEqual({ tier: 'full', dy: 0 })
+    // 24 px tall, 6 px apart, 4 px gap: 24 px down is the nearest clear slot (up needs 34).
+    expect(placements.get('small')).toEqual({ tier: 'full', dy: 24 })
+  })
+
+  test('how much of a label shows follows how large its room is on screen', () => {
+    // A 4 m square room at 40, 25, 10 and 3 px per metre.
+    const tiers = [40, 25, 10, 3].map(
+      (scale) =>
+        placePills(
+          [pill('room', 500, 500, 16, [120, 24, 70], square(500, 500, 4 * scale))],
+          pane,
+        ).get('room')!.tier,
+    )
+    expect(tiers).toEqual(['full', 'name', 'dot', 'hidden'])
+  })
+
+  test('a thin room at an angle gets its dot, however large its bounding box', () => {
+    // A 1.2 m corridor 8 m long at 45°, at 40 px per metre.
+    const along = [160 / Math.SQRT2, 160 / Math.SQRT2]
+    const across = [-24 / Math.SQRT2, 24 / Math.SQRT2]
+    const corner = (a: number, b: number): [number, number] => [
+      500 + a * along[0]! + b * across[0]!,
+      500 + a * along[1]! + b * across[1]!,
+    ]
+    const corridor = {
+      outer: [corner(-1, -1), corner(1, -1), corner(1, 1), corner(-1, 1)],
+      holes: [],
+    }
+    expect(
+      placePills([pill('hall', 500, 500, 9.6, [120, 24, 70], corridor)], pane).get('hall'),
+    ).toEqual({ tier: 'dot', dy: 0 })
+  })
+
+  test('a label next to a hole in its room moves clear of the hole', () => {
+    const atrium = { ...square(200, 200, 200), holes: [square(200, 200, 80).outer] }
+    // At its anchor the pill's bottom edge crosses the hole's top edge (y 160).
+    expect(
+      placePills([pill('room', 200, 150, 34, [120, 24, 70], atrium)], pane).get('room'),
+    ).toEqual({
+      tier: 'full',
+      dy: -4,
+    })
+  })
+
+  test('a label never leaves the pane: near its edge it shows less', () => {
+    const placements = placePills([pill('a', 50, 500, 10), pill('b', 5, 500, 10)], pane)
+    expect(placements.get('a')).toEqual({ tier: 'name', dy: 0 })
+    expect(placements.get('b')).toEqual({ tier: 'hidden', dy: 0 })
+  })
+
+  test('a pill that has to move keeps to the side it took last time; one with room goes back', () => {
+    const bar = pill('bar', 100, 100, 30, [120, 8, 60])
+    const moved = pill('moved', 100, 100, 10)
+    expect(placePills([bar, moved], pane).get('moved')).toEqual({ tier: 'full', dy: -20 })
+    const previous = new Map<string, PillPlacement>([['moved', { tier: 'full', dy: 20 }]])
+    expect(placePills([bar, moved], pane, previous).get('moved')).toEqual({ tier: 'full', dy: 20 })
+    expect(placePills([moved], pane, previous).get('moved')).toEqual({ tier: 'full', dy: 0 })
   })
 
   test('the order is fixed by room size and id, not by input order', () => {
     const candidates = [pill('b', 100, 100, 10), pill('a', 105, 100, 10), pill('c', 110, 100, 10)]
-    const first = placePills(candidates)
-    const shuffled = placePills([candidates[2]!, candidates[0]!, candidates[1]!])
+    const first = placePills(candidates, pane)
+    const shuffled = placePills([candidates[2]!, candidates[0]!, candidates[1]!], pane)
     expect(shuffled).toEqual(first)
-    expect(first.get('a')).toEqual({ mode: 'full', dy: 0 })
-  })
-
-  test('no two placed boxes ever overlap', () => {
-    const candidates = Array.from({ length: 40 }, (_, i) =>
-      pill(
-        `p${i}`,
-        100 + ((i * 37) % 220),
-        100 + ((i * 53) % 140),
-        (i * 7) % 13,
-        90 + (i % 5) * 20,
-      ),
+    expect(first.get('a')).toEqual({ tier: 'full', dy: 0 })
+  })
+
+  test('placed labels never come within the gap of each other, and each stays in its room', () => {
+    let seed = 7
+    const random = () => {
+      seed = (seed * 1_103_515_245 + 12_345) % 2 ** 31
+      return seed / 2 ** 31
+    }
+    // A plan of 8 × 5 rooms of random widths and depths, filling the pane.
+    const cuts = (count: number, length: number) => {
+      const weights = Array.from({ length: count }, () => 0.2 + random())
+      const total = weights.reduce((sum, weight) => sum + weight, 0)
+      let at = 0
+      return [0, ...weights.map((weight) => (at += (weight / total) * length))]
+    }
+    const xs = cuts(8, 1200)
+    const ys = cuts(5, 800)
+    const rooms = xs.slice(1).flatMap((right, i) =>
+      ys.slice(1).map((bottom, j) => {
+        const left = xs[i]!
+        const top = ys[j]!
+        const outline: Polygon = {
+          outer: [
+            [left, top],
+            [right, top],
+            [right, bottom],
+            [left, bottom],
+          ],
+          holes: [],
+        }
+        const width = 40 + random() * 140
+        return {
+          box: { left, top, right, bottom },
+          candidate: pill(
+            `r${i}-${j}`,
+            left + (right - left) * (0.3 + random() * 0.4),
+            top + (bottom - top) * (0.3 + random() * 0.4),
+            (right - left) * (bottom - top),
+            [width, 24, width * 0.6],
+            outline,
+          ),
+        }
+      }),
     )
-    const placements = placePills(candidates)
-    const boxes = candidates.flatMap((candidate) => {
-      const placement = placements.get(candidate.id)!
-      return placement.mode === 'hidden'
-        ? []
-        : [rectOf(candidate, placement.dy, placement.mode === 'dot')]
+    const placements = placePills(
+      rooms.map((room) => room.candidate),
+      { width: 1200, height: 800 },
+    )
+    const placed = rooms.flatMap(({ box, candidate }) => {
+      const rect = placedRect(candidate, placements.get(candidate.id)!)
+      return rect ? [{ box, rect }] : []
     })
-    for (let i = 0; i < boxes.length; i++) {
-      for (let j = 0; j < i; j++) expect(apart(boxes[i]!, boxes[j]!)).toBe(true)
+    expect(placed.length).toBeGreaterThan(30)
+    for (const { box, rect } of placed) {
+      expect(rect.left).toBeGreaterThanOrEqual(box.left)
+      expect(rect.right).toBeLessThanOrEqual(box.right)
+      expect(rect.top).toBeGreaterThanOrEqual(box.top)
+      expect(rect.bottom).toBeLessThanOrEqual(box.bottom)
+    }
+    for (let i = 0; i < placed.length; i++) {
+      for (let j = 0; j < i; j++) expect(near(placed[i]!.rect, placed[j]!.rect)).toBe(false)
+    }
+  })
+})
+
+describe('the room under the pointer', () => {
+  const room = (zoneId: string, polygon: Polygon, area: number): RoomLabelEntry => ({
+    zoneId,
+    polygon: polygon.outer,
+    holes: polygon.holes,
+    area,
+  })
+  const hall = room('hall', square(5, 5, 10), 100)
+  const nook = room('nook', square(2, 2, 3), 9)
+  const atrium = room('atrium', { ...square(25, 5, 10), holes: [square(25, 5, 4).outer] }, 84)
+
+  test('is the smallest room holding the point: a zone drawn inside the room it stands in', () => {
+    const at = (x: number, y: number) => roomAt([hall, nook, atrium], () => [x, y, 0])
+    expect(at(2, 2)).toBe('nook')
+    expect(at(8, 8)).toBe('hall')
+    expect(at(22, 2)).toBe('atrium')
+  })
+
+  test('is no room outside every room or inside a hole', () => {
+    expect(roomAt([hall, atrium], () => [15, 5, 0])).toBeNull()
+    expect(roomAt([hall, atrium], () => [25, 5, 0])).toBeNull()
+  })
+
+  test('only tests a room where the pointer meets its own plane', () => {
+    expect(roomAt([hall, nook], (entry) => (entry === nook ? null : [2, 2, 0]))).toBe('hall')
+  })
+
+  test('is the floor the pointer reaches first, before a smaller one further down', () => {
+    // A raised floor over the whole hall, and a small room on the floor below it.
+    const raised = room('raised', square(5, 5, 10), 100)
+    const below = room('below', square(5, 5, 2), 4)
+    const hits = new Map<RoomLabelEntry, RoomHit>([
+      [raised, [5, 5, 3]],
+      [below, [5, 5, 6]],
+    ])
+    expect(roomAt([raised, below], (entry) => hits.get(entry) ?? null)).toBe('raised')
+    // Met at the same distance, they are one floor: the smaller wins.
+    hits.set(raised, [5, 5, 6 + 1e-4])
+    expect(roomAt([raised, below], (entry) => hits.get(entry) ?? null)).toBe('below')
+  })
+})
+
+describe('pills in 3D', () => {
+  test('a corridor running behind the camera still holds its pill to its width', () => {
+    // 0.3 m wide and 20 m long, half of it behind a camera standing in it.
+    const corridor: RoomLabelEntry = {
+      zoneId: 'corridor',
+      polygon: [
+        [-0.15, -10],
+        [0.15, -10],
+        [0.15, 10],
+        [-0.15, 10],
+      ],
+      holes: [],
+      area: 6,
     }
+    const camera = new PerspectiveCamera(50, 1440 / 900, 0.1, 1000)
+    camera.position.set(0, 1.6, 0)
+    camera.updateMatrixWorld()
+    const level = new Object3D()
+    level.updateMatrixWorld()
+    const size = { width: 1440, height: 900 }
+    const [candidate] = candidates3D(
+      [corridor],
+      new Map([['corridor', new Vector3(0, 1.25, -5)]]),
+      new Map<string, PillSize>([['corridor', [120, 24, 70]]]),
+      camera,
+      level,
+      size,
+    )
+    expect(
+      candidate!.outline.outer.every(([x, y]) => Number.isFinite(x) && Number.isFinite(y)),
+    ).toBe(true)
+    // About 58 px wide where the pill would sit: only its dot fits.
+    expect(placePills([candidate!], size).get('corridor')).toEqual({ tier: 'dot', dy: 0 })
   })
 })
 
@@ -231,127 +480,371 @@ describe('when pills re-read their overlaps', () => {
     }
     expect(clock.shouldRead(at(0), 0)).toBe(false)
     expect(clock.shouldRead(at(0), 0.2)).toBe(true)
+    expect(clock.atRest).toBe(true)
     expect(clock.shouldRead(at(0), 0.4)).toBe(false)
     // Moving: pills ride their rooms, nothing is re-placed until it rests.
     const moving = [0.5, 0.55, 0.6, 0.65, 0.7].map((t) => clock.shouldRead(at(t), t))
     expect(moving.some(Boolean)).toBe(false)
+    expect(clock.atRest).toBe(false)
     expect(clock.shouldRead(at(0.7), 0.85)).toBe(true)
     clock.invalidate()
     expect(clock.shouldRead(at(0.7), 0.86)).toBe(true)
   })
+
+  test('a room whose anchor moves has the pills placed again', () => {
+    const anchors = new RoomAnchors()
+    let moves = 0
+    anchors.onMove = () => moves++
+    anchors.set('kitchen', new Vector3(1, 1.25, 2))
+    anchors.set('kitchen', new Vector3(1, 1.25, 2))
+    expect(moves).toBe(1)
+    anchors.set('kitchen', new Vector3(1, 1.75, 2))
+    expect(moves).toBe(2)
+  })
 })
 
 describe('applying placements', () => {
+  const element = () =>
+    ({
+      dataset: {} as Record<string, string>,
+      style: { translate: '' },
+    }) as unknown as HTMLElement
   function setup() {
-    const element = () =>
-      ({
-        dataset: {} as Record<string, string>,
-        style: { translate: '' },
-      }) as unknown as HTMLElement
     const elements = new Map([
       ['near', element()],
       ['far', element()],
     ])
-    const timers: Array<{ run: () => void; ms: number; cancelled: boolean }> = []
+    const clock = manualClock()
     const changes: ReadonlySet<string>[] = []
     const placer = new PillPlacer(
       elements,
       (gone) => changes.push(gone),
-      (run, ms) => {
-        const timer = { run, ms, cancelled: false }
-        timers.push(timer)
-        return timer as unknown as ReturnType<typeof setTimeout>
-      },
-      (timer) => {
-        ;(timer as unknown as { cancelled: boolean }).cancelled = true
-      },
+      clock.schedule,
+      clock.cancel,
     )
-    return { elements, timers, changes, placer }
+    return { elements, clock, changes, placer }
   }
   const has = (element: HTMLElement | undefined, flag: string) => flag in element!.dataset
-  const full = (dy = 0) => ({ mode: 'full' as const, dy })
+  const full = (dy = 0): PillPlacement => ({ tier: 'full', dy })
+  const hidden: PillPlacement = { tier: 'hidden', dy: 0 }
+  const placements = (entries: [string, PillPlacement][]) => new Map(entries)
 
-  test('a nudge is a translate, a dot is a collapsed pill, both undone when placed back', () => {
+  test('a nudge is a translate, a tier is a flag, both undone when placed back', () => {
     const { elements, placer } = setup()
     placer.apply(
-      new Map<string, PillPlacement>([
+      placements([
         ['near', full(-8)],
-        ['far', { mode: 'dot' as const, dy: 0 }],
+        ['far', { tier: 'dot', dy: 0 }],
       ]),
       180,
     )
     expect(elements.get('near')!.style.translate).toBe('0 -8px')
-    expect(has(elements.get('far'), 'roomLabelCollapsed')).toBe(true)
+    expect(elements.get('far')!.dataset.roomLabelTier).toBe('dot')
     placer.apply(
-      new Map<string, PillPlacement>([
+      placements([
         ['near', full()],
-        ['far', full()],
+        ['far', { tier: 'name', dy: 0 }],
       ]),
       180,
     )
     expect(elements.get('near')!.style.translate).toBe('')
-    expect(has(elements.get('far'), 'roomLabelCollapsed')).toBe(false)
+    expect(elements.get('far')!.dataset.roomLabelTier).toBe('name')
+    placer.apply(
+      placements([
+        ['near', full()],
+        ['far', full()],
+      ]),
+      180,
+    )
+    expect(has(elements.get('far'), 'roomLabelTier')).toBe(false)
   })
 
   test('a hidden pill fades out without taking the pointer, then leaves the DOM', () => {
-    const { elements, timers, changes, placer } = setup()
+    const { elements, clock, changes, placer } = setup()
     placer.apply(
-      new Map<string, PillPlacement>([
+      placements([
         ['near', full()],
-        ['far', { mode: 'hidden' as const, dy: 0 }],
+        ['far', hidden],
       ]),
       180,
     )
     expect(has(elements.get('far'), 'roomLabelHidden')).toBe(true)
-    expect(timers.map(({ ms }) => ms)).toEqual([180])
+    clock.advance(179)
     expect(changes).toEqual([])
-    timers[0]!.run()
+    clock.advance(1)
     expect(placer.gone).toEqual(new Set(['far']))
   })
 
   test('a pill given room again mounts in its new place, or turns back mid-fade', () => {
-    const { elements, timers, placer } = setup()
-    placer.apply(new Map<string, PillPlacement>([['far', { mode: 'hidden' as const, dy: 0 }]]), 180)
-    timers[0]!.run()
-    const element = elements.get('far')!
+    const { elements, clock, placer } = setup()
+    placer.apply(placements([['far', hidden]]), 180)
+    clock.advance(180)
+    const far = elements.get('far')!
     elements.delete('far')
-    placer.apply(new Map<string, PillPlacement>([['far', full(12)]]), 180)
+    placer.apply(placements([['far', full(12)]]), 180)
     expect(placer.gone).toEqual(new Set())
-    placer.mount('far', element)
-    expect(element.style.translate).toBe('0 12px')
+    placer.mount('far', far)
+    expect(far.style.translate).toBe('0 12px')
+    expect(has(far, 'roomLabelHidden')).toBe(false)
 
     const again = setup()
-    again.placer.apply(
-      new Map<string, PillPlacement>([['far', { mode: 'hidden' as const, dy: 0 }]]),
+    again.placer.apply(placements([['far', hidden]]), 180)
+    again.placer.apply(placements([['far', full()]]), 180)
+    again.clock.advance(500)
+    expect(again.placer.gone).toEqual(new Set())
+    expect(has(again.elements.get('far'), 'roomLabelHidden')).toBe(false)
+  })
+
+  test('a pill no pass has placed waits hidden, still mounted, until one places it', () => {
+    const { elements, clock, placer } = setup()
+    const near = elements.get('near')!
+    placer.mount('near', near)
+    expect(has(near, 'roomLabelHidden')).toBe(true)
+    // Not measured yet, so not a candidate: it stays hidden and is not removed.
+    placer.apply(placements([['far', full()]]), 180)
+    expect(has(near, 'roomLabelHidden')).toBe(true)
+    expect(clock.pending()).toBe(0)
+    placer.apply(
+      placements([
+        ['near', full()],
+        ['far', full()],
+      ]),
       180,
     )
-    again.placer.apply(new Map<string, PillPlacement>([['far', full()]]), 180)
-    expect(again.timers[0]!.cancelled).toBe(true)
-    expect(has(again.elements.get('far'), 'roomLabelHidden')).toBe(false)
+    expect(has(near, 'roomLabelHidden')).toBe(false)
+    // Its anchor leaves the screen: hidden again, and still mounted.
+    placer.apply(placements([['far', full()]]), 180)
+    expect(has(near, 'roomLabelHidden')).toBe(true)
+    clock.advance(500)
+    expect(placer.gone).toEqual(new Set())
   })
 
   test('hidden pills can refresh their text measurements without becoming visible', () => {
-    const { elements, timers, placer } = setup()
-    placer.apply(new Map<string, PillPlacement>([['far', { mode: 'hidden', dy: 0 }]]), 180)
-    timers[0]!.run()
+    const { elements, clock, placer } = setup()
+    placer.apply(placements([['far', hidden]]), 180)
+    clock.advance(180)
     elements.delete('far')
     placer.remeasure()
     expect(placer.gone.size).toBe(0)
-    const fresh = { dataset: {}, style: { translate: '' } } as unknown as HTMLElement
+    const fresh = element()
     elements.set('far', fresh)
     placer.mount('far', fresh)
     expect(has(fresh, 'roomLabelHidden')).toBe(true)
-    placer.apply(new Map<string, PillPlacement>([['far', full()]]), 180)
+    placer.apply(placements([['far', full()]]), 180)
     expect(has(fresh, 'roomLabelHidden')).toBe(false)
   })
 
   test('the whole layer fades out and back in, except pills still hidden', () => {
     const { elements, placer } = setup()
-    placer.apply(new Map<string, PillPlacement>([['far', { mode: 'hidden' as const, dy: 0 }]]), 180)
+    placer.apply(
+      placements([
+        ['near', full()],
+        ['far', hidden],
+      ]),
+      180,
+    )
     placer.showAll(false)
     expect(has(elements.get('near'), 'roomLabelHidden')).toBe(true)
     placer.showAll(true)
     expect(has(elements.get('near'), 'roomLabelHidden')).toBe(false)
     expect(has(elements.get('far'), 'roomLabelHidden')).toBe(true)
   })
+
+  test('the pills under the detail chip fade out of its way, and come back', () => {
+    const { elements, placer } = setup()
+    placer.suppress(new Set(['near', 'far']), 'far')
+    expect(has(elements.get('near'), 'roomLabelSuppressed')).toBe(true)
+    // The open room's own pill fades under its chip but stays the control.
+    expect(has(elements.get('far'), 'roomLabelSuppressed')).toBe(false)
+    expect(has(elements.get('far'), 'roomLabelOpen')).toBe(true)
+    const remounted = element()
+    placer.mount('near', remounted)
+    expect(has(remounted, 'roomLabelSuppressed')).toBe(true)
+    placer.suppress(new Set(), null)
+    expect(has(elements.get('near'), 'roomLabelSuppressed')).toBe(false)
+    expect(has(elements.get('far'), 'roomLabelOpen')).toBe(false)
+  })
+
+  test('with the default timers, a pill hiding never stops the pills after it', () => {
+    // Browser timers throw when called as a method of anything but the window.
+    const realSetTimeout = globalThis.setTimeout
+    const realClearTimeout = globalThis.clearTimeout
+    const clock = manualClock()
+    function strictSetTimeout(this: unknown, run: () => void, ms: number) {
+      if (this !== undefined && this !== globalThis) throw new TypeError('Illegal invocation')
+      return clock.schedule(run, ms)
+    }
+    function strictClearTimeout(this: unknown, timer: Timer) {
+      if (this !== undefined && this !== globalThis) throw new TypeError('Illegal invocation')
+      clock.cancel(timer)
+    }
+    globalThis.setTimeout = strictSetTimeout as unknown as typeof setTimeout
+    globalThis.clearTimeout = strictClearTimeout as unknown as typeof clearTimeout
+    try {
+      const elements = new Map([
+        ['a', element()],
+        ['b', element()],
+      ])
+      const placer = new PillPlacer(elements, () => {})
+      placer.apply(
+        placements([
+          ['a', hidden],
+          ['b', full(8)],
+        ]),
+        180,
+      )
+      expect(elements.get('b')!.style.translate).toBe('0 8px')
+      clock.advance(180)
+      expect(placer.gone).toEqual(new Set(['a']))
+
+      placer.apply(placements([['b', hidden]]), 180)
+      placer.apply(placements([['b', full()]]), 180)
+      clock.advance(180)
+      expect(placer.gone).toEqual(new Set(['a']))
+      expect(has(elements.get('b'), 'roomLabelHidden')).toBe(false)
+
+      const reveal = new LabelReveal(() => {})
+      reveal.pick('b')
+      reveal.pick('a')
+      reveal.clear()
+      expect(clock.pending()).toBe(0)
+    } finally {
+      globalThis.setTimeout = realSetTimeout
+      globalThis.clearTimeout = realClearTimeout
+    }
+  })
+})
+
+describe("a room's detail", () => {
+  function setup() {
+    const clock = manualClock()
+    const changes: (string | null)[] = []
+    const focused: boolean[] = []
+    const reveal = new LabelReveal(
+      (id, isFocused) => {
+        changes.push(id)
+        focused.push(isFocused)
+      },
+      clock.schedule,
+      clock.cancel,
+    )
+    return { clock, changes, focused, reveal }
+  }
+
+  test('opens at once for a pill under the pointer, after a short rest for a room under it', () => {
+    const { clock, changes, reveal } = setup()
+    reveal.hover('closet')
+    expect(changes).toEqual(['closet'])
+    reveal.hover(null)
+    clock.advance(REVEAL_GRACE_MS)
+    expect(changes).toEqual(['closet', null])
+    reveal.pick('bath')
+    clock.advance(REVEAL_DWELL_MS - 1)
+    expect(reveal.active).toBeNull()
+    clock.advance(1)
+    expect(reveal.active).toBe('bath')
+  })
+
+  test('hands over from room to room with one detail open, and opens nothing for a room passed over', () => {
+    const { clock, changes, reveal } = setup()
+    reveal.pick('hall')
+    clock.advance(REVEAL_DWELL_MS)
+    reveal.pick('bath')
+    clock.advance(REVEAL_DWELL_MS - 1)
+    expect(reveal.active).toBe('hall')
+    clock.advance(1)
+    reveal.pick('closet')
+    clock.advance(REVEAL_DWELL_MS / 2)
+    reveal.pick('bedroom')
+    clock.advance(REVEAL_DWELL_MS / 2)
+    expect(reveal.active).toBe('bath')
+    clock.advance(REVEAL_DWELL_MS / 2)
+    expect(changes).toEqual(['hall', 'bath', 'bedroom'])
+  })
+
+  test('stays a moment after the pointer leaves its room, and stays if it comes back', () => {
+    const { clock, changes, reveal } = setup()
+    reveal.pick('bath')
+    clock.advance(REVEAL_DWELL_MS)
+    reveal.pick(null)
+    clock.advance(REVEAL_GRACE_MS - 1)
+    reveal.pick('bath')
+    clock.advance(1000)
+    expect(changes).toEqual(['bath'])
+    reveal.pick(null)
+    clock.advance(REVEAL_GRACE_MS)
+    expect(changes).toEqual(['bath', null])
+  })
+
+  test('opens at once for keyboard focus, and says so while that pill keeps it', () => {
+    const { clock, changes, focused, reveal } = setup()
+    reveal.focus('kitchen')
+    reveal.hover('kitchen')
+    reveal.hover(null)
+    reveal.focus(null)
+    clock.advance(REVEAL_GRACE_MS)
+    expect(changes).toEqual(['kitchen', null])
+    expect(focused).toEqual([true, false])
+  })
+
+  test('with the pointer on one pill and focus on another, the one that moved last wins', () => {
+    const { changes, focused, reveal } = setup()
+    reveal.hover('kitchen')
+    reveal.focus('bath')
+    expect(reveal.active).toBe('bath')
+    reveal.hover('kitchen')
+    expect(reveal.active).toBe('bath')
+    reveal.hover('closet')
+    reveal.focus('hall')
+    reveal.hover(null)
+    expect(changes).toEqual(['kitchen', 'bath', 'closet', 'hall'])
+    expect(focused).toEqual([false, true, false, true])
+  })
+
+  test('Escape closes it until the pointer or focus moves on to another room', () => {
+    const { clock, changes, reveal } = setup()
+    reveal.pick('bath')
+    clock.advance(REVEAL_DWELL_MS)
+    reveal.dismiss()
+    reveal.pick('bath')
+    clock.advance(1000)
+    reveal.hover('bath')
+    expect(changes).toEqual(['bath', null])
+    reveal.hover(null)
+    reveal.pick('closet')
+    clock.advance(REVEAL_DWELL_MS)
+    reveal.pick('bath')
+    clock.advance(REVEAL_DWELL_MS)
+    expect(changes).toEqual(['bath', null, 'closet', 'bath'])
+  })
+
+  test('a focused pill opens again once the view rests', () => {
+    const { changes, reveal } = setup()
+    reveal.focus('kitchen')
+    reveal.clear()
+    reveal.pick(null)
+    expect(changes).toEqual(['kitchen', null, 'kitchen'])
+  })
+
+  test('closes at once when the view moves, and forgets the pointer', () => {
+    const { clock, reveal } = setup()
+    reveal.pick('bath')
+    clock.advance(REVEAL_DWELL_MS)
+    reveal.clear()
+    expect(reveal.active).toBeNull()
+    clock.advance(1000)
+    expect(reveal.active).toBeNull()
+    expect(clock.pending()).toBe(0)
+  })
+
+  test('fades out exactly the pills within the gap of its chip', () => {
+    const chip = { left: 0, top: 0, right: 100, bottom: 24 }
+    const rects = new Map([
+      ['under', { left: 50, top: 10, right: 80, bottom: 30 }],
+      ['touching', { left: 100 + PILL_GAP - 1, top: 0, right: 140, bottom: 20 }],
+      ['clear', { left: 100 + PILL_GAP, top: 0, right: 140, bottom: 20 }],
+      ['far', { left: 400, top: 400, right: 450, bottom: 420 }],
+    ])
+    expect(suppressedBy(chip, rects)).toEqual(new Set(['under', 'touching']))
+  })
 })