@toolpath/viewer 2.3.3 → 2.6.0

package/dist/index.js

@@ -106,6 +106,7 @@ import {
   formatMillimetres,
   groupByDirection,
   hitUnderRay,
+  ignoreRay,
   labelGeometry,
   labelTexture,
   lockToAxis,
@@ -163,7 +164,7 @@ import {
   viewUp,
   viewVector,
   visualSurfaces
-} from "./chunk-M2B3CQPQ.js";
+} from "./chunk-ESPHWO5M.js";
 
 // src/render/feature-triangles.ts
 var EMPTY = { positions: new Float32Array(), normals: new Float32Array() };
@@ -208,12 +209,771 @@ var winding = ([a, b, c]) => {
   return [u[1] * v[2] - u[2] * v[1], u[2] * v[0] - u[0] * v[2], u[0] * v[1] - u[1] * v[0]];
 };
 
+// src/model/explode-amount.ts
+var readExplodeAmount = (amount) => {
+  const value = typeof amount === "number" ? amount : amount.value;
+  return Number.isFinite(value) ? Math.max(0, Math.min(1, value)) : 0;
+};
+var createExplodeAmount = (initial = 0) => {
+  let value = readExplodeAmount(initial);
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    get value() {
+      return value;
+    },
+    set: (next) => {
+      next = readExplodeAmount(next);
+      if (next === value) {
+        return;
+      }
+      value = next;
+      for (const listener of listeners) {
+        listener();
+      }
+    },
+    subscribe: (listener) => {
+      const subscription = () => listener();
+      listeners.add(subscription);
+      return () => {
+        listeners.delete(subscription);
+      };
+    }
+  };
+};
+
+// src/exploded-part.tsx
+import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import {
+  DoubleSide as DoubleSide2,
+  Vector4
+} from "three";
+
+// src/render/explode-theme.ts
+var EXPLODE_DEFAULTS = {
+  ghost: 11913180,
+  ghostEdge: 10860497,
+  ghostEmissive: 0,
+  edge: 1582389,
+  edgeOpacity: 0.9,
+  selected: 16777215,
+  hovered: 16777215,
+  source: 16767619
+};
+var resolveExplodeTheme = (theme) => ({
+  ghost: theme?.part ?? EXPLODE_DEFAULTS.ghost,
+  ghostEdge: theme?.edge ?? EXPLODE_DEFAULTS.ghostEdge,
+  ghostEmissive: theme?.partEmissive ?? EXPLODE_DEFAULTS.ghostEmissive,
+  emissive: theme?.partEmissive ?? DEFAULT_THEME.partEmissive,
+  edge: theme?.edge ?? EXPLODE_DEFAULTS.edge,
+  edgeOpacity: theme?.edgeOpacity ?? EXPLODE_DEFAULTS.edgeOpacity,
+  selected: theme?.highlight ?? EXPLODE_DEFAULTS.selected,
+  hovered: theme?.hover ?? EXPLODE_DEFAULTS.hovered,
+  // The selected piece's source surfaces are what was picked, apart from its selection tint.
+  source: theme?.picked ?? EXPLODE_DEFAULTS.source
+});
+var DEFAULT_EXPLODE_THEME = resolveExplodeTheme();
+var edgeOpacityScale = (theme) => theme.edgeOpacity / EXPLODE_DEFAULTS.edgeOpacity;
+
+// src/render/explode.ts
+import {
+  BatchedMesh,
+  Box3,
+  BufferGeometry as BufferGeometry2,
+  Color,
+  DoubleSide,
+  Float32BufferAttribute as Float32BufferAttribute2,
+  Group,
+  LineBasicMaterial,
+  LineSegments,
+  Matrix3,
+  Matrix4,
+  Mesh,
+  MeshLambertMaterial,
+  Vector3,
+  Uint32BufferAttribute
+} from "three";
+
+// src/render/explode-geometry.ts
+import { BufferGeometry, Float32BufferAttribute } from "three";
+var explodeTriangleCount = (model, geometry, groups) => {
+  if (geometry.index) {
+    throw new Error("ExplodedPart requires non-indexed source geometry.");
+  }
+  const position = geometry.getAttribute("position");
+  if (!position || position.itemSize !== 3 || position.count !== model.mesh.triangleCount * 3) {
+    throw new Error("ExplodedPart source geometry must match the model triangle ranges.");
+  }
+  const ids = /* @__PURE__ */ new Set();
+  let triangles = 0;
+  for (const group of groups) {
+    if (!group.id || ids.has(group.id)) {
+      throw new Error("ExplodedPart group IDs must be nonempty and unique.");
+    }
+    ids.add(group.id);
+    if (![group.offset.x, group.offset.y, group.offset.z].every(Number.isFinite)) {
+      throw new Error(`ExplodedPart group ${group.id} has a nonfinite offset.`);
+    }
+    if (group.regionIdxs.length === 0) {
+      throw new Error(`ExplodedPart group ${group.id} has no regions.`);
+    }
+    for (const region of new Set(group.regionIdxs)) {
+      const range = model.regionIndex.rangeForRegion(region);
+      if (!range) {
+        throw new Error(`Unknown source region ${region}`);
+      }
+      triangles += range.end - range.start;
+    }
+  }
+  return triangles;
+};
+var extractExplodeGroup = (source, geometry, group) => {
+  const regions = [...new Set(group.regionIdxs)].map((idx) => {
+    const region = source.regions.find((region2) => region2.idx === idx);
+    if (!region) {
+      throw new Error(`Unknown source region ${idx}`);
+    }
+    return region;
+  });
+  const triangles = regions.reduce(
+    (count, region) => count + region.triangles.end - region.triangles.start,
+    0
+  );
+  const positions = new Float32Array(triangles * 9);
+  const normals = new Float32Array(triangles * 9);
+  const sourceTriangles = new Uint32Array(triangles);
+  const position = geometry.getAttribute("position");
+  const normal = geometry.getAttribute("normal");
+  if (geometry.index) {
+    throw new Error("Explode requires the viewer\u2019s non-indexed input geometry.");
+  }
+  let cursor = 0;
+  const compact = regions.map((region) => {
+    const start = cursor;
+    for (let t = region.triangles.start; t < region.triangles.end; t += 1) {
+      sourceTriangles[cursor] = t;
+      for (let corner = 0; corner < 3; corner += 1) {
+        const v = t * 3 + corner;
+        const at = cursor * 9 + corner * 3;
+        positions.set([position.getX(v), position.getY(v), position.getZ(v)], at);
+        if (normal) {
+          normals.set([normal.getX(v), normal.getY(v), normal.getZ(v)], at);
+        }
+      }
+      cursor += 1;
+    }
+    return { ...region, triangles: { start, end: cursor } };
+  });
+  const copy = new BufferGeometry();
+  copy.setAttribute("position", new Float32BufferAttribute(positions, 3));
+  if (normal) {
+    copy.setAttribute("normal", new Float32BufferAttribute(normals, 3));
+  } else {
+    copy.computeVertexNormals();
+  }
+  return { regions: compact, geometry: copy, sourceTriangles };
+};
+
+// src/render/explode.ts
+var ASSEMBLED = 1e-4;
+var FADE_IN = 0.1;
+var SELECTED_TINT = 0.45;
+var HOVERED_TINT = 0.25;
+var SOURCE_LIGHTEN = 0.45;
+var WHITE = new Color(16777215);
+var SURFACE_MATERIAL = {
+  emissive: DEFAULT_EXPLODE_THEME.emissive,
+  side: DoubleSide,
+  forceSinglePass: true,
+  transparent: true,
+  polygonOffset: true,
+  polygonOffsetFactor: 1,
+  polygonOffsetUnits: 1
+};
+var idsOf = (value) => value === null ? [] : typeof value === "string" ? [value] : value;
+var overlay = (object, renderOrder = 0) => {
+  object.visible = false;
+  object.renderOrder = renderOrder;
+  object.frustumCulled = false;
+  object.raycast = ignoreRay;
+  object.userData[EXCLUDE_FROM_FRAME] = true;
+  return object;
+};
+var buildSurfaces = (model, geometry, groups) => {
+  const triangles = explodeTriangleCount(model, geometry, groups);
+  if (groups.length === 0) {
+    throw new Error("An explode batch needs at least one group.");
+  }
+  const material = new MeshLambertMaterial({
+    ...SURFACE_MATERIAL,
+    color: 16777215,
+    vertexColors: true
+  });
+  const mesh = new BatchedMesh(groups.length, triangles * 3, 0, material);
+  mesh.name = "explode-surfaces";
+  mesh.renderOrder = 3;
+  mesh.frustumCulled = false;
+  const instanceColors = typeof mesh.setColorAt === "function";
+  const edgePoints = [];
+  let vertexStart = 0;
+  let edgeStart = 0;
+  const pieces = groups.map((group) => {
+    const extracted = extractExplodeGroup(model, geometry, group);
+    const edges = regionEdgesGeometry(extracted.geometry, extracted);
+    const points = edges.getAttribute("position").array;
+    const vertexCount = extracted.geometry.getAttribute("position").count;
+    extracted.geometry.setAttribute(
+      "color",
+      new Float32BufferAttribute2(new Float32Array(vertexCount * 3).fill(1), 3)
+    );
+    const geometryId = mesh.addGeometry(extracted.geometry);
+    const instanceId = typeof mesh.addInstance === "function" ? mesh.addInstance(geometryId) : geometryId;
+    const range = { start: vertexStart, count: vertexCount };
+    const regions = extracted.regions.map((region) => ({
+      idx: region.idx,
+      start: vertexStart + region.triangles.start * 3,
+      count: (region.triangles.end - region.triangles.start) * 3
+    }));
+    vertexStart += vertexCount;
+    edgePoints.push(points);
+    extracted.geometry.computeBoundingBox();
+    const piece = {
+      group,
+      instanceId,
+      range,
+      regions,
+      sourceTriangles: extracted.sourceTriangles,
+      centre: extracted.geometry.boundingBox.getCenter(new Vector3()),
+      bounds: extracted.geometry.boundingBox.clone(),
+      edgeStart,
+      edgeCount: points.length / 3
+    };
+    edgeStart += piece.edgeCount;
+    extracted.geometry.dispose();
+    edges.dispose();
+    return piece;
+  });
+  return { mesh, material, instanceColors, pieces, edgePoints, triangles, edgeVertices: edgeStart };
+};
+var buildOutlines = (pieces, edgePoints, edgeVertices) => {
+  const positions = new Float32Array(edgeVertices * 3);
+  const offsets = new Float32Array(edgeVertices * 3);
+  for (const [index, piece] of pieces.entries()) {
+    positions.set(edgePoints[index], piece.edgeStart * 3);
+    for (let vertex = piece.edgeStart; vertex < piece.edgeStart + piece.edgeCount; vertex += 1) {
+      offsets[vertex * 3] = piece.group.offset.x;
+      offsets[vertex * 3 + 1] = piece.group.offset.y;
+      offsets[vertex * 3 + 2] = piece.group.offset.z;
+    }
+  }
+  const geometry = new BufferGeometry2();
+  geometry.setAttribute("position", new Float32BufferAttribute2(positions, 3));
+  geometry.setAttribute("aExplodeOffset", new Float32BufferAttribute2(offsets, 3));
+  geometry.boundingBox = new Box3();
+  const amount = { value: 0 };
+  const material = new LineBasicMaterial({
+    color: DEFAULT_EXPLODE_THEME.edge,
+    transparent: true,
+    depthWrite: false
+  });
+  material.onBeforeCompile = (shader) => {
+    shader.uniforms.uExplodeAmount = amount;
+    shader.vertexShader = shader.vertexShader.replace(
+      "#include <common>",
+      "#include <common>\nattribute vec3 aExplodeOffset;\nuniform float uExplodeAmount;"
+    ).replace(
+      "#include <begin_vertex>",
+      "#include <begin_vertex>\ntransformed += aExplodeOffset * uExplodeAmount;"
+    );
+  };
+  const outlines = new LineSegments(geometry, material);
+  outlines.name = "explode-edges";
+  outlines.renderOrder = 4;
+  outlines.frustumCulled = false;
+  outlines.raycast = ignoreRay;
+  return { outlines, amount };
+};
+var buildSourceSurfaces = (surfaces, triangles) => {
+  const geometry = new BufferGeometry2();
+  geometry.setAttribute("position", surfaces.geometry.getAttribute("position"));
+  geometry.setAttribute("normal", surfaces.geometry.getAttribute("normal"));
+  geometry.setIndex(new Uint32BufferAttribute(new Uint32Array(triangles * 3), 1));
+  geometry.setDrawRange(0, 0);
+  const material = new MeshLambertMaterial({
+    ...SURFACE_MATERIAL,
+    color: new Color(DEFAULT_EXPLODE_THEME.source).lerp(WHITE, SOURCE_LIGHTEN)
+  });
+  const source = overlay(new Mesh(geometry, material), 3);
+  source.name = "explode-origin";
+  return source;
+};
+var buildSourceOutlines = (outlines, edgeVertices) => {
+  const geometry = new BufferGeometry2();
+  geometry.setAttribute("position", outlines.getAttribute("position"));
+  geometry.setIndex(new Uint32BufferAttribute(new Uint32Array(edgeVertices), 1));
+  geometry.setDrawRange(0, 0);
+  const material = new LineBasicMaterial({
+    color: DEFAULT_EXPLODE_THEME.edge,
+    transparent: true,
+    opacity: DEFAULT_EXPLODE_THEME.edgeOpacity
+  });
+  return overlay(new LineSegments(geometry, material), 4);
+};
+var buildConnector = () => {
+  const geometry = new BufferGeometry2();
+  geometry.setAttribute("position", new Float32BufferAttribute2(new Float32Array(6), 3));
+  const material = new LineBasicMaterial({
+    transparent: true,
+    opacity: 0.85,
+    depthWrite: false
+  });
+  return overlay(new LineSegments(geometry, material));
+};
+var createExplodeBatch = (model, geometry, groups) => {
+  const { mesh, material, instanceColors, pieces, edgePoints, triangles, edgeVertices } = buildSurfaces(model, geometry, groups);
+  const { outlines, amount: amountUniform } = buildOutlines(pieces, edgePoints, edgeVertices);
+  const source = buildSourceSurfaces(mesh, triangles);
+  const sourceOutlines = buildSourceOutlines(outlines.geometry, edgeVertices);
+  const connector = buildConnector();
+  const object = new Group();
+  object.add(mesh, outlines, source, sourceOutlines, connector);
+  const byId = new Map(pieces.map((piece) => [piece.group.id, piece]));
+  const matrix = new Matrix4();
+  const inverse = new Matrix4();
+  const normalMatrix = new Matrix3();
+  const color = new Color();
+  const highlightColor = new Color();
+  const sourceBounds = new Box3();
+  const placedBounds = new Box3();
+  const movedBounds = new Box3();
+  const point = new Vector3();
+  const modelPoint = new Vector3();
+  const normal = new Vector3();
+  let theme = DEFAULT_EXPLODE_THEME;
+  let selectedPieces = [];
+  let amount = -1;
+  let previousColors;
+  let previousRegionColors;
+  let previousSelected;
+  let previousHovered;
+  let previousSelectedIds = /* @__PURE__ */ new Set();
+  let previousHoveredIds = /* @__PURE__ */ new Set();
+  let appearanceSet = false;
+  const syncConnector = () => {
+    const visible = selectedPieces.length > 0 && amount > ASSEMBLED;
+    source.visible = visible;
+    sourceOutlines.visible = visible;
+    connector.visible = visible;
+    if (selectedPieces.length === 0) {
+      return;
+    }
+    const points = connector.geometry.getAttribute("position");
+    sourceBounds.getCenter(point);
+    points.setXYZ(0, point.x, point.y, point.z);
+    placedBounds.makeEmpty();
+    for (const piece of selectedPieces) {
+      const offset = piece.group.offset;
+      point.set(offset.x * amount, offset.y * amount, offset.z * amount);
+      placedBounds.union(movedBounds.copy(piece.bounds).translate(point));
+    }
+    placedBounds.getCenter(point);
+    points.setXYZ(1, point.x, point.y, point.z);
+    points.needsUpdate = true;
+  };
+  const hit = (batchId, faceIndex) => {
+    if (batchId === void 0 || faceIndex === void 0) {
+      return null;
+    }
+    const piece = pieces[batchId];
+    const local = piece ? faceIndex - piece.range.start / 3 : -1;
+    return piece && local >= 0 && local < piece.sourceTriangles.length ? { group: piece.group, triangleIndex: piece.sourceTriangles[local] } : null;
+  };
+  return {
+    object,
+    mesh,
+    pieces,
+    hit,
+    /** A ray hit on the batch as a pick of its source surface, with the hit's unexploded point. */
+    pick: (intersection, context = {}) => {
+      const { face } = intersection;
+      if (amount <= ASSEMBLED || !face) {
+        return null;
+      }
+      const found = hit(intersection.batchId, intersection.faceIndex ?? void 0);
+      if (!found) {
+        return null;
+      }
+      const region = model.regionIndex.regionForTriangle(found.triangleIndex);
+      if (region === null) {
+        return null;
+      }
+      normal.copy(face.normal).applyNormalMatrix(normalMatrix.getNormalMatrix(mesh.matrixWorld));
+      const { offset } = found.group;
+      modelPoint.copy(intersection.point).applyMatrix4(inverse.copy(mesh.matrixWorld).invert());
+      modelPoint.x -= offset.x * amount;
+      modelPoint.y -= offset.y * amount;
+      modelPoint.z -= offset.z * amount;
+      return {
+        ...buildPick({
+          ...context,
+          model,
+          region,
+          triangleIndex: found.triangleIndex,
+          point: intersection.point.toArray(),
+          normal: normal.toArray()
+        }),
+        explodeGroupId: found.group.id,
+        modelPoint: modelPoint.toArray()
+      };
+    },
+    setAppearance: ({
+      colors,
+      regionColors,
+      selected = null,
+      hovered = null,
+      theme: nextTheme = DEFAULT_EXPLODE_THEME
+    }) => {
+      const themeChanged = theme !== nextTheme;
+      if (appearanceSet && !themeChanged && previousColors === colors && previousRegionColors === regionColors && previousSelected === selected && previousHovered === hovered) {
+        return;
+      }
+      if (themeChanged) {
+        theme = nextTheme;
+        material.emissive.setHex(theme.emissive);
+        source.material.emissive.setHex(theme.emissive);
+        source.material.color.setHex(theme.source).lerp(WHITE, SOURCE_LIGHTEN);
+        outlines.material.color.setHex(theme.edge);
+        outlines.material.opacity = theme.edgeOpacity * Math.min(1, Math.max(0, amount) / FADE_IN);
+        sourceOutlines.material.color.setHex(theme.edge);
+        sourceOutlines.material.opacity = theme.edgeOpacity;
+      }
+      const selectedIds = new Set(idsOf(selected));
+      const hoveredIds = new Set(idsOf(hovered));
+      for (const piece of pieces) {
+        const id = piece.group.id;
+        if (appearanceSet && !themeChanged && previousColors === colors && previousRegionColors === regionColors && !selectedIds.has(id) && !previousSelectedIds.has(id) && !hoveredIds.has(id) && !previousHoveredIds.has(id)) {
+          continue;
+        }
+        const base = colors?.get(id) ?? piece.group.color;
+        const regions = regionColors?.get(id);
+        const perVertex = !instanceColors || Boolean(regions?.size);
+        highlightColor.setHex(selectedIds.has(id) ? theme.selected : theme.hovered);
+        const tint = selectedIds.has(id) ? SELECTED_TINT : hoveredIds.has(id) ? HOVERED_TINT : 0;
+        const vertices = mesh.geometry.getAttribute("color");
+        if (perVertex || previousRegionColors?.get(id)?.size) {
+          for (const region of piece.regions) {
+            color.setHex(regions?.get(region.idx) ?? base).lerp(highlightColor, tint);
+            for (let vertex = region.start; vertex < region.start + region.count; vertex += 1) {
+              vertices.setXYZ(
+                vertex,
+                perVertex ? color.r : 1,
+                perVertex ? color.g : 1,
+                perVertex ? color.b : 1
+              );
+            }
+          }
+          vertices.needsUpdate = true;
+        }
+        if (instanceColors) {
+          color.setHex(base).lerp(highlightColor, tint);
+          mesh.setColorAt(piece.instanceId, perVertex ? WHITE : color);
+        }
+      }
+      previousColors = colors;
+      previousRegionColors = regionColors;
+      const selectionChanged = previousSelected !== selected || !appearanceSet;
+      previousSelected = selected;
+      previousHovered = hovered;
+      appearanceSet = true;
+      previousSelectedIds = selectedIds;
+      previousHoveredIds = hoveredIds;
+      if (selectionChanged) {
+        selectedPieces = [...selectedIds].flatMap((id) => {
+          const piece = byId.get(id);
+          return piece ? [piece] : [];
+        });
+        sourceBounds.makeEmpty();
+        let vertices = 0;
+        let edgeVertices2 = 0;
+        const indices = source.geometry.index;
+        const edgeIndices = sourceOutlines.geometry.index;
+        for (const piece of selectedPieces) {
+          sourceBounds.union(piece.bounds);
+          for (let i = 0; i < piece.range.count; i += 1) {
+            indices.setX(vertices++, piece.range.start + i);
+          }
+          for (let i = 0; i < piece.edgeCount; i += 1) {
+            edgeIndices.setX(edgeVertices2++, piece.edgeStart + i);
+          }
+        }
+        indices.needsUpdate = true;
+        edgeIndices.needsUpdate = true;
+        source.geometry.setDrawRange(0, vertices);
+        sourceOutlines.geometry.setDrawRange(0, edgeVertices2);
+      }
+      const first = selectedPieces[0];
+      if (first) {
+        connector.material.color.setHex(colors?.get(first.group.id) ?? first.group.color);
+      }
+      syncConnector();
+    },
+    setAmount: (next) => {
+      next = readExplodeAmount(next);
+      if (next === amount) {
+        return;
+      }
+      amount = next;
+      const fade = Math.min(1, amount / FADE_IN);
+      material.depthWrite = fade === 1;
+      material.opacity = fade;
+      mesh.visible = amount > ASSEMBLED;
+      outlines.visible = mesh.visible;
+      outlines.material.opacity = theme.edgeOpacity * fade;
+      amountUniform.value = amount;
+      for (const piece of pieces) {
+        const offset = piece.group.offset;
+        matrix.makeTranslation(offset.x * amount, offset.y * amount, offset.z * amount);
+        mesh.setMatrixAt(piece.instanceId, matrix);
+      }
+      mesh.computeBoundingBox();
+      outlines.geometry.boundingBox.copy(mesh.boundingBox);
+      syncConnector();
+    },
+    dispose: () => {
+      object.clear();
+      mesh.dispose();
+      material.dispose();
+      for (const drawn of [outlines, source, sourceOutlines, connector]) {
+        drawn.geometry.dispose();
+        drawn.material.dispose();
+      }
+    }
+  };
+};
+
+// src/exploded-part.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var GHOST_FADE = 0.18;
+var Ghost = ({
+  model,
+  geometry,
+  explode,
+  appearance,
+  visible = true
+}) => {
+  const material = useRef(null);
+  const outline = useRef(null);
+  const edges = useMemo(() => regionEdgesGeometry(geometry, model), [geometry, model]);
+  useEffect(() => () => edges.dispose(), [edges]);
+  useFrame(() => {
+    if (!visible) {
+      return;
+    }
+    const fade = Math.min(1, readExplodeAmount(explode.amount) / GHOST_FADE);
+    if (material.current) {
+      material.current.opacity = 1 - 0.88 * fade;
+      material.current.depthWrite = fade === 0;
+    }
+    if (outline.current) {
+      outline.current.opacity = (0.7 - 0.46 * fade) * edgeOpacityScale(appearance);
+    }
+  }, -1);
+  return /* @__PURE__ */ jsxs("group", { visible, userData: { [EXCLUDE_FROM_FRAME]: !visible }, children: [
+    /* @__PURE__ */ jsx("mesh", { geometry, raycast: ignoreRay, children: /* @__PURE__ */ jsx(
+      "meshLambertMaterial",
+      {
+        ref: material,
+        color: appearance.ghost,
+        emissive: appearance.ghostEmissive,
+        transparent: true,
+        opacity: 0.12,
+        depthWrite: false,
+        side: DoubleSide2,
+        forceSinglePass: true
+      }
+    ) }),
+    /* @__PURE__ */ jsx("lineSegments", { geometry: edges, raycast: ignoreRay, children: /* @__PURE__ */ jsx(
+      "lineBasicMaterial",
+      {
+        ref: outline,
+        color: appearance.ghostEdge,
+        transparent: true,
+        opacity: 0.24 * edgeOpacityScale(appearance),
+        depthWrite: false
+      }
+    ) })
+  ] });
+};
+var Pieces = ({
+  model,
+  geometry,
+  explode,
+  selected = null,
+  hovered = null,
+  activeDirection = null,
+  visible = true,
+  appearance,
+  onReady,
+  onPick,
+  onHover
+}) => {
+  const { groups, colors, regionColors } = explode;
+  const invalidate = useThree((state) => state.invalidate);
+  const camera = useThree((state) => state.camera);
+  const gl = useThree((state) => state.gl);
+  const scene = useThree((state) => state.scene);
+  const isTap = useTapGuard();
+  const ready = useRef(onReady);
+  useLayoutEffect(() => {
+    ready.current = onReady;
+  }, [onReady]);
+  const root = useRef(null);
+  const resources = useRef(null);
+  useLayoutEffect(() => {
+    const parent = root.current;
+    const batch = createExplodeBatch(model, geometry, groups);
+    resources.current = batch;
+    parent.add(batch.object);
+    invalidate();
+    return () => {
+      resources.current = null;
+      parent.remove(batch.object);
+      batch.dispose();
+    };
+  }, [geometry, groups, invalidate, model]);
+  useLayoutEffect(() => {
+    resources.current?.setAppearance({
+      colors,
+      regionColors,
+      selected,
+      hovered,
+      theme: appearance
+    });
+    resources.current?.setAmount(readExplodeAmount(explode.amount));
+    invalidate();
+  }, [
+    appearance,
+    colors,
+    explode,
+    geometry,
+    groups,
+    hovered,
+    invalidate,
+    model,
+    regionColors,
+    selected
+  ]);
+  useEffect(() => {
+    const batch = resources.current;
+    const scheduled = setTimeout(() => {
+      const scissor = gl.getScissor(new Vector4());
+      const scissorTest = gl.getScissorTest();
+      const parent = root.current;
+      const parentVisible = parent.visible;
+      const visibility = /* @__PURE__ */ new Map();
+      batch.object.traverse((object) => {
+        visibility.set(object, object.visible);
+        object.visible = true;
+      });
+      parent.visible = true;
+      try {
+        gl.setScissor(0, 0, 0, 0);
+        gl.setScissorTest(true);
+        gl.render(scene, camera);
+      } finally {
+        gl.setScissor(scissor);
+        gl.setScissorTest(scissorTest);
+        parent.visible = parentVisible;
+        for (const [object, visible2] of visibility) {
+          object.visible = visible2;
+        }
+        invalidate();
+      }
+      ready.current?.();
+    }, 0);
+    return () => clearTimeout(scheduled);
+  }, [camera, geometry, gl, groups, invalidate, model, scene]);
+  useFrame(() => {
+    if (visible) {
+      resources.current?.setAmount(readExplodeAmount(explode.amount));
+    }
+  }, -1);
+  const pick = (event) => {
+    const source = event.nativeEvent;
+    return resources.current?.pick(event, {
+      activeDirection,
+      viewDirection: viewDirection(camera, event.point),
+      pointer: { clientX: source.clientX, clientY: source.clientY },
+      modifiers: {
+        alt: source.altKey,
+        ctrl: source.ctrlKey,
+        meta: source.metaKey,
+        shift: source.shiftKey,
+        secondary: source.button === 2
+      },
+      doubled: source.detail === 2
+    }) ?? null;
+  };
+  return /* @__PURE__ */ jsx(
+    "group",
+    {
+      ref: root,
+      name: "exploded-part",
+      visible,
+      userData: { [EXCLUDE_FROM_FRAME]: !visible },
+      onPointerMove: visible && onHover ? (event) => {
+        event.stopPropagation();
+        onHover?.(pick(event));
+      } : void 0,
+      onPointerOut: visible && onHover ? () => onHover(null) : void 0,
+      onClick: visible && onPick ? (event) => {
+        event.stopPropagation();
+        if (isTap(event.nativeEvent)) {
+          const hit = pick(event);
+          if (hit) {
+            onPick?.(hit);
+          }
+        }
+      } : void 0
+    }
+  );
+};
+var ExplodedPart = (props) => {
+  const { part, partEmissive, edge, edgeOpacity, highlight, hover, picked } = props.theme ?? {};
+  const appearance = useMemo(
+    () => resolveExplodeTheme({ part, partEmissive, edge, edgeOpacity, highlight, hover, picked }),
+    [part, partEmissive, edge, edgeOpacity, highlight, hover, picked]
+  );
+  const invalidate = useThree((state) => state.invalidate);
+  const amount = props.explode.amount;
+  useLayoutEffect(() => {
+    if (typeof amount !== "number") {
+      const unsubscribe = amount.subscribe(invalidate);
+      invalidate();
+      return unsubscribe;
+    }
+  }, [amount, invalidate]);
+  return props.explode.groups.length === 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Ghost,
+      {
+        model: props.model,
+        geometry: props.geometry,
+        explode: props.explode,
+        appearance,
+        visible: props.visible
+      }
+    ),
+    /* @__PURE__ */ jsx(Pieces, { ...props, appearance })
+  ] });
+};
+
 // src/hover-card.tsx
