@graview/react 0.1.28 → 0.1.30

package/dist/scene-root.js

@@ -1,22 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { toIso, TOP_DOWN } from "@graview/core/city";
+import { aggregateId, cameraLimit, panForZoom, kindOfCard, kindsOf, layout, withFocus, withOverview, panLayout, withRelation, withJackIn, holdLayout, isBandAggregate, toggleExpanded, withWithin, } from "@graview/layout";
+import { withPan, withPin } from "@graview/layout/view-moves";
+import { Suspense, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { retryingImport } from "@graview/core/retry";
+import { lazyModule } from "./lazy-part.js";
+import { BesideTheMap } from "./beside-the-map.js";
+import { mapChoice } from "./map-choice.js";
 import { useActivity } from "./attention.js";
 import { useAnimatedLayout, useSeatWork, useTouched } from "./animation.js";
 import { SeatMarks } from "./seat-marks.js";
-import { useFound, useGraph, useGraview } from "./context.js";
-import { MarqueeRoomContext, useMarqueeNameWidth } from "./drawn.js";
-import { Plots } from "./plots.js";
+import { matchWith, useFound, useGraph, useGraview } from "./context.js";
+import { search, touchWeights } from "@graview/core/search";
+import { kitConnector, useKit } from "./kit.js";
+// The scene searches: it hands the provider the matcher as it is fetched (FR-179).
+matchWith({ search, touchWeights });
 import { Occupants } from "./occupants.js";
 import { EdgeSigns } from "./edge-signs.js";
 import { useCameraFlights } from "./scene-camera.js";
-import { useHeldDistrict, useSceneDrag, useWheelAndPinch, useWorldShift } from "./scene-hand.js";
+import { useKeyboardKeepsToWhatIsSeen } from "./scene-covered.js";
+import { useDock, useHeldDistrict, useSceneDrag, useWheelAndPinch, useWorldShift } from "./scene-hand.js";
 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 { Lines, provisionalLines, RelationCaptions } from "./scene-lines.js";
 import { railInset } from "./rails.js";
 import { useSeatDrawn } from "./seat-talk.js";
 import { useLayoutOptions } from "./scene-options.js";
@@ -66,25 +74,6 @@ function useHandZoom(overview) {
     }, [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);
-    // 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
@@ -299,7 +288,7 @@ function usePointerReport(pointer, stage) {
  * 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) {
+function useAttachedRenderer(renderer, attachRenderer, canvasRef, frame, touched, drawOnDom) {
     useEffect(() => {
         if (renderer === "dom")
             return;
@@ -317,12 +306,25 @@ function useAttachedRenderer(renderer, attachRenderer, canvasRef, frame, touched
             canvas,
             layout: frame,
             dirty,
-            hostOf: (id) => canvas.querySelector(`[data-graview-view="${CSS.escape(id)}"]`),
+            // In the canvas, or on the DOM path beside it.
+            hostOf: (id) => (canvas.parentElement ?? canvas).querySelector(`[data-graview-view="${CSS.escape(id)}"]`),
+            drawOnDom,
         });
         return () => {
             detach?.();
         };
-    }, [renderer, attachRenderer, frame, touched]);
+    }, [renderer, attachRenderer, frame, touched, drawOnDom]);
+}
+/**
+ * The views a renderer handed to the DOM path, as state. A set equal to the
+ * last one is not a new render: only a change of hands should cost one.
+ */
+function useDrawnOnDom() {
+    const [onDom, setOnDom] = useState(() => new Set());
+    const drawOnDom = useCallback((ids) => {
+        setOnDom((current) => (current.size === ids.size && [...ids].every((id) => current.has(id)) ? current : new Set(ids)));
+    }, []);
+    return [onDom, drawOnDom];
 }
 /**
  * What just happened, resolved onto whatever is DRAWN.
@@ -373,6 +375,8 @@ const toggled = (current, id) => current.includes(id) ? current.filter((other) =
 function useCardActs() {
     const { views, view, setView, setSelection } = useGraview();
     const found = useFound();
+    // Whether a panel beside the map lists a district opened from altitude.
+    const besideTheMap = useContext(BesideTheMap);
     /*
      * 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
@@ -481,6 +485,20 @@ function useCardActs() {
             // A district the search lit opens narrowed by the same words.
             const card = kindOfCard(node.id);
             const lit = card !== null && (found?.byKind[card] ?? 0) > 0;
+            /*
+             * A DISTRICT WITH NO PICTURE OF ITS OWN, OPENED FROM ALTITUDE, OPENS
+             * TO ITS STOP BESIDE THE MAP, in the panel a lens opens in: its own
+             * focus, at altitude, so it takes the place of a lens or another
+             * kind's stop open there (one panel at a time), the address says so,
+             * and Back returns to what was open before. It used to be chosen,
+             * which listed it beside the map only when nothing was open — with a
+             * lens open, the lens stayed and the district opened behind it.
+             */
+            if (besideTheMap && card !== null && view.overview && !ownPictureOf(node) && !(lit && view.q)) {
+                setView((current) => withWithin({ ...withFocus(current, `aggregate:${card}`), relation: null }, "view", null));
+                setSelection([]);
+                return;
+            }
             setView((current) => withJackIn(current, node.id, { ownPicture: ownPictureOf(node), ...(lit && current.q ? { carry: current.q } : {}) }));
             /*
              * A zoomed RECORD is selected — reading closely is when you act.
@@ -492,37 +510,47 @@ function useCardActs() {
         },
     });
 }
-/**
- * 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.
+/*
+ * THE RELATIONS FROM ALTITUDE, one ribbon each (`ribbons-layer.tsx`),
+ * fetched the first time the city is drawn: a page that stays on the
+ * ground carries none of them.
  */
