@graview/react 0.1.0

package/dist/routes.d.ts

@@ -0,0 +1,50 @@
+import type { ConnectorRoute } from "@graview/core";
+export interface Point {
+    readonly x: number;
+    readonly y: number;
+}
+export interface Box {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+}
+export interface Quadratic {
+    readonly p0: Point;
+    readonly c: Point;
+    readonly p1: Point;
+}
+/** The pieces of a polyline that lie outside every box. */
+export declare function clipPolyline(points: readonly Point[], boxes: readonly Box[]): Point[][];
+/**
+ * Two elbows, leaving and arriving along the LONGER way.
+ *
+ * Out along x to the middle, across, and in along x drew the last leg of a
+ * line from the focus down to a card in a band as a horizontal run at the
+ * card's own height — through the gap between it and its neighbour, so two
+ * chips in a row read as joined by a dashed line. Where the ends are further
+ * apart vertically than across, the route leaves and arrives vertically and
+ * crosses in the gutter halfway between: a line comes down INTO a card, and
+ * never lies along the row it sits in.
+ */
+export declare function orthogonalPoints(from: Point, to: Point): Point[];
+export declare const polylineD: (runs: readonly (readonly Point[])[]) => string;
+/**
+ * A polyline with its corners rounded: each elbow becomes a short quadratic,
+ * so a road through the gutters reads as a road and not as a box drawn
+ * around whatever it went round.
+ */
+export declare function roundedPolylineD(points: readonly Point[], radius: number): string;
+/** Where a route is at parameter t, for sampling a hit corridor. */
+export declare function routePoint(route: ConnectorRoute, q: Quadratic, t: number): Point;
+/** The quadratic a route wants drawn: the scene's own for a curve, its chord for a straight line. */
+export declare function routedQuadratic(route: ConnectorRoute, q: Quadratic): Quadratic;
+/**
+ * A ROAD ALONG THE LATTICE. From altitude the ground is a 2:1 lattice and
+ * a road between two districts runs along its diagonals — one leg on each,
+ * with the elbow where they meet — so the roads lie on the same grid the
+ * districts stand on. Solving from + a·(2,1) + b·(−2,1) = to gives the two
+ * legs; a pair on one diagonal needs no elbow at all.
+ */
+export declare function latticePoints(from: Point, to: Point): Point[];
+//# sourceMappingURL=routes.d.ts.map

package/dist/routes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"routes.d.ts","sourceRoot":"","sources":["../src/routes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAcpD,MAAM,WAAW,KAAK;IACpB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;CACpB;AACD,MAAM,WAAW,GAAG;IAClB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AACD,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,EAAE,EAAE,KAAK,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,KAAK,CAAC;IAClB,QAAQ,CAAC,EAAE,EAAE,KAAK,CAAC;CACpB;AAKD,2DAA2D;AAC3D,wBAAgB,YAAY,CAAC,MAAM,EAAE,SAAS,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,CAqCvF;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,GAAG,KAAK,EAAE,CAWhE;AAKD,eAAO,MAAM,SAAS,GAAI,MAAM,SAAS,CAAC,SAAS,KAAK,EAAE,CAAC,EAAE,KAAG,MAC0C,CAAC;AAE3G;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,SAAS,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAiBjF;AAED,oEAAoE;AACpE,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,GAAG,KAAK,CAuBhF;AAED,qGAAqG;AACrG,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,EAAE,CAAC,EAAE,SAAS,GAAG,SAAS,CAG9E;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,GAAG,KAAK,EAAE,CAS7D"}

package/dist/routes.js

