@fusion.dev/helix-graph 0.120.0 → 0.122.0

package/dist/connect-graph/stencil.js

@@ -0,0 +1,199 @@
+import { fieldFromInside, fieldFromPath } from './shape-field.js';
+const PROBE = { flat: 64, solid: 32 };
+const SHELL = 0.04;
+const WAVE = 0.07;
+const seeded = (seed) => {
+    let state = seed >>> 0 || 1;
+    return () => {
+        state = (Math.imul(state, 1664525) + 1013904223) >>> 0;
+        return state / 4294967296;
+    };
+};
+const fields = new WeakMap();
+export const fieldOf = (stencil) => {
+    if ('distance' in stencil) {
+        return stencil;
+    }
+    const made = fields.get(stencil);
+    if (made) {
+        return made;
+    }
+    const field = 'path' in stencil
+        ? fieldFromPath(stencil.path, stencil.width, stencil.height)
+        : fieldFromInside((x, y) => stencil.inside(x, y), stencil);
+    fields.set(stencil, field);
+    return field;
+};
+export const placesIn = (field, count, { place = 'fill', shell = SHELL } = {}) => {
+    const solid = field.depth > 0;
+    const { depth, height, width } = field;
+    const thickness = shell * Math.max(width, height, depth);
+    const takes = (x, y, z) => {
+        const distance = field.distance(x, y, z);
+        return distance < 0 && (place === 'fill' || distance > -thickness);
+    };
+    const probe = solid ? PROBE.solid : PROBE.flat;
+    let taken = 0;
+    for (let layer = 0; layer < (solid ? probe : 1); layer++) {
+        for (let row = 0; row < probe; row++) {
+            for (let column = 0; column < probe; column++) {
+                if (takes(((column + 0.5) / probe) * width, ((row + 0.5) / probe) * height, solid ? ((layer + 0.5) / probe) * depth : 0)) {
+                    taken += 1;
+                }
+            }
+        }
+    }
+    if (count === 0 || taken === 0) {
+        return [];
+    }
+    const random = seeded(count);
+    const room = (taken / probe ** (solid ? 3 : 2)) * width * height * (solid ? depth : 1);
+    let step = (room / count) ** (1 / (solid ? 3 : 2));
+    for (let tries = 0; tries < 8; tries++) {
+        const places = [];
+        const layers = solid ? Math.ceil(depth / step) : 1;
+        for (let layer = 0; layer < layers; layer++) {
+            for (let y = step / 2; y < height; y += step) {
+                for (let x = step / 2; x < width; x += step) {
+                    const place = {
+                        x: x + (random() - 0.5) * step * 0.8,
+                        y: y + (random() - 0.5) * step * 0.8,
+                        ...(solid ? { z: (layer + 0.5 + (random() - 0.5) * 0.8) * step } : {}),
+                    };
+                    if (takes(place.x, place.y, place.z ?? 0)) {
+                        places.push(place);
+                    }
+                }
+            }
+        }
+        if (places.length >= count) {
+            for (let at = places.length - 1; at > 0; at--) {
+                const other = Math.floor(random() * (at + 1));
+                [places[at], places[other]] = [places[other], places[at]];
+            }
+            return places.slice(0, count);
+        }
+        step *= (places.length / count) ** (1 / (solid ? 3 : 2)) * 0.97 || 0.5;
+    }
+    return [];
+};
+const nested = (items, keys) => {
+    const [key, ...rest] = keys;
+    if (!key) {
+        return items;
+    }
+    const sorted = [...items].sort((one, other) => key(one) - key(other));
+    if (rest.length === 0) {
+        return sorted;
+    }
+    const slice = Math.ceil(items.length ** (rest.length / keys.length));
+    const out = [];
+    for (let from = 0; from < sorted.length; from += slice) {
+        out.push(...nested(sorted.slice(from, from + slice), rest));
+    }
+    return out;
+};
+export const fitToStencil = (positions, stencil) => {
+    const notes = [...positions].map(([id, at]) => ({ at, id }));
+    if (notes.length === 0) {
+        return new Map();
+    }
+    const field = fieldOf(stencil);
+    const places = placesIn(field, notes.length, {
+        place: stencil.place ?? 'fill',
+        shell: stencil.shell ?? SHELL,
+    });
+    if (places.length < notes.length) {
+        return new Map(positions);
+    }
+    const solid = field.depth > 0;
+    const low = {
+        x: Number.POSITIVE_INFINITY,
+        y: Number.POSITIVE_INFINITY,
+        z: Number.POSITIVE_INFINITY,
+    };
+    const high = {
+        x: Number.NEGATIVE_INFINITY,
+        y: Number.NEGATIVE_INFINITY,
+        z: Number.NEGATIVE_INFINITY,
+    };
+    for (const { at } of notes) {
+        for (const axis of ['x', 'y', 'z']) {
+            const value = at[axis] ?? 0;
+            low[axis] = Math.min(low[axis], value);
+            high[axis] = Math.max(high[axis], value);
+        }
+    }
+    const { depth, height, width } = field;
+    const scale = Math.max(high.x - low.x, high.y - low.y, solid ? high.z - low.z : 0, 1) /
+        Math.max(width, height, depth);
+    const middle = { x: (low.x + high.x) / 2, y: (low.y + high.y) / 2, z: (low.z + high.z) / 2 };
+    const spots = places.map((place) => {
+        const z = place.z ?? depth / 2;
+        return {
+            across: place.x + WAVE * width * Math.sin((place.y / height) * Math.PI * 3 + 1.3),
+            at: {
+                x: middle.x + (place.x - width / 2) * scale,
+                y: middle.y - (place.y - height / 2) * scale,
+                ...(solid ? { z: middle.z + (z - depth / 2) * scale } : {}),
+            },
+            down: -place.y + WAVE * height * Math.sin((place.x / width) * Math.PI * 3 + 0.4),
+        };
+    });
+    const fitted = new Map();
+    if (solid) {
+        const surface = (stencil.place ?? 'fill') === 'surface';
+        const way = (point) => {
+            if (!surface) {
+                return point;
+            }
+            const x = point.x - middle.x;
+            const y = point.y - middle.y;
+            const z = (point.z ?? 0) - middle.z;
+            const length = Math.hypot(x, y, z) || 1;
+            return { x: x / length, y: y / length, z: z / length };
+        };
+        const widest = (points) => {
+            let best = 'x';
+            let spread = Number.NEGATIVE_INFINITY;
+            for (const axis of ['x', 'y', 'z']) {
+                let low = Number.POSITIVE_INFINITY;
+                let high = Number.NEGATIVE_INFINITY;
+                for (const point of points) {
+                    const value = point[axis] ?? 0;
+                    low = Math.min(low, value);
+                    high = Math.max(high, value);
+                }
+                if (high - low > spread) {
+                    spread = high - low;
+                    best = axis;
+                }
+            }
+            return best;
+        };
+        const halve = (ours, theirs) => {
+            if (ours.length === 1) {
+                fitted.set(ours[0].id, theirs[0].at);
+                return;
+            }
+            if (ours.length === 0) {
+                return;
+            }
+            const mine = widest(ours.map((note) => note.key));
+            const yours = widest(theirs.map((spot) => spot.key));
+            ours.sort((one, other) => (one.key[mine] ?? 0) - (other.key[mine] ?? 0));
+            theirs.sort((one, other) => (one.key[yours] ?? 0) - (other.key[yours] ?? 0));
+            const half = Math.floor(ours.length / 2);
+            halve(ours.slice(0, half), theirs.slice(0, half));
+            halve(ours.slice(half), theirs.slice(half));
+        };
+        halve(notes.map((note) => ({ ...note, key: way(note.at) })), spots.map((spot) => ({ at: spot.at, key: way(spot.at) })));
+        return fitted;
+    }
+    const ours = nested(notes, [(note) => note.at.x, (note) => note.at.y]);
+    const theirs = nested(spots, [(spot) => spot.across, (spot) => spot.down]);
+    ours.forEach((note, at) => {
+        fitted.set(note.id, theirs[at].at);
+    });
+    return fitted;
+};

