@fusion.dev/helix-graph 0.122.0 → 0.123.0

package/README.md

@@ -211,9 +211,26 @@ makes one from what a page has, and a field is a stencil itself:
 
 | Function | Makes |
 |---|---|
+| `shapeFromModel(url)` | A solid from a glTF model, `.glb` or `.gltf`, every mesh where the model places it. Async; three.js reads the file |
+| `shapeFromTriangles(positions, index)` | A solid from a closed surface of triangles a page already holds |
+| `shapeFromSvg(svg)` | A flat field from an `<svg>` or its markup: every path, rectangle, circle, ellipse and polygon in its `viewBox` |
+| `shapeFromImage(image, { threshold })` | A flat field from an image's opaque pixels |
 | `shapeFromPath(path, width, height)` | A flat field from an SVG path |
 | `shapeFromInside(inside, { width, height, depth })` | A flat field, or a solid where `depth` is given, from a test of what is inside |
 | `inflate(field, { depth, roundness })` | A solid puffed out of a flat field, as a cushion is, cut through where the flat shape has a hole |
+| `sphere`, `torus`, `box` | Solids measured exactly from their formulas |
+| `onSphere(field, { radius, thickness })` | A flat map wrapped round a ball, as a world map is round a globe |
+
+```js
+const stencil = { ...(await shapeFromModel('/models/brain.glb')), place: 'surface' }
+connectGraph(frame, threeDriver(box), { stencil })
+```
+
+**A model is read a column of cells at a time**, so one of a hundred thousand
+triangles becomes a field in a moment. Any closed mesh works; a mesh with
+holes is read as closed where it can be. A model served from another origin
+needs that origin to allow it, as any `fetch` does. Use a model whose license
+lets your readers copy it, since the examples a reader takes away name it.
 
 ## In three dimensions
 
