@toolpath/viewer 1.1.0 → 1.2.0

package/dist/index.js

@@ -1,12 +1,17 @@
 import {
+  AXES_PLANE_OFFSET,
+  AXES_PLANE_SCALE,
   CAD_CAMERA_UP,
   CANDIDATE_WEIGHT,
+  CAP_HATCH,
   CHAMFER,
   CONE_AXIS,
   CadCameraControls,
   DEFAULT_FIT_MARGIN,
+  DEFAULT_SECTION_NORMAL,
   DEFAULT_THEME,
   DIRECTION_COLORS,
+  DISABLED_SECTION,
   DOUBLE_TAP_MS,
   EXCLUDE_FROM_FRAME,
   EnginePart,
@@ -29,8 +34,10 @@ import {
   ORBIT_TARGET_RING_OPACITY,
   ORBIT_TARGET_RING_PIXELS,
   ORBIT_TARGET_RING_WIDTH,
+  OUTLINE_SCALE,
   PERSPECTIVE_FOV,
   PICKED_SURFACE_LABEL,
+  PREVIEW_SCALE,
   PartMesh,
   PartReportFormatError,
   REGION_ATTRIBUTE,
@@ -43,10 +50,12 @@ import {
   VIEW_SIGNS,
   Viewer,
   adaptedUp,
+  applyCapTheme,
   applyHighlightLayers,
   applyProjection,
   arrowPlacement,
   aspectRatio,
+  axesPlanes,
   bestOwner,
   boundsFromBox,
   buildPick,
@@ -56,7 +65,12 @@ import {
   cadViewDirections,
   cameraLimits,
   contentBounds,
+  createCapMaterial,
+  createMaskMaterial,
+  createMaskTarget,
   createPart,
+  createSectionStore,
+  createStencilMaterials,
   cubeOutlineGeometry,
   cubeZones,
   currentViewDirection,
@@ -66,10 +80,12 @@ import {
   directionIndexOf,
   directionLabel,
   dragPlane,
+  excludedFromFrame,
   featureTypeRank,
   fitDistance,
   focusForPick,
   groupByDirection,
+  hitUnderRay,
   labelGeometry,
   labelTexture,
   movedFar,
@@ -87,6 +103,7 @@ import {
   retargetPose,
   sameDirection,
   screenLength,
+  sectionAnchor,
   sectionBounds,
   sectionConstant,
   sectionDepth,
@@ -94,16 +111,19 @@ import {
   sectionDepthRange,
   sectionFromPick,
   sectionOffset,
+  sectionOptionsFromState,
   sectionPlane,
   smoothRegionNormals,
   squaredUp,
   startPosition,
+  surfaceUnderRay,
   targetBoundary,
   themesEqual,
   trackDoubleTaps,
   trackTaps,
   useContentBox,
   useRetarget,
+  useSectionStore,
   useTapGuard,
   useViewerControls,
   viewDirection,
@@ -111,7 +131,7 @@ import {
   viewUp,
   viewVector,
   visualSurfaces
-} from "./chunk-4BU4QZCL.js";
+} from "./chunk-HWAEUJ4H.js";
 
 // src/primitives.tsx
 import { GizmoHelper } from "@react-three/drei";
@@ -155,6 +175,18 @@ function gridGeometry(spec) {
   geometry.setAttribute("position", new Float32BufferAttribute(positions, 3));
   return geometry;
 }
+function gridFor(box, options = {}) {
+  if (box.isEmpty()) return null;
+  const spec = gridSpec(box);
+  const cell = options.step ?? spec.step;
+  return gridGeometry({
+    ...spec,
+    step: cell,
+    // Snapped outwards to a whole number of cells, so the part sits inside the
+    // grid rather than ending part-way through a square.
+    extent: options.extent ?? Math.ceil(spec.extent / cell) * cell
+  });
+}
 
 // src/primitives.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -162,18 +194,9 @@ var FURNITURE = { [EXCLUDE_FROM_FRAME]: true };
 var Grid = ({ step, extent, color, opacity = 0.35 }) => {
   const theme = resolveTheme();
   const box = useContentBox();
-  const geometry = useMemo(() => {
-    const spec = gridSpec(box);
-    const cell = step ?? spec.step;
-    return gridGeometry({
-      ...spec,
-      step: cell,
-      // Snapped outwards to a whole number of cells, so the part sits inside
-      // the grid rather than ending part-way through a square.
-      extent: extent ?? Math.ceil(spec.extent / cell) * cell
-    });
-  }, [box, extent, step]);
-  useEffect(() => () => geometry.dispose(), [geometry]);
+  const geometry = useMemo(() => gridFor(box, { step, extent }), [box, extent, step]);
+  useEffect(() => () => geometry?.dispose(), [geometry]);
+  if (!geometry) return null;
   return /* @__PURE__ */ jsx("lineSegments", { geometry, renderOrder: -1, raycast: () => null, userData: FURNITURE, children: /* @__PURE__ */ jsx("lineBasicMaterial", { color: color ?? theme.cubeEdge, transparent: true, opacity }) });
 };
 var Axes = ({ size = 25 }) => /* @__PURE__ */ jsx("axesHelper", { args: [size], userData: FURNITURE, raycast: () => null });
@@ -351,6 +374,936 @@ var Arrow = ({ direction, box, color, opacity, onPick, onTop = false }) => {
   ] });
 };
 
+// src/section-tool.tsx
+import { useFrame, useThree as useThree3 } from "@react-three/fiber";
+import { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2, useState as useState2, useSyncExternalStore } from "react";
+import {
+  BufferGeometry as BufferGeometry2,
+  DoubleSide,
+  Quaternion as Quaternion2,
+  Raycaster,
+  Vector2 as Vector22,
+  Vector3 as Vector34
+} from "three";
+
+// src/render/measure.ts
+import { Vector2, Vector3 as Vector33 } from "three";
+var MEASURE_RENDER_ORDER = 7;
+var AXIS_COLORS = { x: 16739179, y: 7331978, z: 7314431 };
+var SNAP_PIXELS = {
+  vertex: 14,
+  midpoint: 12,
+  edge: 9
+};
+var SNAP_MARKER_PIXELS = {
+  vertex: 6,
+  midpoint: 5,
+  edge: 4,
+  face: 3.5
+};
+var MEASURE_MARKER_PIXELS = 3.5;
+var MEASURE_LINE_PIXELS = {
+  line: 2,
+  leg: 1.5,
+  edge: 3
+};
+var DELTA_DASH_PIXELS = 6;
+var ANGLE_ARC_FRACTION = 0.3;
+var ANGLE_ARC_SEGMENTS = 24;
+function snapAt(hit, edges, camera, viewport) {
+  const face = {
+    kind: "face",
+    point: hit.point.clone(),
+    normal: hit.normal.clone(),
+    edge: null
+  };
+  if (!edges) return face;
+  const positions = edges.positions;
+  const segments = Math.floor(positions.length / 6);
+  if (segments === 0) return face;
+  const inverse = edges.matrixWorld.clone().invert();
+  const p = hit.point.clone().applyMatrix4(inverse);
+  const n = hit.normal.clone().transformDirection(inverse);
+  const reach = screenLength(camera, hit.point, viewport, SNAP_PIXELS.vertex) * 1.5;
+  const reachSq = reach * reach;
+  const pointer = screenPoint(camera, hit.point, viewport);
+  const best = {
+    vertex: { distance: Number.POSITIVE_INFINITY, index: -1, t: 0 },
+    midpoint: { distance: Number.POSITIVE_INFINITY, index: -1, t: 0 },
+    edge: { distance: Number.POSITIVE_INFINITY, index: -1, t: 0 }
+  };
+  const a = new Vector33();
+  const b = new Vector33();
+  const ab = new Vector33();
+  const ap = new Vector33();
+  const q = new Vector33();
+  const pixel = new Vector2();
+  const consider = (kind, point, index, t) => {
+    const distance = screenPoint(
+      camera,
+      q.copy(point).applyMatrix4(edges.matrixWorld),
+      viewport,
+      pixel
+    ).distanceTo(pointer);
+    if (distance <= SNAP_PIXELS[kind] && distance < best[kind].distance) {
+      best[kind] = { distance, index, t };
+    }
+  };
+  for (let index = 0; index < segments; index += 1) {
+    const offset = index * 6;
+    a.set(positions[offset], positions[offset + 1], positions[offset + 2]);
+    b.set(positions[offset + 3], positions[offset + 4], positions[offset + 5]);
+    if (Math.abs(ap.subVectors(a, p).dot(n)) > reach) continue;
+    if (Math.abs(ap.subVectors(b, p).dot(n)) > reach) continue;
+    ab.subVectors(b, a);
+    ap.subVectors(p, a);
+    const lengthSq = ab.lengthSq();
+    const t = lengthSq === 0 ? 0 : Math.min(1, Math.max(0, ap.dot(ab) / lengthSq));
+    q.copy(a).addScaledVector(ab, t);
+    if (q.distanceToSquared(p) > reachSq) continue;
+    consider("vertex", a, index, 0);
+    consider("vertex", b, index, 1);
+    consider("midpoint", q.copy(a).addScaledVector(ab, 0.5), index, 0.5);
+    consider("edge", q.copy(a).addScaledVector(ab, t), index, t);
+  }
+  for (const kind of ["vertex", "midpoint", "edge"]) {
+    const found = best[kind];
+    if (found.index < 0) continue;
+    const offset = found.index * 6;
+    const start = new Vector33(positions[offset], positions[offset + 1], positions[offset + 2]);
+    const end = new Vector33(positions[offset + 3], positions[offset + 4], positions[offset + 5]);
+    const point = start.clone().lerp(end, found.t);
+    start.applyMatrix4(edges.matrixWorld);
+    end.applyMatrix4(edges.matrixWorld);
+    point.applyMatrix4(edges.matrixWorld);
+    return {
+      kind,
+      point,
+      normal: hit.normal.clone(),
+      edge: kind === "vertex" ? null : [start, end]
+    };
+  }
+  return face;
+}
+function screenPoint(camera, point, viewport, into = new Vector2()) {
+  const ndc = point.clone().project(camera);
+  return into.set((ndc.x + 1) / 2 * viewport.width, (1 - ndc.y) / 2 * viewport.height);
+}
+var POINTS_PER_MEASUREMENT = {
+  distance: 2,
+  angle: 3
+};
+function measurementFromPoints(kind, points, id) {
+  if (points.length < POINTS_PER_MEASUREMENT[kind]) return null;
+  const [a, b, c] = points;
+  if (kind === "distance") return { id, kind, points: [copy(a), copy(b)] };
+  return { id, kind, points: [copy(a), copy(b), copy(c)] };
+}
+function nextMeasurementId(held) {
+  return held.reduce((top, entry) => Math.max(top, entry.id), 0) + 1;
+}
+function distanceBetween(a, b) {
+  return Math.hypot(b.x - a.x, b.y - a.y, b.z - a.z);
+}
+function deltaBetween(a, b) {
+  return { x: b.x - a.x, y: b.y - a.y, z: b.z - a.z };
+}
+function midpoint(a, b) {
+  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2, z: (a.z + b.z) / 2 };
+}
+function angleAt(vertex, a, b) {
+  const u = new Vector33(a.x - vertex.x, a.y - vertex.y, a.z - vertex.z);
+  const w = new Vector33(b.x - vertex.x, b.y - vertex.y, b.z - vertex.z);
+  if (u.lengthSq() === 0 || w.lengthSq() === 0) return 0;
+  return u.angleTo(w) * 180 / Math.PI;
+}
+function lockToAxis(from, to) {
+  const delta = deltaBetween(from, to);
+  let axis = "x";
+  for (const candidate of ["y", "z"]) {
+    if (Math.abs(delta[candidate]) > Math.abs(delta[axis])) axis = candidate;
+  }
+  return { axis, point: { ...from, [axis]: to[axis] } };
+}
+function deltaLegs(a, b) {
+  const delta = deltaBetween(a, b);
+  const threshold = Math.max(1e-9, distanceBetween(a, b) * 1e-6);
+  const legs = [];
+  let cursor = copy(a);
+  for (const axis of ["x", "y", "z"]) {
+    if (Math.abs(delta[axis]) <= threshold) continue;
+    const to = { ...cursor, [axis]: b[axis] };
+    legs.push({ axis, from: cursor, to, length: Math.abs(delta[axis]) });
+    cursor = to;
+  }
+  return legs.length > 1 ? legs : [];
+}
+function angleArc(vertex, a, b, radius, segments = ANGLE_ARC_SEGMENTS) {
+  const v = new Vector33(vertex.x, vertex.y, vertex.z);
+  const u = new Vector33(a.x, a.y, a.z).sub(v);
+  const w = new Vector33(b.x, b.y, b.z).sub(v);
+  if (u.lengthSq() === 0 || w.lengthSq() === 0) return [];
+  u.normalize();
+  w.normalize();
+  const theta = u.angleTo(w);
+  const sine = Math.sin(theta);
+  if (sine < 1e-6) {
+    return [v.clone().addScaledVector(u, radius), v.clone().addScaledVector(w, radius)];
+  }
+  const points = [];
+  for (let i = 0; i <= segments; i += 1) {
+    const t = i / segments;
+    const direction = u.clone().multiplyScalar(Math.sin((1 - t) * theta) / sine).addScaledVector(w, Math.sin(t * theta) / sine);
+    points.push(v.clone().addScaledVector(direction, radius));
+  }
+  return points;
+}
+function angleArcRadius(vertex, a, b) {
+  return Math.min(distanceBetween(vertex, a), distanceBetween(vertex, b)) * ANGLE_ARC_FRACTION;
+}
+function formatMillimetres(mm, digits = 2) {
+  return `${mm.toFixed(digits)} mm`;
+}
+function formatDegrees(degrees, digits = 1) {
+  return `${degrees.toFixed(digits)}\xB0`;
+}
+function measurementLabel(measurement, format = formatMillimetres) {
+  if (measurement.kind === "distance") {
+    const [a2, b2] = measurement.points;
+    return format(distanceBetween(a2, b2));
+  }
+  const [a, vertex, b] = measurement.points;
+  return formatDegrees(angleAt(vertex, a, b));
+}
+function measurementLabelAnchor(measurement) {
+  if (measurement.kind === "distance") return midpoint(measurement.points[0], measurement.points[1]);
+  const [a, vertex, b] = measurement.points;
+  const arc = angleArc(vertex, a, b, angleArcRadius(vertex, a, b) * 1.6, 2);
+  const middle = arc[1] ?? arc[0];
+  return middle ? { x: middle.x, y: middle.y, z: middle.z } : copy(vertex);
+}
+function copy(v) {
+  return { x: v.x, y: v.y, z: v.z };
+}
+
+// src/section-tool.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var FURNITURE3 = { [EXCLUDE_FROM_FRAME]: true };
+var Z = new Vector34(0, 0, 1);
+var AXIS_ROTATIONS = {
+  x: [0, Math.PI / 2, 0],
+  y: [Math.PI / 2, 0, 0],
+  z: [0, 0, 0]
+};
+var PREVIEW_LIFT = 2e-3;
+var SHEET_SETBACK = 1e-3;
+var SectionTool = ({ theme }) => {
+  const store = useSectionStore();
+  const section = useSyncExternalStore(store.subscribe, store.get, store.get);
+  const box = useContentBox();
+  const resolved = useMemo3(() => resolveTheme(theme), [theme]);
+  useEffect2(() => {
+    store.setEngaged(true);
+    return () => store.setEngaged(false);
+  }, [store]);
+  useEffect2(() => {
+    if (!section) return void 0;
+    const clear = (event) => {
+      if (event.key === "Escape") store.set(null);
+    };
+    window.addEventListener("keydown", clear);
+    return () => window.removeEventListener("keydown", clear);
+  }, [section, store]);
+  if (box.isEmpty()) return null;
+  return /* @__PURE__ */ jsx3("group", { userData: FURNITURE3, children: section ? /* @__PURE__ */ jsx3(CutSheet, { box, section, theme: resolved }) : /* @__PURE__ */ jsx3(Picker, { box, theme: resolved }) });
+};
+var useSquare = () => {
+  const square = useMemo3(
+    () => new BufferGeometry2().setFromPoints([
+      new Vector34(-1, 1, 0),
+      new Vector34(1, 1, 0),
+      new Vector34(1, -1, 0),
+      new Vector34(-1, -1, 0)
+    ]),
+    []
+  );
+  useEffect2(() => () => square.dispose(), [square]);
+  return square;
+};
+var Picker = ({ box, theme }) => {
+  const store = useSectionStore();
+  const camera = useThree3((state) => state.camera);
+  const scene = useThree3((state) => state.scene);
+  const domElement = useThree3((state) => state.gl.domElement);
+  const invalidate = useThree3((state) => state.invalidate);
+  const isTap = useTapGuard();
+  const square = useSquare();
+  const previewRef = useRef2(null);
+  const hover = useRef2(null);
+  const [hoveredPlane, setHoveredPlane] = useState2(null);
+  const span = useMemo3(() => box.getSize(new Vector34()).length(), [box]);
+  const centre = useMemo3(() => box.getCenter(new Vector34()), [box]);
+  const previewSize = span * PREVIEW_SCALE;
+  useEffect2(() => {
+    const raycaster = new Raycaster();
+    const pointer = new Vector22();
+    const aim = new Vector34();
+    const hide = () => {
+      if (!hover.current) return;
+      hover.current = null;
+      if (previewRef.current) previewRef.current.visible = false;
+      invalidate();
+    };
+    const move = (event) => {
+      const rect = domElement.getBoundingClientRect();
+      pointer.set(
+        (event.clientX - rect.left) / rect.width * 2 - 1,
+        -((event.clientY - rect.top) / rect.height) * 2 + 1
+      );
+      raycaster.setFromCamera(pointer, camera);
+      const hit = surfaceUnderRay(raycaster, scene);
+      const preview = previewRef.current;
+      if (!hit || !preview) {
+        hide();
+        return;
+      }
+      hover.current = hit;
+      preview.position.copy(hit.point).addScaledVector(hit.normal, span * PREVIEW_LIFT);
+      preview.lookAt(aim.copy(hit.point).add(hit.normal));
+      preview.visible = true;
+      invalidate();
+    };
+    const up = (event) => {
+      const hit = hover.current;
+      if (event.button !== 0 || !hit || !isTap(event)) return;
+      store.set({
+        enabled: true,
+        plane: sectionFromPick({ point: hit.point, normal: hit.normal }),
+        depth: pickedStartDepth(box)
+      });
+    };
+    domElement.addEventListener("pointermove", move);
+    domElement.addEventListener("pointerleave", hide);
+    domElement.addEventListener("pointerup", up);
+    return () => {
+      domElement.removeEventListener("pointermove", move);
+      domElement.removeEventListener("pointerleave", hide);
+      domElement.removeEventListener("pointerup", up);
+    };
+  }, [box, camera, domElement, invalidate, isTap, scene, span, store]);
+  const [planes, setPlanes] = useState2(() => axesPlanes(box, camera.position));
+  const key = planes.map((plane) => plane.sign).join();
+  useFrame(() => {
+    const next = [camera.position.x, camera.position.y, camera.position.z].map((eye, axis) => eye - [centre.x, centre.y, centre.z][axis] < 0 ? -1 : 1).join();
+    if (next !== key) setPlanes(axesPlanes(box, camera.position));
+  });
+  const planeHandlers = (plane) => ({
+    // A plane is behind the part, and the part does not stop propagation: a
+    // click on a face reaches the plane behind it too. The preview says which
+    // one the pointer is really on.
+    onPointerOver: (event) => {
+      if (hover.current) return;
+      event.stopPropagation();
+      setHoveredPlane(plane.axis);
+      invalidate();
+    },
+    onPointerOut: () => {
+      setHoveredPlane((held) => held === plane.axis ? null : held);
+      invalidate();
+    },
+    onClick: (event) => {
+      if (hover.current || !isTap(event.nativeEvent)) return;
+      event.stopPropagation();
+      store.set(plane.options);
+    }
+  });
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsxs3("group", { ref: previewRef, visible: false, children: [
+      /* @__PURE__ */ jsxs3("mesh", { renderOrder: SECTION_RENDER_ORDER.outline, raycast: () => null, children: [
+        /* @__PURE__ */ jsx3("planeGeometry", { args: [previewSize, previewSize] }),
+        /* @__PURE__ */ jsx3(
+          "meshBasicMaterial",
+          {
+            color: theme.sectionOutline,
+            transparent: true,
+            opacity: 0.2,
+            side: DoubleSide,
+            depthWrite: false
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx3(
+        "lineLoop",
+        {
+          geometry: square,
+          scale: previewSize / 2,
+          renderOrder: SECTION_RENDER_ORDER.outline,
+          raycast: () => null,
+          children: /* @__PURE__ */ jsx3(
+            "lineBasicMaterial",
+            {
+              color: theme.sectionOutline,
+              transparent: true,
+              opacity: 0.5,
+              depthTest: false,
+              depthWrite: false
+            }
+          )
+        }
+      )
+    ] }),
+    planes.map((plane) => /* @__PURE__ */ jsxs3(
+      "group",
+      {
+        position: [plane.position.x, plane.position.y, plane.position.z],
+        rotation: AXIS_ROTATIONS[plane.axis],
+        children: [
+          /* @__PURE__ */ jsxs3("mesh", { renderOrder: SECTION_RENDER_ORDER.outline, ...planeHandlers(plane), children: [
+            /* @__PURE__ */ jsx3("planeGeometry", { args: [plane.size, plane.size] }),
+            /* @__PURE__ */ jsx3(
+              "meshBasicMaterial",
+              {
+                color: AXIS_COLORS[plane.axis],
+                transparent: true,
+                opacity: hoveredPlane === plane.axis ? 0.45 : 0.3,
+                side: DoubleSide,
+                depthWrite: false
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx3(
+            "lineLoop",
+            {
+              geometry: square,
+              scale: plane.size / 2,
+              renderOrder: SECTION_RENDER_ORDER.outline,
+              raycast: () => null,
+              children: /* @__PURE__ */ jsx3("lineBasicMaterial", { color: AXIS_COLORS[plane.axis], transparent: true, opacity: 0.7 })
+            }
+          )
+        ]
+      },
+      plane.axis
+    ))
+  ] });
+};
+var CutSheet = ({ box, section, theme }) => {
+  const square = useSquare();
+  const cut = useMemo3(() => resolveSectionPlane(section, box), [box, section]);
+  const span = useMemo3(() => box.getSize(new Vector34()).length(), [box]);
+  const placement = useMemo3(() => {
+    if (!cut) return null;
+    const position = sectionAnchor(box, cut.plane).addScaledVector(
+      cut.plane.normal,
+      -span * SHEET_SETBACK
+    );
+    return { position, quaternion: new Quaternion2().setFromUnitVectors(Z, cut.plane.normal) };
+  }, [box, cut, span]);
+  if (!placement) return null;
+  const size = span * OUTLINE_SCALE;
+  return /* @__PURE__ */ jsxs3("group", { position: placement.position, quaternion: placement.quaternion, children: [
+    /* @__PURE__ */ jsxs3("mesh", { renderOrder: SECTION_RENDER_ORDER.outline, raycast: () => null, children: [
+      /* @__PURE__ */ jsx3("planeGeometry", { args: [size, size] }),
+      /* @__PURE__ */ jsx3(
+        "meshBasicMaterial",
+        {
+          color: theme.sectionOutline,
+          transparent: true,
+          opacity: 0.1,
+          side: DoubleSide,
+          depthWrite: false
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx3(
+      "lineLoop",
+      {
+        geometry: square,
+        scale: size / 2,
+        renderOrder: SECTION_RENDER_ORDER.outline,
+        raycast: () => null,
+        children: /* @__PURE__ */ jsx3(
+          "lineBasicMaterial",
+          {
+            color: theme.sectionOutline,
+            transparent: true,
+            opacity: 0.5,
+            depthTest: false,
+            depthWrite: false
+          }
+        )
+      }
+    )
+  ] });
+};
+
+// src/measure-tool.tsx
+import { Html, Line } from "@react-three/drei";
+import { useFrame as useFrame2, useThree as useThree4 } from "@react-three/fiber";
+import { useEffect as useEffect3, useLayoutEffect, useMemo as useMemo4, useRef as useRef3, useState as useState3 } from "react";
+import {
+  Raycaster as Raycaster2,
+  SphereGeometry,
+  Vector2 as Vector23,
+  Vector3 as Vector35
+} from "three";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var FURNITURE4 = { [EXCLUDE_FROM_FRAME]: true };
+var MEASURE_LABEL_CLASS = "toolpath-measure-label";
+var MeasureTool = ({
+  mode = "distance",
+  measurements,
+  onChange,
+  showDeltas = true,
+  format = formatMillimetres,
+  labelClassName,
+  theme
+}) => {
+  const store = useSectionStore();
+  const box = useContentBox();
+  const resolved = useMemo4(() => resolveTheme(theme), [theme]);
+  const [held, setHeld] = useState3([]);
+  const controlled = measurements !== void 0;
+  const list = controlled ? measurements : held;
+  const [draft, setDraft] = useState3([]);
+  useEffect3(() => {
+    store.setEngaged(true);
+    return () => store.setEngaged(false);
+  }, [store]);
+  useEffect3(() => {
+    setDraft([]);
+  }, [mode]);
+  const commit = (next) => {
+    if (!controlled) setHeld(next);
+    onChange?.(next);
+  };
+  const latest = useRef3({ list, commit });
+  latest.current = { list, commit };
+  useEffect3(() => {
+    const onKey = (event) => {
+      if (event.key === "Escape") {
+        setDraft([]);
+        return;
+      }
+      if (event.key !== "Delete" && event.key !== "Backspace") return;
+      if (isEditing(event.target)) return;
+      const { list: current, commit: apply } = latest.current;
+      if (current.length === 0) return;
+      event.preventDefault();
+      apply(current.slice(0, -1));
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+  const place = (point) => {
+    const points = [...draft, point];
+    const complete = measurementFromPoints(mode, points, nextMeasurementId(list));
+    if (complete) {
+      commit([...list, complete]);
+      setDraft([]);
+    } else {
+      setDraft(points);
+    }
+  };
+  if (box.isEmpty()) return null;
+  const label = className(labelClassName);
+  return /* @__PURE__ */ jsxs4("group", { userData: FURNITURE4, children: [
+    /* @__PURE__ */ jsx4(
+      Snapper,
+      {
+        mode,
+        draft,
+        onPlace: place,
+        theme: resolved,
+        format,
+        label
+      }
+    ),
+    draft.map((point, index) => /* @__PURE__ */ jsx4(
+      ScreenDot,
+      {
+        point,
+        pixels: MEASURE_MARKER_PIXELS,
+        color: resolved.measure
+      },
+      index
+    )),
+    draft.length === 2 ? /* @__PURE__ */ jsx4(Segment, { points: [draft[0], draft[1]], color: resolved.measure }) : null,
+    list.map((measurement) => /* @__PURE__ */ jsx4(
+      MeasurementView,
+      {
+        measurement,
+        theme: resolved,
+        format,
+        showDeltas,
+        label
+      },
+      measurement.id
+    ))
+  ] });
+};
+var NO_POINTER = { pointerEvents: "none" };
+var NOWHERE = [new Vector35(), new Vector35()];
+var Snapper = ({ mode, draft, onPlace, theme, format, label }) => {
+  const camera = useThree4((state) => state.camera);
+  const scene = useThree4((state) => state.scene);
+  const size = useThree4((state) => state.size);
+  const domElement = useThree4((state) => state.gl.domElement);
+  const invalidate = useThree4((state) => state.invalidate);
+  const isTap = useTapGuard();
+  const marker = useRef3(null);
+  const edgeLine = useRef3(null);
+  const band = useRef3(null);
+  const bandLabel = useRef3(null);
+  const bandText = useRef3(null);
+  const snap = useRef3(null);
+  const dot = useDot();
+  useLayoutEffect(() => {
+    if (edgeLine.current) edgeLine.current.visible = false;
+    if (band.current) band.current.visible = false;
+  }, []);
+  const current = useRef3({ mode, draft, onPlace, format, size });
+  current.current = { mode, draft, onPlace, format, size };
+  useEffect3(() => {
+    const raycaster = new Raycaster2();
+    const pointer = new Vector23();
+    const hide = () => {
+      if (!snap.current) return;
+      snap.current = null;
+      if (marker.current) marker.current.visible = false;
+      if (edgeLine.current) edgeLine.current.visible = false;
+      if (band.current) band.current.visible = false;
+      if (bandLabel.current) bandLabel.current.visible = false;
+      if (bandText.current) bandText.current.style.display = "none";
+      invalidate();
+    };
+    let last = null;
+    const update = (clientX, clientY, shift) => {
+      last = { x: clientX, y: clientY };
+      const rect = domElement.getBoundingClientRect();
+      pointer.set(
+        (clientX - rect.left) / rect.width * 2 - 1,
+        -((clientY - rect.top) / rect.height) * 2 + 1
+      );
+      raycaster.setFromCamera(pointer, camera);
+      const hit = hitUnderRay(raycaster, scene);
+      if (!hit?.face) {
+        hide();
+        return;
+      }
+      const normal = hit.face.normal.clone().transformDirection(hit.object.matrixWorld);
+      const { size: viewport, draft: placed, mode: kind, format: write } = current.current;
+      const snapped = snapAt(
+        { point: hit.point, normal },
+        edgesBeside(hit.object),
+        camera,
+        viewport
+      );
+      const from = placed[placed.length - 1];
+      const lock = shift && from ? lockToAxis(from, snapped.point) : null;
+      const found = lock ? { ...snapped, point: new Vector35(lock.point.x, lock.point.y, lock.point.z), edge: null } : snapped;
+      snap.current = found;
+      const node = marker.current;
+      if (node) {
+        node.position.copy(found.point);
+        node.visible = true;
+        node.scale.setScalar(
+          screenLength(camera, found.point, viewport, SNAP_MARKER_PIXELS[found.kind])
+        );
+      }
+      if (edgeLine.current) {
+        edgeLine.current.visible = found.edge !== null;
+        if (found.edge) moveLine(edgeLine.current, found.edge[0], found.edge[1]);
+      }
+      const text = liveLabel(kind, placed, found.point, write);
+      if (band.current) {
+        band.current.visible = from !== void 0;
+        if (from) moveLine(band.current, from, found.point);
+        setLineColor(band.current, lock ? AXIS_COLORS[lock.axis] : theme.measure);
+      }
+      if (bandLabel.current && from) {
+        const at = midpoint(from, found.point);
+        bandLabel.current.position.set(at.x, at.y, at.z);
+        bandLabel.current.visible = text !== null;
+      }
+      if (bandText.current) {
+        bandText.current.style.display = text === null ? "none" : "";
+        bandText.current.textContent = text ?? "";
+      }
+      invalidate();
+    };
+    const move = (event) => {
+      if (event.buttons !== 0) {
+        hide();
+        return;
+      }
+      update(event.clientX, event.clientY, event.shiftKey);
+    };
+    const key = (event) => {
+      if (event.key !== "Shift" || !last || !snap.current) return;
+      update(last.x, last.y, event.type === "keydown");
+    };
+    const up = (event) => {
+      if (event.button !== 0 || !isTap(event)) return;
+      update(event.clientX, event.clientY, event.shiftKey);
+      const found = snap.current;
+      if (!found) return;
+      current.current.onPlace({ x: found.point.x, y: found.point.y, z: found.point.z });
+    };
+    const leave = () => {
+      last = null;
+      hide();
+    };
+    domElement.addEventListener("pointermove", move);
+    domElement.addEventListener("pointerleave", leave);
+    domElement.addEventListener("pointerup", up);
+    window.addEventListener("keydown", key);
+    window.addEventListener("keyup", key);
+    return () => {
+      domElement.removeEventListener("pointermove", move);
+      domElement.removeEventListener("pointerleave", leave);
+      domElement.removeEventListener("pointerup", up);
+      window.removeEventListener("keydown", key);
+      window.removeEventListener("keyup", key);
+    };
+  }, [camera, domElement, invalidate, isTap, scene, theme.measure]);
+  useEffect3(() => {
+    if (draft.length === 0 && band.current) {
+      band.current.visible = false;
+      if (bandLabel.current) bandLabel.current.visible = false;
+      if (bandText.current) {
+        bandText.current.style.display = "none";
+        bandText.current.textContent = "";
+      }
+      invalidate();
+    }
+  }, [draft, invalidate]);
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx4("group", { ref: marker, visible: false, children: /* @__PURE__ */ jsx4("mesh", { geometry: dot, renderOrder: MEASURE_RENDER_ORDER, raycast: () => null, children: /* @__PURE__ */ jsx4("meshBasicMaterial", { color: theme.measureSnap, depthTest: false, depthWrite: false }) }) }),
+    /* @__PURE__ */ jsx4(
+      Line,
+      {
+        ref: edgeLine,
+        points: NOWHERE,
+        color: theme.measureSnap,
+        lineWidth: MEASURE_LINE_PIXELS.edge,
+        depthTest: false,
+        depthWrite: false,
+        frustumCulled: false,
+        renderOrder: MEASURE_RENDER_ORDER,
+        raycast: () => null
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      Line,
+      {
+        ref: band,
+        points: NOWHERE,
+        color: theme.measure,
+        lineWidth: MEASURE_LINE_PIXELS.line,
+        depthTest: false,
+        depthWrite: false,
+        frustumCulled: false,
+        renderOrder: MEASURE_RENDER_ORDER,
+        raycast: () => null
+      }
+    ),
+    /* @__PURE__ */ jsx4("group", { ref: bandLabel, visible: false, children: /* @__PURE__ */ jsx4(Html, { center: true, zIndexRange: [0, 0], style: NO_POINTER, children: /* @__PURE__ */ jsx4(
+      "div",
+      {
+        ref: bandText,
+        className: label,
+        "data-measure-label": "live",
+        style: { display: "none" }
+      }
+    ) }) })
+  ] });
+};
+function moveLine(line, from, to) {
+  const start = line.geometry.getAttribute("instanceStart");
+  const array = start.data.array;
+  array[0] = from.x;
+  array[1] = from.y;
+  array[2] = from.z;
+  array[3] = to.x;
+  array[4] = to.y;
+  array[5] = to.z;
+  start.data.needsUpdate = true;
+  line.computeLineDistances();
+}
+function setLineColor(line, color) {
+  const material = line.material;
+  if (material.color.getHex() !== color) material.color.setHex(color);
+}
+function liveLabel(mode, placed, at, format) {
+  if (mode === "distance" && placed.length === 1) {
+    return format(distanceBetween(placed[0], at));
+  }
+  if (mode === "angle" && placed.length === 2) {
+    return formatDegrees(angleAt(placed[1], placed[0], at));
+  }
+  return null;
+}
+function edgesBeside(object) {
+  const siblings = object.parent?.children ?? [];
+  for (const sibling of siblings) {
+    if (!("isLineSegments" in sibling)) continue;
+    const geometry = sibling.geometry;
+    const positions = geometry.getAttribute("position");
+    if (!positions) continue;
+    return { positions: positions.array, matrixWorld: sibling.matrixWorld };
+  }
+  return null;
+}
+var MeasurementView = ({
+  measurement,
+  theme,
+  format,
+  showDeltas,
+  label
+}) => {
+  const text = measurementLabel(measurement, format);
+  const anchor = measurementLabelAnchor(measurement);
+  if (measurement.kind === "distance") {
+    const [a2, b2] = measurement.points;
+    return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx4(Segment, { points: [a2, b2], color: theme.measure }),
+      /* @__PURE__ */ jsx4(ScreenDot, { point: a2, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
+      /* @__PURE__ */ jsx4(ScreenDot, { point: b2, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
+      showDeltas ? /* @__PURE__ */ jsx4(DeltaLegs, { a: a2, b: b2, id: measurement.id, format, label }) : null,
+      /* @__PURE__ */ jsx4(Label, { at: anchor, text, kind: "distance", id: measurement.id, className: label })
+    ] });
+  }
+  const [a, vertex, b] = measurement.points;
+  const arc = angleArc(vertex, a, b, angleArcRadius(vertex, a, b));
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx4(Segment, { points: [vertex, a], color: theme.measure }),
+    /* @__PURE__ */ jsx4(Segment, { points: [vertex, b], color: theme.measure }),
+    /* @__PURE__ */ jsx4(Polyline, { points: arc, color: theme.measure }),
+    /* @__PURE__ */ jsx4(ScreenDot, { point: a, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
+    /* @__PURE__ */ jsx4(ScreenDot, { point: vertex, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
+    /* @__PURE__ */ jsx4(ScreenDot, { point: b, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
+    /* @__PURE__ */ jsx4(Label, { at: anchor, text, kind: "angle", id: measurement.id, className: label })
+  ] });
+};
+var DeltaLegs = ({ a, b, id, format, label }) => {
+  const camera = useThree4((state) => state.camera);
+  const size = useThree4((state) => state.size);
+  const invalidate = useThree4((state) => state.invalidate);
+  const legs = useMemo4(() => deltaLegs(a, b), [a, b]);
+  const lines = useRef3([]);
+  const centre = useMemo4(() => {
+    const at = midpoint(a, b);
+    return new Vector35(at.x, at.y, at.z);
+  }, [a, b]);
+  useFrame2(() => {
+    const dash = screenLength(camera, centre, size, DELTA_DASH_PIXELS);
+    let changed = false;
+    for (const line of lines.current) {
+      const material = line?.material;
+      if (!material || Math.abs(material.dashSize - dash) <= dash * 1e-3) continue;
+      material.dashSize = dash;
+      material.gapSize = dash;
+      changed = true;
+    }
+    if (changed) invalidate();
+  });
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    legs.map((leg, index) => /* @__PURE__ */ jsx4(
+      Line,
+      {
+        ref: (line) => {
+          lines.current[index] = line;
+        },
+        points: [
+          new Vector35(leg.from.x, leg.from.y, leg.from.z),
+          new Vector35(leg.to.x, leg.to.y, leg.to.z)
+        ],
+        color: AXIS_COLORS[leg.axis],
+        lineWidth: MEASURE_LINE_PIXELS.leg,
+        dashed: true,
+        dashSize: 1,
+        gapSize: 1,
+        depthTest: false,
+        depthWrite: false,
+        frustumCulled: false,
+        renderOrder: MEASURE_RENDER_ORDER,
+        raycast: () => null
+      },
+      leg.axis
+    )),
+    legs.map((leg) => /* @__PURE__ */ jsx4(
+      Label,
+      {
+        at: midpoint(leg.from, leg.to),
+        text: `${leg.axis.toUpperCase()} ${format(leg.length)}`,
+        kind: "delta",
+        axis: leg.axis,
+        id,
+        className: label
+      },
+      leg.axis
+    ))
+  ] });
+};
+var Label = ({ at, text, kind, id, axis, className: name }) => /* @__PURE__ */ jsx4("group", { position: [at.x, at.y, at.z], children: /* @__PURE__ */ jsx4(Html, { center: true, zIndexRange: [0, 0], style: NO_POINTER, children: /* @__PURE__ */ jsx4("div", { className: name, "data-measure-label": kind, "data-measurement-id": id, "data-axis": axis, children: text }) }) });
+var ScreenDot = ({ point, pixels, color }) => {
+  const camera = useThree4((state) => state.camera);
+  const size = useThree4((state) => state.size);
+  const invalidate = useThree4((state) => state.invalidate);
+  const node = useRef3(null);
+  const dot = useDot();
+  const position = useMemo4(() => new Vector35(point.x, point.y, point.z), [point]);
+  useFrame2(() => {
+    const group = node.current;
+    if (!group) return;
+    const length = screenLength(camera, position, size, pixels);
+    if (Math.abs(group.scale.x - length) > length * 1e-3) {
+      group.scale.setScalar(length);
+      invalidate();
+    }
+  });
+  return /* @__PURE__ */ jsx4("group", { ref: node, position, children: /* @__PURE__ */ jsx4("mesh", { geometry: dot, renderOrder: MEASURE_RENDER_ORDER, raycast: () => null, children: /* @__PURE__ */ jsx4("meshBasicMaterial", { color, depthTest: false, depthWrite: false }) }) });
+};
+var Segment = ({ points, color }) => {
+  const [a, b] = points;
+  const ends = useMemo4(
+    () => [new Vector35(a.x, a.y, a.z), new Vector35(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]
+  );
+  return /* @__PURE__ */ jsx4(Polyline, { points: ends, color });
+};
+var Polyline = ({ points, color }) => {
+  if (points.length < 2) return null;
+  return /* @__PURE__ */ jsx4(
+    Line,
+    {
+      points,
+      color,
+      lineWidth: MEASURE_LINE_PIXELS.line,
+      depthTest: false,
+      depthWrite: false,
+      frustumCulled: false,
+      renderOrder: MEASURE_RENDER_ORDER,
+      raycast: () => null
+    }
+  );
+};
+function useDot() {
+  const geometry = useMemo4(() => new SphereGeometry(1, 16, 12), []);
+  useEffect3(() => () => geometry.dispose(), [geometry]);
+  return geometry;
+}
+function isEditing(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  return target.isContentEditable || target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement;
+}
+function className(extra) {
+  return extra ? `${MEASURE_LABEL_CLASS} ${extra}` : MEASURE_LABEL_CLASS;
+}
+
 // src/model/normals.ts
 function regionNormals(geometry, regions) {
   const position = geometry.getAttribute("position");
@@ -385,14 +1338,23 @@ function regionNormals(geometry, regions) {
   return normals;
 }
 export {
+  ANGLE_ARC_FRACTION,
+  ANGLE_ARC_SEGMENTS,
+  AXES_PLANE_OFFSET,
+  AXES_PLANE_SCALE,
+  AXIS_COLORS,
   Axes,
   CAD_CAMERA_UP,
   CANDIDATE_WEIGHT,
+  CAP_HATCH,
   CHAMFER,
   CadCameraControls,
   DEFAULT_FIT_MARGIN,
+  DEFAULT_SECTION_NORMAL,
   DEFAULT_THEME,
+  DELTA_DASH_PIXELS,
   DIRECTION_COLORS,
+  DISABLED_SECTION,
   DOUBLE_TAP_MS,
   DirectionArrows,
   EXCLUDE_FROM_FRAME,
@@ -405,7 +1367,12 @@ export {
   HIGHLIGHT_WEIGHT,
   HOVER_WEIGHT,
   MAX_FRAME_RATIO,
+  MEASURE_LABEL_CLASS,
+  MEASURE_LINE_PIXELS,
+  MEASURE_MARKER_PIXELS,
+  MEASURE_RENDER_ORDER,
   MIN_FRAME_RATIO,
+  MeasureTool,
   NO_MODIFIERS,
   ORBIT_TARGET_COLOR,
   ORBIT_TARGET_FADE_MS,
@@ -415,12 +1382,18 @@ export {
   ORBIT_TARGET_RING_OPACITY,
   ORBIT_TARGET_RING_PIXELS,
   ORBIT_TARGET_RING_WIDTH,
+  OUTLINE_SCALE,
   PERSPECTIVE_FOV,
   PICKED_SURFACE_LABEL,
+  POINTS_PER_MEASUREMENT,
+  PREVIEW_SCALE,
   PartMesh,
   PartReportFormatError,
   REGION_ATTRIBUTE,
   SECTION_RENDER_ORDER,
+  SNAP_MARKER_PIXELS,
+  SNAP_PIXELS,
+  SectionTool,
   SectionView,
   TAP_SLOP,
   UnsupportedKernelVersionError,
@@ -429,10 +1402,15 @@ export {
   ViewCube,
   Viewer,
   adaptedUp,
+  angleArc,
+  angleArcRadius,
+  angleAt,
+  applyCapTheme,
   applyHighlightLayers,
   applyProjection,
   arrowPlacement,
   aspectRatio,
+  axesPlanes,
   bestOwner,
   boundsFromBox,
   buildPick,
@@ -442,25 +1420,43 @@ export {
   cadViewDirections,
   cameraLimits,
   contentBounds,
+  createCapMaterial,
+  createMaskMaterial,
+  createMaskTarget,
   createPart,
+  createSectionStore,
+  createStencilMaterials,
   cubeOutlineGeometry,
   cubeZones,
   currentViewDirection,
   cycleOwner,
   defaultBounds,
+  deltaBetween,
+  deltaLegs,
   directionColor,
   directionIndexOf,
   directionLabel,
+  distanceBetween,
   dragPlane,
+  excludedFromFrame,
   featureTypeRank,
   fitDistance,
   focusForPick,
+  formatDegrees,
+  formatMillimetres,
   gridGeometry,
   gridSpec,
   groupByDirection,
+  hitUnderRay,
   labelGeometry,
   labelTexture,
+  lockToAxis,
+  measurementFromPoints,
+  measurementLabel,
+  measurementLabelAnchor,
+  midpoint,
   movedFar,
+  nextMeasurementId,
   normalizePartReport,
   orbitTargetOpacity,
   orthographicHalfHeight,
@@ -476,6 +1472,8 @@ export {
   retargetPose,
   sameDirection,
   screenLength,
+  screenPoint,
+  sectionAnchor,
   sectionBounds,
   sectionConstant,
   sectionDepth,
@@ -483,16 +1481,20 @@ export {
   sectionDepthRange,
   sectionFromPick,
   sectionOffset,
+  sectionOptionsFromState,
   sectionPlane,
   smoothRegionNormals,
+  snapAt,
   squaredUp,
   startPosition,
+  surfaceUnderRay,
   targetBoundary,
   themesEqual,
   trackDoubleTaps,
   trackTaps,
   useContentBox,
   useRetarget,
+  useSectionStore,
   useTapGuard,
   useViewerControls,
   viewDirection,