package/dist/cosmos/cosmos-driver.d.ts

@@ -0,0 +1,67 @@
+import type { GraphDriver } from '../connect-graph/connect-graph.js';
+import type { NodeLook } from '../connect-graph/looks.js';
+/** A cosmos.gl graph, as far as the driver calls it. */
+export interface CosmosGraph {
+    fitView(duration?: number, padding?: number): void;
+    fitViewByPointIndices(indices: number[], duration?: number, padding?: number): void;
+    getPointPositions(): number[];
+    getTrackedPointPositionsMap(): ReadonlyMap<number, [number, number]>;
+    getZoomLevel(): number;
+    readonly isReady: boolean;
+    readonly ready: Promise<void>;
+    pause(): void;
+    render(simulationAlpha?: number, transitionDuration?: number): void;
+    screenToSpacePosition(screenPosition: [number, number]): [number, number];
+    setConfigPartial(config: Record<string, unknown>): void;
+    setLinkColors(linkColors: Float32Array): void;
+    setLinks(links: Float32Array): void;
+    setLinkWidths(linkWidths: Float32Array): void;
+    setClusterPositions(clusterPositions: (number | undefined)[]): void;
+    setPinnedPoints(pinnedIndices: number[] | null): void;
+    setPointClusters(pointClusters: (number | undefined)[]): void;
+    setPointColors(pointColors: Float32Array): void;
+    setPointPositions(pointPositions: Float32Array, dontRescale?: boolean): void;
+    setPointShapes(pointShapes: Float32Array): void;
+    setPointSizes(pointSizes: Float32Array): void;
+    setZoomLevel(value: number, duration?: number): void;
+    setZoomTransformByPointPositions(positions: Float32Array, duration?: number, scale?: number): void;
+    spaceToScreenPosition(spacePosition: [number, number]): [number, number];
+    spaceToScreenRadius(spaceRadius: number): number;
+    start(alpha?: number): void;
+    trackPointPositionsByIndices(indices: number[]): void;
+    zoomToPointByIndex(index: number, duration?: number, scale?: number, canZoomOut?: boolean): void;
+}
+/** How the cosmos.gl driver behaves where the page does not say. */
+export interface CosmosDriverOptions {
+    /** Whether each group's name is drawn over its notes. On by default. */
+    groupLabels?: boolean | undefined;
+    /**
+     * The longest a layout runs, in milliseconds, settled or not. 15 seconds by
+     * default, past where twenty thousand notes settle on a laptop's GPU.
+     */
+    layoutLimit?: number | undefined;
+    /** A note's shape where it does not say: `circle` by default, `square` or `diamond`. */
+    shape?: NodeLook['shape'];
+    /** The size of cosmos.gl's space, as its own `spaceSize` says. 4096 by default. */
+    spaceSize?: number | undefined;
+}
+/**
+ * Drives cosmos.gl for a Graph frame: the layout and the drawing both run on
+ * the GPU, which is the renderer to reach for past fifty thousand notes. Make
+ * the graph in a box inside the frame and pass both here, and
+ * `connectGraph` fills it:
+ *
+ * ```js
+ * const graph = new Graph(box, { enableSimulation: true })
+ * connectGraph(frame, cosmosDriver(graph, box))
+ * ```
+ *
+ * **cosmos.gl draws notes with its own shaders**, so a note's shape is
+ * honored and its `material` and `emphasis` are not, and it names nothing:
+ * the driver names the hovered note, the selected one and its neighbors, and
+ * each group, over the drawing, as the Sigma driver does.
+ *
+ * **It is `@cosmos.gl/graph`, which is MIT**, and not Cosmograph, which is
+ * licensed for noncommercial use only.
+ */
+export declare const cosmosDriver: (graph: CosmosGraph, container: HTMLElement, options?: CosmosDriverOptions) => GraphDriver;

