@graview/react 0.1.23 → 0.1.25

package/dist/scene-root.js

@@ -1,15 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { beginning, orderKinds, SCENE_LAYERS, touchWeights } from "@graview/core";
+import { SCENE_LAYERS } from "@graview/core";
 import { toIso } from "@graview/core/scene";
 import { aggregateId, cameraLimit, panForZoom, kindOfCard, kindsOf, layout, marqueeHeightFor, withFocus, withOverview, withPan, withPin, panLayout, withRelation, withJackIn, holdLayout, isBandAggregate, toggleExpanded, withWithin, } from "@graview/layout";
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { useActivity } from "./attention.js";
 import { useAnimatedLayout, useSeatWork, useTouched } from "./animation.js";
 import { SeatMarks } from "./seat-marks.js";
-import { useViolations } from "./hooks.js";
-import { foundIds, useFound, useGraph, useGraview } from "./context.js";
+import { useFound, useGraph, useGraview } from "./context.js";
 import { MarqueeRoomContext, useMarqueeNameWidth } from "./drawn.js";
-import { isDefaultView } from "./view-registry.js";
 import { Plots } from "./plots.js";
 import { Occupants } from "./occupants.js";
 import { EdgeSigns } from "./edge-signs.js";
@@ -19,190 +17,83 @@ import { whereIsIn } from "./where-drawn.js";
 import { BandCard, BeyondCard, SettledView } from "./resolved-view.js";
 import { selectionFor, useElementSize, useRootUnit } from "./scene-helpers.js";
 import { Lines, RelationCaptions } from "./scene-lines.js";
-import { railInset, SEAT_FOOT } from "./rails.js";
+import { railInset } from "./rails.js";
 import { useSeatDrawn } from "./seat-talk.js";
+import { useLayoutOptions } from "./scene-options.js";
 export { railInset };
 import { SceneViewHost } from "./view-host.js";
-/**
- * The spatial scene: one `<canvas layoutsubtree>` with the views as its
- * IMMEDIATE children.
+/** A host's activity prop, worked out once: it reads every member of a group. */
+const withActivity = (activity) => (activity ? { activity } : {});
+/** How far the camera reaches, as the ground says it. */
+const reachOf = (limit) => `${Math.round(limit.x)} ${Math.round(limit.y)}`;
+/** A press on scene furniture stays there: the ground under it neither pans nor deselects. */
+const stop = (event) => event.stopPropagation();
+/** How far the person may zoom by hand from altitude. */
+const ZOOM_MIN = 0.6;
+const ZOOM_MAX = 3;
+/*
+ * A CROWD drops to glyphs. A summary panel needs room, and a raised
+ * relation with many members divides the band until no card has any —
+ * ten titles wrapping to five lines in 130-pixel slivers. Below the
+ * legibility floor a card renders the kind's GLYPH instead, which is
+ * what the fidelity axis is for: legible at any width, still selectable,
+ * still the node. A band that WRAPPED into rows is a crowd by height: a
+ * summary card in a 46-pixel row showed its title cut at the second line.
  *
- * That flatness is a platform constraint, not a style: capture rejects
- * anything deeper than a direct child of the canvas. Nesting happens inside a
- * view, never between views.
+ * The floor is what a summary holds: its title and one row of chips, 80
+ * pixels. At 64 a release in a three-row band drew its name and a sliver
+ * of its date chip under a fade — a card that looked broken, where a chip
+ * would have read.
  */
+const SUMMARY_FLOOR = 80;
+const crowded = (node) => Math.round(node.plane) === 1 && (node.compact === true || node.width < 175 || node.height < SUMMARY_FLOOR);
 /**
- * How far a pointer must travel before it is a drag rather than a click.
- * Below this nothing has moved and the gesture is an ordinary selection.
+ * ZOOM BY HAND. The fly-closer step is the scene's own; this is the
+ * person's, changed continuously by pinch and ctrl+wheel about the
+ * pointer and by the controls in the ground's corner, multiplied in.
+ * Scene state like the camera, never the URL: an address says where you
+ * are, not how close you are standing. Reset on the way down — on the
+ * ground it means nothing, and rising again starts level.
  */