@@ -237,15 +254,18 @@ connectGraph(frame, threeDriver(box), {
 
 - **A solid stencil draws the notes in the solid**: all through it, or, with
   `place: 'surface'`, in a thin shell just inside its edge, which is how a
-  solid reads as the thing it is shaped like. Each group takes one side of
-  the shape, and each hub's notes a patch around it.
+  solid reads as the thing it is shaped like. Each group takes one piece of
+  the surface, measured across it, so a group on a knot is a stretch of its
+  tube, and each hub's notes a patch around it.
+- **On a surface, the shape itself is drawn** in the ground's color just
+  inside the notes, so what is behind it is hidden, and the pointer finds
+  only the notes in front.
 - **Without a stencil, a layout runs in three dimensions** with d3-force-3d.
 - **Dragging turns the graph, and the wheel and a pinch bring it nearer.** It
   turns slowly by itself while nobody is handling it, and never for a reader
   who asks for less motion.
-- **The far side recedes.** On a surface, the far side of the shape falls to
-  a tenth, so the near side reads; through a graph, its far notes are a
-  little quieter than its near ones.
+- **The far side recedes.** Through a graph, its far notes are a little
+  quieter than its near ones.
 - **Each group is named over its near side**, and a group's name moves a line
   where it would cover another's.
 
@@ -264,7 +284,7 @@ connectGraph(frame, threeDriver(box), {
 | `@fusion.dev/helix-graph/sigma` | `sigmaDriver(sigma, options)` |
 | `@fusion.dev/helix-graph/cosmos` | `cosmosDriver(graph, box, options)` |
 | `@fusion.dev/helix-graph/three` | `threeDriver(box, options)` |
-| `@fusion.dev/helix-graph/shapes` | `shapeFromPath`, `shapeFromInside`, `inflate`, and the `ShapeField` type |
+| `@fusion.dev/helix-graph/shapes` | `shapeFromModel`, `shapeFromTriangles`, `shapeFromSvg`, `shapeFromImage`, `shapeFromPath`, `shapeFromInside`, `inflate`, `sphere`, `torus`, `box`, `onSphere`, and the `ShapeField` type |
 
 **Sigma, cosmos.gl, three.js and d3-force-3d are optional peers, and graphology is the page's.** Each
 driver types its renderer by the calls it makes on it, so a page brings

package/dist/connect-graph/connect-graph.d.ts

@@ -2,7 +2,7 @@ import { type ViewportGestureMode } from '@fusion.dev/helix-core';
 import { type DrawnLink, type DrawnNode, type GraphChanges } from './diff.js';
 import { type GraphLooks } from './looks.js';
 import { type GraphPoint } from './seed.js';
-import { type GraphStencil } from './stencil.js';
+import { type GraphStencil, type StencilFrame } from './stencil.js';
 export type { DrawnLink, DrawnNode, GraphChanges } from './diff.js';
 /**
  * What a renderer has to answer for the frame to drive it, and nothing that is
@@ -85,9 +85,11 @@ export interface GraphDriver {
      * Where in a shape the notes are drawn, where a `stencil` gives one:
      * `surface`, a shell, whose far side a renderer that draws in three
      * dimensions sets back so its near side reads; `fill`, all through it; or
-     * undefined, no shape.
+     * undefined, no shape. `frame` is the shape and where it was put among the
+     * notes, once the connector has drawn the notes in it, for a renderer that
+     * draws the shape as well.
      */
-    shape?(place: 'fill' | 'surface' | undefined): void;
+    shape?(place: 'fill' | 'surface' | undefined, frame?: StencilFrame): void;
     /** Removes whatever the driver added to the renderer or the page, when the connection ends. */
     stop?(): void;
 }

package/dist/connect-graph/connect-graph.js

@@ -3,7 +3,7 @@ import { arrangeByGroup } from './arrange.js';
 import { diffGraph, isEmpty, linkKey, } from './diff.js';
 import { graphColorsFrom, looksOf, toneColor, } from './looks.js';
 import { seedPositions } from './seed.js';
-import { fieldOf, fitToStencil } from './stencil.js';
+import { fieldOf, fitInStencil } from './stencil.js';
 const viewportOf = (frame) => {
     const box = (frame.shadowRoot?.querySelector('[part="viewport"]') ?? frame).getBoundingClientRect();
     return { height: box.height, width: box.width };
@@ -12,6 +12,7 @@ const still = () => typeof matchMedia === 'function' && matchMedia('(prefers-red
 export const connectGraph = (frame, driver, options = {}) => {
     const graph = frame;
     let known = new Map();
+    let shapeFrame;
     let drawnNodes = new Map();
     let drawnLinks = new Map();
     let first = true;
@@ -94,12 +95,16 @@ export const connectGraph = (frame, driver, options = {}) => {
             }
         }
         let { positions, unplaced } = seedPositions(nodes, [...nextLinks.values()], known);
-        const shaped = options.stencil && ids.size > 0 && unplaced.size === ids.size
-            ? fitToStencil(arrangeByGroup(nodes, [...nextLinks.values()], {
+        const fit = options.stencil && ids.size > 0 && unplaced.size === ids.size
+            ? fitInStencil(arrangeByGroup(nodes, [...nextLinks.values()], {
                 solid: fieldOf(options.stencil).depth > 0,
             }), options.stencil)
             : undefined;
-        driver.shape?.(options.stencil ? (options.stencil.place ?? 'fill') : undefined);
+        const shaped = fit?.positions;
+        if (fit?.frame) {
+            shapeFrame = fit.frame;
+        }
+        driver.shape?.(options.stencil ? (options.stencil.place ?? 'fill') : undefined, shapeFrame);
         if (shaped) {
             positions = shaped;
             unplaced = new Set();

package/dist/connect-graph/shape-field.d.ts

@@ -17,6 +17,20 @@ export interface ShapeField {
     /** How wide the box is. */
     readonly width: number;
 }
+/** How many cells a field has along its longer side, flat and solid. */
+export declare const FLAT = 512;
+export declare const SOLID = 96;
+/**
+ * A field from a grid of cells marked inside, `cell` box units a cell, x
+ * fastest and z slowest: the distance to the nearest outside cell, taken
+ * from the distance to the nearest inside one, so the sign says which side
+ * of the edge a point is on.
+ */
+export declare const fieldFromCells: (inside: Uint8Array, sizes: readonly [number, number, number], cell: number, box: {
+    depth: number;
+    height: number;
+    width: number;
+}) => ShapeField;
 /**
  * A field from a test of whether a point in the box is inside, sampled at
  * the center of each cell: flat when `depth` is zero, solid otherwise.

package/dist/connect-graph/shape-field.js

@@ -1,5 +1,5 @@
-const FLAT = 512;
-const SOLID = 96;
+export const FLAT = 512;
+export const SOLID = 96;
 const FAR = 1e20;
 const line = (values, count, out) => {
     const hull = new Int32Array(count);
@@ -67,7 +67,7 @@ const transform = (marked, sizes) => {
     }
     return grid;
 };
-const fieldFromCells = (inside, sizes, cell, box) => {
+export const fieldFromCells = (inside, sizes, cell, box) => {
     const outside = new Uint8Array(inside.length);
     for (let at = 0; at < inside.length; at++) {
         outside[at] = inside[at] ? 0 : 1;

package/dist/connect-graph/stencil.d.ts

@@ -48,3 +48,26 @@ export declare const placesIn: (field: ShapeField, count: number, { place, shell
  * they were.
  */
 export declare const fitToStencil: (positions: ReadonlyMap<string, GraphPoint>, stencil: GraphStencil) => Map<string, GraphPoint>;
+/**
+ * Where a stencil's box was put, in the places' units: its middle, and how
+ * many of the places' units one of the box's is. A point in the box at `x`,
+ * `y` and `z` is at `middle.x + (x - width / 2) * scale`,
+ * `middle.y - (y - height / 2) * scale` and `middle.z + (z - depth / 2) * scale`.
+ */
+export interface StencilFrame {
+    field: ShapeField;
+    middle: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    /** How many of the places' units one of the box's is. */
+    scale: number;
+    /** How thick the shell the notes were placed in is, in the box's units: none where they fill the shape. */
+    shell: number;
+}
+/** `fitToStencil`, saying where it put the stencil's box as well, where it fitted the places at all. */
+export declare const fitInStencil: (positions: ReadonlyMap<string, GraphPoint>, stencil: GraphStencil) => {
+    frame?: StencilFrame | undefined;
+    positions: Map<string, GraphPoint>;
+};

package/dist/connect-graph/stencil.js

@@ -1,4 +1,5 @@
 import { fieldFromInside, fieldFromPath } from './shape-field.js';
+import { surfaceWeb } from './surface-web.js';
 const PROBE = { flat: 64, solid: 32 };
 const SHELL = 0.04;
 const WAVE = 0.07;
@@ -93,10 +94,11 @@ const nested = (items, keys) => {
     }
     return out;
 };
-export const fitToStencil = (positions, stencil) => {
+export const fitToStencil = (positions, stencil) => fitInStencil(positions, stencil).positions;
+export const fitInStencil = (positions, stencil) => {
     const notes = [...positions].map(([id, at]) => ({ at, id }));
     if (notes.length === 0) {
-        return new Map();
+        return { positions: new Map() };
     }
     const field = fieldOf(stencil);
     const places = placesIn(field, notes.length, {
@@ -104,9 +106,12 @@ export const fitToStencil = (positions, stencil) => {
         shell: stencil.shell ?? SHELL,
     });
     if (places.length < notes.length) {
-        return new Map(positions);
+        return { positions: new Map(positions) };
     }
     const solid = field.depth > 0;
+    const thickness = (stencil.place ?? 'fill') === 'surface'
+        ? (stencil.shell ?? SHELL) * Math.max(field.width, field.height, field.depth)
+        : 0;
     const low = {
         x: Number.POSITIVE_INFINITY,
         y: Number.POSITIVE_INFINITY,
@@ -142,17 +147,6 @@ export const fitToStencil = (positions, stencil) => {
     });
     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;
@@ -171,29 +165,38 @@ export const fitToStencil = (positions, stencil) => {
             }
             return best;
         };
+        const targets = spots.map((spot) => spot.at);
+        const web = (stencil.place ?? 'fill') === 'surface' ? surfaceWeb(targets) : undefined;
+        const halveTargets = (places, first) => {
+            if (web && places.length > 2) {
+                return web.halve(places, first);
+            }
+            const axis = widest(places.map((at) => targets[at]));
+            const ordered = [...places].sort((one, other) => (targets[one][axis] ?? 0) - (targets[other][axis] ?? 0));
+            return [ordered.slice(0, first), ordered.slice(first)];
+        };
         const halve = (ours, theirs) => {
             if (ours.length === 1) {
-                fitted.set(ours[0].id, theirs[0].at);
+                fitted.set(ours[0].id, targets[theirs[0]]);
                 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 mine = widest(ours.map((note) => note.at));
+            ours.sort((one, other) => (one.at[mine] ?? 0) - (other.at[mine] ?? 0));
             const half = Math.floor(ours.length / 2);
-            halve(ours.slice(0, half), theirs.slice(0, half));
-            halve(ours.slice(half), theirs.slice(half));
+            const [near, rest] = halveTargets(theirs, half);
+            halve(ours.slice(0, half), near);
+            halve(ours.slice(half), rest);
         };
-        halve(notes.map((note) => ({ ...note, key: way(note.at) })), spots.map((spot) => ({ at: spot.at, key: way(spot.at) })));
-        return fitted;
+        halve([...notes], targets.map((_, at) => at));
+        return { frame: { field, middle, scale, shell: thickness }, positions: 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;
+    return { frame: { field, middle, scale, shell: thickness }, positions: fitted };
 };

package/dist/connect-graph/surface-web.d.ts

@@ -0,0 +1,18 @@
+import type { GraphPoint } from './seed.js';
+/**
+ * Places on a surface, joined to their near neighbors, and split in halves
+ * by how far apart they are across the surface, not through the air.
+ *
+ * **Half a surface measured across it is one piece of it**: a stretch of a
+ * knot's tube, or one lobe of a brain. Half of it by position can be its
+ * front and its back, and half of it by direction from its middle can be
+ * three passes of a tube that crosses itself.
+ */
+export declare const surfaceWeb: (points: readonly GraphPoint[]) => {
+    /**
+     * A set of places in two halves, `first` as many as the first: the
+     * places nearer one end of the set, across the surface, and the rest.
+     * The ends are two places about as far apart across it as any.
+     */
+    halve: (places: readonly number[], first: number) => [number[], number[]];
+};

package/dist/connect-graph/surface-web.js

@@ -0,0 +1,99 @@
+export const surfaceWeb = (points) => {
+    const count = points.length;
+    const x = (at) => points[at].x;
+    const y = (at) => points[at].y;
+    const z = (at) => points[at].z ?? 0;
+    const far = (one, other) => Math.hypot(x(one) - x(other), y(one) - y(other), z(one) - z(other));
+    const sample = Math.min(count, 256);
+    const nearest = [];
+    for (let step = 0; step < sample; step++) {
+        const one = Math.floor((step * count) / sample);
+        let best = Number.POSITIVE_INFINITY;
+        for (let other = 0; other < count; other++) {
+            if (other !== one) {
+                best = Math.min(best, far(one, other));
+            }
+        }
+        if (Number.isFinite(best)) {
+            nearest.push(best);
+        }
+    }
+    nearest.sort((one, other) => one - other);
+    const reach = (nearest[Math.floor(nearest.length / 2)] ?? 1) * 2.2;
+    const cells = new Map();
+    const cellOf = (at) => [
+        Math.floor(x(at) / reach),
+        Math.floor(y(at) / reach),
+        Math.floor(z(at) / reach),
+    ];
+    for (let at = 0; at < count; at++) {
+        const key = cellOf(at).join(',');
+        const list = cells.get(key);
+        if (list) {
+            list.push(at);
+        }
+        else {
+            cells.set(key, [at]);
+        }
+    }
+    const neighbors = Array.from({ length: count }, () => []);
+    for (let at = 0; at < count; at++) {
+        const [cx, cy, cz] = cellOf(at);
+        for (let dx = -1; dx <= 1; dx++) {
+            for (let dy = -1; dy <= 1; dy++) {
+                for (let dz = -1; dz <= 1; dz++) {
+                    for (const other of cells.get(`${cx + dx},${cy + dy},${cz + dz}`) ?? []) {
+                        if (other > at && far(at, other) <= reach) {
+                            ;
+                            neighbors[at].push(other);
+                            neighbors[other].push(at);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    const member = new Int32Array(count).fill(-1);
+    let round = 0;
+    const steps = (from, out) => {
+        out.fill(-1);
+        const queue = [from];
+        out[from] = 0;
+        let last = from;
+        for (let head = 0; head < queue.length; head++) {
+            const at = queue[head];
+            last = at;
+            for (const next of neighbors[at]) {
+                if (member[next] === round && out[next] === -1) {
+                    out[next] = out[at] + 1;
+                    queue.push(next);
+                }
+            }
+        }
+        return last;
+    };
+    const fromA = new Int32Array(count);
+    const fromB = new Int32Array(count);
+    return {
+        halve: (places, first) => {
+            round += 1;
+            for (const at of places) {
+                member[at] = round;
+            }
+            const a = steps(places[0], fromA);
+            const b = steps(a, fromA);
+            steps(b, fromB);
+            const unreached = places.length * 4;
+            const key = (at) => {
+                const one = fromA[at];
+                const other = fromB[at];
+                if (one < 0 || other < 0) {
+                    return unreached + far(at, a) - far(at, b);
+                }
+                return one - other;
+            };
+            const ordered = [...places].sort((one, other) => key(one) - key(other));
+            return [ordered.slice(0, first), ordered.slice(first)];
+        },
+    };
+};

package/dist/index.d.ts

@@ -2,4 +2,4 @@ export { type ConnectGraphOptions, connectGraph, type DrawnLink, type DrawnNode,
 export { diffGraph } from './connect-graph/diff.js';
 export { type GraphColors, type GraphLooks, graphColorsFrom, type LinkLook, type NodeLook, } from './connect-graph/looks.js';
 export { type GraphPoint, seedPositions } from './connect-graph/seed.js';
-export { fitToStencil, type GraphStencil } from './connect-graph/stencil.js';
+export { fitToStencil, type GraphStencil, type StencilFrame, } from './connect-graph/stencil.js';

package/dist/index.js

@@ -2,4 +2,4 @@ export { connectGraph, } from './connect-graph/connect-graph.js';
 export { diffGraph } from './connect-graph/diff.js';
 export { graphColorsFrom, } from './connect-graph/looks.js';
 export { seedPositions } from './connect-graph/seed.js';
-export { fitToStencil } from './connect-graph/stencil.js';
+export { fitToStencil, } from './connect-graph/stencil.js';

package/dist/shapes/flat.d.ts

@@ -0,0 +1,28 @@
+import { type ShapeField } from '../connect-graph/shape-field.js';
+/**
+ * A flat field from an SVG: an `<svg>` element, or its markup. Its box is
+ * its `viewBox`, and its shape every path, rectangle, circle, ellipse and
+ * polygon in it, together, their holes cut by the even-odd rule.
+ *
+ * Transforms on the shapes are not read: draw the outline in the `viewBox`'s
+ * own units, as an exported icon or logo is.
+ */
+export declare const shapeFromSvg: (svg: SVGSVGElement | string, resolution?: number) => ShapeField;
+/** How an image is read as a shape. */
+export interface ImageOptions {
+    /** How opaque a pixel is to be inside, from 0 to 1. 0.5 by default. */
+    threshold?: number | undefined;
+    /** How many cells the field has along the image's longer side. 512 by default. */
+    resolution?: number | undefined;
+}
+/**
+ * A flat field from an image's opaque pixels: a logo, a silhouette, or a
+ * mask drawn for the purpose. Its box is the image's size in pixels.
+ *
+ * An image from another site is read only where that site allows it, as a
+ * canvas reads any image.
+ */
+export declare const shapeFromImage: (image: CanvasImageSource & {
+    height: number | SVGAnimatedLength;
+    width: number | SVGAnimatedLength;
+}, { resolution, threshold }?: ImageOptions) => ShapeField;

package/dist/shapes/flat.js

@@ -0,0 +1,63 @@
+import { FLAT, fieldFromCells, fieldFromPath, } from '../connect-graph/shape-field.js';
+const pathOf = (element) => {
+    const number = (name) => Number(element.getAttribute(name) ?? 0);
+    switch (element.localName) {
+        case 'path':
+            return element.getAttribute('d') ?? '';
+        case 'rect': {
+            const [x, y, width, height] = [number('x'), number('y'), number('width'), number('height')];
+            return `M${x} ${y}h${width}v${height}h${-width}Z`;
+        }
+        case 'circle':
+        case 'ellipse': {
+            const [cx, cy] = [number('cx'), number('cy')];
+            const rx = element.localName === 'circle' ? number('r') : number('rx');
+            const ry = element.localName === 'circle' ? number('r') : number('ry');
+            return `M${cx - rx} ${cy}a${rx} ${ry} 0 1 0 ${rx * 2} 0a${rx} ${ry} 0 1 0 ${-rx * 2} 0Z`;
+        }
+        case 'polygon': {
+            const points = element.getAttribute('points')?.trim() ?? '';
+            return points ? `M${points}Z` : '';
+        }
+        default:
+            return '';
+    }
+};
+export const shapeFromSvg = (svg, resolution = FLAT) => {
+    const element = typeof svg === 'string'
+        ? new DOMParser().parseFromString(svg, 'image/svg+xml').documentElement
+        : svg;
+    const [, , width = 0, height = 0] = (element.getAttribute('viewBox') ?? '')
+        .trim()
+        .split(/[\s,]+/)
+        .map(Number);
+    const box = {
+        height: height || Number(element.getAttribute('height') ?? 0),
+        width: width || Number(element.getAttribute('width') ?? 0),
+    };
+    const path = [...element.querySelectorAll('path, rect, circle, ellipse, polygon')]
+        .map(pathOf)
+        .join(' ');
+    return fieldFromPath(path, box.width || 1, box.height || 1, resolution);
+};
+export const shapeFromImage = (image, { resolution = FLAT, threshold = 0.5 } = {}) => {
+    const size = (value) => typeof value === 'number' ? value : value.baseVal.value;
+    const width = Math.max(size(image.width), 1);
+    const height = Math.max(size(image.height), 1);
+    const cell = Math.max(width, height) / resolution;
+    const nx = Math.max(1, Math.ceil(width / cell));
+    const ny = Math.max(1, Math.ceil(height / cell));
+    const canvas = document.createElement('canvas');
+    canvas.width = nx;
+    canvas.height = ny;
+    const context = canvas.getContext('2d', { willReadFrequently: true });
+    const cells = new Uint8Array(nx * ny);
+    if (context) {
+        context.drawImage(image, 0, 0, nx, ny);
+        const alpha = context.getImageData(0, 0, nx, ny).data;
+        for (let at = 0; at < cells.length; at++) {
+            cells[at] = (alpha[at * 4 + 3] ?? 0) / 255 >= threshold ? 1 : 0;
+        }
+    }
+    return fieldFromCells(cells, [nx, ny, 1], cell, { depth: 0, height, width });
+};

package/dist/shapes/index.d.ts

@@ -1 +1,5 @@
 export { fieldFromInside as shapeFromInside, fieldFromPath as shapeFromPath, inflate, type ShapeField, } from '../connect-graph/shape-field.js';
+export { type ImageOptions, shapeFromImage, shapeFromSvg } from './flat.js';
+export { shapeFromModel } from './model.js';
+export { box, onSphere, sphere, torus } from './solids.js';
+export { shapeFromTriangles, type TriangleOptions } from './triangles.js';

package/dist/shapes/index.js

@@ -1 +1,5 @@
 export { fieldFromInside as shapeFromInside, fieldFromPath as shapeFromPath, inflate, } from '../connect-graph/shape-field.js';
+export { shapeFromImage, shapeFromSvg } from './flat.js';
+export { shapeFromModel } from './model.js';
+export { box, onSphere, sphere, torus } from './solids.js';
+export { shapeFromTriangles } from './triangles.js';

package/dist/shapes/model.d.ts

@@ -0,0 +1,12 @@
+import type { ShapeField } from '../connect-graph/shape-field.js';
+import { type TriangleOptions } from './triangles.js';
+/**
+ * A solid field from a glTF model, the web's standard format for one: a
+ * URL to a `.glb` or `.gltf` file, or the file's bytes. Every mesh in it is
+ * read, placed as the model places it.
+ *
+ * **three.js reads the file**, imported when this is first called, so a page
+ * that draws no model never downloads a loader. It is an optional peer of
+ * this package.
+ */
+export declare const shapeFromModel: (source: string | ArrayBuffer, options?: TriangleOptions) => Promise<ShapeField>;

package/dist/shapes/model.js

@@ -0,0 +1,31 @@
+import { shapeFromTriangles } from './triangles.js';
+export const shapeFromModel = async (source, options = {}) => {
+    const [{ GLTFLoader }, { Mesh, Vector3 }] = await Promise.all([
+        import('three/addons/loaders/GLTFLoader.js'),
+        import('three'),
+    ]);
+    const loader = new GLTFLoader();
+    const model = typeof source === 'string'
+        ? await loader.loadAsync(source)
+        : await loader.parseAsync(source, '');
+    model.scene.updateMatrixWorld(true);
+    const corners = [];
+    const point = new Vector3();
+    model.scene.traverse((object) => {
+        if (!(object instanceof Mesh)) {
+            return;
+        }
+        const geometry = object.geometry;
+        const place = geometry.getAttribute('position');
+        if (!place) {
+            return;
+        }
+        const index = geometry.getIndex();
+        const count = index ? index.count : place.count;
+        for (let at = 0; at < count; at++) {
+            point.fromBufferAttribute(place, index ? index.getX(at) : at).applyMatrix4(object.matrixWorld);
+            corners.push(point.x, point.y, point.z);
+        }
+    });
+    return shapeFromTriangles(corners, null, options);
+};

package/dist/shapes/solids.d.ts

@@ -0,0 +1,28 @@
+import type { ShapeField } from '../connect-graph/shape-field.js';
+/** A ball `radius` across from its middle. */
+export declare const sphere: ({ radius }?: {
+    radius?: number;
+}) => ShapeField;
+/** A ring: `radius` from its middle to the middle of its tube, which is `tube` thick from its own middle out. */
+export declare const torus: ({ radius, tube, }?: {
+    radius?: number;
+    tube?: number;
+}) => ShapeField;
+/** A box `width` by `height` by `depth`, its edges rounded `round` in. */
+export declare const box: ({ depth, height, round, width, }?: {
+    depth?: number;
+    height?: number;
+    round?: number;
+    width?: number;
+}) => ShapeField;
+/**
+ * A flat shape wrapped round a ball, as a map of the world is round a globe:
+ * the flat shape's width is the way round and its height pole to pole, as an
+ * equirectangular map is drawn. The solid is a shell `thickness` deep at the
+ * ball's surface, wherever the flat shape is, so notes placed in it draw the
+ * map in three dimensions.
+ */
+export declare const onSphere: (flat: ShapeField, { radius, thickness }?: {
+    radius?: number;
+    thickness?: number;
+}) => ShapeField;

package/dist/shapes/solids.js

@@ -0,0 +1,47 @@
+export const sphere = ({ radius = 50 } = {}) => ({
+    depth: radius * 2,
+    distance: (x, y, z = radius) => Math.hypot(x - radius, y - radius, z - radius) - radius,
+    height: radius * 2,
+    width: radius * 2,
+});
+export const torus = ({ radius = 50, tube = 18, } = {}) => {
+    const reach = radius + tube;
+    return {
+        depth: tube * 2,
+        distance: (x, y, z = tube) => Math.hypot(Math.hypot(x - reach, y - reach) - radius, z - tube) - tube,
+        height: reach * 2,
+        width: reach * 2,
+    };
+};
+export const box = ({ depth = 100, height = 100, round = 0, width = 100, } = {}) => ({
+    depth,
+    distance: (x, y, z = depth / 2) => {
+        const qx = Math.abs(x - width / 2) - width / 2 + round;
+        const qy = Math.abs(y - height / 2) - height / 2 + round;
+        const qz = Math.abs(z - depth / 2) - depth / 2 + round;
+        return (Math.hypot(Math.max(qx, 0), Math.max(qy, 0), Math.max(qz, 0)) +
+            Math.min(Math.max(qx, qy, qz), 0) -
+            round);
+    },
+    height,
+    width,
+});
+export const onSphere = (flat, { radius = 50, thickness = radius * 0.08 } = {}) => {
+    const along = (Math.PI * 2 * radius) / Math.max(flat.width, 1e-9);
+    return {
+        depth: radius * 2,
+        distance: (x, y, z = radius) => {
+            const dx = x - radius;
+            const dy = y - radius;
+            const dz = z - radius;
+            const out = Math.hypot(dx, dy, dz);
+            const shell = Math.abs(out - (radius - thickness / 2)) - thickness / 2;
+            const longitude = Math.atan2(dx, dz);
+            const latitude = Math.acos(Math.min(Math.max(dy / (out || 1), -1), 1));
+            const map = flat.distance(((longitude + Math.PI) / (Math.PI * 2)) * flat.width, (latitude / Math.PI) * flat.height);
+            return Math.max(shell, map * along);
+        },
+        height: radius * 2,
+        width: radius * 2,
+    };
+};

package/dist/shapes/triangles.d.ts

@@ -0,0 +1,20 @@
+import { type ShapeField } from '../connect-graph/shape-field.js';
+/** How a solid is read from triangles. */
+export interface TriangleOptions {
+    /** How many cells the field has along the solid's longest side. 96 by default. */
+    resolution?: number | undefined;
+}
+/**
+ * A solid field from a closed surface of triangles: `positions` three
+ * numbers a corner, and `index` three corners a triangle, or every three
+ * corners in order where there is none. Its y points up, as a model's does,
+ * and its box is the surface's own bounds, a cell of room around them.
+ *
+ * **Read a column of cells at a time**: each triangle marks where it crosses
+ * the columns under it, and a cell is inside where an odd number of
+ * crossings lie in front of it. A model of a hundred thousand triangles is
+ * read in a moment, where testing each cell against each triangle would take
+ * minutes. A surface with gaps is read as closed where it can be, and a gap
+ * shows as a column filled or emptied through.
+ */
+export declare const shapeFromTriangles: (positions: ArrayLike<number>, index?: ArrayLike<number> | null | undefined, { resolution }?: TriangleOptions) => ShapeField;

package/dist/shapes/triangles.js

@@ -0,0 +1,78 @@
+import { fieldFromCells, SOLID } from '../connect-graph/shape-field.js';
+const NUDGE = 1e-6 * Math.PI;
+export const shapeFromTriangles = (positions, index, { resolution = SOLID } = {}) => {
+    const corners = Math.floor(positions.length / 3);
+    const low = [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY];
+    const high = [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY];
+    for (let at = 0; at < corners; at++) {
+        for (let axis = 0; axis < 3; axis++) {
+            const value = positions[at * 3 + axis];
+            low[axis] = Math.min(low[axis], value);
+            high[axis] = Math.max(high[axis], value);
+        }
+    }
+    if (corners === 0) {
+        return fieldFromCells(new Uint8Array(1), [1, 1, 1], 1, { depth: 1, height: 1, width: 1 });
+    }
+    const span = Math.max(high[0] - low[0], high[1] - low[1], high[2] - low[2], 1e-9);
+    const cell = span / Math.max(resolution - 2, 1);
+    const origin = low.map((value) => value - cell);
+    const nx = Math.ceil((high[0] - low[0]) / cell) + 2;
+    const ny = Math.ceil((high[1] - low[1]) / cell) + 2;
+    const nz = Math.ceil((high[2] - low[2]) / cell) + 2;
+    const crossings = Array.from({ length: nx * ny }, () => []);
+    const triangles = index ? Math.floor(index.length / 3) : Math.floor(corners / 3);
+    const corner = (triangle, which) => {
+        const at = index ? index[triangle * 3 + which] : triangle * 3 + which;
+        return [
+            (positions[at * 3] - origin[0]) / cell,
+            (high[1] + cell - positions[at * 3 + 1]) / cell,
+            (positions[at * 3 + 2] - origin[2]) / cell,
+        ];
+    };
+    for (let triangle = 0; triangle < triangles; triangle++) {
+        const [ax, ay, az] = corner(triangle, 0);
+        const [bx, by, bz] = corner(triangle, 1);
+        const [cx, cy, cz] = corner(triangle, 2);
+        const area = (bx - ax) * (cy - ay) - (cx - ax) * (by - ay);
+        if (Math.abs(area) < 1e-12) {
+            continue;
+        }
+        const left = Math.max(0, Math.ceil(Math.min(ax, bx, cx) - 0.5));
+        const right = Math.min(nx - 1, Math.floor(Math.max(ax, bx, cx) - 0.5));
+        const top = Math.max(0, Math.ceil(Math.min(ay, by, cy) - 0.5));
+        const bottom = Math.min(ny - 1, Math.floor(Math.max(ay, by, cy) - 0.5));
+        for (let row = top; row <= bottom; row++) {
+            for (let column = left; column <= right; column++) {
+                const px = column + 0.5 + NUDGE;
+                const py = row + 0.5 + NUDGE * Math.SQRT2;
+                const u = ((bx - px) * (cy - py) - (cx - px) * (by - py)) / area;
+                const v = ((cx - px) * (ay - py) - (ax - px) * (cy - py)) / area;
+                const w = 1 - u - v;
+                if (u < 0 || v < 0 || w < 0) {
+                    continue;
+                }
+                ;
+                crossings[row * nx + column].push(u * az + v * bz + w * cz);
+            }
+        }
+    }
+    const cells = new Uint8Array(nx * ny * nz);
+    for (let row = 0; row < ny; row++) {
+        for (let column = 0; column < nx; column++) {
+            const along = crossings[row * nx + column].sort((one, other) => one - other);
+            for (let pair = 0; pair + 1 < along.length; pair += 2) {
+                const from = Math.max(0, Math.ceil(along[pair] - 0.5));
+                const to = Math.min(nz - 1, Math.floor(along[pair + 1] - 0.5));
+                for (let layer = from; layer <= to; layer++) {
+                    cells[layer * nx * ny + row * nx + column] = 1;
+                }
+            }
+        }
+    }
+    return fieldFromCells(cells, [nx, ny, nz], cell, {
+        depth: nz * cell,
+        height: ny * cell,
+        width: nx * cell,
+    });
+};

package/dist/three/surface.d.ts

@@ -0,0 +1,13 @@
+import type { ShapeField } from '../connect-graph/shape-field.js';
+/**
+ * The surface of a solid field where its distance is `at`, as triangles:
+ * corners three numbers each in the field's box, and triangles three corners
+ * each. Surface nets: a corner in each cell the surface passes through, at
+ * the middle of where it crosses the cell's edges, and two triangles across
+ * each edge it crosses. Smooth enough to hide what is behind a shape, and
+ * made in a moment.
+ */
+export declare const surfaceOf: (field: ShapeField, at?: number) => {
+    corners: Float32Array;
+    triangles: Uint32Array;
+};

package/dist/three/surface.js

@@ -0,0 +1,112 @@
+const CELLS = 72;
+export const surfaceOf = (field, at = 0) => {
+    const { depth, height, width } = field;
+    const cell = Math.max(width, height, depth) / CELLS;
+    const nx = Math.ceil(width / cell) + 3;
+    const ny = Math.ceil(height / cell) + 3;
+    const nz = Math.ceil(depth / cell) + 3;
+    const value = new Float32Array(nx * ny * nz);
+    const spot = (x, y, z) => (z * ny + y) * nx + x;
+    for (let z = 0; z < nz; z++) {
+        for (let y = 0; y < ny; y++) {
+            for (let x = 0; x < nx; x++) {
+                value[spot(x, y, z)] = field.distance((x - 1) * cell, (y - 1) * cell, (z - 1) * cell) - at;
+            }
+        }
+    }
+    const cornerOf = new Int32Array((nx - 1) * (ny - 1) * (nz - 1)).fill(-1);
+    const cellSpot = (x, y, z) => (z * (ny - 1) + y) * (nx - 1) + x;
+    const corners = [];
+    const edges = [
+        [0, 1],
+        [2, 3],
+        [4, 5],
+        [6, 7],
+        [0, 2],
+        [1, 3],
+        [4, 6],
+        [5, 7],
+        [0, 4],
+        [1, 5],
+        [2, 6],
+        [3, 7],
+    ];
+    const offsets = [
+        [0, 0, 0],
+        [1, 0, 0],
+        [0, 1, 0],
+        [1, 1, 0],
+        [0, 0, 1],
+        [1, 0, 1],
+        [0, 1, 1],
+        [1, 1, 1],
+    ];
+    const values = new Float32Array(8);
+    for (let z = 0; z < nz - 1; z++) {
+        for (let y = 0; y < ny - 1; y++) {
+            for (let x = 0; x < nx - 1; x++) {
+                let inside = 0;
+                for (let corner = 0; corner < 8; corner++) {
+                    const [dx, dy, dz] = offsets[corner];
+                    const sample = value[spot(x + dx, y + dy, z + dz)];
+                    values[corner] = sample;
+                    if (sample < 0) {
+                        inside += 1;
+                    }
+                }
+                if (inside === 0 || inside === 8) {
+                    continue;
+                }
+                let sx = 0;
+                let sy = 0;
+                let sz = 0;
+                let crossed = 0;
+                for (const [from, to] of edges) {
+                    const a = values[from];
+                    const b = values[to];
+                    if (a < 0 === b < 0) {
+                        continue;
+                    }
+                    const t = a / (a - b);
+                    const [ax, ay, az] = offsets[from];
+                    const [bx, by, bz] = offsets[to];
+                    sx += ax + (bx - ax) * t;
+                    sy += ay + (by - ay) * t;
+                    sz += az + (bz - az) * t;
+                    crossed += 1;
+                }
+                cornerOf[cellSpot(x, y, z)] = corners.length / 3;
+                corners.push((x + sx / crossed - 1) * cell, (y + sy / crossed - 1) * cell, (z + sz / crossed - 1) * cell);
+            }
+        }
+    }
+    const triangles = [];
+    const quad = (a, b, c, d, flip) => {
+        if (a < 0 || b < 0 || c < 0 || d < 0) {
+            return;
+        }
+        if (flip) {
+            triangles.push(a, c, b, a, d, c);
+        }
+        else {
+            triangles.push(a, b, c, a, c, d);
+        }
+    };
+    for (let z = 1; z < nz - 1; z++) {
+        for (let y = 1; y < ny - 1; y++) {
+            for (let x = 1; x < nx - 1; x++) {
+                const here = value[spot(x, y, z)] < 0;
+                if (x < nx - 1 && here !== value[spot(x + 1, y, z)] < 0) {
+                    quad(cornerOf[cellSpot(x, y - 1, z - 1)], cornerOf[cellSpot(x, y, z - 1)], cornerOf[cellSpot(x, y, z)], cornerOf[cellSpot(x, y - 1, z)], here);
+                }
+                if (y < ny - 1 && here !== value[spot(x, y + 1, z)] < 0) {
+                    quad(cornerOf[cellSpot(x - 1, y, z - 1)], cornerOf[cellSpot(x - 1, y, z)], cornerOf[cellSpot(x, y, z)], cornerOf[cellSpot(x, y, z - 1)], here);
+                }
+                if (z < nz - 1 && here !== value[spot(x, y, z + 1)] < 0) {
+                    quad(cornerOf[cellSpot(x - 1, y - 1, z)], cornerOf[cellSpot(x, y - 1, z)], cornerOf[cellSpot(x, y, z)], cornerOf[cellSpot(x - 1, y, z)], here);
+                }
+            }
+        }
+    }
+    return { corners: new Float32Array(corners), triangles: new Uint32Array(triangles) };
+};

package/dist/three/three-driver.js

@@ -1,7 +1,8 @@
 import { forceCenter, forceLink, forceManyBody, forceSimulation, } from 'd3-force-3d';
-import { AdditiveBlending, BufferAttribute, BufferGeometry, LineSegments, NormalBlending, PerspectiveCamera, Points, Raycaster, Scene, ShaderMaterial, TOUCH, Vector2, Vector3, WebGLRenderer, } from 'three';
+import { AdditiveBlending, BufferAttribute, BufferGeometry, DoubleSide, LineSegments, Mesh, NormalBlending, PerspectiveCamera, Points, Raycaster, Scene, ShaderMaterial, TOUCH, Vector2, Vector3, WebGLRenderer, } from 'three';
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 import { ease, gesturesHeld, groupsOver, isLight, namesOver, signalsOver, } from '../overlay/overlay.js';
+import { surfaceOf } from './surface.js';
 const SHAPES = { circle: 0, diamond: 2, ring: 0, square: 1 };
 const REACH = 100;
 const STEP = 250;
@@ -92,6 +93,30 @@ void main() {
   gl_FragColor = vec4(vColor, opacity * vFade);
 }
 `;
+const SOLID_VERTEX = `
+varying vec3 vNormal;
+varying vec3 vView;
+
+void main() {
+  vec4 view = modelViewMatrix * vec4(position, 1.0);
+  gl_Position = projectionMatrix * view;
+  vNormal = normalize(normalMatrix * normal);
+  vView = normalize(-view.xyz);
+}
+`;
+const SOLID_FRAGMENT = `
+uniform vec3 ground;
+uniform vec3 ink;
+varying vec3 vNormal;
+varying vec3 vView;
+
+void main() {
+  /* The ground's color, a breath of ink at the edge turning away, so the
+     shape is felt and not seen: the notes on it are what is drawn. */
+  float edge = 1.0 - abs(dot(normalize(vNormal), normalize(vView)));
+  gl_FragColor = vec4(mix(ground, ink, 0.16 * pow(edge, 2.0)), 1.0);
+}
+`;
 const channels = (color) => {
     const [red = 128, green = 128, blue = 128] = color.match(/[\d.]+/g)?.map(Number) ?? [];
     return [red / 255, green / 255, blue / 255];
@@ -165,7 +190,49 @@ export const threeDriver = (container, options = {}) => {
     const lit = new LineSegments(new BufferGeometry(), lines(0.9));
     quiet.frustumCulled = false;
     lit.frustumCulled = false;
-    scene.add(quiet, lit, points);
+    const solid = new Mesh(new BufferGeometry(), new ShaderMaterial({
+        fragmentShader: SOLID_FRAGMENT,
+        polygonOffset: true,
+        polygonOffsetFactor: 2,
+        polygonOffsetUnits: 2,
+        side: DoubleSide,
+        uniforms: { ground: { value: [0, 0, 0] }, ink: { value: [1, 1, 1] } },
+        vertexShader: SOLID_VERTEX,
+    }));
+    solid.renderOrder = -1;
+    solid.visible = false;
+    solid.frustumCulled = false;
+    scene.add(solid, quiet, lit, points);
+    let shapeFrame;
+    let surfaced = false;
+    let solidAt = Number.NaN;
+    const shapeSolid = () => {
+        const frame = shapeFrame;
+        if (!frame || !surfaced || frame.field.depth <= 0) {
+            solid.visible = false;
+            return;
+        }
+        if (solidAt === scale) {
+            solid.visible = true;
+            return;
+        }
+        solidAt = scale;
+        const { corners, triangles } = surfaceOf(frame.field, -frame.shell * 0.6);
+        const { depth, height, width } = frame.field;
+        for (let at = 0; at < corners.length; at += 3) {
+            corners[at] = (frame.middle.x + (corners[at] - width / 2) * frame.scale) * scale;
+            corners[at + 1] =
+                (frame.middle.y - (corners[at + 1] - height / 2) * frame.scale) * scale;
+            corners[at + 2] =
+                (frame.middle.z + (corners[at + 2] - depth / 2) * frame.scale) * scale;
+        }
+        solid.geometry.dispose();
+        solid.geometry = new BufferGeometry();
+        solid.geometry.setAttribute('position', new BufferAttribute(corners, 3));
+        solid.geometry.setIndex(new BufferAttribute(triangles, 1));
+        solid.geometry.computeVertexNormals();
+        solid.visible = true;
+    };
     const at = (spot) => new Vector3(positions[spot * 3], positions[spot * 3 + 1], positions[spot * 3 + 2]);
     const onScreen = (id) => {
         const spot = index.get(id);
@@ -196,7 +263,9 @@ export const threeDriver = (container, options = {}) => {
             return undefined;
         }
         const depth = -at(spot).applyMatrix4(camera.matrixWorldInverse).z;
-        return uniforms.steep.value > 0 && depth > uniforms.middle.value ? undefined : onScreen(id);
+        return (uniforms.steep.value > 0 || solid.visible) && depth > uniforms.middle.value
+            ? undefined
+            : onScreen(id);
     };
     const groups = groupsOver(container, nearOnScreen);
     const names = namesOver(container, onScreen);
@@ -280,6 +349,9 @@ export const threeDriver = (container, options = {}) => {
         geometry.setAttribute('shape', new BufferAttribute(shapes, 1));
         geometry.setAttribute('glow', new BufferAttribute(glows, 1));
         dark = !isLight(looks.ground);
+        const solidUniforms = solid.material.uniforms;
+        solidUniforms.ground.value = channels(looks.ground);
+        solidUniforms.ink.value = channels(looks.ink);
         const blending = dark ? AdditiveBlending : NormalBlending;
         points.material.blending = blending;
         quiet.material.blending = blending;
@@ -483,9 +555,14 @@ export const threeDriver = (container, options = {}) => {
         hovering = requestAnimationFrame(() => {
             raycaster.setFromCamera(pointer, camera);
             raycaster.params.Points = { threshold: uniforms.unit.value * 2.4 };
+            const front = solid.visible
+                ? (raycaster.intersectObject(solid, false)[0]?.distance ?? Number.POSITIVE_INFINITY)
+                : Number.POSITIVE_INFINITY;
             const hit = raycaster.intersectObject(points, false).find((one) => {
                 const id = one.index === undefined ? undefined : ids[one.index];
-                return id !== undefined && looks?.node(id).hidden !== true;
+                return (id !== undefined &&
+                    looks?.node(id).hidden !== true &&
+                    one.distance < front + uniforms.unit.value * 3);
             });
             const next = hit?.index;
             if (next !== hovered) {
@@ -520,6 +597,7 @@ export const threeDriver = (container, options = {}) => {
             });
             moved = false;
             load(nodes, next, places);
+            shapeSolid();
             fitAll(0);
         },
         fit: (fitted, animate) => {
@@ -627,8 +705,13 @@ export const threeDriver = (container, options = {}) => {
                 layout = undefined;
             };
         },
-        shape: (place) => {
-            uniforms.steep.value = place === 'surface' ? 1 : 0;
+        shape: (place, frame) => {
+            surfaced = place === 'surface';
+            if (frame !== shapeFrame) {
+                shapeFrame = frame;
+                solidAt = Number.NaN;
+            }
+            uniforms.steep.value = surfaced && !frame ? 1 : 0;
         },
         signal: (from, to, colors, animate) => {
             signals.signal(from, to, colors, animate);
@@ -642,7 +725,7 @@ export const threeDriver = (container, options = {}) => {
             canvas.removeEventListener('pointermove', hover);
             canvas.removeEventListener('pointerleave', leave);
             controls.dispose();
-            for (const object of [points, quiet, lit]) {
+            for (const object of [points, quiet, lit, solid]) {
                 object.geometry.dispose();
                 object.material.dispose();
             }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-graph",
   "description": "Connects the Helix Graph frame to a graph renderer: Sigma.js, cosmos.gl, three.js, or a driver of your own.",
-  "version": "0.122.0",
+  "version": "0.123.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -47,12 +47,12 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.122.0"
+    "@fusion.dev/helix-core": "0.123.0"
   },
   "devDependencies": {
     "@cosmos.gl/graph": "^3.4.2",
-    "@fusion.dev/helix-headless": "0.122.0",
-    "@fusion.dev/helix-testing": "0.122.0",
+    "@fusion.dev/helix-headless": "0.123.0",
+    "@fusion.dev/helix-testing": "0.123.0",
     "@types/bun": "^1.3.0",
     "@types/three": "^0.186.0",
     "d3-force-3d": "^3.0.6",