@toolpath/viewer 0.3.1 → 0.4.0

package/dist/{chunk-RICG6UVH.js → chunk-ILZ2KQUK.js}

@@ -4,7 +4,7 @@ import { useEffect as useEffect5, useMemo as useMemo6 } from "react";
 // src/part-mesh.tsx
 import { useThree as useThree6 } from "@react-three/fiber";
 import { useCallback as useCallback3, useEffect as useEffect4, useLayoutEffect, useMemo as useMemo5, useRef as useRef5 } from "react";
-import { Vector3 as Vector38 } from "three";
+import { Vector3 as Vector39 } from "three";
 
 // src/model/directions.ts
 var EPSILON = 1e-6;
@@ -54,34 +54,48 @@ var HIGHLIGHT_COLORS = {
   geometryIssue: 16711680
 };
 var DIRECTION_COLORS = [
+  /*
+   * Nine ways up, told apart at a glance.
+   *
+   * The palette is an **identity**, not a ranking — the same colour on the
+   * face, on the arrow and on the row, which is the whole point of it. Two
+   * entries that look alike make it a worse identity than eight that do not,
+   * and this list had three problems at once:
+   *
+   * - teal-500, cyan-500 and emerald-500 were neighbours in hue *and*
+   *   lightness, so three ways up were one blue-green smear;
+   * - blue-500 and indigo-500 were the closest pair of all;
+   * - indigo-500 sat 0.06 from the violet an offer is painted in — the very
+   *   clash that sent a purple out of this list once already, still here under
+   *   a different name.
+   *
+   * The warm ramp belongs to difficulty, red to sharp corners, orange to the
+   * selection over this cycle, violet to an offer. There is no room to move
+   * anything to a fresh hue, so the spread is along **lightness** as much as
+   * hue: a pale cyan and a mid teal, a light green and a deep navy.
+   *
+   * `selection-colors.test.ts` measures every pair in Oklab and holds them all
+   * above 0.1 — including against the four colours the part can wear over this
+   * wash. The binding pair now is blue against an offer's violet, at 0.12.
+   */
   3900150,
   // blue
-  1357990,
+  889992,
   // teal
   14239471,
   // fuchsia
-  440020,
-  // cyan
-  /*
-   * Olive, where a purple used to be.
-   *
-   * The purple sat one step from the violet a proposed feature is painted in,
-   * so an offer laid over work already assigned to this direction was a clash
-   * between "suggested" and "decided" — the two states the part is read for.
-   * Olive is the only hue with room: the warm ramp belongs to the difficulty
-   * bands, red to sharp corners, orange to faces being picked, and green to
-   * whatever is being looked at.
-   */
+  6809849,
+  // pale cyan
   6660877,
   // olive
   15485081,
   // pink
-  6583435,
-  // slate
-  1096065,
-  // emerald
-  6514417
-  // indigo
+  9741240,
+  // light slate
+  4906624,
+  // light green
+  1981066
+  // deep navy
 ];
 var DEFAULT_THEME = {
   background: null,
@@ -272,6 +286,17 @@ function trackTaps(element) {
     dispose: () => element.removeEventListener("pointerdown", down, { capture: true })
   };
 }
