@graview/react 0.1.28 → 0.1.30

package/dist/scene-lines.js

@@ -1,14 +1,22 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { humanizeField, SCENE_LAYERS } from "@graview/core";
-import { edgeSelectionId, edgeOfSelection } from "@graview/layout";
-import { CONNECTOR_DASH, connectorStroke, styleFor } from "@graview/render";
-import { useMemo, useLayoutEffect, useState } from "react";
+import { counted, humanizeField, labelOf, SCENE_LAYERS } from "@graview/core";
+import { edgeWords } from "@graview/core/words";
+import { provenanceWords, provisionalLinks } from "@graview/core/provenance";
+import { edgeOfSelection } from "@graview/layout";
+import { edgeSelectionId } from "@graview/layout/view-moves";
+import { CONNECTOR_DASH, PROVISIONAL_DASH, PROVISIONAL_OPACITY, connectorStroke, styleFor } from "@graview/render";
+import { Suspense, useEffect, useMemo, useLayoutEffect, useRef, useState } from "react";
 import { kitConnector, useKit } from "./kit.js";
-import { orthogonalPoints, polylineD, routePoint, routedQuadratic } from "./routes.js";
-import { Connectors, connectorStrands, tieRoute } from "./connectors.js";
+import { orthogonalPoints, polylineD, roundedPolylineD, routePoint, routedQuadratic } from "./routes.js";
+import { channelRoute } from "./channels.js";
+import { clipQuadratic, Connectors, connectorStrands, movedBy, tieRoute } from "./connectors.js";
 import { drawnBox, measureVisible, visibleRect } from "./where-drawn.js";
 import { captionRuns } from "./captions.js";
 import { railInset } from "./rails.js";
+import { placeTieLabels, tiesReached } from "./tie-labels.js";
+import { retryingImport } from "@graview/core/retry";
+import { lazyModule } from "./lazy-part.js";
+import { mapChoice } from "./map-choice.js";
 /**
  * EVERY LINE IN THE SCENE, measured against the DOM it is drawn over.
  *
@@ -32,7 +40,16 @@ import { railInset } from "./rails.js";
  * center, so selecting the session lit three of its four drills and left
  * the fourth to a faint line from nowhere.
  */