-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" })] }));
+const ribbonsModule = /* @__PURE__ */ lazyModule(retryingImport(() => import("./ribbons-layer.js")));
+const Ribbons = /* @__PURE__ */ ribbonsModule.part((module, props) => _jsx(module.Ribbons, { ...props }), { what: "The relations", quiet: true });
+const ABOVE_KEY = "graview:map-from-above";
+/** Whether this person looks at the city from straight above: their own way of looking, kept in this browser when it can be. */
+function useFromAbove() {
+    const [above, setAbove] = useState(() => {
+        try {
+            return globalThis.localStorage?.getItem(ABOVE_KEY) === "1";
+        }
+        catch {
+            return false;
+        }
+    });
+    const choose = useCallback((next) => {
+        setAbove(next);
+        try {
+            globalThis.localStorage?.setItem(ABOVE_KEY, next ? "1" : "0");
+        }
+        catch {
+            // Not kept: it holds for this visit.
+        }
+    }, []);
+    return [above, choose];
 }
+/*
+ * THE GROUND OF THE CITY — its plots, their blocks, the roads and their
+ * rules — fetched the first time the scene rises: a page that never looks
+ * from altitude never carries it (`plots.tsx`).
+ */
+export const cityGround = lazyModule(retryingImport(() => import("./plots.js")));
+const Plots = cityGround.part((module, props) => _jsx(module.Plots, { ...props }), { quiet: true });
 /** SCENE FURNITURE in the ground's other corner: the way a map carries its own zoom. */