@@ -0,0 +1,150 @@
+const inside = (p, boxes) => boxes.some((box) => p.x > box.x && p.x < box.x + box.width && p.y > box.y && p.y < box.y + box.height);
+/** The pieces of a polyline that lie outside every box. */
+export function clipPolyline(points, boxes) {
+    const runs = [];
+    let open = [];
+    const STEPS = 48;
+    for (let i = 0; i < points.length - 1; i++) {
+        const a = points[i];
+        const b = points[i + 1];
+        let wasOut = !inside(a, boxes);
+        if (wasOut && open.length === 0)
+            open.push(a);
+        for (let s = 1; s <= STEPS; s++) {
+            const t = s / STEPS;
+            const p = { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
+            const isOut = !inside(p, boxes);
+            if (isOut === wasOut)
+                continue;
+            // Refine the crossing between the last sample and this one.
+            let lo = (s - 1) / STEPS;
+            let hi = t;
+            for (let k = 0; k < 10; k++) {
+                const mid = (lo + hi) / 2;
+                const q = { x: a.x + (b.x - a.x) * mid, y: a.y + (b.y - a.y) * mid };
+                if (!inside(q, boxes) === wasOut)
+                    lo = mid;
+                else
+                    hi = mid;
+            }
+            const at = (lo + hi) / 2;
+            const crossing = { x: a.x + (b.x - a.x) * at, y: a.y + (b.y - a.y) * at };
+            if (isOut)
+                open = [crossing];
+            else {
+                open.push(crossing);
+                if (open.length >= 2)
+                    runs.push(open);
+                open = [];
+            }
+            wasOut = isOut;
+        }
+        if (wasOut)
+            open.push(b);
+    }
+    if (open.length >= 2)
+        runs.push(open);
+    return runs;
+}
+/**
+ * Two elbows, leaving and arriving along the LONGER way.
+ *
+ * Out along x to the middle, across, and in along x drew the last leg of a
+ * line from the focus down to a card in a band as a horizontal run at the
+ * card's own height — through the gap between it and its neighbour, so two
+ * chips in a row read as joined by a dashed line. Where the ends are further
+ * apart vertically than across, the route leaves and arrives vertically and
+ * crosses in the gutter halfway between: a line comes down INTO a card, and
+ * never lies along the row it sits in.
+ */
+export function orthogonalPoints(from, to) {
+    const dx = Math.abs(to.x - from.x);
+    const dy = Math.abs(to.y - from.y);
+    if (dy > dx) {
+        if (dx < 2)
+            return [from, to];
+        const midY = (from.y + to.y) / 2;
+        return [from, { x: from.x, y: midY }, { x: to.x, y: midY }, to];
+    }
+    const midX = (from.x + to.x) / 2;
+    if (Math.abs(to.x - from.x) < 2)
+        return [from, to];
+    return [from, { x: midX, y: from.y }, { x: midX, y: to.y }, to];
+}
+// Two decimals: a path is read by a person in the inspector, and sub-pixel noise is not information.
+const at = (n) => Math.round(n * 100) / 100;
+export const polylineD = (runs) => runs.map((run) => run.map((p, i) => `${i === 0 ? "M" : "L"} ${at(p.x)} ${at(p.y)}`).join(" ")).join(" ");
+/**
+ * A polyline with its corners rounded: each elbow becomes a short quadratic,
+ * so a road through the gutters reads as a road and not as a box drawn
+ * around whatever it went round.
+ */
+export function roundedPolylineD(points, radius) {
+    if (points.length < 3)
+        return polylineD([points]);
+    const parts = [`M ${at(points[0].x)} ${at(points[0].y)}`];
+    for (let i = 1; i < points.length - 1; i++) {
+        const prev = points[i - 1];
+        const corner = points[i];
+        const next = points[i + 1];
+        const inLen = Math.hypot(corner.x - prev.x, corner.y - prev.y);
+        const outLen = Math.hypot(next.x - corner.x, next.y - corner.y);
+        const r = Math.min(radius, inLen / 2, outLen / 2);
+        const a = { x: corner.x + ((prev.x - corner.x) / (inLen || 1)) * r, y: corner.y + ((prev.y - corner.y) / (inLen || 1)) * r };
+        const b = { x: corner.x + ((next.x - corner.x) / (outLen || 1)) * r, y: corner.y + ((next.y - corner.y) / (outLen || 1)) * r };
+        parts.push(`L ${at(a.x)} ${at(a.y)} Q ${at(corner.x)} ${at(corner.y)} ${at(b.x)} ${at(b.y)}`);
+    }
+    const last = points[points.length - 1];
+    parts.push(`L ${at(last.x)} ${at(last.y)}`);
+    return parts.join(" ");
+}
+/** Where a route is at parameter t, for sampling a hit corridor. */
+export function routePoint(route, q, t) {
+    if (route === "orthogonal") {
+        const points = orthogonalPoints(q.p0, q.p1);
+        const lengths = points.slice(1).map((p, i) => Math.hypot(p.x - points[i].x, p.y - points[i].y));
+        const total = lengths.reduce((a, b) => a + b, 0) || 1;
+        let along = t * total;
+        for (let i = 0; i < lengths.length; i++) {
+            const length = lengths[i];
+            if (along <= length || i === lengths.length - 1) {
+                const u = length === 0 ? 0 : Math.min(1, along / length);
+                const a = points[i];
+                const b = points[i + 1];
+                return { x: a.x + (b.x - a.x) * u, y: a.y + (b.y - a.y) * u };
+            }
+            along -= length;
+        }
+        return q.p1;
+    }
+    const c = route === "straight" ? { x: (q.p0.x + q.p1.x) / 2, y: (q.p0.y + q.p1.y) / 2 } : q.c;
+    const a = (1 - t) * (1 - t);
+    const b = 2 * (1 - t) * t;
+    const d = t * t;
+    return { x: a * q.p0.x + b * c.x + d * q.p1.x, y: a * q.p0.y + b * c.y + d * q.p1.y };
+}
+/** The quadratic a route wants drawn: the scene's own for a curve, its chord for a straight line. */
+export function routedQuadratic(route, q) {
+    if (route !== "straight")
+        return q;
+    return { ...q, c: { x: (q.p0.x + q.p1.x) / 2, y: (q.p0.y + q.p1.y) / 2 } };
+}
+/**
+ * A ROAD ALONG THE LATTICE. From altitude the ground is a 2:1 lattice and
+ * a road between two districts runs along its diagonals — one leg on each,
+ * with the elbow where they meet — so the roads lie on the same grid the
+ * districts stand on. Solving from + a·(2,1) + b·(−2,1) = to gives the two
+ * legs; a pair on one diagonal needs no elbow at all.
+ */
+export function latticePoints(from, to) {
+    const dx = to.x - from.x;
+    const dy = to.y - from.y;
+    // Along (2,1): a; along (-2,1): b. dx = 2a − 2b, dy = a + b.
+    const a = (dx / 2 + dy) / 2;
+    const b = (dy - dx / 2) / 2;
+    if (Math.abs(a) < 1 || Math.abs(b) < 1)
+        return [from, to];
+    const elbow = { x: from.x + 2 * a, y: from.y + a };
+    return [from, elbow, to];
+}
+//# sourceMappingURL=routes.js.map

package/dist/routes.js.map

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

package/dist/scene-camera.d.ts

@@ -0,0 +1,25 @@
+import { type InterpolatedLayout, type Layout, type ViewState } from "@graview/layout";
+import { type Dispatch, type SetStateAction } from "react";
+export declare function useCameraFlights({ view, result, frame, panned, closer, screenId, setCamera, }: {
+    readonly view: ViewState;
+    /** The layout at rest, with the pan in it. */
+    readonly result: Layout;
+    /** The frame being drawn, mid-tween. */
+    readonly frame: InterpolatedLayout;
+    /** The person's pan plus the camera's offset: where the city is now. */
+    readonly panned: {
+        readonly x: number;
+        readonly y: number;
+    };
+    /** How much closer the camera has flown, when a picture was chosen from altitude. */
+    readonly closer: number;
+    /** The drive-in in this layout, if there is one: focusing it brings the camera to its plot. */
+    readonly screenId: string | null;
+    readonly setCamera: Dispatch<SetStateAction<{
+        x: number;
+        y: number;
+    }>>;
+}): {
+    readonly gliding: () => boolean;
+};
+//# sourceMappingURL=scene-camera.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scene-camera.d.ts","sourceRoot":"","sources":["../src/scene-camera.ts"],"names":[],"mappings":"AACA,OAAO,EAA6C,KAAK,kBAAkB,EAAE,KAAK,MAAM,EAAE,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAClI,OAAO,EAAqB,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAc9E,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,MAAM,EACN,KAAK,EACL,MAAM,EACN,MAAM,EACN,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,8CAA8C;IAC9C,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,wCAAwC;IACxC,QAAQ,CAAC,KAAK,EAAE,kBAAkB,CAAC;IACnC,wEAAwE;IACxE,QAAQ,CAAC,MAAM,EAAE;QAAE,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,qFAAqF;IACrF,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,+FAA+F;IAC/F,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;CACxE,GAAG;IAAE,QAAQ,CAAC,OAAO,EAAE,MAAM,OAAO,CAAA;CAAE,CA6GtC"}

package/dist/scene-camera.js

@@ -0,0 +1,130 @@
+import { toIso } from "@graview/core";
+import { cameraLimit, kindCardId, kindsOfAggregate } from "@graview/layout";
+import { useEffect, useRef } from "react";
+/*
+ * WHERE THE CAMERA GOES ON ITS OWN. The camera is not a move: its offset is
+ * derived from the focus rather than made by a hand, so it lives in the
+ * scene, added to whatever the person panned, and never in the URL. Two
+ * things fly it — a drive-in on the far side of a large city, which lights
+ * up off-screen unless the camera goes to it, and the descent from
+ * altitude, which lands in the village it left.
+ */
+/** How long the focus stands where the village stood before the camera glides to rest. */
+const GLIDE_AFTER_MS = 180;
+export function useCameraFlights({ view, result, frame, panned, closer, screenId, setCamera, }) {
+    /*
+     * THE DESCENT LANDS IN THE VILLAGE. Double-clicking a district from
+     * altitude used to fly it to the stage's centre while the rest
+     * reorganised around it — the picture rearranging rather than you coming
+     * down. The plot is the pivot now: the stack's focus is landed where the
+     * village stood, so it grows in place, and the camera then glides to
+     * rest so the world slides to meet it. Every way down — the Down
+     * control, a marquee's showing, Escape — is a change of view from
+     * outside the scene, so the scene watches the view itself: `stood`
+     * remembers where each district's plot was in the last altitude frame.
+     */
+    const stood = useRef(new Map());
+    const wasAloft = useRef(view.overview ?? false);
+    const glide = useRef(null);
+    useEffect(() => {
+        if (!view.overview || !screenId || !result.city) {
+            if (wasAloft.current && !view.overview)
+                return; // the descent effect below owns the camera on the way down
+            setCamera((current) => (current.x === 0 && current.y === 0 ? current : { x: 0, y: 0 }));
+            return;
+        }
+        const screen = result.nodes.find((node) => node.id === screenId);
+        if (!screen)
+            return;
+        /*
+         * FLOWN CLOSER, the camera centres on the whole drive-in — the
+         * billboard and the village under it — rather than only keeping the
+         * picture inside the edge; a person chose that plot, and it is what
+         * they are looking at.
+         */
+        const village = closer > 1 && screen.screenOf ? result.nodes.find((node) => node.id === kindCardId(screen.screenOf)) : undefined;
+        const want = village
+            ? {
+                x: Math.min(screen.x, village.x),
+                y: Math.min(screen.y, village.y),
+                width: Math.max(screen.x + screen.width, village.x + village.width) - Math.min(screen.x, village.x),
+                height: Math.max(screen.y + screen.height, village.y + village.height) - Math.min(screen.y, village.y),
+            }
+            : screen;
+        const inside = want.x >= 0 && want.y >= 0 && want.x + want.width <= result.width && want.y + want.height <= result.height;
+        if (inside && !village)
+            return;
+        /*
+         * THE SMALLEST MOVE THAT BRINGS THE SCREEN IN. Centring it dragged the
+         * rest of the city off the far side — six districts fit the window and
+         * four of them left it — so the camera goes only as far as it must for
+         * the screen to clear the edge, and the rest stays where it was.
+         */
+        const EDGE = 24;
+        const shift = (start, size, span) => start < EDGE ? EDGE - start : start + size > span - EDGE ? span - EDGE - (start + size) : 0;
+        // The whole offset — the person's pan plus the camera — stays inside the
+        // camera limit, so the screen can be reached and nothing is dropped off the edge.
+        const limit = cameraLimit(result);
+        const pan = view.pan ?? { x: 0, y: 0 };
+        const wantedX = village ? panned.x + (result.width / 2 - (want.x + want.width / 2)) : panned.x + shift(want.x, want.width, result.width);
+        // Centred on the drive-in — but the PICTURE is what was chosen, so when the
+        // drive-in is taller than the window the picture's top stays in and the
+        // village hangs below rather than the picture losing its head.
+        const centredY = result.height / 2 - (want.y + want.height / 2);
+        const wantedY = village
+            ? panned.y + (screen.y + centredY < EDGE ? EDGE - screen.y : centredY)
+            : panned.y + shift(want.y, want.height, result.height);
+        // Flown closer, the billboard stands above the city's extent, which the
+        // limit does not know about: the camera goes where the drive-in is.
+        setCamera({
+            x: (village ? wantedX : Math.max(-limit.x, Math.min(limit.x, wantedX))) - pan.x,
+            y: (village ? wantedY : Math.max(-limit.y, Math.min(limit.y, wantedY))) - pan.y,
+        });
+        // Only when the focus lands, or the camera flies closer: a person's own pan afterwards is theirs.
+    }, [screenId, view.overview, closer]);
+    if (frame.city) {
+        // Remembered every altitude frame: where each plot's centre is on the canvas right now.
+        const remembered = new Map();
+        for (const node of frame.nodes) {
+            if (!node.plot || Math.round(node.plane) !== 2)
+                continue;
+            const centre = toIso(node.plot.col + node.plot.side / 2, node.plot.row + node.plot.side / 2, frame.city.cell);
+            remembered.set(node.id, { x: frame.city.originX + panned.x + centre.x, y: frame.city.originY + panned.y + centre.y });
+        }
+        stood.current = remembered;
+    }
+    useEffect(() => {
+        const aloft = view.overview ?? false;
+        const descending = wasAloft.current && !aloft;
+        wasAloft.current = aloft;
+        if (aloft && glide.current) {
+            // Back up before the glide landed: the altitude camera owns the offset now.
+            clearTimeout(glide.current);
+            glide.current = null;
+        }
+        if (!descending)
+            return;
+        const kind = view.focusId ? kindsOfAggregate(view.focusId)[0] : undefined;
+        const from = kind ? stood.current.get(kindCardId(kind)) : undefined;
+        const focus = result.nodes.find((node) => node.id === view.focusId);
+        if (!from || !focus) {
+            setCamera({ x: 0, y: 0 });
+            return;
+        }
+        // Land the focus where the village stood; then let go, and the world slides to meet it.
+        setCamera({ x: from.x - (focus.x + focus.width / 2), y: from.y - (focus.y + focus.height / 2) });
+        if (glide.current)
+            clearTimeout(glide.current);
+        glide.current = setTimeout(() => {
+            glide.current = null;
+            setCamera({ x: 0, y: 0 });
+        }, GLIDE_AFTER_MS);
+        // Only when the altitude changes: a glide in progress is not restarted by what it moves.
+    }, [view.overview]);
+    useEffect(() => () => {
+        if (glide.current)
+            clearTimeout(glide.current);
+    }, []);
+    return { gliding: () => glide.current !== null };
+}
+//# sourceMappingURL=scene-camera.js.map

package/dist/scene-camera.js.map

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

package/dist/scene-hand.d.ts

@@ -0,0 +1,110 @@
+import { type ViewState } from "@graview/layout";
+import { type PointerEvent as ReactPointerEvent, type RefObject } from "react";
+import type { SceneNode } from "./scene-root.js";
+/** A district where the hand has put it, in the unpanned space a pin is stored in. */
+export interface Held {
+    readonly id: string;
+    readonly x: number;
+    readonly y: number;
+}
+/**
+ * THE DISTRICT UNDER THE HAND, placed in the scene while it is dragged —
+ * at most once a frame, since pointer events arrive faster than frames are
+ * drawn — and handed back on release to be written into the view once.
+ */
+export declare function useHeldDistrict(): {
+    held: Held | null;
+    place: (next: Held) => void;
+    release: () => Held | null;
+};
+/**
+ * THE HAND MOVES THE PICTURE; ONLY LETTING GO MOVES THE WORLD.
+ *
+ * While a hand is on it, the offset it has made is painted straight onto
+ * the world's layers as a transform, once per animation frame, outside
+ * React entirely. Letting go writes it into the view as a pan, and the
+ * transform is cleared once that has been committed, so the picture never
+ * jumps back for a frame. `settled` is told when the gesture is over — the
+ * world already where the hand left it, so nothing tweens its way there.
+ *
+ * The GPU path keeps the old road: its stage is a `layoutsubtree` canvas,
+ * and combining that with CSS transforms crashes the renderer. It is not
+ * the default path and it is not the measured one.
+ */
+export declare function useWorldShift({ stage, pan, setView, settled, }: {
+    readonly stage: RefObject<HTMLElement | null>;
+    /** The view's pan: the transform comes off when this has taken the offset. */
+    readonly pan: ViewState["pan"];
+    readonly setView: (update: (current: ViewState) => ViewState) => void;
+    readonly settled: () => void;
+}): {
+    shiftTo: (wanted: {
+        x: number;
+        y: number;
+    }, from: {
+        x: number;
+        y: number;
+    }) => void;
+    settle: () => boolean;
+    settling: RefObject<boolean>;
+    offset: () => {
+        x: number;
+        y: number;
+    };
+};
+/**
+ * THE GESTURES THEMSELVES. The threshold is what keeps a click a click:
+ * below it nothing has happened and the pointer-up is an ordinary
+ * selection; above it the gesture owns the pointer and the click that
+ * follows is swallowed.
+ */
+export declare function useSceneDrag({ view, panned, limit, panWithin, moveByTransform, setView, setDragging, noteMoved, shift, district, }: {
+    readonly view: ViewState;
+    /** The pan baked into the drawn cards: a card's pin is stored without it. */
+    readonly panned: {
+        readonly x: number;
+        readonly y: number;
+    };
+    /** How far the camera may go, for the frame as it is now. */
+    readonly limit: () => {
+        readonly x: number;
+        readonly y: number;
+    };
+    readonly panWithin: (limit: {
+        x: number;
+        y: number;
+    }, wanted: {
+        x: number;
+        y: number;
+    }) => {
+        x: number;
+        y: number;
+    };
+    /** The DOM path paints the pan as a transform; the GPU path writes the view. */
+    readonly moveByTransform: boolean;
+    readonly setView: (update: (current: ViewState) => ViewState) => void;
+    readonly setDragging: (dragging: boolean) => void;
+    readonly noteMoved: () => void;
+    readonly shift: ReturnType<typeof useWorldShift>;
+    readonly district: ReturnType<typeof useHeldDistrict>;
+}): {
+    onGroundDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
+    onCardDown: (node: SceneNode, event: ReactPointerEvent<HTMLElement>) => void;
+    onDragMove: (event: ReactPointerEvent<HTMLElement>) => void;
+    onDragUp: () => void;
+    swallow: RefObject<boolean>;
+};
+/**
+ * THE WHEEL AND THE PINCH. `zoomAbout` and `panBy` are filled in by the
+ * scene once it knows its city; the listeners call through them, so they
+ * are attached once rather than on every zoom.
+ */
+export declare function useWheelAndPinch({ stage, view, setView, }: {
+    readonly stage: RefObject<HTMLElement | null>;
+    readonly view: ViewState;
+    readonly setView: (next: ViewState) => void;
+}): {
+    zoomAbout: RefObject<(factor: number, clientX?: number, clientY?: number) => void>;
+    panBy: RefObject<(dx: number, dy: number) => void>;
+};
+//# sourceMappingURL=scene-hand.d.ts.map

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

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