-export function Lines({ frame, width, height, scheme, overview, selection, emphasis, stageRef, store, graphNodes, onPickEdge, liveOf, holding = false, }) {
+/**
+ * THE LINKS STILL PROVISIONAL, as the lines read them (FR-172): each by its
+ * selection id, with the sentence its hover says — who made it and what it
+ * was based on. Undefined when there are none, which is nearly always.
+ */
+export function provisionalLines(store) {
+    const links = provisionalLinks(store);
+    return links.length > 0 ? new Map(links.map((link) => [edgeSelectionId(link.edge.kind, link.edge.from, link.edge.to), provenanceWords(link)])) : undefined;
+}
+export function Lines({ frame, width, height, scheme, overview, selection, emphasis, stageRef, store, graphNodes, onPickEdge, liveOf, holding = false, provisional, focusId = null, beside = false, }) {
     const [asked, remeasure] = useState(0);
     /*
      * MEASURED ONCE, AFTER THE DOM IS THERE. Measuring during render read the
@@ -51,11 +68,35 @@ export function Lines({ frame, width, height, scheme, overview, selection, empha
      * with the world, which is not a new frame, so they follow the hand.
      */
     const moving = frame.t < 1;
+    /*
+     * THE CAPTIONS ARE PLACED IN THE SAME COMMIT, measured from the same
+     * boxes, so the first measurement can come before them: a road along a
+     * gutter went behind words that were not there yet. Where they stood is
+     * kept with each measurement, and a frame later, if they stand elsewhere,
+     * the lines are measured again.
+     */
+    const captionsAt = useRef("");
+    /* Where the layout had every card when the lines were measured: a held card's lines move by what it has moved since. */
+    const measuredAt = useRef([]);
+    const captionsNow = () => [...(stageRef.current?.querySelectorAll("[data-graview-relation] > span") ?? [])].map((el) => { const r = el.getBoundingClientRect(); return `${Math.round(r.left)},${Math.round(r.top)},${Math.round(r.width)}`; }).join(" ");
     useLayoutEffect(() => {
         if (moving || holding)
             return;
+        captionsAt.current = captionsNow();
+        measuredAt.current = frame.nodes;
         setMeasured(connectorStrands(frame.nodes, frame.connectors, stageRef.current, overview, scheme));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [frame, moving, holding, selection, overview, graphNodes, scheme, asked, stageRef]);
+    useEffect(() => {
+        if (moving || holding || overview || typeof requestAnimationFrame === "undefined")
+            return;
+        const later = requestAnimationFrame(() => {
+            if (captionsNow() !== captionsAt.current)
+                remeasure((n) => n + 1);
+        });
+        return () => cancelAnimationFrame(later);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [measured]);
     /*
      * A LINE POINTS AT WHERE A THING IS, NOT AT WHERE IT WAS.
      *
@@ -111,14 +152,45 @@ export function Lines({ frame, width, height, scheme, overview, selection, empha
             watch?.disconnect();
         };
     }, [stageRef, views]);
+    /*
+     * WHICH RECORD A PERSON IS AT: the pointer on it, or the keyboard. A tie
+     * the record's card has already said is drawn for that one (`said`);
+     * nobody is listened to while no tie waits on it.
+     */
+    const [pointed, point] = useState(null);
+    const waiting = (measured ?? []).some((strand) => strand.tie !== undefined);
+    useEffect(() => {
+        const stage = stageRef.current;
+        if (!waiting || stage === null)
+            return;
+        const at = (event) => {
+            const mark = event.target?.closest?.("[data-graview-pick], [data-graview-view]");
+            point(mark?.getAttribute("data-graview-pick") ?? mark?.getAttribute("data-graview-view") ?? null);
+        };
+        const away = () => point(null);
+        stage.addEventListener("pointerover", at);
+        stage.addEventListener("focusin", at);
+        stage.addEventListener("pointerleave", away);
+        stage.addEventListener("focusout", away);
+        return () => {
+            stage.removeEventListener("pointerover", at);
+            stage.removeEventListener("focusin", at);
+            stage.removeEventListener("pointerleave", away);
+            stage.removeEventListener("focusout", away);
+        };
+    }, [waiting, stageRef]);
     if (moving)
         return null;
     /*
      * Without a DOM — the first render, a server — the lines stand on the
-     * layout's own boxes; and so they do while a card is held, following the
-     * hand from the layout rather than measuring the page on every move.
+     * layout's own boxes. While a card is held they stand on what was
+     * measured, moved by as far as the hand has moved each card since: the
+     * page is not measured on every move, and a line still starts on the
+     * card's drawn edge rather than on the edge of the slot the layout gave
+     * it (a gap as tall as the slot is taller), and a tie the card has said
+     * stays waiting.
      */
-    const strands = (holding ? null : measured) ?? connectorStrands(frame.nodes, frame.connectors, null, overview, scheme);
+    const strands = (measured && holding ? movedBy(measured, measuredAt.current, frame.nodes) : measured) ?? connectorStrands(frame.nodes, frame.connectors, null, overview, scheme);
     const drawnSingles = new Set();
     for (const strand of strands) {
         if (strand.edges.length !== 1)
@@ -126,9 +198,20 @@ export function Lines({ frame, width, height, scheme, overview, selection, empha
         const edge = strand.edges[0];
         drawnSingles.add(`${strand.connector.kind}|${edge.from}|${edge.to}`);
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Connectors, { strands: strands, result: frame, scheme: scheme, overview: overview, selection: selection, emphasis: emphasis, stageRef: stageRef, onPickEdge: onPickEdge, liveOf: liveOf }), _jsx(SelectionTies, { stageRef: stageRef, nodes: frame.nodes, scheme: scheme, selection: selection, store: store, graphNodes: graphNodes, overview: overview, width: width, height: height, onPickEdge: onPickEdge, alreadyDrawn: drawnSingles, tick: asked })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Connectors, { strands: strands, result: frame, scheme: scheme, overview: overview, selection: selection, emphasis: emphasis, stageRef: stageRef, onPickEdge: onPickEdge, liveOf: liveOf, pointed: pointed, ...(provisional ? { provisional } : {}) }), overview && mapChoice(selection, { overview, focusId, beside }, (id) => store.graph.getNode(id)?.kind).records.length > 0 ? (_jsx(Suspense, { fallback: null, children: _jsx(RecordLinks, { frame: frame, width: width, height: height, stageRef: stageRef, tick: asked, store: store, graphVersion: graphNodes, selection: selection, view: { overview, focusId, beside }, rulers: provisional ? { ...RULERS, unsureOf: (edge, from, to) => provisional.get(edgeSelectionId(edge, from, to)) } : RULERS }) })) : null, overview ? null : _jsx(SelectionTies, { ...(provisional ? { provisional } : {}), stageRef: stageRef, nodes: frame.nodes, scheme: scheme, selection: selection, store: store, graphNodes: graphNodes, overview: overview, width: width, height: height, onPickEdge: onPickEdge, alreadyDrawn: drawnSingles, tick: asked })] }));
 }
