@toolpath/viewer 1.4.0 → 2.0.0

package/dist/{chunk-HH3W5T42.js → chunk-4TBLMR4Z.js}

@@ -11,7 +11,7 @@ import {
   useRef as useRef6,
   useSyncExternalStore
 } from "react";
-import { Vector3 as Vector310 } from "three";
+import { Vector3 as Vector311 } from "three";
 
 // src/model/directions.ts
 var EPSILON = 1e-6;
@@ -193,14 +193,31 @@ function applyHighlightLayers(part, layers, theme) {
   }
 }
 
+// src/render/focus.ts
+var DEFAULT_FOCUS_OPACITY = 0.15;
+function focusOpacity(options) {
+  return Math.min(Math.max(options?.opacity ?? DEFAULT_FOCUS_OPACITY, 0), 1);
+}
+function focusStateKey(options, selection) {
+  return `${options === void 0 ? "off" : `on:${options.opacity ?? ""}`}|${selection.join(" ")}`;
+}
+function focusedRegions(model, selection) {
+  const regions = /* @__PURE__ */ new Set();
+  for (const tag of selection) {
+    for (const region of model.regionIndex.regionsForFeature(tag)) regions.add(region);
+  }
+  return regions;
+}
+
 // src/render/section.ts
-import { Plane, Vector3 as Vector32 } from "three";
+import { Plane, Vector3 as Vector33 } 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";
+var STOCK_OBJECT = "viewerStock";
 function defaultBounds() {
   return { center: new Vector3(0, 0, 0), radius: 1 };
 }
@@ -221,16 +238,30 @@ function boundsFromBox(box) {
   return { center, radius: radius > 0 ? radius : 1 };
 }
 function contentBounds(root, into) {
+  return measureBounds(root, into, false);
+}
+function partBounds(root, into) {
+  return measureBounds(root, into, true);
+}
+function measureBounds(root, into, partOnly) {
   into.makeEmpty();
   root.updateWorldMatrix(true, true);
   root.traverse((object) => {
-    if (excludedFromFrame(object, root)) return;
+    if (partOnly ? excludedFromPart(object, root) : excludedFromFrame(object, root)) return;
     if ("isMesh" in object || "isLine" in object || "isPoints" in object) {
       into.expandByObject(object);
     }
   });
   return boundsFromBox(into);
 }
