@toolpath/viewer 1.1.1 → 1.2.0

package/dist/{chunk-4BU4QZCL.js → chunk-HWAEUJ4H.js}

@@ -1,9 +1,16 @@
 // src/engine/engine-part.tsx
-import { useEffect as useEffect6, useMemo as useMemo7 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo7 } from "react";
 
 // src/part-mesh.tsx
 import { useThree as useThree7 } from "@react-three/fiber";
-import { useCallback as useCallback3, useEffect as useEffect5, useLayoutEffect, useMemo as useMemo6, useRef as useRef6 } from "react";
+import {
+  useCallback as useCallback3,
+  useEffect as useEffect6,
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo6,
+  useRef as useRef6,
+  useSyncExternalStore
+} from "react";
 import { Vector3 as Vector310 } from "three";
 
 // src/model/directions.ts
@@ -120,10 +127,19 @@ var DEFAULT_THEME = {
   picked: 16347926,
   edge: 0,
   edgeOpacity: 0.5,
-  sectionCap: 13093848,
+  sectionCap: 14672618,
+  sectionHatch: 9080998,
   sectionOutline: 7057587,
   sectionHandle: 15922167,
   sectionHandleOutline: 3948625,
+  /*
+   * A cool blue, and the snap a lighter one. Warm is spoken for — hover,
+   * picked and the selection are all on that side of the wheel — and the
+   * section tool's teal is the nearest neighbour, which a measurement line
+   * crossing a cutting plane has to stay legible against.
+   */
+  measure: 5213943,
+  measureSnap: 12572671,
   cube: 14080482,
   cubeEdge: 7435917,
   cubeLabel: 3948625
@@ -132,7 +148,7 @@ function resolveTheme(overrides) {
   return { ...DEFAULT_THEME, ...overrides };
 }
 function themesEqual(a, b) {
-  return a.background === b.background && a.hemisphereSky === b.hemisphereSky && a.hemisphereGround === b.hemisphereGround && a.hemisphereIntensity === b.hemisphereIntensity && a.ambient === b.ambient && a.ambientIntensity === b.ambientIntensity && a.part === b.part && a.partEmissive === b.partEmissive && a.hover === b.hover && a.highlight === b.highlight && a.picked === b.picked && a.edge === b.edge && a.edgeOpacity === b.edgeOpacity && a.sectionCap === b.sectionCap && a.sectionOutline === b.sectionOutline && a.sectionHandle === b.sectionHandle && a.sectionHandleOutline === b.sectionHandleOutline && a.cube === b.cube && a.cubeEdge === b.cubeEdge && a.cubeLabel === b.cubeLabel;
+  return a.background === b.background && a.hemisphereSky === b.hemisphereSky && a.hemisphereGround === b.hemisphereGround && a.hemisphereIntensity === b.hemisphereIntensity && a.ambient === b.ambient && a.ambientIntensity === b.ambientIntensity && a.part === b.part && a.partEmissive === b.partEmissive && a.hover === b.hover && a.highlight === b.highlight && a.picked === b.picked && a.edge === b.edge && a.edgeOpacity === b.edgeOpacity && a.sectionCap === b.sectionCap && a.sectionHatch === b.sectionHatch && a.sectionOutline === b.sectionOutline && a.sectionHandle === b.sectionHandle && a.sectionHandleOutline === b.sectionHandleOutline && a.measure === b.measure && a.measureSnap === b.measureSnap && a.cube === b.cube && a.cubeEdge === b.cubeEdge && a.cubeLabel === b.cubeLabel;
 }
 function directionColor(index) {
   const wrapped = index % DIRECTION_COLORS.length;
@@ -178,19 +194,266 @@ function applyHighlightLayers(part, layers, theme) {
 }
 
 // src/render/section.ts
-import { Plane, Vector3 } from "three";
+import { Plane, Vector3 as Vector32 } from "three";
+
+// src/render/camera.ts
+import { OrthographicCamera, Vector3 } from "three";
+var PERSPECTIVE_FOV = 30;
+var DEFAULT_FIT_MARGIN = 1.2;
+var EXCLUDE_FROM_FRAME = "viewerExcludeFromFrame";
+function defaultBounds() {
+  return { center: new Vector3(0, 0, 0), radius: 1 };
+}
+function aspectRatio(size) {
+  return size.width > 0 && size.height > 0 ? size.width / size.height : 1;
+}
+var SCREEN_LENGTH_EPSILON = 1e-9;
+function screenLength(camera, point, viewport, pixels) {
+  const height = viewport.height > 0 ? viewport.height : 1;
+  const zoom = camera.zoom || 1;
+  const visible = camera instanceof OrthographicCamera ? (camera.top - camera.bottom) / zoom : 2 * Math.tan(camera.fov / 2 * Math.PI / 180) * Math.max(camera.position.distanceTo(point), SCREEN_LENGTH_EPSILON) / zoom;
+  return visible / height * pixels;
+}
+function boundsFromBox(box) {
+  if (box.isEmpty()) return defaultBounds();
+  const center = box.getCenter(new Vector3());
+  const radius = box.getSize(new Vector3()).length() / 2;
+  return { center, radius: radius > 0 ? radius : 1 };
+}
+function contentBounds(root, into) {
+  into.makeEmpty();
+  root.updateWorldMatrix(true, true);
+  root.traverse((object) => {
+    if (excludedFromFrame(object, root)) return;
+    if ("isMesh" in object || "isLine" in object || "isPoints" in object) {
+      into.expandByObject(object);
+    }
+  });
+  return boundsFromBox(into);
+}
+function excludedFromFrame(object, root) {
+  let current = object;
+  while (current && current !== root) {
+    if (current.userData[EXCLUDE_FROM_FRAME]) return true;
+    current = current.parent;
+  }
+  return false;
+}
+function perspectiveFitDistance(fovDegrees, aspect, radius) {
+  const verticalFov = fovDegrees * Math.PI / 180;
+  const horizontalFov = 2 * Math.atan(Math.tan(verticalFov / 2) * aspect);
+  return radius / Math.sin(Math.min(verticalFov, horizontalFov) / 2);
+}
+function orthographicHalfHeight(aspect, radius) {
+  return aspect >= 1 ? radius : radius / aspect;
+}
+function nearFar(projection, radius) {
+  if (projection === "orthographic") return { near: -radius * 100, far: radius * 100 };
+  return { near: radius / 100, far: radius * 100 };
+}
+var START_DIRECTION = {
+  orthographic: [1.2, -2.5, 3],
+  perspective: [2, 1.2, -2.5]
+};
+function fitDistance(projection, size, bounds, margin = DEFAULT_FIT_MARGIN) {
+  if (projection === "perspective") {
+    return perspectiveFitDistance(PERSPECTIVE_FOV, aspectRatio(size), bounds.radius * margin);
+  }
+  return bounds.radius * margin * 4;
+}
+function startPosition(projection, size, bounds, margin = DEFAULT_FIT_MARGIN) {
+  const [x, y, z] = START_DIRECTION[projection];
+  return new Vector3(x, y, z).normalize().multiplyScalar(fitDistance(projection, size, bounds, margin)).add(bounds.center);
+}
+var MIN_FRAME_RATIO = 0.25;
+var MAX_FRAME_RATIO = 10;
+var TARGET_BOUNDARY_RATIO = 4;
+function cameraLimits(projection, size, bounds, margin = DEFAULT_FIT_MARGIN, framed) {
+  const fit = fitDistance(projection, size, bounds, margin);
+  const framedRadius = framed && framed.radius > 0 ? framed.radius : bounds.radius;
+  if (projection === "orthographic") {
+    const reach = bounds.radius > 0 ? bounds.radius / framedRadius : 1;
+    return {
+      minZoom: Math.min(MIN_FRAME_RATIO, MIN_FRAME_RATIO * reach),
+      maxZoom: Math.max(MAX_FRAME_RATIO, MAX_FRAME_RATIO * reach),
+      // Distance does not change apparent size under an orthographic camera, so
+      // these are not the zoom clamps in another form — they only keep the
+      // camera clear of the geometry it is looking at, and bounded.
+      minDistance: bounds.radius * margin,
+      maxDistance: fit / MIN_FRAME_RATIO
+    };
+  }
+  const framedFit = fitDistance(
+    projection,
+    size,
+    framedRadius === bounds.radius ? bounds : { ...bounds, radius: framedRadius },
+    margin
+  );
+  return {
+    // The wheel is `ACTION.DOLLY` under a perspective camera, so nothing here
+    // moves `camera.zoom`. They are set to the same pair anyway: a consumer
+    // that does zoom should not find the two cameras disagreeing about how far
+    // in is too far.
+    minZoom: MIN_FRAME_RATIO,
+    maxZoom: MAX_FRAME_RATIO,
+    minDistance: Math.min(fit, framedFit) / MAX_FRAME_RATIO,
+    maxDistance: Math.max(fit, framedFit) / MIN_FRAME_RATIO
+  };
+}
+var scratchBoundarySize = new Vector3();
+function targetBoundary(bounds, into, margin = DEFAULT_FIT_MARGIN) {
+  const reach = bounds.radius * margin * TARGET_BOUNDARY_RATIO;
+  return into.setFromCenterAndSize(
+    bounds.center,
+    scratchBoundarySize.set(reach * 2, reach * 2, reach * 2)
+  );
+}
+function applyProjection(camera, size, bounds, margin = DEFAULT_FIT_MARGIN) {
+  const aspect = aspectRatio(size);
+  const radius = bounds.radius * margin;
+  if (camera instanceof OrthographicCamera) {
+    const halfHeight = orthographicHalfHeight(aspect, radius);
+    const halfWidth = halfHeight * aspect;
+    camera.left = -halfWidth;
+    camera.right = halfWidth;
+    camera.top = halfHeight;
+    camera.bottom = -halfHeight;
+    const { near, far } = nearFar("orthographic", radius);
+    camera.near = near;
+    camera.far = far;
+  } else {
+    camera.fov = PERSPECTIVE_FOV;
+    camera.aspect = aspect;
+    const { near, far } = nearFar("perspective", radius);
+    camera.near = near;
+    camera.far = far;
+  }
+  camera.updateProjectionMatrix();
+}
+var CAD_CAMERA_UP = new Vector3(0, 0, 1);
+var scratchSide = new Vector3();
+function adaptedUp(view, up, into) {
+  const side = scratchSide.crossVectors(view, up).normalize();
+  return into.crossVectors(side, view).normalize();
+}
+var cadViewDirections = {
+  front: new Vector3(0, -1, 0),
+  back: new Vector3(0, 1, 0),
+  left: new Vector3(-1, 0, 0),
+  right: new Vector3(1, 0, 0),
+  top: new Vector3(0, 0, 1),
+  bottom: new Vector3(0, 0, -1),
+  isometric: new Vector3(1, -1, 1).normalize()
+};
+function currentViewDirection(camera, target, into) {
+  into.subVectors(camera.position, target);
+  if (into.lengthSq() <= Number.EPSILON) return into.copy(cadViewDirections.isometric);
+  return into.normalize();
+}
+
+// src/render/section.ts
 var SECTION_RENDER_ORDER = {
   stencil: 1,
   cap: 2,
-  handle: 6
+  handle: 6,
+  /** The tool's translucent plane and its outline, over everything but the handle. */
+  outline: 5
 };
 var START_DEPTH = 5e-3;
 var HANDLE_PIXELS = 78;
+var CAP_HATCH = {
+  pitch: 9,
+  line: 1.25,
+  outline: 1.5
+};
+var AXES_PLANE_OFFSET = 0.55;
+var AXES_PLANE_SCALE = 1.2;
+var PREVIEW_SCALE = 0.125;
+var OUTLINE_SCALE = 1.2;
 var EPSILON2 = 1e-9;
-var ARROW_AXIS = new Vector3(0, 1, 0);
+var ARROW_AXIS = new Vector32(0, 1, 0);
+var DEFAULT_SECTION_NORMAL = { x: 0, y: 0, z: 1 };
+var DISABLED_SECTION = {
+  enabled: false,
+  normal: DEFAULT_SECTION_NORMAL,
+  offset: 0,
+  constant: 0,
+  plane: null,
+  depth: null,
+  depthRange: null
+};
+function sectionOptionsFromState(state) {
+  if (state.plane) {
+    return { enabled: state.enabled, plane: state.plane, depth: state.depth ?? 0 };
+  }
+  return { enabled: state.enabled, normal: state.normal, offset: state.offset };
+}
+function axesPlanes(box, eye) {
+  const centre = box.getCenter(new Vector32());
+  const extent = box.getSize(new Vector32());
+  const largest = Math.max(extent.x, extent.y, extent.z);
+  const size = largest * AXES_PLANE_SCALE;
+  const offset = largest * AXES_PLANE_OFFSET;
+  const side = (delta) => delta < 0 ? -1 : 1;
+  const sx = side(eye.x - centre.x);
+  const sy = side(eye.y - centre.y);
+  const sz = side(eye.z - centre.z);
+  return [
+    {
+      axis: "x",
+      sign: sx,
+      position: { x: centre.x - sx * offset, y: centre.y, z: centre.z },
+      size,
+      options: { enabled: true, normal: { x: -sx, y: 0, z: 0 }, offset: 0.5 }
+    },
+    {
+      axis: "y",
+      sign: sy,
+      position: { x: centre.x, y: centre.y - sy * offset, z: centre.z },
+      size,
+      options: { enabled: true, normal: { x: 0, y: -sy, z: 0 }, offset: 0.5 }
+    },
+    {
+      axis: "z",
+      sign: sz,
+      position: { x: centre.x, y: centre.y, z: centre.z - sz * offset },
+      size,
+      options: { enabled: true, normal: { x: 0, y: 0, z: -sz }, offset: 0.5 }
+    }
+  ];
+}
+function hitUnderRay(raycaster, root) {
+  for (const hit of raycaster.intersectObjects(root.children, true)) {
+    if (!("isMesh" in hit.object) || !hit.face) continue;
+    if (!hit.object.visible || excludedFromFrame(hit.object, root)) continue;
+    if (clippedAway(hit)) continue;
+    return hit;
+  }
+  return null;
+}
+function clippedAway(hit) {
+  const material = hit.object.material;
+  const materials = Array.isArray(material) ? material : [material];
+  for (const entry of materials) {
+    const planes = entry?.clippingPlanes;
+    if (!planes) continue;
+    for (const plane of planes) if (plane.distanceToPoint(hit.point) < 0) return true;
+  }
+  return false;
+}
+function surfaceUnderRay(raycaster, root) {
+  const hit = hitUnderRay(raycaster, root);
+  if (!hit?.face) return null;
+  const normal = hit.face.normal.clone().transformDirection(hit.object.matrixWorld);
+  return { point: hit.point, normal };
+}
+function sectionAnchor(box, plane, into = new Vector32()) {
+  const centre = box.getCenter(into);
+  return centre.addScaledVector(plane.normal, -(plane.constant + plane.normal.dot(centre)));
+}
 var PICKED_SURFACE_LABEL = "Part surface";
 function unit(v) {
-  const vector = new Vector3(v.x, v.y, v.z);
+  const vector = new Vector32(v.x, v.y, v.z);
   return vector.lengthSq() === 0 ? vector.set(0, 0, 1) : vector.normalize();
 }
 function clamp01(value) {
@@ -198,7 +461,7 @@ function clamp01(value) {
 }
 function sectionBounds(box, normal) {
   const axis = unit(normal);
-  const corner = new Vector3();
+  const corner = new Vector32();
   let low = Number.POSITIVE_INFINITY;
   let high = Number.NEGATIVE_INFINITY;
   for (let i = 0; i < 8; i += 1) {
@@ -222,7 +485,7 @@ function sectionOffset(bounds, constant) {
   return span === 0 ? 0 : clamp01((constant - bounds.max) / span);
 }
 function sectionDepth(normal, anchor, constant) {
-  return -unit(normal).dot(new Vector3(anchor.x, anchor.y, anchor.z)) - constant;
+  return -unit(normal).dot(new Vector32(anchor.x, anchor.y, anchor.z)) - constant;
 }
 function sectionDepthConstant(normal, anchor, depth) {
   return sectionDepth(normal, anchor, depth);
@@ -241,7 +504,7 @@ function sectionFromPick(surface, label = PICKED_SURFACE_LABEL) {
   };
 }
 function pickedStartDepth(box) {
-  return box.getSize(new Vector3()).length() * START_DEPTH;
+  return box.getSize(new Vector32()).length() * START_DEPTH;
 }
 function sectionPlane(box, normal, offset, into = new Plane()) {
   const axis = unit(normal);
@@ -249,12 +512,12 @@ function sectionPlane(box, normal, offset, into = new Plane()) {
 }
 function dragPlane(axis, view, point, into = new Plane()) {
   const along = axis.lengthSq() === 0 ? ARROW_AXIS.clone() : axis.clone().normalize();
-  const side = new Vector3().crossVectors(view, along);
+  const side = new Vector32().crossVectors(view, along);
   if (side.lengthSq() < EPSILON2) side.copy(perpendicular(along));
   return into.setFromNormalAndCoplanarPoint(side.cross(along).normalize(), point);
 }
 function perpendicular(axis) {
-  const candidate = Math.abs(axis.x) < 0.9 ? new Vector3(1, 0, 0) : new Vector3(0, 1, 0);
+  const candidate = Math.abs(axis.x) < 0.9 ? new Vector32(1, 0, 0) : new Vector32(0, 1, 0);
   return candidate.cross(axis).normalize();
 }
 
@@ -338,7 +601,7 @@ import {
   MeshLambertMaterial,
   RGBAFormat,
   UnsignedByteType,
-  Vector3 as Vector32
+  Vector3 as Vector33
 } from "three";
 
 // src/render/edges.ts
@@ -495,7 +758,7 @@ function createPart(model, geometry, theme) {
   const object = new Group();
   object.add(mesh, edges);
   const scratchColor = new Color();
-  const scratchVector = new Vector32();
+  const scratchVector = new Vector33();
   const paintRegion = (region, color, weight) => {
     const column = texels.get(region);
     if (column === void 0) return;
@@ -728,158 +991,6 @@ import { Box3 as Box33, Vector3 as Vector37 } from "three";
 import { useFrame, useThree as useThree2 } from "@react-three/fiber";
 import { useEffect as useEffect2, useMemo as useMemo2 } from "react";
 
-// src/render/camera.ts
-import { OrthographicCamera, Vector3 as Vector33 } from "three";
-var PERSPECTIVE_FOV = 30;
-var DEFAULT_FIT_MARGIN = 1.2;
-var EXCLUDE_FROM_FRAME = "viewerExcludeFromFrame";
-function defaultBounds() {
-  return { center: new Vector33(0, 0, 0), radius: 1 };
-}
-function aspectRatio(size) {
-  return size.width > 0 && size.height > 0 ? size.width / size.height : 1;
-}
-var SCREEN_LENGTH_EPSILON = 1e-9;
-function screenLength(camera, point, viewport, pixels) {
-  const height = viewport.height > 0 ? viewport.height : 1;
-  const zoom = camera.zoom || 1;
-  const visible = camera instanceof OrthographicCamera ? (camera.top - camera.bottom) / zoom : 2 * Math.tan(camera.fov / 2 * Math.PI / 180) * Math.max(camera.position.distanceTo(point), SCREEN_LENGTH_EPSILON) / zoom;
-  return visible / height * pixels;
-}
-function boundsFromBox(box) {
-  if (box.isEmpty()) return defaultBounds();
-  const center = box.getCenter(new Vector33());
-  const radius = box.getSize(new Vector33()).length() / 2;
-  return { center, radius: radius > 0 ? radius : 1 };
-}
-function contentBounds(root, into) {
-  into.makeEmpty();
-  root.updateWorldMatrix(true, true);
-  root.traverse((object) => {
-    if (object.userData[EXCLUDE_FROM_FRAME]) return;
-    let ancestor = object.parent;
-    while (ancestor && ancestor !== root) {
-      if (ancestor.userData[EXCLUDE_FROM_FRAME]) return;
-      ancestor = ancestor.parent;
-    }
-    if ("isMesh" in object || "isLine" in object || "isPoints" in object) {
-      into.expandByObject(object);
-    }
-  });
-  return boundsFromBox(into);
-}
-function perspectiveFitDistance(fovDegrees, aspect, radius) {
-  const verticalFov = fovDegrees * Math.PI / 180;
-  const horizontalFov = 2 * Math.atan(Math.tan(verticalFov / 2) * aspect);
-  return radius / Math.sin(Math.min(verticalFov, horizontalFov) / 2);
-}
-function orthographicHalfHeight(aspect, radius) {
-  return aspect >= 1 ? radius : radius / aspect;
-}
-function nearFar(projection, radius) {
-  if (projection === "orthographic") return { near: -radius * 100, far: radius * 100 };
-  return { near: radius / 100, far: radius * 100 };
-}
-var START_DIRECTION = {
-  orthographic: [1.2, -2.5, 3],
-  perspective: [2, 1.2, -2.5]
-};
-function fitDistance(projection, size, bounds, margin = DEFAULT_FIT_MARGIN) {
-  if (projection === "perspective") {
-    return perspectiveFitDistance(PERSPECTIVE_FOV, aspectRatio(size), bounds.radius * margin);
-  }
-  return bounds.radius * margin * 4;
-}
-function startPosition(projection, size, bounds, margin = DEFAULT_FIT_MARGIN) {
-  const [x, y, z] = START_DIRECTION[projection];
-  return new Vector33(x, y, z).normalize().multiplyScalar(fitDistance(projection, size, bounds, margin)).add(bounds.center);
-}
-var MIN_FRAME_RATIO = 0.25;
-var MAX_FRAME_RATIO = 10;
-var TARGET_BOUNDARY_RATIO = 4;
-function cameraLimits(projection, size, bounds, margin = DEFAULT_FIT_MARGIN, framed) {
-  const fit = fitDistance(projection, size, bounds, margin);
-  const framedRadius = framed && framed.radius > 0 ? framed.radius : bounds.radius;
-  if (projection === "orthographic") {
-    const reach = bounds.radius > 0 ? bounds.radius / framedRadius : 1;
-    return {
-      minZoom: Math.min(MIN_FRAME_RATIO, MIN_FRAME_RATIO * reach),
-      maxZoom: Math.max(MAX_FRAME_RATIO, MAX_FRAME_RATIO * reach),
-      // Distance does not change apparent size under an orthographic camera, so
-      // these are not the zoom clamps in another form — they only keep the
-      // camera clear of the geometry it is looking at, and bounded.
-      minDistance: bounds.radius * margin,
-      maxDistance: fit / MIN_FRAME_RATIO
-    };
-  }
-  const framedFit = fitDistance(
-    projection,
-    size,
-    framedRadius === bounds.radius ? bounds : { ...bounds, radius: framedRadius },
-    margin
-  );
-  return {
-    // The wheel is `ACTION.DOLLY` under a perspective camera, so nothing here
-    // moves `camera.zoom`. They are set to the same pair anyway: a consumer
-    // that does zoom should not find the two cameras disagreeing about how far
-    // in is too far.
-    minZoom: MIN_FRAME_RATIO,
-    maxZoom: MAX_FRAME_RATIO,
-    minDistance: Math.min(fit, framedFit) / MAX_FRAME_RATIO,
-    maxDistance: Math.max(fit, framedFit) / MIN_FRAME_RATIO
-  };
-}
-var scratchBoundarySize = new Vector33();
-function targetBoundary(bounds, into, margin = DEFAULT_FIT_MARGIN) {
-  const reach = bounds.radius * margin * TARGET_BOUNDARY_RATIO;
-  return into.setFromCenterAndSize(
-    bounds.center,
-    scratchBoundarySize.set(reach * 2, reach * 2, reach * 2)
-  );
-}
-function applyProjection(camera, size, bounds, margin = DEFAULT_FIT_MARGIN) {
-  const aspect = aspectRatio(size);
-  const radius = bounds.radius * margin;
-  if (camera instanceof OrthographicCamera) {
-    const halfHeight = orthographicHalfHeight(aspect, radius);
-    const halfWidth = halfHeight * aspect;
-    camera.left = -halfWidth;
-    camera.right = halfWidth;
-    camera.top = halfHeight;
-    camera.bottom = -halfHeight;
-    const { near, far } = nearFar("orthographic", radius);
-    camera.near = near;
-    camera.far = far;
-  } else {
-    camera.fov = PERSPECTIVE_FOV;
-    camera.aspect = aspect;
-    const { near, far } = nearFar("perspective", radius);
-    camera.near = near;
-    camera.far = far;
-  }
-  camera.updateProjectionMatrix();
-}
-var CAD_CAMERA_UP = new Vector33(0, 0, 1);
-var scratchSide = new Vector33();
-function adaptedUp(view, up, into) {
-  const side = scratchSide.crossVectors(view, up).normalize();
-  return into.crossVectors(side, view).normalize();
-}
-var cadViewDirections = {
-  front: new Vector33(0, -1, 0),
-  back: new Vector33(0, 1, 0),
-  left: new Vector33(-1, 0, 0),
-  right: new Vector33(1, 0, 0),
-  top: new Vector33(0, 0, 1),
-  bottom: new Vector33(0, 0, -1),
-  isometric: new Vector33(1, -1, 1).normalize()
-};
-function currentViewDirection(camera, target, into) {
-  into.subVectors(camera.position, target);
-  if (into.lengthSq() <= Number.EPSILON) return into.copy(cadViewDirections.isometric);
-  return into.normalize();
-}
-
 // src/render/controls.ts
 import CameraControls from "camera-controls";
 import {
@@ -1214,6 +1325,36 @@ function retargetPose(cameraPosition, currentTarget, hitPoint) {
   };
 }
 
+// src/render/section-store.ts
+function createSectionStore() {
+  let current = null;
+  let engaged = 0;
+  const listeners = /* @__PURE__ */ new Set();
+  const notify = () => {
+    for (const listener of listeners) listener();
+  };
+  return {
+    get: () => current,
+    set: (next) => {
+      if (next === current) return;
+      current = next;
+      notify();
+    },
+    isEngaged: () => engaged > 0,
+    setEngaged: (next) => {
+      const was = engaged > 0;
+      engaged = Math.max(0, engaged + (next ? 1 : -1));
+      if (engaged > 0 !== was) notify();
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+}
+
 // src/target-marker.tsx
 import { useFrame as useFrame2, useThree as useThree3 } from "@react-three/fiber";
 import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2 } from "react";
@@ -1607,6 +1748,12 @@ var useViewerControls = () => {
   if (!controls) throw new Error("useViewerControls must be used inside <Viewer>");
   return controls;
 };
+var SectionStoreContext = createContext2(null);
+var useSectionStore = () => {
+  const store = useContext2(SectionStoreContext);
+  if (!store) throw new Error("useSectionStore must be used inside <Viewer>");
+  return store;
+};
 var ViewerRetargetContext = createContext2(null);
 var useRetarget = () => useContext2(ViewerRetargetContext);
 var ViewerScene = ({
@@ -1759,6 +1906,9 @@ var ViewerScene = ({
   }, [domElement, fitContent, isTap, recentreOnDoubleClick]);
   useEffect4(() => {
     setControls({
+      // Answered by the outer proxy, which owns the store; see `Viewer`.
+      setSection: () => {
+      },
       fit: () => {
         fitContent();
       },
@@ -1839,15 +1989,19 @@ var Viewer = forwardRef(function Viewer2({
 }, ref) {
   const actionsRef = useRef3(null);
   const resolved = useMemo4(() => resolveTheme(theme), [theme]);
+  const sectionStore = useMemo4(() => createSectionStore(), []);
   const proxy = useMemo4(
     () => ({
       fit: () => actionsRef.current?.fit(),
       reset: () => actionsRef.current?.reset(),
       setView: (view) => actionsRef.current?.setView(view),
       setViewDirection: (direction) => actionsRef.current?.setViewDirection(direction),
-      frameBox: (box) => actionsRef.current?.frameBox(box)
+      frameBox: (box) => actionsRef.current?.frameBox(box),
+      // Straight to the store rather than through the scene: the store lives
+      // here, so this works before the scene has mounted and after it is gone.
+      setSection: (options) => sectionStore.set(options)
     }),
-    []
+    [sectionStore]
   );
   useImperativeHandle(ref, () => proxy, [proxy]);
   const setControls = useCallback((next) => {
@@ -1858,7 +2012,7 @@ var Viewer = forwardRef(function Viewer2({
     tracker.current?.dispose();
     tracker.current = element ? trackTaps(element) : null;
   }, []);
-  return /* @__PURE__ */ jsx3(ViewerControlsContext.Provider, { value: proxy, children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx3(ViewerControlsContext.Provider, { value: proxy, children: /* @__PURE__ */ jsx3(SectionStoreContext.Provider, { value: sectionStore, children: /* @__PURE__ */ jsx3(
     "div",
     {
       className,
@@ -1898,25 +2052,21 @@ var Viewer = forwardRef(function Viewer2({
         projection
       )
     }
-  ) });
+  ) }) });
 });
 
 // src/section-view.tsx
 import { useFrame as useFrame4, useThree as useThree5 } from "@react-three/fiber";
-import { useCallback as useCallback2, useMemo as useMemo5, useRef as useRef4, useState } from "react";
+import { useCallback as useCallback2, useEffect as useEffect5, useLayoutEffect, useMemo as useMemo5, useRef as useRef4, useState } from "react";
 import {
-  AlwaysStencilFunc,
-  BackSide,
-  DecrementWrapStencilOp,
-  DoubleSide as DoubleSide2,
-  FrontSide,
-  IncrementWrapStencilOp,
-  NotEqualStencilFunc,
+  Color as Color3,
+  Mesh as Mesh3,
   Plane as Plane2,
+  PlaneGeometry,
   Quaternion as Quaternion2,
   Raycaster as Raycaster2,
-  ReplaceStencilOp,
-  Vector2 as Vector22,
+  Scene,
+  Vector2 as Vector23,
   Vector3 as Vector39
 } from "three";
 
@@ -1947,13 +2097,153 @@ function arrowPlacement(direction, box) {
   return { tip: center.addScaledVector(axis, exit + radius * GAP), length: radius * LENGTH };
 }
 
+// src/render/section-cap.ts
+import {
+  AlwaysStencilFunc,
+  BackSide,
+  Color as Color2,
+  DecrementWrapStencilOp,
+  DoubleSide as DoubleSide2,
+  FrontSide,
+  IncrementWrapStencilOp,
+  LinearFilter,
+  MeshBasicMaterial as MeshBasicMaterial2,
+  NotEqualStencilFunc,
+  ReplaceStencilOp,
+  ShaderMaterial,
+  Vector2 as Vector22,
+  WebGLRenderTarget
+} from "three";
+var VERTEX = (
+  /* glsl */
+  `
+void main() {
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`
+);
+var FRAGMENT = (
+  /* glsl */
+  `
+uniform sampler2D uMask;
+uniform vec2 uResolution;
+uniform vec3 uFill;
+uniform vec3 uHatch;
+uniform vec3 uOutline;
+uniform float uPitch;
+uniform float uLine;
+uniform float uThickness;
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / uResolution;
+  vec2 step = vec2(uThickness) / uResolution;
+
+  // The mask is 1 inside the cap and 0 outside; a change across a texel in any
+  // direction is the cap's edge.
+  float here = texture2D(uMask, uv).r;
+  float edge =
+    abs(here - texture2D(uMask, uv + vec2(step.x, 0.0)).r) +
+    abs(here - texture2D(uMask, uv - vec2(step.x, 0.0)).r) +
+    abs(here - texture2D(uMask, uv + vec2(0.0, step.y)).r) +
+    abs(here - texture2D(uMask, uv - vec2(0.0, step.y)).r);
+  edge = clamp(edge, 0.0, 1.0);
+
+  // Diagonal stripes at a fixed pitch on screen, anti-aliased over one pixel.
+  float along = mod(gl_FragCoord.x + gl_FragCoord.y, uPitch);
+  float stripe = 1.0 - smoothstep(uLine, uLine + 1.0, along);
+
+  vec3 color = mix(uFill, uHatch, stripe);
+  color = mix(color, uOutline, edge);
+  gl_FragColor = vec4(color, 1.0);
+  #include <colorspace_fragment>
+}
+`
+);
+function createMaskTarget() {
+  return new WebGLRenderTarget(1, 1, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    depthBuffer: true,
+    stencilBuffer: true
+  });
+}
+function createCapMaterial(mask) {
+  const uniforms = {
+    uMask: { value: mask },
+    uResolution: { value: new Vector22(1, 1) },
+    uFill: { value: new Color2() },
+    uHatch: { value: new Color2() },
+    uOutline: { value: new Color2() },
+    uPitch: { value: CAP_HATCH.pitch },
+    uLine: { value: CAP_HATCH.line },
+    uThickness: { value: CAP_HATCH.outline }
+  };
+  return new ShaderMaterial({
+    vertexShader: VERTEX,
+    fragmentShader: FRAGMENT,
+    uniforms,
+    side: DoubleSide2,
+    stencilWrite: true,
+    stencilRef: 0,
+    stencilFunc: NotEqualStencilFunc,
+    stencilFail: ReplaceStencilOp,
+    stencilZFail: ReplaceStencilOp,
+    stencilZPass: ReplaceStencilOp
+  });
+}
+function applyCapTheme(material, theme, dpr) {
+  material.uniforms.uFill.value.set(theme.sectionCap);
+  material.uniforms.uHatch.value.set(theme.sectionHatch);
+  material.uniforms.uOutline.value.set(theme.sectionHandleOutline);
+  material.uniforms.uPitch.value = CAP_HATCH.pitch * dpr;
+  material.uniforms.uLine.value = CAP_HATCH.line * dpr;
+  material.uniforms.uThickness.value = CAP_HATCH.outline * dpr;
+}
+function createStencilMaterials(clip) {
+  const shared = {
+    depthWrite: false,
+    depthTest: false,
+    colorWrite: false,
+    stencilWrite: true,
+    stencilFunc: AlwaysStencilFunc,
+    clippingPlanes: clip
+  };
+  return [
+    new MeshBasicMaterial2({
+      ...shared,
+      side: BackSide,
+      stencilFail: IncrementWrapStencilOp,
+      stencilZFail: IncrementWrapStencilOp,
+      stencilZPass: IncrementWrapStencilOp
+    }),
+    new MeshBasicMaterial2({
+      ...shared,
+      side: FrontSide,
+      stencilFail: DecrementWrapStencilOp,
+      stencilZFail: DecrementWrapStencilOp,
+      stencilZPass: DecrementWrapStencilOp
+    })
+  ];
+}
+function createMaskMaterial() {
+  return new MeshBasicMaterial2({
+    color: 16777215,
+    side: DoubleSide2,
+    stencilWrite: true,
+    stencilRef: 0,
+    stencilFunc: NotEqualStencilFunc,
+    stencilFail: ReplaceStencilOp,
+    stencilZFail: ReplaceStencilOp,
+    stencilZPass: ReplaceStencilOp
+  });
+}
+
 // src/section-view.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var DEFAULT_NORMAL = { x: 0, y: 0, z: 1 };
 var FURNITURE2 = { [EXCLUDE_FROM_FRAME]: true };
 function resolveSectionPlane(options, box) {
   if (!options?.enabled || box.isEmpty()) return null;
-  const normal = options.plane?.normal ?? options.normal ?? DEFAULT_NORMAL;
+  const normal = options.plane?.normal ?? options.normal ?? DEFAULT_SECTION_NORMAL;
   const axis = new Vector39(normal.x, normal.y, normal.z);
   if (axis.lengthSq() === 0) axis.set(0, 0, 1);
   axis.normalize();
@@ -1974,6 +2264,7 @@ function resolveSectionPlane(options, box) {
     }
   };
 }
+var Z = new Vector39(0, 0, 1);
 var SectionView = ({
   geometry,
   box,
@@ -1984,28 +2275,68 @@ var SectionView = ({
 }) => {
   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 capRef = useRef4(null);
   const handleRef = useRef4(null);
   const [hovered, setHovered] = useState(false);
   const dragging = useRef4(null);
-  const centre = useMemo5(() => box.getCenter(new Vector39()), [box]);
   const span = useMemo5(() => box.getSize(new Vector39()).length(), [box]);
   const clip = useMemo5(() => [plane], [plane]);
-  const capPosition = useMemo5(() => {
-    const point = centre.clone();
-    return point.addScaledVector(plane.normal, -(plane.constant + plane.normal.dot(centre)));
-  }, [centre, plane]);
-  const capQuaternion = useMemo5(
-    () => new Quaternion2().setFromUnitVectors(new Vector39(0, 0, 1), plane.normal),
-    [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()),
     [plane]
   );
+  const stencils = useMemo5(() => createStencilMaterials([]), []);
+  useEffect5(() => () => stencils.forEach((material) => material.dispose()), [stencils]);
+  useLayoutEffect(() => {
+    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 scene = new Scene();
+    const [back, front] = stencils;
+    const backMesh = new Mesh3(geometry, back);
+    backMesh.renderOrder = SECTION_RENDER_ORDER.stencil;
+    const frontMesh = new Mesh3(geometry, front);
+    frontMesh.renderOrder = SECTION_RENDER_ORDER.stencil;
+    const maskMesh = new Mesh3(quad, createMaskMaterial());
+    maskMesh.renderOrder = SECTION_RENDER_ORDER.cap;
+    scene.add(backMesh, frontMesh, maskMesh);
+    return { scene, maskMesh };
+  }, [geometry, quad, stencils]);
+  useEffect5(() => () => maskScene.maskMesh.material.dispose(), [maskScene]);
+  useEffect5(() => {
+    maskScene.maskMesh.position.copy(capPosition);
+    maskScene.maskMesh.quaternion.copy(capQuaternion);
+  }, [capPosition, capQuaternion, maskScene]);
+  useLayoutEffect(() => {
+    const buffer = gl.getDrawingBufferSize(new Vector23());
+    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(), []);
+  useFrame4(({ gl: renderer, camera: eye }) => {
+    const previousAlpha = renderer.getClearAlpha();
+    renderer.getClearColor(clearColor);
+    renderer.setRenderTarget(mask);
+    renderer.setClearColor(0, 1);
+    renderer.clear();
+    renderer.render(maskScene.scene, eye);
+    renderer.setRenderTarget(null);
+    renderer.setClearColor(clearColor, previousAlpha);
+  }, -1);
   useFrame4(() => {
     const handle = handleRef.current;
     if (!handle) return;
@@ -2036,7 +2367,7 @@ var SectionView = ({
     dragging.current = start;
     setControlsEnabled(false);
     const raycaster = new Raycaster2();
-    const pointer = new Vector22();
+    const pointer = new Vector23();
     const move = (native) => {
       const rect = domElement.getBoundingClientRect();
       pointer.set(
@@ -2077,52 +2408,35 @@ var SectionView = ({
     // 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("mesh", { geometry, renderOrder: SECTION_RENDER_ORDER.stencil, raycast: () => null, children: /* @__PURE__ */ jsx4(
-        "meshBasicMaterial",
+      /* @__PURE__ */ jsx4(
+        "mesh",
         {
-          side: BackSide,
-          depthWrite: false,
-          depthTest: false,
-          colorWrite: false,
-          stencilWrite: true,
-          stencilFunc: AlwaysStencilFunc,
-          stencilFail: IncrementWrapStencilOp,
-          stencilZFail: IncrementWrapStencilOp,
-          stencilZPass: IncrementWrapStencilOp,
-          clippingPlanes: clip
+          geometry,
+          material: stencils[0],
+          renderOrder: SECTION_RENDER_ORDER.stencil,
+          raycast: () => null
         }
-      ) }),
-      /* @__PURE__ */ jsx4("mesh", { geometry, renderOrder: SECTION_RENDER_ORDER.stencil, raycast: () => null, children: /* @__PURE__ */ jsx4(
-        "meshBasicMaterial",
+      ),
+      /* @__PURE__ */ jsx4(
+        "mesh",
         {
-          side: FrontSide,
-          depthWrite: false,
-          depthTest: false,
-          colorWrite: false,
-          stencilWrite: true,
-          stencilFunc: AlwaysStencilFunc,
-          stencilFail: DecrementWrapStencilOp,
-          stencilZFail: DecrementWrapStencilOp,
-          stencilZPass: DecrementWrapStencilOp,
-          clippingPlanes: clip
+          geometry,
+          material: stencils[1],
+          renderOrder: SECTION_RENDER_ORDER.stencil,
+          raycast: () => null
         }
-      ) }),
-      /* @__PURE__ */ jsx4("group", { ref: capRef, position: capPosition, quaternion: capQuaternion, children: /* @__PURE__ */ jsxs3("mesh", { renderOrder: SECTION_RENDER_ORDER.cap, raycast: () => null, children: [
-        /* @__PURE__ */ jsx4("planeGeometry", { args: [span * 1.5, span * 1.5] }),
-        /* @__PURE__ */ jsx4(
-          "meshBasicMaterial",
-          {
-            color: theme.sectionCap,
-            side: DoubleSide2,
-            stencilWrite: true,
-            stencilRef: 0,
-            stencilFunc: NotEqualStencilFunc,
-            stencilFail: ReplaceStencilOp,
-            stencilZFail: ReplaceStencilOp,
-            stencilZPass: ReplaceStencilOp
-          }
-        )
-      ] }) }),
+      ),
+      /* @__PURE__ */ jsx4(
+        "mesh",
+        {
+          geometry: quad,
+          material: cap,
+          position: capPosition,
+          quaternion: capQuaternion,
+          renderOrder: SECTION_RENDER_ORDER.cap,
+          raycast: () => null
+        }
+      ),
       showHandle && onDrag ? /* @__PURE__ */ jsxs3(
         "group",
         {
@@ -2206,7 +2520,13 @@ var PartMesh = ({
   const part = useMemo6(() => createPart(model, geometry, currentTheme.current), [geometry, model]);
   const hoverRegion = useRef6(null);
   const box = useContentBox();
-  const cut = useMemo6(() => resolveSectionPlane(section, box), [box, section]);
+  const store = useSectionStore();
+  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 engaged = useSyncExternalStore(store.subscribe, store.isEngaged, store.isEngaged);
+  const pressedWhileEngaged = useRef6(false);
   const layers = useRef6({
     selection,
     candidates,
@@ -2232,37 +2552,39 @@ var PartMesh = ({
     );
     invalidate();
   }, [invalidate, part]);
-  useEffect5(() => () => part.dispose(), [part]);
+  useEffect6(() => () => part.dispose(), [part]);
   const adjacency = useMemo6(() => regionAdjacency(model, geometry), [model, geometry]);
-  useEffect5(() => {
+  useEffect6(() => {
     onAdjacency?.(adjacency);
   }, [adjacency, onAdjacency]);
   const framed = useRef6(null);
-  useEffect5(() => {
+  useEffect6(() => {
     if (focusFeature === null || focusFeature === framed.current) return;
     framed.current = focusFeature;
     const box2 = part.boxForFeature(focusFeature);
     if (box2) viewerControls.frameBox(box2);
   }, [focusFeature, part, viewerControls]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     part.setTheme(resolved);
     repaint();
   }, [part, repaint, resolved]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     part.edges.visible = showEdges;
     invalidate();
   }, [invalidate, part, showEdges]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     part.setClippingPlanes(cut ? [cut.plane] : null);
     invalidate();
   }, [cut, invalidate, part]);
   const reportedSection = useRef6("");
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const state = cut?.state ?? null;
     const key = state ? `${state.constant}|${state.normal.x},${state.normal.y},${state.normal.z}` : "";
     if (key === reportedSection.current) return;
+    const was = reportedSection.current;
     reportedSection.current = key;
     if (state) onSectionChange?.(state);
+    else if (was !== "") onSectionChange?.(DISABLED_SECTION);
   }, [cut, onSectionChange]);
   const layerKey = [
     selection.join(" "),
@@ -2272,7 +2594,7 @@ var PartMesh = ({
     highlights.map((entry) => `${entry.tag}:${entry.color}:${entry.weight ?? ""}`).join(" "),
     regionHighlights.map((entry) => `${entry.region}:${entry.color}:${entry.weight ?? ""}`).join(" ")
   ].join("|");
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     repaint();
   }, [layerKey, repaint]);
   const isTap = useTapGuard();
@@ -2311,30 +2633,46 @@ var PartMesh = ({
     repaint();
     onHover?.(next);
   };
+  const onHoverRef = useRef6(onHover);
+  onHoverRef.current = onHover;
+  useLayoutEffect2(() => {
+    if (!engaged || hoverRegion.current === null) return;
+    hoverRegion.current = null;
+    repaint();
+    onHoverRef.current?.(null);
+  }, [engaged, repaint]);
   const dragSection = useCallback3(
     (constant) => {
       if (!cut) return;
-      const anchor = section?.plane?.point;
-      onSectionChange?.({
+      const anchor = options?.plane?.point;
+      const state = {
         ...cut.state,
         constant,
         offset: sectionOffset(sectionBounds(box, cut.state.normal), constant),
         depth: anchor ? sectionDepth(cut.state.normal, anchor, constant) : null
-      });
+      };
+      if (!controlled) store.set(sectionOptionsFromState(state));
+      onSectionChange?.(state);
     },
-    [box, cut, onSectionChange, section]
+    [box, controlled, cut, onSectionChange, options, store]
   );
   return /* @__PURE__ */ jsxs4(Fragment, { children: [
     /* @__PURE__ */ jsx5(
       "primitive",
       {
         object: part.object,
-        onPointerMove: (event) => emitHover(pickFor(event)),
+        onPointerDown: () => {
+          pressedWhileEngaged.current = engaged;
+        },
+        onPointerMove: (event) => {
+          if (!engaged) emitHover(pickFor(event));
+        },
         onPointerOut: () => {
           emitHover(null);
           doubles.reset();
         },
         onClick: (event) => {
+          if (engaged || pressedWhileEngaged.current) return;
           if (!isTap(event.nativeEvent)) {
             doubles.reset();
             return;
@@ -2345,6 +2683,7 @@ var PartMesh = ({
           if (pick) onPick?.(pick);
         },
         onPointerUp: (event) => {
+          if (engaged || pressedWhileEngaged.current) return;
           if (event.nativeEvent.button !== 2) return;
           if (!isTap(event.nativeEvent)) return;
           const pick = pickFor(event);
@@ -2362,8 +2701,8 @@ var PartMesh = ({
         box,
         plane: cut.plane,
         theme: resolved,
-        showHandle: onSectionChange !== void 0,
-        onDrag: onSectionChange ? dragSection : void 0
+        showHandle: !controlled || onSectionChange !== void 0,
+        onDrag: !controlled || onSectionChange ? dragSection : void 0
       }
     ) : null
   ] });
@@ -2386,7 +2725,7 @@ function useStableTheme(theme) {
 }
 
 // src/engine/geometry.ts
-import { Matrix4 as Matrix42, Mesh as Mesh3 } from "three";
+import { Matrix4 as Matrix42, Mesh as Mesh4 } from "three";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { STLLoader } from "three/examples/jsm/loaders/STLLoader.js";
 var PartMeshError = class extends Error {
@@ -2461,7 +2800,7 @@ function parseStl(data, mesh) {
 function singleMesh(scene) {
   const meshes = [];
   scene.traverse((object) => {
-    if (object instanceof Mesh3) meshes.push(object);
+    if (object instanceof Mesh4) meshes.push(object);
   });
   const [mesh] = meshes;
   if (mesh === void 0 || meshes.length !== 1) {
@@ -2497,7 +2836,7 @@ function assertCounts(geometry, expected) {
 }
 function disposeMaterials(scene) {
   scene.traverse((object) => {
-    if (!(object instanceof Mesh3)) return;
+    if (!(object instanceof Mesh4)) return;
     for (const material of Array.isArray(object.material) ? object.material : [object.material]) {
       material.dispose();
     }
@@ -2998,7 +3337,7 @@ import { jsx as jsx6 } from "react/jsx-runtime";
 var EnginePart = ({ report, ...props }) => {
   const model = useMemo7(() => normalizePartReport(report), [report]);
   const resource = useGeometryResource(model);
-  useEffect6(() => {
+  useEffect7(() => {
     engineGeometryCache.retain(resource);
     return () => engineGeometryCache.release(resource);
   }, [resource]);
@@ -3026,8 +3365,42 @@ export {
   CANDIDATE_WEIGHT,
   HOVER_WEIGHT,
   applyHighlightLayers,
+  PERSPECTIVE_FOV,
+  DEFAULT_FIT_MARGIN,
+  EXCLUDE_FROM_FRAME,
+  defaultBounds,
+  aspectRatio,
+  screenLength,
+  boundsFromBox,
+  contentBounds,
+  excludedFromFrame,
+  perspectiveFitDistance,
+  orthographicHalfHeight,
+  fitDistance,
+  startPosition,
+  MIN_FRAME_RATIO,
+  MAX_FRAME_RATIO,
+  cameraLimits,
+  targetBoundary,
+  applyProjection,
+  CAD_CAMERA_UP,
+  adaptedUp,
+  cadViewDirections,
+  currentViewDirection,
   SECTION_RENDER_ORDER,
   HANDLE_PIXELS,
+  CAP_HATCH,
+  AXES_PLANE_OFFSET,
+  AXES_PLANE_SCALE,
+  PREVIEW_SCALE,
+  OUTLINE_SCALE,
+  DEFAULT_SECTION_NORMAL,
+  DISABLED_SECTION,
+  sectionOptionsFromState,
+  axesPlanes,
+  hitUnderRay,
+  surfaceUnderRay,
+  sectionAnchor,
   PICKED_SURFACE_LABEL,
   sectionBounds,
   sectionConstant,
@@ -3061,30 +3434,10 @@ export {
   viewDirection,
   buildPick,
   focusForPick,
-  PERSPECTIVE_FOV,
-  DEFAULT_FIT_MARGIN,
-  EXCLUDE_FROM_FRAME,
-  defaultBounds,
-  aspectRatio,
-  screenLength,
-  boundsFromBox,
-  contentBounds,
-  perspectiveFitDistance,
-  orthographicHalfHeight,
-  fitDistance,
-  startPosition,
-  MIN_FRAME_RATIO,
-  MAX_FRAME_RATIO,
-  cameraLimits,
-  targetBoundary,
-  applyProjection,
-  CAD_CAMERA_UP,
-  adaptedUp,
-  cadViewDirections,
-  currentViewDirection,
   ExtendedCameraControls,
   CadCameraControls,
   retargetPose,
+  createSectionStore,
   ORBIT_TARGET_PIXELS,
   ORBIT_TARGET_RING_PIXELS,
   ORBIT_TARGET_RING_WIDTH,
@@ -3107,6 +3460,7 @@ export {
   labelGeometry,
   labelTexture,
   useViewerControls,
+  useSectionStore,
   useRetarget,
   Viewer,
   CONE_AXIS,
@@ -3114,6 +3468,11 @@ export {
   HEAD_RADIUS,
   SHAFT_RADIUS,
   arrowPlacement,
+  createMaskTarget,
+  createCapMaterial,
+  applyCapTheme,
+  createStencilMaterials,
+  createMaskMaterial,
   resolveSectionPlane,
   SectionView,
   useContentBox,