-function SelectionTies({ stageRef, nodes, scheme, selection, store, graphNodes, overview, width, height, onPickEdge, alreadyDrawn, tick, }) {
+/*
+ * A CHOSEN RECORD'S LINKS FROM ALTITUDE (`record-links-layer.tsx`), fetched
+ * the first time a record is chosen up there: a page nobody chooses
+ * anything on carries none of it.
+ */
+/* The scene's rulers, handed to the links rather than imported by them: a part fetched apart reaching into the scene's own modules splits them around it. */
+const RULERS = { visibleRect, clipQuadratic, unsureDash: PROVISIONAL_DASH, unsureOpacity: PROVISIONAL_OPACITY };
+const recordLinks = /* @__PURE__ */ lazyModule(retryingImport(() => import("./record-links-layer.js")));
+const RecordLinks = /* @__PURE__ */ recordLinks.part((module, props) => _jsx(module.RecordLinks, { ...props }), { what: "The links", quiet: true });
+/** The strip at the top of a card where its title is said, which a tie's words keep off. */
+const TITLE_STRIP = 44;
+function SelectionTies({ stageRef, nodes, scheme, selection, store, graphNodes, overview, width, height, onPickEdge, alreadyDrawn, tick, provisional, }) {
     const kit = useKit();
     const ties = useMemo(() => {
         if (selection.length === 0 || selection.length > 4)
@@ -224,7 +307,7 @@ function SelectionTies({ stageRef, nodes, scheme, selection, store, graphNodes,
                 if (!box || !route)
                     continue;
                 const edge = [...store.graph.allEdges()].find((one) => (one.from === id && selection.includes(one.to)) || (one.to === id && selection.includes(one.from)));
-                joined.push({ key: `join:${id}`, kind: edge?.kind ?? "", endX: route.to.x, endY: route.to.y, ...route, fromBox: cellBox, toBox: box, proxy: false, edgeId: edge ? edgeSelectionId(edge.kind, edge.from, edge.to) : null });
+                joined.push({ key: `join:${id}`, self: id, other: "", others: 1, kind: edge?.kind ?? "", endX: route.to.x, endY: route.to.y, ...route, fromBox: cellBox, toBox: box, proxy: false, edgeId: edge ? edgeSelectionId(edge.kind, edge.from, edge.to) : null });
             }
             return joined;
         }
@@ -319,7 +402,23 @@ function SelectionTies({ stageRef, nodes, scheme, selection, store, graphNodes,
             }
             return false;
         };
-        const seen = new Set();
+        /* The band's chips and the words over them, which a road from a chip goes round. */
+        const band = [];
+        if (!overview && stageRef.current) {
+            for (const node of nodes) {
+                if (Math.round(node.plane) !== 1)
+                    continue;
+                const box = measureVisible(stageRef.current, node.id, false);
+                if (box)
+                    band.push(box);
+            }
+            for (const caption of stageRef.current.querySelectorAll("[data-graview-relation] > span")) {
+                const r = caption.getBoundingClientRect();
+                if (r.width > 0 && r.height > 0)
+                    band.push({ x: r.left - stage.left, y: r.top - stage.top, width: r.width, height: r.height });
+            }
+        }
+        const seen = new Map();
         const found = [];
         for (const tie of ties) {
             if (someViewDrawsBoth(tie.self, tie.other))
@@ -328,7 +427,13 @@ function SelectionTies({ stageRef, nodes, scheme, selection, store, graphNodes,
             const selfHostEl = selfHost
                 ? stageRef.current?.querySelector(`[data-graview-view="${CSS.escape(selfHost.id)}"]`)
                 : null;
-            const fromCandidates = elementBoxes(tie.self, () => false);
+            /*
+             * A CHIP OF THE BAND IS THE THING: chosen there, its tie leaves the chip,
+             * not a mention of it in the record's card above, whose line then ran
+             * down through the card's own chips and across the band.
+             */
+            const ownChip = !overview && selfHost?.id === tie.self && Math.round(selfHost.plane) === 1 ? measureVisible(stageRef.current, selfHost.id, false) : null;
+            const fromCandidates = ownChip ? [ownChip] : elementBoxes(tie.self, () => false);
             const hasFromEl = fromCandidates.length > 0;
             if (!hasFromEl && selfHost) {
                 const box = measureVisible(stageRef.current, selfHost.id, false) ?? drawnBox(selfHost, scheme);
@@ -430,19 +535,28 @@ function SelectionTies({ stageRef, nodes, scheme, selection, store, graphNodes,
              */
             const key = `${tie.kind}:${Math.round(fromBox.x)},${Math.round(fromBox.y)}` +
                 `:${Math.round(toBox.x)},${Math.round(toBox.y)}`;
-            if (seen.has(key))
+            const twin = seen.get(key);
+            if (twin) {
+                // Several records of one district on one line: the line counts them.
+                twin.others += 1;
                 continue;
-            seen.add(key);
+            }
             const route = tieRoute(fromBox, toBox);
             if (!route)
                 continue;
-            const { from, to, control } = route;
+            const { from, control } = route;
+            // From a chip of the band, the road runs whole through its gutters, under nothing and over nothing.
+            const points = ownChip && fromBox === ownChip ? channelRoute(fromBox, toBox, band, found.length) : undefined;
+            const to = points ? points[points.length - 1] : route.to;
             // The real edge this tie stands for, oriented the way the graph holds it.
             const oriented = [...store.graph.allEdges()].find((edge) => edge.kind === tie.kind &&
                 ((edge.from === tie.self && edge.to === tie.other) ||
                     (edge.from === tie.other && edge.to === tie.self)));
-            found.push({
+            const line = {
                 key: `${tie.kind}:${tie.self}:${tie.other}`,
+                self: tie.self,
+                other: tie.other,
+                others: 1,
                 kind: tie.kind,
                 endX: to.x,
                 endY: to.y,
@@ -451,85 +565,189 @@ function SelectionTies({ stageRef, nodes, scheme, selection, store, graphNodes,
                 control,
                 fromBox,
                 toBox,
+                ...(points ? { points } : {}),
                 proxy: toProxy,
                 edgeId: oriented ? edgeSelectionId(oriented.kind, oriented.from, oriented.to) : null,
-            });
+            };
+            seen.set(key, line);
+            found.push(line);
+        }
+        // EVERY LINE SAYS ITS RELATION at its far end, in the chosen record's kind's words, as the same record's links do from altitude.
+        for (const line of found) {
+            const edge = [...store.graph.allEdges()].find((one) => one.kind === line.kind && ((one.from === line.self && one.to === line.other) || (one.from === line.other && one.to === line.self)));
+            const selfNode = store.graph.getNode(line.self);
+            const otherNode = store.graph.getNode(line.other);
+            if (!edge || !selfNode || !otherNode)
+                continue;
+            const direction = edge.from === line.self ? "out" : "in";
+            const words = edgeWords(store.schema, direction === "out" ? selfNode.kind : otherNode.kind, line.kind, direction);
+            line.said = line.proxy ? `${words}: ${counted(store.schema, otherNode.kind, line.others)}` : `${words}: ${labelOf(store.schema.tryDefinition(otherNode.kind), otherNode)}`;
         }
         return found;
     };
     const [lines, setLines] = useState([]);
+    const [labels, setLabels] = useState([]);
     useLayoutEffect(() => {
-        setLines(measure());
+        const measured = measure();
+        setLines(measured);
+        setLabels(measured.some((line) => line.said) ? labelsFor(measured) : []);
         // The measurement depends on the DOM the frame committed, which these
         // name; `measure` itself closes over nothing that changes without them.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [ties, nodes, overview, scheme, width, height, alreadyDrawn, tick, stageRef]);
+    /* Each tie's words beside its far end, once, clear of the cards' titles (`tie-labels.ts`). */
+    const labelsFor = (measured) => {
+        const stageEl = stageRef.current;
+        if (!stageEl)
+            return [];
+        const cards = [];
+        for (const host of stageEl.querySelectorAll("[data-graview-view]")) {
+            const frame = [...host.children].find((child) => !child.classList.contains("graview-kind-tag"));
+            const box = frame ? visibleRect(frame, stageEl) : null;
+            if (box)
+                cards.push({ box, title: { ...box, height: Math.min(box.height, TITLE_STRIP) } });
+        }
+        return placeTieLabels(measured.flatMap((line) => (line.said ? [{ key: line.key, said: line.said, end: { x: line.endX, y: line.endY }, far: line.toBox }] : [])), cards, { width, height });
+    };
+    /*
+     * A TIE'S WORDS WAIT TO BE ASKED FOR: shown while the tie, or a card at
+     * either end of it, is under the pointer or holds the keyboard.
+     */
+    const [reached, setReached] = useState(() => new Set());
+    const reachable = useRef([]);
+    reachable.current = lines.map((line) => ({ key: line.key, fromBox: line.fromBox, toBox: line.toBox, ids: [line.self, line.other], edgeId: line.edgeId }));
+    const anySaid = labels.length > 0;
+    useEffect(() => {
+        const stageEl = stageRef.current;
+        if (!stageEl || !anySaid)
+            return;
+        const settle = (next) => setReached((was) => (was.size === next.size && [...next].every((key) => was.has(key)) ? was : next));
+        let queued = 0;
+        let last = null;
+        const pointed = () => {
+            queued = 0;
+            if (!last)
+                return;
+            const stage = stageEl.getBoundingClientRect();
+            const target = last.target instanceof Element ? last.target : null;
+            settle(tiesReached(reachable.current, {
+                point: { x: last.clientX - stage.left, y: last.clientY - stage.top },
+                edgeId: target?.closest("[data-graview-edge]")?.getAttribute("data-graview-edge") ?? null,
+            }));
+        };
+        const onMove = (event) => {
+            last = event;
+            if (!queued)
+                queued = requestAnimationFrame(pointed);
+        };
+        const onLeave = () => {
+            last = null;
+            settle(new Set());
+        };
+        const onFocus = (event) => {
+            const target = event.target instanceof Element ? event.target : null;
+            if (!target)
+                return;
+            const stage = stageEl.getBoundingClientRect();
+            const rect = target.getBoundingClientRect();
+            const id = target.closest("[data-graview-pick]")?.getAttribute("data-graview-pick") ?? target.closest("[data-graview-view]")?.getAttribute("data-graview-view");
+            settle(tiesReached(reachable.current, {
+                ...(id ? { ids: [id] } : {}),
+                box: { x: rect.left - stage.left, y: rect.top - stage.top, width: rect.width, height: rect.height },
+            }));
+        };
+        const onBlur = (event) => {
+            if (!(event.relatedTarget instanceof Node && stageEl.contains(event.relatedTarget)))
+                settle(new Set());
+        };
+        stageEl.addEventListener("pointermove", onMove, { passive: true });
+        stageEl.addEventListener("pointerleave", onLeave);
+        stageEl.addEventListener("focusin", onFocus);
+        stageEl.addEventListener("focusout", onBlur);
+        return () => {
+            if (queued)
+                cancelAnimationFrame(queued);
+            stageEl.removeEventListener("pointermove", onMove);
+            stageEl.removeEventListener("pointerleave", onLeave);
+            stageEl.removeEventListener("focusin", onFocus);
+            stageEl.removeEventListener("focusout", onBlur);
+        };
+    }, [stageRef, anySaid]);
     if (lines.length === 0)
         return null;
-    return (_jsx("svg", { "aria-hidden": lines.some((line) => line.edgeId) ? undefined : true, "data-graview-ties": lines.length, "data-graview-world": "", width: width, height: height, style: {
-            position: "absolute",
-            left: 0,
-            top: 0,
-            pointerEvents: "none",
-            // Over the views: these lines START on an element inside one, and a
-            // line into the shelf that dives behind the focus card en route says
-            // nothing.
-            zIndex: SCENE_LAYERS.lines,
-        }, children: lines.map((line) => {
-            const { connector, style } = kitConnector(kit, line.kind);
-            // A kind the kit keeps quiet is not drawn — still selectable from the inspector.
-            if (!connector.visible)
-                return null;
-            const quadratic = { p0: line.from, c: line.control, p1: line.to };
-            // The route is the kit's call: the arc the layout chose, its chord, or two elbows.
-            const d = connector.route === "orthogonal"
-                ? polylineD([orthogonalPoints(line.from, line.to)])
-                : (({ p0, c, p1 }) => `M ${p0.x} ${p0.y} Q ${c.x} ${c.y} ${p1.x} ${p1.y}`)(routedQuadratic(connector.route, quadratic));
-            /*
-             * A tie that stands for one edge takes the pointer, like any line:
-             * the hit run is the visible stretch between its two endpoint
-             * boxes, so pressing a line never steals a card's click.
-             */
-            let hit = null;
-            // A stand-in line takes no pointer: a 14px corridor across half
-            // the scene stole clicks from every card it crossed, to select a
-            // relation whose far end is not even drawn. The edge stays
-            // selectable where it is really drawn, and from the inspector.
-            if (line.edgeId && onPickEdge && !line.proxy) {
-                const inside = (box, p) => p.x >= box.x && p.x <= box.x + box.width && p.y >= box.y && p.y <= box.y + box.height;
-                const points = [];
-                for (let i = 0; i <= 40; i++) {
-                    const point = routePoint(connector.route, quadratic, i / 40);
-                    if (inside(line.fromBox, point) || inside(line.toBox, point))
-                        continue;
-                    points.push(point);
-                }
-                if (points.length >= 2) {
-                    hit = (_jsx("path", { "data-graview-edge": line.edgeId, className: "graview-edge-hit", d: `M ${points[0].x} ${points[0].y} ${points
-                            .slice(1)
-                            .map((point) => `L ${point.x} ${point.y}`)
-                            .join(" ")}`, fill: "none", 
-                        // The ends stay clear: a line lands ON a chip, and a hit stroke that reached
-                        // the chip took the click meant for it. Seven percent off each end.
-                        pathLength: 1, strokeDasharray: "0.86", strokeDashoffset: -0.07, stroke: "transparent", strokeWidth: 14, style: { pointerEvents: "stroke", cursor: "pointer" }, onClick: (event) => {
-                            event.stopPropagation();
-                            onPickEdge(line.edgeId, { x: event.clientX, y: event.clientY });
-                        }, onContextMenu: (event) => {
-                            event.preventDefault();
-                            event.stopPropagation();
-                            onPickEdge(line.edgeId, { x: event.clientX, y: event.clientY });
-                        } }));
-                }
-            }
-            return (
-            /*
-             * A line to a STAND-IN recedes: the far end is the kind's
-             * district, not the thing itself, and five of those at full
-             * strength crossing the scene is a hairball. Present enough to
-             * say "the rest live over there", never louder than a real tie.
-             */
-            _jsxs("g", { opacity: line.proxy ? 0.32 : 0.72, children: [_jsx("path", { "data-graview-tie": line.kind, "data-graview-tie-proxy": line.proxy || undefined, d: d, fill: "none", stroke: connectorStroke(style), strokeWidth: line.proxy ? 1.1 : 1.6, strokeDasharray: CONNECTOR_DASH[style.pattern], strokeLinecap: "round" }), _jsx("circle", { cx: line.endX, cy: line.endY, r: line.proxy ? 2 : 2.6, fill: connectorStroke(style) }), hit] }, line.key));
-        }) }));
+    return (_jsxs(_Fragment, { children: [_jsx("svg", { "aria-hidden": lines.some((line) => line.edgeId) ? undefined : true, "data-graview-ties": lines.length, "data-graview-world": "", width: width, height: height, style: {
+                    position: "absolute",
+                    left: 0,
+                    top: 0,
+                    pointerEvents: "none",
+                    // Over the views: these lines START on an element inside one, and a
+                    // line into the shelf that dives behind the focus card en route says
+                    // nothing.
+                    zIndex: SCENE_LAYERS.lines,
+                }, children: lines.map((line) => {
+                    const { connector, style } = kitConnector(kit, line.kind);
+                    // A kind the kit keeps quiet is not drawn — still selectable from the inspector.
+                    if (!connector.visible)
+                        return null;
+                    // A link made less than sure, not yet kept by a person (FR-172): short dashes, quieter, its basis on hover.
+                    const unsure = line.edgeId ? provisional?.get(line.edgeId) : undefined;
+                    const quadratic = { p0: line.from, c: line.control, p1: line.to };
+                    // The route is the kit's call: the arc the layout chose, its chord, or two elbows.
+                    const d = line.points
+                        ? roundedPolylineD(line.points, 10)
+                        : connector.route === "orthogonal"
+                            ? polylineD([orthogonalPoints(line.from, line.to)])
+                            : (({ p0, c, p1 }) => `M ${p0.x} ${p0.y} Q ${c.x} ${c.y} ${p1.x} ${p1.y}`)(routedQuadratic(connector.route, quadratic));
+                    /*
+                     * A tie that stands for one edge takes the pointer, like any line:
+                     * the hit run is the visible stretch between its two endpoint
+                     * boxes, so pressing a line never steals a card's click.
+                     */
+                    let hit = null;
+                    // A stand-in line takes no pointer: a 14px corridor across half
+                    // the scene stole clicks from every card it crossed, to select a
+                    // relation whose far end is not even drawn. The edge stays
+                    // selectable where it is really drawn, and from the inspector.
+                    if (line.edgeId && onPickEdge && !line.proxy) {
+                        const inside = (box, p) => p.x >= box.x && p.x <= box.x + box.width && p.y >= box.y && p.y <= box.y + box.height;
+                        const points = line.points ? [...line.points] : [];
+                        for (let i = 0; i <= (line.points ? -1 : 40); i++) {
+                            const point = routePoint(connector.route, quadratic, i / 40);
+                            if (inside(line.fromBox, point) || inside(line.toBox, point))
+                                continue;
+                            points.push(point);
+                        }
+                        if (points.length >= 2) {
+                            hit = (_jsx("path", { "data-graview-edge": line.edgeId, className: "graview-edge-hit", d: `M ${points[0].x} ${points[0].y} ${points
+                                    .slice(1)
+                                    .map((point) => `L ${point.x} ${point.y}`)
+                                    .join(" ")}`, fill: "none", 
+                                // The ends stay clear: a line lands ON a chip, and a hit stroke that reached
+                                // the chip took the click meant for it. Seven percent off each end.
+                                pathLength: 1, strokeDasharray: "0.86", strokeDashoffset: -0.07, stroke: "transparent", strokeWidth: 14, style: { pointerEvents: "stroke", cursor: "pointer" }, onClick: (event) => {
+                                    event.stopPropagation();
+                                    onPickEdge(line.edgeId, { x: event.clientX, y: event.clientY });
+                                }, onContextMenu: (event) => {
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                    onPickEdge(line.edgeId, { x: event.clientX, y: event.clientY });
+                                }, children: unsure !== undefined ? _jsx("title", { children: unsure }) : null }));
+                        }
+                    }
+                    return (
+                    /*
+                     * A line to a STAND-IN recedes: the far end is the kind's
+                     * district, not the thing itself, and five of those at full
+                     * strength crossing the scene is a hairball. Present enough to
+                     * say "the rest live over there", never louder than a real tie.
+                     */
+                    _jsxs("g", { opacity: (line.proxy ? 0.32 : 0.72) * (unsure !== undefined ? PROVISIONAL_OPACITY : 1), children: [_jsx("path", { "data-graview-tie": line.kind, "data-graview-tie-proxy": line.proxy || undefined, "data-graview-provisional": unsure !== undefined || undefined, d: d, fill: "none", stroke: connectorStroke(style), strokeWidth: line.proxy ? 1.1 : 1.6, strokeDasharray: unsure !== undefined ? PROVISIONAL_DASH : CONNECTOR_DASH[style.pattern], strokeLinecap: "round" }), _jsx("circle", { cx: line.endX, cy: line.endY, r: line.proxy ? 2 : 2.6, fill: connectorStroke(style) }), hit] }, line.key));
+                }) }), _jsx("div", { "aria-hidden": "true", "data-graview-world": "", style: { position: "absolute", inset: 0, pointerEvents: "none", zIndex: SCENE_LAYERS.tieLabels }, children: labels.map((label) => {
+                    const first = lines.find((line) => line.key === label.keys[0]);
+                    return (_jsx("span", { className: "graview-record-link-said", "data-graview-link-said": first?.kind, "data-graview-lands": first?.proxy ? "district" : "record", "data-graview-said-for": label.keys.length, "data-graview-tie-said": label.keys.some((key) => reached.has(key)) ? "shown" : "waiting", 
+                        /* Kept on the screen: landing near a phone's edge, the words step back by as much as they would run over (the tenth walk). */
+                        style: { position: "absolute", left: label.x, top: label.y, transform: `translateX(min(0px, calc(${Math.round(width - label.x - 8)}px - 100%)))` }, children: label.said }, label.said));
+                }) })] }));
 }
 /**
  * What plane 1 is, said in words, over the run of cards it applies to.
@@ -564,7 +782,8 @@ export function RelationCaptions({ nodes, scheme, width: stageWidth, stageRef, m
              * from the host's top floated in open ground half a band above the
              * cards it captions.
              */
-            const measured = measureVisible(stageRef.current, node.id, false);
+            // By the slot, as the layout made the rows: a chip sits lower in its slot than a card of several in the same row.
+            const measured = measureVisible(stageRef.current, node.id, false, true);
             const { scale } = styleFor(1, scheme);
             entries.push({
                 key: `${node.via.edgeKind}|${node.via.direction}`,