@graview/react 0.1.28 → 0.1.29

package/dist/scene-options.js

@@ -1,5 +1,8 @@
-import { beginning, orderKinds, touchWeights } from "@graview/core";
-import { useMemo } from "react";
+import { orderKinds } from "@graview/core";
+import { beginning } from "@graview/core/seat";
+import { touchWeights } from "@graview/core/search";
+import { useContext, useMemo } from "react";
+import { BesideTheMap } from "./beside-the-map.js";
 import { foundIds, useFound, useGraview } from "./context.js";
 import { useViolations } from "./hooks.js";
 import { railInset, SEAT_FOOT } from "./rails.js";
@@ -15,13 +18,17 @@ const NO_HITS = new Set();
  * dead ground on a wide screen and clips on a narrow one, and the plane
  * bands are proportions rather than pixels, so they follow.
  */
-export function useLayoutOptions(options, size, unit, nameWidth, 
+export function useLayoutOptions(options, size, unit, 
 /** Whether an ask field stands at the picture's foot: the layout keeps that strip clear of cards. */
-seated, cityZoom, screenHeight, 
+seated, cityZoom, 
+/** What a panel floating over the scene covers, in pixels (`useDock`): the city is fitted in what is left. */
+dock, 
 /** The graph's tick: the log only grows when the graph changes. */
 nodes) {
     const { store, views, hiddenKinds } = useGraview();
     const found = useFound();
+    // A picture opened from altitude stands beside the map, where a panel is drawn.
+    const besideTheMap = useContext(BesideTheMap);
     // What each subject's violations name, so a rule's neighborhood is what it judges.
     const violations = useViolations();
     const judged = useMemo(() => {
@@ -53,7 +60,7 @@ nodes) {
     return useMemo(() => ({
         ...options,
         cityZoom,
-        ...(screenHeight !== undefined ? { screenHeight } : {}),
+        ...(besideTheMap ? { besideTheMap: true } : {}),
         // 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.
@@ -67,7 +74,15 @@ nodes) {
          * 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 CORNER THE ALTITUDE CONTROL AND THE KEY STAND IN, and nothing of
+         * the city opened under them: the districts and their names open
+         * clear of the chrome; the zoom at the foot when no ask field keeps it.
+         */
+        inset: { ...railInset((size?.width ?? 1200) - dock.right), top: 8, bottom: seated ? 0 : 56 },
+        // Up and the Key stand clear of a panel too, at the corner of what the reader sees.
+        chrome: [{ x: (size?.width ?? 1200) - dock.right - 176, y: 0, width: 176, height: 100 }],
+        ...(dock.right > 0 || dock.bottom > 0 ? { dock } : {}),
         // 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,
@@ -94,7 +109,6 @@ nodes) {
             (held[place.kind] ??= []).push({ as: place.as, title: place.title, ...(place.across ? { across: place.across } : {}) });
             return held;
         }, {}),
-        nameWidth,
         ...(size
             ? {
                 width: size.width,
@@ -111,6 +125,6 @@ nodes) {
                 height: seated ? Math.max(0, size.height - SEAT_FOOT) : size.height,
             }
             : {}),
-    }), [options, size, unit, store, views, hiddenKinds, judged, relevance, cityZoom, screenHeight, nameWidth, seated]);
+    }), [options, size, unit, store, views, hiddenKinds, judged, relevance, cityZoom, seated, besideTheMap, dock.right, dock.bottom]);
 }
 //# sourceMappingURL=scene-options.js.map

package/dist/scene-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"scene-options.js","sourceRoot":"","sources":["../src/scene-options.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"scene-options.js","sourceRoot":"","sources":["../src/scene-options.ts"],"names":[],"mappings":"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"}

package/dist/scene-root.d.ts

@@ -47,6 +47,7 @@ export interface SceneProps {
     /** Rendered over the scene — an affordance surface, a header, a legend. */
     readonly children?: ReactNode;
 }
+export declare const cityGround: import("./lazy-part.js").LazyModule<typeof import("./plots.js")>;
 /**
  * The spatial scene: one `<canvas layoutsubtree>` with the views as its
  * IMMEDIATE children.

package/dist/scene-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scene-root.d.ts","sourceRoot":"","sources":["../src/scene-root.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAS,MAAM,eAAe,CAAC;AACtD,OAAO,EAcL,KAAK,kBAAkB,EAEvB,KAAK,aAAa,EAOnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAML,KAAK,aAAa,EAClB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAiBf,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAIvC,OAAO,EAAE,SAAS,EAAE,CAAC;AAKrB,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC;IACjC;;;;;;;;OAQG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;IAC3C;;;;;;OAMG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAChC,MAAM,EAAE,iBAAiB,CAAC;QAC1B;;;WAGG;QACH,MAAM,EAAE,kBAAkB,CAAC;QAC3B;;;;;;WAMG;QACH,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;QAC3B,kEAAkE;QAClE,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAC;KACxC,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;IAC/B,yDAAyD;IACzD,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,2EAA2E;IAC3E,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B;AAkmBD;;;;;;;GAOG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,SAAS,EAAE,EACzC,OAAO,EACP,QAAiB,EACjB,cAAc,EACd,SAAS,EACT,KAAK,EACL,OAAc,EACd,QAAQ,GACT,EAAE,UAAU,+BAkXZ"}
+{"version":3,"file":"scene-root.d.ts","sourceRoot":"","sources":["../src/scene-root.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAS,MAAM,eAAe,CAAC;AACtD,OAAO,EAWL,KAAK,kBAAkB,EAEvB,KAAK,aAAa,EAOnB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAQL,KAAK,aAAa,EAClB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AA0Bf,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAIvC,OAAO,EAAE,SAAS,EAAE,CAAC;AAKrB,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC;IACjC;;;;;;;;OAQG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;IAC3C;;;;;;OAMG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAChC,MAAM,EAAE,iBAAiB,CAAC;QAC1B;;;WAGG;QACH,MAAM,EAAE,kBAAkB,CAAC;QAC3B;;;;;;WAMG;QACH,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;QAC3B,kEAAkE;QAClE,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAC;KACxC,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;IAC/B,yDAAyD;IACzD,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,2EAA2E;IAC3E,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B;AA+iBD,eAAO,MAAM,UAAU,kEAAyD,CAAC;AAiDjF;;;;;;;GAOG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,SAAS,EAAE,EACzC,OAAO,EACP,QAAiB,EACjB,cAAc,EACd,SAAS,EACT,KAAK,EACL,OAAc,EACd,QAAQ,GACT,EAAE,UAAU,+BAuaZ"}

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
@@ -373,6 +362,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 +472,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 +497,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 +550,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 +569,21 @@ 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();
+    const sized = useLayoutOptions(seenFrom, size, unit, seated, closer * zoom, dock, nodes);
     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,8 +598,7 @@ 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);
@@ -621,7 +642,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 +652,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 +674,132 @@ 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.
+     */
+    const hosts = frame.nodes.filter((node) => node.screenOf === undefined).map((node) => (_jsx(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, 
+            : {}), 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 })) : (_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), 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