-function ZoomControls({ zoom, zoomBy }) {
+function ZoomControls({ zoom, zoomBy, above, setAbove }) {
     /** 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)] }));
+    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), _jsx("button", { type: "button", className: "graview-zoom-button graview-zoom-above", "data-testid": "from-above", "aria-pressed": above, title: above ? "See the city at an angle again" : "See the city from straight above", onClick: () => setAbove(!above), children: "From above" })] }));
 }
 /**
  * The spatial scene: one `<canvas layoutsubtree>` with the views as its
@@ -535,16 +563,14 @@ function ZoomControls({ zoom, zoomBy }) {
 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;
+    // A panel beside the map shows what is chosen from altitude, a record in focus among it (`mapChoice`).
+    const besideTheMap = useContext(BesideTheMap);
     /* 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
@@ -556,12 +582,28 @@ export function Scene({ options, renderer = "auto", attachRenderer, className, s
      * 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;
+    /*
+     * A PICTURE CHOSEN FROM ALTITUDE OPENS BESIDE THE MAP, at a size a person
+     * reads (the lens panel), so the camera no longer flies closer to a
+     * billboard on the plot: the city stays where it was, with the district
+     * the picture is of lit and the rest receded.
+     */
+    const closer = 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 [above, setAbove] = useFromAbove();
+    const seenFrom = useMemo(() => (above ? { ...options, tilt: TOP_DOWN } : options), [options, above]);
+    const { probe: dockProbe, dock } = useDock();
+    /*
+     * THE TRAIL'S ROOM. On the ground, where the picture's trail says
+     * something — "zoomed in ×", "the past ×", a raised kind — the focused
+     * card begins below it rather than under it: its top, 14 pixels down, and
+     * a chip of the reader's text size (the tenth walk: "Shifts ×" over "Sort").
+     */
+    const headroom = !view.overview && (view.zoom || view.past || view.relation) ? Math.ceil(14 + (34 * unit) / 16 + 6) : 0;
+    const sized = useLayoutOptions(seenFrom, size, unit, seated, closer * zoom, dock, nodes, headroom);
     const [panned, seen, panWithin, cameraLive, setCamera] = useCamera(view);
-    const pinnedIds = useMemo(() => new Set(Object.keys(view.pins)), [view.pins]);
+    // A district cannot be placed by hand from altitude, so no plot wears the pinned curb for one (a pin in an old bookmark is ignored).
+    const pinnedIds = useMemo(() => new Set(Object.keys(view.pins).filter((id) => kindOfCard(id) === null)), [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);
@@ -576,11 +618,11 @@ export function Scene({ options, renderer = "auto", attachRenderer, className, s
     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 });
+    const flights = useCameraFlights({ view, result, frame, panned, closer, screenId: null, setCamera });
     useLentWhereIs(context, frame, wrapperRef);
     usePointerReport(context.pointer, wrapperRef);
-    useAttachedRenderer(renderer, attachRenderer, canvasRef, frame, touched);
+    const [onDom, drawOnDom] = useDrawnOnDom();
+    useAttachedRenderer(renderer, attachRenderer, canvasRef, frame, touched, drawOnDom);
     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. */
@@ -621,7 +663,9 @@ export function Scene({ options, renderer = "auto", attachRenderer, className, s
         steer();
         setZoom(next);
         const box = wrapperRef.current?.getBoundingClientRect();
-        const center = { x: result.width / 2, y: result.height / 2 };
+        // The middle of what the reader sees: a panel over the scene is not part of it.
+        const seenBox = result.visible ?? result;
+        const center = { x: seenBox.width / 2, y: seenBox.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)));
@@ -629,6 +673,8 @@ export function Scene({ options, renderer = "auto", attachRenderer, className, s
     };
     /** 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 })));
+    // Tab passes over a card the panel covers, and the camera brings the one it lands on into the part that is seen.
+    useKeyboardKeepsToWhatIsSeen(wrapperRef, dock, (dx, dy) => nudge(dx, dy));
     panBy.current = (dx, dy) => {
         steer();
         const limit = cameraLimit(result);
@@ -649,114 +695,134 @@ export function Scene({ options, renderer = "auto", attachRenderer, className, s
         noteMoved();
     };
     const actsOn = useCardActs();
+    // Whether the kit draws a relation at all, for the ribbons (handed in: see ribbons-layer.tsx).
+    const kit = useKit();
+    const kitDraws = useCallback((edge) => kitConnector(kit, edge).connector.visible, [kit]);
     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;
+    const plotY = (city, node, plot, share) => city.originY + panned.y + toIso(plot.col + plot.side / share, plot.row + plot.side / share, city.cell, city.tilt).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
+    /*
+     * THE BILLBOARD IS NOT DRAWN. A picture chosen from altitude was its lens
+     * drawn at the city's scale on its plot — eight-pixel text over the
+     * districts, unreadable until it was opened. It opens beside the map now,
+     * at full size (the lens panel); the stop is the same, so an address, the
+     * bar and Back still name it.
+     */
+    // On the capture path a view the renderer handed on is drawn as the DOM path draws it.
+    const hostedOnDom = (id) => useDom || onDom.has(id);
+    const hosts = frame.nodes.filter((node) => node.screenOf === undefined).map((node) => (_jsx(SceneViewHost, { node: node, crowded: crowded(node), useDom: hostedOnDom(node.id), ...(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, 
+            : {}), 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.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 (_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 ×
+         * and Escape were carrying alone. Only the bare ground: a card, a
+         * control or a piece of chrome keeps its own meaning, and a drag
+         * that ends on the ground is still a pan, not a deselection.
+         */
+        onClick: (event) => {
+            if (swallow.current)
+                return;
+            const target = event.target;
+            // The panes are labeled sections now, not asides (FR-40); chrome is chrome either way.
+            if (target.closest("[data-graview-view], button, aside, section[aria-label], [data-graview-offstage], a, input, select"))
+                return;
+            setSelection([]);
+            setMenuAt(null);
+        }, style: {
+            position: "relative",
             /*
-             * CLICKING EMPTY GROUND puts the selection down — the gesture every
-             * canvas tool teaches, and the graceful half of deselection the ×
-             * and Escape were carrying alone. Only the bare ground: a card, a
-             * control or a piece of chrome keeps its own meaning, and a drag
-             * that ends on the ground is still a pan, not a deselection.
+             * THE SCENE FILLS THE WHOLE PICTURE; A PANEL FLOATS OVER IT. The
+             * ground, the grid, the depth and the tint run under the panel and
+             * show in the gap around it. What a panel takes from the map is the
+             * city's fit and the camera's bounds (`useDock`, `--graview-dock`,
+             * `--graview-sheet`), never the scene's own box.
              */
-            onClick: (event) => {
-                if (swallow.current)
-                    return;
-                const target = event.target;
-                // The panes are labeled sections now, not asides (FR-40); chrome is chrome either way.
-                if (target.closest("[data-graview-view], button, aside, section[aria-label], [data-graview-offstage], a, input, select"))
-                    return;
-                setSelection([]);
-                setMenuAt(null);
-            }, style: {
-                position: "relative",
-                width: "100%",
-                height: "100%",
-                cursor: dragging ? "grabbing" : "grab",
-                touchAction: "none",
-                ["--graview-altitude"]: view.overview ? 1 : 0,
-                /*
-                 * THE LATTICE THE CITY STANDS ON. The ground draws its diamonds at
-                 * the cell the map was placed with, anchored where cell (0,0) meets
-                 * the canvas — and the anchor pans with the picture, since the pan
-                 * is baked into every coordinate — so a plot sits on a grid line a
-                 * person can see. The kit's own size stands when no city is drawn.
-                 */
-                ...(frame.city
-                    ? {
-                        ["--graview-lattice-cell"]: `${frame.city.cell.toFixed(2)}px`,
-                        // The tween's own pan, not the live one: the ground moves with the cards it is under.
-                        ["--graview-lattice-x"]: `${(frame.city.originX + frame.city.pan.x).toFixed(1)}px`,
-                        ["--graview-lattice-y"]: `${(frame.city.originY + frame.city.pan.y).toFixed(1)}px`,
-                    }
-                    : {}),
-                ...(dragging ? { userSelect: "none" } : {}),
-                // The stage is sized to the measurement, but a stale measurement
-                // during a resize can briefly exceed it. Clipping keeps the scene
-                // inside its own bounds instead of pushing the page taller and
-                // cutting off anything floating over it.
-                overflow: "hidden",
-                ...style,
-            }, children: [_jsx(Plots, { frame: frame, ...extent, 
+            width: "100%",
+            height: "100%",
+            cursor: dragging ? "grabbing" : "grab",
+            touchAction: "none",
+            ["--graview-altitude"]: view.overview ? 1 : 0,
+            /*
+             * THE LATTICE THE CITY STANDS ON. The ground draws its diamonds at
+             * the cell the map was placed with, anchored where cell (0,0) meets
+             * the canvas — and the anchor pans with the picture, since the pan
+             * is baked into every coordinate — so a plot sits on a grid line a
+             * person can see. The kit's own size stands when no city is drawn.
+             */
+            ...(frame.city
+                ? {
+                    ["--graview-lattice-cell"]: `${frame.city.cell.toFixed(2)}px`,
+                    ["--graview-lattice-tilt"]: (frame.city.tilt ?? 0.5).toFixed(3),
+                    // The tween's own pan, not the live one: the ground moves with the cards it is under.
+                    ["--graview-lattice-x"]: `${(frame.city.originX + frame.city.pan.x).toFixed(1)}px`,
+                    ["--graview-lattice-y"]: `${(frame.city.originY + frame.city.pan.y).toFixed(1)}px`,
+                }
+                : {}),
+            ...(dragging ? { userSelect: "none" } : {}),
+            // The stage is sized to the measurement, but a stale measurement
+            // during a resize can briefly exceed it. Clipping keeps the scene
+            // inside its own bounds instead of pushing the page taller and
+            // cutting off anything floating over it.
+            overflow: "hidden",
+            ...style,
+        }, children: [view.overview && frame.city ? (_jsx(Suspense, { fallback: null, children: _jsx(Ribbons, { frame: frame, ...extent, pan: frame.city.pan, store: store, graphVersion: nodes, selection: selection, view: { overview: view.overview, focusId: view.focusId, beside: besideTheMap }, emphasis: emphasis, hiddenKinds: context.hiddenKinds, drawn: kitDraws }) })) : null, _jsx("div", { ref: dockProbe, "aria-hidden": "true", style: { position: "absolute", top: 0, right: 0, width: "var(--graview-dock, 0px)", height: "var(--graview-sheet, 0px)", visibility: "hidden", pointerEvents: "none" } }), frame.city ? (_jsx(Suspense, { fallback: null, 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, 
+                    pan: frame.city ? frame.city.pan : panned, brand: brand, pinned: pinnedIds, close: closer * zoom > 1.2, swallowed: swallow, ...(view.overview ? { chosen: mapChoice(selection, { overview: view.overview, focusId: view.focusId, beside: besideTheMap }, (id) => store.graph.getNode(id)?.kind).records } : {}), 
                     // A tile is its district: focusing it means the kind's aggregate, never the card's own id.
                     onFocus: (id) => {
                         const kind = kindOfCard(id);
                         if (kind !== null)
                             setView((current) => withFocus(current, aggregateId(kind)));
-                    } }), useDom ? (
+                    } }) })) : null, useDom ? (
+            /*
+             * The DOM path uses an ORDINARY container, not a capture canvas.
+             *
+             * `layoutsubtree` exists so the GPU can capture these elements, and
+             * it changes how the browser lays them out. Combining it with the CSS
+             * transforms and filters this path applies crashes the renderer
+             * process in Chromium 154 — silently, on first paint. Since the DOM
+             * 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: { ...stage, overflow: "hidden" }, children: hosts })) : (_jsxs("div", { style: stage, children: [_jsx("div", { "data-graview-stage": "dom", "data-graview-under-canvas": "", style: { position: "absolute", left: 0, top: 0, ...extent, overflow: "hidden" }, children: hosts.filter((host) => onDom.has(String(host.key))) }), _jsx("canvas", { ref: canvasRef, "data-graview-stage": "gpu", content: "drawable", layoutsubtree: "", ...extent, style: { display: "block", position: "relative", ...extent }, children: hosts.filter((host) => !onDom.has(String(host.key))) })] })), 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, ...(sized.chrome ? { chrome: sized.chrome } : {}), onGo: (by) => {
+                    nudge(by.x, by.y);
+                    noteMoved();
+                } })) : null, view.overview ? _jsx(ZoomControls, { zoom: zoom, zoomBy: (factor) => zoomAbout.current(factor), above: above, setAbove: setAbove }) : null, _jsx(Lines, { frame: frame, focusId: view.focusId, beside: besideTheMap, holding: inPlace, ...extent, scheme: scheme, overview: !!view.overview, selection: selection, emphasis: emphasis, stageRef: wrapperRef, store: store, graphNodes: nodes, ...((provisional) => (provisional ? { provisional } : {}))(provisionalLines(store)), 
                 /*
-                 * The DOM path uses an ORDINARY container, not a capture canvas.
-                 *
-                 * `layoutsubtree` exists so the GPU can capture these elements, and
-                 * it changes how the browser lays them out. Combining it with the CSS
-                 * transforms and filters this path applies crashes the renderer
-                 * process in Chromium 154 — silently, on first paint. Since the DOM
-                 * path never captures anything, the canvas has no job here, and not
-                 * creating one removes the whole interaction.
+                 * A LINE IS A THING. Clicking one that stands for exactly one edge
+                 * selects the relation itself — the inspector then says what it is
+                 * and what may lawfully be done to it; right-click opens the same
+                 * actions at the pointer. Bundled lines stay scenery: "some of
+                 * these" is not an honest thing to act on.
                  */
-                _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) => {
-                        nudge(by.x, by.y);
-                        noteMoved();
-                    } })) : 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, 
+                onPickEdge: (edgeId, at) => {
+                    // A pan that happened to start on a line is a pan, not a pick.
+                    if (swallow.current)
+                        return;
+                    setSelection([edgeId]);
+                    setMenuAt(at ? { ...at, on: edgeId } : null);
+                }, liveOf: (connector) => {
                     /*
-                     * A LINE IS A THING. Clicking one that stands for exactly one edge
-                     * selects the relation itself — the inspector then says what it is
-                     * and what may lawfully be done to it; right-click opens the same
-                     * actions at the pointer. Bundled lines stay scenery: "some of
-                     * these" is not an honest thing to act on.
+                     * A relation PULSES where it was just made or broken.
+                     *
+                     * An edge write touches both of its ends, so a connector is live
+                     * exactly when both of the things it joins were written in the same
+                     * 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.
                      */
-                    onPickEdge: (edgeId, at) => {
-                        // A pan that happened to start on a line is a pan, not a pick.
-                        if (swallow.current)
-                            return;
-                        setSelection([edgeId]);
-                        setMenuAt(at ? { ...at, on: edgeId } : null);
-                    }, liveOf: (connector) => {
-                        /*
-                         * A relation PULSES where it was just made or broken.
-                         *
-                         * An edge write touches both of its ends, so a connector is live
-                         * exactly when both of the things it joins were written in the same
-                         * 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 = 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: 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: whereIs, stageRef: wrapperRef, ...extent }), _jsx(RelationCaptions, { nodes: frame.nodes, moving: frame.t < 1, holding: inPlace, scheme: scheme, width: result.width, stageRef: wrapperRef }), children] }) }));
+                    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: 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: 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