@toolpath/viewer 2.2.0 → 2.3.0

package/dist/{chunk-WTTOUG4P.js → chunk-N54FHMTG.js}

@@ -1,17 +1,17 @@
 // src/engine/engine-part.tsx
-import { useEffect as useEffect7, useMemo as useMemo7 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo8 } from "react";
 
 // src/part-mesh.tsx
-import { useThree as useThree7 } from "@react-three/fiber";
+import { useThree as useThree8 } from "@react-three/fiber";
 import {
   useCallback as useCallback3,
-  useEffect as useEffect6,
-  useLayoutEffect as useLayoutEffect2,
-  useMemo as useMemo6,
+  useEffect as useEffect7,
+  useLayoutEffect as useLayoutEffect3,
+  useMemo as useMemo7,
   useRef as useRef6,
   useSyncExternalStore
 } from "react";
-import { Vector3 as Vector311 } from "three";
+import { Vector3 as Vector312 } from "three";
 
 // src/part-context.tsx
 import { createContext, useContext } from "react";
@@ -136,6 +136,8 @@ var DEFAULT_THEME = {
   picked: 16347926,
   edge: 0,
   edgeOpacity: 0.5,
+  // Red, which the direction palette's note keeps free for sharp corners.
+  sharpCorner: 14427686,
   sectionCap: 14672618,
   sectionHatch: 9080998,
   sectionOutline: 7057587,
@@ -157,7 +159,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.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;
+  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.sharpCorner === b.sharpCorner && 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;
@@ -857,19 +859,19 @@ function useTapGuard() {
 // src/render/part.ts
 import {
   Box3,
-  Color,
+  Color as Color2,
   DataTexture,
-  DoubleSide,
-  Float32BufferAttribute as Float32BufferAttribute2,
-  Group,
+  DoubleSide as DoubleSide2,
+  Float32BufferAttribute as Float32BufferAttribute3,
+  Group as Group2,
   LineBasicMaterial,
   LineSegments,
-  Mesh,
+  Mesh as Mesh2,
   MeshLambertMaterial,
   RedFormat,
   RGBAFormat,
   UnsignedByteType,
-  Vector3 as Vector34
+  Vector3 as Vector35
 } from "three";
 
 // src/render/edges.ts
@@ -937,6 +939,555 @@ function regionEdgesGeometry(geometry, model) {
   return edges;
 }
 
+// src/render/sharp-corners.ts
+import {
+  BufferAttribute,
+  BufferGeometry,
+  Color,
+  DoubleSide,
+  Float32BufferAttribute as Float32BufferAttribute2,
+  GreaterDepth,
+  Group,
+  KeepStencilOp,
+  LessEqualDepth,
+  Mesh,
+  MeshBasicMaterial,
+  NotEqualStencilFunc,
+  ReplaceStencilOp,
+  ShaderMaterial,
+  Vector2 as Vector22,
+  Vector3 as Vector34,
+  Vector4
+} from "three";
+
+// src/render/adjacency.ts
+var GRID = 1e-4;
+var keyFor = (x, y, z) => `${Math.round(x / GRID)},${Math.round(y / GRID)},${Math.round(z / GRID)}`;
+function regionAdjacency(model, geometry) {
+  const position = geometry.getAttribute("position");
+  const adjacency = /* @__PURE__ */ new Map();
+  if (!position) return adjacency;
+  const owner = new Int32Array(Math.floor(position.count / 3)).fill(-1);
+  for (const region of model.regions) {
+    for (let at = region.triangles.start; at < region.triangles.end; at++) {
+      if (at >= 0 && at < owner.length) owner[at] = region.idx;
+    }
+  }
+  const edges = /* @__PURE__ */ new Map();
+  const join = (a, b) => {
+    if (a === b) return;
+    const mine = adjacency.get(a) ?? /* @__PURE__ */ new Set();
+    mine.add(b);
+    adjacency.set(a, mine);
+    const theirs = adjacency.get(b) ?? /* @__PURE__ */ new Set();
+    theirs.add(a);
+    adjacency.set(b, theirs);
+  };
+  for (let triangle = 0; triangle < owner.length; triangle++) {
+    const region = owner[triangle];
+    if (region === -1) continue;
+    const corners = [0, 1, 2].map((corner) => {
+      const at = triangle * 3 + corner;
+      return keyFor(position.getX(at), position.getY(at), position.getZ(at));
+    });
+    for (let corner = 0; corner < 3; corner++) {
+      const from = corners[corner];
+      const to = corners[(corner + 1) % 3];
+      const edge = from < to ? `${from}|${to}` : `${to}|${from}`;
+      const seen = edges.get(edge);
+      if (seen === void 0) edges.set(edge, region);
+      else join(seen, region);
+    }
+  }
+  return adjacency;
+}
+
+// src/render/sharp-corners.ts
+var MIN_FOLD_DEGREES = 20;
+var ALONG_TOLERANCE_DEGREES = 15;
+var BAND_WIDTH = 6;
+var NEAR_OPACITY = 1;
+var FAR_OPACITY = 0.35;
+var DEGREES = 180 / Math.PI;
+function surfaceCreases(geometry, model) {
+  const position = geometry.getAttribute("position");
+  if (!position || geometry.index) return emptyCreases();
+  const triangleCount = Math.floor(position.count / 3);
+  const surfaces = visualSurfaces(model.regions);
+  const surfaceOf = new Int32Array(triangleCount).fill(-1);
+  const regionOf = new Int32Array(triangleCount).fill(-1);
+  for (const region of model.regions) {
+    const end = Math.min(region.triangles.end, triangleCount);
+    for (let triangle = Math.max(region.triangles.start, 0); triangle < end; triangle += 1) {
+      surfaceOf[triangle] = surfaces.get(region.idx) ?? region.idx;
+      regionOf[triangle] = region.idx;
+    }
+  }
+  const normals = new Float32Array(triangleCount * 3);
+  for (let triangle = 0; triangle < triangleCount; triangle += 1) {
+    const at = triangle * 3;
+    const ax = position.getX(at);
+    const ay = position.getY(at);
+    const az = position.getZ(at);
+    const ux = position.getX(at + 1) - ax;
+    const uy = position.getY(at + 1) - ay;
+    const uz = position.getZ(at + 1) - az;
+    const vx = position.getX(at + 2) - ax;
+    const vy = position.getY(at + 2) - ay;
+    const vz = position.getZ(at + 2) - az;
+    const nx = uy * vz - uz * vy;
+    const ny = uz * vx - ux * vz;
+    const nz = ux * vy - uy * vx;
+    const length = Math.hypot(nx, ny, nz);
+    if (length === 0) continue;
+    normals[at] = nx / length;
+    normals[at + 1] = ny / length;
+    normals[at + 2] = nz / length;
+  }
+  const keyOf = (vertex) => keyFor(position.getX(vertex), position.getY(vertex), position.getZ(vertex));
+  const open = /* @__PURE__ */ new Map();
+  const positions = [];
+  const angles = [];
+  const concave = [];
+  const regions = [];
+  const fars = [];
+  const inFront = (triangle, vertex, on) => normals[triangle * 3] * (position.getX(vertex) - position.getX(on)) + normals[triangle * 3 + 1] * (position.getY(vertex) - position.getY(on)) + normals[triangle * 3 + 2] * (position.getZ(vertex) - position.getZ(on));
+  const measure = (first, second) => {
+    const t1 = Math.floor(first / 3);
+    const t2 = Math.floor(second / 3);
+    if (surfaceOf[t1] === surfaceOf[t2]) return;
+    if (normals[t1 * 3] === 0 && normals[t1 * 3 + 1] === 0 && normals[t1 * 3 + 2] === 0) return;
+    if (normals[t2 * 3] === 0 && normals[t2 * 3 + 1] === 0 && normals[t2 * 3 + 2] === 0) return;
+    const dot2 = normals[t1 * 3] * normals[t2 * 3] + normals[t1 * 3 + 1] * normals[t2 * 3 + 1] + normals[t1 * 3 + 2] * normals[t2 * 3 + 2];
+    const a = t1 * 3 + first % 3;
+    const b = t1 * 3 + (first + 1) % 3;
+    const far1 = t1 * 3 + (first + 2) % 3;
+    const far2 = t2 * 3 + (second + 2) % 3;
+    const fold = inFront(t1, far2, a) + inFront(t2, far1, a);
+    positions.push(
+      position.getX(a),
+      position.getY(a),
+      position.getZ(a),
+      position.getX(b),
+      position.getY(b),
+      position.getZ(b)
+    );
+    angles.push(Math.acos(Math.min(1, Math.max(-1, dot2))) * DEGREES);
+    concave.push(fold > 0 ? 1 : 0);
+    regions.push(regionOf[t1], regionOf[t2]);
+    fars.push(
+      position.getX(far1),
+      position.getY(far1),
+      position.getZ(far1),
+      position.getX(far2),
+      position.getY(far2),
+      position.getZ(far2)
+    );
+  };
+  for (let triangle = 0; triangle < triangleCount; triangle += 1) {
+    const keys = [keyOf(triangle * 3), keyOf(triangle * 3 + 1), keyOf(triangle * 3 + 2)];
+    for (let corner = 0; corner < 3; corner += 1) {
+      const from = keys[corner];
+      const to = keys[(corner + 1) % 3];
+      if (from === to) continue;
+      const edge = from < to ? `${from}|${to}` : `${to}|${from}`;
+      const seen = open.get(edge);
+      if (seen === void 0) open.set(edge, triangle * 3 + corner);
+      else if (seen !== -1) {
+        measure(seen, triangle * 3 + corner);
+        open.set(edge, -1);
+      }
+    }
+  }
+  return {
+    count: angles.length,
+    positions: new Float32Array(positions),
+    angles: new Float32Array(angles),
+    concave: new Uint8Array(concave),
+    regions: new Int32Array(regions),
+    fars: new Float32Array(fars)
+  };
+}
+function sharpCornerKey(options) {
+  return options.features.map((tag) => tag.toLowerCase()).sort().join(",");
+}
+function findSharpCorners(creases, model, options) {
+  const alongCos = Math.cos(ALONG_TOLERANCE_DEGREES / DEGREES);
+  const flagged = new Set(options.features.map((tag) => tag.toLowerCase()));
+  const owners = /* @__PURE__ */ new Map();
+  for (const feature of model.features) {
+    if (!flagged.has(feature.tag.toLowerCase())) continue;
+    const axis = unit2(feature.machiningDirection);
+    if (!axis) continue;
+    for (const region of model.regionIndex.regionsForFeature(feature.tag)) {
+      const held = owners.get(region);
+      if (held) held.push({ tag: feature.tag, axis });
+      else owners.set(region, [{ tag: feature.tag, axis }]);
+    }
+  }
+  if (owners.size === 0) return [];
+  const { positions } = creases;
+  const kept = [];
+  for (let segment = 0; segment < creases.count; segment += 1) {
+    if (creases.concave[segment] !== 1 || creases.angles[segment] < MIN_FOLD_DEGREES) continue;
+    const candidates = [
+      ...owners.get(creases.regions[segment * 2]) ?? [],
+      ...owners.get(creases.regions[segment * 2 + 1]) ?? []
+    ];
+    if (candidates.length === 0) continue;
+    const at = segment * 6;
+    const dx = positions[at + 3] - positions[at];
+    const dy = positions[at + 4] - positions[at + 1];
+    const dz = positions[at + 5] - positions[at + 2];
+    const length = Math.hypot(dx, dy, dz);
+    if (length === 0) continue;
+    const owner = candidates.find(
+      ({ axis }) => Math.abs(dx * axis.x + dy * axis.y + dz * axis.z) / length >= alongCos
+    );
+    if (owner) kept.push({ segment, feature: owner.tag });
+  }
+  const keyOf = (at) => keyFor(positions[at], positions[at + 1], positions[at + 2]);
+  const parent = kept.map((_, at) => at);
+  const root = (at) => {
+    while (parent[at] !== at) at = parent[at] = parent[parent[at]];
+    return at;
+  };
+  const byEnd = /* @__PURE__ */ new Map();
+  kept.forEach(({ segment, feature }, at) => {
+    for (const end of [segment * 6, segment * 6 + 3]) {
+      const key = `${feature.toLowerCase()}|${keyOf(end)}`;
+      const other = byEnd.get(key);
+      if (other === void 0) byEnd.set(key, at);
+      else parent[root(at)] = root(other);
+    }
+  });
+  const groups = /* @__PURE__ */ new Map();
+  kept.forEach((_, at) => {
+    const group = groups.get(root(at));
+    if (group) group.push(at);
+    else groups.set(root(at), [at]);
+  });
+  return [...groups.values()].map((members, index) => {
+    const feature = kept[members[0]].feature;
+    const segments = members.map((at) => kept[at].segment);
+    const first = segments[0] * 6;
+    const axis = unit2({
+      x: positions[first + 3] - positions[first],
+      y: positions[first + 4] - positions[first + 1],
+      z: positions[first + 5] - positions[first + 2]
+    });
+    let start = null;
+    let end = null;
+    let low = Infinity;
+    let high = -Infinity;
+    let length = 0;
+    let folded = 0;
+    const regions = /* @__PURE__ */ new Set();
+    for (const segment of segments) {
+      const at = segment * 6;
+      for (const point of [at, at + 3]) {
+        const p = { x: positions[point], y: positions[point + 1], z: positions[point + 2] };
+        const along = p.x * axis.x + p.y * axis.y + p.z * axis.z;
+        if (along < low) [low, start] = [along, p];
+        if (along > high) [high, end] = [along, p];
+      }
+      const run = Math.hypot(
+        positions[at + 3] - positions[at],
+        positions[at + 4] - positions[at + 1],
+        positions[at + 5] - positions[at + 2]
+      );
+      length += run;
+      folded += run * creases.angles[segment];
+      regions.add(creases.regions[segment * 2]);
+      regions.add(creases.regions[segment * 2 + 1]);
+    }
+    return {
+      index,
+      feature,
+      start,
+      end,
+      length,
+      // The normals turn by the fold; the faces themselves open by what is left of 180°.
+      angle: 180 - folded / length,
+      regions: [...regions],
+      segments
+    };
+  });
+}
+function sharpCornerPositions(creases, model, options) {
+  const segments = findSharpCorners(creases, model, options).flatMap((corner) => corner.segments);
+  const positions = new Float32Array(segments.length * 6);
+  segments.forEach(
+    (segment, at) => positions.set(creases.positions.subarray(segment * 6, segment * 6 + 6), at * 6)
+  );
+  return positions;
+}
+var SHARP_CORNER_HOVER_PIXELS = 6;
+function sharpCornerAt(corners, creases, hit, camera, viewport, matrixWorld) {
+  const pointer = screenPoint(camera, hit.point, viewport);
+  const a = new Vector34();
+  const b = new Vector34();
+  const from = new Vector22();
+  const to = new Vector22();
+  let nearest = null;
+  let reach = SHARP_CORNER_HOVER_PIXELS;
+  for (const corner of corners) {
+    if (!corner.regions.includes(hit.region)) continue;
+    for (const segment of corner.segments) {
+      a.fromArray(creases.positions, segment * 6).applyMatrix4(matrixWorld);
+      b.fromArray(creases.positions, segment * 6 + 3).applyMatrix4(matrixWorld);
+      screenPoint(camera, a, viewport, from);
+      screenPoint(camera, b, viewport, to);
+      const distance = distanceToSegment(pointer, from, to);
+      if (distance <= reach) [reach, nearest] = [distance, corner];
+    }
+  }
+  return nearest;
+}
+function distanceToSegment(point, from, to) {
+  const dx = to.x - from.x;
+  const dy = to.y - from.y;
+  const span = dx * dx + dy * dy;
+  const t = span === 0 ? 0 : Math.min(1, Math.max(0, ((point.x - from.x) * dx + (point.y - from.y) * dy) / span));
+  return Math.hypot(point.x - (from.x + t * dx), point.y - (from.y + t * dy));
+}
+function sharpCornerBands(creases, corners) {
+  const position = [];
+  const perp = [];
+  const side = [];
+  const reach = [];
+  const owner = [];
+  const index = [];
+  for (const { index: corner, segments } of corners) {
+    for (const segment of segments) {
+      const at = segment * 6;
+      const a = [creases.positions[at], creases.positions[at + 1], creases.positions[at + 2]];
+      const b = [creases.positions[at + 3], creases.positions[at + 4], creases.positions[at + 5]];
+      const edge = [b[0] - a[0], b[1] - a[1], b[2] - a[2]];
+      const length = Math.hypot(edge[0], edge[1], edge[2]);
+      if (length === 0) continue;
+      const along = edge.map((value) => value / length);
+      for (let face = 0; face < 2; face += 1) {
+        const far = at + face * 3;
+        const v = [
+          creases.fars[far] - a[0],
+          creases.fars[far + 1] - a[1],
+          creases.fars[far + 2] - a[2]
+        ];
+        const t = v[0] * along[0] + v[1] * along[1] + v[2] * along[2];
+        const across = [v[0] - t * along[0], v[1] - t * along[1], v[2] - t * along[2]];
+        const extent = Math.hypot(across[0], across[1], across[2]);
+        if (extent === 0) continue;
+        const first = position.length / 3;
+        for (const [point, out] of [
+          [a, 0],
+          [b, 0],
+          [a, 1],
+          [b, 1]
+        ]) {
+          position.push(point[0], point[1], point[2]);
+          perp.push(across[0] / extent, across[1] / extent, across[2] / extent);
+          side.push(out);
+          reach.push(extent);
+          owner.push(corner);
+        }
+        index.push(first, first + 1, first + 3, first, first + 3, first + 2);
+      }
+    }
+  }
+  const geometry = new BufferGeometry();
+  geometry.setAttribute("position", new Float32BufferAttribute2(position, 3));
+  geometry.setAttribute("aPerp", new Float32BufferAttribute2(perp, 3));
+  geometry.setAttribute("aSide", new Float32BufferAttribute2(side, 1));
+  geometry.setAttribute("aReach", new Float32BufferAttribute2(reach, 1));
+  geometry.setAttribute("aCorner", new Float32BufferAttribute2(owner, 1));
+  geometry.setIndex(new BufferAttribute(new Uint32Array(index), 1));
+  return geometry;
+}
+var SHARP_CORNER_RENDER_ORDER = { depth: 6.25, near: 6.5, far: 6.75 };
+var SHARP_CORNER_STENCIL_BIT = 128;
+var BAND_VERTEX = (
+  /* glsl */
+  `
+  #include <common>
+  #include <clipping_planes_pars_vertex>
+
+  attribute vec3 aPerp;
+  attribute float aSide;
+  attribute float aReach;
+  attribute float aCorner;
+  uniform float uHalfWidth;
+  uniform float uHovered;
+  uniform vec2 uResolution;
+  varying float vHovered;
+
+  void main() {
+    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
+    vec3 across = mat3(modelViewMatrix) * aPerp;
+    float reach = aReach * length(across);
+    across = normalize(across);
+
+    bool perspective = projectionMatrix[2][3] == -1.0;
+    float pixel = 2.0 / (projectionMatrix[1][1] * uResolution.y);
+    if (perspective) pixel *= -mvPosition.z;
+    vec3 sight = perspective ? normalize(-mvPosition.xyz) : vec3(0.0, 0.0, 1.0);
+    float shown = length(across - sight * dot(across, sight));
+    vHovered = abs(aCorner - uHovered) < 0.5 ? 1.0 : 0.0;
+    float offset = min(uHalfWidth * pixel / max(shown, 0.25), reach);
+
+    mvPosition.xyz += across * offset * aSide;
+    gl_Position = projectionMatrix * mvPosition;
+    #include <clipping_planes_vertex>
+  }
+`
+);
+var BAND_FRAGMENT = (
+  /* glsl */
+  `
+  #include <common>
+  #include <clipping_planes_pars_fragment>
+
+  uniform vec3 diffuse;
+  uniform vec3 hoverColor;
+  uniform float opacity;
+  varying float vHovered;
+
+  void main() {
+    #include <clipping_planes_fragment>
+    // The corner under the pointer in the hover colour, as the part's faces are, not wider.
+    vec3 color = mix(diffuse, hoverColor, vHovered);
+    // And twice as strong: plain even where the part hides it.
+    gl_FragColor = vec4(color, min(1.0, opacity * mix(1.0, 2.0, vHovered)));
+    #include <colorspace_fragment>
+  }
+`
+);
+function createSharpCornerDrawing(theme, part) {
+  let geometry = new BufferGeometry();
+  const resolution = { value: new Vector22(1, 1) };
+  const hovered = { value: -1 };
+  const viewport = new Vector4();
+  const material = (opacity, depthFunc) => {
+    const band = new ShaderMaterial({
+      uniforms: {
+        diffuse: { value: new Color(theme.sharpCorner) },
+        hoverColor: { value: new Color(theme.hover) },
+        opacity: { value: opacity },
+        uHalfWidth: { value: BAND_WIDTH / 2 },
+        uHovered: hovered,
+        uResolution: resolution
+      },
+      vertexShader: BAND_VERTEX,
+      fragmentShader: BAND_FRAGMENT,
+      transparent: true,
+      depthWrite: false,
+      side: DoubleSide,
+      clipping: true
+    });
+    band.depthFunc = depthFunc;
+    band.polygonOffset = true;
+    band.polygonOffsetFactor = -1;
+    band.polygonOffsetUnits = -1;
+    band.stencilWrite = true;
+    band.stencilRef = SHARP_CORNER_STENCIL_BIT;
+    band.stencilFuncMask = SHARP_CORNER_STENCIL_BIT;
+    band.stencilWriteMask = SHARP_CORNER_STENCIL_BIT;
+    band.stencilFunc = NotEqualStencilFunc;
+    band.stencilFail = KeepStencilOp;
+    band.stencilZFail = KeepStencilOp;
+    band.stencilZPass = ReplaceStencilOp;
+    return band;
+  };
+  const nearMaterial = material(NEAR_OPACITY, LessEqualDepth);
+  const farMaterial = material(FAR_OPACITY, GreaterDepth);
+  const near = new Mesh(geometry, nearMaterial);
+  const far = new Mesh(geometry, farMaterial);
+  near.name = "sharpCornersNear";
+  far.name = "sharpCornersFar";
+  near.renderOrder = SHARP_CORNER_RENDER_ORDER.near;
+  far.renderOrder = SHARP_CORNER_RENDER_ORDER.far;
+  near.raycast = () => {
+  };
+  far.raycast = () => {
+  };
+  const depthMaterial = new MeshBasicMaterial({
+    colorWrite: false,
+    depthWrite: true,
+    transparent: true,
+    polygonOffset: true,
+    polygonOffsetFactor: 1,
+    polygonOffsetUnits: 1
+  });
+  const depth = new Mesh(part, depthMaterial);
+  depth.name = "sharpCornersDepth";
+  depth.renderOrder = SHARP_CORNER_RENDER_ORDER.depth;
+  depth.visible = false;
+  depth.raycast = () => {
+  };
+  near.onBeforeRender = (renderer) => {
+    renderer.getViewport(viewport);
+    resolution.value.set(viewport.z, viewport.w);
+  };
+  const object = new Group();
+  object.add(depth, far, near);
+  object.visible = false;
+  return {
+    object,
+    clear() {
+      object.visible = false;
+    },
+    setHovered(index) {
+      hovered.value = index ?? -1;
+    },
+    setCorners(creases, corners) {
+      hovered.value = -1;
+      object.visible = corners.length > 0;
+      if (corners.length === 0) return;
+      const next = sharpCornerBands(creases, corners);
+      near.geometry = next;
+      far.geometry = next;
+      geometry.dispose();
+      geometry = next;
+    },
+    setTheme(next) {
+      for (const band of [nearMaterial, farMaterial]) {
+        ;
+        band.uniforms["diffuse"].value.setHex(next.sharpCorner);
+        band.uniforms["hoverColor"].value.setHex(next.hover);
+      }
+    },
+    setPartDepth(on) {
+      depth.visible = on;
+    },
+    setClippingPlanes(planes) {
+      nearMaterial.clippingPlanes = planes;
+      farMaterial.clippingPlanes = planes;
+      depthMaterial.clippingPlanes = planes;
+    },
+    dispose() {
+      object.clear();
+      geometry.dispose();
+      nearMaterial.dispose();
+      farMaterial.dispose();
+      depthMaterial.dispose();
+    }
+  };
+}
+function unit2(vector) {
+  const length = Math.hypot(vector.x, vector.y, vector.z);
+  return length === 0 ? null : { x: vector.x / length, y: vector.y / length, z: vector.z / length };
+}
+function emptyCreases() {
+  return {
+    count: 0,
+    positions: new Float32Array(0),
+    angles: new Float32Array(0),
+    concave: new Uint8Array(0),
+    regions: new Int32Array(0),
+    fars: new Float32Array(0)
+  };
+}
+
 // src/render/part.ts
 var REGION_ATTRIBUTE = "aRegion";
 var EMISSIVE_MIX = 0.4;
@@ -959,7 +1510,7 @@ function buildRegionAttribute(model, texels, vertexCount) {
 function createPart(model, geometry, theme) {
   const position = geometry.getAttribute("position");
   const texels = buildRegionTexels(model);
-  const regionAttribute = new Float32BufferAttribute2(
+  const regionAttribute = new Float32BufferAttribute3(
     buildRegionAttribute(model, texels, position.count),
     1
   );
@@ -975,6 +1526,11 @@ function createPart(model, geometry, theme) {
   const wireframe = { value: false };
   let focused = false;
   let currentTheme = theme;
+  let clipping = null;
+  let creases = null;
+  let sharpLines = null;
+  let sharpKey = "";
+  let corners = [];
   const material = new MeshLambertMaterial({
     color: theme.part,
     emissive: theme.partEmissive,
@@ -1038,11 +1594,11 @@ function createPart(model, geometry, theme) {
     emissive: theme.partEmissive,
     // A selected face can be viewed through the part from the side its normal
     // faces away from.
-    side: DoubleSide
+    side: DoubleSide2
   });
   configureShader(focusMaterial, true);
   configureShader(material, false);
-  const mesh = new Mesh(geometry, material);
+  const mesh = new Mesh2(geometry, material);
   mesh.renderOrder = 3;
   const edgeGeometry = regionEdgesGeometry(geometry, model);
   const edgeMaterial = new LineBasicMaterial({
@@ -1054,7 +1610,7 @@ function createPart(model, geometry, theme) {
   edges.renderOrder = 4;
   edges.raycast = () => {
   };
-  const focusMesh = new Mesh(geometry, focusMaterial);
+  const focusMesh = new Mesh2(geometry, focusMaterial);
   focusMesh.renderOrder = 3;
   focusMesh.visible = false;
   focusMesh.raycast = () => {
@@ -1068,11 +1624,12 @@ function createPart(model, geometry, theme) {
     }
     focusState.value = focused;
     focusMesh.visible = focused;
+    sharpLines?.setPartDepth(transparent);
   };
-  const object = new Group();
+  const object = new Group2();
   object.add(focusMesh, mesh, edges);
-  const scratchColor = new Color();
-  const scratchVector = new Vector34();
+  const scratchColor = new Color2();
+  const scratchVector = new Vector35();
   const paintRegion = (region, color, weight) => {
     const column = texels.get(region);
     if (column === void 0) return;
@@ -1146,9 +1703,11 @@ function createPart(model, geometry, theme) {
     },
     setClippingPlanes(planes) {
       const value = planes === null ? null : [...planes];
+      clipping = value;
       material.clippingPlanes = value;
       focusMaterial.clippingPlanes = value;
       edgeMaterial.clippingPlanes = value;
+      sharpLines?.setClippingPlanes(value);
     },
     setTheme(next) {
       currentTheme = next;
@@ -1158,6 +1717,7 @@ function createPart(model, geometry, theme) {
       focusMaterial.emissive.setHex(next.partEmissive);
       edgeMaterial.color.setHex(wireframe.value ? next.part : next.edge);
       edgeMaterial.opacity = wireframe.value ? 1 : next.edgeOpacity;
+      sharpLines?.setTheme(next);
     },
     setDisplay(display, showEdges = true) {
       const enabled = display === "wireframe";
@@ -1169,6 +1729,35 @@ function createPart(model, geometry, theme) {
       edgeMaterial.color.setHex(enabled ? currentTheme.part : currentTheme.edge);
       edgeMaterial.opacity = enabled ? 1 : currentTheme.edgeOpacity;
     },
+    setSharpCorners(options) {
+      const key = options === null ? "" : sharpCornerKey(options);
+      if (key === sharpKey) return;
+      sharpKey = key;
+      if (options === null || options.features.length === 0) {
+        corners = [];
+        sharpLines?.clear();
+        return;
+      }
+      creases ??= surfaceCreases(geometry, model);
+      if (!sharpLines) {
+        sharpLines = createSharpCornerDrawing(currentTheme, geometry);
+        sharpLines.setClippingPlanes(clipping);
+        sharpLines.setPartDepth(wireframe.value || focused);
+        object.add(sharpLines.object);
+      }
+      corners = findSharpCorners(creases, model, options);
+      sharpLines.setCorners(creases, corners);
+    },
+    sharpCorners() {
+      return corners;
+    },
+    sharpCornerAt(hit, camera, viewport) {
+      if (!creases || corners.length === 0) return null;
+      return sharpCornerAt(corners, creases, hit, camera, viewport, mesh.matrixWorld);
+    },
+    setHoveredSharpCorner(index) {
+      sharpLines?.setHovered(index);
+    },
     dispose() {
       object.clear();
       if (geometry.getAttribute(REGION_ATTRIBUTE) === regionAttribute) {
@@ -1178,54 +1767,13 @@ function createPart(model, geometry, theme) {
       focusMaterial.dispose();
       edgeGeometry.dispose();
       edgeMaterial.dispose();
+      sharpLines?.dispose();
       stateTexture.dispose();
       opacityTexture.dispose();
     }
   };
 }
 
-// src/render/adjacency.ts
-var GRID = 1e-4;
-var keyFor = (x, y, z) => `${Math.round(x / GRID)},${Math.round(y / GRID)},${Math.round(z / GRID)}`;
-function regionAdjacency(model, geometry) {
-  const position = geometry.getAttribute("position");
-  const adjacency = /* @__PURE__ */ new Map();
-  if (!position) return adjacency;
-  const owner = new Int32Array(Math.floor(position.count / 3)).fill(-1);
-  for (const region of model.regions) {
-    for (let at = region.triangles.start; at < region.triangles.end; at++) {
-      if (at >= 0 && at < owner.length) owner[at] = region.idx;
-    }
-  }
-  const edges = /* @__PURE__ */ new Map();
-  const join = (a, b) => {
-    if (a === b) return;
-    const mine = adjacency.get(a) ?? /* @__PURE__ */ new Set();
-    mine.add(b);
-    adjacency.set(a, mine);
-    const theirs = adjacency.get(b) ?? /* @__PURE__ */ new Set();
-    theirs.add(a);
-    adjacency.set(b, theirs);
-  };
-  for (let triangle = 0; triangle < owner.length; triangle++) {
-    const region = owner[triangle];
-    if (region === -1) continue;
-    const corners = [0, 1, 2].map((corner) => {
-      const at = triangle * 3 + corner;
-      return keyFor(position.getX(at), position.getY(at), position.getZ(at));
-    });
-    for (let corner = 0; corner < 3; corner++) {
-      const from = corners[corner];
-      const to = corners[(corner + 1) % 3];
-      const edge = from < to ? `${from}|${to}` : `${to}|${from}`;
-      const seen = edges.get(edge);
-      if (seen === void 0) edges.set(edge, region);
-      else join(seen, region);
-    }
-  }
-  return adjacency;
-}
-
 // src/render/selection.ts
 var FEATURE_TYPE_RANKS = [
   ["blind_hole", "through_hole", "filleted_blind_hole"],
@@ -1337,7 +1885,7 @@ import {
   useMemo as useMemo4,
   useRef as useRef3
 } from "react";
-import { Box3 as Box33, Vector3 as Vector38 } from "three";
+import { Box3 as Box33, Vector3 as Vector39 } from "three";
 
 // src/camera.tsx
 import { useFrame, useThree as useThree2 } from "@react-three/fiber";
@@ -1353,9 +1901,9 @@ import {
   Raycaster,
   Sphere,
   Spherical,
-  Vector2 as Vector22,
-  Vector3 as Vector35,
-  Vector4
+  Vector2 as Vector23,
+  Vector3 as Vector36,
+  Vector4 as Vector42
 } from "three";
 
 // src/render/control-schemes.ts
@@ -1451,9 +1999,9 @@ CameraControls.install({
     Raycaster,
     Sphere,
     Spherical,
-    Vector2: Vector22,
-    Vector3: Vector35,
-    Vector4
+    Vector2: Vector23,
+    Vector3: Vector36,
+    Vector4: Vector42
   }
 });
 var EPSILON3 = 1e-6;
@@ -1475,9 +2023,9 @@ var ExtendedCameraControls = class extends CameraControls {
   // Scratch objects — `#onPointerMove` and `#adaptUpVector` run at pointer and
   // frame rate respectively, so neither may allocate.
   #spherical = new Spherical();
-  #scratchA = new Vector35();
-  #scratchB = new Vector35();
-  #scratchC = new Vector35();
+  #scratchA = new Vector36();
+  #scratchB = new Vector36();
+  #scratchC = new Vector36();
   constructor(camera, domElement, options = {}) {
     super(camera, domElement);
     this.#domElement = domElement;
@@ -1819,10 +2367,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 as DoubleSide2,
+  DoubleSide as DoubleSide3,
   RingGeometry,
   SphereGeometry,
-  Vector3 as Vector36
+  Vector3 as Vector37
 } from "three";
 
 // src/render/target.ts
@@ -1865,8 +2413,8 @@ var TargetMarker = ({ controlsRef }) => {
   const heldUntil = useRef2(0);
   const painted = useRef2(-1);
   const placed = useRef2(false);
-  const lastTarget = useMemo3(() => new Vector36(), []);
-  const scratch = useMemo3(() => new Vector36(), []);
+  const lastTarget = useMemo3(() => new Vector37(), []);
+  const scratch = useMemo3(() => new Vector37(), []);
   useEffect3(() => {
     const controls = controlsRef.current;
     if (!controls) return void 0;
@@ -1932,7 +2480,7 @@ var TargetMarker = ({ controlsRef }) => {
             opacity: 0,
             depthTest: false,
             depthWrite: false,
-            side: DoubleSide2
+            side: DoubleSide3
           }
         )
       }
@@ -1962,11 +2510,11 @@ var TargetMarker = ({ controlsRef }) => {
 
 // src/render/view-cube.ts
 import {
-  BufferGeometry,
+  BufferGeometry as BufferGeometry2,
   CanvasTexture,
-  Float32BufferAttribute as Float32BufferAttribute3,
+  Float32BufferAttribute as Float32BufferAttribute4,
   SRGBColorSpace,
-  Vector3 as Vector37
+  Vector3 as Vector38
 } from "three";
 var VIEW_NAMES = [
   // The six faces.
@@ -2050,12 +2598,12 @@ function viewUp(direction) {
   return { x: 0, y: 0, z: 1 };
 }
 function squaredUp(direction, currentUp) {
-  const forward = new Vector37(direction.x, direction.y, direction.z).normalize();
+  const forward = new Vector38(direction.x, direction.y, direction.z).normalize();
   const canonical = viewUp(direction);
-  const zero = new Vector37(canonical.x, canonical.y, canonical.z);
+  const zero = new Vector38(canonical.x, canonical.y, canonical.z);
   zero.addScaledVector(forward, -forward.dot(zero)).normalize();
-  const quarter = new Vector37().crossVectors(forward, zero);
-  const current = new Vector37(currentUp.x, currentUp.y, currentUp.z);
+  const quarter = new Vector38().crossVectors(forward, zero);
+  const current = new Vector38(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
@@ -2073,11 +2621,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 Vector37(direction.x, direction.y, direction.z);
+    const normal = new Vector38(direction.x, direction.y, direction.z);
     let polygon;
     if (kind === "face") {
       const up = viewUp(direction);
-      const upVector = new Vector37(up.x, up.y, up.z);
+      const upVector = new Vector38(up.x, up.y, up.z);
       const right = normal.clone().negate().cross(upVector).normalize();
       const square = [
         [-1, -1],
@@ -2099,7 +2647,7 @@ function cubeZones(chamfer = CHAMFER) {
         [chamfer, 1, -chamfer]
       ];
       polygon = rectangle.map(
-        ([onA, onB, onC]) => new Vector37().setComponent(a, sign(a) * onA).setComponent(b, sign(b) * onB).setComponent(c, onC)
+        ([onA, onB, onC]) => new Vector38().setComponent(a, sign(a) * onA).setComponent(b, sign(b) * onB).setComponent(c, onC)
       );
     } else {
       const triangle = [
@@ -2107,11 +2655,11 @@ function cubeZones(chamfer = CHAMFER) {
         [chamfer, 1, chamfer],
         [chamfer, chamfer, 1]
       ];
-      polygon = triangle.map(([onX, onY, onZ]) => new Vector37(sx * onX, sy * onY, sz * onZ));
+      polygon = triangle.map(([onX, onY, onZ]) => new Vector38(sx * onX, sy * onY, sz * onZ));
     }
     const [first, second, third] = polygon;
     if (first && second && third) {
-      const facing = new Vector37().subVectors(second, first).cross(new Vector37().subVectors(third, first));
+      const facing = new Vector38().subVectors(second, first).cross(new Vector38().subVectors(third, first));
       if (facing.dot(normal) < 0) polygon.reverse();
     }
     return { name, kind, direction, polygon: polygon.map(vec) };
@@ -2121,7 +2669,7 @@ function panelGeometry(zone) {
   const positions = [];
   const normals = [];
   const [first] = zone.polygon;
-  const geometry = new BufferGeometry();
+  const geometry = new BufferGeometry2();
   if (!first) return geometry;
   for (let index = 1; index + 1 < zone.polygon.length; index += 1) {
     const b = zone.polygon[index];
@@ -2132,8 +2680,8 @@ function panelGeometry(zone) {
       normals.push(zone.direction.x, zone.direction.y, zone.direction.z);
     }
   }
-  geometry.setAttribute("position", new Float32BufferAttribute3(positions, 3));
-  geometry.setAttribute("normal", new Float32BufferAttribute3(normals, 3));
+  geometry.setAttribute("position", new Float32BufferAttribute4(positions, 3));
+  geometry.setAttribute("normal", new Float32BufferAttribute4(normals, 3));
   return geometry;
 }
 function cubeOutlineGeometry(zones) {
@@ -2146,8 +2694,8 @@ function cubeOutlineGeometry(zones) {
       positions.push(from.x, from.y, from.z, to.x, to.y, to.z);
     }
   }
-  const geometry = new BufferGeometry();
-  geometry.setAttribute("position", new Float32BufferAttribute3(positions, 3));
+  const geometry = new BufferGeometry2();
+  geometry.setAttribute("position", new Float32BufferAttribute4(positions, 3));
   return geometry;
 }
 function labelGeometry(zone) {
@@ -2171,9 +2719,9 @@ function labelGeometry(zone) {
     );
     uvs.push(uv[0] ?? 0, uv[1] ?? 0);
   }
-  const geometry = new BufferGeometry();
-  geometry.setAttribute("position", new Float32BufferAttribute3(positions, 3));
-  geometry.setAttribute("uv", new Float32BufferAttribute3(uvs, 2));
+  const geometry = new BufferGeometry2();
+  geometry.setAttribute("position", new Float32BufferAttribute4(positions, 3));
+  geometry.setAttribute("uv", new Float32BufferAttribute4(uvs, 2));
   return geometry;
 }
 function labelTexture(label, color) {
@@ -2241,10 +2789,10 @@ var ViewerScene = ({
   const framedRef = useRef3(null);
   const scratchBox = useMemo4(() => new Box33(), []);
   const scratchBoundary = useMemo4(() => new Box33(), []);
-  const scratchDirection = useMemo4(() => new Vector38(), []);
-  const scratchView = useMemo4(() => new Vector38(), []);
-  const scratchTarget = useMemo4(() => new Vector38(), []);
-  const scratchPosition = useMemo4(() => new Vector38(), []);
+  const scratchDirection = useMemo4(() => new Vector39(), []);
+  const scratchView = useMemo4(() => new Vector39(), []);
+  const scratchTarget = useMemo4(() => new Vector39(), []);
+  const scratchPosition = useMemo4(() => new Vector39(), []);
   const applyLimits = useCallback(
     (bounds, framed) => {
       controlsRef.current?.applyLimits(
@@ -2293,8 +2841,8 @@ var ViewerScene = ({
     (bounds) => {
       const controls = controlsRef.current;
       if (!controls) return false;
-      const target = controls.getTarget(new Vector38());
-      const direction = currentViewDirection(camera, target, new Vector38());
+      const target = controls.getTarget(new Vector39());
+      const direction = currentViewDirection(camera, target, new Vector39());
       const distance = fitDistance(projection, size, bounds, DEFAULT_FIT_MARGIN);
       const position = direction.multiplyScalar(distance).add(bounds.center);
       void controls.setLookAt(
@@ -2319,8 +2867,8 @@ var ViewerScene = ({
   const fitContent = useCallback(() => {
     const controls = controlsRef.current;
     if (!controls) return false;
-    const target = controls.getTarget(new Vector38());
-    return frame(currentViewDirection(camera, target, new Vector38()), true);
+    const target = controls.getTarget(new Vector39());
+    return frame(currentViewDirection(camera, target, new Vector39()), true);
   }, [camera, frame]);
   const resetContent = useCallback(() => {
     const bounds = measure();
@@ -2526,67 +3074,234 @@ var Viewer = forwardRef(function Viewer2({
 });
 
 // src/section-view.tsx
-import { useFrame as useFrame4, useThree as useThree5 } from "@react-three/fiber";
-import { useCallback as useCallback2, useEffect as useEffect5, useLayoutEffect, useMemo as useMemo5, useRef as useRef4, useState } from "react";
+import { useFrame as useFrame4, useThree as useThree6 } from "@react-three/fiber";
+import { useCallback as useCallback2, useEffect as useEffect6, useLayoutEffect as useLayoutEffect2, useMemo as useMemo6, useRef as useRef4, useState } from "react";
 import {
-  Color as Color3,
-  DoubleSide as DoubleSide4,
+  Color as Color5,
+  DoubleSide as DoubleSide5,
   EdgesGeometry,
-  Mesh as Mesh3,
+  Mesh as Mesh4,
   Plane as Plane2,
   PlaneGeometry,
   Quaternion as Quaternion2,
   Raycaster as Raycaster2,
   Scene,
-  Vector2 as Vector24,
-  Vector3 as Vector310
+  Vector2 as Vector26,
+  Vector3 as Vector311
 } from "three";
 
-// src/render/directions.ts
-import { Vector3 as Vector39 } from "three";
-var CONE_AXIS = new Vector39(0, 1, 0);
-var LENGTH = 0.45;
-var HEAD = 0.45;
-var HEAD_RADIUS = 0.3;
-var SHAFT_RADIUS = 0.09;
-var GAP = 0.2;
-function arrowPlacement(direction, box) {
-  const center = box.getCenter(new Vector39());
-  const half = box.getSize(new Vector39()).multiplyScalar(0.5);
-  const radius = half.length() || 1;
-  const axis = new Vector39(direction.x, direction.y, direction.z);
-  if (axis.lengthSq() === 0) axis.set(0, 0, 1);
-  axis.normalize();
-  let exit = Number.POSITIVE_INFINITY;
-  for (const [component, extent] of [
-    [axis.x, half.x],
-    [axis.y, half.y],
-    [axis.z, half.z]
-  ]) {
-    if (Math.abs(component) > 1e-6) exit = Math.min(exit, extent / Math.abs(component));
-  }
-  if (!Number.isFinite(exit)) exit = radius;
-  return { tip: center.addScaledVector(axis, exit + radius * GAP), length: radius * LENGTH };
+// src/arrow-mesh.tsx
+import { useThree as useThree5 } from "@react-three/fiber";
+import { useEffect as useEffect5, useLayoutEffect, useMemo as useMemo5 } from "react";
+
+// src/render/arrow-material.ts
+import { AlwaysDepth, Color as Color3, ShaderMaterial as ShaderMaterial2 } from "three";
+var VERTEX = (
+  /* glsl */
+  `
+varying vec3 vNormal;
+
+void main() {
+  vNormal = normalize(normalMatrix * normal);
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`
+);
+var FRAGMENT = (
+  /* glsl */
+  `
+uniform vec3 uColor;
+uniform float uOpacity;
+
+varying vec3 vNormal;
+
+// Above, to the left and toward the camera, in the camera's own frame.
+const vec3 KEY = vec3(-0.4, 0.6, 0.7);
+
+void main() {
+  // Wrapped, and over a narrow range: a quarter darker at most, so the shape
+  // shows without the colour going anywhere.
+  float light = mix(0.75, 1.0, 0.5 + 0.5 * dot(normalize(vNormal), normalize(KEY)));
+  gl_FragColor = vec4(uColor * light, uOpacity);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}
+`
+);
+function createArrowMaterial() {
+  const uniforms = {
+    uColor: { value: new Color3() },
+    uOpacity: { value: 1 }
+  };
+  return new ShaderMaterial2({
+    vertexShader: VERTEX,
+    fragmentShader: FRAGMENT,
+    uniforms,
+    transparent: true
+  });
+}
+function createArrowDepthMaterial() {
+  const material = createArrowMaterial();
+  material.colorWrite = false;
+  return material;
+}
+function applyArrowColor(material, color, opacity) {
+  material.uniforms.uColor.value.set(color);
+  material.uniforms.uOpacity.value = opacity;
+}
+var RESET_VERTEX = (
+  /* glsl */
+  `
+void main() {
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  // On the far plane, so what it leaves in the depth buffer is "nothing here".
+  gl_Position.z = gl_Position.w;
+}
+`
+);
+var RESET_FRAGMENT = (
+  /* glsl */
+  `
+void main() {
+  gl_FragColor = vec4(0.0);
+}
+`
+);
+function createDepthResetMaterial() {
+  return new ShaderMaterial2({
+    vertexShader: RESET_VERTEX,
+    fragmentShader: RESET_FRAGMENT,
+    transparent: true,
+    colorWrite: false,
+    depthFunc: AlwaysDepth
+  });
+}
+
+// src/arrow-mesh.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var ArrowMesh = ({ geometry, color, opacity, onTop = false, events }) => {
+  const invalidate = useThree5((state) => state.invalidate);
+  const material = useMemo5(() => createArrowMaterial(), []);
+  useEffect5(() => () => material.dispose(), [material]);
+  const depth = useMemo5(() => createArrowDepthMaterial(), []);
+  useEffect5(() => () => depth.dispose(), [depth]);
+  const reset = useMemo5(() => onTop ? createDepthResetMaterial() : null, [onTop]);
+  useEffect5(() => () => reset?.dispose(), [reset]);
+  useLayoutEffect(() => {
+    applyArrowColor(material, color, opacity);
+    invalidate();
+  }, [color, invalidate, material, opacity]);
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    reset ? /* @__PURE__ */ jsx4("mesh", { geometry, material: reset, renderOrder: 0, raycast: () => null }) : null,
+    /* @__PURE__ */ jsx4("mesh", { geometry, material: depth, renderOrder: 1, raycast: () => null }),
+    /* @__PURE__ */ jsx4("mesh", { geometry, material, renderOrder: 2, ...events })
+  ] });
+};
+
+// src/render/arrow.ts
+import { LatheGeometry, Vector2 as Vector24, Vector3 as Vector310 } from "three";
+var ARROW_AXIS2 = new Vector310(0, 1, 0);
+var ARROW_ROUND = 32;
+var HEAD_LENGTH = 0.415;
+var HEAD_RADIUS = 0.153;
+var SHAFT_RADIUS = 0.0515;
+var HANDLE_TIP = 0.76;
+var HANDLE_HEAD_LENGTH = 0.3;
+var HANDLE_HEAD_RADIUS = 0.14;
+var HANDLE_SHAFT_RADIUS = 0.035;
+var HANDLE_BEAD_RADIUS = 0.1;
+var RIM_ROUND = 6e-3;
+var NECK_ROUND = 8e-3;
+var BEAD_ROUND = 0.02;
+var ROUND_STEPS = 4;
+var CAP_STEPS = 6;
+var BEAD_STEPS = 12;
+var head = ({ length, radius, shaft }) => [
+  { at: new Vector24(0, 0) },
+  { at: new Vector24(radius, length), round: RIM_ROUND },
+  { at: new Vector24(shaft, length), round: NECK_ROUND }
+];
+var rounded = (corners) => corners.flatMap(({ at, round = 0 }, index) => {
+  const before = corners[index - 1]?.at;
+  const after = corners[index + 1]?.at;
+  if (!(round > 0) || !before || !after) return [at];
+  const back = before.clone().sub(at);
+  const ahead = after.clone().sub(at);
+  const reach = Math.min(back.length(), ahead.length()) / 2;
+  back.normalize();
+  ahead.normalize();
+  const angle = Math.acos(Math.min(Math.max(back.dot(ahead), -1), 1));
+  if (angle > Math.PI - 1e-6 || angle < 1e-6) return [at];
+  const half = angle / 2;
+  const offset = Math.min(round / Math.tan(half), reach);
+  const radius = offset * Math.tan(half);
+  const centre = at.clone().addScaledVector(back.clone().add(ahead).normalize(), radius / Math.sin(half));
+  const from = at.clone().addScaledVector(back, offset).sub(centre);
+  const to = at.clone().addScaledVector(ahead, offset).sub(centre);
+  const start = Math.atan2(from.y, from.x);
+  let sweep = Math.atan2(to.y, to.x) - start;
+  if (sweep > Math.PI) sweep -= Math.PI * 2;
+  if (sweep < -Math.PI) sweep += Math.PI * 2;
+  return Array.from({ length: ROUND_STEPS + 1 }, (_, step) => {
+    const turn = start + sweep * step / ROUND_STEPS;
+    return new Vector24(centre.x + Math.cos(turn) * radius, centre.y + Math.sin(turn) * radius);
+  });
+});
+function arrowProfile() {
+  const body = rounded([
+    ...head({ length: HEAD_LENGTH, radius: HEAD_RADIUS, shaft: SHAFT_RADIUS }),
+    { at: new Vector24(SHAFT_RADIUS, 1 - SHAFT_RADIUS) }
+  ]);
+  const tail = Array.from({ length: CAP_STEPS }, (_, step) => {
+    const turn = (step + 1) / CAP_STEPS * (Math.PI / 2);
+    return new Vector24(
+      step + 1 === CAP_STEPS ? 0 : Math.cos(turn) * SHAFT_RADIUS,
+      1 - SHAFT_RADIUS + Math.sin(turn) * SHAFT_RADIUS
+    );
+  });
+  return [...body, ...tail];
+}
+function handleProfile() {
+  const lower = head({
+    length: HANDLE_HEAD_LENGTH,
+    radius: HANDLE_HEAD_RADIUS,
+    shaft: HANDLE_SHAFT_RADIUS
+  }).map(({ at, round }) => ({ at: new Vector24(at.x, at.y - HANDLE_TIP), round }));
+  const upper = lower.slice().reverse().map(({ at, round }) => ({ at: new Vector24(at.x, -at.y), round }));
+  const meet = Math.acos(HANDLE_SHAFT_RADIUS / HANDLE_BEAD_RADIUS);
+  const bead = Array.from({ length: BEAD_STEPS + 1 }, (_, step) => {
+    const turn = -meet + 2 * meet * step / BEAD_STEPS;
+    const at = new Vector24(Math.cos(turn), Math.sin(turn)).multiplyScalar(HANDLE_BEAD_RADIUS);
+    return { at, round: step === 0 || step === BEAD_STEPS ? BEAD_ROUND : 0 };
+  });
+  return rounded([...lower, ...bead, ...upper]);
 }
+var turned = (profile) => {
+  const geometry = new LatheGeometry(profile, ARROW_ROUND);
+  geometry.normalizeNormals();
+  return geometry;
+};
+var arrowGeometry = () => turned(arrowProfile());
+var handleGeometry = () => turned(handleProfile());
 
 // src/render/section-cap.ts
 import {
   AlwaysStencilFunc,
   BackSide,
-  Color as Color2,
+  Color as Color4,
   DecrementWrapStencilOp,
-  DoubleSide as DoubleSide3,
+  DoubleSide as DoubleSide4,
   FrontSide,
   IncrementWrapStencilOp,
   LinearFilter,
-  MeshBasicMaterial as MeshBasicMaterial2,
-  NotEqualStencilFunc,
-  ReplaceStencilOp,
-  ShaderMaterial,
-  Vector2 as Vector23,
+  MeshBasicMaterial as MeshBasicMaterial3,
+  NotEqualStencilFunc as NotEqualStencilFunc2,
+  ReplaceStencilOp as ReplaceStencilOp2,
+  ShaderMaterial as ShaderMaterial3,
+  Vector2 as Vector25,
   WebGLRenderTarget
 } from "three";
-var VERTEX = (
+var VERTEX2 = (
   /* glsl */
   `
 void main() {
@@ -2594,7 +3309,7 @@ void main() {
 }
 `
 );
-var FRAGMENT = (
+var FRAGMENT2 = (
   /* glsl */
   `
 uniform sampler2D uMask;
@@ -2642,25 +3357,25 @@ function createMaskTarget() {
 function createCapMaterial(mask) {
   const uniforms = {
     uMask: { value: mask },
-    uResolution: { value: new Vector23(1, 1) },
-    uFill: { value: new Color2() },
-    uHatch: { value: new Color2() },
-    uOutline: { value: new Color2() },
+    uResolution: { value: new Vector25(1, 1) },
+    uFill: { value: new Color4() },
+    uHatch: { value: new Color4() },
+    uOutline: { value: new Color4() },
     uPitch: { value: CAP_HATCH.pitch },
     uLine: { value: CAP_HATCH.line },
     uThickness: { value: CAP_HATCH.outline }
   };
-  return new ShaderMaterial({
-    vertexShader: VERTEX,
-    fragmentShader: FRAGMENT,
+  return new ShaderMaterial3({
+    vertexShader: VERTEX2,
+    fragmentShader: FRAGMENT2,
     uniforms,
-    side: DoubleSide3,
+    side: DoubleSide4,
     stencilWrite: true,
     stencilRef: 0,
-    stencilFunc: NotEqualStencilFunc,
-    stencilFail: ReplaceStencilOp,
-    stencilZFail: ReplaceStencilOp,
-    stencilZPass: ReplaceStencilOp
+    stencilFunc: NotEqualStencilFunc2,
+    stencilFail: ReplaceStencilOp2,
+    stencilZFail: ReplaceStencilOp2,
+    stencilZPass: ReplaceStencilOp2
   });
 }
 function applyCapTheme(material, theme, dpr) {
@@ -2681,14 +3396,14 @@ function createStencilMaterials(clip) {
     clippingPlanes: clip
   };
   return [
-    new MeshBasicMaterial2({
+    new MeshBasicMaterial3({
       ...shared,
       side: BackSide,
       stencilFail: IncrementWrapStencilOp,
       stencilZFail: IncrementWrapStencilOp,
       stencilZPass: IncrementWrapStencilOp
     }),
-    new MeshBasicMaterial2({
+    new MeshBasicMaterial3({
       ...shared,
       side: FrontSide,
       stencilFail: DecrementWrapStencilOp,
@@ -2698,25 +3413,25 @@ function createStencilMaterials(clip) {
   ];
 }
 function createMaskMaterial() {
-  return new MeshBasicMaterial2({
+  return new MeshBasicMaterial3({
     color: 16777215,
-    side: DoubleSide3,
+    side: DoubleSide4,
     stencilWrite: true,
     stencilRef: 0,
-    stencilFunc: NotEqualStencilFunc,
-    stencilFail: ReplaceStencilOp,
-    stencilZFail: ReplaceStencilOp,
-    stencilZPass: ReplaceStencilOp
+    stencilFunc: NotEqualStencilFunc2,
+    stencilFail: ReplaceStencilOp2,
+    stencilZFail: ReplaceStencilOp2,
+    stencilZPass: ReplaceStencilOp2
   });
 }
 
 // src/section-view.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var FURNITURE2 = { [EXCLUDE_FROM_FRAME]: true };
 function resolveSectionPlane(options, box) {
   if (!options?.enabled || box.isEmpty()) return null;
   const normal = options.plane?.normal ?? options.normal ?? DEFAULT_SECTION_NORMAL;
-  const axis = new Vector310(normal.x, normal.y, normal.z);
+  const axis = new Vector311(normal.x, normal.y, normal.z);
   if (axis.lengthSq() === 0) axis.set(0, 0, 1);
   axis.normalize();
   const bounds = sectionBounds(box, normal);
@@ -2737,7 +3452,7 @@ function resolveSectionPlane(options, box) {
     }
   };
 }
-var Z = new Vector310(0, 0, 1);
+var Z = new Vector311(0, 0, 1);
 var SectionView = ({
   geometry,
   box,
@@ -2747,67 +3462,69 @@ var SectionView = ({
   showHandle,
   onDrag
 }) => {
-  const camera = useThree5((state) => state.camera);
-  const size = useThree5((state) => state.size);
-  const dpr = useThree5((state) => state.viewport.dpr);
-  const gl = useThree5((state) => state.gl);
-  const invalidate = useThree5((state) => state.invalidate);
-  const controls = useThree5((state) => state.controls);
-  const domElement = useThree5((state) => state.gl.domElement);
+  const camera = useThree6((state) => state.camera);
+  const size = useThree6((state) => state.size);
+  const dpr = useThree6((state) => state.viewport.dpr);
+  const gl = useThree6((state) => state.gl);
+  const invalidate = useThree6((state) => state.invalidate);
+  const controls = useThree6((state) => state.controls);
+  const domElement = useThree6((state) => state.gl.domElement);
   const handleRef = useRef4(null);
   const [hovered, setHovered] = useState(false);
   const dragging = useRef4(null);
-  const span = useMemo5(() => box.getSize(new Vector310()).length(), [box]);
+  const span = useMemo6(() => box.getSize(new Vector311()).length(), [box]);
   const frameSize = span * SECTION_GIZMO_FRAME_SCALE;
-  const directionColor2 = useMemo5(() => sectionDirectionColor(plane.normal), [plane]);
+  const directionColor2 = useMemo6(() => sectionDirectionColor(plane.normal), [plane]);
   const resolvedHandleColor = sectionHandleColor(handleColor, directionColor2);
-  const clip = useMemo5(() => [plane], [plane]);
-  const capPosition = useMemo5(() => sectionAnchor(box, plane), [box, plane]);
-  const capQuaternion = useMemo5(() => new Quaternion2().setFromUnitVectors(Z, plane.normal), [plane]);
-  const handleQuaternion = useMemo5(
-    () => new Quaternion2().setFromUnitVectors(CONE_AXIS, plane.normal.clone().negate()),
+  const clip = useMemo6(() => [plane], [plane]);
+  const capPosition = useMemo6(() => sectionAnchor(box, plane), [box, plane]);
+  const capQuaternion = useMemo6(() => new Quaternion2().setFromUnitVectors(Z, plane.normal), [plane]);
+  const handleQuaternion = useMemo6(
+    () => new Quaternion2().setFromUnitVectors(ARROW_AXIS2, plane.normal.clone().negate()),
     [plane]
   );
-  const frameSurface = useMemo5(() => new PlaneGeometry(frameSize, frameSize), [frameSize]);
-  useEffect5(() => () => frameSurface.dispose(), [frameSurface]);
-  const frameEdges = useMemo5(() => new EdgesGeometry(frameSurface), [frameSurface]);
-  useEffect5(() => () => frameEdges.dispose(), [frameEdges]);
-  const stencils = useMemo5(() => createStencilMaterials([]), []);
-  useEffect5(() => () => stencils.forEach((material) => material.dispose()), [stencils]);
-  useLayoutEffect(() => {
+  const frameSurface = useMemo6(() => new PlaneGeometry(frameSize, frameSize), [frameSize]);
+  useEffect6(() => () => frameSurface.dispose(), [frameSurface]);
+  const frameEdges = useMemo6(() => new EdgesGeometry(frameSurface), [frameSurface]);
+  useEffect6(() => () => frameEdges.dispose(), [frameEdges]);
+  const handleShape = useMemo6(() => handleGeometry(), []);
+  useEffect6(() => () => handleShape.dispose(), [handleShape]);
+  const stencils = useMemo6(() => createStencilMaterials([]), []);
+  useEffect6(() => () => stencils.forEach((material) => material.dispose()), [stencils]);
+  useLayoutEffect2(() => {
     for (const material of stencils) material.clippingPlanes = clip;
   }, [clip, stencils]);
-  const mask = useMemo5(() => createMaskTarget(), []);
-  useEffect5(() => () => mask.dispose(), [mask]);
-  const cap = useMemo5(() => createCapMaterial(mask.texture), [mask]);
-  useEffect5(() => () => cap.dispose(), [cap]);
-  const quad = useMemo5(() => new PlaneGeometry(span * 1.5, span * 1.5), [span]);
-  useEffect5(() => () => quad.dispose(), [quad]);
-  const maskScene = useMemo5(() => {
+  const mask = useMemo6(() => createMaskTarget(), []);
+  useEffect6(() => () => mask.dispose(), [mask]);
+  const cap = useMemo6(() => createCapMaterial(mask.texture), [mask]);
+  useEffect6(() => () => cap.dispose(), [cap]);
+  const quad = useMemo6(() => new PlaneGeometry(span * 1.5, span * 1.5), [span]);
+  useEffect6(() => () => quad.dispose(), [quad]);
+  const maskScene = useMemo6(() => {
     const scene = new Scene();
     const [back, front] = stencils;
-    const backMesh = new Mesh3(geometry, back);
+    const backMesh = new Mesh4(geometry, back);
     backMesh.renderOrder = SECTION_RENDER_ORDER.stencil;
-    const frontMesh = new Mesh3(geometry, front);
+    const frontMesh = new Mesh4(geometry, front);
     frontMesh.renderOrder = SECTION_RENDER_ORDER.stencil;
-    const maskMesh = new Mesh3(quad, createMaskMaterial());
+    const maskMesh = new Mesh4(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(() => {
+  useEffect6(() => () => maskScene.maskMesh.material.dispose(), [maskScene]);
+  useEffect6(() => {
     maskScene.maskMesh.position.copy(capPosition);
     maskScene.maskMesh.quaternion.copy(capQuaternion);
   }, [capPosition, capQuaternion, maskScene]);
-  useLayoutEffect(() => {
-    const buffer = gl.getDrawingBufferSize(new Vector24());
+  useLayoutEffect2(() => {
+    const buffer = gl.getDrawingBufferSize(new Vector26());
     mask.setSize(buffer.x, buffer.y);
     cap.uniforms.uResolution.value.copy(buffer);
     applyCapTheme(cap, theme, dpr);
     invalidate();
   }, [cap, dpr, gl, invalidate, mask, size, theme]);
-  const clearColor = useMemo5(() => new Color3(), []);
+  const clearColor = useMemo6(() => new Color5(), []);
   useFrame4(({ gl: renderer, camera: eye }) => {
     const previousAlpha = renderer.getClearAlpha();
     renderer.getClearColor(clearColor);
@@ -2839,7 +3556,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 Vector310());
+    const hit = event.ray.intersectPlane(surface, new Vector311());
     const start = {
       plane: surface,
       from: hit ? hit.dot(plane.normal) : 0,
@@ -2848,7 +3565,7 @@ var SectionView = ({
     dragging.current = start;
     setControlsEnabled(false);
     const raycaster = new Raycaster2();
-    const pointer = new Vector24();
+    const pointer = new Vector26();
     const move = (native) => {
       const rect = domElement.getBoundingClientRect();
       pointer.set(
@@ -2856,7 +3573,7 @@ var SectionView = ({
         -((native.clientY - rect.top) / rect.height) * 2 + 1
       );
       raycaster.setFromCamera(pointer, camera);
-      const point = raycaster.ray.intersectPlane(start.plane, new Vector310());
+      const point = raycaster.ray.intersectPlane(start.plane, new Vector311());
       if (!point) return;
       onDrag(start.constant - (point.dot(plane.normal) - start.from));
       invalidate();
@@ -2888,8 +3605,8 @@ var SectionView = ({
     // Excluded from framing, all of it. The cap is a quad half again as wide as
     // the part's diagonal, so a Fit that measured it would frame the cut rather
     // than the part and leave the part a speck in the middle of it.
-    /* @__PURE__ */ jsxs3("group", { userData: FURNITURE2, children: [
-      /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsxs4("group", { userData: FURNITURE2, children: [
+      /* @__PURE__ */ jsx5(
         "mesh",
         {
           geometry,
@@ -2898,7 +3615,7 @@ var SectionView = ({
           raycast: () => null
         }
       ),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         "mesh",
         {
           geometry,
@@ -2907,7 +3624,7 @@ var SectionView = ({
           raycast: () => null
         }
       ),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         "mesh",
         {
           geometry: quad,
@@ -2918,78 +3635,46 @@ var SectionView = ({
           raycast: () => null
         }
       ),
-      showHandle && onDrag ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-        /* @__PURE__ */ jsxs3(
+      showHandle && onDrag ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+        /* @__PURE__ */ jsxs4(
           "group",
           {
             position: capPosition,
             quaternion: capQuaternion,
             renderOrder: SECTION_RENDER_ORDER.outline,
             children: [
-              /* @__PURE__ */ jsx4("mesh", { geometry: frameSurface, raycast: () => null, children: /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx5("mesh", { geometry: frameSurface, raycast: () => null, children: /* @__PURE__ */ jsx5(
                 "meshBasicMaterial",
                 {
                   color: directionColor2,
                   transparent: true,
                   opacity: 0.18,
-                  side: DoubleSide4,
+                  side: DoubleSide5,
                   depthTest: false,
                   depthWrite: false
                 }
               ) }),
-              /* @__PURE__ */ jsx4("lineSegments", { geometry: frameEdges, raycast: () => null, children: /* @__PURE__ */ jsx4("lineBasicMaterial", { color: directionColor2, depthTest: false, depthWrite: false }) })
+              /* @__PURE__ */ jsx5("lineSegments", { geometry: frameEdges, raycast: () => null, children: /* @__PURE__ */ jsx5("lineBasicMaterial", { color: directionColor2, depthTest: false, depthWrite: false }) })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsx5(
           "group",
           {
             ref: handleRef,
             position: capPosition,
             quaternion: handleQuaternion,
             renderOrder: SECTION_RENDER_ORDER.handle,
-            children: [
-              /* @__PURE__ */ jsxs3("mesh", { ...grab, children: [
-                /* @__PURE__ */ jsx4("sphereGeometry", { args: [0.1, 16, 12] }),
-                /* @__PURE__ */ jsx4(
-                  "meshBasicMaterial",
-                  {
-                    color: hovered ? theme.hover : resolvedHandleColor,
-                    depthTest: false
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs3("mesh", { ...grab, children: [
-                /* @__PURE__ */ jsx4("cylinderGeometry", { args: [0.035, 0.035, 0.9, 12] }),
-                /* @__PURE__ */ jsx4(
-                  "meshBasicMaterial",
-                  {
-                    color: hovered ? theme.hover : resolvedHandleColor,
-                    depthTest: false
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs3("mesh", { position: [0, 0.61, 0], ...grab, children: [
-                /* @__PURE__ */ jsx4("coneGeometry", { args: [0.15, 0.3, 20] }),
-                /* @__PURE__ */ jsx4(
-                  "meshBasicMaterial",
-                  {
-                    color: hovered ? theme.hover : resolvedHandleColor,
-                    depthTest: false
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs3("mesh", { position: [0, -0.61, 0], rotation: [Math.PI, 0, 0], ...grab, children: [
-                /* @__PURE__ */ jsx4("coneGeometry", { args: [0.15, 0.3, 20] }),
-                /* @__PURE__ */ jsx4(
-                  "meshBasicMaterial",
-                  {
-                    color: hovered ? theme.hover : resolvedHandleColor,
-                    depthTest: false
-                  }
-                )
-              ] })
-            ]
+            children: /* @__PURE__ */ jsx5(
+              ArrowMesh,
+              {
+                geometry: handleShape,
+                color: hovered ? theme.hover : resolvedHandleColor,
+                opacity: 1,
+                onTop: true,
+                events: grab
+              }
+            )
           }
         )
       ] }) : null
@@ -2998,11 +3683,11 @@ var SectionView = ({
 };
 
 // src/content-box.ts
-import { useFrame as useFrame5, useThree as useThree6 } from "@react-three/fiber";
+import { useFrame as useFrame5, useThree as useThree7 } from "@react-three/fiber";
 import { useRef as useRef5, useState as useState2 } from "react";
 import { Box3 as Box34 } from "three";
 function useContentBox() {
-  const scene = useThree6((state) => state.scene);
+  const scene = useThree7((state) => state.scene);
   const [box, setBox] = useState2(() => new Box34());
   const measured = useRef5(false);
   useFrame5(() => {
@@ -3017,7 +3702,7 @@ function useContentBox() {
 }
 
 // src/part-mesh.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var PartMesh = ({
   model,
   geometry,
@@ -3038,17 +3723,19 @@ var PartMesh = ({
   onPick,
   theme,
   showEdges = true,
+  sharpCorners = null,
   display = "solid",
   children
 }) => {
-  const { camera, controls, invalidate } = useThree7();
-  const context = useMemo6(() => ({ model, geometry }), [model, geometry]);
+  const { camera, controls, invalidate, size } = useThree8();
+  const context = useMemo7(() => ({ model, geometry }), [model, geometry]);
   const viewerControls = useViewerControls();
   const resolved = useStableTheme(theme);
   const currentTheme = useRef6(resolved);
   currentTheme.current = resolved;
-  const part = useMemo6(() => createPart(model, geometry, currentTheme.current), [geometry, model]);
+  const part = useMemo7(() => createPart(model, geometry, currentTheme.current), [geometry, model]);
   const hoverRegion = useRef6(null);
+  const hoverCorner = useRef6(null);
   const onHoverRef = useRef6(onHover);
   onHoverRef.current = onHover;
   const box = useContentBox();
@@ -3056,7 +3743,7 @@ var PartMesh = ({
   const shared = useSyncExternalStore(store.subscribe, store.get, store.get);
   const controlled = section !== void 0;
   const options = controlled ? section : shared ?? void 0;
-  const cut = useMemo6(() => resolveSectionPlane(options, box), [box, options]);
+  const cut = useMemo7(() => resolveSectionPlane(options, box), [box, options]);
   const engaged = useSyncExternalStore(store.subscribe, store.isEngaged, store.isEngaged);
   const pressedWhileEngaged = useRef6(false);
   const layers = useRef6({
@@ -3079,24 +3766,37 @@ var PartMesh = ({
     const { hoveredFeatureIds: hoveredFeatures, ...rest } = layers.current;
     applyHighlightLayers(
       part,
-      { ...rest, hoveredFeatures, hoverRegion: hoverRegion.current },
+      {
+        ...rest,
+        hoveredFeatures,
+        // On a corner the corner is what is hovered, in the hover colour; the
+        // face it lies on is not painted as if the pointer meant it.
+        hoverRegion: hoverCorner.current === null ? hoverRegion.current : null
+      },
       currentTheme.current
     );
     invalidate();
   }, [invalidate, part]);
-  useEffect6(() => () => part.dispose(), [part]);
-  const adjacency = useMemo6(() => regionAdjacency(model, geometry), [model, geometry]);
-  useEffect6(() => {
+  const dropHover = useCallback3(() => {
+    hoverRegion.current = null;
+    hoverCorner.current = null;
+    part.setHoveredSharpCorner(null);
+    repaint();
+    onHoverRef.current?.(null);
+  }, [part, repaint]);
+  useEffect7(() => () => part.dispose(), [part]);
+  const adjacency = useMemo7(() => regionAdjacency(model, geometry), [model, geometry]);
+  useEffect7(() => {
     onAdjacency?.(adjacency);
   }, [adjacency, onAdjacency]);
   const framed = useRef6(null);
-  useEffect6(() => {
+  useEffect7(() => {
     if (focusFeature === null || focusFeature === framed.current) return;
     framed.current = focusFeature;
     const box2 = part.boxForFeature(focusFeature);
     if (box2) viewerControls.frameBox(box2);
   }, [focusFeature, part, viewerControls]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     part.setTheme(resolved);
     repaint();
   }, [part, repaint, resolved]);
@@ -3105,20 +3805,28 @@ var PartMesh = ({
   const selectionRef = useRef6(selection);
   selectionRef.current = selection;
   const focusKey = focusStateKey(focus, selection);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     part.setFocus(selectionRef.current, focusRef.current);
     invalidate();
   }, [focusKey, invalidate, part]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     part.setDisplay(display, showEdges);
     invalidate();
   }, [display, invalidate, part, showEdges]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     part.setClippingPlanes(cut ? [cut.plane] : null);
     invalidate();
   }, [cut, invalidate, part]);
+  const sharpCornersRef = useRef6(sharpCorners);
+  sharpCornersRef.current = sharpCorners;
+  const sharpKey = sharpCorners ? sharpCornerKey(sharpCorners) : "";
+  useLayoutEffect3(() => {
+    part.setSharpCorners(sharpCornersRef.current);
+    if (hoverCorner.current !== null) dropHover();
+    invalidate();
+  }, [dropHover, invalidate, part, sharpKey]);
   const reportedSection = useRef6("");
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const state = cut?.state ?? null;
     const key = state ? `${state.constant}|${state.normal.x},${state.normal.y},${state.normal.z}` : "";
     if (key === reportedSection.current) return;
@@ -3135,12 +3843,12 @@ var PartMesh = ({
     highlights.map((entry) => `${entry.tag}:${entry.color}:${entry.weight ?? ""}`).join(" "),
     regionHighlights.map((entry) => `${entry.region}:${entry.color}:${entry.weight ?? ""}`).join(" ")
   ].join("|");
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     repaint();
   }, [layerKey, repaint]);
   const isTap = useTapGuard();
   const retarget = useRetarget();
-  const doubles = useMemo6(() => trackDoubleTaps(), []);
+  const doubles = useMemo7(() => trackDoubleTaps(), []);
   const pickFor = (event, doubled = false) => {
     const triangleIndex = event.faceIndex;
     if (triangleIndex == null) return null;
@@ -3149,7 +3857,7 @@ var PartMesh = ({
     const target = readTarget(controls);
     const normal = event.face?.normal ?? UP;
     const source = event.nativeEvent;
-    return buildPick({
+    const pick = buildPick({
       model,
       region,
       triangleIndex,
@@ -3167,26 +3875,27 @@ var PartMesh = ({
         secondary: "button" in source && source.button === 2
       }
     });
+    const corner = part.sharpCornerAt({ point: event.point, region }, camera, size);
+    return corner ? { ...pick, sharpCorner: corner } : pick;
   };
   const emitHover = (next) => {
     const region = next?.region ?? null;
-    if (hoverRegion.current === region) return;
+    const corner = next?.sharpCorner?.index ?? null;
+    if (hoverRegion.current === region && hoverCorner.current === corner) return;
     hoverRegion.current = region;
+    hoverCorner.current = corner;
+    part.setHoveredSharpCorner(corner);
     repaint();
     onHover?.(next);
   };
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (hover || hoverRegion.current === null) return;
-    hoverRegion.current = null;
-    repaint();
-    onHoverRef.current?.(null);
-  }, [hover, repaint]);
-  useLayoutEffect2(() => {
+    dropHover();
+  }, [dropHover, hover]);
+  useLayoutEffect3(() => {
     if (!engaged || hoverRegion.current === null) return;
-    hoverRegion.current = null;
-    repaint();
-    onHoverRef.current?.(null);
-  }, [engaged, repaint]);
+    dropHover();
+  }, [dropHover, engaged]);
   const dragSection = useCallback3(
     (constant) => {
       if (!cut) return;
@@ -3205,8 +3914,8 @@ var PartMesh = ({
     },
     [box, controlled, cut, onSectionChange, options, store]
   );
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    /* @__PURE__ */ jsx6(
       "primitive",
       {
         object: part.object,
@@ -3243,7 +3952,7 @@ var PartMesh = ({
         }
       }
     ),
-    cut ? /* @__PURE__ */ jsx5(
+    cut ? /* @__PURE__ */ jsx6(
       SectionView,
       {
         geometry,
@@ -3255,12 +3964,12 @@ var PartMesh = ({
         onDrag: !controlled || onSectionChange ? dragSection : void 0
       }
     ) : null,
-    children ? /* @__PURE__ */ jsx5(PartContext.Provider, { value: context, children }) : null
+    children ? /* @__PURE__ */ jsx6(PartContext.Provider, { value: context, children }) : null
   ] });
 };
-var ORIGIN = new Vector311();
-var UP = new Vector311(0, 0, 1);
-var TARGET = new Vector311();
+var ORIGIN = new Vector312();
+var UP = new Vector312(0, 0, 1);
+var TARGET = new Vector312();
 function readTarget(controls) {
   if (controls && typeof controls.getTarget === "function") {
     return controls.getTarget(TARGET);
@@ -3276,7 +3985,7 @@ function useStableTheme(theme) {
 }
 
 // src/engine/geometry.ts
-import { Matrix4 as Matrix42, Mesh as Mesh4 } from "three";
+import { Matrix4 as Matrix42, Mesh as Mesh5 } 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 {
@@ -3351,7 +4060,7 @@ function parseStl(data, mesh) {
 function singleMesh(scene) {
   const meshes = [];
   scene.traverse((object) => {
-    if (object instanceof Mesh4) meshes.push(object);
+    if (object instanceof Mesh5) meshes.push(object);
   });
   const [mesh] = meshes;
   if (mesh === void 0 || meshes.length !== 1) {
@@ -3387,7 +4096,7 @@ function assertCounts(geometry, expected) {
 }
 function disposeMaterials(scene) {
   scene.traverse((object) => {
-    if (!(object instanceof Mesh4)) return;
+    if (!(object instanceof Mesh5)) return;
     for (const material of Array.isArray(object.material) ? object.material : [object.material]) {
       material.dispose();
     }
@@ -3395,7 +4104,7 @@ function disposeMaterials(scene) {
 }
 
 // src/engine/normals.ts
-import { Float32BufferAttribute as Float32BufferAttribute4 } from "three";
+import { Float32BufferAttribute as Float32BufferAttribute5 } from "three";
 function smoothRegionNormals(geometry, regions) {
   const position = geometry.getAttribute("position");
   if (!position || geometry.index) return;
@@ -3461,7 +4170,7 @@ function smoothRegionNormals(geometry, regions) {
     normals[vertex * 3 + 1] = y / length;
     normals[vertex * 3 + 2] = z / length;
   }
-  geometry.setAttribute("normal", new Float32BufferAttribute4(normals, 3));
+  geometry.setAttribute("normal", new Float32BufferAttribute5(normals, 3));
 }
 
 // src/engine/geometry-cache.ts
@@ -3884,15 +4593,15 @@ function compareVersions(a, b) {
 }
 
 // src/engine/engine-part.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var EnginePart = ({ report, ...props }) => {
-  const model = useMemo7(() => normalizePartReport(report), [report]);
+  const model = useMemo8(() => normalizePartReport(report), [report]);
   const resource = useGeometryResource(model);
-  useEffect7(() => {
+  useEffect8(() => {
     engineGeometryCache.retain(resource);
     return () => engineGeometryCache.release(resource);
   }, [resource]);
-  return /* @__PURE__ */ jsx6(PartMesh, { model, geometry: resource.geometry, ...props });
+  return /* @__PURE__ */ jsx7(PartMesh, { model, geometry: resource.geometry, ...props });
 };
 function useGeometryResource(part) {
   const resource = engineGeometryCache.get(part);
@@ -4001,11 +4710,14 @@ export {
   useTapGuard,
   visualSurfaces,
   regionEdgesGeometry,
+  regionAdjacency,
+  surfaceCreases,
+  findSharpCorners,
+  sharpCornerPositions,
   REGION_ATTRIBUTE,
   buildRegionTexels,
   buildRegionAttribute,
   createPart,
-  regionAdjacency,
   FEATURE_TYPE_RANKS,
   featureTypeRank,
   rankOwners,
@@ -4045,11 +4757,9 @@ export {
   useSectionStore,
   useRetarget,
   Viewer,
-  CONE_AXIS,
-  HEAD,
-  HEAD_RADIUS,
-  SHAFT_RADIUS,
-  arrowPlacement,
+  ArrowMesh,
+  ARROW_AXIS2 as ARROW_AXIS,
+  arrowGeometry,
   createMaskTarget,
   createCapMaterial,
   applyCapTheme,