@iloveagents/foundry-web-graph 0.1.0

package/dist/caption-placement.d.ts

@@ -0,0 +1,119 @@
+/**
+ * Which labels can be drawn without overprinting anything.
+ *
+ * Choosing labels by rank alone — the biggest N nodes, or "everything above
+ * some zoom" — is position-blind, and in a force layout the important nodes are
+ * exactly the ones that end up near each other. Two adjacent hubs both qualify,
+ * their captions overlap, and no amount of force tuning fixes it: it is a label
+ * placement problem, not a layout problem.
+ *
+ * So: walk the candidates in priority order and keep the ones whose rectangle
+ * is still free. Density then takes care of itself — zoomed in, few things
+ * share the viewport and nearly everything is labelled; zoomed out, collisions
+ * thin the labels down to the structure.
+ *
+ * Node captions and relationship types go through the SAME pass, competing for
+ * the same space, because they overlap each other as readily as they overlap
+ * their own kind. Captions outrank relationship types: a node's name is what
+ * you navigate by, and a `DIRECTED` you cannot read is a smaller loss than a
+ * `Metropolis` you cannot read.
+ *
+ * Pure, and works entirely in SCREEN pixels, so it needs neither the canvas nor
+ * the engine and can be tested without either.
+ */
+/** Priority order. Lower is placed first and therefore wins its space. */
+export declare const LabelTier: {
+    /**
+     * Always drawn, and reserves its space before anything else. Only for what
+     * the user has selected or is pointing at — that label is the answer to a
+     * question they just asked, and it must not lose to a bigger neighbour.
+     */
+    readonly Pinned: 0;
+    /** A search hit. Ahead of ordinary captions, but still yields to a collision. */
+    readonly Match: 1;
+    /** An ordinary node caption, ranked among its peers by weight. */
+    readonly Caption: 2;
+    /** A relationship type. Drawn only with space left over. */
+    readonly Edge: 3;
+};
+export type LabelTierValue = (typeof LabelTier)[keyof typeof LabelTier];
+export interface Rect {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+export interface LabelCandidate {
+    id: string;
+    /** The space the label will occupy, in screen pixels. */
+    rect: Rect;
+    tier: LabelTierValue;
+    /** Ranking within a tier; larger wins. Node radius, which follows degree. */
+    weight: number;
+    /**
+     * Obstacles this label may overlap — its own node's disc, or the two ends of
+     * its own edge. Without it a caption would collide with the very node it
+     * names.
+     */
+    exempt?: readonly string[];
+}
+export interface PlacementOptions {
+    /**
+     * Obstacles nothing may print over: the node discs. Keyed so a label can
+     * exempt its own.
+     */
+    obstacles?: readonly {
+        id: string;
+        rect: Rect;
+    }[];
+    /**
+     * Where the labels have to fit. Candidates outside it are dropped — an
+     * off-screen label reserving space would suppress a visible one for no one's
+     * benefit. Omit to place without regard to the viewport.
+     */
+    viewport?: {
+        width: number;
+        height: number;
+    };
+    /**
+     * Stop after considering this many candidates.
+     *
+     * The scan is quadratic in what it places, which is fine for the tens of
+     * labels that fit on a screen and not fine for a 5,000-node graph where
+     * almost every candidate would be rejected anyway.
+     */
+    limit?: number;
+    /** How far outside the viewport a label may sit and still be considered. */
+    margin?: number;
+}
+export declare function placeLabels(candidates: readonly LabelCandidate[], options?: PlacementOptions): Set<string>;
+/** The disc a node occupies — an obstacle no label may print across. */
+export declare function nodeRect(x: number, y: number, radius: number): Rect;
+/** Where a node's caption sits: centred under the node. Matches `paintNode`. */
+export declare function captionRect(x: number, y: number, radius: number, width: number, { lineHeight, gap, padX }?: {
+    lineHeight?: number | undefined;
+    gap?: number | undefined;
+    padX?: number | undefined;
+}): Rect;
+/**
+ * Where a relationship type sits: at the midpoint of the edge, rotated to
+ * follow it.
+ *
+ * Approximated by the axis-aligned box the rotated text fits inside. That is
+ * generous for a diagonal edge, which is the right way to be wrong — it drops a
+ * label that would have just fitted rather than printing one that just does
+ * not.
+ */
+export declare function edgeLabelRect(x1: number, y1: number, x2: number, y2: number, width: number, { lineHeight }?: {
+    lineHeight?: number | undefined;
+}): Rect;
+/**
+ * Label widths, measured once per string.
+ *
+ * `paintNode` sets the font in GRAPH units (`11 / globalScale`), which is a
+ * constant 11 pixels on screen at every zoom — so a label's rendered width
+ * never changes and measuring it per frame would be pure waste. Keyed by the
+ * string that will actually be drawn (already truncated), so two nodes with the
+ * same name measure once.
+ */
+export declare function createCaptionMeasurer(font?: string): (text: string) => number;

package/dist/caption-placement.js

@@ -0,0 +1,146 @@
+/**
+ * Which labels can be drawn without overprinting anything.
+ *
+ * Choosing labels by rank alone — the biggest N nodes, or "everything above
+ * some zoom" — is position-blind, and in a force layout the important nodes are
+ * exactly the ones that end up near each other. Two adjacent hubs both qualify,
+ * their captions overlap, and no amount of force tuning fixes it: it is a label
+ * placement problem, not a layout problem.
+ *
+ * So: walk the candidates in priority order and keep the ones whose rectangle
+ * is still free. Density then takes care of itself — zoomed in, few things
+ * share the viewport and nearly everything is labelled; zoomed out, collisions
+ * thin the labels down to the structure.
+ *
+ * Node captions and relationship types go through the SAME pass, competing for
+ * the same space, because they overlap each other as readily as they overlap
+ * their own kind. Captions outrank relationship types: a node's name is what
+ * you navigate by, and a `DIRECTED` you cannot read is a smaller loss than a
+ * `Metropolis` you cannot read.
+ *
+ * Pure, and works entirely in SCREEN pixels, so it needs neither the canvas nor
+ * the engine and can be tested without either.
+ */
+/** Priority order. Lower is placed first and therefore wins its space. */
+export const LabelTier = {
+    /**
+     * Always drawn, and reserves its space before anything else. Only for what
+     * the user has selected or is pointing at — that label is the answer to a
+     * question they just asked, and it must not lose to a bigger neighbour.
+     */
+    Pinned: 0,
+    /** A search hit. Ahead of ordinary captions, but still yields to a collision. */
+    Match: 1,
+    /** An ordinary node caption, ranked among its peers by weight. */
+    Caption: 2,
+    /** A relationship type. Drawn only with space left over. */
+    Edge: 3,
+};
+const overlaps = (a, b) => a.left < b.right && b.left < a.right && a.top < b.bottom && b.top < a.bottom;
+const centreX = (rect) => (rect.left + rect.right) / 2;
+const centreY = (rect) => (rect.top + rect.bottom) / 2;
+/**
+ * Order is the whole algorithm, so it must be total.
+ *
+ * Ties broken by id, deliberately: two nodes of equal degree competing for the
+ * same space would otherwise swap between frames, and a label that flickers
+ * between two names is worse than either name alone.
+ */
+function byPriority(a, b) {
+    if (a.tier !== b.tier)
+        return a.tier - b.tier;
+    if (a.weight !== b.weight)
+        return b.weight - a.weight;
+    return a.id < b.id ? -1 : a.id > b.id ? 1 : 0;
+}
+export function placeLabels(candidates, options = {}) {
+    const { obstacles = [], viewport, limit = 160, margin = 80 } = options;
+    const visible = viewport
+        ? candidates.filter((candidate) => {
+            const x = centreX(candidate.rect);
+            const y = centreY(candidate.rect);
+            return (x >= -margin &&
+                x <= viewport.width + margin &&
+                y >= -margin &&
+                y <= viewport.height + margin);
+        })
+        : candidates.slice();
+    const ordered = visible.sort(byPriority).slice(0, limit);
+    const placed = new Set();
+    const taken = obstacles.map((obstacle) => ({
+        id: obstacle.id,
+        rect: obstacle.rect,
+    }));
+    for (const candidate of ordered) {
+        const blocked = taken.some((other) => !(other.id !== undefined && candidate.exempt?.includes(other.id)) &&
+            overlaps(candidate.rect, other.rect));
+        // A pinned label is not negotiable: it is drawn, and it takes its space out
+        // of the running for everything after it.
+        if (candidate.tier !== LabelTier.Pinned && blocked)
+            continue;
+        taken.push({ rect: candidate.rect });
+        placed.add(candidate.id);
+    }
+    return placed;
+}
+/** The disc a node occupies — an obstacle no label may print across. */
+export function nodeRect(x, y, radius) {
+    return { left: x - radius, right: x + radius, top: y - radius, bottom: y + radius };
+}
+/** Where a node's caption sits: centred under the node. Matches `paintNode`. */
+export function captionRect(x, y, radius, width, { lineHeight = 14, gap = 3, padX = 3 } = {}) {
+    const half = width / 2 + padX;
+    const top = y + radius + gap;
+    return { left: x - half, right: x + half, top, bottom: top + lineHeight };
+}
+/**
+ * Where a relationship type sits: at the midpoint of the edge, rotated to
+ * follow it.
+ *
+ * Approximated by the axis-aligned box the rotated text fits inside. That is
+ * generous for a diagonal edge, which is the right way to be wrong — it drops a
+ * label that would have just fitted rather than printing one that just does
+ * not.
+ */
+export function edgeLabelRect(x1, y1, x2, y2, width, { lineHeight = 12 } = {}) {
+    const midX = (x1 + x2) / 2;
+    const midY = (y1 + y2) / 2;
+    const angle = Math.atan2(y2 - y1, x2 - x1);
+    const cos = Math.abs(Math.cos(angle));
+    const sin = Math.abs(Math.sin(angle));
+    const halfW = (width * cos + lineHeight * sin) / 2;
+    const halfH = (width * sin + lineHeight * cos) / 2;
+    return { left: midX - halfW, right: midX + halfW, top: midY - halfH, bottom: midY + halfH };
+}
+/**
+ * Label widths, measured once per string.
+ *
+ * `paintNode` sets the font in GRAPH units (`11 / globalScale`), which is a
+ * constant 11 pixels on screen at every zoom — so a label's rendered width
+ * never changes and measuring it per frame would be pure waste. Keyed by the
+ * string that will actually be drawn (already truncated), so two nodes with the
+ * same name measure once.
+ */
+export function createCaptionMeasurer(font = "11px ui-sans-serif, system-ui, sans-serif") {
+    const widths = new Map();
+    let ctx;
+    return (text) => {
+        const cached = widths.get(text);
+        if (cached !== undefined)
+            return cached;
+        if (ctx === undefined) {
+            // Detached: this measures text, it never draws. `getContext` returns null
+            // in a jsdom without a canvas implementation, which is why the estimate
+            // below exists rather than a crash.
+            ctx =
+                typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
+            if (ctx)
+                ctx.font = font;
+        }
+        // Only ever used where there is no canvas to ask, and a placement that is
+        // slightly wrong beats no labels at all.
+        const width = ctx ? ctx.measureText(text).width : text.length * 6;
+        widths.set(text, width);
+        return width;
+    };
+}

package/dist/graph-canvas-paint.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Canvas painting for {@link GraphView}.
+ *
+ * Pure functions over a 2D context, deliberately separate from the React
+ * component: painting is the part that is easy to get wrong at odd zoom levels
+ * and impossible to inspect from a test that only renders JSX.
+ *
+ * Everything here works in GRAPH coordinates — force-graph has already applied
+ * the pan/zoom transform. `globalScale` is the current zoom, needed to keep
+ * text and stroke widths a constant size on screen rather than growing with
+ * the graph.
+ */
+import type { NodeStyle } from "./use-graph-styling.js";
+import type { GraphTheme } from "./theme.js";
+/** A node after force-graph has assigned it a position. */
+export interface PositionedNode {
+    id?: string | number;
+    x?: number;
+    y?: number;
+}
+export interface NodePaintState {
+    style: NodeStyle;
+    /** Draw the selection ring. */
+    selected: boolean;
+    /** Draw the hover ring. */
+    hovered: boolean;
+    /**
+     * Dim the node: a search is active and this node is not a match. Applied via
+     * `globalAlpha` rather than by rewriting the colour string, so it works for
+     * any colour format the host's tokens happen to use (oklch, hsl, hex).
+     */
+    dimmed: boolean;
+    /** The user pinned this node — draw the pin marker. */
+    pinned: boolean;
+    /**
+     * Draw the caption.
+     *
+     * Decided per node rather than by one global zoom threshold. A single
+     * threshold forces a choice between two bad outcomes: label everything and
+     * watch dense neighbourhoods turn into overlapping scratch, or label nothing
+     * and show an anonymous constellation. Budgeting keeps the graph readable at
+     * every zoom — the nodes that carry the structure stay named, the rest
+     * appear as you zoom in.
+     */
+    showCaption: boolean;
+}
+/**
+ * Which nodes keep their caption when zoomed out.
+ *
+ * Ranked by radius, which is already a function of degree — so the budget
+ * spends itself on the hubs, the nodes someone is actually orienting by.
+ */
+export declare function captionBudget(nodes: readonly {
+    id?: string | number;
+}[], radiusOf: (node: {
+    id?: string | number;
+}) => number, limit?: number): Set<string>;
+/**
+ * At or above this zoom there is room for every caption, so draw them all.
+ * Below it, only the nodes in the caption budget get one (see
+ * `captionBudget`), plus whatever the user is pointing at or searching for.
+ */
+export declare const FULL_CAPTION_SCALE = 0.75;
+export declare function truncateCaption(text: string, max?: number): string;
+/**
+ * Paint one node: filled disc, contrast ring, optional selection/hover ring,
+ * pin marker, and the caption underneath.
+ */
+export declare function paintNode(node: PositionedNode, state: NodePaintState, theme: GraphTheme, ctx: CanvasRenderingContext2D, globalScale: number): void;
+/**
+ * Paint the hit-test mask for a node.
+ *
+ * force-graph renders this to an off-screen colour-indexed buffer to decide
+ * what the pointer is over. It must cover the same area the visible node does,
+ * or the node's clickable region drifts away from the circle the user sees.
+ */
+export declare function paintNodePointerArea(node: PositionedNode, color: string, style: NodeStyle, ctx: CanvasRenderingContext2D): void;
+export interface PositionedLink {
+    source?: PositionedNode | string | number;
+    target?: PositionedNode | string | number;
+}
+/**
+ * Draw the relationship type at the midpoint of an edge.
+ *
+ * Runs in force-graph's `"after"` link mode, so the default line and arrow are
+ * already painted; this only adds the label. Text is rotated to follow the
+ * edge and flipped when the edge points leftwards, so labels never read
+ * upside-down.
+ */
+export declare function paintEdgeLabel(link: PositionedLink, label: string, theme: GraphTheme, ctx: CanvasRenderingContext2D, globalScale: number): void;

package/dist/graph-canvas-paint.js

@@ -0,0 +1,186 @@
+/**
+ * Canvas painting for {@link GraphView}.
+ *
+ * Pure functions over a 2D context, deliberately separate from the React
+ * component: painting is the part that is easy to get wrong at odd zoom levels
+ * and impossible to inspect from a test that only renders JSX.
+ *
+ * Everything here works in GRAPH coordinates — force-graph has already applied
+ * the pan/zoom transform. `globalScale` is the current zoom, needed to keep
+ * text and stroke widths a constant size on screen rather than growing with
+ * the graph.
+ */
+/**
+ * Which nodes keep their caption when zoomed out.
+ *
+ * Ranked by radius, which is already a function of degree — so the budget
+ * spends itself on the hubs, the nodes someone is actually orienting by.
+ */
+export function captionBudget(nodes, radiusOf, limit = 14) {
+    if (nodes.length <= limit)
+        return new Set(nodes.map((node) => String(node.id)));
+    return new Set([...nodes]
+        .sort((a, b) => radiusOf(b) - radiusOf(a))
+        .slice(0, limit)
+        .map((node) => String(node.id)));
+}
+/**
+ * At or above this zoom there is room for every caption, so draw them all.
+ * Below it, only the nodes in the caption budget get one (see
+ * `captionBudget`), plus whatever the user is pointing at or searching for.
+ */
+export const FULL_CAPTION_SCALE = 0.75;
+const MAX_CAPTION_CHARS = 22;
+export function truncateCaption(text, max = MAX_CAPTION_CHARS) {
+    if (text.length <= max)
+        return text;
+    return `${text.slice(0, max - 1)}…`;
+}
+/**
+ * Paint one node: filled disc, contrast ring, optional selection/hover ring,
+ * pin marker, and the caption underneath.
+ */
+export function paintNode(node, state, theme, ctx, globalScale) {
+    const { x, y } = node;
+    if (typeof x !== "number" || typeof y !== "number")
+        return;
+    const { style, selected, hovered, dimmed, pinned, showCaption } = state;
+    const r = style.radius;
+    ctx.save();
+    if (dimmed)
+        ctx.globalAlpha = 0.15;
+    ctx.beginPath();
+    ctx.arc(x, y, r, 0, 2 * Math.PI);
+    ctx.fillStyle = style.color;
+    ctx.fill();
+    // A hairline in the background colour separates overlapping nodes of the
+    // same label, which otherwise merge into one blob at low zoom.
+    ctx.lineWidth = 0.6 / globalScale;
+    ctx.strokeStyle = theme.background;
+    ctx.stroke();
+    if (selected || hovered) {
+        ctx.beginPath();
+        ctx.arc(x, y, r + (selected ? 3 : 2), 0, 2 * Math.PI);
+        ctx.lineWidth = (selected ? 2 : 1.5) / globalScale;
+        ctx.strokeStyle = selected ? theme.ring : theme.mutedForeground;
+        ctx.stroke();
+    }
+    if (pinned) {
+        ctx.beginPath();
+        ctx.arc(x + r * 0.78, y - r * 0.78, Math.max(1.2, r * 0.28), 0, 2 * Math.PI);
+        ctx.fillStyle = theme.foreground;
+        ctx.fill();
+    }
+    if (showCaption && style.caption) {
+        // Constant size on screen: dividing by the zoom keeps the label legible
+        // when zoomed out and stops it ballooning when zoomed in.
+        const fontSize = 11 / globalScale;
+        const text = truncateCaption(style.caption);
+        ctx.font = `${fontSize}px ui-sans-serif, system-ui, sans-serif`;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "top";
+        // Knock out a pill behind the text. Captions in a force layout overlap
+        // each other and the edges constantly; without a backing plate the
+        // overlaps turn into unreadable pencil-scratch, and no amount of layout
+        // tuning prevents it in a dense neighbourhood.
+        const padX = 3 / globalScale;
+        const padY = 1.5 / globalScale;
+        const width = ctx.measureText(text).width;
+        const top = y + r + 3 / globalScale;
+        ctx.globalAlpha *= 0.82;
+        ctx.fillStyle = theme.background;
+        ctx.fillRect(x - width / 2 - padX, top - padY, width + padX * 2, fontSize + padY * 2);
+        ctx.globalAlpha = dimmed ? 0.15 : 1;
+        ctx.fillStyle = selected || hovered ? theme.foreground : theme.mutedForeground;
+        ctx.fillText(text, x, top);
+    }
+    ctx.restore();
+}
+/**
+ * Paint the hit-test mask for a node.
+ *
+ * force-graph renders this to an off-screen colour-indexed buffer to decide
+ * what the pointer is over. It must cover the same area the visible node does,
+ * or the node's clickable region drifts away from the circle the user sees.
+ */
+export function paintNodePointerArea(node, color, style, ctx) {
+    const { x, y } = node;
+    if (typeof x !== "number" || typeof y !== "number")
+        return;
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.arc(x, y, style.radius + 3, 0, 2 * Math.PI);
+    ctx.fill();
+}
+const asPositioned = (end) => typeof end === "object" && end !== null ? end : null;
+/**
+ * How much longer than its label an edge must be before the label is drawn.
+ *
+ * Room at both ends, so the text stops short of the two nodes instead of
+ * running under them.
+ */
+const EDGE_LABEL_FIT = 1.6;
+/**
+ * Draw the relationship type at the midpoint of an edge.
+ *
+ * Runs in force-graph's `"after"` link mode, so the default line and arrow are
+ * already painted; this only adds the label. Text is rotated to follow the
+ * edge and flipped when the edge points leftwards, so labels never read
+ * upside-down.
+ */
+export function paintEdgeLabel(link, label, theme, ctx, globalScale) {
+    if (!label)
+        return;
+    const source = asPositioned(link.source);
+    const target = asPositioned(link.target);
+    if (!source || !target)
+        return;
+    const { x: x1, y: y1 } = source;
+    const { x: x2, y: y2 } = target;
+    if (typeof x1 !== "number" ||
+        typeof y1 !== "number" ||
+        typeof x2 !== "number" ||
+        typeof y2 !== "number") {
+        return;
+    }
+    const midX = (x1 + x2) / 2;
+    const midY = (y1 + y2) / 2;
+    let angle = Math.atan2(y2 - y1, x2 - x1);
+    if (angle > Math.PI / 2 || angle < -Math.PI / 2)
+        angle += Math.PI;
+    // Divide by the zoom and DO NOT floor it in graph units. A floor here is a
+    // minimum in GRAPH space, which the zoom then multiplies — so on a small
+    // graph, where zoom-to-fit lands at a high scale, the label renders enormous.
+    const fontSize = 9 / globalScale;
+    ctx.save();
+    ctx.font = `${fontSize}px ui-sans-serif, system-ui, sans-serif`;
+    // Does the label fit ON the edge, as opposed to merely not colliding with
+    // anything? Placement decides the second question; this is the first, and it
+    // is the one a rectangle cannot answer — a long word across a short edge
+    // clears its neighbours and still reads as belonging to neither end.
+    const edgeLength = Math.hypot(x2 - x1, y2 - y1);
+    if (ctx.measureText(label).width * EDGE_LABEL_FIT > edgeLength) {
+        ctx.restore();
+        return;
+    }
+    ctx.translate(midX, midY);
+    ctx.rotate(angle);
+    ctx.textAlign = "center";
+    ctx.textBaseline = "bottom";
+    // A halo, not a knockout box.
+    //
+    // Filling a rectangle behind the label reads as the relationship line being
+    // BROKEN: the gap is the same colour as the canvas and sits exactly where
+    // the eye is following the line. Stroking the glyphs in the background
+    // colour keeps the text readable over the line and over anything crossing
+    // it, and the line stays continuous.
+    const offset = 1.5 / globalScale;
+    ctx.lineWidth = 3 / globalScale;
+    ctx.strokeStyle = theme.background;
+    ctx.lineJoin = "round";
+    ctx.miterLimit = 2;
+    ctx.strokeText(label, 0, -offset);
+    ctx.fillStyle = theme.mutedForeground;
+    ctx.fillText(label, 0, -offset);
+    ctx.restore();
+}

package/dist/graph-canvas.d.ts

@@ -0,0 +1,49 @@
+import { type Ref } from "react";
+import { type GraphNode } from "./model.js";
+import type { GraphModel } from "./use-graph-model.js";
+import type { GraphStyleMap } from "./use-graph-styling.js";
+import type { GraphTheme } from "./theme.js";
+import type { GraphViewState } from "./use-graph-view-state.js";
+/** Imperative controls the host can drive through a ref. */
+export interface GraphCanvasHandle {
+    /** Frame the whole graph. Padding is not a parameter: the fit has to
+     *  account for the details drawer, which only the canvas knows about. */
+    zoomToFit: (durationMs?: number) => void;
+    /** Bring a node to the centre of the VISIBLE area — see `insetRight`. */
+    centerOn: (nodeId: string, durationMs?: number) => void;
+    /**
+     * Bring a node into view with the SMALLEST pan that does it, and not at all
+     * if it is already comfortably visible.
+     */
+    reveal: (nodeId: string, durationMs?: number) => void;
+    /** Re-run the force simulation from a hot state — the "untangle it" action. */
+    reheat: () => void;
+}
+export interface GraphCanvasProps {
+    model: GraphModel;
+    styleMap: GraphStyleMap;
+    theme: GraphTheme;
+    state: GraphViewState;
+    width: number;
+    height: number;
+    onExpandNode?: (node: GraphNode) => void;
+    /**
+     * Pixels of the canvas's right edge covered by an overlay (the details
+     * drawer). Framing has to know: a node centred under the drawer is a node
+     * the user selected and then could not see.
+     */
+    insetRight?: number;
+    handleRef?: Ref<GraphCanvasHandle>;
+    /** Skip the settle animation for `prefers-reduced-motion`. */
+    reducedMotion?: boolean;
+}
+/**
+ * The force-directed canvas.
+ *
+ * The ONLY module in this package that imports `react-force-graph-2d`, so the
+ * engine can be code-split away from the data model and the surrounding chrome
+ * (a guard test enforces the boundary). Everything it needs is passed in
+ * already computed — it owns no state of its own beyond the engine handle.
+ */
+export declare function GraphCanvas({ model, styleMap, theme, state, width, height, onExpandNode, insetRight, handleRef, reducedMotion, }: GraphCanvasProps): import("react/jsx-runtime").JSX.Element;
+export default GraphCanvas;