package/dist/cosmos/cosmos-driver.js

@@ -0,0 +1,419 @@
+import { gesturesHeld, groupsOver, namesOver, signalsOver, } from '../overlay/overlay.js';
+const SHAPES = { circle: 0, diamond: 3, ring: 0, square: 1 };
+const STEP = 250;
+const FAINT = 0.16;
+const MORPH = 1400;
+const ZOOM = 1.5;
+const SAMPLE = 24;
+const pixels = (size) => 0.5 * (1.6 + 1.35 * Math.max(size, 0));
+const CLUSTER = 0.1;
+const FOLLOW = 1000;
+const PADDING = 0.08;
+const channels = (color, alpha = 1) => {
+    const [red = 128, green = 128, blue = 128] = color.match(/[\d.]+/g)?.map(Number) ?? [];
+    return [red / 255, green / 255, blue / 255, alpha];
+};
+export const cosmosDriver = (graph, container, options = {}) => {
+    let ids = [];
+    let index = new Map();
+    let drawnNow = new Map();
+    let links = [];
+    let sizes = [];
+    let looks;
+    let hovered;
+    let selected;
+    let near = new Set();
+    let groupSample = [];
+    let following = new Set();
+    let moved = false;
+    let stopped = false;
+    let uploaded = 0;
+    const live = () => graph.isReady && uploaded > 0 && !stopped;
+    let clustered = [];
+    const space = options.spaceSize ?? 4096;
+    let scale = 1;
+    const toSpace = (point) => [
+        space / 2 + point.x * scale,
+        space / 2 + point.y * scale,
+    ];
+    const fromSpace = (x, y) => ({
+        x: (x - space / 2) / scale,
+        y: (y - space / 2) / scale,
+    });
+    const follow = (extra = []) => {
+        const next = new Set(groupSample);
+        for (const id of [selected, ...near]) {
+            const at = id === undefined ? undefined : index.get(id);
+            if (at !== undefined) {
+                next.add(at);
+            }
+        }
+        if (hovered !== undefined) {
+            next.add(hovered);
+        }
+        for (const at of extra) {
+            next.add(at);
+        }
+        if (next.size !== following.size || [...next].some((at) => !following.has(at))) {
+            following = next;
+            graph.trackPointPositionsByIndices([...next]);
+        }
+    };
+    let tracked = new Map();
+    let trackedAt = Number.NEGATIVE_INFINITY;
+    const positionsNow = () => {
+        const now = performance.now();
+        if (now - trackedAt > 8 && live()) {
+            tracked = graph.getTrackedPointPositionsMap();
+            trackedAt = now;
+        }
+        return tracked;
+    };
+    const onScreen = (id) => {
+        const at = index.get(id);
+        const point = at === undefined ? undefined : positionsNow().get(at);
+        if (!point || at === undefined) {
+            return undefined;
+        }
+        const [x, y] = graph.spaceToScreenPosition(point);
+        return { radius: (sizes[at] ?? 8) / 2, x, y };
+    };
+    const held = gesturesHeld(container);
+    const signals = signalsOver(container, onScreen);
+    const groups = groupsOver(container, onScreen);
+    const names = namesOver(container, onScreen);
+    const drawNames = () => {
+        const lit = hovered === undefined ? undefined : ids[hovered];
+        const shown = [...new Set([selected, lit, ...near])].flatMap((id) => id === undefined
+            ? []
+            : [{ id, name: drawnNow.get(id)?.label ?? id, strong: id === selected || id === lit }]);
+        names.draw(looks, shown);
+    };
+    const redraw = () => {
+        drawNames();
+        groups.draw();
+    };
+    const flatNow = () => live()
+        ? graph.getPointPositions()
+        : ids.flatMap((id) => toSpace(drawnNow.get(id) ?? { x: 0, y: 0 }));
+    const fitAll = (duration) => {
+        if (stopped) {
+            return;
+        }
+        if (!graph.isReady) {
+            void graph.ready.then(() => requestAnimationFrame(() => fitAll(duration)));
+            return;
+        }
+        if (!moved && live()) {
+            graph.fitView(duration, PADDING);
+            clearTimeout(overviewing);
+            overviewing = setTimeout(() => {
+                overview = graph.getZoomLevel();
+                grow();
+            }, duration + 20);
+        }
+    };
+    let overview = 0;
+    let overviewing;
+    let grown = 1;
+    const grow = () => {
+        const by = overview > 0 ? Math.min(Math.max(Math.sqrt(graph.getZoomLevel() / overview), 0.7), 2.4) : 1;
+        if (Math.abs(by - grown) > 0.01) {
+            grown = by;
+            graph.setConfigPartial({ pointSizeScale: by });
+            if (Math.abs(clarity() - painted) > 0.04) {
+                paintLinks();
+                graph.render();
+            }
+        }
+    };
+    const clarity = () => FAINT + (1 - FAINT) * Math.min(Math.max((grown - 1) / 0.8, 0), 1);
+    let painted = 1;
+    const paintLinks = () => {
+        if (!looks) {
+            return;
+        }
+        painted = clarity();
+        const linkColors = new Float32Array(links.length * 4);
+        const widths = new Float32Array(links.length);
+        const lit = hovered === undefined ? undefined : ids[hovered];
+        links.forEach((link, at) => {
+            const look = looks.link(link.source, link.target);
+            const touches = lit !== undefined && (link.source === lit || link.target === lit);
+            const whole = look.raised || touches;
+            linkColors.set(channels(touches ? looks.node(lit).color : look.color, look.hidden ? 0 : whole ? 1 : painted), at * 4);
+            widths[at] = whole ? 1.6 : 0.8;
+        });
+        graph.setLinkColors(linkColors);
+        graph.setLinkWidths(widths);
+    };
+    const paint = (transition = 0) => {
+        if (!looks) {
+            return;
+        }
+        const colors = new Float32Array(ids.length * 4);
+        const drawn = new Float32Array(ids.length);
+        const shapes = new Float32Array(ids.length);
+        selected = undefined;
+        near = new Set();
+        ids.forEach((id, at) => {
+            const look = looks.node(id);
+            const weight = Math.min(Math.max(((drawnNow.get(id)?.size ?? 1) - 1) / 6, 0), 1);
+            const alpha = look.selected || look.raised ? 1 : 0.5 + 0.5 * weight;
+            colors.set(channels(look.color, look.hidden ? 0 : alpha), at * 4);
+            drawn[at] = (sizes[at] ?? 8) * (look.selected ? 1.5 : look.raised ? 1.25 : 1);
+            shapes[at] = SHAPES[look.shape ?? options.shape ?? 'circle'];
+            if (look.selected) {
+                selected = id;
+            }
+            else if (look.raised) {
+                near.add(id);
+            }
+        });
+        graph.setPointColors(colors);
+        graph.setPointSizes(drawn);
+        graph.setPointShapes(shapes);
+        paintLinks();
+        const focused = selected === undefined ? undefined : index.get(selected);
+        graph.setConfigPartial({
+            focusedPointIndex: focused,
+            focusedPointRingColor: selected === undefined ? undefined : channels(looks.node(selected).color),
+            hoveredPointRingColor: channels(looks.ink, 0.6),
+        });
+        follow();
+        if (transition > 0) {
+            graph.render(undefined, transition);
+        }
+        else {
+            graph.render();
+        }
+        redraw();
+    };
+    const load = (nodes, next, positions, transition = 0) => {
+        ids = nodes.map((node) => node.id);
+        index = new Map(ids.map((id, at) => [id, at]));
+        drawnNow = new Map(nodes.map((node) => [node.id, node]));
+        sizes = nodes.map((node) => pixels(node.size));
+        links = next.filter((link) => index.has(link.source) && index.has(link.target));
+        const pairs = new Float32Array(links.length * 2);
+        links.forEach((link, at) => {
+            pairs[at * 2] = index.get(link.source);
+            pairs[at * 2 + 1] = index.get(link.target);
+        });
+        graph.setPointPositions(positions, true);
+        graph.setLinks(pairs);
+        paint(transition);
+        uploaded = 0;
+        if (graph.isReady) {
+            uploaded = ids.length;
+        }
+        else {
+            void graph.ready.then(() => {
+                uploaded = ids.length;
+            });
+        }
+    };
+    graph.setConfigPartial({
+        backgroundColor: [0, 0, 0, 0],
+        onPointMouseOut: () => {
+            hovered = undefined;
+            paint();
+        },
+        onPointMouseOver: (at) => {
+            hovered = at;
+            paint();
+        },
+        onSimulationTick: redraw,
+        onTransition: redraw,
+        onZoom: () => {
+            grow();
+            redraw();
+        },
+        onZoomStart: (_, userDriven) => {
+            moved ||= userDriven;
+        },
+        simulationDecay: 600,
+        simulationGravity: 1.5,
+        simulationLinkDistance: 30,
+        simulationLinkSpring: 0.15,
+        simulationRepulsion: 30,
+        spaceSize: space,
+    });
+    return {
+        center: (id, animate) => {
+            const at = index.get(id);
+            if (at !== undefined) {
+                graph.zoomToPointByIndex(at, animate ? STEP * 2 : 0, graph.getZoomLevel(), true);
+            }
+        },
+        draw: ({ links: next, nodes }) => {
+            const reach = Math.max(1, ...nodes.map((node) => Math.max(Math.abs(node.x), Math.abs(node.y))));
+            scale = (space * 0.12) / reach;
+            moved = false;
+            const positions = new Float32Array(nodes.length * 2);
+            nodes.forEach((node, at) => {
+                positions.set(toSpace(node), at * 2);
+            });
+            load(nodes, next, positions);
+            graph.pause();
+            fitAll(0);
+        },
+        fit: (fitted, animate) => {
+            const indices = fitted.flatMap((id) => {
+                const at = index.get(id);
+                return at === undefined ? [] : [at];
+            });
+            graph.fitViewByPointIndices(indices, animate ? STEP * 2 : 0, 0.25);
+        },
+        gestures: (next) => {
+            held.set(next);
+        },
+        groups: (next) => {
+            if (options.groupLabels === false) {
+                return;
+            }
+            groupSample = next.flatMap((group) => group.ids.slice(0, SAMPLE).flatMap((id) => {
+                const at = index.get(id);
+                return at === undefined ? [] : [at];
+            }));
+            follow();
+            groups.set(next.map((group) => ({ ...group, ids: group.ids.slice(0, SAMPLE) })));
+            const cluster = new Map();
+            next.forEach((group, at) => {
+                for (const id of group.ids) {
+                    cluster.set(id, at);
+                }
+            });
+            const clusters = ids.map((id) => cluster.get(id));
+            if (clusters.length === clustered.length &&
+                clusters.every((at, position) => at === clustered[position])) {
+                return;
+            }
+            clustered = clusters;
+            graph.setPointClusters(clusters);
+            graph.setClusterPositions(next.flatMap((_, at) => {
+                const turn = (at / Math.max(next.length, 1)) * Math.PI * 2;
+                return [
+                    space / 2 + Math.cos(turn) * space * 0.2,
+                    space / 2 + Math.sin(turn) * space * 0.2,
+                ];
+            }));
+            graph.setConfigPartial({ simulationCluster: next.length > 1 ? CLUSTER : 0 });
+            graph.render();
+        },
+        look: (next) => {
+            looks = next;
+            signals.look(next);
+            groups.look(next);
+            paint();
+        },
+        onPress: (press) => {
+            graph.setConfigPartial({
+                onPointClick: (at) => {
+                    const id = ids[at];
+                    if (id !== undefined) {
+                        press(id);
+                    }
+                },
+            });
+            return () => graph.setConfigPartial({ onPointClick: undefined });
+        },
+        panBy: (x, y, animate) => {
+            const { height, width } = container.getBoundingClientRect();
+            const to = graph.screenToSpacePosition([width / 2 + x, height / 2 + y]);
+            graph.setZoomTransformByPointPositions(new Float32Array(to), animate ? STEP : 0, graph.getZoomLevel());
+        },
+        settle: (unplaced, placed) => {
+            graph.setPinnedPoints(ids.flatMap((id, at) => (unplaced.has(id) ? [] : [at])));
+            let done = false;
+            const finish = () => {
+                if (done) {
+                    return;
+                }
+                done = true;
+                clearTimeout(limit);
+                clearInterval(fitting);
+                graph.setPinnedPoints(null);
+                graph.pause();
+                fitAll(STEP * 2);
+                const flat = flatNow();
+                placed(new Map(ids.map((id, at) => [id, fromSpace(flat[at * 2] ?? 0, flat[at * 2 + 1] ?? 0)])));
+            };
+            graph.setConfigPartial({ onSimulationEnd: finish });
+            graph.start(1);
+            const limit = setTimeout(finish, options.layoutLimit ?? 15000);
+            const fitting = setInterval(() => fitAll(FOLLOW), FOLLOW);
+            return () => {
+                done = true;
+                clearTimeout(limit);
+                clearInterval(fitting);
+                graph.setConfigPartial({ onSimulationEnd: undefined });
+                graph.setPinnedPoints(null);
+            };
+        },
+        signal: (from, to, colors, animate) => {
+            const ends = [index.get(from), index.get(to)].filter((at) => at !== undefined);
+            follow(ends);
+            signals.signal(from, to, colors, animate);
+        },
+        stop: () => {
+            stopped = true;
+            clearTimeout(overviewing);
+            graph.setConfigPartial({
+                onPointClick: undefined,
+                onPointMouseOut: undefined,
+                onPointMouseOver: undefined,
+                onSimulationEnd: undefined,
+                onSimulationTick: undefined,
+                onTransition: undefined,
+                onZoom: undefined,
+            });
+            signals.stop();
+            groups.stop();
+            names.stop();
+            held.stop();
+        },
+        update: (changes, animate) => {
+            const flat = flatNow();
+            const kept = new Map();
+            ids.forEach((id, at) => {
+                const node = drawnNow.get(id);
+                if (node) {
+                    kept.set(id, { ...node, ...fromSpace(flat[at * 2] ?? 0, flat[at * 2 + 1] ?? 0) });
+                }
+            });
+            for (const id of changes.removeNodes) {
+                kept.delete(id);
+            }
+            let shifted = false;
+            for (const node of changes.changeNodes) {
+                const was = drawnNow.get(node.id);
+                const moved = was !== undefined && (was.x !== node.x || was.y !== node.y);
+                shifted ||= moved;
+                const now = kept.get(node.id);
+                kept.set(node.id, moved || !now ? node : { ...node, x: now.x, y: now.y });
+            }
+            for (const node of changes.addNodes) {
+                kept.set(node.id, node);
+            }
+            const removed = new Set(changes.removeLinks.map((link) => `${link.source}\u0000${link.target}`));
+            const next = [
+                ...links.filter((link) => !removed.has(`${link.source}\u0000${link.target}`)),
+                ...changes.addLinks,
+            ];
+            const nodes = [...kept.values()];
+            const positions = new Float32Array(nodes.length * 2);
+            nodes.forEach((node, at) => {
+                positions.set(toSpace(node), at * 2);
+            });
+            const glide = shifted && animate ? MORPH : 0;
+            load(nodes, next, positions, glide);
+            if (shifted) {
+                fitAll(glide);
+            }
+        },
+        zoomBy: (direction, animate) => {
+            graph.setZoomLevel(graph.getZoomLevel() * (direction > 0 ? ZOOM : 1 / ZOOM), animate ? STEP : 0);
+        },
+    };
+};

package/dist/cosmos/index.d.ts

@@ -0,0 +1 @@
+export { type CosmosDriverOptions, type CosmosGraph, cosmosDriver } from './cosmos-driver.js';

package/dist/cosmos/index.js

@@ -0,0 +1 @@
+export { cosmosDriver } from './cosmos-driver.js';