+function excludedFromPart(object, root) {
+  let current = object;
+  while (current && current !== root) {
+    if (current.userData[STOCK_OBJECT]) return true;
+    current = current.parent;
+  }
+  return excludedFromFrame(object, root);
+}
 function excludedFromFrame(object, root) {
   let current = object;
   while (current && current !== root) {
@@ -351,6 +382,206 @@ function currentViewDirection(camera, target, into) {
   return into.normalize();
 }
 
+// src/render/measure.ts
+import { Vector2, Vector3 as Vector32 } 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 Vector32();
+  const b = new Vector32();
+  const ab = new Vector32();
+  const ap = new Vector32();
+  const q = new Vector32();
+  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 Vector32(positions[offset], positions[offset + 1], positions[offset + 2]);
+    const end = new Vector32(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 Vector32(a.x - vertex.x, a.y - vertex.y, a.z - vertex.z);
+  const w = new Vector32(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 Vector32(vertex.x, vertex.y, vertex.z);
+  const u = new Vector32(a.x, a.y, a.z).sub(v);
+  const w = new Vector32(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/render/section.ts
 var SECTION_RENDER_ORDER = {
   stencil: 1,
@@ -361,6 +592,7 @@ var SECTION_RENDER_ORDER = {
 };
 var START_DEPTH = 5e-3;
 var HANDLE_PIXELS = 78;
+var SECTION_GIZMO_FRAME_SCALE = 1.1;
 var CAP_HATCH = {
   pitch: 9,
   line: 1.25,
@@ -371,7 +603,7 @@ var AXES_PLANE_SCALE = 1.2;
 var PREVIEW_SCALE = 0.125;
 var OUTLINE_SCALE = 1.2;
 var EPSILON2 = 1e-9;
-var ARROW_AXIS = new Vector32(0, 1, 0);
+var ARROW_AXIS = new Vector33(0, 1, 0);
 var DEFAULT_SECTION_NORMAL = { x: 0, y: 0, z: 1 };
 var DISABLED_SECTION = {
   enabled: false,
@@ -380,8 +612,25 @@ var DISABLED_SECTION = {
   constant: 0,
   plane: null,
   depth: null,
+  cutDistance: 0,
   depthRange: null
 };
+function sectionMeasurement(state) {
+  return `${(state.depth ?? state.cutDistance ?? 0).toFixed(2)} mm`;
+}
+function sectionDirectionColor(normal) {
+  const x = Math.abs(normal.x);
+  const y = Math.abs(normal.y);
+  const z = Math.abs(normal.z);
+  const total = x + y + z || 1;
+  const channel = (shift) => Math.round(
+    ((AXIS_COLORS.x >> shift & 255) * x + (AXIS_COLORS.y >> shift & 255) * y + (AXIS_COLORS.z >> shift & 255) * z) / total
+  );
+  return channel(16) << 16 | channel(8) << 8 | channel(0);
+}
+function sectionHandleColor(themeColor, directionColor2) {
+  return themeColor ?? directionColor2;
+}
 function sectionOptionsFromState(state) {
   if (state.plane) {
     return { enabled: state.enabled, plane: state.plane, depth: state.depth ?? 0 };
@@ -389,8 +638,8 @@ function sectionOptionsFromState(state) {
   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 centre = box.getCenter(new Vector33());
+  const extent = box.getSize(new Vector33());
   const largest = Math.max(extent.x, extent.y, extent.z);
   const size = largest * AXES_PLANE_SCALE;
   const offset = largest * AXES_PLANE_OFFSET;
@@ -425,7 +674,7 @@ function axesPlanes(box, eye) {
 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 (!hit.object.visible || excludedFromPart(hit.object, root)) continue;
     if (clippedAway(hit)) continue;
     return hit;
   }
@@ -447,21 +696,21 @@ function surfaceUnderRay(raycaster, root) {
   const normal = hit.face.normal.clone().transformDirection(hit.object.matrixWorld);
   return { point: hit.point, normal };
 }
-function sectionAnchor(box, plane, into = new Vector32()) {
+function sectionAnchor(box, plane, into = new Vector33()) {
   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 Vector32(v.x, v.y, v.z);
+  const vector = new Vector33(v.x, v.y, v.z);
   return vector.lengthSq() === 0 ? vector.set(0, 0, 1) : vector.normalize();
 }
 function clamp01(value) {
   return Math.min(1, Math.max(0, value));
 }
-function sectionBounds(box, normal) {
+function projectedBounds(box, normal) {
   const axis = unit(normal);
-  const corner = new Vector32();
+  const corner = new Vector33();
   let low = Number.POSITIVE_INFINITY;
   let high = Number.NEGATIVE_INFINITY;
   for (let i = 0; i < 8; i += 1) {
@@ -474,9 +723,17 @@ function sectionBounds(box, normal) {
     low = Math.min(low, distance);
     high = Math.max(high, distance);
   }
+  return { low, high };
+}
+function sectionBounds(box, normal) {
+  const { low, high } = projectedBounds(box, normal);
   const margin = Math.max((high - low) * 5e-3, 1e-6);
   return { min: -(high + margin), max: -(low - margin) };
 }
+function sectionCutDistance(box, normal, constant) {
+  const { low, high } = projectedBounds(box, normal);
+  return Math.max(0, Math.min(high - low, -constant - low));
+}
 function sectionConstant(bounds, t) {
   return bounds.max + clamp01(t) * (bounds.min - bounds.max);
 }
@@ -485,7 +742,7 @@ function sectionOffset(bounds, constant) {
   return span === 0 ? 0 : clamp01((constant - bounds.max) / span);
 }
 function sectionDepth(normal, anchor, constant) {
-  return -unit(normal).dot(new Vector32(anchor.x, anchor.y, anchor.z)) - constant;
+  return -unit(normal).dot(new Vector33(anchor.x, anchor.y, anchor.z)) - constant;
 }
 function sectionDepthConstant(normal, anchor, depth) {
   return sectionDepth(normal, anchor, depth);
@@ -504,7 +761,7 @@ function sectionFromPick(surface, label = PICKED_SURFACE_LABEL) {
   };
 }
 function pickedStartDepth(box) {
-  return box.getSize(new Vector32()).length() * START_DEPTH;
+  return box.getSize(new Vector33()).length() * START_DEPTH;
 }
 function sectionPlane(box, normal, offset, into = new Plane()) {
   const axis = unit(normal);
@@ -512,12 +769,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 Vector32().crossVectors(view, along);
+  const side = new Vector33().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 Vector32(1, 0, 0) : new Vector32(0, 1, 0);
+  const candidate = Math.abs(axis.x) < 0.9 ? new Vector33(1, 0, 0) : new Vector33(0, 1, 0);
   return candidate.cross(axis).normalize();
 }
 
@@ -593,15 +850,17 @@ import {
   Box3,
   Color,
   DataTexture,
+  DoubleSide,
   Float32BufferAttribute as Float32BufferAttribute2,
   Group,
   LineBasicMaterial,
   LineSegments,
   Mesh,
   MeshLambertMaterial,
+  RedFormat,
   RGBAFormat,
   UnsignedByteType,
-  Vector3 as Vector33
+  Vector3 as Vector34
 } from "three";
 
 // src/render/edges.ts
@@ -700,6 +959,13 @@ function createPart(model, geometry, theme) {
   const state = new Uint8Array(width * 4);
   const stateTexture = new DataTexture(state, width, 1, RGBAFormat, UnsignedByteType);
   stateTexture.needsUpdate = true;
+  const opacity = new Uint8Array(width).fill(255);
+  const opacityTexture = new DataTexture(opacity, width, 1, RedFormat, UnsignedByteType);
+  opacityTexture.needsUpdate = true;
+  const focusState = { value: false };
+  const wireframe = { value: false };
+  let focused = false;
+  let currentTheme = theme;
   const material = new MeshLambertMaterial({
     color: theme.part,
     emissive: theme.partEmissive,
@@ -709,40 +975,64 @@ function createPart(model, geometry, theme) {
     polygonOffsetFactor: 1,
     polygonOffsetUnits: 1
   });
-  material.onBeforeCompile = (shader) => {
-    shader.uniforms["uRegionState"] = { value: stateTexture };
-    shader.vertexShader = shader.vertexShader.replace(
-      "#include <common>",
-      `#include <common>
+  const configureShader = (target, opaqueFocusPass) => {
+    target.onBeforeCompile = (shader) => {
+      shader.uniforms["uRegionState"] = { value: stateTexture };
+      shader.uniforms["uRegionOpacity"] = { value: opacityTexture };
+      shader.uniforms["uWireframe"] = wireframe;
+      shader.uniforms["uFocus"] = focusState;
+      shader.uniforms["uOpaqueFocusPass"] = { value: opaqueFocusPass };
+      shader.vertexShader = shader.vertexShader.replace(
+        "#include <common>",
+        `#include <common>
         attribute float ${REGION_ATTRIBUTE};
         varying float vRegion;`
-    ).replace(
-      "#include <begin_vertex>",
-      `#include <begin_vertex>
+      ).replace(
+        "#include <begin_vertex>",
+        `#include <begin_vertex>
         vRegion = ${REGION_ATTRIBUTE};`
-    );
-    shader.fragmentShader = shader.fragmentShader.replace(
-      "#include <common>",
-      `#include <common>
+      );
+      shader.fragmentShader = shader.fragmentShader.replace(
+        "#include <common>",
+        `#include <common>
         uniform sampler2D uRegionState;
+        uniform sampler2D uRegionOpacity;
+        uniform bool uWireframe;
+        uniform bool uFocus;
+        uniform bool uOpaqueFocusPass;
         varying float vRegion;
         vec4 regionState;`
-    ).replace(
-      "#include <color_fragment>",
-      `#include <color_fragment>
+      ).replace(
+        "#include <color_fragment>",
+        `#include <color_fragment>
         regionState = texelFetch(uRegionState, ivec2(int(vRegion + 0.5), 0), 0);
         diffuseColor.rgb = mix(diffuseColor.rgb, regionState.rgb, regionState.a);
+        float regionOpacity = texelFetch(uRegionOpacity, ivec2(int(vRegion + 0.5), 0), 0).r;
+        if (uFocus && uOpaqueFocusPass && regionOpacity < 0.999) discard;
+        if (uFocus && !uOpaqueFocusPass && regionOpacity >= 0.999) discard;
+        diffuseColor.a *= regionOpacity;
+        if (uWireframe) diffuseColor.a *= regionState.a;
 `
-    ).replace(
-      "#include <emissivemap_fragment>",
-      `#include <emissivemap_fragment>
+      ).replace(
+        "#include <emissivemap_fragment>",
+        `#include <emissivemap_fragment>
         totalEmissiveRadiance = mix(
           totalEmissiveRadiance,
           regionState.rgb * ${EMISSIVE_MIX.toFixed(2)},
           regionState.a
         );`
-    );
+      );
+    };
   };
+  const focusMaterial = new MeshLambertMaterial({
+    color: theme.part,
+    emissive: theme.partEmissive,
+    // A selected face can be viewed through the part from the side its normal
+    // faces away from.
+    side: DoubleSide
+  });
+  configureShader(focusMaterial, true);
+  configureShader(material, false);
   const mesh = new Mesh(geometry, material);
   mesh.renderOrder = 3;
   const edgeGeometry = regionEdgesGeometry(geometry, model);
@@ -755,10 +1045,25 @@ function createPart(model, geometry, theme) {
   edges.renderOrder = 4;
   edges.raycast = () => {
   };
+  const focusMesh = new Mesh(geometry, focusMaterial);
+  focusMesh.renderOrder = 3;
+  focusMesh.visible = false;
+  focusMesh.raycast = () => {
+  };
+  const syncTransparency = () => {
+    const transparent = wireframe.value || focused;
+    if (material.transparent !== transparent || material.depthWrite !== !transparent) {
+      material.transparent = transparent;
+      material.depthWrite = !transparent;
+      material.needsUpdate = true;
+    }
+    focusState.value = focused;
+    focusMesh.visible = focused;
+  };
   const object = new Group();
-  object.add(mesh, edges);
+  object.add(focusMesh, mesh, edges);
   const scratchColor = new Color();
-  const scratchVector = new Vector33();
+  const scratchVector = new Vector34();
   const paintRegion = (region, color, weight) => {
     const column = texels.get(region);
     if (column === void 0) return;
@@ -796,6 +1101,27 @@ function createPart(model, geometry, theme) {
       state.fill(0);
       stateTexture.needsUpdate = true;
     },
+    setFocus(selection, focus) {
+      const regions = focus === void 0 ? null : focusedRegions(model, selection);
+      const outside = focusOpacity(focus);
+      let changed = false;
+      let hasTransparency = false;
+      for (const [region, column] of texels) {
+        const value = regions === null || regions.size === 0 || regions.has(region) ? 255 : Math.round(outside * 255);
+        if (opacity[column] !== value) {
+          opacity[column] = value;
+          changed = true;
+        }
+        hasTransparency ||= value < 255;
+      }
+      focused = hasTransparency;
+      syncTransparency();
+      if (changed) opacityTexture.needsUpdate = true;
+    },
+    regionOpacity(region) {
+      const column = texels.get(region);
+      return column === void 0 ? null : (opacity[column] ?? 0) / 255;
+    },
     boxForFeature(tag) {
       const regions = model.regionIndex.regionsForFeature(tag);
       if (regions.length === 0) return null;
@@ -812,13 +1138,27 @@ function createPart(model, geometry, theme) {
     setClippingPlanes(planes) {
       const value = planes === null ? null : [...planes];
       material.clippingPlanes = value;
+      focusMaterial.clippingPlanes = value;
       edgeMaterial.clippingPlanes = value;
     },
     setTheme(next) {
+      currentTheme = next;
       material.color.setHex(next.part);
       material.emissive.setHex(next.partEmissive);
-      edgeMaterial.color.setHex(next.edge);
-      edgeMaterial.opacity = next.edgeOpacity;
+      focusMaterial.color.setHex(next.part);
+      focusMaterial.emissive.setHex(next.partEmissive);
+      edgeMaterial.color.setHex(wireframe.value ? next.part : next.edge);
+      edgeMaterial.opacity = wireframe.value ? 1 : next.edgeOpacity;
+    },
+    setDisplay(display, showEdges = true) {
+      const enabled = display === "wireframe";
+      if (wireframe.value !== enabled) {
+        wireframe.value = enabled;
+        syncTransparency();
+      }
+      edges.visible = enabled || showEdges;
+      edgeMaterial.color.setHex(enabled ? currentTheme.part : currentTheme.edge);
+      edgeMaterial.opacity = enabled ? 1 : currentTheme.edgeOpacity;
     },
     dispose() {
       object.clear();
@@ -826,9 +1166,11 @@ function createPart(model, geometry, theme) {
         geometry.deleteAttribute(REGION_ATTRIBUTE);
       }
       material.dispose();
+      focusMaterial.dispose();
       edgeGeometry.dispose();
       edgeMaterial.dispose();
       stateTexture.dispose();
+      opacityTexture.dispose();
     }
   };
 }
@@ -962,6 +1304,7 @@ function buildPick(input) {
     triangleIndex: input.triangleIndex,
     point: input.point,
     normal: input.normal,
+    ...input.pointer === void 0 ? {} : { pointer: input.pointer },
     modifiers: input.modifiers ?? NO_MODIFIERS,
     doubled: input.doubled ?? false
   };
@@ -985,7 +1328,7 @@ import {
   useMemo as useMemo4,
   useRef as useRef3
 } from "react";
-import { Box3 as Box33, Vector3 as Vector37 } from "three";
+import { Box3 as Box33, Vector3 as Vector38 } from "three";
 
 // src/camera.tsx
 import { useFrame, useThree as useThree2 } from "@react-three/fiber";
@@ -1001,10 +1344,96 @@ import {
   Raycaster,
   Sphere,
   Spherical,
-  Vector2,
-  Vector3 as Vector34,
+  Vector2 as Vector22,
+  Vector3 as Vector35,
   Vector4
 } from "three";
+
+// src/render/control-schemes.ts
+var CONTROL_SCHEME_OPTIONS = [
+  { value: "toolpath", label: "Toolpath" },
+  { value: "fusion", label: "Fusion" },
+  { value: "alias", label: "Alias" },
+  { value: "inventor", label: "Inventor" },
+  { value: "solidworks", label: "SolidWorks" },
+  { value: "tinkercad", label: "Tinkercad" },
+  { value: "powermill", label: "PowerMill" },
+  { value: "onshape", label: "Onshape" }
+];
+var DEFAULT_TOUCHES = {
+  one: "rotate",
+  two: "dolly-truck",
+  three: "truck"
+};
+var wheelFor = (orthographic) => orthographic ? "zoom" : "dolly";
+var mapping = (environment, mouse, options, touches = DEFAULT_TOUCHES) => ({
+  mouse: {
+    left: "none",
+    middle: "none",
+    right: "none",
+    wheel: wheelFor(environment.orthographic),
+    ...mouse
+  },
+  touches,
+  ...options
+});
+var resolveControlScheme = (scheme, environment) => {
+  const { shift, ctrl } = environment.modifiers;
+  switch (scheme) {
+    case "fusion":
+    case "inventor": {
+      const rotating = shift;
+      return mapping(
+        environment,
+        { middle: rotating ? "rotate" : "truck", wheel: "none" },
+        { usesCadWheel: true, immediate: true },
+        {
+          one: "rotate",
+          two: rotating ? "rotate" : "truck",
+          three: "truck"
+        }
+      );
+    }
+    case "solidworks":
+      return mapping(
+        environment,
+        { middle: shift ? "zoom" : ctrl ? "truck" : "rotate" },
+        { usesCadWheel: false, immediate: false }
+      );
+    case "alias":
+      return mapping(
+        environment,
+        { left: "rotate", middle: "truck" },
+        { usesCadWheel: false, immediate: false }
+      );
+    case "tinkercad":
+      return mapping(
+        environment,
+        { right: shift ? "truck" : "rotate" },
+        { usesCadWheel: false, immediate: false }
+      );
+    case "powermill":
+      return mapping(
+        environment,
+        { middle: shift ? "truck" : "rotate" },
+        { usesCadWheel: false, immediate: false }
+      );
+    case "onshape":
+      return mapping(
+        environment,
+        { middle: "truck", right: "rotate" },
+        { usesCadWheel: false, immediate: false }
+      );
+    case "toolpath":
+      return mapping(
+        environment,
+        { left: "rotate", right: "truck" },
+        { usesCadWheel: false, immediate: false }
+      );
+  }
+};
+
+// src/render/controls.ts
 CameraControls.install({
   THREE: {
     Box3: Box32,
@@ -1013,8 +1442,8 @@ CameraControls.install({
     Raycaster,
     Sphere,
     Spherical,
-    Vector2,
-    Vector3: Vector34,
+    Vector2: Vector22,
+    Vector3: Vector35,
     Vector4
   }
 });
@@ -1032,13 +1461,14 @@ var ExtendedCameraControls = class extends CameraControls {
   #attached = false;
   #autoUpEnabled = false;
   #shiftPressed = false;
+  #ctrlPressed = false;
   #wheelHandler = null;
   // Scratch objects — `#onPointerMove` and `#adaptUpVector` run at pointer and
   // frame rate respectively, so neither may allocate.
   #spherical = new Spherical();
-  #scratchA = new Vector34();
-  #scratchB = new Vector34();
-  #scratchC = new Vector34();
+  #scratchA = new Vector35();
+  #scratchB = new Vector35();
+  #scratchC = new Vector35();
   constructor(camera, domElement, options = {}) {
     super(camera, domElement);
     this.#domElement = domElement;
@@ -1101,7 +1531,7 @@ var ExtendedCameraControls = class extends CameraControls {
     view?.removeEventListener("keyup", this.#onModifierChange);
     view?.removeEventListener("blur", this.#onWindowBlur);
     this.#disableAutoUp();
-    this.#disableFusionWheel();
+    this.#disableCadWheel();
   }
   dispose() {
     this.detach();
@@ -1114,29 +1544,38 @@ var ExtendedCameraControls = class extends CameraControls {
    */
   applyScheme(scheme) {
     this.#scheme = scheme;
-    this.mouseButtons.left = CameraControls.ACTION.NONE;
-    this.mouseButtons.middle = CameraControls.ACTION.NONE;
-    this.mouseButtons.right = CameraControls.ACTION.NONE;
-    this.mouseButtons.wheel = CameraControls.ACTION.NONE;
-    this.touches.one = CameraControls.ACTION.TOUCH_ROTATE;
-    this.touches.two = CameraControls.ACTION.TOUCH_DOLLY_TRUCK;
-    this.touches.three = CameraControls.ACTION.TOUCH_TRUCK;
-    this.smoothTime = DEFAULT_SMOOTH_TIME;
-    this.draggingSmoothTime = DEFAULT_SMOOTH_TIME;
-    this.#disableFusionWheel();
-    if (scheme === "fusion") {
-      const rotating = this.#shiftPressed;
-      this.mouseButtons.middle = rotating ? CameraControls.ACTION.ROTATE : CameraControls.ACTION.TRUCK;
-      this.touches.two = rotating ? CameraControls.ACTION.TOUCH_ROTATE : CameraControls.ACTION.TOUCH_TRUCK;
-      this.smoothTime = 0;
-      this.draggingSmoothTime = 0;
-      this.#enableFusionWheel();
-      return;
+    const mapping2 = resolveControlScheme(scheme, {
+      orthographic: this.camera instanceof OrthographicCamera2,
+      modifiers: { shift: this.#shiftPressed, ctrl: this.#ctrlPressed }
+    });
+    this.#applyMapping(mapping2);
+  }
+  #applyMapping(mapping2) {
+    const action = {
+      none: CameraControls.ACTION.NONE,
+      rotate: CameraControls.ACTION.ROTATE,
+      truck: CameraControls.ACTION.TRUCK,
+      zoom: CameraControls.ACTION.ZOOM,
+      dolly: CameraControls.ACTION.DOLLY
+    };
+    const touchAction = {
+      rotate: CameraControls.ACTION.TOUCH_ROTATE,
+      truck: CameraControls.ACTION.TOUCH_TRUCK,
+      "dolly-truck": CameraControls.ACTION.TOUCH_DOLLY_TRUCK
+    };
+    this.#disableCadWheel();
+    this.mouseButtons.left = action[mapping2.mouse.left];
+    this.mouseButtons.middle = action[mapping2.mouse.middle];
+    this.mouseButtons.right = action[mapping2.mouse.right];
+    this.mouseButtons.wheel = action[mapping2.mouse.wheel];
+    this.touches.one = touchAction[mapping2.touches.one];
+    this.touches.two = touchAction[mapping2.touches.two];
+    this.touches.three = touchAction[mapping2.touches.three];
+    this.smoothTime = mapping2.immediate ? 0 : DEFAULT_SMOOTH_TIME;
+    this.draggingSmoothTime = mapping2.immediate ? 0 : DEFAULT_SMOOTH_TIME;
+    if (mapping2.usesCadWheel) {
+      this.#enableCadWheel();
     }
-    this.mouseButtons.left = CameraControls.ACTION.ROTATE;
-    this.mouseButtons.right = CameraControls.ACTION.TRUCK;
-    this.mouseButtons.middle = CameraControls.ACTION.TRUCK;
-    this.mouseButtons.wheel = this.camera instanceof OrthographicCamera2 ? CameraControls.ACTION.ZOOM : CameraControls.ACTION.DOLLY;
   }
   setFreeOrbit(freeOrbit) {
     if (this.#freeOrbit === freeOrbit) {
@@ -1174,13 +1613,16 @@ var ExtendedCameraControls = class extends CameraControls {
     this.#autoUpEnabled = false;
     this.removeEventListener("update", this.#adaptUpVector);
   }
-  #enableFusionWheel() {
-    this.#wheelHandler = (event) => this.#onFusionWheel(event);
+  #enableCadWheel() {
+    if (!this.#attached || this.#wheelHandler) {
+      return;
+    }
+    this.#wheelHandler = (event) => this.#onCadWheel(event);
     this.#domElement.addEventListener("wheel", this.#wheelHandler, {
       passive: false
     });
   }
-  #disableFusionWheel() {
+  #disableCadWheel() {
     if (!this.#wheelHandler) {
       return;
     }
@@ -1223,7 +1665,7 @@ var ExtendedCameraControls = class extends CameraControls {
     void this.rotateTo(azimuth, polar, false);
     this.update(0);
   };
-  #onFusionWheel = (event) => {
+  #onCadWheel = (event) => {
     event.preventDefault();
     if (event.ctrlKey) {
       void this.zoom(-event.deltaY * FUSION_PINCH_ZOOM_SCALE, false);
@@ -1241,19 +1683,18 @@ var ExtendedCameraControls = class extends CameraControls {
     this.dispatchEvent({ type: "control" });
   };
   #onModifierChange = (event) => {
-    this.#setShiftPressed(event.shiftKey);
+    this.#setModifiers(event.shiftKey, event.ctrlKey);
   };
   #onWindowBlur = () => {
-    this.#setShiftPressed(false);
+    this.#setModifiers(false, false);
   };
-  #setShiftPressed(pressed) {
-    if (this.#shiftPressed === pressed) {
+  #setModifiers(shift, ctrl) {
+    if (this.#shiftPressed === shift && this.#ctrlPressed === ctrl) {
       return;
     }
-    this.#shiftPressed = pressed;
-    if (this.#scheme === "fusion") {
-      this.applyScheme(this.#scheme);
-    }
+    this.#shiftPressed = shift;
+    this.#ctrlPressed = ctrl;
+    this.applyScheme(this.#scheme);
   }
 };
 
@@ -1369,10 +1810,10 @@ function counted(notify) {
 import { useFrame as useFrame2, useThree as useThree3 } from "@react-three/fiber";
 import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2 } from "react";
 import {
-  DoubleSide,
+  DoubleSide as DoubleSide2,
   RingGeometry,
   SphereGeometry,
-  Vector3 as Vector35
+  Vector3 as Vector36
 } from "three";
 
 // src/render/target.ts
@@ -1415,8 +1856,8 @@ var TargetMarker = ({ controlsRef }) => {
   const heldUntil = useRef2(0);
   const painted = useRef2(-1);
   const placed = useRef2(false);
-  const lastTarget = useMemo3(() => new Vector35(), []);
-  const scratch = useMemo3(() => new Vector35(), []);
+  const lastTarget = useMemo3(() => new Vector36(), []);
+  const scratch = useMemo3(() => new Vector36(), []);
   useEffect3(() => {
     const controls = controlsRef.current;
     if (!controls) return void 0;
@@ -1482,7 +1923,7 @@ var TargetMarker = ({ controlsRef }) => {
             opacity: 0,
             depthTest: false,
             depthWrite: false,
-            side: DoubleSide
+            side: DoubleSide2
           }
         )
       }
@@ -1516,7 +1957,7 @@ import {
   CanvasTexture,
   Float32BufferAttribute as Float32BufferAttribute3,
   SRGBColorSpace,
-  Vector3 as Vector36
+  Vector3 as Vector37
 } from "three";
 var VIEW_NAMES = [
   // The six faces.
@@ -1600,12 +2041,12 @@ function viewUp(direction) {
   return { x: 0, y: 0, z: 1 };
 }
 function squaredUp(direction, currentUp) {
-  const forward = new Vector36(direction.x, direction.y, direction.z).normalize();
+  const forward = new Vector37(direction.x, direction.y, direction.z).normalize();
   const canonical = viewUp(direction);
-  const zero = new Vector36(canonical.x, canonical.y, canonical.z);
+  const zero = new Vector37(canonical.x, canonical.y, canonical.z);
   zero.addScaledVector(forward, -forward.dot(zero)).normalize();
-  const quarter = new Vector36().crossVectors(forward, zero);
-  const current = new Vector36(currentUp.x, currentUp.y, currentUp.z);
+  const quarter = new Vector37().crossVectors(forward, zero);
+  const current = new Vector37(currentUp.x, currentUp.y, currentUp.z);
   const rolls = [zero, quarter, zero.clone().negate(), quarter.clone().negate()];
   const nearest = rolls.reduce(
     (best, roll) => roll.dot(current) > best.dot(current) ? roll : best
@@ -1623,11 +2064,11 @@ function cubeZones(chamfer = CHAMFER) {
     const direction = viewVector(name);
     const [sx, sy, sz] = VIEW_SIGNS[name];
     const sign = (axis) => VIEW_SIGNS[name][axis] ?? 0;
-    const normal = new Vector36(direction.x, direction.y, direction.z);
+    const normal = new Vector37(direction.x, direction.y, direction.z);
     let polygon;
     if (kind === "face") {
       const up = viewUp(direction);
-      const upVector = new Vector36(up.x, up.y, up.z);
+      const upVector = new Vector37(up.x, up.y, up.z);
       const right = normal.clone().negate().cross(upVector).normalize();
       const square = [
         [-1, -1],
@@ -1649,7 +2090,7 @@ function cubeZones(chamfer = CHAMFER) {
         [chamfer, 1, -chamfer]
       ];
       polygon = rectangle.map(
-        ([onA, onB, onC]) => new Vector36().setComponent(a, sign(a) * onA).setComponent(b, sign(b) * onB).setComponent(c, onC)
+        ([onA, onB, onC]) => new Vector37().setComponent(a, sign(a) * onA).setComponent(b, sign(b) * onB).setComponent(c, onC)
       );
     } else {
       const triangle = [
@@ -1657,11 +2098,11 @@ function cubeZones(chamfer = CHAMFER) {
         [chamfer, 1, chamfer],
         [chamfer, chamfer, 1]
       ];
-      polygon = triangle.map(([onX, onY, onZ]) => new Vector36(sx * onX, sy * onY, sz * onZ));
+      polygon = triangle.map(([onX, onY, onZ]) => new Vector37(sx * onX, sy * onY, sz * onZ));
     }
     const [first, second, third] = polygon;
     if (first && second && third) {
-      const facing = new Vector36().subVectors(second, first).cross(new Vector36().subVectors(third, first));
+      const facing = new Vector37().subVectors(second, first).cross(new Vector37().subVectors(third, first));
       if (facing.dot(normal) < 0) polygon.reverse();
     }
     return { name, kind, direction, polygon: polygon.map(vec) };
@@ -1791,10 +2232,10 @@ var ViewerScene = ({
   const framedRef = useRef3(null);
   const scratchBox = useMemo4(() => new Box33(), []);
   const scratchBoundary = useMemo4(() => new Box33(), []);
-  const scratchDirection = useMemo4(() => new Vector37(), []);
-  const scratchView = useMemo4(() => new Vector37(), []);
-  const scratchTarget = useMemo4(() => new Vector37(), []);
-  const scratchPosition = useMemo4(() => new Vector37(), []);
+  const scratchDirection = useMemo4(() => new Vector38(), []);
+  const scratchView = useMemo4(() => new Vector38(), []);
+  const scratchTarget = useMemo4(() => new Vector38(), []);
+  const scratchPosition = useMemo4(() => new Vector38(), []);
   const applyLimits = useCallback(
     (bounds, framed) => {
       controlsRef.current?.applyLimits(
@@ -1843,8 +2284,8 @@ var ViewerScene = ({
     (bounds) => {
       const controls = controlsRef.current;
       if (!controls) return false;
-      const target = controls.getTarget(new Vector37());
-      const direction = currentViewDirection(camera, target, new Vector37());
+      const target = controls.getTarget(new Vector38());
+      const direction = currentViewDirection(camera, target, new Vector38());
       const distance = fitDistance(projection, size, bounds, DEFAULT_FIT_MARGIN);
       const position = direction.multiplyScalar(distance).add(bounds.center);
       void controls.setLookAt(
@@ -1869,8 +2310,8 @@ var ViewerScene = ({
   const fitContent = useCallback(() => {
     const controls = controlsRef.current;
     if (!controls) return false;
-    const target = controls.getTarget(new Vector37());
-    return frame(currentViewDirection(camera, target, new Vector37()), true);
+    const target = controls.getTarget(new Vector38());
+    return frame(currentViewDirection(camera, target, new Vector38()), true);
   }, [camera, frame]);
   const resetContent = useCallback(() => {
     const bounds = measure();
@@ -2025,7 +2466,8 @@ var Viewer = forwardRef(function Viewer2({
   return /* @__PURE__ */ jsx3(ViewerControlsContext.Provider, { value: proxy, children: /* @__PURE__ */ jsx3(SectionStoreContext.Provider, { value: sectionStore, children: /* @__PURE__ */ jsx3(
     "div",
     {
-      className,
+      className: ["viewer-root", className].filter(Boolean).join(" "),
+      "data-viewer-root": "true",
       ref: hold,
       onMouseDown: (event) => {
         if (event.target instanceof HTMLCanvasElement) event.preventDefault();
@@ -2034,11 +2476,20 @@ var Viewer = forwardRef(function Viewer2({
       children: /* @__PURE__ */ jsx3(
         Canvas,
         {
+          className: "viewer-canvas-container",
+          "data-viewer-canvas-container": "true",
           orthographic: projection === "orthographic",
           camera: { fov: PERSPECTIVE_FOV, up: [0, 0, 1], position: [1, -1, 1] },
           dpr: [1, 2],
           frameloop: "demand",
           gl: { antialias: true, alpha: true, stencil: true, localClippingEnabled: true },
+          onCreated: ({ gl }) => {
+            const canvas = gl.domElement;
+            canvas.classList.add("viewer-canvas");
+            canvas.dataset.viewerCanvas = "true";
+            canvas.parentElement?.classList.add("viewer-canvas-frame");
+            canvas.parentElement?.setAttribute("data-viewer-canvas-frame", "true");
+          },
           onPointerMissed: (event) => {
             if (event.button !== 0) return;
             if (tracker.current?.isTap(event) ?? true) onPointerMissed?.();
@@ -2070,29 +2521,31 @@ 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 {
   Color as Color3,
+  DoubleSide as DoubleSide4,
+  EdgesGeometry,
   Mesh as Mesh3,
   Plane as Plane2,
   PlaneGeometry,
   Quaternion as Quaternion2,
   Raycaster as Raycaster2,
   Scene,
-  Vector2 as Vector23,
-  Vector3 as Vector39
+  Vector2 as Vector24,
+  Vector3 as Vector310
 } from "three";
 
 // src/render/directions.ts
-import { Vector3 as Vector38 } from "three";
-var CONE_AXIS = new Vector38(0, 1, 0);
+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 Vector38());
-  const half = box.getSize(new Vector38()).multiplyScalar(0.5);
+  const center = box.getCenter(new Vector39());
+  const half = box.getSize(new Vector39()).multiplyScalar(0.5);
   const radius = half.length() || 1;
-  const axis = new Vector38(direction.x, direction.y, direction.z);
+  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;
@@ -2113,7 +2566,7 @@ import {
   BackSide,
   Color as Color2,
   DecrementWrapStencilOp,
-  DoubleSide as DoubleSide2,
+  DoubleSide as DoubleSide3,
   FrontSide,
   IncrementWrapStencilOp,
   LinearFilter,
@@ -2121,7 +2574,7 @@ import {
   NotEqualStencilFunc,
   ReplaceStencilOp,
   ShaderMaterial,
-  Vector2 as Vector22,
+  Vector2 as Vector23,
   WebGLRenderTarget
 } from "three";
 var VERTEX = (
@@ -2180,7 +2633,7 @@ function createMaskTarget() {
 function createCapMaterial(mask) {
   const uniforms = {
     uMask: { value: mask },
-    uResolution: { value: new Vector22(1, 1) },
+    uResolution: { value: new Vector23(1, 1) },
     uFill: { value: new Color2() },
     uHatch: { value: new Color2() },
     uOutline: { value: new Color2() },
@@ -2192,7 +2645,7 @@ function createCapMaterial(mask) {
     vertexShader: VERTEX,
     fragmentShader: FRAGMENT,
     uniforms,
-    side: DoubleSide2,
+    side: DoubleSide3,
     stencilWrite: true,
     stencilRef: 0,
     stencilFunc: NotEqualStencilFunc,
@@ -2238,7 +2691,7 @@ function createStencilMaterials(clip) {
 function createMaskMaterial() {
   return new MeshBasicMaterial2({
     color: 16777215,
-    side: DoubleSide2,
+    side: DoubleSide3,
     stencilWrite: true,
     stencilRef: 0,
     stencilFunc: NotEqualStencilFunc,
@@ -2249,12 +2702,12 @@ function createMaskMaterial() {
 }
 
 // src/section-view.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 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_SECTION_NORMAL;
-  const axis = new Vector39(normal.x, normal.y, normal.z);
+  const axis = new Vector310(normal.x, normal.y, normal.z);
   if (axis.lengthSq() === 0) axis.set(0, 0, 1);
   axis.normalize();
   const bounds = sectionBounds(box, normal);
@@ -2270,16 +2723,18 @@ function resolveSectionPlane(options, box) {
       constant,
       plane: options.plane ?? null,
       depth: anchor === null ? null : sectionDepth(normal, anchor, constant),
+      cutDistance: sectionCutDistance(box, normal, constant),
       depthRange: anchor === null ? null : sectionDepthRange(bounds, normal, anchor)
     }
   };
 }
-var Z = new Vector39(0, 0, 1);
+var Z = new Vector310(0, 0, 1);
 var SectionView = ({
   geometry,
   box,
   plane,
   theme,
+  handleColor,
   showHandle,
   onDrag
 }) => {
@@ -2293,7 +2748,10 @@ var SectionView = ({
   const handleRef = useRef4(null);
   const [hovered, setHovered] = useState(false);
   const dragging = useRef4(null);
-  const span = useMemo5(() => box.getSize(new Vector39()).length(), [box]);
+  const span = useMemo5(() => box.getSize(new Vector310()).length(), [box]);
+  const frameSize = span * SECTION_GIZMO_FRAME_SCALE;
+  const directionColor2 = useMemo5(() => 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]);
@@ -2301,6 +2759,10 @@ var SectionView = ({
     () => new Quaternion2().setFromUnitVectors(CONE_AXIS, 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(() => {
@@ -2330,7 +2792,7 @@ var SectionView = ({
     maskScene.maskMesh.quaternion.copy(capQuaternion);
   }, [capPosition, capQuaternion, maskScene]);
   useLayoutEffect(() => {
-    const buffer = gl.getDrawingBufferSize(new Vector23());
+    const buffer = gl.getDrawingBufferSize(new Vector24());
     mask.setSize(buffer.x, buffer.y);
     cap.uniforms.uResolution.value.copy(buffer);
     applyCapTheme(cap, theme, dpr);
@@ -2368,7 +2830,7 @@ var SectionView = ({
     event.stopPropagation();
     const view = camera.position.clone().sub(capPosition).normalize();
     const surface = dragPlane(plane.normal.clone(), view, capPosition);
-    const hit = event.ray.intersectPlane(surface, new Vector39());
+    const hit = event.ray.intersectPlane(surface, new Vector310());
     const start = {
       plane: surface,
       from: hit ? hit.dot(plane.normal) : 0,
@@ -2377,7 +2839,7 @@ var SectionView = ({
     dragging.current = start;
     setControlsEnabled(false);
     const raycaster = new Raycaster2();
-    const pointer = new Vector23();
+    const pointer = new Vector24();
     const move = (native) => {
       const rect = domElement.getBoundingClientRect();
       pointer.set(
@@ -2385,7 +2847,7 @@ var SectionView = ({
         -((native.clientY - rect.top) / rect.height) * 2 + 1
       );
       raycaster.setFromCamera(pointer, camera);
-      const point = raycaster.ray.intersectPlane(start.plane, new Vector39());
+      const point = raycaster.ray.intersectPlane(start.plane, new Vector310());
       if (!point) return;
       onDrag(start.constant - (point.dot(plane.normal) - start.from));
       invalidate();
@@ -2447,37 +2909,81 @@ var SectionView = ({
           raycast: () => null
         }
       ),
-      showHandle && onDrag ? /* @__PURE__ */ jsxs3(
-        "group",
-        {
-          ref: handleRef,
-          position: capPosition,
-          quaternion: handleQuaternion,
-          renderOrder: SECTION_RENDER_ORDER.handle,
-          children: [
-            /* @__PURE__ */ jsxs3("mesh", { position: [0, 0.28, 0], ...grab, children: [
-              /* @__PURE__ */ jsx4("coneGeometry", { args: [0.16, 0.34, 20] }),
-              /* @__PURE__ */ jsx4(
-                "meshBasicMaterial",
-                {
-                  color: hovered ? theme.hover : theme.sectionHandle,
-                  depthTest: false
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs3("mesh", { position: [0, 0.08, 0], ...grab, children: [
-              /* @__PURE__ */ jsx4("cylinderGeometry", { args: [0.045, 0.045, 0.4, 12] }),
-              /* @__PURE__ */ jsx4(
+      showHandle && onDrag ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+        /* @__PURE__ */ jsxs3(
+          "group",
+          {
+            position: capPosition,
+            quaternion: capQuaternion,
+            renderOrder: SECTION_RENDER_ORDER.outline,
+            children: [
+              /* @__PURE__ */ jsx4("mesh", { geometry: frameSurface, raycast: () => null, children: /* @__PURE__ */ jsx4(
                 "meshBasicMaterial",
                 {
-                  color: hovered ? theme.hover : theme.sectionHandle,
-                  depthTest: false
+                  color: directionColor2,
+                  transparent: true,
+                  opacity: 0.18,
+                  side: DoubleSide4,
+                  depthTest: false,
+                  depthWrite: false
                 }
-              )
-            ] })
-          ]
-        }
-      ) : null
+              ) }),
+              /* @__PURE__ */ jsx4("lineSegments", { geometry: frameEdges, raycast: () => null, children: /* @__PURE__ */ jsx4("lineBasicMaterial", { color: directionColor2, depthTest: false, depthWrite: false }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          "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
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] }) : null
     ] })
   );
 };
@@ -2493,7 +2999,7 @@ function useContentBox() {
   useFrame5(() => {
     if (measured.current) return;
     const next = new Box34();
-    contentBounds(scene, next);
+    partBounds(scene, next);
     if (next.isEmpty()) return;
     measured.current = true;
     setBox(next);
@@ -2502,16 +3008,18 @@ function useContentBox() {
 }
 
 // src/part-mesh.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var PartMesh = ({
   model,
   geometry,
   selection = [],
+  focus,
   candidates = [],
   highlights = [],
   regionHighlights = [],
   pickedRegions = [],
   hoveredFeatureIds = [],
+  hover = true,
   activeDirection = null,
   section,
   onSectionChange,
@@ -2520,7 +3028,8 @@ var PartMesh = ({
   onHover,
   onPick,
   theme,
-  showEdges = true
+  showEdges = true,
+  display = "solid"
 }) => {
   const { camera, controls, invalidate } = useThree7();
   const viewerControls = useViewerControls();
@@ -2529,6 +3038,8 @@ var PartMesh = ({
   currentTheme.current = resolved;
   const part = useMemo6(() => createPart(model, geometry, currentTheme.current), [geometry, model]);
   const hoverRegion = useRef6(null);
+  const onHoverRef = useRef6(onHover);
+  onHoverRef.current = onHover;
   const box = useContentBox();
   const store = useSectionStore();
   const shared = useSyncExternalStore(store.subscribe, store.get, store.get);
@@ -2578,10 +3089,19 @@ var PartMesh = ({
     part.setTheme(resolved);
     repaint();
   }, [part, repaint, resolved]);
+  const focusRef = useRef6(focus);
+  focusRef.current = focus;
+  const selectionRef = useRef6(selection);
+  selectionRef.current = selection;
+  const focusKey = focusStateKey(focus, selection);
   useLayoutEffect2(() => {
-    part.edges.visible = showEdges;
+    part.setFocus(selectionRef.current, focusRef.current);
     invalidate();
-  }, [invalidate, part, showEdges]);
+  }, [focusKey, invalidate, part]);
+  useLayoutEffect2(() => {
+    part.setDisplay(display, showEdges);
+    invalidate();
+  }, [display, invalidate, part, showEdges]);
   useLayoutEffect2(() => {
     part.setClippingPlanes(cut ? [cut.plane] : null);
     invalidate();
@@ -2624,6 +3144,7 @@ var PartMesh = ({
       triangleIndex,
       point: [event.point.x, event.point.y, event.point.z],
       normal: [normal.x, normal.y, normal.z],
+      pointer: { clientX: source.clientX, clientY: source.clientY },
       activeDirection,
       doubled,
       viewDirection: viewDirection(camera, target),
@@ -2643,8 +3164,12 @@ var PartMesh = ({
     repaint();
     onHover?.(next);
   };
-  const onHoverRef = useRef6(onHover);
-  onHoverRef.current = onHover;
+  useLayoutEffect2(() => {
+    if (hover || hoverRegion.current === null) return;
+    hoverRegion.current = null;
+    repaint();
+    onHoverRef.current?.(null);
+  }, [hover, repaint]);
   useLayoutEffect2(() => {
     if (!engaged || hoverRegion.current === null) return;
     hoverRegion.current = null;
@@ -2655,18 +3180,21 @@ var PartMesh = ({
     (constant) => {
       if (!cut) return;
       const anchor = options?.plane?.point;
+      const bounds = sectionBounds(box, cut.state.normal);
+      const offset = sectionOffset(bounds, constant);
       const state = {
         ...cut.state,
         constant,
-        offset: sectionOffset(sectionBounds(box, cut.state.normal), constant),
-        depth: anchor ? sectionDepth(cut.state.normal, anchor, constant) : null
+        offset,
+        depth: anchor ? sectionDepth(cut.state.normal, anchor, constant) : null,
+        cutDistance: sectionCutDistance(box, cut.state.normal, constant)
       };
       if (!controlled) store.set(sectionOptionsFromState(state));
       onSectionChange?.(state);
     },
     [box, controlled, cut, onSectionChange, options, store]
   );
-  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
     /* @__PURE__ */ jsx5(
       "primitive",
       {
@@ -2675,7 +3203,7 @@ var PartMesh = ({
           pressedWhileEngaged.current = engaged;
         },
         onPointerMove: (event) => {
-          if (!engaged) emitHover(pickFor(event));
+          if (!engaged && hover) emitHover(pickFor(event));
         },
         onPointerOut: () => {
           emitHover(null);
@@ -2711,15 +3239,16 @@ var PartMesh = ({
         box,
         plane: cut.plane,
         theme: resolved,
+        handleColor: theme?.sectionHandle,
         showHandle: !controlled || onSectionChange !== void 0,
         onDrag: !controlled || onSectionChange ? dragSection : void 0
       }
     ) : null
   ] });
 };
-var ORIGIN = new Vector310();
-var UP = new Vector310(0, 0, 1);
-var TARGET = new Vector310();
+var ORIGIN = new Vector311();
+var UP = new Vector311(0, 0, 1);
+var TARGET = new Vector311();
 function readTarget(controls) {
   if (controls && typeof controls.getTarget === "function") {
     return controls.getTarget(TARGET);
@@ -3378,6 +3907,7 @@ export {
   PERSPECTIVE_FOV,
   DEFAULT_FIT_MARGIN,
   EXCLUDE_FROM_FRAME,
+  STOCK_OBJECT,
   defaultBounds,
   aspectRatio,
   screenLength,
@@ -3397,8 +3927,35 @@ export {
   adaptedUp,
   cadViewDirections,
   currentViewDirection,
+  MEASURE_RENDER_ORDER,
+  AXIS_COLORS,
+  SNAP_PIXELS,
+  SNAP_MARKER_PIXELS,
+  MEASURE_MARKER_PIXELS,
+  MEASURE_LINE_PIXELS,
+  DELTA_DASH_PIXELS,
+  ANGLE_ARC_FRACTION,
+  ANGLE_ARC_SEGMENTS,
+  snapAt,
+  screenPoint,
+  POINTS_PER_MEASUREMENT,
+  measurementFromPoints,
+  nextMeasurementId,
+  distanceBetween,
+  deltaBetween,
+  midpoint,
+  angleAt,
+  lockToAxis,
+  deltaLegs,
+  angleArc,
+  angleArcRadius,
+  formatMillimetres,
+  formatDegrees,
+  measurementLabel,
+  measurementLabelAnchor,
   SECTION_RENDER_ORDER,
   HANDLE_PIXELS,
+  SECTION_GIZMO_FRAME_SCALE,
   CAP_HATCH,
   AXES_PLANE_OFFSET,
   AXES_PLANE_SCALE,
@@ -3406,6 +3963,7 @@ export {
   OUTLINE_SCALE,
   DEFAULT_SECTION_NORMAL,
   DISABLED_SECTION,
+  sectionMeasurement,
   sectionOptionsFromState,
   axesPlanes,
   hitUnderRay,
@@ -3444,6 +4002,7 @@ export {
   viewDirection,
   buildPick,
   focusForPick,
+  CONTROL_SCHEME_OPTIONS,
   ExtendedCameraControls,
   CadCameraControls,
   retargetPose,