+var DOUBLE_TAP_MS = 400;
+function trackDoubleTaps(within = DOUBLE_TAP_MS, slop = TAP_SLOP) {
+  let last = null;
+  return {
+    isDouble: (event) => {
+      const paired = last !== null && event.timeStamp - last.timeStamp <= within && !movedFar(last, event, slop);
+      last = paired ? null : event;
+      return paired;
+    }
+  };
+}
 
 // src/tap.tsx
 function useTapGuard() {
@@ -391,10 +416,11 @@ function buildRegionAttribute(model, texels, vertexCount) {
 function createPart(model, geometry, theme) {
   const position = geometry.getAttribute("position");
   const texels = buildRegionTexels(model);
-  geometry.setAttribute(
-    REGION_ATTRIBUTE,
-    new Float32BufferAttribute2(buildRegionAttribute(model, texels, position.count), 1)
+  const regionAttribute = new Float32BufferAttribute2(
+    buildRegionAttribute(model, texels, position.count),
+    1
   );
+  geometry.setAttribute(REGION_ATTRIBUTE, regionAttribute);
   const width = model.regions.length + 1;
   const state = new Uint8Array(width * 4);
   const stateTexture = new DataTexture(state, width, 1, RGBAFormat, UnsignedByteType);
@@ -430,7 +456,8 @@ function createPart(model, geometry, theme) {
       "#include <color_fragment>",
       `#include <color_fragment>
         regionState = texelFetch(uRegionState, ivec2(int(vRegion + 0.5), 0), 0);
-        diffuseColor.rgb = mix(diffuseColor.rgb, regionState.rgb, regionState.a);`
+        diffuseColor.rgb = mix(diffuseColor.rgb, regionState.rgb, regionState.a);
+`
     ).replace(
       "#include <emissivemap_fragment>",
       `#include <emissivemap_fragment>
@@ -520,7 +547,9 @@ function createPart(model, geometry, theme) {
     },
     dispose() {
       object.clear();
-      geometry.deleteAttribute(REGION_ATTRIBUTE);
+      if (geometry.getAttribute(REGION_ATTRIBUTE) === regionAttribute) {
+        geometry.deleteAttribute(REGION_ATTRIBUTE);
+      }
       material.dispose();
       edgeGeometry.dispose();
       edgeMaterial.dispose();
@@ -529,6 +558,48 @@ function createPart(model, geometry, theme) {
   };
 }
 
+// src/render/adjacency.ts
+var GRID = 1e-4;
+var keyFor = (x, y, z) => `${Math.round(x / GRID)},${Math.round(y / GRID)},${Math.round(z / GRID)}`;
+function regionAdjacency(model, geometry) {
+  const position = geometry.getAttribute("position");
+  const adjacency = /* @__PURE__ */ new Map();
+  if (!position) return adjacency;
+  const owner = new Int32Array(Math.floor(position.count / 3)).fill(-1);
+  for (const region of model.regions) {
+    for (let at = region.triangles.start; at < region.triangles.end; at++) {
+      if (at >= 0 && at < owner.length) owner[at] = region.idx;
+    }
+  }
+  const edges = /* @__PURE__ */ new Map();
+  const join = (a, b) => {
+    if (a === b) return;
+    const mine = adjacency.get(a) ?? /* @__PURE__ */ new Set();
+    mine.add(b);
+    adjacency.set(a, mine);
+    const theirs = adjacency.get(b) ?? /* @__PURE__ */ new Set();
+    theirs.add(a);
+    adjacency.set(b, theirs);
+  };
+  for (let triangle = 0; triangle < owner.length; triangle++) {
+    const region = owner[triangle];
+    if (region === -1) continue;
+    const corners = [0, 1, 2].map((corner) => {
+      const at = triangle * 3 + corner;
+      return keyFor(position.getX(at), position.getY(at), position.getZ(at));
+    });
+    for (let corner = 0; corner < 3; corner++) {
+      const from = corners[corner];
+      const to = corners[(corner + 1) % 3];
+      const edge = from < to ? `${from}|${to}` : `${to}|${from}`;
+      const seen = edges.get(edge);
+      if (seen === void 0) edges.set(edge, region);
+      else join(seen, region);
+    }
+  }
+  return adjacency;
+}
+
 // src/render/selection.ts
 var FEATURE_TYPE_RANKS = [
   ["blind_hole", "through_hole", "filleted_blind_hole"],
@@ -638,7 +709,7 @@ import {
   useMemo as useMemo3,
   useRef as useRef2
 } from "react";
-import { Box3 as Box33, Vector3 as Vector35 } from "three";
+import { Box3 as Box33, Vector3 as Vector36 } from "three";
 
 // src/camera.tsx
 import { useFrame, useThree as useThree2 } from "@react-three/fiber";
@@ -990,7 +1061,8 @@ var ExtendedCameraControls = class extends CameraControls {
 var CadCameraControls = ({
   controlsRef,
   scheme = "toolpath",
-  freeOrbit = true
+  freeOrbit = true,
+  zoomTo = "cursor"
 }) => {
   const camera = useThree2((state) => state.camera);
   const domElement = useThree2((state) => state.gl.domElement);
@@ -1029,12 +1101,255 @@ var CadCameraControls = ({
   useEffect2(() => {
     controls.setFreeOrbit(freeOrbit);
   }, [controls, freeOrbit]);
+  useEffect2(() => {
+    controls.dollyToCursor = zoomTo === "cursor";
+  }, [controls, zoomTo]);
   useFrame((_, delta) => {
     controls.update(delta);
   });
   return null;
 };
 
+// src/render/view-cube.ts
+import {
+  BufferGeometry,
+  CanvasTexture,
+  Float32BufferAttribute as Float32BufferAttribute3,
+  SRGBColorSpace,
+  Vector3 as Vector35
+} from "three";
+var VIEW_NAMES = [
+  // The six faces.
+  "top",
+  "bottom",
+  "front",
+  "back",
+  "left",
+  "right",
+  // The twelve edges.
+  "top-front",
+  "top-back",
+  "top-left",
+  "top-right",
+  "bottom-front",
+  "bottom-back",
+  "bottom-left",
+  "bottom-right",
+  "front-left",
+  "front-right",
+  "back-left",
+  "back-right",
+  // The eight corners.
+  "top-front-left",
+  "top-front-right",
+  "top-back-left",
+  "top-back-right",
+  "bottom-front-left",
+  "bottom-front-right",
+  "bottom-back-left",
+  "bottom-back-right"
+];
+var VIEW_SIGNS = {
+  top: [0, 0, 1],
+  bottom: [0, 0, -1],
+  front: [0, -1, 0],
+  back: [0, 1, 0],
+  left: [-1, 0, 0],
+  right: [1, 0, 0],
+  "top-front": [0, -1, 1],
+  "top-back": [0, 1, 1],
+  "top-left": [-1, 0, 1],
+  "top-right": [1, 0, 1],
+  "bottom-front": [0, -1, -1],
+  "bottom-back": [0, 1, -1],
+  "bottom-left": [-1, 0, -1],
+  "bottom-right": [1, 0, -1],
+  "front-left": [-1, -1, 0],
+  "front-right": [1, -1, 0],
+  "back-left": [-1, 1, 0],
+  "back-right": [1, 1, 0],
+  "top-front-left": [-1, -1, 1],
+  "top-front-right": [1, -1, 1],
+  "top-back-left": [-1, 1, 1],
+  "top-back-right": [1, 1, 1],
+  "bottom-front-left": [-1, -1, -1],
+  "bottom-front-right": [1, -1, -1],
+  "bottom-back-left": [-1, 1, -1],
+  "bottom-back-right": [1, 1, -1]
+};
+function viewKind(name) {
+  const off = VIEW_SIGNS[name].filter((sign) => sign !== 0).length;
+  if (off === 1) return "face";
+  if (off === 2) return "edge";
+  return "corner";
+}
+var DIRECTIONS = new Map(
+  VIEW_NAMES.map((name) => {
+    const [x, y, z] = VIEW_SIGNS[name];
+    const length = Math.hypot(x, y, z);
+    return [name, { x: x / length, y: y / length, z: z / length }];
+  })
+);
+function viewVector(name) {
+  return DIRECTIONS.get(name) ?? { x: 0, y: 0, z: 1 };
+}
+function viewUp(direction) {
+  if (direction.x === 0 && direction.y === 0) {
+    return { x: 0, y: direction.z > 0 ? 1 : -1, z: 0 };
+  }
+  return { x: 0, y: 0, z: 1 };
+}
+function squaredUp(direction, currentUp) {
+  const forward = new Vector35(direction.x, direction.y, direction.z).normalize();
+  const canonical = viewUp(direction);
+  const zero = new Vector35(canonical.x, canonical.y, canonical.z);
+  zero.addScaledVector(forward, -forward.dot(zero)).normalize();
+  const quarter = new Vector35().crossVectors(forward, zero);
+  const current = new Vector35(currentUp.x, currentUp.y, currentUp.z);
+  const rolls = [zero, quarter, zero.clone().negate(), quarter.clone().negate()];
+  const nearest = rolls.reduce(
+    (best, roll) => roll.dot(current) > best.dot(current) ? roll : best
+  );
+  return vec(nearest);
+}
+var CHAMFER = 0.5834;
+function vec(v) {
+  return { x: v.x, y: v.y, z: v.z };
+}
+function cubeZones(chamfer = CHAMFER) {
+  const AXES = [0, 1, 2];
+  return VIEW_NAMES.map((name) => {
+    const kind = viewKind(name);
+    const direction = viewVector(name);
+    const [sx, sy, sz] = VIEW_SIGNS[name];
+    const sign = (axis) => VIEW_SIGNS[name][axis] ?? 0;
+    const normal = new Vector35(direction.x, direction.y, direction.z);
+    let polygon;
+    if (kind === "face") {
+      const up = viewUp(direction);
+      const upVector = new Vector35(up.x, up.y, up.z);
+      const right = normal.clone().negate().cross(upVector).normalize();
+      const square = [
+        [-1, -1],
+        [1, -1],
+        [1, 1],
+        [-1, 1]
+      ];
+      polygon = square.map(
+        ([u, v]) => normal.clone().addScaledVector(right, u * chamfer).addScaledVector(upVector, v * chamfer)
+      );
+    } else if (kind === "edge") {
+      const a = AXES.find((axis) => sign(axis) !== 0) ?? 0;
+      const b = [...AXES].reverse().find((axis) => sign(axis) !== 0) ?? 0;
+      const c = AXES.find((axis) => sign(axis) === 0) ?? 0;
+      const rectangle = [
+        [1, chamfer, -chamfer],
+        [1, chamfer, chamfer],
+        [chamfer, 1, chamfer],
+        [chamfer, 1, -chamfer]
+      ];
+      polygon = rectangle.map(
+        ([onA, onB, onC]) => new Vector35().setComponent(a, sign(a) * onA).setComponent(b, sign(b) * onB).setComponent(c, onC)
+      );
+    } else {
+      const triangle = [
+        [1, chamfer, chamfer],
+        [chamfer, 1, chamfer],
+        [chamfer, chamfer, 1]
+      ];
+      polygon = triangle.map(([onX, onY, onZ]) => new Vector35(sx * onX, sy * onY, sz * onZ));
+    }
+    const [first, second, third] = polygon;
+    if (first && second && third) {
+      const facing = new Vector35().subVectors(second, first).cross(new Vector35().subVectors(third, first));
+      if (facing.dot(normal) < 0) polygon.reverse();
+    }
+    return { name, kind, direction, polygon: polygon.map(vec) };
+  });
+}
+function panelGeometry(zone) {
+  const positions = [];
+  const normals = [];
+  const [first] = zone.polygon;
+  const geometry = new BufferGeometry();
+  if (!first) return geometry;
+  for (let index = 1; index + 1 < zone.polygon.length; index += 1) {
+    const b = zone.polygon[index];
+    const c = zone.polygon[index + 1];
+    if (!b || !c) continue;
+    positions.push(first.x, first.y, first.z, b.x, b.y, b.z, c.x, c.y, c.z);
+    for (let vertex = 0; vertex < 3; vertex += 1) {
+      normals.push(zone.direction.x, zone.direction.y, zone.direction.z);
+    }
+  }
+  geometry.setAttribute("position", new Float32BufferAttribute3(positions, 3));
+  geometry.setAttribute("normal", new Float32BufferAttribute3(normals, 3));
+  return geometry;
+}
+function cubeOutlineGeometry(zones) {
+  const positions = [];
+  for (const zone of zones) {
+    for (let index = 0; index < zone.polygon.length; index += 1) {
+      const from = zone.polygon[index];
+      const to = zone.polygon[(index + 1) % zone.polygon.length];
+      if (!from || !to) continue;
+      positions.push(from.x, from.y, from.z, to.x, to.y, to.z);
+    }
+  }
+  const geometry = new BufferGeometry();
+  geometry.setAttribute("position", new Float32BufferAttribute3(positions, 3));
+  return geometry;
+}
+function labelGeometry(zone) {
+  const positions = [];
+  const uvs = [];
+  const corners = [0, 1, 2, 0, 2, 3];
+  const corner = [
+    [0, 0],
+    [1, 0],
+    [1, 1],
+    [0, 1]
+  ];
+  for (const index of corners) {
+    const point = zone.polygon[index];
+    const uv = corner[index];
+    if (!point || !uv) continue;
+    positions.push(
+      point.x + zone.direction.x * 4e-3,
+      point.y + zone.direction.y * 4e-3,
+      point.z + zone.direction.z * 4e-3
+    );
+    uvs.push(uv[0] ?? 0, uv[1] ?? 0);
+  }
+  const geometry = new BufferGeometry();
+  geometry.setAttribute("position", new Float32BufferAttribute3(positions, 3));
+  geometry.setAttribute("uv", new Float32BufferAttribute3(uvs, 2));
+  return geometry;
+}
+function labelTexture(label, color) {
+  const size = 128;
+  const canvas = document.createElement("canvas");
+  canvas.width = size;
+  canvas.height = size;
+  const context = canvas.getContext("2d");
+  if (context) {
+    const text = label.toUpperCase();
+    const hex = `#${color.toString(16).padStart(6, "0")}`;
+    context.font = `600 ${size / 4}px system-ui, sans-serif`;
+    const width = context.measureText("BOTTOM").width || 1;
+    const scale = Math.min(1, size * 0.78 / width);
+    context.font = `600 ${size / 4 * scale}px system-ui, sans-serif`;
+    context.textAlign = "center";
+    context.textBaseline = "middle";
+    context.fillStyle = hex;
+    context.fillText(text, size / 2, size / 2);
+  }
+  const texture = new CanvasTexture(canvas);
+  texture.colorSpace = SRGBColorSpace;
+  texture.needsUpdate = true;
+  return texture;
+}
+
 // src/viewer.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ViewerControlsContext = createContext(null);
@@ -1049,26 +1364,29 @@ var ViewerScene = ({
   projection,
   scheme,
   freeOrbit,
+  zoomTo,
+  recentreOnDoubleClick,
   theme
 }) => {
   const camera = useThree3((state) => state.camera);
   const size = useThree3((state) => state.size);
   const invalidate = useThree3((state) => state.invalidate);
+  const domElement = useThree3((state) => state.gl.domElement);
   const controlsRef = useRef2(null);
   const contentRef = useRef2(null);
   const lightsRef = useRef2(null);
   const initialFrameComplete = useRef2(false);
   const boundsRef = useRef2(defaultBounds());
   const scratchBox = useMemo3(() => new Box33(), []);
-  const scratchDirection = useMemo3(() => new Vector35(), []);
-  const scratchView = useMemo3(() => new Vector35(), []);
+  const scratchDirection = useMemo3(() => new Vector36(), []);
+  const scratchView = useMemo3(() => new Vector36(), []);
   const measure = useCallback(() => {
     const content = contentRef.current;
     boundsRef.current = content ? contentBounds(content, scratchBox) : defaultBounds();
     return boundsRef.current;
   }, [scratchBox]);
   const frame = useCallback(
-    (direction, transition = false) => {
+    (direction, transition = false, up) => {
       const controls = controlsRef.current;
       if (!controls) return false;
       const bounds = measure();
@@ -1076,6 +1394,10 @@ var ViewerScene = ({
       const distance = fitDistance(projection, size, bounds, DEFAULT_FIT_MARGIN);
       const position = scratchDirection.copy(direction).normalize().multiplyScalar(distance);
       position.add(bounds.center);
+      if (up) {
+        camera.up.set(up.x, up.y, up.z);
+        controls.updateCameraUp();
+      }
       void controls.setLookAt(
         position.x,
         position.y,
@@ -1095,8 +1417,8 @@ var ViewerScene = ({
     (bounds) => {
       const controls = controlsRef.current;
       if (!controls) return false;
-      const target = controls.getTarget(new Vector35());
-      const direction = currentViewDirection(camera, target, new Vector35());
+      const target = controls.getTarget(new Vector36());
+      const direction = currentViewDirection(camera, target, new Vector36());
       const distance = fitDistance(projection, size, bounds, DEFAULT_FIT_MARGIN);
       const position = direction.multiplyScalar(distance).add(bounds.center);
       void controls.setLookAt(
@@ -1119,14 +1441,24 @@ var ViewerScene = ({
   const fitContent = useCallback(() => {
     const controls = controlsRef.current;
     if (!controls) return false;
-    const target = controls.getTarget(new Vector35());
-    return frame(currentViewDirection(camera, target, new Vector35()), true);
+    const target = controls.getTarget(new Vector36());
+    return frame(currentViewDirection(camera, target, new Vector36()), true);
   }, [camera, frame]);
   const resetContent = useCallback(() => {
     const bounds = measure();
     const start = startPosition(projection, size, bounds).sub(bounds.center);
     return frame(start, true);
   }, [frame, measure, projection, size]);
+  useEffect3(() => {
+    if (!recentreOnDoubleClick) return void 0;
+    const doubles = trackDoubleTaps();
+    const recentre = (event) => {
+      if (event.button !== 1) return;
+      if (doubles.isDouble(event)) fitContent();
+    };
+    domElement.addEventListener("auxclick", recentre);
+    return () => domElement.removeEventListener("auxclick", recentre);
+  }, [domElement, fitContent, recentreOnDoubleClick]);
   useEffect3(() => {
     setControls({
       fit: () => {
@@ -1136,16 +1468,20 @@ var ViewerScene = ({
         resetContent();
       },
       setView: (view) => {
-        frame(cadViewDirections[view], true);
+        frame(cadViewDirections[view], true, squaredUp(cadViewDirections[view], camera.up));
       },
       setViewDirection: (direction) => {
-        frame(scratchView.set(direction.x, direction.y, direction.z), true);
+        frame(
+          scratchView.set(direction.x, direction.y, direction.z),
+          true,
+          squaredUp(direction, camera.up)
+        );
       },
       frameBox: (box) => {
         frameBounds(boundsFromBox(box));
       }
     });
-  }, [fitContent, frame, frameBounds, resetContent, scratchView, setControls]);
+  }, [camera, fitContent, frame, frameBounds, resetContent, scratchView, setControls]);
   useEffect3(() => {
     if (initialFrameComplete.current) resetContent();
   }, [projection]);
@@ -1176,7 +1512,15 @@ var ViewerScene = ({
       )
     ] }),
     /* @__PURE__ */ jsx("group", { ref: contentRef, children }),
-    /* @__PURE__ */ jsx(CadCameraControls, { controlsRef, scheme, freeOrbit })
+    /* @__PURE__ */ jsx(
+      CadCameraControls,
+      {
+        controlsRef,
+        scheme,
+        freeOrbit,
+        zoomTo
+      }
+    )
   ] });
 };
 var Viewer = forwardRef(function Viewer2({
@@ -1186,6 +1530,8 @@ var Viewer = forwardRef(function Viewer2({
   projection = "perspective",
   controls = "toolpath",
   freeOrbit = true,
+  zoomTo = "cursor",
+  recentreOnDoubleClick = true,
   theme,
   onPointerMissed
 }, ref) {
@@ -1210,32 +1556,45 @@ var Viewer = forwardRef(function Viewer2({
     tracker.current?.dispose();
     tracker.current = element ? trackTaps(element) : null;
   }, []);
-  return /* @__PURE__ */ jsx(ViewerControlsContext.Provider, { value: proxy, children: /* @__PURE__ */ jsx("div", { className, ref: hold, style: { height: "100%", width: "100%", ...style }, children: /* @__PURE__ */ jsx(
-    Canvas,
+  return /* @__PURE__ */ jsx(ViewerControlsContext.Provider, { value: proxy, children: /* @__PURE__ */ jsx(
+    "div",
     {
-      orthographic: projection === "orthographic",
-      camera: { fov: PERSPECTIVE_FOV, up: [0, 0, 1], position: [1, -1, 1] },
-      dpr: [1, 2],
-      frameloop: "demand",
-      gl: { antialias: true, alpha: true, stencil: true, localClippingEnabled: true },
-      onPointerMissed: (event) => {
-        if (event.button !== 0) return;
-        if (tracker.current?.isTap(event) ?? true) onPointerMissed?.();
+      className,
+      ref: hold,
+      onMouseDown: (event) => {
+        if (event.target instanceof HTMLCanvasElement) event.preventDefault();
       },
+      style: { height: "100%", width: "100%", ...style },
       children: /* @__PURE__ */ jsx(
-        ViewerScene,
+        Canvas,
         {
-          setControls,
-          projection,
-          scheme: controls,
-          freeOrbit,
-          theme: resolved,
-          children
-        }
+          orthographic: projection === "orthographic",
+          camera: { fov: PERSPECTIVE_FOV, up: [0, 0, 1], position: [1, -1, 1] },
+          dpr: [1, 2],
+          frameloop: "demand",
+          gl: { antialias: true, alpha: true, stencil: true, localClippingEnabled: true },
+          onPointerMissed: (event) => {
+            if (event.button !== 0) return;
+            if (tracker.current?.isTap(event) ?? true) onPointerMissed?.();
+          },
+          children: /* @__PURE__ */ jsx(
+            ViewerScene,
+            {
+              setControls,
+              projection,
+              scheme: controls,
+              freeOrbit,
+              zoomTo,
+              recentreOnDoubleClick,
+              theme: resolved,
+              children
+            }
+          )
+        },
+        projection
       )
-    },
-    projection
-  ) }) });
+    }
+  ) });
 });
 
 // src/section-view.tsx
@@ -1254,22 +1613,22 @@ import {
   Raycaster as Raycaster2,
   ReplaceStencilOp,
   Vector2 as Vector22,
-  Vector3 as Vector37
+  Vector3 as Vector38
 } from "three";
 
 // src/render/directions.ts
-import { Vector3 as Vector36 } from "three";
-var CONE_AXIS = new Vector36(0, 1, 0);
+import { Vector3 as Vector37 } from "three";
+var CONE_AXIS = new Vector37(0, 1, 0);
 var LENGTH = 0.45;
 var HEAD = 0.45;
 var HEAD_RADIUS = 0.3;
 var SHAFT_RADIUS = 0.09;
 var GAP = 0.2;
 function arrowPlacement(direction, box) {
-  const center = box.getCenter(new Vector36());
-  const half = box.getSize(new Vector36()).multiplyScalar(0.5);
+  const center = box.getCenter(new Vector37());
+  const half = box.getSize(new Vector37()).multiplyScalar(0.5);
   const radius = half.length() || 1;
-  const axis = new Vector36(direction.x, direction.y, direction.z);
+  const axis = new Vector37(direction.x, direction.y, direction.z);
   if (axis.lengthSq() === 0) axis.set(0, 0, 1);
   axis.normalize();
   let exit = Number.POSITIVE_INFINITY;
@@ -1291,7 +1650,7 @@ var FURNITURE = { [EXCLUDE_FROM_FRAME]: true };
 function resolveSectionPlane(options, box) {
   if (!options?.enabled || box.isEmpty()) return null;
   const normal = options.plane?.normal ?? options.normal ?? DEFAULT_NORMAL;
-  const axis = new Vector37(normal.x, normal.y, normal.z);
+  const axis = new Vector38(normal.x, normal.y, normal.z);
   if (axis.lengthSq() === 0) axis.set(0, 0, 1);
   axis.normalize();
   const bounds = sectionBounds(box, normal);
@@ -1328,15 +1687,15 @@ var SectionView = ({
   const handleRef = useRef3(null);
   const [hovered, setHovered] = useState(false);
   const dragging = useRef3(null);
-  const centre = useMemo4(() => box.getCenter(new Vector37()), [box]);
-  const span = useMemo4(() => box.getSize(new Vector37()).length(), [box]);
+  const centre = useMemo4(() => box.getCenter(new Vector38()), [box]);
+  const span = useMemo4(() => box.getSize(new Vector38()).length(), [box]);
   const clip = useMemo4(() => [plane], [plane]);
   const capPosition = useMemo4(() => {
     const point = centre.clone();
     return point.addScaledVector(plane.normal, -(plane.constant + plane.normal.dot(centre)));
   }, [centre, plane]);
   const capQuaternion = useMemo4(
-    () => new Quaternion2().setFromUnitVectors(new Vector37(0, 0, 1), plane.normal),
+    () => new Quaternion2().setFromUnitVectors(new Vector38(0, 0, 1), plane.normal),
     [plane]
   );
   const handleQuaternion = useMemo4(
@@ -1364,7 +1723,7 @@ var SectionView = ({
     event.stopPropagation();
     const view = camera.position.clone().sub(capPosition).normalize();
     const surface = dragPlane(plane.normal.clone(), view, capPosition);
-    const hit = event.ray.intersectPlane(surface, new Vector37());
+    const hit = event.ray.intersectPlane(surface, new Vector38());
     const start = {
       plane: surface,
       from: hit ? hit.dot(plane.normal) : 0,
@@ -1381,7 +1740,7 @@ var SectionView = ({
         -((native.clientY - rect.top) / rect.height) * 2 + 1
       );
       raycaster.setFromCamera(pointer, camera);
-      const point = raycaster.ray.intersectPlane(start.plane, new Vector37());
+      const point = raycaster.ray.intersectPlane(start.plane, new Vector38());
       if (!point) return;
       onDrag(start.constant - (point.dot(plane.normal) - start.from));
       invalidate();
@@ -1528,6 +1887,7 @@ var PartMesh = ({
   activeDirection = null,
   section,
   onSectionChange,
+  onAdjacency,
   focusFeature = null,
   onHover,
   onPick,
@@ -1569,6 +1929,10 @@ var PartMesh = ({
     invalidate();
   }, [invalidate, part]);
   useEffect4(() => () => part.dispose(), [part]);
+  const adjacency = useMemo5(() => regionAdjacency(model, geometry), [model, geometry]);
+  useEffect4(() => {
+    onAdjacency?.(adjacency);
+  }, [adjacency, onAdjacency]);
   const framed = useRef5(null);
   useEffect4(() => {
     if (focusFeature === null || focusFeature === framed.current) return;
@@ -1664,6 +2028,15 @@ var PartMesh = ({
           if (!isTap(event.nativeEvent)) return;
           const pick = pickFor(event);
           if (pick) onPick?.(pick);
+        },
+        onPointerUp: (event) => {
+          if (event.nativeEvent.button !== 2) return;
+          if (!isTap(event.nativeEvent)) return;
+          const pick = pickFor(event);
+          if (pick) onPick?.(pick);
+        },
+        onContextMenu: (event) => {
+          if (pickFor(event)) event.nativeEvent.preventDefault();
         }
       }
     ),
@@ -1680,9 +2053,9 @@ var PartMesh = ({
     ) : null
   ] });
 };
-var ORIGIN = new Vector38();
-var UP = new Vector38(0, 0, 1);
-var TARGET = new Vector38();
+var ORIGIN = new Vector39();
+var UP = new Vector39(0, 0, 1);
+var TARGET = new Vector39();
 function readTarget(controls) {
   if (controls && typeof controls.getTarget === "function") {
     return controls.getTarget(TARGET);
@@ -1817,7 +2190,7 @@ function disposeMaterials(scene) {
 }
 
 // src/engine/normals.ts
-import { Float32BufferAttribute as Float32BufferAttribute3 } from "three";
+import { Float32BufferAttribute as Float32BufferAttribute4 } from "three";
 function smoothRegionNormals(geometry, regions) {
   const position = geometry.getAttribute("position");
   if (!position || geometry.index) return;
@@ -1883,7 +2256,7 @@ function smoothRegionNormals(geometry, regions) {
     normals[vertex * 3 + 1] = y / length;
     normals[vertex * 3 + 2] = z / length;
   }
-  geometry.setAttribute("normal", new Float32BufferAttribute3(normals, 3));
+  geometry.setAttribute("normal", new Float32BufferAttribute4(normals, 3));
 }
 
 // src/engine/geometry-cache.ts
@@ -2250,12 +2623,12 @@ function readDirections(value, issues) {
   }
   const directions = [];
   for (const [i, raw] of value.entries()) {
-    const vec = readVec3(raw);
-    if (vec === null) {
+    const vec2 = readVec3(raw);
+    if (vec2 === null) {
       issues.push(`candidateDirections[${i}] is not a vector`);
       continue;
     }
-    directions.push(vec);
+    directions.push(vec2);
   }
   return directions;
 }
@@ -2355,6 +2728,8 @@ export {
   TAP_SLOP,
   movedFar,
   trackTaps,
+  DOUBLE_TAP_MS,
+  trackDoubleTaps,
   useTapGuard,
   visualSurfaces,
   regionEdgesGeometry,
@@ -2362,6 +2737,7 @@ export {
   buildRegionTexels,
   buildRegionAttribute,
   createPart,
+  regionAdjacency,
   FEATURE_TYPE_RANKS,
   featureTypeRank,
   rankOwners,
@@ -2388,6 +2764,18 @@ export {
   currentViewDirection,
   ExtendedCameraControls,
   CadCameraControls,
+  VIEW_NAMES,
+  VIEW_SIGNS,
+  viewKind,
+  viewVector,
+  viewUp,
+  squaredUp,
+  CHAMFER,
+  cubeZones,
+  panelGeometry,
+  cubeOutlineGeometry,
+  labelGeometry,
+  labelTexture,
   useViewerControls,
   Viewer,
   CONE_AXIS,