@toolpath/viewer 2.1.0 → 2.2.1

package/README.md

@@ -357,9 +357,9 @@ individual buttons to use only the controls and order your application needs.
 </ViewerToolbarProvider>
 ```
 
-`ViewerToolbar.Controls`, `Divider`, and the fourteen `*Button` components are available on
+`ViewerToolbar.Controls`, `Divider`, and the fifteen `*Button` components are available on
 `ViewerToolbar`: `StockButton`, `AxesButton`, `GridButton`, `BananaButton`, `ToolsButton`, `DirectionsButton`,
-`HoverButton`, `FocusButton`, `WireframeButton`, `SectionButton`, `MeasureButton`, `FitButton`,
+`DfmButton` (shows or hides an application's DFM flags), `HoverButton`, `FocusButton`, `WireframeButton`, `SectionButton`, `MeasureButton`, `FitButton`,
 `ResetButton`, and `TopButton`. A rendered button requires its matching provider control. For an
 application-specific toolbar component, `useViewerToolbar()` reads the same controls from inside
 the provider.

package/dist/{chunk-WTTOUG4P.js → chunk-7S6SIYHL.js}

@@ -1,13 +1,13 @@
 // src/engine/engine-part.tsx
-import { useEffect as useEffect7, useMemo as useMemo7 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo8 } from "react";
 
 // src/part-mesh.tsx
-import { useThree as useThree7 } from "@react-three/fiber";
+import { useThree as useThree8 } from "@react-three/fiber";
 import {
   useCallback as useCallback3,
-  useEffect as useEffect6,
-  useLayoutEffect as useLayoutEffect2,
-  useMemo as useMemo6,
+  useEffect as useEffect7,
+  useLayoutEffect as useLayoutEffect3,
+  useMemo as useMemo7,
   useRef as useRef6,
   useSyncExternalStore
 } from "react";
@@ -2526,10 +2526,10 @@ var Viewer = forwardRef(function Viewer2({
 });
 
 // src/section-view.tsx
-import { useFrame as useFrame4, useThree as useThree5 } from "@react-three/fiber";
-import { useCallback as useCallback2, useEffect as useEffect5, useLayoutEffect, useMemo as useMemo5, useRef as useRef4, useState } from "react";
+import { useFrame as useFrame4, useThree as useThree6 } from "@react-three/fiber";
+import { useCallback as useCallback2, useEffect as useEffect6, useLayoutEffect as useLayoutEffect2, useMemo as useMemo6, useRef as useRef4, useState } from "react";
 import {
-  Color as Color3,
+  Color as Color4,
   DoubleSide as DoubleSide4,
   EdgesGeometry,
   Mesh as Mesh3,
@@ -2538,42 +2538,209 @@ import {
   Quaternion as Quaternion2,
   Raycaster as Raycaster2,
   Scene,
-  Vector2 as Vector24,
+  Vector2 as Vector25,
   Vector3 as Vector310
 } from "three";
 
-// src/render/directions.ts
-import { Vector3 as Vector39 } from "three";
-var CONE_AXIS = new Vector39(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 Vector39());
-  const half = box.getSize(new Vector39()).multiplyScalar(0.5);
-  const radius = half.length() || 1;
-  const axis = new Vector39(direction.x, direction.y, direction.z);
-  if (axis.lengthSq() === 0) axis.set(0, 0, 1);
-  axis.normalize();
-  let exit = Number.POSITIVE_INFINITY;
-  for (const [component, extent] of [
-    [axis.x, half.x],
-    [axis.y, half.y],
-    [axis.z, half.z]
-  ]) {
-    if (Math.abs(component) > 1e-6) exit = Math.min(exit, extent / Math.abs(component));
-  }
-  if (!Number.isFinite(exit)) exit = radius;
-  return { tip: center.addScaledVector(axis, exit + radius * GAP), length: radius * LENGTH };
+// src/arrow-mesh.tsx
+import { useThree as useThree5 } from "@react-three/fiber";
+import { useEffect as useEffect5, useLayoutEffect, useMemo as useMemo5 } from "react";
+
+// src/render/arrow-material.ts
+import { AlwaysDepth, Color as Color2, ShaderMaterial } from "three";
+var VERTEX = (
+  /* glsl */
+  `
+varying vec3 vNormal;
+
+void main() {
+  vNormal = normalize(normalMatrix * normal);
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`
+);
+var FRAGMENT = (
+  /* glsl */
+  `
+uniform vec3 uColor;
+uniform float uOpacity;
+
+varying vec3 vNormal;
+
+// Above, to the left and toward the camera, in the camera's own frame.
+const vec3 KEY = vec3(-0.4, 0.6, 0.7);
+
+void main() {
+  // Wrapped, and over a narrow range: a quarter darker at most, so the shape
+  // shows without the colour going anywhere.
+  float light = mix(0.75, 1.0, 0.5 + 0.5 * dot(normalize(vNormal), normalize(KEY)));
+  gl_FragColor = vec4(uColor * light, uOpacity);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}
+`
+);
+function createArrowMaterial() {
+  const uniforms = {
+    uColor: { value: new Color2() },
+    uOpacity: { value: 1 }
+  };
+  return new ShaderMaterial({
+    vertexShader: VERTEX,
+    fragmentShader: FRAGMENT,
+    uniforms,
+    transparent: true
+  });
+}
+function createArrowDepthMaterial() {
+  const material = createArrowMaterial();
+  material.colorWrite = false;
+  return material;
+}
+function applyArrowColor(material, color, opacity) {
+  material.uniforms.uColor.value.set(color);
+  material.uniforms.uOpacity.value = opacity;
+}
+var RESET_VERTEX = (
+  /* glsl */
+  `
+void main() {
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  // On the far plane, so what it leaves in the depth buffer is "nothing here".
+  gl_Position.z = gl_Position.w;
+}
+`
+);
+var RESET_FRAGMENT = (
+  /* glsl */
+  `
+void main() {
+  gl_FragColor = vec4(0.0);
+}
+`
+);
+function createDepthResetMaterial() {
+  return new ShaderMaterial({
+    vertexShader: RESET_VERTEX,
+    fragmentShader: RESET_FRAGMENT,
+    transparent: true,
+    colorWrite: false,
+    depthFunc: AlwaysDepth
+  });
+}
+
+// src/arrow-mesh.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var ArrowMesh = ({ geometry, color, opacity, onTop = false, events }) => {
+  const invalidate = useThree5((state) => state.invalidate);
+  const material = useMemo5(() => createArrowMaterial(), []);
+  useEffect5(() => () => material.dispose(), [material]);
+  const depth = useMemo5(() => createArrowDepthMaterial(), []);
+  useEffect5(() => () => depth.dispose(), [depth]);
+  const reset = useMemo5(() => onTop ? createDepthResetMaterial() : null, [onTop]);
+  useEffect5(() => () => reset?.dispose(), [reset]);
+  useLayoutEffect(() => {
+    applyArrowColor(material, color, opacity);
+    invalidate();
+  }, [color, invalidate, material, opacity]);
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    reset ? /* @__PURE__ */ jsx4("mesh", { geometry, material: reset, renderOrder: 0, raycast: () => null }) : null,
+    /* @__PURE__ */ jsx4("mesh", { geometry, material: depth, renderOrder: 1, raycast: () => null }),
+    /* @__PURE__ */ jsx4("mesh", { geometry, material, renderOrder: 2, ...events })
+  ] });
+};
+
+// src/render/arrow.ts
+import { LatheGeometry, Vector2 as Vector23, Vector3 as Vector39 } from "three";
+var ARROW_AXIS2 = new Vector39(0, 1, 0);
+var ARROW_ROUND = 32;
+var HEAD_LENGTH = 0.415;
+var HEAD_RADIUS = 0.153;
+var SHAFT_RADIUS = 0.0515;
+var HANDLE_TIP = 0.76;
+var HANDLE_HEAD_LENGTH = 0.3;
+var HANDLE_HEAD_RADIUS = 0.14;
+var HANDLE_SHAFT_RADIUS = 0.035;
+var HANDLE_BEAD_RADIUS = 0.1;
+var RIM_ROUND = 6e-3;
+var NECK_ROUND = 8e-3;
+var BEAD_ROUND = 0.02;
+var ROUND_STEPS = 4;
+var CAP_STEPS = 6;
+var BEAD_STEPS = 12;
+var head = ({ length, radius, shaft }) => [
+  { at: new Vector23(0, 0) },
+  { at: new Vector23(radius, length), round: RIM_ROUND },
+  { at: new Vector23(shaft, length), round: NECK_ROUND }
+];
+var rounded = (corners) => corners.flatMap(({ at, round = 0 }, index) => {
+  const before = corners[index - 1]?.at;
+  const after = corners[index + 1]?.at;
+  if (!(round > 0) || !before || !after) return [at];
+  const back = before.clone().sub(at);
+  const ahead = after.clone().sub(at);
+  const reach = Math.min(back.length(), ahead.length()) / 2;
+  back.normalize();
+  ahead.normalize();
+  const angle = Math.acos(Math.min(Math.max(back.dot(ahead), -1), 1));
+  if (angle > Math.PI - 1e-6 || angle < 1e-6) return [at];
+  const half = angle / 2;
+  const offset = Math.min(round / Math.tan(half), reach);
+  const radius = offset * Math.tan(half);
+  const centre = at.clone().addScaledVector(back.clone().add(ahead).normalize(), radius / Math.sin(half));
+  const from = at.clone().addScaledVector(back, offset).sub(centre);
+  const to = at.clone().addScaledVector(ahead, offset).sub(centre);
+  const start = Math.atan2(from.y, from.x);
+  let sweep = Math.atan2(to.y, to.x) - start;
+  if (sweep > Math.PI) sweep -= Math.PI * 2;
+  if (sweep < -Math.PI) sweep += Math.PI * 2;
+  return Array.from({ length: ROUND_STEPS + 1 }, (_, step) => {
+    const turn = start + sweep * step / ROUND_STEPS;
+    return new Vector23(centre.x + Math.cos(turn) * radius, centre.y + Math.sin(turn) * radius);
+  });
+});
+function arrowProfile() {
+  const body = rounded([
+    ...head({ length: HEAD_LENGTH, radius: HEAD_RADIUS, shaft: SHAFT_RADIUS }),
+    { at: new Vector23(SHAFT_RADIUS, 1 - SHAFT_RADIUS) }
+  ]);
+  const tail = Array.from({ length: CAP_STEPS }, (_, step) => {
+    const turn = (step + 1) / CAP_STEPS * (Math.PI / 2);
+    return new Vector23(
+      step + 1 === CAP_STEPS ? 0 : Math.cos(turn) * SHAFT_RADIUS,
+      1 - SHAFT_RADIUS + Math.sin(turn) * SHAFT_RADIUS
+    );
+  });
+  return [...body, ...tail];
+}
+function handleProfile() {
+  const lower = head({
+    length: HANDLE_HEAD_LENGTH,
+    radius: HANDLE_HEAD_RADIUS,
+    shaft: HANDLE_SHAFT_RADIUS
+  }).map(({ at, round }) => ({ at: new Vector23(at.x, at.y - HANDLE_TIP), round }));
+  const upper = lower.slice().reverse().map(({ at, round }) => ({ at: new Vector23(at.x, -at.y), round }));
+  const meet = Math.acos(HANDLE_SHAFT_RADIUS / HANDLE_BEAD_RADIUS);
+  const bead = Array.from({ length: BEAD_STEPS + 1 }, (_, step) => {
+    const turn = -meet + 2 * meet * step / BEAD_STEPS;
+    const at = new Vector23(Math.cos(turn), Math.sin(turn)).multiplyScalar(HANDLE_BEAD_RADIUS);
+    return { at, round: step === 0 || step === BEAD_STEPS ? BEAD_ROUND : 0 };
+  });
+  return rounded([...lower, ...bead, ...upper]);
 }
+var turned = (profile) => {
+  const geometry = new LatheGeometry(profile, ARROW_ROUND);
+  geometry.normalizeNormals();
+  return geometry;
+};
+var arrowGeometry = () => turned(arrowProfile());
+var handleGeometry = () => turned(handleProfile());
 
 // src/render/section-cap.ts
 import {
   AlwaysStencilFunc,
   BackSide,
-  Color as Color2,
+  Color as Color3,
   DecrementWrapStencilOp,
   DoubleSide as DoubleSide3,
   FrontSide,
@@ -2582,11 +2749,11 @@ import {
   MeshBasicMaterial as MeshBasicMaterial2,
   NotEqualStencilFunc,
   ReplaceStencilOp,
-  ShaderMaterial,
-  Vector2 as Vector23,
+  ShaderMaterial as ShaderMaterial2,
+  Vector2 as Vector24,
   WebGLRenderTarget
 } from "three";
-var VERTEX = (
+var VERTEX2 = (
   /* glsl */
   `
 void main() {
@@ -2594,7 +2761,7 @@ void main() {
 }
 `
 );
-var FRAGMENT = (
+var FRAGMENT2 = (
   /* glsl */
   `
 uniform sampler2D uMask;
@@ -2642,17 +2809,17 @@ function createMaskTarget() {
 function createCapMaterial(mask) {
   const uniforms = {
     uMask: { value: mask },
-    uResolution: { value: new Vector23(1, 1) },
-    uFill: { value: new Color2() },
-    uHatch: { value: new Color2() },
-    uOutline: { value: new Color2() },
+    uResolution: { value: new Vector24(1, 1) },
+    uFill: { value: new Color3() },
+    uHatch: { value: new Color3() },
+    uOutline: { value: new Color3() },
     uPitch: { value: CAP_HATCH.pitch },
     uLine: { value: CAP_HATCH.line },
     uThickness: { value: CAP_HATCH.outline }
   };
-  return new ShaderMaterial({
-    vertexShader: VERTEX,
-    fragmentShader: FRAGMENT,
+  return new ShaderMaterial2({
+    vertexShader: VERTEX2,
+    fragmentShader: FRAGMENT2,
     uniforms,
     side: DoubleSide3,
     stencilWrite: true,
@@ -2711,7 +2878,7 @@ function createMaskMaterial() {
 }
 
 // src/section-view.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var FURNITURE2 = { [EXCLUDE_FROM_FRAME]: true };
 function resolveSectionPlane(options, box) {
   if (!options?.enabled || box.isEmpty()) return null;
@@ -2747,43 +2914,45 @@ var SectionView = ({
   showHandle,
   onDrag
 }) => {
-  const camera = useThree5((state) => state.camera);
-  const size = useThree5((state) => state.size);
-  const dpr = useThree5((state) => state.viewport.dpr);
-  const gl = useThree5((state) => state.gl);
-  const invalidate = useThree5((state) => state.invalidate);
-  const controls = useThree5((state) => state.controls);
-  const domElement = useThree5((state) => state.gl.domElement);
+  const camera = useThree6((state) => state.camera);
+  const size = useThree6((state) => state.size);
+  const dpr = useThree6((state) => state.viewport.dpr);
+  const gl = useThree6((state) => state.gl);
+  const invalidate = useThree6((state) => state.invalidate);
+  const controls = useThree6((state) => state.controls);
+  const domElement = useThree6((state) => state.gl.domElement);
   const handleRef = useRef4(null);
   const [hovered, setHovered] = useState(false);
   const dragging = useRef4(null);
-  const span = useMemo5(() => box.getSize(new Vector310()).length(), [box]);
+  const span = useMemo6(() => box.getSize(new Vector310()).length(), [box]);
   const frameSize = span * SECTION_GIZMO_FRAME_SCALE;
-  const directionColor2 = useMemo5(() => sectionDirectionColor(plane.normal), [plane]);
+  const directionColor2 = useMemo6(() => sectionDirectionColor(plane.normal), [plane]);
   const resolvedHandleColor = sectionHandleColor(handleColor, directionColor2);
-  const clip = useMemo5(() => [plane], [plane]);
-  const capPosition = useMemo5(() => sectionAnchor(box, plane), [box, plane]);
-  const capQuaternion = useMemo5(() => new Quaternion2().setFromUnitVectors(Z, plane.normal), [plane]);
-  const handleQuaternion = useMemo5(
-    () => new Quaternion2().setFromUnitVectors(CONE_AXIS, plane.normal.clone().negate()),
+  const clip = useMemo6(() => [plane], [plane]);
+  const capPosition = useMemo6(() => sectionAnchor(box, plane), [box, plane]);
+  const capQuaternion = useMemo6(() => new Quaternion2().setFromUnitVectors(Z, plane.normal), [plane]);
+  const handleQuaternion = useMemo6(
+    () => new Quaternion2().setFromUnitVectors(ARROW_AXIS2, plane.normal.clone().negate()),
     [plane]
   );
-  const frameSurface = useMemo5(() => new PlaneGeometry(frameSize, frameSize), [frameSize]);
-  useEffect5(() => () => frameSurface.dispose(), [frameSurface]);
-  const frameEdges = useMemo5(() => new EdgesGeometry(frameSurface), [frameSurface]);
-  useEffect5(() => () => frameEdges.dispose(), [frameEdges]);
-  const stencils = useMemo5(() => createStencilMaterials([]), []);
-  useEffect5(() => () => stencils.forEach((material) => material.dispose()), [stencils]);
-  useLayoutEffect(() => {
+  const frameSurface = useMemo6(() => new PlaneGeometry(frameSize, frameSize), [frameSize]);
+  useEffect6(() => () => frameSurface.dispose(), [frameSurface]);
+  const frameEdges = useMemo6(() => new EdgesGeometry(frameSurface), [frameSurface]);
+  useEffect6(() => () => frameEdges.dispose(), [frameEdges]);
+  const handleShape = useMemo6(() => handleGeometry(), []);
+  useEffect6(() => () => handleShape.dispose(), [handleShape]);
+  const stencils = useMemo6(() => createStencilMaterials([]), []);
+  useEffect6(() => () => stencils.forEach((material) => material.dispose()), [stencils]);
+  useLayoutEffect2(() => {
     for (const material of stencils) material.clippingPlanes = clip;
   }, [clip, stencils]);
-  const mask = useMemo5(() => createMaskTarget(), []);
-  useEffect5(() => () => mask.dispose(), [mask]);
-  const cap = useMemo5(() => createCapMaterial(mask.texture), [mask]);
-  useEffect5(() => () => cap.dispose(), [cap]);
-  const quad = useMemo5(() => new PlaneGeometry(span * 1.5, span * 1.5), [span]);
-  useEffect5(() => () => quad.dispose(), [quad]);
-  const maskScene = useMemo5(() => {
+  const mask = useMemo6(() => createMaskTarget(), []);
+  useEffect6(() => () => mask.dispose(), [mask]);
+  const cap = useMemo6(() => createCapMaterial(mask.texture), [mask]);
+  useEffect6(() => () => cap.dispose(), [cap]);
+  const quad = useMemo6(() => new PlaneGeometry(span * 1.5, span * 1.5), [span]);
+  useEffect6(() => () => quad.dispose(), [quad]);
+  const maskScene = useMemo6(() => {
     const scene = new Scene();
     const [back, front] = stencils;
     const backMesh = new Mesh3(geometry, back);
@@ -2795,19 +2964,19 @@ var SectionView = ({
     scene.add(backMesh, frontMesh, maskMesh);
     return { scene, maskMesh };
   }, [geometry, quad, stencils]);
-  useEffect5(() => () => maskScene.maskMesh.material.dispose(), [maskScene]);
-  useEffect5(() => {
+  useEffect6(() => () => maskScene.maskMesh.material.dispose(), [maskScene]);
+  useEffect6(() => {
     maskScene.maskMesh.position.copy(capPosition);
     maskScene.maskMesh.quaternion.copy(capQuaternion);
   }, [capPosition, capQuaternion, maskScene]);
-  useLayoutEffect(() => {
-    const buffer = gl.getDrawingBufferSize(new Vector24());
+  useLayoutEffect2(() => {
+    const buffer = gl.getDrawingBufferSize(new Vector25());
     mask.setSize(buffer.x, buffer.y);
     cap.uniforms.uResolution.value.copy(buffer);
     applyCapTheme(cap, theme, dpr);
     invalidate();
   }, [cap, dpr, gl, invalidate, mask, size, theme]);
-  const clearColor = useMemo5(() => new Color3(), []);
+  const clearColor = useMemo6(() => new Color4(), []);
   useFrame4(({ gl: renderer, camera: eye }) => {
     const previousAlpha = renderer.getClearAlpha();
     renderer.getClearColor(clearColor);
@@ -2848,7 +3017,7 @@ var SectionView = ({
     dragging.current = start;
     setControlsEnabled(false);
     const raycaster = new Raycaster2();
-    const pointer = new Vector24();
+    const pointer = new Vector25();
     const move = (native) => {
       const rect = domElement.getBoundingClientRect();
       pointer.set(
@@ -2888,8 +3057,8 @@ var SectionView = ({
     // Excluded from framing, all of it. The cap is a quad half again as wide as
     // the part's diagonal, so a Fit that measured it would frame the cut rather
     // than the part and leave the part a speck in the middle of it.
-    /* @__PURE__ */ jsxs3("group", { userData: FURNITURE2, children: [
-      /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsxs4("group", { userData: FURNITURE2, children: [
+      /* @__PURE__ */ jsx5(
         "mesh",
         {
           geometry,
@@ -2898,7 +3067,7 @@ var SectionView = ({
           raycast: () => null
         }
       ),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         "mesh",
         {
           geometry,
@@ -2907,7 +3076,7 @@ var SectionView = ({
           raycast: () => null
         }
       ),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         "mesh",
         {
           geometry: quad,
@@ -2918,15 +3087,15 @@ var SectionView = ({
           raycast: () => null
         }
       ),
-      showHandle && onDrag ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-        /* @__PURE__ */ jsxs3(
+      showHandle && onDrag ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+        /* @__PURE__ */ jsxs4(
           "group",
           {
             position: capPosition,
             quaternion: capQuaternion,
             renderOrder: SECTION_RENDER_ORDER.outline,
             children: [
-              /* @__PURE__ */ jsx4("mesh", { geometry: frameSurface, raycast: () => null, children: /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx5("mesh", { geometry: frameSurface, raycast: () => null, children: /* @__PURE__ */ jsx5(
                 "meshBasicMaterial",
                 {
                   color: directionColor2,
@@ -2937,59 +3106,27 @@ var SectionView = ({
                   depthWrite: false
                 }
               ) }),
-              /* @__PURE__ */ jsx4("lineSegments", { geometry: frameEdges, raycast: () => null, children: /* @__PURE__ */ jsx4("lineBasicMaterial", { color: directionColor2, depthTest: false, depthWrite: false }) })
+              /* @__PURE__ */ jsx5("lineSegments", { geometry: frameEdges, raycast: () => null, children: /* @__PURE__ */ jsx5("lineBasicMaterial", { color: directionColor2, depthTest: false, depthWrite: false }) })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsx5(
           "group",
           {
             ref: handleRef,
             position: capPosition,
             quaternion: handleQuaternion,
             renderOrder: SECTION_RENDER_ORDER.handle,
-            children: [
-              /* @__PURE__ */ jsxs3("mesh", { ...grab, children: [
-                /* @__PURE__ */ jsx4("sphereGeometry", { args: [0.1, 16, 12] }),
-                /* @__PURE__ */ jsx4(
-                  "meshBasicMaterial",
-                  {
-                    color: hovered ? theme.hover : resolvedHandleColor,
-                    depthTest: false
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs3("mesh", { ...grab, children: [
-                /* @__PURE__ */ jsx4("cylinderGeometry", { args: [0.035, 0.035, 0.9, 12] }),
-                /* @__PURE__ */ jsx4(
-                  "meshBasicMaterial",
-                  {
-                    color: hovered ? theme.hover : resolvedHandleColor,
-                    depthTest: false
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs3("mesh", { position: [0, 0.61, 0], ...grab, children: [
-                /* @__PURE__ */ jsx4("coneGeometry", { args: [0.15, 0.3, 20] }),
-                /* @__PURE__ */ jsx4(
-                  "meshBasicMaterial",
-                  {
-                    color: hovered ? theme.hover : resolvedHandleColor,
-                    depthTest: false
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs3("mesh", { position: [0, -0.61, 0], rotation: [Math.PI, 0, 0], ...grab, children: [
-                /* @__PURE__ */ jsx4("coneGeometry", { args: [0.15, 0.3, 20] }),
-                /* @__PURE__ */ jsx4(
-                  "meshBasicMaterial",
-                  {
-                    color: hovered ? theme.hover : resolvedHandleColor,
-                    depthTest: false
-                  }
-                )
-              ] })
-            ]
+            children: /* @__PURE__ */ jsx5(
+              ArrowMesh,
+              {
+                geometry: handleShape,
+                color: hovered ? theme.hover : resolvedHandleColor,
+                opacity: 1,
+                onTop: true,
+                events: grab
+              }
+            )
           }
         )
       ] }) : null
@@ -2998,11 +3135,11 @@ var SectionView = ({
 };
 
 // src/content-box.ts
-import { useFrame as useFrame5, useThree as useThree6 } from "@react-three/fiber";
+import { useFrame as useFrame5, useThree as useThree7 } from "@react-three/fiber";
 import { useRef as useRef5, useState as useState2 } from "react";
 import { Box3 as Box34 } from "three";
 function useContentBox() {
-  const scene = useThree6((state) => state.scene);
+  const scene = useThree7((state) => state.scene);
   const [box, setBox] = useState2(() => new Box34());
   const measured = useRef5(false);
   useFrame5(() => {
@@ -3017,7 +3154,7 @@ function useContentBox() {
 }
 
 // src/part-mesh.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var PartMesh = ({
   model,
   geometry,
@@ -3041,13 +3178,13 @@ var PartMesh = ({
   display = "solid",
   children
 }) => {
-  const { camera, controls, invalidate } = useThree7();
-  const context = useMemo6(() => ({ model, geometry }), [model, geometry]);
+  const { camera, controls, invalidate } = useThree8();
+  const context = useMemo7(() => ({ model, geometry }), [model, geometry]);
   const viewerControls = useViewerControls();
   const resolved = useStableTheme(theme);
   const currentTheme = useRef6(resolved);
   currentTheme.current = resolved;
-  const part = useMemo6(() => createPart(model, geometry, currentTheme.current), [geometry, model]);
+  const part = useMemo7(() => createPart(model, geometry, currentTheme.current), [geometry, model]);
   const hoverRegion = useRef6(null);
   const onHoverRef = useRef6(onHover);
   onHoverRef.current = onHover;
@@ -3056,7 +3193,7 @@ var PartMesh = ({
   const shared = useSyncExternalStore(store.subscribe, store.get, store.get);
   const controlled = section !== void 0;
   const options = controlled ? section : shared ?? void 0;
-  const cut = useMemo6(() => resolveSectionPlane(options, box), [box, options]);
+  const cut = useMemo7(() => resolveSectionPlane(options, box), [box, options]);
   const engaged = useSyncExternalStore(store.subscribe, store.isEngaged, store.isEngaged);
   const pressedWhileEngaged = useRef6(false);
   const layers = useRef6({
@@ -3084,19 +3221,19 @@ var PartMesh = ({
     );
     invalidate();
   }, [invalidate, part]);
-  useEffect6(() => () => part.dispose(), [part]);
-  const adjacency = useMemo6(() => regionAdjacency(model, geometry), [model, geometry]);
-  useEffect6(() => {
+  useEffect7(() => () => part.dispose(), [part]);
+  const adjacency = useMemo7(() => regionAdjacency(model, geometry), [model, geometry]);
+  useEffect7(() => {
     onAdjacency?.(adjacency);
   }, [adjacency, onAdjacency]);
   const framed = useRef6(null);
-  useEffect6(() => {
+  useEffect7(() => {
     if (focusFeature === null || focusFeature === framed.current) return;
     framed.current = focusFeature;
     const box2 = part.boxForFeature(focusFeature);
     if (box2) viewerControls.frameBox(box2);
   }, [focusFeature, part, viewerControls]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     part.setTheme(resolved);
     repaint();
   }, [part, repaint, resolved]);
@@ -3105,20 +3242,20 @@ var PartMesh = ({
   const selectionRef = useRef6(selection);
   selectionRef.current = selection;
   const focusKey = focusStateKey(focus, selection);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     part.setFocus(selectionRef.current, focusRef.current);
     invalidate();
   }, [focusKey, invalidate, part]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     part.setDisplay(display, showEdges);
     invalidate();
   }, [display, invalidate, part, showEdges]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     part.setClippingPlanes(cut ? [cut.plane] : null);
     invalidate();
   }, [cut, invalidate, part]);
   const reportedSection = useRef6("");
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const state = cut?.state ?? null;
     const key = state ? `${state.constant}|${state.normal.x},${state.normal.y},${state.normal.z}` : "";
     if (key === reportedSection.current) return;
@@ -3135,12 +3272,12 @@ var PartMesh = ({
     highlights.map((entry) => `${entry.tag}:${entry.color}:${entry.weight ?? ""}`).join(" "),
     regionHighlights.map((entry) => `${entry.region}:${entry.color}:${entry.weight ?? ""}`).join(" ")
   ].join("|");
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     repaint();
   }, [layerKey, repaint]);
   const isTap = useTapGuard();
   const retarget = useRetarget();
-  const doubles = useMemo6(() => trackDoubleTaps(), []);
+  const doubles = useMemo7(() => trackDoubleTaps(), []);
   const pickFor = (event, doubled = false) => {
     const triangleIndex = event.faceIndex;
     if (triangleIndex == null) return null;
@@ -3175,13 +3312,13 @@ var PartMesh = ({
     repaint();
     onHover?.(next);
   };
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (hover || hoverRegion.current === null) return;
     hoverRegion.current = null;
     repaint();
     onHoverRef.current?.(null);
   }, [hover, repaint]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (!engaged || hoverRegion.current === null) return;
     hoverRegion.current = null;
     repaint();
@@ -3205,8 +3342,8 @@ var PartMesh = ({
     },
     [box, controlled, cut, onSectionChange, options, store]
   );
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    /* @__PURE__ */ jsx6(
       "primitive",
       {
         object: part.object,
@@ -3243,7 +3380,7 @@ var PartMesh = ({
         }
       }
     ),
-    cut ? /* @__PURE__ */ jsx5(
+    cut ? /* @__PURE__ */ jsx6(
       SectionView,
       {
         geometry,
@@ -3255,7 +3392,7 @@ var PartMesh = ({
         onDrag: !controlled || onSectionChange ? dragSection : void 0
       }
     ) : null,
-    children ? /* @__PURE__ */ jsx5(PartContext.Provider, { value: context, children }) : null
+    children ? /* @__PURE__ */ jsx6(PartContext.Provider, { value: context, children }) : null
   ] });
 };
 var ORIGIN = new Vector311();
@@ -3884,15 +4021,15 @@ function compareVersions(a, b) {
 }
 
 // src/engine/engine-part.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var EnginePart = ({ report, ...props }) => {
-  const model = useMemo7(() => normalizePartReport(report), [report]);
+  const model = useMemo8(() => normalizePartReport(report), [report]);
   const resource = useGeometryResource(model);
-  useEffect7(() => {
+  useEffect8(() => {
     engineGeometryCache.retain(resource);
     return () => engineGeometryCache.release(resource);
   }, [resource]);
-  return /* @__PURE__ */ jsx6(PartMesh, { model, geometry: resource.geometry, ...props });
+  return /* @__PURE__ */ jsx7(PartMesh, { model, geometry: resource.geometry, ...props });
 };
 function useGeometryResource(part) {
   const resource = engineGeometryCache.get(part);
@@ -4045,11 +4182,9 @@ export {
   useSectionStore,
   useRetarget,
   Viewer,
-  CONE_AXIS,
-  HEAD,
-  HEAD_RADIUS,
-  SHAFT_RADIUS,
-  arrowPlacement,
+  ArrowMesh,
+  ARROW_AXIS2 as ARROW_AXIS,
+  arrowGeometry,
   createMaskTarget,
   createCapMaterial,
   applyCapTheme,

package/dist/engine/index.js

@@ -12,7 +12,7 @@ import {
   parsePartGeometry,
   partMeshAssets,
   smoothRegionNormals
-} from "../chunk-WTTOUG4P.js";
+} from "../chunk-7S6SIYHL.js";
 export {
   EnginePart,
   MIN_KERNEL_VERSION,

package/dist/index.d.ts

@@ -90,6 +90,7 @@ interface ViewerToolbarControls {
     /** Tools drawn on the part: see `<ToolMarks>`. */
     tools?: ViewerToolbarControl;
     directions?: ViewerToolbarControl;
+    dfm?: ViewerToolbarControl;
     hover?: ViewerToolbarControl;
     focus?: ViewerToolbarControl;
     wireframe?: ViewerToolbarControl;
@@ -131,6 +132,7 @@ declare const ViewerToolbar: (({ className, children }: ViewerToolbarProps) => r
     BananaButton: () => react.JSX.Element;
     ToolsButton: () => react.JSX.Element;
     DirectionsButton: () => react.JSX.Element;
+    DfmButton: () => react.JSX.Element;
     HoverButton: () => react.JSX.Element;
     FocusButton: () => react.JSX.Element;
     WireframeButton: () => react.JSX.Element;

package/dist/index.js

@@ -1,14 +1,15 @@
 import {
   ANGLE_ARC_FRACTION,
   ANGLE_ARC_SEGMENTS,
+  ARROW_AXIS,
   AXES_PLANE_OFFSET,
   AXES_PLANE_SCALE,
   AXIS_COLORS,
+  ArrowMesh,
   CAD_CAMERA_UP,
   CANDIDATE_WEIGHT,
   CAP_HATCH,
   CHAMFER,
-  CONE_AXIS,
   CONTROL_SCHEME_OPTIONS,
   CadCameraControls,
   DEFAULT_FIT_MARGIN,
@@ -23,8 +24,6 @@ import {
   ExtendedCameraControls,
   FEATURE_TYPE_RANKS,
   HANDLE_PIXELS,
-  HEAD,
-  HEAD_RADIUS,
   HIGHLIGHT_COLORS,
   HIGHLIGHT_WEIGHT,
   HOVER_WEIGHT,
@@ -52,7 +51,6 @@ import {
   REGION_ATTRIBUTE,
   SECTION_GIZMO_FRAME_SCALE,
   SECTION_RENDER_ORDER,
-  SHAFT_RADIUS,
   SNAP_MARKER_PIXELS,
   SNAP_PIXELS,
   STOCK_OBJECT,
@@ -69,7 +67,7 @@ import {
   applyCapTheme,
   applyHighlightLayers,
   applyProjection,
-  arrowPlacement,
+  arrowGeometry,
   aspectRatio,
   axesPlanes,
   bestOwner,
@@ -162,7 +160,7 @@ import {
   viewUp,
   viewVector,
   visualSurfaces
-} from "./chunk-WTTOUG4P.js";
+} from "./chunk-7S6SIYHL.js";
 
 // src/render/feature-triangles.ts
 var EMPTY = { positions: new Float32Array(), normals: new Float32Array() };
@@ -268,6 +266,7 @@ var GridIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ j
 var BananaIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { viewBox: "0 0 576 512", fill: "currentColor", children: /* @__PURE__ */ jsx2("path", { d: "M284.2 245.6c12.99 6.929 25.35 15.14 36.08 25.8L334.5 285.6l65.75-23.47c14.75-5.265 30.18-7.849 45.81-8.389c1.154-10.73 1.764-21.38 1.764-31.87c0-118.5-81.33-221.9-119.7-221.9c-21.01 0-40.91 17.04-40.91 39.25c0 16.18 16.74 41.9 16.74 103C303.1 170.1 300.6 203.1 284.2 245.6zM575.1 389.6c0-3.687-.8637-7.429-2.687-10.93l-15.12-29.11c-21.05-40.53-63.08-64.51-106.9-64.51c-13.43 0-27.02 2.252-40.22 6.969l-84.84 30.27l-28.59-28.41C274.4 270.9 243.7 258.1 212.8 258.1c-23.72 0-47.57 6.97-68.29 21.2L106.3 306.4c-6.732 4.631-10.35 12.07-10.35 19.63c0 14.93 12.7 23.87 24.04 23.87c4.695 0 9.443-1.376 13.61-4.26l38.13-26.23c12.43-8.525 26.71-12.69 40.91-12.69c10.64 0 21.24 2.339 30.97 6.934c-50.62 62.23-128.3 99.85-211.4 99.85C14.42 413.5 0 427.8 0 445.5v31.38c0 17.68 14.66 32.02 32.46 32.02l28.98.0009c14.15 0 34.69 1.098 59.07 1.098c93.51 0 243.4-16.15 304.8-172.4c9.021-3.22 17.95-4.712 26.53-4.712c27.65 0 51.7 15.49 63.7 38.55l15.12 29.11c3.484 6.723 11.74 12.98 21.41 12.98C564.1 413.6 575.1 403.8 575.1 389.6z" }) });
 var ToolsIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M9 2h6v7H9zM9.5 9v9.5l2.5 3.5 2.5-3.5V9M9.5 12l5 2.5M9.5 15.5l5 2.5" }) });
 var DirectionsIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M7 3v18m-4-4 4 4 4-4M17 21V3m-4 4 4-4 4 4" }) });
+var DfmIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M8.3 3h7.4L21 8.3v7.4L15.7 21H8.3L3 15.7V8.3zM12 7.5v5.5m0 3.5v.01" }) });
 var HoverIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M4 4h16v12H9l-5 4zm4 5h8m-8 3h5" }) });
 var FocusIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M4 4h16v16H4zM8 8h8v8H8zM2 12h4m12 0h4M12 2v4m0 12v4" }) });
 var WireframeIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M4 7l8-4 8 4v10l-8 4-8-4zM4 7l8 4 8-4M12 11v10M4 17l8-4 8 4M12 3v10" }) });
@@ -283,6 +282,7 @@ var ICONS = {
   banana: BananaIcon,
   tools: ToolsIcon,
   directions: DirectionsIcon,
+  dfm: DfmIcon,
   hover: HoverIcon,
   focus: FocusIcon,
   wireframe: WireframeIcon,
@@ -377,6 +377,14 @@ var DirectionsButton = () => /* @__PURE__ */ jsx3(
     label: () => "Highlight faces by direction"
   }
 );
+var DfmButton = () => /* @__PURE__ */ jsx3(
+  ToolbarButton,
+  {
+    action: "dfm",
+    icon: "dfm",
+    label: (pressed) => pressed ? "Hide DFM flags" : "Show DFM flags"
+  }
+);
 var HoverButton = () => /* @__PURE__ */ jsx3(
   ToolbarButton,
   {
@@ -435,6 +443,7 @@ var DefaultControls = () => {
   ].filter(Boolean);
   const analysis = [
     controls.directions ? /* @__PURE__ */ jsx3(DirectionsButton, {}, "directions") : null,
+    controls.dfm ? /* @__PURE__ */ jsx3(DfmButton, {}, "dfm") : null,
     controls.hover ? /* @__PURE__ */ jsx3(HoverButton, {}, "hover") : null,
     controls.focus ? /* @__PURE__ */ jsx3(FocusButton, {}, "focus") : null,
     controls.wireframe ? /* @__PURE__ */ jsx3(WireframeButton, {}, "wireframe") : null,
@@ -474,6 +483,7 @@ var ViewerToolbar = Object.assign(ViewerToolbarRoot, {
   BananaButton,
   ToolsButton,
   DirectionsButton,
+  DfmButton,
   HoverButton,
   FocusButton,
   WireframeButton,
@@ -1111,8 +1121,33 @@ var CubePanels = ({
 
 // src/direction-arrows.tsx
 import { useThree as useThree4 } from "@react-three/fiber";
-import { useMemo as useMemo4 } from "react";
-import { Quaternion as Quaternion2, Vector3 as Vector34 } from "three";
+import { useEffect as useEffect4, useMemo as useMemo4 } from "react";
+import { Quaternion as Quaternion2, Vector3 as Vector35 } from "three";
+
+// src/render/directions.ts
+import { Vector3 as Vector34 } from "three";
+var LENGTH = 0.33;
+var GAP = 0.2;
+function arrowPlacement(direction, box) {
+  const center = box.getCenter(new Vector34());
+  const half = box.getSize(new Vector34()).multiplyScalar(0.5);
+  const radius = half.length() || 1;
+  const axis = new Vector34(direction.x, direction.y, direction.z);
+  if (axis.lengthSq() === 0) axis.set(0, 0, 1);
+  axis.normalize();
+  let exit = Number.POSITIVE_INFINITY;
+  for (const [component, extent] of [
+    [axis.x, half.x],
+    [axis.y, half.y],
+    [axis.z, half.z]
+  ]) {
+    if (Math.abs(component) > 1e-6) exit = Math.min(exit, extent / Math.abs(component));
+  }
+  if (!Number.isFinite(exit)) exit = radius;
+  return { tip: center.addScaledVector(axis, exit + radius * GAP), length: radius * LENGTH };
+}
+
+// src/direction-arrows.tsx
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var FURNITURE3 = { [EXCLUDE_FROM_FRAME]: true };
 var DirectionArrows = ({
@@ -1127,6 +1162,8 @@ var DirectionArrows = ({
 }) => {
   const box = useContentBox();
   const resolved = useMemo4(() => resolveTheme(theme), [theme]);
+  const geometry = useMemo4(() => arrowGeometry(), []);
+  useEffect4(() => () => geometry.dispose(), [geometry]);
   const shown = shownDirection === void 0 ? activeDirection : shownDirection;
   const drawn = (index) => {
     if (shown === null) return true;
@@ -1146,6 +1183,7 @@ var DirectionArrows = ({
           {
             direction,
             box,
+            geometry,
             color: directionColor(index),
             opacity: 0.9,
             onPick: onPickDirection ? () => onPickDirection(index) : void 0
@@ -1158,28 +1196,37 @@ var DirectionArrows = ({
         {
           direction: named.direction,
           box,
+          geometry,
           color: named.color,
           opacity: 0.9,
           onPick: onPickDirection ? () => onPickDirection(named.index) : void 0
         },
         `named-${named.index}`
       )),
-      previewDirection ? /* @__PURE__ */ jsx7(Arrow, { direction: previewDirection, box, color: resolved.hover, opacity: 0.95, onTop: true }) : null
+      previewDirection ? /* @__PURE__ */ jsx7(
+        Arrow,
+        {
+          direction: previewDirection,
+          box,
+          geometry,
+          color: resolved.hover,
+          opacity: 0.95,
+          onTop: true
+        }
+      ) : null
     ] })
   );
 };
-var Arrow = ({ direction, box, color, opacity, onPick, onTop = false }) => {
+var Arrow = ({ direction, box, geometry, color, opacity, onPick, onTop = false }) => {
   const invalidate = useThree4((state) => state.invalidate);
   const { tip, length, quaternion } = useMemo4(() => {
     const placement = arrowPlacement(direction, box);
     const aim = new Quaternion2().setFromUnitVectors(
-      CONE_AXIS,
-      new Vector34(direction.x, direction.y, direction.z).normalize()
+      ARROW_AXIS,
+      new Vector35(direction.x, direction.y, direction.z).normalize()
     );
     return { tip: placement.tip, length: placement.length, quaternion: aim };
   }, [box, direction]);
-  const head = length * HEAD;
-  const shaft = length * (1 - HEAD);
   const press = onPick ? {
     onClick: (event) => {
       event.stopPropagation();
@@ -1187,32 +1234,23 @@ var Arrow = ({ direction, box, color, opacity, onPick, onTop = false }) => {
       invalidate();
     }
   } : {};
-  return /* @__PURE__ */ jsxs3("group", { position: tip, quaternion, renderOrder: onTop ? 10 : 3, children: [
-    /* @__PURE__ */ jsxs3("mesh", { position: [0, head * 0.5, 0], rotation: [Math.PI, 0, 0], ...press, children: [
-      /* @__PURE__ */ jsx7("coneGeometry", { args: [length * HEAD_RADIUS, head, 20] }),
-      /* @__PURE__ */ jsx7("meshBasicMaterial", { color, transparent: true, opacity, depthTest: !onTop })
-    ] }),
-    /* @__PURE__ */ jsxs3("mesh", { position: [0, head + shaft * 0.5, 0], ...press, children: [
-      /* @__PURE__ */ jsx7("cylinderGeometry", { args: [length * SHAFT_RADIUS, length * SHAFT_RADIUS, shaft, 12] }),
-      /* @__PURE__ */ jsx7("meshBasicMaterial", { color, transparent: true, opacity, depthTest: !onTop })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsx7("group", { position: tip, quaternion, scale: length, renderOrder: onTop ? 10 : 3, children: /* @__PURE__ */ jsx7(ArrowMesh, { geometry, color, opacity, onTop, events: press }) });
 };
 
 // src/section-tool.tsx
 import { useFrame, useThree as useThree5 } from "@react-three/fiber";
-import { useEffect as useEffect4, useMemo as useMemo5, useRef as useRef3, useState as useState4, useSyncExternalStore } from "react";
+import { useEffect as useEffect5, useMemo as useMemo5, useRef as useRef3, useState as useState4, useSyncExternalStore } from "react";
 import {
   BufferGeometry as BufferGeometry2,
   DoubleSide,
   Quaternion as Quaternion3,
   Raycaster,
   Vector2,
-  Vector3 as Vector35
+  Vector3 as Vector36
 } from "three";
 import { Fragment, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var FURNITURE4 = { [EXCLUDE_FROM_FRAME]: true };
-var Z = new Vector35(0, 0, 1);
+var Z = new Vector36(0, 0, 1);
 var AXIS_ROTATIONS = {
   x: [0, Math.PI / 2, 0],
   y: [Math.PI / 2, 0, 0],
@@ -1225,11 +1263,11 @@ var SectionTool = ({ theme }) => {
   const section = useSyncExternalStore(store.subscribe, store.get, store.get);
   const box = useContentBox();
   const resolved = useMemo5(() => resolveTheme(theme), [theme]);
-  useEffect4(() => {
+  useEffect5(() => {
     store.setEngaged(true);
     return () => store.setEngaged(false);
   }, [store]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!section) return void 0;
     const clear = (event) => {
       if (event.key === "Escape") store.set(null);
@@ -1243,14 +1281,14 @@ var SectionTool = ({ theme }) => {
 var useSquare = () => {
   const square = useMemo5(
     () => new BufferGeometry2().setFromPoints([
-      new Vector35(-1, 1, 0),
-      new Vector35(1, 1, 0),
-      new Vector35(1, -1, 0),
-      new Vector35(-1, -1, 0)
+      new Vector36(-1, 1, 0),
+      new Vector36(1, 1, 0),
+      new Vector36(1, -1, 0),
+      new Vector36(-1, -1, 0)
     ]),
     []
   );
-  useEffect4(() => () => square.dispose(), [square]);
+  useEffect5(() => () => square.dispose(), [square]);
   return square;
 };
 var Picker = ({ box, theme }) => {
@@ -1264,17 +1302,17 @@ var Picker = ({ box, theme }) => {
   const previewRef = useRef3(null);
   const hover = useRef3(null);
   const [hoveredPlane, setHoveredPlane] = useState4(null);
-  const span = useMemo5(() => box.getSize(new Vector35()).length(), [box]);
-  const centre = useMemo5(() => box.getCenter(new Vector35()), [box]);
+  const span = useMemo5(() => box.getSize(new Vector36()).length(), [box]);
+  const centre = useMemo5(() => box.getCenter(new Vector36()), [box]);
   const previewSize = span * PREVIEW_SCALE;
-  useEffect4(() => {
+  useEffect5(() => {
     store.setPicking(true);
     return () => store.setPicking(false);
   }, [store]);
-  useEffect4(() => {
+  useEffect5(() => {
     const raycaster = new Raycaster();
     const pointer = new Vector2();
-    const aim = new Vector35();
+    const aim = new Vector36();
     const hide = () => {
       if (!hover.current) return;
       hover.current = null;
@@ -1418,7 +1456,7 @@ var Picker = ({ box, theme }) => {
 var CutSheet = ({ box, section, theme }) => {
   const square = useSquare();
   const cut = useMemo5(() => resolveSectionPlane(section, box), [box, section]);
-  const span = useMemo5(() => box.getSize(new Vector35()).length(), [box]);
+  const span = useMemo5(() => box.getSize(new Vector36()).length(), [box]);
   const placement = useMemo5(() => {
     if (!cut) return null;
     const position = sectionAnchor(box, cut.plane).addScaledVector(
@@ -1469,7 +1507,7 @@ var CutSheet = ({ box, section, theme }) => {
 import { Html, Line } from "@react-three/drei";
 import { useFrame as useFrame2, useThree as useThree6 } from "@react-three/fiber";
 import {
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo6,
   useRef as useRef4,
@@ -1481,18 +1519,18 @@ import {
   Raycaster as Raycaster2,
   SphereGeometry,
   Vector2 as Vector22,
-  Vector3 as Vector37
+  Vector3 as Vector38
 } from "three";
 
 // src/render/resample.ts
-import { Vector3 as Vector36 } from "three";
+import { Vector3 as Vector37 } from "three";
 var ON_PLANE = 1e-7;
 var STITCH = 1e-5;
 var COLLINEAR = 1e-6;
 function clipSegments(positions, plane) {
   const out = [];
-  const a = new Vector36();
-  const b = new Vector36();
+  const a = new Vector37();
+  const b = new Vector37();
   const count = Math.floor(positions.length / 6);
   for (let i = 0; i < count; i += 1) {
     a.set(positions[i * 6], positions[i * 6 + 1], positions[i * 6 + 2]);
@@ -1507,11 +1545,11 @@ function clipSegments(positions, plane) {
   return Float32Array.from(out);
 }
 function sectionContour(positions, regionOf, plane) {
-  const a = new Vector36();
-  const b = new Vector36();
-  const c = new Vector36();
-  const p = new Vector36();
-  const q = new Vector36();
+  const a = new Vector37();
+  const b = new Vector37();
+  const c = new Vector37();
+  const p = new Vector37();
+  const q = new Vector37();
   const byRegion = /* @__PURE__ */ new Map();
   const triangleCount = Math.floor(positions.length / 9);
   for (let t = 0; t < triangleCount; t += 1) {
@@ -1569,17 +1607,17 @@ function stitch(segments, out) {
     return into.set(segments[o], segments[o + 1], segments[o + 2]);
   };
   const direction = (i, into) => {
-    const s = new Vector36();
-    const e = new Vector36();
+    const s = new Vector37();
+    const e = new Vector37();
     point(i, 0, s);
     point(i, 1, e);
     return into.subVectors(e, s).normalize();
   };
   const consumed = new Uint8Array(count);
-  const d = new Vector36();
-  const n = new Vector36();
+  const d = new Vector37();
+  const n = new Vector37();
   const next = (i, end) => {
-    const at = point(i, end, new Vector36());
+    const at = point(i, end, new Vector37());
     const list = ends.get(key(at.x, at.y, at.z)) ?? [];
     if (list.length !== 2) return null;
     const other = list.find((entry) => entry >> 1 !== i);
@@ -1608,8 +1646,8 @@ function stitch(segments, out) {
     };
     const back = walk(0);
     const forward = walk(1);
-    const s = point(back.index, back.end, new Vector36());
-    const e = point(forward.index, forward.end, new Vector36());
+    const s = point(back.index, back.end, new Vector37());
+    const e = point(forward.index, forward.end, new Vector37());
     out.push(s.x, s.y, s.z, e.x, e.y, e.z);
   }
 }
@@ -1617,8 +1655,8 @@ function pointInContour(point, plane, contour) {
   const [u, v] = planeAxes(plane);
   const px = point.dot(u);
   const py = point.dot(v);
-  const a = new Vector36();
-  const b = new Vector36();
+  const a = new Vector37();
+  const b = new Vector37();
   let inside = false;
   const count = Math.floor(contour.length / 6);
   for (let i = 0; i < count; i += 1) {
@@ -1635,15 +1673,15 @@ function pointInContour(point, plane, contour) {
   return inside;
 }
 function capHit(ray, plane, contour) {
-  const point = ray.intersectPlane(plane, new Vector36());
+  const point = ray.intersectPlane(plane, new Vector37());
   if (!point) return null;
   return pointInContour(point, plane, contour) ? point : null;
 }
 function planeAxes(plane) {
   const n = plane.normal;
-  const seed = Math.abs(n.x) < 0.9 ? new Vector36(1, 0, 0) : new Vector36(0, 1, 0);
-  const u = new Vector36().crossVectors(n, seed).normalize();
-  const v = new Vector36().crossVectors(n, u).normalize();
+  const seed = Math.abs(n.x) < 0.9 ? new Vector37(1, 0, 0) : new Vector37(0, 1, 0);
+  const u = new Vector37().crossVectors(n, seed).normalize();
+  const v = new Vector37().crossVectors(n, u).normalize();
   return [u, v];
 }
 function sampleSection(meshPositions, regionOf, edgePositions, plane) {
@@ -1676,11 +1714,11 @@ var MeasureTool = ({
   const controlled = measurements !== void 0;
   const list = controlled ? measurements : held;
   const [draft, setDraft] = useState5([]);
-  useEffect5(() => {
+  useEffect6(() => {
     store.setEngaged(true);
     return () => store.setEngaged(false);
   }, [store]);
-  useEffect5(() => {
+  useEffect6(() => {
     setDraft([]);
   }, [mode]);
   const commit = (next) => {
@@ -1689,7 +1727,7 @@ var MeasureTool = ({
   };
   const latest = useRef4({ list, commit });
   latest.current = { list, commit };
-  useEffect5(() => {
+  useEffect6(() => {
     const onKey = (event) => {
       if (event.key === "Escape") {
         setDraft([]);
@@ -1753,7 +1791,7 @@ var MeasureTool = ({
   ] });
 };
 var NO_POINTER = { pointerEvents: "none" };
-var NOWHERE = [new Vector37(), new Vector37()];
+var NOWHERE = [new Vector38(), new Vector38()];
 var Snapper = ({ mode, draft, onPlace, theme, format, label }) => {
   const camera = useThree6((state) => state.camera);
   const scene = useThree6((state) => state.scene);
@@ -1774,7 +1812,7 @@ var Snapper = ({ mode, draft, onPlace, theme, format, label }) => {
   }, []);
   const current = useRef4({ mode, draft, onPlace, format, size });
   current.current = { mode, draft, onPlace, format, size };
-  useEffect5(() => {
+  useEffect6(() => {
     const raycaster = new Raycaster2();
     const pointer = new Vector22();
     const samples = new SampleCache();
@@ -1806,7 +1844,7 @@ var Snapper = ({ mode, draft, onPlace, theme, format, label }) => {
       const snapped = snapAt(target, target.edges, camera, viewport);
       const from = placed[placed.length - 1];
       const lock = shift && from ? lockToAxis(from, snapped.point) : null;
-      const found = lock ? { ...snapped, point: new Vector37(lock.point.x, lock.point.y, lock.point.z), edge: null } : snapped;
+      const found = lock ? { ...snapped, point: new Vector38(lock.point.x, lock.point.y, lock.point.z), edge: null } : snapped;
       snap.current = found;
       const node = marker.current;
       if (node) {
@@ -1880,7 +1918,7 @@ var Snapper = ({ mode, draft, onPlace, theme, format, label }) => {
       window.removeEventListener("keyup", key);
     };
   }, [camera, domElement, invalidate, isTap, scene, theme.measure]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (draft.length === 0 && band.current) {
       band.current.visible = false;
       if (bandLabel.current) bandLabel.current.visible = false;
@@ -2114,7 +2152,7 @@ var DeltaLegs = ({ a, b, id, format, label }) => {
   const lines = useRef4([]);
   const centre = useMemo6(() => {
     const at = midpoint(a, b);
-    return new Vector37(at.x, at.y, at.z);
+    return new Vector38(at.x, at.y, at.z);
   }, [a, b]);
   useFrame2(() => {
     const dash = screenLength(camera, centre, size, DELTA_DASH_PIXELS);
@@ -2136,8 +2174,8 @@ var DeltaLegs = ({ a, b, id, format, label }) => {
           lines.current[index] = line;
         },
         points: [
-          new Vector37(leg.from.x, leg.from.y, leg.from.z),
-          new Vector37(leg.to.x, leg.to.y, leg.to.z)
+          new Vector38(leg.from.x, leg.from.y, leg.from.z),
+          new Vector38(leg.to.x, leg.to.y, leg.to.z)
         ],
         color: AXIS_COLORS[leg.axis],
         lineWidth: MEASURE_LINE_PIXELS.leg,
@@ -2173,7 +2211,7 @@ var ScreenDot = ({ point, pixels, color }) => {
   const invalidate = useThree6((state) => state.invalidate);
   const node = useRef4(null);
   const dot = useDot();
-  const position = useMemo6(() => new Vector37(point.x, point.y, point.z), [point]);
+  const position = useMemo6(() => new Vector38(point.x, point.y, point.z), [point]);
   useFrame2(() => {
     const group = node.current;
     if (!group) return;
@@ -2188,7 +2226,7 @@ var ScreenDot = ({ point, pixels, color }) => {
 var Segment = ({ points, color }) => {
   const [a, b] = points;
   const ends = useMemo6(
-    () => [new Vector37(a.x, a.y, a.z), new Vector37(b.x, b.y, b.z)],
+    () => [new Vector38(a.x, a.y, a.z), new Vector38(b.x, b.y, b.z)],
     // Keyed on the numbers: a draft's tuple is a fresh array on every render,
     // and a rebuilt array would rebuild the line's geometry with it.
     [a.x, a.y, a.z, b.x, b.y, b.z]
@@ -2213,7 +2251,7 @@ var Polyline = ({ points, color }) => {
 };
 function useDot() {
   const geometry = useMemo6(() => new SphereGeometry(1, 16, 12), []);
-  useEffect5(() => () => geometry.dispose(), [geometry]);
+  useEffect6(() => () => geometry.dispose(), [geometry]);
   return geometry;
 }
 function isEditing(target) {
@@ -2230,7 +2268,7 @@ import { useMemo as useMemo7 } from "react";
 import { DoubleSide as DoubleSide2 } from "three";
 
 // src/render/tool-marks.ts
-import { Quaternion as Quaternion4, Vector2 as Vector23, Vector3 as Vector38 } from "three";
+import { Quaternion as Quaternion4, Vector2 as Vector23, Vector3 as Vector39 } from "three";
 var TOOL_CORNER_STEPS = 12;
 var TOOL_ROUND = 64;
 function toolProfile(radius, corner, height) {
@@ -2250,9 +2288,9 @@ function toolProfile(radius, corner, height) {
   points.push(new Vector23(radius, Math.max(height, rounded)));
   return points;
 }
-var UP = new Vector38(0, 1, 0);
-var AXES = [new Vector38(1, 0, 0), new Vector38(0, 1, 0), new Vector38(0, 0, 1)];
-var toVector = ({ x, y, z }) => new Vector38(x, y, z);
+var UP = new Vector39(0, 1, 0);
+var AXES = [new Vector39(1, 0, 0), new Vector39(0, 1, 0), new Vector39(0, 0, 1)];
+var toVector = ({ x, y, z }) => new Vector39(x, y, z);
 var squareTo = (w, along) => {
   const wanted = along ? toVector(along) : null;
   const flat = wanted?.clone().addScaledVector(w, -wanted.dot(w));
@@ -2272,7 +2310,7 @@ function toolMarkShape(mark) {
   if (!(mark.diameter > 0) || axis.lengthSq() === 0) return null;
   const w = axis.normalize();
   const u = squareTo(w, mark.across);
-  const v = new Vector38().crossVectors(w, u);
+  const v = new Vector39().crossVectors(w, u);
   const radius = mark.diameter / 2;
   const corner = Math.min(Math.max(mark.cornerRadius ?? 0, 0), radius);
   const height = Math.max(mark.height, corner);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolpath/viewer",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "description": "React Three Fiber viewer for Toolpath Engine part reports",
   "license": "MIT",
   "engines": {