-/** A host's activity prop, worked out once: it reads every member of a group. */
-const withActivity = (activity) => (activity ? { activity } : {});
-/** What no search found: the layout's relevance when nobody is typing. */
-const NO_HITS = new Set();
-export function Scene({ options, renderer = "auto", attachRenderer, className, style, animate = true, children, }) {
-    const { store, scheme, views, view, setView, selection, setSelection, setMenuAt, emphasis, hiddenKinds, registerScene, pointer, brand, noteMoved, robots, seatTalk } = useGraview();
-    /* Whether an ask field stands at the picture's foot: the layout keeps that strip clear of cards. */
-    const seated = useSeatDrawn(seatTalk);
-    const found = useFound();
-    const canvasRef = useRef(null);
-    const wrapperRef = useRef(null);
-    const size = useElementSize(wrapperRef);
-    const unit = useRootUnit();
-    // The marquee's names measured in the face the scene draws them in (FR-118), for the room under each signpost.
-    const nameWidth = useMarqueeNameWidth(wrapperRef, unit, brand);
-    // The room the layout reserves for a marquee of those names, handed to the districts that draw one (132: the district's own width, unused).
-    const marqueeRoom = useMemo(() => (titles) => marqueeHeightFor(titles, 132, nameWidth), [nameWidth]);
-    // Pinch and ctrl+wheel: altitude from the ground, zoom about the pointer from above; the plain wheel pans. See scene-hand.ts.
-    const { zoomAbout, panBy } = useWheelAndPinch({ stage: wrapperRef, view, setView });
-    // `nodes` is a cached snapshot that only changes when the graph does, so
-    // the layout is recomputed exactly when the picture could have changed.
-    const nodes = useGraph();
-    // What each subject's violations name, so a rule's neighborhood is what it judges.
-    const violations = useViolations();
-    const judged = useMemo(() => {
-        const map = {};
-        for (const violation of violations) {
-            if (violation.subjectId === undefined)
-                continue;
-            const list = (map[violation.subjectId] ??= []);
-            for (const id of violation.nodeIds)
-                if (id !== violation.subjectId && !list.includes(id))
-                    list.push(id);
-        }
-        return map;
-    }, [violations]);
-    // The scene is laid out to the space it actually has. A fixed canvas leaves
-    // dead ground on a wide screen and clips on a narrow one, and the plane
-    // bands are proportions rather than pixels, so they follow.
-    /*
-     * FLYING CLOSER. Choosing a picture from altitude brings the camera in:
-     * the city's cell grows, the villages and roads with it, the billboard
-     * bigger on its plot, and the camera keeps the picture in view. Derived
-     * from the stop, never stored: leaving the picture flies back out.
-     */
-    const closer = (view.overview ?? false) && view.within?.["view"] !== undefined ? 1.5 : 1;
-    /*
-     * ZOOM BY HAND. The fly-closer step above is the scene's own; this is the
-     * person's, changed continuously by pinch and ctrl+wheel about the
-     * pointer and by the controls in the ground's corner, multiplied in.
-     * Scene state like the camera, never the URL: an address says where you
-     * are, not how close you are standing. Reset on the way down — on the
-     * ground it means nothing, and rising again starts level.
-     */
+function useHandZoom(overview) {
     const [zoom, setZoom] = useState(1);
     const zoomLive = useRef(1);
     useEffect(() => {
-        if (view.overview)
+        if (overview)
             return;
         zoomLive.current = 1;
         setZoom(1);
-    }, [view.overview]);
-    const cityZoom = closer * zoom;
-    /*
-     * THE BILLBOARD IS CUT TO ITS PICTURE. The lens draws in a box as tall as
-     * the window; the screen's host reports how much of it the lens actually
-     * used, and the layout sizes the billboard to that — so the picture's foot
-     * is on the curb instead of a village's height above it. Whole pixels,
-     * and only a change re-lays the city.
-     */
-    /*
-     * Reported by the layout's CURRENT screen only. A billboard on its way
-     * into its village is still drawn as one, but for the length of the tween
-     * two hosts would report, the layout would flip between their two heights,
-     * and every flip restarted the tween from where it was — a crawl of a
-     * pixel a frame until the old picture had faded.
-     */
+    }, [overview]);
+    return [zoom, zoomLive, setZoom];
+}
+/**
+ * THE BILLBOARD IS CUT TO ITS PICTURE. The lens draws in a box as tall as
+ * the window; the screen's host reports how much of it the lens actually
+ * used, and the layout sizes the billboard to that — so the picture's foot
+ * is on the curb instead of a village's height above it. Whole pixels,
+ * and only a change re-lays the city.
+ *
+ * Reported by the layout's CURRENT screen only. A billboard on its way
+ * into its village is still drawn as one, but for the length of the tween
+ * two hosts would report, the layout would flip between their two heights,
+ * and every flip restarted the tween from where it was — a crawl of a
+ * pixel a frame until the old picture had faded.
+ */
+function useScreenHeight() {
     const [screenHeight, setScreenHeight] = useState(undefined);
-    const noteScreenHeight = useCallback((height) => {
-        setScreenHeight((current) => {
-            const next = height === undefined ? undefined : Math.round(height);
-            return current === next ? current : next;
-        });
-    }, []);
-    /*
-     * WHAT STANDS AS ITSELF when the band cannot hold a relation: the search's
-     * hits, the flagged, the recently written — the selection the layout reads
-     * from the stop. Each only changes with the graph or the words.
-     */
-    const standing = useMemo(() => ({
-        flagged: new Set(violations.flatMap((violation) => violation.nodeIds)),
-        touched: touchWeights(store.log.all()),
-    }), 
-    // `nodes` is the graph's tick: the log only grows when the graph changes.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [violations, store, nodes]);
-    // A keystroke changes the hits alone: the flagged and the log's weights are not worked out again for it.
-    const relevance = useMemo(() => ({ hits: found ? foundIds(found) : NO_HITS, ...standing }), [found, standing]);
-    const sized = useMemo(() => ({
-        ...options,
-        cityZoom,
-        ...(screenHeight !== undefined ? { screenHeight } : {}),
-        // What is not drawn for this seat at this stop: a workspace's disabled
-        // modules, and the administered ones this seat may not see or has not
-        // asked to — one set, from the provider, so every surface agrees.
-        ...(hiddenKinds.size > 0 ? { hiddenKinds: [...hiddenKinds].sort() } : {}),
-        ...(Object.keys(judged).length > 0 ? { judged } : {}),
-        // What stands as itself when a relation does not fit the band (docs/scale.md).
-        relevance,
-        /*
-         * THE GUTTERS. The seat floats over the picture rather than taking a
-         * rail of it, so the left keeps a gutter; the right keeps the corner
-         * the altitude control and the key stand in, in proportion, so an
-         * embed a paragraph wide does not give a third of itself to chrome.
-         */
-        inset: railInset(size?.width ?? 1200),
-        // The reader's own text size, which the cards are sized in: the city
-        // grows with the words rather than holding them at a fixed 230×97.
-        unit,
-        // Groups the framework's own list shows: from altitude those are
-        // districts, not scaled cards. A group with an app's view keeps its card.
-        plainGroups: store.schema.kinds.filter((kind) => isDefaultView(views.lookup(kind, { cardinality: "many", fidelity: "full" }))),
-        /*
-         * THE ORDER THE CITY IS WALKED IN: the chain a blank installation fills
-         * its kinds in, read from the store's own acts. The declaration's
-         * order, so the map is the declaration's map.
-         */
-        cityOrder: orderKinds(beginning({
-            name: "scene",
-            schema: store.schema,
-            mutations: store.allMutations().filter((mutation) => !mutation.derived),
-        }).order.map((entry) => entry.kind), 
-        // Unless the declaration orders its kinds itself (FR-80): then the city walks them in that order.
-        views.arrangement?.()?.order),
-        /*
-         * THE SHOWINGS, by kind: the named places the registry holds, so a
-         * focused picture stands on its kind's plot as a screen from altitude.
-         */
-        screens: views.places().reduce((held, place) => {
-            (held[place.kind] ??= []).push({ as: place.as, title: place.title, ...(place.across ? { across: place.across } : {}) });
-            return held;
-        }, {}),
-        nameWidth,
-        ...(size
-            ? {
-                width: size.width,
-                /*
-                 * The scene lays out into its WHOLE box, but for the strip at its
-                 * foot the ask field stands in. The actions strip is a transient
-                 * elevated surface — it floats in front of the scene the way a
-                 * menu floats in front of a page, and reserving a band for it
-                 * squeezed every band for chrome that mostly is not there. The
-                 * ask field is always there, so its strip is kept: no district
-                 * stands under it, and opening it (over the picture) moves
-                 * nothing.
-                 */
-                height: seated ? Math.max(0, size.height - SEAT_FOOT) : size.height,
-            }
-            : {}),
-    }), [options, size, unit, store, views, hiddenKinds, judged, relevance, cityZoom, screenHeight, nameWidth, seated]);
-    /*
-     * THE CAMERA IS NOT A MOVE. A drive-in on the far side of a large city
-     * lights up off-screen unless the camera goes to it, and the camera's
-     * own offset is derived from the focus rather than made by a hand — so
-     * it lives here, added to whatever the person panned, and never in the
-     * URL. "Put it back" then clears the person's pan and leaves the camera
-     * on the screen, which is what putting it back means.
-     */
+    // Whole pixels: React keeps the height it has when the new one is the same, so only a change re-lays the city.
+    const noteScreenHeight = useCallback((height) => setScreenHeight(height && Math.round(height)), []);
+    return [screenHeight, noteScreenHeight];
+}
+/**
+ * THE CAMERA IS NOT A MOVE. A drive-in on the far side of a large city
+ * lights up off-screen unless the camera goes to it, and the camera's
+ * own offset is derived from the focus rather than made by a hand — so
+ * it lives here, added to whatever the person panned, and never in the
+ * URL. "Put it back" then clears the person's pan and leaves the camera
+ * on the screen, which is what putting it back means.
+ */
+function useCamera(view) {
     const [camera, setCamera] = useState({ x: 0, y: 0 });
     const panned = useMemo(() => ({ x: (view.pan?.x ?? 0) + camera.x, y: (view.pan?.y ?? 0) + camera.y }), [view.pan, camera]);
     const seen = useMemo(() => (camera.x === 0 && camera.y === 0 ? view : withPan(view, panned)), [view, camera, panned]);
@@ -234,132 +125,79 @@ export function Scene({ options, renderer = "auto", attachRenderer, className, s
          * can pan back over the city and as far as the flight itself went,
          * but never further out than either.
          */
-        const room = (bound, at) => ({ low: Math.min(-bound, at), high: Math.max(bound, at) });
-        const across = room(limit.x, cam.x);
-        const down = room(limit.y, cam.y);
-        return {
-            x: Math.max(across.low, Math.min(across.high, wanted.x + cam.x)) - cam.x,
-            y: Math.max(down.low, Math.min(down.high, wanted.y + cam.y)) - cam.y,
-        };
+        const within = (bound, at, want) => Math.max(Math.min(-bound, at), Math.min(Math.max(bound, at), want + at)) - at;
+        return { x: within(limit.x, cam.x, wanted.x), y: within(limit.y, cam.y, wanted.y) };
     }, []);
-    const pinnedIds = useMemo(() => new Set(Object.keys(view.pins)), [view.pins]);
-    // A district under the hand is placed here while it is dragged, and written into the view on release.
-    const district = useHeldDistrict();
-    const held = district.held;
-    /*
-     * THE WORLD IS LAID OUT AT REST, AND THEN MOVED.
-     *
-     * `layout` bakes the pan into every coordinate, which is what lets two
-     * layouts be interpolated into motion — but it does that at the very end,
-     * after it has decided communities, plots, band packing and the drive-in's
-     * own sizing loop. A drag changes nothing but the pan, and this memo was
-     * keyed on a view that carried it, so every pointer move ran all of that
-     * again to reach an answer that differed from the last one by a
-     * subtraction. Measured on rota's city: 169 of 467 frames dropped and ten
-     * seconds of blocked main thread in a two-second drag.
-     *
-     * So the pan comes off the key. The expensive half is held still while a
-     * hand is moving, and `panLayout` puts the world where the hand has taken
-     * it — the same object, held to that by `the-pan-is-a-translation`.
-     */
-    /*
-     * Keyed on the VIEW, not on the view-plus-camera: the camera is an offset
-     * the scene makes for itself — flying to a drive-in, landing a descent —
-     * and it is the same kind of thing as a pan. Keying this on `seen` meant a
-     * camera that moved by a pixel rebuilt the world exactly as a pan did.
-     */
-    /*
-     * A CARD UNDER THE HAND IS MOVED, NOT LAID OUT (docs/scale.md). In the
-     * stack a held card is the only thing a drag changes, so the world is laid
-     * out without it and `holdLayout` moves it — a full layout per pointer
-     * move was the band's grouping and every edge's bundle, every frame. A
-     * district held at altitude carries its plot and village with it, which
-     * only the layout knows, so up there the pin still goes into the layout.
-     */
-    const inPlace = held !== null && !(view.overview ?? false);
+    return [panned, seen, panWithin, cameraLive, setCamera];
+}
+/**
+ * THE WORLD IS LAID OUT AT REST, AND THEN MOVED.
+ *
+ * `layout` bakes the pan into every coordinate, which is what lets two
+ * layouts be interpolated into motion — but it does that at the very end,
+ * after it has decided communities, plots, band packing and the drive-in's
+ * own sizing loop. A drag changes nothing but the pan, and this memo was
+ * keyed on a view that carried it, so every pointer move ran all of that
+ * again to reach an answer that differed from the last one by a
+ * subtraction. Measured on rota's city: 169 of 467 frames dropped and ten
+ * seconds of blocked main thread in a two-second drag.
+ *
+ * So the pan comes off the key. The expensive half is held still while a
+ * hand is moving, and `panLayout` puts the world where the hand has taken
+ * it — the same object, held to that by `the-pan-is-a-translation`.
+ *
+ * Keyed on the VIEW, not on the view-plus-camera: the camera is an offset
+ * the scene makes for itself — flying to a drive-in, landing a descent —
+ * and it is the same kind of thing as a pan. Keying this on `seen` meant a
+ * camera that moved by a pixel rebuilt the world exactly as a pan did.
+ *
+ * A CARD UNDER THE HAND IS MOVED, NOT LAID OUT (docs/scale.md). In the
+ * stack a held card is the only thing a drag changes, so the world is laid
+ * out without it and `holdLayout` moves it — a full layout per pointer
+ * move was the band's grouping and every edge's bundle, every frame. A
+ * district held at altitude carries its plot and village with it, which
+ * only the layout knows, so up there the pin still goes into the layout.
+ */
+function useLaidOut(store, view, held, sized, nodes, pan) {
+    const inPlace = held !== null && !view.overview;
     // Only a pin the layout needs is a dependency: a card moved in place must not re-lay the stop.
     const pinned = inPlace ? null : held;
     const atRest = useMemo(() => {
         const still = view.pan ? { ...view, pan: undefined } : view;
         return pinned ? withPin(still, pinned.id, { x: pinned.x, y: pinned.y }) : still;
     }, [view, pinned]);
-    const laid = useMemo(() => layout(store.graph, store.schema, atRest, sized), [store, atRest, sized, nodes]);
+    const laid = useMemo(() => layout(store.graph, store.schema, atRest, sized), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [store, atRest, sized, nodes]);
     const still = useMemo(() => held && inPlace
         ? (holdLayout(laid, held.id, { x: held.x, y: held.y }) ??
             layout(store.graph, store.schema, withPin(atRest, held.id, { x: held.x, y: held.y }), sized))
         : laid, [laid, held, inPlace, store, atRest, sized]);
-    const result = useMemo(() => panLayout(still, seen.pan ?? { x: 0, y: 0 }), [still, seen.pan]);
-    const ZOOM_MIN = 0.6;
-    const ZOOM_MAX = 3;
-    zoomAbout.current = (factor, clientX, clientY) => {
-        if (!(view.overview ?? false))
-            return;
-        /*
-         * A ZOOM WRITES STATE, so any pan the wheel is still holding has to
-         * land first — zoom and pan share `steer`, and a zoom on top of an
-         * uncommitted offset would compute from a pan the view does not have.
-         */
-        settleLive.current();
-        const current = zoomLive.current;
-        const next = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, current * factor));
-        if (Math.abs(next - current) < 1e-4)
-            return;
-        zoomLive.current = next;
-        steer();
-        setZoom(next);
-        const box = wrapperRef.current?.getBoundingClientRect();
-        const center = { x: result.width / 2, y: result.height / 2 };
-        const pointer = box && clientX !== undefined && clientY !== undefined ? { x: clientX - box.left, y: clientY - box.top } : center;
-        const ratio = next / current;
-        setView((current) => withPan(current, panForZoom(current.pan ?? { x: 0, y: 0 }, cameraLive.current, pointer, center, ratio)));
-        noteMoved();
-    };
-    panBy.current = (dx, dy) => {
-        steer();
-        const limit = cameraLimit(result);
-        const pan = view.pan ?? { x: 0, y: 0 };
-        if (useDom) {
-            /*
-             * THE WHEEL IS A HAND TOO — so it moves the picture, and only the
-             * wheel coming to rest moves the world. It was left on the old road
-             * when the drag came off it: a `setView` per tick, which is a layout,
-             * a render of every context consumer and a DOM re-measure for each
-             * notch of a wheel.
-             */
-            const live = shift.offset();
-            shift.shiftTo(panWithin(limit, { x: pan.x + live.x + dx, y: pan.y + live.y + dy }), pan);
-        }
-        else {
-            setView((current) => withPan(current, panWithin(limit, { x: (current.pan?.x ?? 0) + dx, y: (current.pan?.y ?? 0) + dy })));
-        }
-        noteMoved();
-    };
-    /*
-     * A DRAG IS NOT A TRANSITION.
-     *
-     * Every pointer move writes a new view state, and easing toward each one
-     * over half a second made the scene chase the pointer — panning felt
-     * laggy because it literally lagged, by design meant for navigation. While
-     * a drag owns the pointer the picture snaps to it; the tween is for the
-     * moves you did not make with your own hand.
-     */
+    const result = useMemo(() => panLayout(still, pan ?? { x: 0, y: 0 }), [still, pan]);
+    return [result, inPlace];
+}
+/**
+ * A DRAG IS NOT A TRANSITION, AND A WHEEL IS A HAND TOO.
+ *
+ * Every pointer move writes a new view state, and easing toward each one
+ * over half a second made the scene chase the pointer — panning felt
+ * laggy because it literally lagged, by design meant for navigation. While
+ * a drag owns the pointer the picture snaps to it; the tween is for the
+ * moves you did not make with your own hand.
+ *
+ * Zooming and panning by wheel arrive as a stream of small moves; tweening
+ * each one lagged the picture behind the fingers the way a tweened drag
+ * did. While the wheel is turning, and for a beat after, the picture snaps
+ * to it.
+ */
+function useSteering() {
     const [dragging, setDragging] = useState(false);
-    /*
-     * A WHEEL IS A HAND TOO. Zooming and panning by wheel arrive as a stream
-     * of small moves; tweening each one lagged the picture behind the fingers
-     * the way a tweened drag did. While the wheel is turning, and for a beat
-     * after, the picture snaps to it.
-     */
     const [steering, setSteering] = useState(false);
     const steeringUntil = useRef(null);
     /*
-     * A WHEEL LETS GO TOO, and this is how it says so.
-     *
-     * The live-shift machinery is declared below — it needs the layout, which
-     * needs the view — and `steer` is needed above it, by the wheel and the
-     * zoom. A ref rather than a reordering: moving the declaration would drag
-     * `steering` and the tween's own `enabled` down with it, which is three
-     * hundred lines of unrelated motion for one call.
+     * A WHEEL LETS GO TOO, and this is how it says so: the live shift's
+     * `settle`, wired by the scene once the shift exists — it needs the
+     * layout, which needs the view, and `steer` is needed before it.
      */
     const settleLive = useRef(() => false);
     const steer = useCallback(() => {
@@ -380,85 +218,94 @@ export function Scene({ options, renderer = "auto", attachRenderer, className, s
             setSteering(false);
         }, 160);
     }, []);
-    // The picture as it is right now, part-way between the last view and this
-    // one. Everything downstream draws the tween, not the destination.
-    /*
-     * THE FIRST PICTURE IS A CUT. Before its box is measured the city is laid
-     * out for no box at all — as wide as a desk — and tweening from that to
-     * the box it has flew the whole city in from off its edge: in a 480px
-     * embed the first frames stood the districts hundreds of pixels outside
-     * it. The picture measured for the first time arrives where it is.
-     */
+    // The gesture ends with the world already where the hand left it, so nothing tweens there afterwards.
+    const settled = () => {
+        setDragging(false);
+        setSteering(false);
+    };
+    return [dragging, steering, setDragging, steer, settleLive, settled];
+}
+/**
+ * THE FIRST PICTURE IS A CUT. Before its box is measured the city is laid
+ * out for no box at all — as wide as a desk — and tweening from that to
+ * the box it has flew the whole city in from off its edge: in a 480px
+ * embed the first frames stood the districts hundreds of pixels outside
+ * it. The picture measured for the first time arrives where it is.
+ */
+function useFirstMeasured(size) {
     const measured = useRef(false);
-    const firstMeasured = size !== null && !measured.current;
+    const first = size !== null && !measured.current;
     useEffect(() => {
         if (size !== null)
             measured.current = true;
     }, [size]);
-    const frame = useAnimatedLayout(result, { enabled: animate && !dragging && !steering && size !== null && !firstMeasured });
-    // Whether anything is moving: the hand, the wheel, or a transition not yet landed.
-    const { motion } = useGraview();
-    // `t` is the tween's progress: a landed frame is at 1 (the frame is always a fresh object, never `result`).
-    useEffect(() => motion.set(dragging || steering || frame.t < 1), [motion, dragging, steering, frame]);
-    const touched = useTouched();
-    const seatWork = useSeatWork();
-    // Where the camera goes on its own: to a drive-in off the edge, and down into a village. See scene-camera.ts.
-    const screenId = result.nodes.find((node) => node.screenOf !== undefined)?.id ?? null;
-    const flights = useCameraFlights({ view, result, frame, panned, closer, screenId, setCamera });
-    /*
-     * WHERE IS: the scene lends the context its live frame. A ref, so the
-     * answer is the frame being drawn right now — mid-tween, mid-pan — and
-     * asking costs nobody a render.
-     */
+    return first;
+}
+/**
+ * WHERE IS: the scene lends the context its live frame. A ref, so the
+ * answer is the frame being drawn right now — mid-tween, mid-pan — and
+ * asking costs nobody a render.
+ */
+function useLentWhereIs({ registerScene, scheme, views }, frame, stage) {
     const frameRef = useRef(frame);
     frameRef.current = frame;
     useEffect(() => {
         registerScene({
-            whereIs: (id) => whereIsIn(frameRef.current, wrapperRef.current, scheme, views, id),
+            whereIs: (id) => whereIsIn(frameRef.current, stage.current, scheme, views, id),
         });
         return () => registerScene(null);
     }, [registerScene, scheme, views]);
-    /*
-     * THE POINTER, only while somebody is listening. The store tells the
-     * scene when its first subscriber arrives and its last leaves; between
-     * those two moments there is a listener, and outside them there is none.
-     */
-    useEffect(() => pointer.onActive((active) => {
-        const element = wrapperRef.current;
-        if (!element)
-            return;
-        const move = (event) => {
-            const rect = element.getBoundingClientRect();
-            pointer.set({ x: event.clientX - rect.left, y: event.clientY - rect.top });
-        };
-        const leave = () => pointer.set(null);
-        if (active) {
-            element.addEventListener("pointermove", move);
-            element.addEventListener("pointerleave", leave);
-            element.__graviewPointer = () => {
-                element.removeEventListener("pointermove", move);
-                element.removeEventListener("pointerleave", leave);
+}
+/**
+ * THE POINTER, only while somebody is listening. The store tells the
+ * scene when its first subscriber arrives and its last leaves; between
+ * those two moments there is a listener, and outside them there is none.
+ */
+function usePointerReport(pointer, stage) {
+    useEffect(() => {
+        // What the last listener attached takes off again when nobody is listening.
+        let detach;
+        return pointer.onActive((active) => {
+            const element = stage.current;
+            if (!element)
+                return;
+            const move = (event) => {
+                const rect = element.getBoundingClientRect();
+                pointer.set({ x: event.clientX - rect.left, y: event.clientY - rect.top });
             };
-        }
-        else {
-            element.__graviewPointer?.();
-            delete element.__graviewPointer;
-        }
-    }), [pointer]);
+            const leave = () => pointer.set(null);
+            if (active) {
+                element.addEventListener("pointermove", move);
+                element.addEventListener("pointerleave", leave);
+                detach = () => {
+                    element.removeEventListener("pointermove", move);
+                    element.removeEventListener("pointerleave", leave);
+                };
+            }
+            else {
+                detach?.();
+                detach = undefined;
+            }
+        });
+    }, [pointer]);
+}
+/**
+ * The renderer is handed the FRAME, not the target.
+ *
+ * Two reasons, both of which were bugs before: the DOM holds the tween,
+ * so a host for a node that has not entered yet does not exist to be
+ * captured; and drawing the target during a transition would snap every
+ * view to its final position while the DOM animated underneath it.
+ * A group is stale when any of its members changed, since its own view
+ * is a summary of them.
+ */
+function useAttachedRenderer(renderer, attachRenderer, canvasRef, frame, touched) {
     useEffect(() => {
         if (renderer === "dom")
             return;
         const canvas = canvasRef.current;
         if (!canvas || !attachRenderer)
             return;
-        // The renderer is handed the FRAME, not the target.
-        //
-        // Two reasons, both of which were bugs before: the DOM holds the tween,
-        // so a host for a node that has not entered yet does not exist to be
-        // captured; and drawing the target during a transition would snap every
-        // view to its final position while the DOM animated underneath it.
-        // A group is stale when any of its members changed, since its own view
-        // is a summary of them.
         const dirty = new Set();
         for (const node of frame.nodes) {
             if (touched.has(node.id))
@@ -476,18 +323,19 @@ export function Scene({ options, renderer = "auto", attachRenderer, className, s
             detach?.();
         };
     }, [renderer, attachRenderer, frame, touched]);
-    const useDom = renderer === "dom" || (renderer === "auto" && !attachRenderer);
-    /*
-     * What just happened, resolved onto whatever is DRAWN.
-     *
-     * The op log names node ids, and a node is not always on screen as itself:
-     * above the stack a duty is inside the Runs card, and inside the stack it
-     * may be its own panel. An edit should land on whichever of those the eye
-     * can actually see, which is the same rule the connectors follow — the
-     * node if it is placed, otherwise the group standing in for it.
-     */
+}
+/**
+ * What just happened, resolved onto whatever is DRAWN.
+ *
+ * The op log names node ids, and a node is not always on screen as itself:
+ * above the stack a duty is inside the Runs card, and inside the stack it
+ * may be its own panel. An edit should land on whichever of those the eye
+ * can actually see, which is the same rule the connectors follow — the
+ * node if it is placed, otherwise the group standing in for it.
+ */
+function useActivityOf() {
     const activity = useActivity();
-    const activityOf = (node) => {
+    return (node) => {
         const own = node ? activity.get(node.id) : undefined;
         const members = node?.aggregate?.memberIds ?? [];
         if (!own && members.length === 0)
@@ -513,47 +361,18 @@ export function Scene({ options, renderer = "auto", attachRenderer, className, s
         }
         return best ? { ...best, wrote, read, broke } : undefined;
     };
-    /* THE HAND: dragging the ground to look around and a district to place it — see scene-hand.ts. */
-    const shift = useWorldShift({
-        stage: wrapperRef,
-        pan: view.pan,
-        setView,
-        // The gesture ends with the world already where the hand left it, so nothing tweens there afterwards.
-        settled: () => {
-            setDragging(false);
-            setSteering(false);
-        },
-    });
-    // Wired here, where the shift exists; see the ref's own note above.
-    settleLive.current = shift.settle;
-    const { onGroundDown, onCardDown, onDragMove, onDragUp, swallow } = useSceneDrag({
-        view,
-        panned,
-        limit: () => cameraLimit(result),
-        panWithin,
-        moveByTransform: useDom,
-        setView,
-        setDragging,
-        noteMoved,
-        shift,
-        district,
-    });
-    /*
-     * A CROWD drops to glyphs. A summary panel needs room, and a raised
-     * relation with many members divides the band until no card has any —
-     * ten titles wrapping to five lines in 130-pixel slivers. Below the
-     * legibility floor a card renders the kind's GLYPH instead, which is
-     * what the fidelity axis is for: legible at any width, still selectable,
-     * still the node. A band that WRAPPED into rows is a crowd by height: a
-     * summary card in a 46-pixel row showed its title cut at the second line.
-     *
-     * The floor is what a summary holds: its title and one row of chips, 80
-     * pixels. At 64 a release in a three-row band drew its name and a sliver
-     * of its date chip under a fade — a card that looked broken, where a chip
-     * would have read.
-     */
-    const SUMMARY_FLOOR = 80;
-    const crowded = (node) => Math.round(node.plane) === 1 && (node.compact === true || node.width < 175 || node.height < SUMMARY_FLOOR);
+}
+/** The selection with `id` taken out if it was in, and put in if it was not. */
+const toggled = (current, id) => current.includes(id) ? current.filter((other) => other !== id) : [...current, id];
+/**
+ * WHAT A CARD'S GESTURES DO: a click selects or raises, a pick chooses a
+ * mark, a double click travels or jacks in. One set for every card, so a
+ * gesture means the same thing wherever it lands — handed to each card's
+ * host as its own.
+ */
+function useCardActs() {
+    const { views, view, setView, setSelection } = useGraview();
+    const found = useFound();
     /*
      * Whether this card stands for a kind the app gave a picture of its own —
      * the same question `ResolvedView` asks to draw the ◆, asked here so the
@@ -565,12 +384,8 @@ export function Scene({ options, renderer = "auto", attachRenderer, className, s
         const own = views.resolve(node.kind, { cardinality: "many", fidelity: "full" })?.view;
         return own !== undefined && own.generic !== true;
     };
-    const hosts = frame.nodes.map((node) => (_jsxs(SceneViewHost, { node: node, crowded: crowded(node), useDom: useDom, ...(node.plot && frame.city && Math.round(node.plane) === 2
-            ? {
-                frontY: frame.city.originY + panned.y + toIso(node.plot.col + node.plot.side / 2, node.plot.row + node.plot.side, frame.city.cell).y - node.y,
-                centerY: frame.city.originY + panned.y + toIso(node.plot.col + node.plot.side / 2, node.plot.row + node.plot.side / 2, frame.city.cell).y - node.y,
-            }
-            : {}), ...(node.screenOf !== undefined ? { screen: true, ...(node.id === screenId ? { onDrawnHeight: noteScreenHeight } : {}) } : {}), touched: touched.has(node.id), ...withActivity(activityOf(node)), scheme: scheme, canvasWidth: result.width, canvasHeight: result.height, selected: selection.includes(node.id), onSelect: (additive) => {
+    return (node) => ({
+        onSelect: (additive) => {
             /*
              * A group is a PLACE; a node is a THING.
              *
@@ -594,7 +409,7 @@ export function Scene({ options, renderer = "auto", attachRenderer, className, s
              */
             // A band's group is selected as itself: its members could be hundreds of ids in the address.
             if (isBandAggregate(node.id)) {
-                setSelection((current) => (additive ? (current.includes(node.id) ? current.filter((id) => id !== node.id) : [...current, node.id]) : [node.id]));
+                setSelection((current) => (additive ? toggled(current, node.id) : [node.id]));
                 return;
             }
             const kinds = node.aggregate ? kindsOf(node.id) : [];
@@ -608,7 +423,7 @@ export function Scene({ options, renderer = "auto", attachRenderer, className, s
                 return;
             }
             setSelection((current) => selectionFor(node, current, additive));
-        }, 
+        },
         /*
          * Picking a thing SELECTS it, and leaves the picture where it is.
          *
@@ -625,10 +440,8 @@ export function Scene({ options, renderer = "auto", attachRenderer, className, s
                 ? [...new Set([...current, ...joins])]
                 : [...joins]
             : additive
-                ? current.includes(id)
-                    ? current.filter((other) => other !== id)
-                    : [...current, id]
-                : [id]), 
+                ? toggled(current, id)
+                : [id]),
         /*
          * Double click means GO DEEPER, whatever it lands on: into the node a
          * view nominated, or — where a view nominated nothing — into the view
@@ -637,7 +450,7 @@ export function Scene({ options, renderer = "auto", attachRenderer, className, s
         onTravel: (id) => {
             setView((current) => ({ ...withFocus(current, id), relation: null }));
             setSelection([id]);
-        }, onMenu: setMenuAt, selection: selection, 
+        },
         /*
          * Jacking in ZOOMS: the same scene, the focus grown to most of it,
          * shelf and relations receded but present. On the node already zoomed
@@ -676,32 +489,177 @@ export function Scene({ options, renderer = "auto", attachRenderer, className, s
              * population selected buries the place under its own strip.
              */
             setSelection(node.aggregate ? [] : [node.id]);
-        }, onDragStart: (event) => onCardDown(node, event), onDragMove: onDragMove, onDragEnd: onDragUp, swallowClick: swallow, children: [node.screenOf !== undefined ? (
-            /*
-             * THE RAIL YOU MOVE THE BOARD BY.
-             *
-             * Dragging the picture itself looks around the city, and must go on
-             * doing so: the billboard is the biggest thing on screen and the one
-             * most likely to be under the hand, and taking panning away from it
-             * was how the far side of a city became unreachable once. So the
-             * board gets a rail along its top edge, the way a window has a title
-             * bar — the picture pans, the rail moves the board, and neither
-             * gesture has to be discovered from the other.
-             *
-             * How far it may go is not this rail's business: `layout` leashes
-             * the pin to its own plot, so a hand and a pasted link are held to
-             * the same distance.
-             */
+        },
+    });
+}
+/**
+ * THE RAIL YOU MOVE THE BOARD BY.
+ *
+ * Dragging the picture itself looks around the city, and must go on
+ * doing so: the billboard is the biggest thing on screen and the one
+ * most likely to be under the hand, and taking panning away from it
+ * was how the far side of a city became unreachable once. So the
+ * board gets a rail along its top edge, the way a window has a title
+ * bar — the picture pans, the rail moves the board, and neither
+ * gesture has to be discovered from the other.
+ *
+ * How far it may go is not this rail's business: `layout` leashes
+ * the pin to its own plot, so a hand and a pasted link are held to
+ * the same distance.
+ *
+ * A TITLE BAR, not a gray strip with a pill floating over it: the
+ * picture's name on the left, the one way down on the right, and
+ * the whole bar the handle that moves the board.
+ */
+function ScreenGrip({ node }) {
+    const { views, view, setView } = useGraview();
+    return (_jsxs("div", { className: "graview-screen-grip", "data-graview-grip": node.id, "data-testid": "screen-grip", title: "Move this picture \u2014 it stays by its own village", children: [_jsx("span", { className: "graview-screen-title", "aria-hidden": "true", children: views.places().find((place) => place.as === view.within?.["view"] && place.kind === node.screenOf)?.title ?? "" }), _jsx("button", { type: "button", className: "graview-screen-fullscreen", "data-testid": "screen-fullscreen", title: "Open this picture on its own \u2014 leave the graview with it", onClick: (event) => {
+                    event.stopPropagation();
+                    setView((current) => withOverview(current, false));
+                }, onPointerDown: stop, onDoubleClick: stop, children: "Open \u2197" })] }));
+}
+/** SCENE FURNITURE in the ground's other corner: the way a map carries its own zoom. */
+function ZoomControls({ zoom, zoomBy }) {
+    /** One way to zoom: its sign, the step it takes, and whether the zoom has gone as far as it goes that way. */
+    const button = (way, sign, factor, disabled) => (_jsx("button", { type: "button", className: "graview-zoom-button", "data-testid": `zoom-${way}`, "aria-label": `Zoom ${way}`, title: `Zoom ${way} — or pinch, or ctrl+wheel`, disabled: disabled, onClick: () => zoomBy(factor), children: sign }));
+    return (_jsxs("div", { className: "graview-zoom", "data-graview-foot": "", role: "group", "aria-label": "Zoom", onPointerDown: stop, onClick: stop, children: [button("out", "−", 1 / 1.25, zoom <= ZOOM_MIN + 1e-6), _jsxs("span", { className: "graview-zoom-level", "data-testid": "zoom-level", "aria-live": "polite", children: [Math.round(zoom * 100), "%"] }), button("in", "+", 1.25, zoom >= ZOOM_MAX - 1e-6)] }));
+}
+/**
+ * The spatial scene: one `<canvas layoutsubtree>` with the views as its
+ * IMMEDIATE children.
+ *
+ * That flatness is a platform constraint, not a style: capture rejects
+ * anything deeper than a direct child of the canvas. Nesting happens inside a
+ * view, never between views.
+ */
+export function Scene({ options, renderer = "auto", attachRenderer, className, style, animate = true, children, }) {
+    const context = useGraview();
+    const { store, scheme, views, view, setView, selection, setSelection, setMenuAt, emphasis, brand, noteMoved, robots, seatTalk, motion } = context;
+    /* Whether an ask field stands at the picture's foot: the layout keeps that strip clear of cards. */
+    const seated = useSeatDrawn(seatTalk);
+    const canvasRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const size = useElementSize(wrapperRef);
+    const unit = useRootUnit();
+    // The marquee's names measured in the face the scene draws them in (FR-118), for the room under each signpost.
+    const nameWidth = useMarqueeNameWidth(wrapperRef, unit, brand);
+    // The room the layout reserves for a marquee of those names, handed to the districts that draw one (132: the district's own width, unused).
+    const marqueeRoom = useMemo(() => (titles) => marqueeHeightFor(titles, 132, nameWidth), [nameWidth]);
+    // Pinch and ctrl+wheel: altitude from the ground, zoom about the pointer from above; the plain wheel pans. See scene-hand.ts.
+    const { zoomAbout, panBy } = useWheelAndPinch({ stage: wrapperRef, view, setView });
+    // `nodes` is a cached snapshot that only changes when the graph does, so
+    // the layout is recomputed exactly when the picture could have changed.
+    const nodes = useGraph();
+    /*
+     * FLYING CLOSER. Choosing a picture from altitude brings the camera in:
+     * the city's cell grows, the villages and roads with it, the billboard
+     * bigger on its plot, and the camera keeps the picture in view. Derived
+     * from the stop, never stored: leaving the picture flies back out.
+     */
+    const closer = view.overview && view.within?.["view"] !== undefined ? 1.5 : 1;
+    const [zoom, zoomLive, setZoom] = useHandZoom(view.overview);
+    const [screenHeight, noteScreenHeight] = useScreenHeight();
+    const sized = useLayoutOptions(options, size, unit, nameWidth, seated, closer * zoom, screenHeight, nodes);
+    const [panned, seen, panWithin, cameraLive, setCamera] = useCamera(view);
+    const pinnedIds = useMemo(() => new Set(Object.keys(view.pins)), [view.pins]);
+    // A district under the hand is placed here while it is dragged, and written into the view on release.
+    const district = useHeldDistrict();
+    const [result, inPlace] = useLaidOut(store, view, district.held, sized, nodes, seen.pan);
+    const [dragging, steering, setDragging, steer, settleLive, settled] = useSteering();
+    // The picture as it is right now, part-way between the last view and this
+    // one. Everything downstream draws the tween, not the destination.
+    const firstMeasured = useFirstMeasured(size);
+    const frame = useAnimatedLayout(result, { enabled: animate && !dragging && !steering && size !== null && !firstMeasured });
+    // Whether anything is moving: the hand, the wheel, or a transition not yet landed.
+    // `t` is the tween's progress: a landed frame is at 1 (the frame is always a fresh object, never `result`).
+    useEffect(() => motion.set(dragging || steering || frame.t < 1), [motion, dragging, steering, frame]);
+    const touched = useTouched();
+    const seatWork = useSeatWork();
+    // Where the camera goes on its own: to a drive-in off the edge, and down into a village. See scene-camera.ts.
+    const screenId = result.nodes.find((node) => node.screenOf !== undefined)?.id ?? null;
+    const flights = useCameraFlights({ view, result, frame, panned, closer, screenId, setCamera });
+    useLentWhereIs(context, frame, wrapperRef);
+    usePointerReport(context.pointer, wrapperRef);
+    useAttachedRenderer(renderer, attachRenderer, canvasRef, frame, touched);
+    const useDom = renderer === "dom" || (renderer === "auto" && !attachRenderer);
+    const activityOf = useActivityOf();
+    /* THE HAND: dragging the ground to look around and a district to place it — see scene-hand.ts. */
+    const shift = useWorldShift({
+        stage: wrapperRef,
+        pan: view.pan,
+        setView,
+        settled,
+    });
+    // Wired here, where the shift exists; see the ref's own note in `useSteering`.
+    settleLive.current = shift.settle;
+    const { onGroundDown, onCardDown, onDragMove, onDragUp, swallow } = useSceneDrag({
+        view,
+        panned,
+        limit: () => cameraLimit(result),
+        panWithin,
+        moveByTransform: useDom,
+        setView,
+        setDragging,
+        noteMoved,
+        shift,
+        district,
+    });
+    zoomAbout.current = (factor, clientX, clientY) => {
+        if (!view.overview)
+            return;
+        /*
+         * A ZOOM WRITES STATE, so any pan the wheel is still holding has to
+         * land first — zoom and pan share `steer`, and a zoom on top of an
+         * uncommitted offset would compute from a pan the view does not have.
+         */
+        settleLive.current();
+        const current = zoomLive.current;
+        const next = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, current * factor));
+        if (Math.abs(next - current) < 1e-4)
+            return;
+        zoomLive.current = next;
+        steer();
+        setZoom(next);
+        const box = wrapperRef.current?.getBoundingClientRect();
+        const center = { x: result.width / 2, y: result.height / 2 };
+        const pointer = box && clientX !== undefined && clientY !== undefined ? { x: clientX - box.left, y: clientY - box.top } : center;
+        const ratio = next / current;
+        setView((current) => withPan(current, panForZoom(current.pan ?? { x: 0, y: 0 }, cameraLive.current, pointer, center, ratio)));
+        noteMoved();
+    };
+    /** The view's own pan moved by so much, held within the camera's reach. */
+    const nudge = (dx, dy, limit = cameraLimit(result)) => setView((current) => withPan(current, panWithin(limit, { x: (current.pan?.x ?? 0) + dx, y: (current.pan?.y ?? 0) + dy })));
+    panBy.current = (dx, dy) => {
+        steer();
+        const limit = cameraLimit(result);
+        const pan = view.pan ?? { x: 0, y: 0 };
+        if (useDom) {
             /*
-             * A TITLE BAR, not a gray strip with a pill floating over it: the
-             * picture's name on the left, the one way down on the right, and
-             * the whole bar the handle that moves the board.
+             * THE WHEEL IS A HAND TOO — so it moves the picture, and only the
+             * wheel coming to rest moves the world. It was left on the old road
+             * when the drag came off it: a `setView` per tick, which is a layout,
+             * a render of every context consumer and a DOM re-measure for each
+             * notch of a wheel.
              */
-            _jsxs("div", { className: "graview-screen-grip", "data-graview-grip": node.id, "data-testid": "screen-grip", title: "Move this picture \u2014 it stays by its own village", children: [_jsx("span", { className: "graview-screen-title", "aria-hidden": "true", children: views.places().find((place) => place.as === view.within?.["view"] && place.kind === node.screenOf)?.title ?? "" }), _jsx("button", { type: "button", className: "graview-screen-fullscreen", "data-testid": "screen-fullscreen", title: "Open this picture on its own \u2014 leave the graview with it", onClick: (event) => {
-                            event.stopPropagation();
-                            setView((current) => withOverview(current, false));
-                        }, onPointerDown: (event) => event.stopPropagation(), onDoubleClick: (event) => event.stopPropagation(), children: "Open \u2197" })] })) : null, node.beyond ? (_jsx(BeyondCard, { kinds: node.beyond })) : node.aggregate?.opens ? (_jsx(BandCard, { node: node })) : (_jsx(SettledView, { node: node, mode: "scene", selected: selection.includes(node.id), ...(crowded(node) ? { fidelity: "glyph" } : {}) }))] }, node.id)));
-    return (_jsx(MarqueeRoomContext.Provider, { value: marqueeRoom, children: _jsxs("div", { ref: wrapperRef, className: `graview-ground${className ? ` ${className}` : ""}`, "data-graview-altitude": view.overview ? "" : undefined, "data-graview-reach": frame.city ? `${Math.round(cameraLimit(result).x)} ${Math.round(cameraLimit(result).y)}` : undefined, "data-graview-settled": frame.t >= 1 && !flights.gliding() ? "" : undefined, onPointerDown: onGroundDown, onPointerMove: onDragMove, onPointerUp: onDragUp, onPointerCancel: onDragUp, 
+            const live = shift.offset();
+            shift.shiftTo(panWithin(limit, { x: pan.x + live.x + dx, y: pan.y + live.y + dy }), pan);
+        }
+        else
+            nudge(dx, dy, limit);
+        noteMoved();
+    };
+    const actsOn = useCardActs();
+    const drawnActivity = (id) => activityOf(frame.nodes.find((node) => node.id === id));
+    /** How far down its card a plot's foot (`share` 1) or middle (2) stands, from the city's own origin and the pan. */
+    const plotY = (city, node, plot, share) => city.originY + panned.y + toIso(plot.col + plot.side / 2, plot.row + plot.side / share, city.cell).y - node.y;
+    // The stage's extent: what the ground, its layers and its lines are all drawn over.
+    const extent = { width: result.width, height: result.height };
+    const stage = { position: "relative", zIndex: SCENE_LAYERS.stage, ...extent };
+    const whereIs = (id) => whereIsIn(frame, wrapperRef.current, scheme, views, id);
+    const hosts = frame.nodes.map((node) => (_jsxs(SceneViewHost, { node: node, crowded: crowded(node), useDom: useDom, ...(node.plot && frame.city && Math.round(node.plane) === 2
+            ? { frontY: plotY(frame.city, node, node.plot, 1), centerY: plotY(frame.city, node, node.plot, 2) }
+            : {}), ...(node.screenOf !== undefined ? { screen: true, ...(node.id === screenId ? { onDrawnHeight: noteScreenHeight } : {}) } : {}), touched: touched.has(node.id), ...withActivity(activityOf(node)), scheme: scheme, canvasWidth: result.width, canvasHeight: result.height, selected: selection.includes(node.id), ...actsOn(node), onMenu: setMenuAt, selection: selection, onDragStart: (event) => onCardDown(node, event), onDragMove: onDragMove, onDragEnd: onDragUp, swallowClick: swallow, children: [node.screenOf !== undefined ? _jsx(ScreenGrip, { node: node }) : null, node.beyond ? (_jsx(BeyondCard, { kinds: node.beyond })) : node.aggregate?.opens ? (_jsx(BandCard, { node: node })) : (_jsx(SettledView, { node: node, mode: "scene", selected: selection.includes(node.id), ...(crowded(node) ? { fidelity: "glyph" } : {}) }))] }, node.id)));
+    return (_jsx(MarqueeRoomContext.Provider, { value: marqueeRoom, children: _jsxs("div", { ref: wrapperRef, className: `graview-ground${className ? ` ${className}` : ""}`, "data-graview-altitude": view.overview ? "" : undefined, "data-graview-reach": frame.city ? reachOf(cameraLimit(result)) : undefined, "data-graview-settled": frame.t >= 1 && !flights.gliding() ? "" : undefined, "data-graview-box": size ? `${size.width}x${size.height}` : undefined, onPointerDown: onGroundDown, onPointerMove: onDragMove, onPointerUp: onDragUp, onPointerCancel: onDragUp, 
             /*
              * CLICKING EMPTY GROUND puts the selection down — the gesture every
              * canvas tool teaches, and the graceful half of deselection the ×
@@ -747,7 +705,7 @@ export function Scene({ options, renderer = "auto", attachRenderer, className, s
                 // cutting off anything floating over it.
                 overflow: "hidden",
                 ...style,
-            }, children: [_jsx(Plots, { frame: frame, width: result.width, height: result.height, 
+            }, children: [_jsx(Plots, { frame: frame, ...extent, 
                     // The tween's own pan: the tiles, the villages and the roads move with the cards on them.
                     pan: frame.city ? frame.city.pan : panned, brand: brand, pinned: pinnedIds, swallowed: swallow, 
                     // A tile is its district: focusing it means the kind's aggregate, never the card's own id.
@@ -766,27 +724,12 @@ export function Scene({ options, renderer = "auto", attachRenderer, className, s
                  * path never captures anything, the canvas has no job here, and not
                  * creating one removes the whole interaction.
                  */
-                _jsx("div", { "data-graview-stage": "dom", "data-graview-world": "", style: {
-                        position: "relative",
-                        zIndex: SCENE_LAYERS.stage,
-                        width: result.width,
-                        height: result.height,
-                        overflow: "hidden",
-                    }, children: hosts })) : (_jsx("canvas", { ref: canvasRef, "data-graview-stage": "gpu", layoutsubtree: "", width: result.width, height: result.height, style: {
-                        display: "block",
-                        position: "relative",
-                        zIndex: SCENE_LAYERS.stage,
-                        width: result.width,
-                        height: result.height,
-                    }, children: hosts })), view.overview && !dragging ? (
+                _jsx("div", { "data-graview-stage": "dom", "data-graview-world": "", style: { ...stage, overflow: "hidden" }, children: hosts })) : (_jsx("canvas", { ref: canvasRef, "data-graview-stage": "gpu", layoutsubtree: "", ...extent, style: { display: "block", ...stage }, children: hosts })), view.overview && !dragging ? (
                 /* What the window does not reach, named on the edge it lies past (see edge-signs.tsx). */
                 _jsx(EdgeSigns, { result: result, schema: store.schema, onGo: (by) => {
-                        const limit = cameraLimit(result);
-                        setView((current) => withPan(current, panWithin(limit, { x: (current.pan?.x ?? 0) + by.x, y: (current.pan?.y ?? 0) + by.y })));
+                        nudge(by.x, by.y);
                         noteMoved();
-                    } })) : null, view.overview ? (
-                /* SCENE FURNITURE in the ground's other corner: the way a map carries its own zoom. */
-                _jsxs("div", { className: "graview-zoom", "data-graview-foot": "", role: "group", "aria-label": "Zoom", onPointerDown: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation(), children: [_jsx("button", { type: "button", className: "graview-zoom-button", "data-testid": "zoom-out", "aria-label": "Zoom out", title: "Zoom out \u2014 or pinch, or ctrl+wheel", disabled: zoom <= ZOOM_MIN + 1e-6, onClick: () => zoomAbout.current(1 / 1.25), children: "\u2212" }), _jsxs("span", { className: "graview-zoom-level", "data-testid": "zoom-level", "aria-live": "polite", children: [Math.round(zoom * 100), "%"] }), _jsx("button", { type: "button", className: "graview-zoom-button", "data-testid": "zoom-in", "aria-label": "Zoom in", title: "Zoom in \u2014 or pinch, or ctrl+wheel", disabled: zoom >= ZOOM_MAX - 1e-6, onClick: () => zoomAbout.current(1.25), children: "+" })] })) : null, _jsx(Lines, { frame: frame, holding: inPlace, width: result.width, height: result.height, scheme: scheme, overview: view.overview ?? false, selection: selection, emphasis: emphasis, stageRef: wrapperRef, store: store, graphNodes: nodes, 
+                    } })) : null, view.overview ? _jsx(ZoomControls, { zoom: zoom, zoomBy: (factor) => zoomAbout.current(factor) }) : null, _jsx(Lines, { frame: frame, holding: inPlace, ...extent, scheme: scheme, overview: !!view.overview, selection: selection, emphasis: emphasis, stageRef: wrapperRef, store: store, graphNodes: nodes, 
                     /*
                      * A LINE IS A THING. Clicking one that stands for exactly one edge
                      * selects the relation itself — the inspector then says what it is
@@ -809,11 +752,11 @@ export function Scene({ options, renderer = "auto", attachRenderer, className, s
                          * window — which is what making or breaking a relation looks like in
                          * the log, and is not what changing one node's field looks like.
                          */
-                        const from = activityOf(frame.nodes.find((node) => node.id === connector.from));
-                        const to = activityOf(frame.nodes.find((node) => node.id === connector.to));
+                        const from = drawnActivity(connector.from);
+                        const to = drawnActivity(connector.to);
                         return from?.wrote && to?.wrote ? (from.at > to.at ? from : to) : undefined;
-                    } }), _jsx(Occupants, { width: result.width, whereIs: (id) => whereIsIn(frame, wrapperRef.current, scheme, views, id) }), _jsx(SeatMarks, { marks: seatWork.marks, questions: [...robots.values()]
+                    } }), _jsx(Occupants, { width: result.width, whereIs: whereIs }), _jsx(SeatMarks, { marks: seatWork.marks, questions: [...robots.values()]
                         .filter((one) => one.mode === "asking" && one.at !== null && one.say)
-                        .map((one) => ({ id: one.at, who: one.who, asks: one.say })), whereIs: (id) => whereIsIn(frame, wrapperRef.current, scheme, views, id), stageRef: wrapperRef, width: result.width, height: result.height }), _jsx(RelationCaptions, { nodes: frame.nodes, moving: frame.t < 1, holding: inPlace, scheme: scheme, width: result.width, stageRef: wrapperRef }), children] }) }));
+                        .map((one) => ({ id: one.at, who: one.who, asks: one.say })), whereIs: whereIs, stageRef: wrapperRef, ...extent }), _jsx(RelationCaptions, { nodes: frame.nodes, moving: frame.t < 1, holding: inPlace, scheme: scheme, width: result.width, stageRef: wrapperRef }), children] }) }));
 }
 //# sourceMappingURL=scene-root.js.map