-import { useEffect, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { useEffect as useEffect2, useState } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var HoverCard = ({ pick, children, className: className2, offset = 16 }) => {
   const [pointer, setPointer] = useState(pick?.pointer);
-  useEffect(() => {
+  useEffect2(() => {
     setPointer(pick?.pointer);
     if (pick === null) return;
     const follow = (event) => setPointer({ clientX: event.clientX, clientY: event.clientY });
@@ -228,7 +988,7 @@ var HoverCard = ({ pick, children, className: className2, offset = 16 }) => {
     pointerEvents: "none",
     zIndex: 4
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       className: ["viewer-hover-card", className2].filter(Boolean).join(" "),
@@ -244,8 +1004,8 @@ var HoverCard = ({ pick, children, className: className2, offset = 16 }) => {
 import { createContext, useContext } from "react";
 
 // src/toolbar-icons.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var SvgIcon = ({ viewBox = "0 0 24 24", fill = "none", children }) => /* @__PURE__ */ jsx2(
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var SvgIcon = ({ viewBox = "0 0 24 24", fill = "none", children }) => /* @__PURE__ */ jsx3(
   "svg",
   {
     className: "viewer-toolbar-icon",
@@ -260,25 +1020,26 @@ var SvgIcon = ({ viewBox = "0 0 24 24", fill = "none", children }) => /* @__PURE
     children
   }
 );
-var FitIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5M8 8h8v8H8z" }) });
-var ResetIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M3 10a9 9 0 1 1 2 8M3 4v6h6" }) });
-var TopIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M4 7l8-4 8 4-8 4zM4 7v10l8 4 8-4V7M12 11v10" }) });
-var StockIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M3 6l9-4 9 4v12l-9 4-9-4zM3 6l9 4 9-4M12 10v12M7 8v8l5 2 5-2V8" }) });
-var AxesIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M5 19V3m0 16h16M5 19l10-10M2 6l3-3 3 3m10 10 3 3-3 3M11 9h4v4" }) });
-var GridIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M3 8l9-5 9 5-9 5zM3 8v8l9 5 9-5V8M12 13v8M7.5 5.5v8M16.5 5.5v8" }) });
-var BananaIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { viewBox: "0 0 576 512", fill: "currentColor", children: /* @__PURE__ */ jsx2("path", { d: "M284.2 245.6c12.99 6.929 25.35 15.14 36.08 25.8L334.5 285.6l65.75-23.47c14.75-5.265 30.18-7.849 45.81-8.389c1.154-10.73 1.764-21.38 1.764-31.87c0-118.5-81.33-221.9-119.7-221.9c-21.01 0-40.91 17.04-40.91 39.25c0 16.18 16.74 41.9 16.74 103C303.1 170.1 300.6 203.1 284.2 245.6zM575.1 389.6c0-3.687-.8637-7.429-2.687-10.93l-15.12-29.11c-21.05-40.53-63.08-64.51-106.9-64.51c-13.43 0-27.02 2.252-40.22 6.969l-84.84 30.27l-28.59-28.41C274.4 270.9 243.7 258.1 212.8 258.1c-23.72 0-47.57 6.97-68.29 21.2L106.3 306.4c-6.732 4.631-10.35 12.07-10.35 19.63c0 14.93 12.7 23.87 24.04 23.87c4.695 0 9.443-1.376 13.61-4.26l38.13-26.23c12.43-8.525 26.71-12.69 40.91-12.69c10.64 0 21.24 2.339 30.97 6.934c-50.62 62.23-128.3 99.85-211.4 99.85C14.42 413.5 0 427.8 0 445.5v31.38c0 17.68 14.66 32.02 32.46 32.02l28.98.0009c14.15 0 34.69 1.098 59.07 1.098c93.51 0 243.4-16.15 304.8-172.4c9.021-3.22 17.95-4.712 26.53-4.712c27.65 0 51.7 15.49 63.7 38.55l15.12 29.11c3.484 6.723 11.74 12.98 21.41 12.98C564.1 413.6 575.1 403.8 575.1 389.6z" }) });
-var ToolsIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M9 2h6v7H9zM9.5 9v9.5l2.5 3.5 2.5-3.5V9M9.5 12l5 2.5M9.5 15.5l5 2.5" }) });
-var DirectionsIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M7 3v18m-4-4 4 4 4-4M17 21V3m-4 4 4-4 4 4" }) });
-var DfmIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M8.3 3h7.4L21 8.3v7.4L15.7 21H8.3L3 15.7V8.3zM12 7.5v5.5m0 3.5v.01" }) });
-var SharpCornersIcon = () => /* @__PURE__ */ jsxs(SvgIcon, { children: [
-  /* @__PURE__ */ jsx2("path", { d: "M4 3v17h17" }),
-  /* @__PURE__ */ jsx2("circle", { cx: "9", cy: "15", r: "4" })
+var FitIcon = () => /* @__PURE__ */ jsx3(SvgIcon, { children: /* @__PURE__ */ jsx3("path", { d: "M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5M8 8h8v8H8z" }) });
+var ResetIcon = () => /* @__PURE__ */ jsx3(SvgIcon, { children: /* @__PURE__ */ jsx3("path", { d: "M3 10a9 9 0 1 1 2 8M3 4v6h6" }) });
+var TopIcon = () => /* @__PURE__ */ jsx3(SvgIcon, { children: /* @__PURE__ */ jsx3("path", { d: "M4 7l8-4 8 4-8 4zM4 7v10l8 4 8-4V7M12 11v10" }) });
+var StockIcon = () => /* @__PURE__ */ jsx3(SvgIcon, { children: /* @__PURE__ */ jsx3("path", { d: "M3 6l9-4 9 4v12l-9 4-9-4zM3 6l9 4 9-4M12 10v12M7 8v8l5 2 5-2V8" }) });
+var AxesIcon = () => /* @__PURE__ */ jsx3(SvgIcon, { children: /* @__PURE__ */ jsx3("path", { d: "M5 19V3m0 16h16M5 19l10-10M2 6l3-3 3 3m10 10 3 3-3 3M11 9h4v4" }) });
+var GridIcon = () => /* @__PURE__ */ jsx3(SvgIcon, { children: /* @__PURE__ */ jsx3("path", { d: "M3 8l9-5 9 5-9 5zM3 8v8l9 5 9-5V8M12 13v8M7.5 5.5v8M16.5 5.5v8" }) });
+var BananaIcon = () => /* @__PURE__ */ jsx3(SvgIcon, { viewBox: "0 0 576 512", fill: "currentColor", children: /* @__PURE__ */ jsx3("path", { d: "M284.2 245.6c12.99 6.929 25.35 15.14 36.08 25.8L334.5 285.6l65.75-23.47c14.75-5.265 30.18-7.849 45.81-8.389c1.154-10.73 1.764-21.38 1.764-31.87c0-118.5-81.33-221.9-119.7-221.9c-21.01 0-40.91 17.04-40.91 39.25c0 16.18 16.74 41.9 16.74 103C303.1 170.1 300.6 203.1 284.2 245.6zM575.1 389.6c0-3.687-.8637-7.429-2.687-10.93l-15.12-29.11c-21.05-40.53-63.08-64.51-106.9-64.51c-13.43 0-27.02 2.252-40.22 6.969l-84.84 30.27l-28.59-28.41C274.4 270.9 243.7 258.1 212.8 258.1c-23.72 0-47.57 6.97-68.29 21.2L106.3 306.4c-6.732 4.631-10.35 12.07-10.35 19.63c0 14.93 12.7 23.87 24.04 23.87c4.695 0 9.443-1.376 13.61-4.26l38.13-26.23c12.43-8.525 26.71-12.69 40.91-12.69c10.64 0 21.24 2.339 30.97 6.934c-50.62 62.23-128.3 99.85-211.4 99.85C14.42 413.5 0 427.8 0 445.5v31.38c0 17.68 14.66 32.02 32.46 32.02l28.98.0009c14.15 0 34.69 1.098 59.07 1.098c93.51 0 243.4-16.15 304.8-172.4c9.021-3.22 17.95-4.712 26.53-4.712c27.65 0 51.7 15.49 63.7 38.55l15.12 29.11c3.484 6.723 11.74 12.98 21.41 12.98C564.1 413.6 575.1 403.8 575.1 389.6z" }) });
+var ToolsIcon = () => /* @__PURE__ */ jsx3(SvgIcon, { children: /* @__PURE__ */ jsx3("path", { d: "M9 2h6v7H9zM9.5 9v9.5l2.5 3.5 2.5-3.5V9M9.5 12l5 2.5M9.5 15.5l5 2.5" }) });
+var DirectionsIcon = () => /* @__PURE__ */ jsx3(SvgIcon, { children: /* @__PURE__ */ jsx3("path", { d: "M7 3v18m-4-4 4 4 4-4M17 21V3m-4 4 4-4 4 4" }) });
+var DfmIcon = () => /* @__PURE__ */ jsx3(SvgIcon, { children: /* @__PURE__ */ jsx3("path", { d: "M8.3 3h7.4L21 8.3v7.4L15.7 21H8.3L3 15.7V8.3zM12 7.5v5.5m0 3.5v.01" }) });
+var SharpCornersIcon = () => /* @__PURE__ */ jsxs2(SvgIcon, { children: [
+  /* @__PURE__ */ jsx3("path", { d: "M4 3v17h17" }),
+  /* @__PURE__ */ jsx3("circle", { cx: "9", cy: "15", r: "4" })
 ] });
-var HoverIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M4 4h16v12H9l-5 4zm4 5h8m-8 3h5" }) });
-var FocusIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M4 4h16v16H4zM8 8h8v8H8zM2 12h4m12 0h4M12 2v4m0 12v4" }) });
-var WireframeIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M4 7l8-4 8 4v10l-8 4-8-4zM4 7l8 4 8-4M12 11v10M4 17l8-4 8 4M12 3v10" }) });
-var SectionIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M3 6h9v12H3zM12 3v18M16 6h2m3 3v2m0 3v2m-5 3h-2" }) });
-var MeasureIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M3 16L16 3l5 5L8 21zM8 11l3 3m1-7 3 3m-11 5 3 3" }) });
+var ThreadsIcon = () => /* @__PURE__ */ jsx3(SvgIcon, { children: /* @__PURE__ */ jsx3("path", { d: "M8 3h8v18H8zM8 8l8-2M8 12l8-2M8 16l8-2M8 20l8-2" }) });
+var HoverIcon = () => /* @__PURE__ */ jsx3(SvgIcon, { children: /* @__PURE__ */ jsx3("path", { d: "M4 4h16v12H9l-5 4zm4 5h8m-8 3h5" }) });
+var FocusIcon = () => /* @__PURE__ */ jsx3(SvgIcon, { children: /* @__PURE__ */ jsx3("path", { d: "M4 4h16v16H4zM8 8h8v8H8zM2 12h4m12 0h4M12 2v4m0 12v4" }) });
+var WireframeIcon = () => /* @__PURE__ */ jsx3(SvgIcon, { children: /* @__PURE__ */ jsx3("path", { d: "M4 7l8-4 8 4v10l-8 4-8-4zM4 7l8 4 8-4M12 11v10M4 17l8-4 8 4M12 3v10" }) });
+var SectionIcon = () => /* @__PURE__ */ jsx3(SvgIcon, { children: /* @__PURE__ */ jsx3("path", { d: "M3 6h9v12H3zM12 3v18M16 6h2m3 3v2m0 3v2m-5 3h-2" }) });
+var MeasureIcon = () => /* @__PURE__ */ jsx3(SvgIcon, { children: /* @__PURE__ */ jsx3("path", { d: "M3 16L16 3l5 5L8 21zM8 11l3 3m1-7 3 3m-11 5 3 3" }) });
 var ICONS = {
   fit: FitIcon,
   reset: ResetIcon,
@@ -291,6 +1052,7 @@ var ICONS = {
   directions: DirectionsIcon,
   dfm: DfmIcon,
   sharpCorners: SharpCornersIcon,
+  threads: ThreadsIcon,
   hover: HoverIcon,
   focus: FocusIcon,
   wireframe: WireframeIcon,
@@ -299,16 +1061,16 @@ var ICONS = {
 };
 var ToolbarIcon = ({ name }) => {
   const Icon = ICONS[name];
-  return /* @__PURE__ */ jsx2(Icon, {});
+  return /* @__PURE__ */ jsx3(Icon, {});
 };
 
 // src/viewer-toolbar.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var ViewerToolbarContext = createContext(null);
 var ViewerToolbarProvider = ({
   controls,
   children
-}) => /* @__PURE__ */ jsx3(ViewerToolbarContext.Provider, { value: controls, children });
+}) => /* @__PURE__ */ jsx4(ViewerToolbarContext.Provider, { value: controls, children });
 var useViewerToolbar = () => {
   const controls = useContext(ViewerToolbarContext);
   if (!controls) throw new Error("useViewerToolbar must be used inside <ViewerToolbarProvider>");
@@ -321,7 +1083,7 @@ var ToolbarButton = ({ action, icon, label, toggle = true }) => {
     throw new Error(`<ViewerToolbar.${buttonName(action)}> requires a '${action}' toolbar control`);
   }
   const pressed = control.pressed ?? false;
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "button",
     {
       className: "viewer-toolbar-button",
@@ -331,13 +1093,13 @@ var ToolbarButton = ({ action, icon, label, toggle = true }) => {
       "aria-pressed": toggle ? pressed : void 0,
       onClick: control.onClick,
       children: [
-        /* @__PURE__ */ jsx3(ToolbarIcon, { name: icon }),
-        /* @__PURE__ */ jsx3("span", { className: "viewer-toolbar-tooltip", "data-viewer-toolbar-tooltip": "true", role: "tooltip", children: label(pressed) })
+        /* @__PURE__ */ jsx4(ToolbarIcon, { name: icon }),
+        /* @__PURE__ */ jsx4("span", { className: "viewer-toolbar-tooltip", "data-viewer-toolbar-tooltip": "true", role: "tooltip", children: label(pressed) })
       ]
     }
   );
 };
-var StockButton = () => /* @__PURE__ */ jsx3(
+var StockButton = () => /* @__PURE__ */ jsx4(
   ToolbarButton,
   {
     action: "stock",
@@ -345,7 +1107,7 @@ var StockButton = () => /* @__PURE__ */ jsx3(
     label: (pressed) => pressed ? "Hide stock" : "Show stock"
   }
 );
-var AxesButton = () => /* @__PURE__ */ jsx3(
+var AxesButton = () => /* @__PURE__ */ jsx4(
   ToolbarButton,
   {
     action: "axes",
@@ -353,7 +1115,7 @@ var AxesButton = () => /* @__PURE__ */ jsx3(
     label: (pressed) => pressed ? "Hide axis" : "Show axis"
   }
 );
-var GridButton = () => /* @__PURE__ */ jsx3(
+var GridButton = () => /* @__PURE__ */ jsx4(
   ToolbarButton,
   {
     action: "grid",
@@ -361,7 +1123,7 @@ var GridButton = () => /* @__PURE__ */ jsx3(
     label: (pressed) => pressed ? "Hide grid" : "Show grid"
   }
 );
-var BananaButton = () => /* @__PURE__ */ jsx3(
+var BananaButton = () => /* @__PURE__ */ jsx4(
   ToolbarButton,
   {
     action: "banana",
@@ -369,7 +1131,7 @@ var BananaButton = () => /* @__PURE__ */ jsx3(
     label: (pressed) => pressed ? "Banana for scale (on)" : "Banana for scale"
   }
 );
-var ToolsButton = () => /* @__PURE__ */ jsx3(
+var ToolsButton = () => /* @__PURE__ */ jsx4(
   ToolbarButton,
   {
     action: "tools",
@@ -377,7 +1139,7 @@ var ToolsButton = () => /* @__PURE__ */ jsx3(
     label: (pressed) => pressed ? "Hide tools on the part" : "Show tools on the part"
   }
 );
-var DirectionsButton = () => /* @__PURE__ */ jsx3(
+var DirectionsButton = () => /* @__PURE__ */ jsx4(
   ToolbarButton,
   {
     action: "directions",
@@ -385,7 +1147,7 @@ var DirectionsButton = () => /* @__PURE__ */ jsx3(
     label: () => "Highlight faces by direction"
   }
 );
-var DfmButton = () => /* @__PURE__ */ jsx3(
+var DfmButton = () => /* @__PURE__ */ jsx4(
   ToolbarButton,
   {
     action: "dfm",
@@ -393,7 +1155,7 @@ var DfmButton = () => /* @__PURE__ */ jsx3(
     label: (pressed) => pressed ? "Hide DFM flags" : "Show DFM flags"
   }
 );
-var SharpCornersButton = () => /* @__PURE__ */ jsx3(
+var SharpCornersButton = () => /* @__PURE__ */ jsx4(
   ToolbarButton,
   {
     action: "sharpCorners",
@@ -401,7 +1163,15 @@ var SharpCornersButton = () => /* @__PURE__ */ jsx3(
     label: (pressed) => pressed ? "Hide sharp corners" : "Show sharp corners"
   }
 );
-var HoverButton = () => /* @__PURE__ */ jsx3(
+var ThreadsButton = () => /* @__PURE__ */ jsx4(
+  ToolbarButton,
+  {
+    action: "threads",
+    icon: "threads",
+    label: (pressed) => pressed ? "Hide threads" : "Show threads"
+  }
+);
+var HoverButton = () => /* @__PURE__ */ jsx4(
   ToolbarButton,
   {
     action: "hover",
@@ -409,7 +1179,7 @@ var HoverButton = () => /* @__PURE__ */ jsx3(
     label: (pressed) => pressed ? "Disable feature hover" : "Enable feature hover"
   }
 );
-var FocusButton = () => /* @__PURE__ */ jsx3(
+var FocusButton = () => /* @__PURE__ */ jsx4(
   ToolbarButton,
   {
     action: "focus",
@@ -417,8 +1187,8 @@ var FocusButton = () => /* @__PURE__ */ jsx3(
     label: (pressed) => pressed ? "Show full part" : "Focus selection"
   }
 );
-var WireframeButton = () => /* @__PURE__ */ jsx3(ToolbarButton, { action: "wireframe", icon: "wireframe", label: () => "Wireframe" });
-var SectionButton = () => /* @__PURE__ */ jsx3(
+var WireframeButton = () => /* @__PURE__ */ jsx4(ToolbarButton, { action: "wireframe", icon: "wireframe", label: () => "Wireframe" });
+var SectionButton = () => /* @__PURE__ */ jsx4(
   ToolbarButton,
   {
     action: "section",
@@ -426,7 +1196,7 @@ var SectionButton = () => /* @__PURE__ */ jsx3(
     label: (pressed) => pressed ? "Exit section" : "Section"
   }
 );
-var MeasureButton = () => /* @__PURE__ */ jsx3(
+var MeasureButton = () => /* @__PURE__ */ jsx4(
   ToolbarButton,
   {
     action: "measure",
@@ -434,11 +1204,11 @@ var MeasureButton = () => /* @__PURE__ */ jsx3(
     label: (pressed) => pressed ? "Exit measure" : "Measure"
   }
 );
-var FitButton = () => /* @__PURE__ */ jsx3(ToolbarButton, { action: "fit", icon: "fit", label: () => "Fit", toggle: false });
-var ResetButton = () => /* @__PURE__ */ jsx3(ToolbarButton, { action: "reset", icon: "reset", label: () => "Reset", toggle: false });
-var TopButton = () => /* @__PURE__ */ jsx3(ToolbarButton, { action: "top", icon: "top", label: () => "Top view", toggle: false });
-var Divider = () => /* @__PURE__ */ jsx3("span", { className: "viewer-toolbar-divider", "data-viewer-toolbar-divider": "true" });
-var Controls = ({ children, className: className2 }) => /* @__PURE__ */ jsx3(
+var FitButton = () => /* @__PURE__ */ jsx4(ToolbarButton, { action: "fit", icon: "fit", label: () => "Fit", toggle: false });
+var ResetButton = () => /* @__PURE__ */ jsx4(ToolbarButton, { action: "reset", icon: "reset", label: () => "Reset", toggle: false });
+var TopButton = () => /* @__PURE__ */ jsx4(ToolbarButton, { action: "top", icon: "top", label: () => "Top view", toggle: false });
+var Divider = () => /* @__PURE__ */ jsx4("span", { className: "viewer-toolbar-divider", "data-viewer-toolbar-divider": "true" });
+var Controls = ({ children, className: className2 }) => /* @__PURE__ */ jsx4(
   "div",
   {
     className: ["viewer-toolbar", className2].filter(Boolean).join(" "),
@@ -451,43 +1221,44 @@ var Controls = ({ children, className: className2 }) => /* @__PURE__ */ jsx3(
 var DefaultControls = () => {
   const controls = useViewerToolbar();
   const display = [
-    controls.stock ? /* @__PURE__ */ jsx3(StockButton, {}, "stock") : null,
-    controls.axes ? /* @__PURE__ */ jsx3(AxesButton, {}, "axes") : null,
-    controls.grid ? /* @__PURE__ */ jsx3(GridButton, {}, "grid") : null,
-    controls.banana ? /* @__PURE__ */ jsx3(BananaButton, {}, "banana") : null,
-    controls.tools ? /* @__PURE__ */ jsx3(ToolsButton, {}, "tools") : null
+    controls.stock ? /* @__PURE__ */ jsx4(StockButton, {}, "stock") : null,
+    controls.axes ? /* @__PURE__ */ jsx4(AxesButton, {}, "axes") : null,
+    controls.grid ? /* @__PURE__ */ jsx4(GridButton, {}, "grid") : null,
+    controls.banana ? /* @__PURE__ */ jsx4(BananaButton, {}, "banana") : null,
+    controls.tools ? /* @__PURE__ */ jsx4(ToolsButton, {}, "tools") : null
   ].filter(Boolean);
   const analysis = [
-    controls.directions ? /* @__PURE__ */ jsx3(DirectionsButton, {}, "directions") : null,
-    controls.dfm ? /* @__PURE__ */ jsx3(DfmButton, {}, "dfm") : null,
-    controls.sharpCorners ? /* @__PURE__ */ jsx3(SharpCornersButton, {}, "sharpCorners") : null,
-    controls.hover ? /* @__PURE__ */ jsx3(HoverButton, {}, "hover") : null,
-    controls.focus ? /* @__PURE__ */ jsx3(FocusButton, {}, "focus") : null,
-    controls.wireframe ? /* @__PURE__ */ jsx3(WireframeButton, {}, "wireframe") : null,
-    controls.section ? /* @__PURE__ */ jsx3(SectionButton, {}, "section") : null,
-    controls.measure ? /* @__PURE__ */ jsx3(MeasureButton, {}, "measure") : null
+    controls.directions ? /* @__PURE__ */ jsx4(DirectionsButton, {}, "directions") : null,
+    controls.dfm ? /* @__PURE__ */ jsx4(DfmButton, {}, "dfm") : null,
+    controls.sharpCorners ? /* @__PURE__ */ jsx4(SharpCornersButton, {}, "sharpCorners") : null,
+    controls.threads ? /* @__PURE__ */ jsx4(ThreadsButton, {}, "threads") : null,
+    controls.hover ? /* @__PURE__ */ jsx4(HoverButton, {}, "hover") : null,
+    controls.focus ? /* @__PURE__ */ jsx4(FocusButton, {}, "focus") : null,
+    controls.wireframe ? /* @__PURE__ */ jsx4(WireframeButton, {}, "wireframe") : null,
+    controls.section ? /* @__PURE__ */ jsx4(SectionButton, {}, "section") : null,
+    controls.measure ? /* @__PURE__ */ jsx4(MeasureButton, {}, "measure") : null
   ].filter(Boolean);
   const camera = [
-    controls.fit ? /* @__PURE__ */ jsx3(FitButton, {}, "fit") : null,
-    controls.reset ? /* @__PURE__ */ jsx3(ResetButton, {}, "reset") : null,
-    controls.top ? /* @__PURE__ */ jsx3(TopButton, {}, "top") : null
+    controls.fit ? /* @__PURE__ */ jsx4(FitButton, {}, "fit") : null,
+    controls.reset ? /* @__PURE__ */ jsx4(ResetButton, {}, "reset") : null,
+    controls.top ? /* @__PURE__ */ jsx4(TopButton, {}, "top") : null
   ].filter(Boolean);
-  return /* @__PURE__ */ jsxs2(Controls, { children: [
+  return /* @__PURE__ */ jsxs3(Controls, { children: [
     display,
-    display.length && analysis.length ? /* @__PURE__ */ jsx3(Divider, {}) : null,
+    display.length && analysis.length ? /* @__PURE__ */ jsx4(Divider, {}) : null,
     analysis,
-    (display.length || analysis.length) && camera.length ? /* @__PURE__ */ jsx3(Divider, {}) : null,
+    (display.length || analysis.length) && camera.length ? /* @__PURE__ */ jsx4(Divider, {}) : null,
     camera
   ] });
 };
 var ViewerToolbarRoot = ({ className: className2, children }) => {
   useViewerToolbar();
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       className: ["viewer-toolbar-stack", className2].filter(Boolean).join(" "),
       "data-viewer-toolbar": "true",
-      children: children ?? /* @__PURE__ */ jsx3(DefaultControls, {})
+      children: children ?? /* @__PURE__ */ jsx4(DefaultControls, {})
     }
   );
 };
@@ -502,6 +1273,7 @@ var ViewerToolbar = Object.assign(ViewerToolbarRoot, {
   DirectionsButton,
   DfmButton,
   SharpCornersButton,
+  ThreadsButton,
   HoverButton,
   FocusButton,
   WireframeButton,
@@ -513,11 +1285,11 @@ var ViewerToolbar = Object.assign(ViewerToolbarRoot, {
 });
 
 // src/stock.tsx
-import { useThree } from "@react-three/fiber";
-import { useEffect as useEffect2, useLayoutEffect, useMemo, useState as useState2 } from "react";
+import { useThree as useThree2 } from "@react-three/fiber";
+import { useEffect as useEffect3, useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useState as useState2 } from "react";
 
 // src/render/stock-mesh.ts
-import { Mesh } from "three";
+import { Mesh as Mesh2 } from "three";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 async function parseStockGlb(data) {
   const { scene } = await new GLTFLoader().parseAsync(data, "");
@@ -525,7 +1297,7 @@ async function parseStockGlb(data) {
     return stockMeshGeometries(scene);
   } finally {
     scene.traverse((object) => {
-      if (!(object instanceof Mesh)) return;
+      if (!(object instanceof Mesh2)) return;
       object.geometry.dispose();
       for (const material of Array.isArray(object.material) ? object.material : [object.material]) {
         material.dispose();
@@ -537,7 +1309,7 @@ function stockMeshGeometries(scene) {
   const geometries = [];
   scene.updateWorldMatrix(true, true);
   scene.traverse((object) => {
-    if (!(object instanceof Mesh)) return;
+    if (!(object instanceof Mesh2)) return;
     const geometry = object.geometry.clone().applyMatrix4(object.matrixWorld);
     if (!geometry.hasAttribute("normal")) geometry.computeVertexNormals();
     geometries.push(geometry);
@@ -592,30 +1364,30 @@ function createStockMeshBuffer() {
 
 // src/render/stock.ts
 import {
-  Box3,
+  Box3 as Box32,
   BoxGeometry,
-  BufferGeometry,
+  BufferGeometry as BufferGeometry3,
   CylinderGeometry,
-  Float32BufferAttribute,
-  Group,
-  LineBasicMaterial,
-  LineSegments,
-  Matrix4,
-  Mesh as Mesh2,
-  MeshLambertMaterial,
+  Float32BufferAttribute as Float32BufferAttribute3,
+  Group as Group2,
+  LineBasicMaterial as LineBasicMaterial2,
+  LineSegments as LineSegments2,
+  Matrix4 as Matrix42,
+  Mesh as Mesh3,
+  MeshLambertMaterial as MeshLambertMaterial2,
   Quaternion,
-  Vector3 as Vector32
+  Vector3 as Vector33
 } from "three";
 
 // src/render/stock-edges.ts
-import { MathUtils, Triangle, Vector3 } from "three";
+import { MathUtils, Triangle, Vector3 as Vector32 } from "three";
 var STOCK_EDGE_ANGLE = 15;
 var SYNC_EDGE_TRIANGLES = 2e4;
 var SLICE_MS = 4;
 var CHECK_EVERY = 256;
-var _v0 = new Vector3();
-var _v1 = new Vector3();
-var _normal = new Vector3();
+var _v0 = new Vector32();
+var _v1 = new Vector32();
+var _normal = new Vector32();
 var _triangle = new Triangle();
 function* edgeWork(geometry, thresholdAngle) {
   const precision = Math.pow(10, 4);
@@ -739,7 +1511,7 @@ function boxFigure(bounds) {
   };
 }
 var CYLINDER_SEGMENTS = 64;
-var CYLINDER_AXIS = new Vector32(0, 1, 0);
+var CYLINDER_AXIS = new Vector33(0, 1, 0);
 function fixedBoxStockBounds(geometry, dimensions, position = "model_centered", positionOffset = 0, offset = { x: 0, y: 0, z: 0 }) {
   if (![dimensions.x, dimensions.y, dimensions.z].every(Number.isFinite) || [dimensions.x, dimensions.y, dimensions.z].some((value) => value <= 0)) {
     throw new RangeError("Fixed stock dimensions must be finite and positive.");
@@ -751,12 +1523,12 @@ function fixedBoxStockBounds(geometry, dimensions, position = "model_centered",
     throw new RangeError("Fixed stock offset must be finite.");
   }
   const part = partBounds(geometry);
-  const center = part.getCenter(new Vector32());
+  const center = part.getCenter(new Vector33());
   const z = fixedStockLowerZ(part, dimensions.z, position, positionOffset);
-  return new Box3(
-    new Vector32(center.x - dimensions.x / 2, center.y - dimensions.y / 2, z),
-    new Vector32(center.x + dimensions.x / 2, center.y + dimensions.y / 2, z + dimensions.z)
-  ).translate(new Vector32(offset.x, offset.y, offset.z));
+  return new Box32(
+    new Vector33(center.x - dimensions.x / 2, center.y - dimensions.y / 2, z),
+    new Vector33(center.x + dimensions.x / 2, center.y + dimensions.y / 2, z + dimensions.z)
+  ).translate(new Vector33(offset.x, offset.y, offset.z));
 }
 function fixedCylinderStock(geometry, size, position = "model_centered", positionOffset = 0) {
   if (![size.diameter, size.length].every((value) => Number.isFinite(value) && value > 0)) {
@@ -766,7 +1538,7 @@ function fixedCylinderStock(geometry, size, position = "model_centered", positio
     throw new RangeError("Fixed stock position offset must be finite.");
   }
   const part = partBounds(geometry);
-  const center = part.getCenter(new Vector32());
+  const center = part.getCenter(new Vector33());
   return {
     origin: {
       x: center.x,
@@ -792,13 +1564,13 @@ function cylinderStockGeometry(input) {
   if (![diameter, length].every((value) => Number.isFinite(value) && value > 0)) {
     throw new RangeError("Cylinder stock diameter and length must be finite and positive.");
   }
-  const axis = new Vector32(figure.axis.x, figure.axis.y, figure.axis.z);
+  const axis = new Vector33(figure.axis.x, figure.axis.y, figure.axis.z);
   const norm = axis.length();
   if (!Number.isFinite(norm) || norm === 0) {
     throw new RangeError("Cylinder stock axis must be finite and non-zero.");
   }
   axis.divideScalar(norm);
-  const center = axis.clone().multiplyScalar(length / 2).add(new Vector32(origin.x, origin.y, origin.z));
+  const center = axis.clone().multiplyScalar(length / 2).add(new Vector33(origin.x, origin.y, origin.z));
   return new CylinderGeometry(diameter / 2, diameter / 2, length, CYLINDER_SEGMENTS).applyQuaternion(new Quaternion().setFromUnitVectors(CYLINDER_AXIS, axis)).translate(center.x, center.y, center.z);
 }
 function boxStockGeometry(input) {
@@ -826,12 +1598,12 @@ function orientedBoxStockGeometry(figure) {
   )) {
     throw new RangeError("Box stock frame and corners must be finite.");
   }
-  const size = new Vector32(upper.x - lower.x, upper.y - lower.y, upper.z - lower.z);
+  const size = new Vector33(upper.x - lower.x, upper.y - lower.y, upper.z - lower.z);
   if (size.toArray().some((value) => !(value > 0))) {
     throw new RangeError("Box stock upper corner must be above its lower corner on every axis.");
   }
-  const z = new Vector32(axis.x, axis.y, axis.z).normalize();
-  const x = new Vector32(refDirection.x, refDirection.y, refDirection.z);
+  const z = new Vector33(axis.x, axis.y, axis.z).normalize();
+  const x = new Vector33(refDirection.x, refDirection.y, refDirection.z);
   const reference = x.length();
   x.addScaledVector(z, -x.dot(z));
   if (!(z.lengthSq() > 0 && x.length() > 1e-9 * reference)) {
@@ -840,11 +1612,11 @@ function orientedBoxStockGeometry(figure) {
     );
   }
   x.normalize();
-  const y = new Vector32().crossVectors(z, x);
-  return new BoxGeometry(size.x, size.y, size.z).translate((lower.x + upper.x) / 2, (lower.y + upper.y) / 2, (lower.z + upper.z) / 2).applyMatrix4(new Matrix4().makeBasis(x, y, z).setPosition(location.x, location.y, location.z));
+  const y = new Vector33().crossVectors(z, x);
+  return new BoxGeometry(size.x, size.y, size.z).translate((lower.x + upper.x) / 2, (lower.y + upper.y) / 2, (lower.z + upper.z) / 2).applyMatrix4(new Matrix42().makeBasis(x, y, z).setPosition(location.x, location.y, location.z));
 }
 function boxStockBounds(geometry, allowance = 0, offset = { x: 0, y: 0, z: 0 }) {
-  const padding = typeof allowance === "number" ? new Vector32(allowance, allowance, allowance) : "wall" in allowance ? new Vector32(allowance.wall, allowance.wall, allowance.floor) : new Vector32(allowance.x, allowance.y, allowance.z);
+  const padding = typeof allowance === "number" ? new Vector33(allowance, allowance, allowance) : "wall" in allowance ? new Vector33(allowance.wall, allowance.wall, allowance.floor) : new Vector33(allowance.x, allowance.y, allowance.z);
   if (padding.toArray().some((value) => !Number.isFinite(value) || value < 0)) {
     throw new RangeError("Stock allowance must be finite and non-negative.");
   }
@@ -852,8 +1624,8 @@ function boxStockBounds(geometry, allowance = 0, offset = { x: 0, y: 0, z: 0 })
     throw new RangeError("Stock offset must be finite.");
   }
   const box = partBounds(geometry);
-  box.expandByVector(padding).translate(new Vector32(offset.x, offset.y, offset.z));
-  const size = box.getSize(new Vector32());
+  box.expandByVector(padding).translate(new Vector33(offset.x, offset.y, offset.z));
+  const size = box.getSize(new Vector33());
   if (size.toArray().some((value) => !Number.isFinite(value) || value <= 0)) {
     throw new RangeError("Stock dimensions must be finite and positive.");
   }
@@ -863,8 +1635,8 @@ function partBounds(geometry) {
   const position = geometry.getAttribute("position");
   if (!position || position.count === 0)
     throw new RangeError("Stock needs non-empty part geometry.");
-  const box = new Box3();
-  const point = new Vector32();
+  const box = new Box32();
+  const point = new Vector33();
   for (let index = 0; index < position.count; index += 1) {
     point.fromBufferAttribute(position, index);
     if (!Number.isFinite(point.x) || !Number.isFinite(point.y) || !Number.isFinite(point.z)) {
@@ -875,10 +1647,10 @@ function partBounds(geometry) {
   return box;
 }
 function createStock(geometry, legacyWorkpiece = false, onEdges) {
-  const material = new MeshLambertMaterial({ transparent: true, depthWrite: false });
-  const edgeMaterial = new LineBasicMaterial({ transparent: true, depthWrite: false });
-  const mesh = new Mesh2(geometry, material);
-  const object = new Group();
+  const material = new MeshLambertMaterial2({ transparent: true, depthWrite: false });
+  const edgeMaterial = new LineBasicMaterial2({ transparent: true, depthWrite: false });
+  const mesh = new Mesh3(geometry, material);
+  const object = new Group2();
   object.userData[STOCK_OBJECT] = true;
   mesh.renderOrder = legacyWorkpiece ? 2 : 5;
   mesh.raycast = () => {
@@ -895,9 +1667,9 @@ function createStock(geometry, legacyWorkpiece = false, onEdges) {
   let building = null;
   let shown = false;
   const attach = (positions) => {
-    const outline = new BufferGeometry();
-    outline.setAttribute("position", new Float32BufferAttribute(positions, 3));
-    edges = new LineSegments(outline, edgeMaterial);
+    const outline = new BufferGeometry3();
+    outline.setAttribute("position", new Float32BufferAttribute3(positions, 3));
+    edges = new LineSegments2(outline, edgeMaterial);
     edges.renderOrder = legacyWorkpiece ? 1 : 6;
     edges.raycast = () => {
     };
@@ -941,8 +1713,8 @@ function createStock(geometry, legacyWorkpiece = false, onEdges) {
 }
 
 // src/stock.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Stock = ({ geometry, glb, box, cylinder, ...appearance }) => geometry ? /* @__PURE__ */ jsx4(GeometryStock, { geometry, ...appearance }) : glb ? /* @__PURE__ */ jsx4(GlbStock, { glb, ...appearance }) : /* @__PURE__ */ jsx4(ShapeStock, { box, cylinder, ...appearance });
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Stock = ({ geometry, glb, box, cylinder, ...appearance }) => geometry ? /* @__PURE__ */ jsx5(GeometryStock, { geometry, ...appearance }) : glb ? /* @__PURE__ */ jsx5(GlbStock, { glb, ...appearance }) : /* @__PURE__ */ jsx5(ShapeStock, { box, cylinder, ...appearance });
 var GeometryStock = ({
   geometry,
   renderStyle = "overlay",
@@ -954,13 +1726,13 @@ var GeometryStock = ({
   edgeOpacity = renderStyle === "legacy-workpiece" ? 0.5 : 0.75,
   showEdges = true
 }) => {
-  const invalidate = useThree((state) => state.invalidate);
-  const stock = useMemo(
+  const invalidate = useThree2((state) => state.invalidate);
+  const stock = useMemo2(
     () => createStock(geometry, renderStyle === "legacy-workpiece", invalidate),
     [geometry, renderStyle, invalidate]
   );
-  useEffect2(() => () => stock.dispose(), [stock]);
-  useLayoutEffect(() => {
+  useEffect3(() => () => stock.dispose(), [stock]);
+  useLayoutEffect2(() => {
     stock.material.color.setHex(color);
     stock.material.emissive.setHex(emissive);
     if (stock.material.flatShading !== flatShading) {
@@ -988,20 +1760,20 @@ var GeometryStock = ({
     showEdges,
     stock
   ]);
-  return /* @__PURE__ */ jsx4("primitive", { object: stock.object, dispose: null });
+  return /* @__PURE__ */ jsx5("primitive", { object: stock.object, dispose: null });
 };
 var GlbStock = ({
   glb,
   retainPrevious = false,
   ...appearance
 }) => {
-  const buffer = useMemo(() => createStockMeshBuffer(), []);
+  const buffer = useMemo2(() => createStockMeshBuffer(), []);
   const [decoded, setDecoded] = useState2(null);
-  useEffect2(() => () => buffer.dispose(), [buffer]);
-  useLayoutEffect(() => {
+  useEffect3(() => () => buffer.dispose(), [buffer]);
+  useLayoutEffect2(() => {
     buffer.commit(decoded?.geometries ?? []);
   }, [buffer, decoded]);
-  useEffect2(
+  useEffect3(
     () => buffer.request(
       () => parseStockGlb(glb),
       (geometries) => {
@@ -1018,7 +1790,7 @@ var GlbStock = ({
   );
   if (!decoded || !retainPrevious && decoded.source !== glb) return null;
   if (decoded.error) throw decoded.error;
-  return decoded.geometries?.map((geometry) => /* @__PURE__ */ jsx4(GeometryStock, { geometry, ...appearance }, geometry.uuid));
+  return decoded.geometries?.map((geometry) => /* @__PURE__ */ jsx5(GeometryStock, { geometry, ...appearance }, geometry.uuid));
 };
 var keepNonFinite = (_key, value) => typeof value === "number" && !Number.isFinite(value) ? String(value) : value;
 var restoreNonFinite = (_key, value) => value === "NaN" || value === "Infinity" || value === "-Infinity" ? Number(value) : value;
@@ -1049,28 +1821,28 @@ var ShapeStock = ({
     },
     keepNonFinite
   );
-  const geometry = useMemo(() => {
+  const geometry = useMemo2(() => {
     const options = JSON.parse(figure, restoreNonFinite);
     const input = partGeometry ? { ...options, partGeometry } : options;
     return isBox ? boxStockGeometry(input) : cylinderStockGeometry(input);
   }, [figure, isBox, partGeometry]);
-  useEffect2(() => () => geometry.dispose(), [geometry]);
-  return /* @__PURE__ */ jsx4(GeometryStock, { geometry, ...appearance });
+  useEffect3(() => () => geometry.dispose(), [geometry]);
+  return /* @__PURE__ */ jsx5(GeometryStock, { geometry, ...appearance });
 };
 
 // src/banana.tsx
 import { useGLTF } from "@react-three/drei";
-import { useThree as useThree2 } from "@react-three/fiber";
-import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useRef } from "react";
+import { useThree as useThree3 } from "@react-three/fiber";
+import { useLayoutEffect as useLayoutEffect3, useMemo as useMemo3, useRef as useRef2 } from "react";
 
 // src/render/banana.ts
-import { Vector3 as Vector33 } from "three";
+import { Vector3 as Vector34 } from "three";
 var BANANA_GAP = 0.1;
 function bananaPosition(part, banana) {
-  const size = part.getSize(new Vector33());
+  const size = part.getSize(new Vector34());
   const reach = Math.max(size.x, size.y, size.z);
-  const centre = part.getCenter(new Vector33());
-  return new Vector33(
+  const centre = part.getCenter(new Vector34());
+  return new Vector34(
     part.max.x + reach * BANANA_GAP - banana.min.x,
     centre.y - (banana.min.y + banana.max.y) / 2,
     part.min.z - banana.min.z
@@ -1081,16 +1853,16 @@ function bananaFrameBounds(part, banana, position) {
 }
 
 // src/banana.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var BANANA_MODEL_URL = new URL("./assets/banana.glb", import.meta.url).href;
 var SKIN = "#e8b530";
 var FURNITURE = { [EXCLUDE_FROM_FRAME]: true };
 var Banana = ({ onPlaced }) => {
   const part = useContentBox();
-  const invalidate = useThree2((state) => state.invalidate);
+  const invalidate = useThree3((state) => state.invalidate);
   const gltf = useGLTF(BANANA_MODEL_URL);
-  const group = useRef(null);
-  const geometry = useMemo2(() => {
+  const group = useRef2(null);
+  const geometry = useMemo3(() => {
     let found = null;
     gltf.scene.traverse((object) => {
       const mesh = object;
@@ -1105,7 +1877,7 @@ var Banana = ({ onPlaced }) => {
     own.computeBoundingBox();
     return own;
   }, [gltf]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const node = group.current;
     const own = geometry?.boundingBox;
     if (!node || !own || part.isEmpty()) return;
@@ -1117,7 +1889,7 @@ var Banana = ({ onPlaced }) => {
     invalidate();
   }, [geometry, invalidate, onPlaced, part]);
   if (!geometry) return null;
-  return /* @__PURE__ */ jsx5("group", { ref: group, userData: FURNITURE, visible: false, children: /* @__PURE__ */ jsx5("mesh", { geometry, children: /* @__PURE__ */ jsx5("meshStandardMaterial", { color: SKIN, roughness: 0.85, metalness: 0 }) }) });
+  return /* @__PURE__ */ jsx6("group", { ref: group, userData: FURNITURE, visible: false, children: /* @__PURE__ */ jsx6("mesh", { geometry, children: /* @__PURE__ */ jsx6("meshStandardMaterial", { color: SKIN, roughness: 0.85, metalness: 0 }) }) });
 };
 
 // src/render/direction-highlights.ts
@@ -1136,17 +1908,17 @@ function directionHighlights(model, activeDirection = null) {
 
 // src/primitives.tsx
 import { GizmoHelper } from "@react-three/drei";
-import { useThree as useThree3 } from "@react-three/fiber";
-import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2, useState as useState3 } from "react";
+import { useThree as useThree4 } from "@react-three/fiber";
+import { useEffect as useEffect4, useMemo as useMemo4, useRef as useRef3, useState as useState3 } from "react";
 
 // src/render/grid.ts
-import { BufferGeometry as BufferGeometry2, Float32BufferAttribute as Float32BufferAttribute2, Vector3 as Vector34 } from "three";
+import { BufferGeometry as BufferGeometry4, Float32BufferAttribute as Float32BufferAttribute4, Vector3 as Vector35 } from "three";
 var STEPS = [0.1, 0.2, 0.5, 1, 2, 5, 10, 20, 25, 50, 100, 200, 250, 500, 1e3];
 var TARGET_CELLS = 10;
 var OVERHANG = 1.6;
 function gridSpec(box) {
-  const size = box.getSize(new Vector34());
-  const center = box.getCenter(new Vector34());
+  const size = box.getSize(new Vector35());
+  const center = box.getCenter(new Vector35());
   const largest = Math.max(size.x, size.y, 1e-6);
   const ideal = largest / TARGET_CELLS;
   const step = [...STEPS].reverse().find((candidate) => candidate <= ideal) ?? STEPS[0];
@@ -1172,8 +1944,8 @@ function gridGeometry(spec) {
       z
     );
   }
-  const geometry = new BufferGeometry2();
-  geometry.setAttribute("position", new Float32BufferAttribute2(positions, 3));
+  const geometry = new BufferGeometry4();
+  geometry.setAttribute("position", new Float32BufferAttribute4(positions, 3));
   return geometry;
 }
 function gridFor(box, options = {}) {
@@ -1190,26 +1962,26 @@ function gridFor(box, options = {}) {
 }
 
 // src/primitives.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var FURNITURE2 = { [EXCLUDE_FROM_FRAME]: true };
 var Grid = ({ step, extent, color, opacity = 0.35 }) => {
   const theme = resolveTheme();
   const box = useContentBox();
-  const geometry = useMemo3(() => gridFor(box, { step, extent }), [box, extent, step]);
-  useEffect3(() => () => geometry?.dispose(), [geometry]);
+  const geometry = useMemo4(() => gridFor(box, { step, extent }), [box, extent, step]);
+  useEffect4(() => () => geometry?.dispose(), [geometry]);
   if (!geometry) return null;
-  return /* @__PURE__ */ jsx6("lineSegments", { geometry, renderOrder: -1, raycast: () => null, userData: FURNITURE2, children: /* @__PURE__ */ jsx6("lineBasicMaterial", { color: color ?? theme.cubeEdge, transparent: true, opacity }) });
+  return /* @__PURE__ */ jsx7("lineSegments", { geometry, renderOrder: -1, raycast: () => null, userData: FURNITURE2, children: /* @__PURE__ */ jsx7("lineBasicMaterial", { color: color ?? theme.cubeEdge, transparent: true, opacity }) });
 };
-var Axes = ({ size = 25 }) => /* @__PURE__ */ jsx6("axesHelper", { args: [size], userData: FURNITURE2, raycast: () => null });
+var Axes = ({ size = 25 }) => /* @__PURE__ */ jsx7("axesHelper", { args: [size], userData: FURNITURE2, raycast: () => null });
 var ViewCube = ({
   alignment = "top-right",
   margin = [80, 80],
   theme,
   onViewChange
 }) => {
-  const resolved = useMemo3(() => resolveTheme(theme), [theme]);
-  const zones = useMemo3(() => cubeZones(), []);
-  return /* @__PURE__ */ jsx6(GizmoHelper, { alignment, margin, children: /* @__PURE__ */ jsx6(CubePanels, { zones, theme: resolved, onViewChange }) });
+  const resolved = useMemo4(() => resolveTheme(theme), [theme]);
+  const zones = useMemo4(() => cubeZones(), []);
+  return /* @__PURE__ */ jsx7(GizmoHelper, { alignment, margin, children: /* @__PURE__ */ jsx7(CubePanels, { zones, theme: resolved, onViewChange }) });
 };
 var CubePanels = ({
   zones,
@@ -1217,15 +1989,15 @@ var CubePanels = ({
   onViewChange
 }) => {
   const controls = useViewerControls();
-  const invalidate = useThree3((state) => state.invalidate);
-  const groupRef = useRef2(null);
+  const invalidate = useThree4((state) => state.invalidate);
+  const groupRef = useRef3(null);
   const [hovered, setHovered] = useState3(null);
-  const panels = useMemo3(
+  const panels = useMemo4(
     () => zones.map((zone) => ({ zone, geometry: panelGeometry(zone) })),
     [zones]
   );
-  const outline = useMemo3(() => cubeOutlineGeometry(zones), [zones]);
-  const labels = useMemo3(
+  const outline = useMemo4(() => cubeOutlineGeometry(zones), [zones]);
+  const labels = useMemo4(
     () => zones.filter((zone) => zone.kind === "face").map((zone) => ({
       zone,
       geometry: labelGeometry(zone),
@@ -1233,7 +2005,7 @@ var CubePanels = ({
     })),
     [theme.cubeLabel, zones]
   );
-  useEffect3(
+  useEffect4(
     () => () => {
       for (const panel of panels) panel.geometry.dispose();
       for (const label of labels) {
@@ -1252,8 +2024,8 @@ var CubePanels = ({
     setHovered(name);
     invalidate();
   };
-  return /* @__PURE__ */ jsxs3("group", { ref: groupRef, scale: 38, children: [
-    panels.map(({ zone, geometry }) => /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs4("group", { ref: groupRef, scale: 38, children: [
+    panels.map(({ zone, geometry }) => /* @__PURE__ */ jsx7(
       "mesh",
       {
         geometry,
@@ -1266,7 +2038,7 @@ var CubePanels = ({
           event.stopPropagation();
           choose(zone);
         },
-        children: /* @__PURE__ */ jsx6(
+        children: /* @__PURE__ */ jsx7(
           "meshLambertMaterial",
           {
             color: hovered === zone.name ? theme.hover : theme.cube,
@@ -1278,27 +2050,27 @@ var CubePanels = ({
       },
       zone.name
     )),
-    labels.map(({ zone, geometry, texture }) => /* @__PURE__ */ jsx6("mesh", { geometry, raycast: () => null, children: /* @__PURE__ */ jsx6("meshBasicMaterial", { map: texture, transparent: true }) }, `${zone.name}-label`)),
-    /* @__PURE__ */ jsx6("lineSegments", { geometry: outline, raycast: () => null, children: /* @__PURE__ */ jsx6("lineBasicMaterial", { color: theme.cubeEdge }) }),
-    /* @__PURE__ */ jsx6("ambientLight", { intensity: 1.4 }),
-    /* @__PURE__ */ jsx6("directionalLight", { position: [viewVector("top-front-right").x, 1, 2], intensity: 1.1 })
+    labels.map(({ zone, geometry, texture }) => /* @__PURE__ */ jsx7("mesh", { geometry, raycast: () => null, children: /* @__PURE__ */ jsx7("meshBasicMaterial", { map: texture, transparent: true }) }, `${zone.name}-label`)),
+    /* @__PURE__ */ jsx7("lineSegments", { geometry: outline, raycast: () => null, children: /* @__PURE__ */ jsx7("lineBasicMaterial", { color: theme.cubeEdge }) }),
+    /* @__PURE__ */ jsx7("ambientLight", { intensity: 1.4 }),
+    /* @__PURE__ */ jsx7("directionalLight", { position: [viewVector("top-front-right").x, 1, 2], intensity: 1.1 })
   ] });
 };
 
 // src/direction-arrows.tsx
-import { useThree as useThree4 } from "@react-three/fiber";
-import { useEffect as useEffect4, useMemo as useMemo4 } from "react";
-import { Quaternion as Quaternion2, Vector3 as Vector36 } from "three";
+import { useThree as useThree5 } from "@react-three/fiber";
+import { useEffect as useEffect5, useMemo as useMemo5 } from "react";
+import { Quaternion as Quaternion2, Vector3 as Vector37 } from "three";
 
 // src/render/directions.ts
-import { Vector3 as Vector35 } from "three";
+import { Vector3 as Vector36 } from "three";
 var LENGTH = 0.33;
 var GAP = 0.2;
 function arrowPlacement(direction, box) {
-  const center = box.getCenter(new Vector35());
-  const half = box.getSize(new Vector35()).multiplyScalar(0.5);
+  const center = box.getCenter(new Vector36());
+  const half = box.getSize(new Vector36()).multiplyScalar(0.5);
   const radius = half.length() || 1;
-  const axis = new Vector35(direction.x, direction.y, direction.z);
+  const axis = new Vector36(direction.x, direction.y, direction.z);
   if (axis.lengthSq() === 0) axis.set(0, 0, 1);
   axis.normalize();
   let exit = Number.POSITIVE_INFINITY;
@@ -1314,7 +2086,7 @@ function arrowPlacement(direction, box) {
 }
 
 // src/direction-arrows.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var FURNITURE3 = { [EXCLUDE_FROM_FRAME]: true };
 var DirectionArrows = ({
   directions,
@@ -1327,9 +2099,9 @@ var DirectionArrows = ({
   visible = true
 }) => {
   const box = useContentBox();
-  const resolved = useMemo4(() => resolveTheme(theme), [theme]);
-  const geometry = useMemo4(() => arrowGeometry(), []);
-  useEffect4(() => () => geometry.dispose(), [geometry]);
+  const resolved = useMemo5(() => resolveTheme(theme), [theme]);
+  const geometry = useMemo5(() => arrowGeometry(), []);
+  useEffect5(() => () => geometry.dispose(), [geometry]);
   const shown = shownDirection === void 0 ? activeDirection : shownDirection;
   const drawn = (index) => {
     if (shown === null) return true;
@@ -1341,10 +2113,10 @@ var DirectionArrows = ({
     // Excluded from framing: the arrows are deliberately placed outside the
     // part, so a Fit that measured them would frame the arrows and leave the
     // part small in the middle of them.
-    /* @__PURE__ */ jsxs4("group", { userData: FURNITURE3, children: [
+    /* @__PURE__ */ jsxs5("group", { userData: FURNITURE3, children: [
       directions.map((direction, index) => {
         if (!drawn(index)) return null;
-        return /* @__PURE__ */ jsx7(
+        return /* @__PURE__ */ jsx8(
           Arrow,
           {
             direction,
@@ -1357,7 +2129,7 @@ var DirectionArrows = ({
           `candidate-${index}`
         );
       }),
-      namedDirections.map((named) => /* @__PURE__ */ jsx7(
+      namedDirections.map((named) => /* @__PURE__ */ jsx8(
         Arrow,
         {
           direction: named.direction,
@@ -1369,7 +2141,7 @@ var DirectionArrows = ({
         },
         `named-${named.index}`
       )),
-      previewDirection ? /* @__PURE__ */ jsx7(
+      previewDirection ? /* @__PURE__ */ jsx8(
         Arrow,
         {
           direction: previewDirection,
@@ -1384,12 +2156,12 @@ var DirectionArrows = ({
   );
 };
 var Arrow = ({ direction, box, geometry, color, opacity, onPick, onTop = false }) => {
-  const invalidate = useThree4((state) => state.invalidate);
-  const { tip, length, quaternion } = useMemo4(() => {
+  const invalidate = useThree5((state) => state.invalidate);
+  const { tip, length, quaternion } = useMemo5(() => {
     const placement = arrowPlacement(direction, box);
     const aim = new Quaternion2().setFromUnitVectors(
       ARROW_AXIS,
-      new Vector36(direction.x, direction.y, direction.z).normalize()
+      new Vector37(direction.x, direction.y, direction.z).normalize()
     );
     return { tip: placement.tip, length: placement.length, quaternion: aim };
   }, [box, direction]);
@@ -1400,23 +2172,23 @@ var Arrow = ({ direction, box, geometry, color, opacity, onPick, onTop = false }
       invalidate();
     }
   } : {};
-  return /* @__PURE__ */ jsx7("group", { position: tip, quaternion, scale: length, renderOrder: onTop ? 10 : 3, children: /* @__PURE__ */ jsx7(ArrowMesh, { geometry, color, opacity, onTop, events: press }) });
+  return /* @__PURE__ */ jsx8("group", { position: tip, quaternion, scale: length, renderOrder: onTop ? 10 : 3, children: /* @__PURE__ */ jsx8(ArrowMesh, { geometry, color, opacity, onTop, events: press }) });
 };
 
 // src/section-tool.tsx
-import { useFrame, useThree as useThree5 } from "@react-three/fiber";
-import { useEffect as useEffect5, useMemo as useMemo5, useRef as useRef3, useState as useState4, useSyncExternalStore } from "react";
+import { useFrame as useFrame2, useThree as useThree6 } from "@react-three/fiber";
+import { useEffect as useEffect6, useMemo as useMemo6, useRef as useRef4, useState as useState4, useSyncExternalStore } from "react";
 import {
-  BufferGeometry as BufferGeometry3,
-  DoubleSide,
+  BufferGeometry as BufferGeometry5,
+  DoubleSide as DoubleSide3,
   Quaternion as Quaternion3,
   Raycaster,
   Vector2,
-  Vector3 as Vector37
+  Vector3 as Vector38
 } from "three";
-import { Fragment, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var FURNITURE4 = { [EXCLUDE_FROM_FRAME]: true };
-var Z = new Vector37(0, 0, 1);
+var Z = new Vector38(0, 0, 1);
 var AXIS_ROTATIONS = {
   x: [0, Math.PI / 2, 0],
   y: [Math.PI / 2, 0, 0],
@@ -1428,12 +2200,12 @@ var SectionTool = ({ theme }) => {
   const store = useSectionStore();
   const section = useSyncExternalStore(store.subscribe, store.get, store.get);
   const box = useContentBox();
-  const resolved = useMemo5(() => resolveTheme(theme), [theme]);
-  useEffect5(() => {
+  const resolved = useMemo6(() => resolveTheme(theme), [theme]);
+  useEffect6(() => {
     store.setEngaged(true);
     return () => store.setEngaged(false);
   }, [store]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!section) return void 0;
     const clear = (event) => {
       if (event.key === "Escape") store.set(null);
@@ -1442,43 +2214,43 @@ var SectionTool = ({ theme }) => {
     return () => window.removeEventListener("keydown", clear);
   }, [section, store]);
   if (box.isEmpty()) return null;
-  return /* @__PURE__ */ jsx8("group", { userData: FURNITURE4, children: section ? /* @__PURE__ */ jsx8(CutSheet, { box, section, theme: resolved }) : /* @__PURE__ */ jsx8(Picker, { box, theme: resolved }) });
+  return /* @__PURE__ */ jsx9("group", { userData: FURNITURE4, children: section ? /* @__PURE__ */ jsx9(CutSheet, { box, section, theme: resolved }) : /* @__PURE__ */ jsx9(Picker, { box, theme: resolved }) });
 };
 var useSquare = () => {
-  const square = useMemo5(
-    () => new BufferGeometry3().setFromPoints([
-      new Vector37(-1, 1, 0),
-      new Vector37(1, 1, 0),
-      new Vector37(1, -1, 0),
-      new Vector37(-1, -1, 0)
+  const square = useMemo6(
+    () => new BufferGeometry5().setFromPoints([
+      new Vector38(-1, 1, 0),
+      new Vector38(1, 1, 0),
+      new Vector38(1, -1, 0),
+      new Vector38(-1, -1, 0)
     ]),
     []
   );
-  useEffect5(() => () => square.dispose(), [square]);
+  useEffect6(() => () => square.dispose(), [square]);
   return square;
 };
 var Picker = ({ box, theme }) => {
   const store = useSectionStore();
-  const camera = useThree5((state) => state.camera);
-  const scene = useThree5((state) => state.scene);
-  const domElement = useThree5((state) => state.gl.domElement);
-  const invalidate = useThree5((state) => state.invalidate);
+  const camera = useThree6((state) => state.camera);
+  const scene = useThree6((state) => state.scene);
+  const domElement = useThree6((state) => state.gl.domElement);
+  const invalidate = useThree6((state) => state.invalidate);
   const isTap = useTapGuard();
   const square = useSquare();
-  const previewRef = useRef3(null);
-  const hover = useRef3(null);
+  const previewRef = useRef4(null);
+  const hover = useRef4(null);
   const [hoveredPlane, setHoveredPlane] = useState4(null);
-  const span = useMemo5(() => box.getSize(new Vector37()).length(), [box]);
-  const centre = useMemo5(() => box.getCenter(new Vector37()), [box]);
+  const span = useMemo6(() => box.getSize(new Vector38()).length(), [box]);
+  const centre = useMemo6(() => box.getCenter(new Vector38()), [box]);
   const previewSize = span * PREVIEW_SCALE;
-  useEffect5(() => {
+  useEffect6(() => {
     store.setPicking(true);
     return () => store.setPicking(false);
   }, [store]);
-  useEffect5(() => {
+  useEffect6(() => {
     const raycaster = new Raycaster();
     const pointer = new Vector2();
-    const aim = new Vector37();
+    const aim = new Vector38();
     const hide = () => {
       if (!hover.current) return;
       hover.current = null;
@@ -1525,7 +2297,7 @@ var Picker = ({ box, theme }) => {
   }, [box, camera, domElement, invalidate, isTap, scene, span, store]);
   const [planes, setPlanes] = useState4(() => axesPlanes(box, camera.position));
   const key = planes.map((plane) => plane.sign).join();
-  useFrame(() => {
+  useFrame2(() => {
     const next = [camera.position.x, camera.position.y, camera.position.z].map((eye, axis) => eye - [centre.x, centre.y, centre.z][axis] < 0 ? -1 : 1).join();
     if (next !== key) setPlanes(axesPlanes(box, camera.position));
   });
@@ -1549,29 +2321,29 @@ var Picker = ({ box, theme }) => {
       store.set(plane.options);
     }
   });
-  return /* @__PURE__ */ jsxs5(Fragment, { children: [
-    /* @__PURE__ */ jsxs5("group", { ref: previewRef, visible: false, children: [
-      /* @__PURE__ */ jsxs5("mesh", { renderOrder: SECTION_RENDER_ORDER.outline, raycast: () => null, children: [
-        /* @__PURE__ */ jsx8("planeGeometry", { args: [previewSize, previewSize] }),
-        /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsxs6("group", { ref: previewRef, visible: false, children: [
+      /* @__PURE__ */ jsxs6("mesh", { renderOrder: SECTION_RENDER_ORDER.outline, raycast: () => null, children: [
+        /* @__PURE__ */ jsx9("planeGeometry", { args: [previewSize, previewSize] }),
+        /* @__PURE__ */ jsx9(
           "meshBasicMaterial",
           {
             color: theme.sectionOutline,
             transparent: true,
             opacity: 0.2,
-            side: DoubleSide,
+            side: DoubleSide3,
             depthWrite: false
           }
         )
       ] }),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(
         "lineLoop",
         {
           geometry: square,
           scale: previewSize / 2,
           renderOrder: SECTION_RENDER_ORDER.outline,
           raycast: () => null,
-          children: /* @__PURE__ */ jsx8(
+          children: /* @__PURE__ */ jsx9(
             "lineBasicMaterial",
             {
               color: theme.sectionOutline,
@@ -1584,33 +2356,33 @@ var Picker = ({ box, theme }) => {
         }
       )
     ] }),
-    planes.map((plane) => /* @__PURE__ */ jsxs5(
+    planes.map((plane) => /* @__PURE__ */ jsxs6(
       "group",
       {
         position: [plane.position.x, plane.position.y, plane.position.z],
         rotation: AXIS_ROTATIONS[plane.axis],
         children: [
-          /* @__PURE__ */ jsxs5("mesh", { renderOrder: SECTION_RENDER_ORDER.outline, ...planeHandlers(plane), children: [
-            /* @__PURE__ */ jsx8("planeGeometry", { args: [plane.size, plane.size] }),
-            /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsxs6("mesh", { renderOrder: SECTION_RENDER_ORDER.outline, ...planeHandlers(plane), children: [
+            /* @__PURE__ */ jsx9("planeGeometry", { args: [plane.size, plane.size] }),
+            /* @__PURE__ */ jsx9(
               "meshBasicMaterial",
               {
                 color: AXIS_COLORS[plane.axis],
                 transparent: true,
                 opacity: hoveredPlane === plane.axis ? 0.45 : 0.3,
-                side: DoubleSide,
+                side: DoubleSide3,
                 depthWrite: false
               }
             )
           ] }),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "lineLoop",
             {
               geometry: square,
               scale: plane.size / 2,
               renderOrder: SECTION_RENDER_ORDER.outline,
               raycast: () => null,
-              children: /* @__PURE__ */ jsx8("lineBasicMaterial", { color: AXIS_COLORS[plane.axis], transparent: true, opacity: 0.7 })
+              children: /* @__PURE__ */ jsx9("lineBasicMaterial", { color: AXIS_COLORS[plane.axis], transparent: true, opacity: 0.7 })
             }
           )
         ]
@@ -1621,9 +2393,9 @@ var Picker = ({ box, theme }) => {
 };
 var CutSheet = ({ box, section, theme }) => {
   const square = useSquare();
-  const cut = useMemo5(() => resolveSectionPlane(section, box), [box, section]);
-  const span = useMemo5(() => box.getSize(new Vector37()).length(), [box]);
-  const placement = useMemo5(() => {
+  const cut = useMemo6(() => resolveSectionPlane(section, box), [box, section]);
+  const span = useMemo6(() => box.getSize(new Vector38()).length(), [box]);
+  const placement = useMemo6(() => {
     if (!cut) return null;
     const position = sectionAnchor(box, cut.plane).addScaledVector(
       cut.plane.normal,
@@ -1633,28 +2405,28 @@ var CutSheet = ({ box, section, theme }) => {
   }, [box, cut, span]);
   if (!placement) return null;
   const size = span * OUTLINE_SCALE;
-  return /* @__PURE__ */ jsxs5("group", { position: placement.position, quaternion: placement.quaternion, children: [
-    /* @__PURE__ */ jsxs5("mesh", { renderOrder: SECTION_RENDER_ORDER.outline, raycast: () => null, children: [
-      /* @__PURE__ */ jsx8("planeGeometry", { args: [size, size] }),
-      /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs6("group", { position: placement.position, quaternion: placement.quaternion, children: [
+    /* @__PURE__ */ jsxs6("mesh", { renderOrder: SECTION_RENDER_ORDER.outline, raycast: () => null, children: [
+      /* @__PURE__ */ jsx9("planeGeometry", { args: [size, size] }),
+      /* @__PURE__ */ jsx9(
         "meshBasicMaterial",
         {
           color: theme.sectionOutline,
           transparent: true,
           opacity: 0.1,
-          side: DoubleSide,
+          side: DoubleSide3,
           depthWrite: false
         }
       )
     ] }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       "lineLoop",
       {
         geometry: square,
         scale: size / 2,
         renderOrder: SECTION_RENDER_ORDER.outline,
         raycast: () => null,
-        children: /* @__PURE__ */ jsx8(
+        children: /* @__PURE__ */ jsx9(
           "lineBasicMaterial",
           {
             color: theme.sectionOutline,
@@ -1671,32 +2443,32 @@ var CutSheet = ({ box, section, theme }) => {
 
 // src/measure-tool.tsx
 import { Html, Line } from "@react-three/drei";
-import { useFrame as useFrame2, useThree as useThree6 } from "@react-three/fiber";
+import { useFrame as useFrame3, useThree as useThree7 } from "@react-three/fiber";
 import {
-  useEffect as useEffect6,
-  useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo6,
-  useRef as useRef4,
+  useEffect as useEffect7,
+  useLayoutEffect as useLayoutEffect4,
+  useMemo as useMemo7,
+  useRef as useRef5,
   useState as useState5,
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
 import {
-  Matrix4 as Matrix42,
+  Matrix4 as Matrix43,
   Raycaster as Raycaster2,
   SphereGeometry,
   Vector2 as Vector22,
-  Vector3 as Vector39
+  Vector3 as Vector310
 } from "three";
 
 // src/render/resample.ts
-import { Vector3 as Vector38 } from "three";
+import { Vector3 as Vector39 } from "three";
 var ON_PLANE = 1e-7;
 var STITCH = 1e-5;
 var COLLINEAR = 1e-6;
 function clipSegments(positions, plane) {
   const out = [];
-  const a = new Vector38();
-  const b = new Vector38();
+  const a = new Vector39();
+  const b = new Vector39();
   const count = Math.floor(positions.length / 6);
   for (let i = 0; i < count; i += 1) {
     a.set(positions[i * 6], positions[i * 6 + 1], positions[i * 6 + 2]);
@@ -1711,11 +2483,11 @@ function clipSegments(positions, plane) {
   return Float32Array.from(out);
 }
 function sectionContour(positions, regionOf, plane) {
-  const a = new Vector38();
-  const b = new Vector38();
-  const c = new Vector38();
-  const p = new Vector38();
-  const q = new Vector38();
+  const a = new Vector39();
+  const b = new Vector39();
+  const c = new Vector39();
+  const p = new Vector39();
+  const q = new Vector39();
   const byRegion = /* @__PURE__ */ new Map();
   const triangleCount2 = Math.floor(positions.length / 9);
   for (let t = 0; t < triangleCount2; t += 1) {
@@ -1773,17 +2545,17 @@ function stitch(segments, out) {
     return into.set(segments[o], segments[o + 1], segments[o + 2]);
   };
   const direction = (i, into) => {
-    const s = new Vector38();
-    const e = new Vector38();
+    const s = new Vector39();
+    const e = new Vector39();
     point(i, 0, s);
     point(i, 1, e);
     return into.subVectors(e, s).normalize();
   };
   const consumed = new Uint8Array(count);
-  const d = new Vector38();
-  const n = new Vector38();
+  const d = new Vector39();
+  const n = new Vector39();
   const next = (i, end) => {
-    const at = point(i, end, new Vector38());
+    const at = point(i, end, new Vector39());
     const list = ends.get(key(at.x, at.y, at.z)) ?? [];
     if (list.length !== 2) return null;
     const other = list.find((entry) => entry >> 1 !== i);
@@ -1812,8 +2584,8 @@ function stitch(segments, out) {
     };
     const back = walk(0);
     const forward = walk(1);
-    const s = point(back.index, back.end, new Vector38());
-    const e = point(forward.index, forward.end, new Vector38());
+    const s = point(back.index, back.end, new Vector39());
+    const e = point(forward.index, forward.end, new Vector39());
     out.push(s.x, s.y, s.z, e.x, e.y, e.z);
   }
 }
@@ -1821,8 +2593,8 @@ function pointInContour(point, plane, contour) {
   const [u, v] = planeAxes(plane);
   const px = point.dot(u);
   const py = point.dot(v);
-  const a = new Vector38();
-  const b = new Vector38();
+  const a = new Vector39();
+  const b = new Vector39();
   let inside = false;
   const count = Math.floor(contour.length / 6);
   for (let i = 0; i < count; i += 1) {
@@ -1839,15 +2611,15 @@ function pointInContour(point, plane, contour) {
   return inside;
 }
 function capHit(ray, plane, contour) {
-  const point = ray.intersectPlane(plane, new Vector38());
+  const point = ray.intersectPlane(plane, new Vector39());
   if (!point) return null;
   return pointInContour(point, plane, contour) ? point : null;
 }
 function planeAxes(plane) {
   const n = plane.normal;
-  const seed = Math.abs(n.x) < 0.9 ? new Vector38(1, 0, 0) : new Vector38(0, 1, 0);
-  const u = new Vector38().crossVectors(n, seed).normalize();
-  const v = new Vector38().crossVectors(n, u).normalize();
+  const seed = Math.abs(n.x) < 0.9 ? new Vector39(1, 0, 0) : new Vector39(0, 1, 0);
+  const u = new Vector39().crossVectors(n, seed).normalize();
+  const v = new Vector39().crossVectors(n, u).normalize();
   return [u, v];
 }
 function sampleSection(meshPositions, regionOf, edgePositions, plane) {
@@ -1860,7 +2632,7 @@ function sampleSection(meshPositions, regionOf, edgePositions, plane) {
 }
 
 // src/measure-tool.tsx
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var FURNITURE5 = { [EXCLUDE_FROM_FRAME]: true };
 var MEASURE_LABEL_CLASS = "toolpath-measure-label";
 var MeasureTool = ({
@@ -1874,26 +2646,26 @@ var MeasureTool = ({
 }) => {
   const store = useSectionStore();
   const box = useContentBox();
-  const resolved = useMemo6(() => resolveTheme(theme), [theme]);
+  const resolved = useMemo7(() => resolveTheme(theme), [theme]);
   const picking = useSyncExternalStore2(store.subscribe, store.isPicking, store.isPicking);
   const [held, setHeld] = useState5([]);
   const controlled = measurements !== void 0;
   const list = controlled ? measurements : held;
   const [draft, setDraft] = useState5([]);
-  useEffect6(() => {
+  useEffect7(() => {
     store.setEngaged(true);
     return () => store.setEngaged(false);
   }, [store]);
-  useEffect6(() => {
+  useEffect7(() => {
     setDraft([]);
   }, [mode]);
   const commit = (next) => {
     if (!controlled) setHeld(next);
     onChange?.(next);
   };
-  const latest = useRef4({ list, commit });
+  const latest = useRef5({ list, commit });
   latest.current = { list, commit };
-  useEffect6(() => {
+  useEffect7(() => {
     const onKey = (event) => {
       if (event.key === "Escape") {
         setDraft([]);
@@ -1921,8 +2693,8 @@ var MeasureTool = ({
   };
   if (box.isEmpty()) return null;
   const label = className(labelClassName);
-  return /* @__PURE__ */ jsxs6("group", { userData: FURNITURE5, children: [
-    picking ? null : /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs7("group", { userData: FURNITURE5, children: [
+    picking ? null : /* @__PURE__ */ jsx10(
       Snapper,
       {
         mode,
@@ -1933,7 +2705,7 @@ var MeasureTool = ({
         label
       }
     ),
-    draft.map((point, index) => /* @__PURE__ */ jsx9(
+    draft.map((point, index) => /* @__PURE__ */ jsx10(
       ScreenDot,
       {
         point,
@@ -1942,8 +2714,8 @@ var MeasureTool = ({
       },
       index
     )),
-    draft.length === 2 ? /* @__PURE__ */ jsx9(Segment, { points: [draft[0], draft[1]], color: resolved.measure }) : null,
-    list.map((measurement) => /* @__PURE__ */ jsx9(
+    draft.length === 2 ? /* @__PURE__ */ jsx10(Segment, { points: [draft[0], draft[1]], color: resolved.measure }) : null,
+    list.map((measurement) => /* @__PURE__ */ jsx10(
       MeasurementView,
       {
         measurement,
@@ -1957,28 +2729,28 @@ var MeasureTool = ({
   ] });
 };
 var NO_POINTER = { pointerEvents: "none" };
-var NOWHERE = [new Vector39(), new Vector39()];
+var NOWHERE = [new Vector310(), new Vector310()];
 var Snapper = ({ mode, draft, onPlace, theme, format, label }) => {
-  const camera = useThree6((state) => state.camera);
-  const scene = useThree6((state) => state.scene);
-  const size = useThree6((state) => state.size);
-  const domElement = useThree6((state) => state.gl.domElement);
-  const invalidate = useThree6((state) => state.invalidate);
+  const camera = useThree7((state) => state.camera);
+  const scene = useThree7((state) => state.scene);
+  const size = useThree7((state) => state.size);
+  const domElement = useThree7((state) => state.gl.domElement);
+  const invalidate = useThree7((state) => state.invalidate);
   const isTap = useTapGuard();
-  const marker = useRef4(null);
-  const edgeLine = useRef4(null);
-  const band = useRef4(null);
-  const bandLabel = useRef4(null);
-  const bandText = useRef4(null);
-  const snap = useRef4(null);
+  const marker = useRef5(null);
+  const edgeLine = useRef5(null);
+  const band = useRef5(null);
+  const bandLabel = useRef5(null);
+  const bandText = useRef5(null);
+  const snap = useRef5(null);
   const dot = useDot();
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     if (edgeLine.current) edgeLine.current.visible = false;
     if (band.current) band.current.visible = false;
   }, []);
-  const current = useRef4({ mode, draft, onPlace, format, size });
+  const current = useRef5({ mode, draft, onPlace, format, size });
   current.current = { mode, draft, onPlace, format, size };
-  useEffect6(() => {
+  useEffect7(() => {
     const raycaster = new Raycaster2();
     const pointer = new Vector22();
     const samples = new SampleCache();
@@ -2010,7 +2782,7 @@ var Snapper = ({ mode, draft, onPlace, theme, format, label }) => {
       const snapped = snapAt(target, target.edges, camera, viewport);
       const from = placed[placed.length - 1];
       const lock = shift && from ? lockToAxis(from, snapped.point) : null;
-      const found = lock ? { ...snapped, point: new Vector39(lock.point.x, lock.point.y, lock.point.z), edge: null } : snapped;
+      const found = lock ? { ...snapped, point: new Vector310(lock.point.x, lock.point.y, lock.point.z), edge: null } : snapped;
       snap.current = found;
       const node = marker.current;
       if (node) {
@@ -2084,7 +2856,7 @@ var Snapper = ({ mode, draft, onPlace, theme, format, label }) => {
       window.removeEventListener("keyup", key);
     };
   }, [camera, domElement, invalidate, isTap, scene, theme.measure]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (draft.length === 0 && band.current) {
       band.current.visible = false;
       if (bandLabel.current) bandLabel.current.visible = false;
@@ -2095,9 +2867,9 @@ var Snapper = ({ mode, draft, onPlace, theme, format, label }) => {
       invalidate();
     }
   }, [draft, invalidate]);
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx9("group", { ref: marker, visible: false, children: /* @__PURE__ */ jsx9("mesh", { geometry: dot, renderOrder: MEASURE_RENDER_ORDER, raycast: () => null, children: /* @__PURE__ */ jsx9("meshBasicMaterial", { color: theme.measureSnap, depthTest: false, depthWrite: false }) }) }),
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    /* @__PURE__ */ jsx10("group", { ref: marker, visible: false, children: /* @__PURE__ */ jsx10("mesh", { geometry: dot, renderOrder: MEASURE_RENDER_ORDER, raycast: () => null, children: /* @__PURE__ */ jsx10("meshBasicMaterial", { color: theme.measureSnap, depthTest: false, depthWrite: false }) }) }),
+    /* @__PURE__ */ jsx10(
       Line,
       {
         ref: edgeLine,
@@ -2111,7 +2883,7 @@ var Snapper = ({ mode, draft, onPlace, theme, format, label }) => {
         raycast: () => null
       }
     ),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       Line,
       {
         ref: band,
@@ -2125,7 +2897,7 @@ var Snapper = ({ mode, draft, onPlace, theme, format, label }) => {
         raycast: () => null
       }
     ),
-    /* @__PURE__ */ jsx9("group", { ref: bandLabel, visible: false, children: /* @__PURE__ */ jsx9(Html, { center: true, zIndexRange: [0, 0], style: NO_POINTER, children: /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10("group", { ref: bandLabel, visible: false, children: /* @__PURE__ */ jsx10(Html, { center: true, zIndexRange: [0, 0], style: NO_POINTER, children: /* @__PURE__ */ jsx10(
       "div",
       {
         ref: bandText,
@@ -2172,7 +2944,7 @@ function targetUnderRay(raycaster, scene, samples) {
       edges: samples.edgesFor(hit.object)
     };
   }
-  const local = new Matrix42();
+  const local = new Matrix43();
   for (const mesh of cutMeshes(scene)) {
     const planes = clippingPlanesOf(mesh);
     const sample = samples.for(mesh, planes);
@@ -2235,7 +3007,7 @@ var SampleCache = class {
     const key = planes.map((plane) => `${plane.normal.x},${plane.normal.y},${plane.normal.z},${plane.constant}`).join("|");
     const cached = this.held.get(mesh);
     if (cached && cached.key === key) return cached;
-    const local = new Matrix42().copy(mesh.matrixWorld).invert();
+    const local = new Matrix43().copy(mesh.matrixWorld).invert();
     const localPlanes = planes.map((plane) => plane.clone().applyMatrix4(local));
     const positions = mesh.geometry.getAttribute("position")?.array ?? [];
     const regionOf = this.regionsOf(mesh.geometry);
@@ -2290,37 +3062,37 @@ var MeasurementView = ({
   const anchor = measurementLabelAnchor(measurement);
   if (measurement.kind === "distance") {
     const [a2, b2] = measurement.points;
-    return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-      /* @__PURE__ */ jsx9(Segment, { points: [a2, b2], color: theme.measure }),
-      /* @__PURE__ */ jsx9(ScreenDot, { point: a2, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
-      /* @__PURE__ */ jsx9(ScreenDot, { point: b2, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
-      showDeltas ? /* @__PURE__ */ jsx9(DeltaLegs, { a: a2, b: b2, id: measurement.id, format, label }) : null,
-      /* @__PURE__ */ jsx9(Label, { at: anchor, text, kind: "distance", id: measurement.id, className: label })
+    return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      /* @__PURE__ */ jsx10(Segment, { points: [a2, b2], color: theme.measure }),
+      /* @__PURE__ */ jsx10(ScreenDot, { point: a2, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
+      /* @__PURE__ */ jsx10(ScreenDot, { point: b2, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
+      showDeltas ? /* @__PURE__ */ jsx10(DeltaLegs, { a: a2, b: b2, id: measurement.id, format, label }) : null,
+      /* @__PURE__ */ jsx10(Label, { at: anchor, text, kind: "distance", id: measurement.id, className: label })
     ] });
   }
   const [a, vertex, b] = measurement.points;
   const arc = angleArc(vertex, a, b, angleArcRadius(vertex, a, b));
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx9(Segment, { points: [vertex, a], color: theme.measure }),
-    /* @__PURE__ */ jsx9(Segment, { points: [vertex, b], color: theme.measure }),
-    /* @__PURE__ */ jsx9(Polyline, { points: arc, color: theme.measure }),
-    /* @__PURE__ */ jsx9(ScreenDot, { point: a, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
-    /* @__PURE__ */ jsx9(ScreenDot, { point: vertex, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
-    /* @__PURE__ */ jsx9(ScreenDot, { point: b, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
-    /* @__PURE__ */ jsx9(Label, { at: anchor, text, kind: "angle", id: measurement.id, className: label })
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    /* @__PURE__ */ jsx10(Segment, { points: [vertex, a], color: theme.measure }),
+    /* @__PURE__ */ jsx10(Segment, { points: [vertex, b], color: theme.measure }),
+    /* @__PURE__ */ jsx10(Polyline, { points: arc, color: theme.measure }),
+    /* @__PURE__ */ jsx10(ScreenDot, { point: a, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
+    /* @__PURE__ */ jsx10(ScreenDot, { point: vertex, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
+    /* @__PURE__ */ jsx10(ScreenDot, { point: b, pixels: MEASURE_MARKER_PIXELS, color: theme.measure }),
+    /* @__PURE__ */ jsx10(Label, { at: anchor, text, kind: "angle", id: measurement.id, className: label })
   ] });
 };
 var DeltaLegs = ({ a, b, id, format, label }) => {
-  const camera = useThree6((state) => state.camera);
-  const size = useThree6((state) => state.size);
-  const invalidate = useThree6((state) => state.invalidate);
-  const legs = useMemo6(() => deltaLegs(a, b), [a, b]);
-  const lines = useRef4([]);
-  const centre = useMemo6(() => {
+  const camera = useThree7((state) => state.camera);
+  const size = useThree7((state) => state.size);
+  const invalidate = useThree7((state) => state.invalidate);
+  const legs = useMemo7(() => deltaLegs(a, b), [a, b]);
+  const lines = useRef5([]);
+  const centre = useMemo7(() => {
     const at = midpoint(a, b);
-    return new Vector39(at.x, at.y, at.z);
+    return new Vector310(at.x, at.y, at.z);
   }, [a, b]);
-  useFrame2(() => {
+  useFrame3(() => {
     const dash = screenLength(camera, centre, size, DELTA_DASH_PIXELS);
     let changed = false;
     for (const line of lines.current) {
@@ -2332,16 +3104,16 @@ var DeltaLegs = ({ a, b, id, format, label }) => {
     }
     if (changed) invalidate();
   });
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    legs.map((leg, index) => /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    legs.map((leg, index) => /* @__PURE__ */ jsx10(
       Line,
       {
         ref: (line) => {
           lines.current[index] = line;
         },
         points: [
-          new Vector39(leg.from.x, leg.from.y, leg.from.z),
-          new Vector39(leg.to.x, leg.to.y, leg.to.z)
+          new Vector310(leg.from.x, leg.from.y, leg.from.z),
+          new Vector310(leg.to.x, leg.to.y, leg.to.z)
         ],
         color: AXIS_COLORS[leg.axis],
         lineWidth: MEASURE_LINE_PIXELS.leg,
@@ -2356,7 +3128,7 @@ var DeltaLegs = ({ a, b, id, format, label }) => {
       },
       leg.axis
     )),
-    legs.map((leg) => /* @__PURE__ */ jsx9(
+    legs.map((leg) => /* @__PURE__ */ jsx10(
       Label,
       {
         at: midpoint(leg.from, leg.to),
@@ -2370,15 +3142,15 @@ var DeltaLegs = ({ a, b, id, format, label }) => {
     ))
   ] });
 };
-var Label = ({ at, text, kind, id, axis, className: name }) => /* @__PURE__ */ jsx9("group", { position: [at.x, at.y, at.z], children: /* @__PURE__ */ jsx9(Html, { center: true, zIndexRange: [0, 0], style: NO_POINTER, children: /* @__PURE__ */ jsx9("div", { className: name, "data-measure-label": kind, "data-measurement-id": id, "data-axis": axis, children: text }) }) });
+var Label = ({ at, text, kind, id, axis, className: name }) => /* @__PURE__ */ jsx10("group", { position: [at.x, at.y, at.z], children: /* @__PURE__ */ jsx10(Html, { center: true, zIndexRange: [0, 0], style: NO_POINTER, children: /* @__PURE__ */ jsx10("div", { className: name, "data-measure-label": kind, "data-measurement-id": id, "data-axis": axis, children: text }) }) });
 var ScreenDot = ({ point, pixels, color }) => {
-  const camera = useThree6((state) => state.camera);
-  const size = useThree6((state) => state.size);
-  const invalidate = useThree6((state) => state.invalidate);
-  const node = useRef4(null);
+  const camera = useThree7((state) => state.camera);
+  const size = useThree7((state) => state.size);
+  const invalidate = useThree7((state) => state.invalidate);
+  const node = useRef5(null);
   const dot = useDot();
-  const position = useMemo6(() => new Vector39(point.x, point.y, point.z), [point]);
-  useFrame2(() => {
+  const position = useMemo7(() => new Vector310(point.x, point.y, point.z), [point]);
+  useFrame3(() => {
     const group = node.current;
     if (!group) return;
     const length = screenLength(camera, position, size, pixels);
@@ -2387,21 +3159,21 @@ var ScreenDot = ({ point, pixels, color }) => {
       invalidate();
     }
   });
-  return /* @__PURE__ */ jsx9("group", { ref: node, position, children: /* @__PURE__ */ jsx9("mesh", { geometry: dot, renderOrder: MEASURE_RENDER_ORDER, raycast: () => null, children: /* @__PURE__ */ jsx9("meshBasicMaterial", { color, depthTest: false, depthWrite: false }) }) });
+  return /* @__PURE__ */ jsx10("group", { ref: node, position, children: /* @__PURE__ */ jsx10("mesh", { geometry: dot, renderOrder: MEASURE_RENDER_ORDER, raycast: () => null, children: /* @__PURE__ */ jsx10("meshBasicMaterial", { color, depthTest: false, depthWrite: false }) }) });
 };
 var Segment = ({ points, color }) => {
   const [a, b] = points;
-  const ends = useMemo6(
-    () => [new Vector39(a.x, a.y, a.z), new Vector39(b.x, b.y, b.z)],
+  const ends = useMemo7(
+    () => [new Vector310(a.x, a.y, a.z), new Vector310(b.x, b.y, b.z)],
     // Keyed on the numbers: a draft's tuple is a fresh array on every render,
     // and a rebuilt array would rebuild the line's geometry with it.
     [a.x, a.y, a.z, b.x, b.y, b.z]
   );
-  return /* @__PURE__ */ jsx9(Polyline, { points: ends, color });
+  return /* @__PURE__ */ jsx10(Polyline, { points: ends, color });
 };
 var Polyline = ({ points, color }) => {
   if (points.length < 2) return null;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     Line,
     {
       points,
@@ -2416,8 +3188,8 @@ var Polyline = ({ points, color }) => {
   );
 };
 function useDot() {
-  const geometry = useMemo6(() => new SphereGeometry(1, 16, 12), []);
-  useEffect6(() => () => geometry.dispose(), [geometry]);
+  const geometry = useMemo7(() => new SphereGeometry(1, 16, 12), []);
+  useEffect7(() => () => geometry.dispose(), [geometry]);
   return geometry;
 }
 function isEditing(target) {
@@ -2430,11 +3202,11 @@ function className(extra) {
 
 // src/tool-marks.tsx
 import { Html as Html2, Line as Line2 } from "@react-three/drei";
-import { useMemo as useMemo7 } from "react";
-import { DoubleSide as DoubleSide2 } from "three";
+import { useMemo as useMemo8 } from "react";
+import { DoubleSide as DoubleSide4 } from "three";
 
 // src/render/tool-marks.ts
-import { Quaternion as Quaternion4, Vector2 as Vector23, Vector3 as Vector310 } from "three";
+import { Quaternion as Quaternion4, Vector2 as Vector23, Vector3 as Vector311 } from "three";
 var TOOL_CORNER_STEPS = 12;
 var TOOL_ROUND = 64;
 function toolProfile(radius, corner, height) {
@@ -2454,9 +3226,9 @@ function toolProfile(radius, corner, height) {
   points.push(new Vector23(radius, Math.max(height, rounded)));
   return points;
 }
-var UP = new Vector310(0, 1, 0);
-var AXES = [new Vector310(1, 0, 0), new Vector310(0, 1, 0), new Vector310(0, 0, 1)];
-var toVector = ({ x, y, z }) => new Vector310(x, y, z);
+var UP = new Vector311(0, 1, 0);
+var AXES = [new Vector311(1, 0, 0), new Vector311(0, 1, 0), new Vector311(0, 0, 1)];
+var toVector = ({ x, y, z }) => new Vector311(x, y, z);
 var squareTo = (w, along) => {
   const wanted = along ? toVector(along) : null;
   const flat = wanted?.clone().addScaledVector(w, -wanted.dot(w));
@@ -2476,7 +3248,7 @@ function toolMarkShape(mark) {
   if (!(mark.diameter > 0) || axis.lengthSq() === 0) return null;
   const w = axis.normalize();
   const u = squareTo(w, mark.across);
-  const v = new Vector310().crossVectors(w, u);
+  const v = new Vector311().crossVectors(w, u);
   const radius = mark.diameter / 2;
   const corner = Math.min(Math.max(mark.cornerRadius ?? 0, 0), radius);
   const height = Math.max(mark.height, corner);
@@ -2506,13 +3278,12 @@ function toolMarkShape(mark) {
 }
 
 // src/tool-marks.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var BODY = { color: 16317180, opacity: 0.32 };
 var NO_POINTER2 = { pointerEvents: "none" };
-var ignoreRay = () => void 0;
 var ToolMarks = ({ marks, visible = true, labelClassName, theme }) => {
   const color = resolveTheme(theme).measure;
-  const shapes = useMemo7(
+  const shapes = useMemo8(
     () => marks.flatMap((mark) => {
       const shape = toolMarkShape(mark);
       return shape ? [{ mark, shape }] : [];
@@ -2520,9 +3291,9 @@ var ToolMarks = ({ marks, visible = true, labelClassName, theme }) => {
     [marks]
   );
   const label = labelClassName ? `${MEASURE_LABEL_CLASS} ${labelClassName}` : MEASURE_LABEL_CLASS;
-  return /* @__PURE__ */ jsx10("group", { visible, userData: { [EXCLUDE_FROM_FRAME]: true }, children: shapes.map(({ mark, shape }, index) => /* @__PURE__ */ jsxs7("group", { children: [
-    /* @__PURE__ */ jsx10(ToolBody, { shape }),
-    [...shape.rims, shape.dimension, ...shape.ticks].map((points, line) => /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11("group", { visible, userData: { [EXCLUDE_FROM_FRAME]: true }, children: shapes.map(({ mark, shape }, index) => /* @__PURE__ */ jsxs8("group", { children: [
+    /* @__PURE__ */ jsx11(ToolBody, { shape }),
+    [...shape.rims, shape.dimension, ...shape.ticks].map((points, line) => /* @__PURE__ */ jsx11(
       Line2,
       {
         points,
@@ -2535,16 +3306,16 @@ var ToolMarks = ({ marks, visible = true, labelClassName, theme }) => {
       },
       line
     )),
-    mark.label && visible ? /* @__PURE__ */ jsx10(Html2, { position: shape.labelAt, center: true, zIndexRange: [0, 0], style: NO_POINTER2, children: /* @__PURE__ */ jsxs7("div", { className: label, "data-measure-label": "tool", children: [
-      /* @__PURE__ */ jsx10("span", { "data-measure-value": true, children: mark.label }),
-      mark.note ? /* @__PURE__ */ jsxs7("span", { "data-measure-note": true, children: [
+    mark.label && visible ? /* @__PURE__ */ jsx11(Html2, { position: shape.labelAt, center: true, zIndexRange: [0, 0], style: NO_POINTER2, children: /* @__PURE__ */ jsxs8("div", { className: label, "data-measure-label": "tool", children: [
+      /* @__PURE__ */ jsx11("span", { "data-measure-value": true, children: mark.label }),
+      mark.note ? /* @__PURE__ */ jsxs8("span", { "data-measure-note": true, children: [
         " ",
         mark.note
       ] }) : null
     ] }) }) : null
   ] }, index)) });
 };
-var ToolBody = ({ shape }) => /* @__PURE__ */ jsxs7(
+var ToolBody = ({ shape }) => /* @__PURE__ */ jsxs8(
   "mesh",
   {
     position: shape.base,
@@ -2552,15 +3323,15 @@ var ToolBody = ({ shape }) => /* @__PURE__ */ jsxs7(
     raycast: ignoreRay,
     renderOrder: MEASURE_RENDER_ORDER - 1,
     children: [
-      /* @__PURE__ */ jsx10("latheGeometry", { args: [shape.profile, 64] }),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11("latheGeometry", { args: [shape.profile, 64] }),
+      /* @__PURE__ */ jsx11(
         "meshBasicMaterial",
         {
           color: BODY.color,
           transparent: true,
           opacity: BODY.opacity,
           depthWrite: false,
-          side: DoubleSide2
+          side: DoubleSide4
         }
       )
     ]
@@ -2626,6 +3397,7 @@ export {
   DirectionArrows,
   EXCLUDE_FROM_FRAME,
   EnginePart,
+  ExplodedPart,
   ExtendedCameraControls,
   FEATURE_TYPE_RANKS,
   Grid,
@@ -2699,6 +3471,7 @@ export {
   clipSegments,
   contentBounds,
   createCapMaterial,
+  createExplodeAmount,
   createMaskMaterial,
   createMaskTarget,
   createPart,