@pascal-app/viewer 1.1.0 → 1.1.1

package/dist/ui/components/rooms/room-labels.js

@@ -0,0 +1,1295 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { area, containsPoint, DEFAULT_LEVEL_HEIGHT, polygonInteriorPoint, useLocale, } from '@pascal-app/core';
+import { useFrame, useThree } from '@react-three/fiber';
+import { createContext, Fragment, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from 'react';
+import { createPortal } from 'react-dom';
+import { Matrix4, Ray, Raycaster, Vector2, Vector3, } from 'three';
+import { timeSpan } from '../../../lib/perf-tracks';
+import useViewer from '../../../store/use-viewer';
+import { formatRoomArea } from '../../lib/room-area';
+import { LocalizedHtml } from '../localized-html';
+const CONTEXT_TYPES = new Set(['site', 'building', 'level']);
+/**
+ * Room pills are the resting view of a level: nothing picked but the site,
+ * building or level itself, no room, and no unit being looked at. Anything
+ * else selected takes them away.
+ */
+export function roomLabelsVisible(state) {
+    return (!state.zoneId &&
+        !state.focusedUnitId &&
+        state.selectedTypes.every((type) => type !== undefined && CONTEXT_TYPES.has(type)));
+}
+/** A pill's screen rect: centred on where its anchor lands, at its size. */
+export function pillRect(x, y, [width, height]) {
+    return { left: x - width / 2, top: y - height / 2, right: x + width / 2, bottom: y + height / 2 };
+}
+/** The collapsed pill: its colour dot in a small round box. */
+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'];
+function near(a, b) {
+    return (a.left < b.right + PILL_GAP &&
+        b.left < a.right + PILL_GAP &&
+        a.top < b.bottom + PILL_GAP &&
+        b.top < a.bottom + PILL_GAP);
+}
+function tierSize(size, tier) {
+    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, { tier, dy }) {
+    return tier === 'hidden' ? null : pillRect(pill.x, pill.y + dy, tierSize(pill.size, tier));
+}
+function segmentTouchesRect([ax, ay], [bx, by], rect) {
+    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, q) => {
+        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, rect) {
+    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, outline) {
+    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, previous) {
+    yield 0;
+    if (previous)
+        yield previous;
+    for (let d = NUDGE_STEP; d <= budget; d += NUDGE_STEP) {
+        if (-d !== previous)
+            yield -d;
+        if (d !== previous)
+            yield d;
+    }
+}
+function ringBox(ring) {
+    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, bounds, placed, previous) {
+    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 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, bounds, previous = new Map()) {
+    const placed = [];
+    const placements = new Map();
+    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)
+        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, rects) {
+    const ids = new Set();
+    for (const [id, rect] of rects)
+        if (near(chip, rect))
+            ids.add(id);
+    return ids;
+}
+// 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, pointOn) {
+    let found = 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
+// moves they keep their places and ride their rooms, so nothing jitters.
+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. */
+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() {
+    return typeof window !== 'undefined' &&
+        window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+        ? 0
+        : PILL_FADE_MS;
+}
+/**
+ * When a layer re-places its pills: once the view has held still, and again
+ * whenever its pills change while it rests. Still means within an epsilon of
+ * the view last seen moving — camera damping keeps nudging the camera by
+ * fractions of a millimetre for a second or more after it visibly stops, and
+ * waiting for it to stop exactly left pills misplaced for that long.
+ */
+export class DeclutterClock {
+    reference = null;
+    movedAt = Number.NEGATIVE_INFINITY;
+    settled = false;
+    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;
+    }
+    /** Whether to place pills for this view (any flat list of numbers) at `now` seconds. */
+    shouldRead(view, now) {
+        const reference = this.reference;
+        let moved = !reference || reference.length !== view.length;
+        for (let i = 0; !moved && i < view.length; i++) {
+            moved = Math.abs(view[i] - reference[i]) > VIEW_EPSILON;
+        }
+        if (moved) {
+            this.reference = Array.from(view);
+            this.movedAt = now;
+            this.settled = false;
+        }
+        if (now - this.movedAt < DECLUTTER_REST_SECONDS || (this.settled && !this.dirty))
+            return false;
+        this.settled = true;
+        this.dirty = false;
+        return true;
+    }
+}
+/** The pills a layer has mounted, by zone id; the layer hears each one come and go. */
+export class PillElements extends Map {
+    onMount = null;
+    onUnmount = null;
+    onMeasure = null;
+    measure(id) {
+        const element = this.get(id);
+        if (element)
+            this.onMeasure?.(id, element);
+    }
+    set(id, element) {
+        super.set(id, element);
+        this.onMount?.(id, element);
+        return this;
+    }
+    delete(id) {
+        const element = this.get(id);
+        const removed = super.delete(id);
+        if (element)
+            this.onUnmount?.(element);
+        return removed;
+    }
+}
+/** Where each room's pill floats, level-local; moving one has the pills placed again. */
+export class RoomAnchors extends Map {
+    onMove = null;
+    set(id, position) {
+        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, read = getComputedStyle) {
+    const tier = element.dataset.roomLabelTier;
+    delete element.dataset.roomLabelTier;
+    try {
+        const style = read(element);
+        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 (tier !== undefined)
+            element.dataset.roomLabelTier = tier;
+    }
+}
+// Wrapped, not passed as is: browsers throw "Illegal invocation" when the
+// global timers are called as methods of another object.
+const startTimer = (run, ms) => setTimeout(run, ms);
+const stopTimer = (timer) => clearTimeout(timer);
+/**
+ * Applies placements to the mounted pills as direct style writes: the nudge
+ * 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 {
+    elements;
+    onGone;
+    schedule;
+    cancel;
+    gone = new Set();
+    /** The last pass's placements: a remounting pill takes its own at once. */
+    placements = new Map();
+    fading = new Map();
+    suppressed = new Set();
+    open = null;
+    shown = true;
+    constructor(elements, onGone, schedule = startTimer, cancel = stopTimer) {
+        this.elements = elements;
+        this.onGone = onGone;
+        this.schedule = schedule;
+        this.cancel = cancel;
+    }
+    apply(placements, fadeMs = pillFadeMs()) {
+        this.placements = placements;
+        for (const [id, element] of this.elements) {
+            const placement = placements.get(id);
+            if (placement && placement.tier !== 'hidden') {
+                const timer = this.fading.get(id);
+                if (timer !== undefined)
+                    this.cancel(timer);
+                this.fading.delete(id);
+                this.show(element, placement);
+                continue;
+            }
+            element.dataset.roomLabelHidden = '';
+            if (!placement || this.fading.has(id))
+                continue;
+            this.fading.set(id, this.schedule(() => {
+                this.fading.delete(id);
+                this.setGone(new Set(this.gone).add(id));
+            }, fadeMs));
+        }
+        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, or waits hidden for one. */
+    mount(id, element) {
+        const placement = this.placements.get(id);
+        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, open) {
+        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. */
+    remeasure() {
+        if (this.gone.size)
+            this.setGone(new Set());
+    }
+    /** Fade every mounted pill out (the layer is leaving), or the placed ones back in. */
+    showAll(shown) {
+        this.shown = shown;
+        for (const [id, element] of this.elements) {
+            const placement = this.placements.get(id);
+            if (shown && placement && placement.tier !== 'hidden')
+                delete element.dataset.roomLabelHidden;
+            else
+                element.dataset.roomLabelHidden = '';
+        }
+    }
+    dispose() {
+        for (const timer of this.fading.values())
+            this.cancel(timer);
+        this.fading.clear();
+    }
+    show(element, { tier, dy }) {
+        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 = '';
+    }
+    mark(id, element) {
+        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;
+    }
+    setGone(gone) {
+        this.gone = gone;
+        this.onGone(gone);
+    }
+}
+/**
+ * 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 {
+    onChange;
+    schedule;
+    cancel;
+    active = null;
+    activeFocused = false;
+    hovered = null;
+    focused = null;
+    picked = null;
+    keyboardLast = false;
+    dismissed = null;
+    pending = null;
+    constructor(onChange, schedule = startTimer, cancel = stopTimer) {
+        this.onChange = onChange;
+        this.schedule = schedule;
+        this.cancel = cancel;
+    }
+    /** The pill under the pointer. */
+    hover(id) {
+        if (id !== null && id !== this.hovered)
+            this.keyboardLast = false;
+        this.hovered = id;
+        this.update();
+    }
+    /** The pill with keyboard focus. */
+    focus(id) {
+        if (id !== null)
+            this.keyboardLast = true;
+        this.focused = id;
+        this.update();
+    }
+    /** The room under the pointer. */
+    pick(id) {
+        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);
+    }
+    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),
+        };
+    }
+    stop() {
+        if (this.pending)
+            this.cancel(this.pending.timer);
+        this.pending = null;
+    }
+    set(id) {
+        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. */
+export function useFadePresence(shown, onGone) {
+    const [present, setPresent] = useState(shown);
+    useEffect(() => {
+        if (shown) {
+            setPresent(true);
+            return;
+        }
+        const timer = setTimeout(() => setPresent(false), pillFadeMs());
+        return () => clearTimeout(timer);
+    }, [shown]);
+    const goneRef = useRef(onGone);
+    goneRef.current = onGone;
+    const isPresent = shown || present;
+    useEffect(() => {
+        if (!isPresent)
+            goneRef.current?.();
+    }, [isPresent]);
+    return isPresent;
+}
+/**
+ * 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.
+ */
+class PillLayer {
+    elements = new PillElements();
+    clock = new DeclutterClock();
+    sizes = new Map();
+    placer;
+    reveal;
+    container = () => null;
+    surface = () => null;
+    /** The pointer over the host in client px while no button is down, null off it. */
+    pointer = null;
+    pointerMoved = false;
+    candidates = new Map();
+    rects = new Map();
+    bounds = { width: 0, height: 0 };
+    chip = null;
+    // The open detail, a store of its own: see `OpenRoomLabelDetail`.
+    detail = null;
+    detailListeners = new Set();
+    constructor(onGone) {
+        this.placer = new PillPlacer(this.elements, onGone);
+        this.reveal = new LabelReveal((id, focused) => this.openDetail(id, focused));
+    }
+    subscribeDetail = (listener) => {
+        this.detailListeners.add(listener);
+        return () => {
+            this.detailListeners.delete(listener);
+        };
+    };
+    getDetail = () => this.detail;
+    place(candidates, bounds) {
+        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, pick) {
+        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) => {
+        this.chip = rect;
+        this.suppress();
+    };
+    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);
+    }
+    openDetail(id, focused) {
+        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();
+    }
+    locate(id) {
+        const bounds = this.bounds;
+        const rect = this.rects.get(id);
+        const dot = rect && this.elements.get(id)?.querySelector('[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, b) => 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, entries, host, container, surface) {
+    const [gone, setGone] = useState(() => new Set());
+    const [layer] = useState(() => new PillLayer(setGone));
+    layer.container = container;
+    layer.surface = surface;
+    const unit = useViewer((s) => s.unit);
+    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 && 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 = typeof ResizeObserver === 'undefined'
+            ? null
+            : new ResizeObserver((records) => {
+                for (const record of records) {
+                    const element = record.target;
+                    const id = element.dataset.roomLabel;
+                    const box = record.borderBoxSize?.[0];
+                    if (!(id && box && box.inlineSize > 0))
+                        continue;
+                    // 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);
+                }
+            });
+        elements.onMount = (id, element) => {
+            placer.mount(id, element);
+            elements.measure(id);
+            observer?.observe(element);
+            clock.invalidate();
+        };
+        elements.onUnmount = (element) => {
+            observer?.unobserve(element);
+            clock.invalidate();
+        };
+        for (const [id, element] of elements)
+            elements.onMount(id, element);
+        const fontsChanged = () => {
+            placer.remeasure();
+            for (const id of elements.keys())
+                elements.measure(id);
+        };
+        document.fonts?.addEventListener('loadingdone', fontsChanged);
+        return () => {
+            elements.onMount = null;
+            elements.onUnmount = null;
+            elements.onMeasure = null;
+            document.fonts?.removeEventListener('loadingdone', fontsChanged);
+            observer?.disconnect();
+            placer.dispose();
+            layer.reveal.clear();
+        };
+    }, [layer]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Hidden pills must remount to measure changed entries or units.
+    useEffect(() => {
+        layer.placer.remeasure();
+        layer.clock.invalidate();
+    }, [entries, layer, unit]);
+    useEffect(() => {
+        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) => {
+            const label = target instanceof Element ? target.closest('[data-room-label]') : null;
+            if (!(label && layer.container()?.contains(label)))
+                return null;
+            return label.dataset.roomLabel ?? null;
+        };
+        const move = (event) => {
+            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) => {
+            const id = labelAt(event.target);
+            if (id && shownRef.current && event.target.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) => {
+            if (event.code === 'Space' && labelAt(event.target))
+                event.stopPropagation();
+        };
+        const dismiss = (event) => {
+            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. 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, zones) {
+    const hiddenIds = new Set(zones.filter((zone) => zone.visible === false).map((zone) => zone.id));
+    const roomIds = new Set(rooms.map((room) => room.zoneId));
+    const entries = [
+        ...rooms
+            .filter((room) => !hiddenIds.has(room.zoneId))
+            .map((room) => ({
+            zoneId: room.zoneId,
+            polygon: room.polygon,
+            holes: room.holes,
+            area: room.area,
+        })),
+        ...zones
+            .filter((zone) => zone.visible !== false && !roomIds.has(zone.id) && zone.polygon.length >= 3)
+            .map((zone) => ({
+            zoneId: zone.id,
+            polygon: zone.polygon,
+            holes: zone.holes ?? [],
+            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)] };
+    });
+}
+/** 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, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "h-2 w-2 shrink-0 rounded-full", "data-room-label-dot": "", style: { backgroundColor: color } }), _jsx("span", { className: full
+                    ? 'min-w-0 font-medium [overflow-wrap:anywhere]'
+                    : 'max-w-40 truncate font-medium [[data-room-label-tier=dot]>&]:hidden', children: name }), _jsx("span", { className: "shrink-0 whitespace-nowrap font-mono text-white/60 tabular-nums [[data-room-label-tier]>&]:hidden", "data-room-label-area": "", children: areaLabel })] }));
+}
+/**
+ * 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, color, name, areaM2, elements, onClick, onHover, onLeave, }) {
+    const unit = useViewer((s) => s.unit);
+    const locale = useLocale();
+    const areaLabel = formatRoomArea(areaM2, unit, locale);
+    // 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, locale, name, unit, zoneId]);
+    const register = useCallback((element) => {
+        if (element)
+            elements.set(zoneId, element);
+        else
+            elements.delete(zoneId);
+    }, [elements, zoneId]);
+    return (_jsx("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) => {
+            event.stopPropagation();
+            onClick(event);
+        }, onPointerDown: (event) => event.stopPropagation(), 
+        // Move as well as enter: leaving the canvas for the pill ends the canvas
+        // hover after the pill's enter has run.
+        onPointerEnter: onHover, onPointerLeave: onLeave, onPointerMove: onHover, ref: register, type: "button", children: _jsx(LabelParts, { areaLabel: areaLabel, color: color, full: false, name: name }) }));
+}
+/**
+ * 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, }) {
+    const unit = useViewer((s) => s.unit);
+    const locale = useLocale();
+    return (_jsx("div", { "aria-hidden": true, 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, children: _jsx(LabelParts, { areaLabel: formatRoomArea(areaM2, unit, locale), color: color, full: true, name: name }) }));
+}
+/**
+ * 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, }) {
+    const ref = useRef(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('[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 (_jsx("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: children }));
+}
+/**
+ * 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, }) {
+    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 (_jsx(RoomLabelDetail, { detail: detail, onPlaced: layer.placeDetail, children: renderDetail(entry) }));
+}
+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, y, z, size) {
+    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,
+    ];
+}
+// 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, y, size) {
+    const e = toScreen.elements;
+    const w = ([x, z]) => e[3] * x + e[7] * y + e[11] * z + e[15];
+    const ring = [];
+    const add = (x, z) => {
+        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, anchors, sizes, camera, level, size) {
+    toScreen.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
+    toScreen.multiply(level.matrixWorld);
+    const candidates = [];
+    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 = [];
+        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, anchors, pointer, camera, level, size) {
+    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; 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, }) {
+    const ref = useRef(null);
+    const [anchors] = useState(() => new RoomAnchors());
+    const view = useRef(new Float64Array(50));
+    const host = useThree((s) => (s.events.connected ?? s.gl.domElement.parentNode));
+    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);
+    useEffect(() => {
+        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.keys())
+            if (!ids.has(id))
+                anchors.delete(id);
+        layer.clock.invalidate();
+    }, [anchors, entries, layer]);
+    useFrame(({ camera, clock: frameClock, size }) => {
+        if (!ref.current)
+            return;
+        const level = levelObject();
+        ref.current.visible = !!level;
+        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);
+        flat.set(camera.projectionMatrix.elements, 16);
+        flat.set(level.matrixWorld.elements, 32);
+        flat[48] = size.width;
+        flat[49] = size.height;
+        const placed = layer.clock.shouldRead(flat, frameClock.elapsedTime);
+        if (placed) {
+            timeSpan('room-labels', () => layer.place(candidates3D(entries, anchors, layer.sizes, camera, level, size), size));
+        }
+        layer.settle(placed, (pointer) => pick3D(entries, anchors, pointer, camera, level, size));
+    });
+    if (entries.length === 0 || !portals)
+        return null;
+    return (_jsx(PillPortalContext.Provider, { value: portals.pills, children: _jsx(HiddenPillsContext.Provider, { value: gone, children: _jsxs("group", { matrixAutoUpdate: false, ref: ref, children: [entries.map((entry) => (_jsx(Fragment, { children: renderLabel(entry, anchors, layer.elements) }, entry.zoneId))), _jsx(LocalizedHtml, { calculatePosition: atLayerOrigin, onOcclude: keepShown, portal: portals.detail, style: { pointerEvents: 'none' }, children: _jsx(OpenRoomLabelDetail, { entries: entries, layer: layer, renderDetail: renderDetail }) })] }) }) }));
+}
+const PillPortalContext = createContext(null);
+const HiddenPillsContext = createContext(new Set());
+/** Where a room's pill floats: over its interior, at mid-storey above its floor. */
+export function RoomLabelAnchor3D({ entry, floorY, anchors, children, }) {
+    const portal = useContext(PillPortalContext);
+    const gone = useContext(HiddenPillsContext);
+    const position = useMemo(() => {
+        const [x, z] = polygonInteriorPoint({ polygon: entry.polygon, holes: entry.holes });
+        return new Vector3(x, floorY + LABEL_HEIGHT, z);
+    }, [entry.polygon, entry.holes, floorY]);
+    // Hidden HTML still needs a live anchor so moving a room can give its pill
+    // room again. The layer drops anchors of rooms that left.
+    useEffect(() => {
+        anchors.set(entry.zoneId, position);
+    }, [anchors, entry.zoneId, position]);
+    if (gone.has(entry.zoneId))
+        return null;
+    return (_jsx(LocalizedHtml, { center: true, portal: portal ?? undefined, position: position, 
+        // The wrapper lets the canvas keep everything but the pill itself.
+        style: { pointerEvents: 'none' }, zIndexRange: [20, 0], children: children }));
+}
+/**
+ * The same pills over a 2D plan, mounted inside the plan's SVG: screen-positioned
+ * from the plan's transform, re-placed as in 3D once the plan rests, and clipped
+ * to the plan's pane in the plan's own stacking layer, under the UI over it.
+ */
+export function RoomPillsLayer2D({ entries, renderLabel, renderDetail, shown, }) {
+    const ref = useRef(null);
+    const paneRef = useRef(null);
+    const [host, setHost] = useState(null);
+    const [nodes] = useState(() => new PillElements());
+    const { layer, gone } = usePillLayer(shown, entries, host, () => paneRef.current, () => ref.current?.ownerSVGElement);
+    const shownRef = useRef(shown);
+    shownRef.current = shown;
+    const anchors = useMemo(() => new Map(entries.map((entry) => [
+        entry.zoneId,
+        polygonInteriorPoint({ polygon: entry.polygon, holes: entry.holes }),
+    ])), [entries]);
+    useEffect(() => {
+        setHost(ref.current?.ownerSVGElement?.parentElement ?? null);
+    }, []);
+    useEffect(() => {
+        if (entries.length === 0)
+            return;
+        let raf = 0;
+        let lastKey = '';
+        const view = new Float64Array(10);
+        // A pill wrapper that mounts is placed on the next frame.
+        nodes.onMount = () => {
+            lastKey = '';
+        };
+        layer.clock.invalidate();
+        const tick = (now) => {
+            raf = requestAnimationFrame(tick);
+            const group = ref.current;
+            const svg = group?.ownerSVGElement;
+            const ctm = group?.getScreenCTM();
+            const paneElement = paneRef.current;
+            if (!(svg && ctm && paneElement))
+                return;
+            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}`;
+            // A plan point in the pane's px.
+            const place = ([x, y]) => [
+                ctm.a * x + ctm.c * y + ctm.e - pane.left,
+                ctm.b * x + ctm.d * y + ctm.f - pane.top,
+            ];
+            const inside = ([x, y]) => x >= 0 && x <= pane.width && y >= 0 && y <= pane.height;
+            if (key !== lastKey) {
+                lastKey = key;
+                Object.assign(paneElement.style, {
+                    left: `${pane.left - origin.left}px`,
+                    top: `${pane.top - origin.top}px`,
+                    width: `${pane.width}px`,
+                    height: `${pane.height}px`,
+                });
+                for (const [id, element] of nodes) {
+                    const anchor = anchors.get(id);
+                    if (!anchor)
+                        continue;
+                    const at = place(anchor);
+                    element.style.left = `${at[0]}px`;
+                    element.style.top = `${at[1]}px`;
+                    element.style.display = inside(at) ? '' : 'none';
+                }
+            }
+            view[0] = ctm.a;
+            view[1] = ctm.b;
+            view[2] = ctm.c;
+            view[3] = ctm.d;
+            view[4] = ctm.e;
+            view[5] = ctm.f;
+            view[6] = pane.left;
+            view[7] = pane.top;
+            view[8] = pane.width;
+            view[9] = pane.height;
+            if (!shownRef.current)
+                return;
+            const placed = layer.clock.shouldRead(view, now / 1000);
+            if (placed) {
+                timeSpan('room-labels', () => {
+                    const candidates = [];
+                    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);
+                });
+            }
+            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 = [
+                    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, entries, layer, nodes]);
+    return (_jsx("g", { ref: ref, children: host &&
+            createPortal(_jsxs("div", { className: "pointer-events-none absolute isolate z-0 overflow-hidden", ref: paneRef, children: [entries
+                        .filter((entry) => !gone.has(entry.zoneId))
+                        .map((entry) => (_jsx("div", { className: "pointer-events-none absolute -translate-x-1/2 -translate-y-1/2", ref: (element) => {
+                            if (element)
+                                nodes.set(entry.zoneId, element);
+                            else
+                                nodes.delete(entry.zoneId);
+                        }, style: { display: 'none' }, children: renderLabel(entry, layer.elements) }, entry.zoneId))), _jsx(OpenRoomLabelDetail, { entries: entries, layer: layer, renderDetail: renderDetail })] }), host) }));
+}