@toolpath/viewer 2.3.3 → 2.5.0

package/README.md

@@ -331,6 +331,7 @@ the part opaque. For multiselection, update your own tag array and avoid duplica
 | `showOrbitTarget`       | `false`           | Show the pivot marker.                                                                |
 | `theme`                 | Default lighting  | Override lighting; part/cube/tool colors have their own theme props.                  |
 | `onPointerMissed`       | —                 | Empty-space primary click, with drag guarding; use it to clear selection.             |
+| `webglUnavailable`      | Default message   | Content of the alert shown instead of the canvas when WebGL is unavailable.           |
 | `style`, `className`    | Full-size wrapper | Set dimensions and background on the wrapper or parent.                               |
 | `ref`                   | —                 | `ViewerHandle` for controls outside the canvas.                                       |
 
@@ -340,6 +341,13 @@ the part opaque. For multiselection, update your own tag array and avoid duplica
 Named views are `top`, `bottom`, `front`, `back`, `left`, `right`, and `isometric`.
 Direction vectors point from the part toward the camera.
 
+`Viewer` checks for WebGL2 once per page, on the client. If the browser will not create a context
+(hardware acceleration off or the GPU blocklisted), it renders a `role="alert"`
+element (`viewer-webgl-unavailable`, `data-viewer-webgl-unavailable="true"`) in
+place of the canvas, asking the user to turn on graphics acceleration; children are
+not rendered. Pass `webglUnavailable` to replace that message. Server rendering assumes
+WebGL is available; the check runs on the client after hydration.
+
 #### CAD controls
 
 | Preset               | Rotate                                          | Pan                             | Zoom                        |
@@ -375,6 +383,7 @@ fails or is absent. It does not fetch a report or start an Engine job.
 | `activeDirection`                    | Candidate-direction index; `null`/omitted means all directions.                                                       |
 | `display`, `showEdges`               | `solid` or `wireframe`; outlines default on. Wireframe always shows semantic face boundaries, not triangle diagonals. |
 | `sharpCorners`                       | `{ features: tags }` for externally flagged features, or `null`.                                                      |
+| `threads`                            | `{ threads: marks }` to draw threads in their holes, or `null`. See "Showing threads".                                |
 | `section`, `onSectionChange`         | Controlled section options and change reporting. Omit `section` to follow the viewer's section store.                 |
 | `onAdjacency`                        | Receive touching-region sets for the prepared mesh.                                                                   |
 | `theme`                              | Partial `ViewerTheme` for the part.                                                                                   |
@@ -468,7 +477,7 @@ With no children, `ViewerToolbar` renders configured controls in standard order.
 For custom composition use `ViewerToolbar.Controls`, `ViewerToolbar.Divider`, and
 its `*Button` components. A button without a matching provider control throws.
 The supported action names are `stock`, `axes`, `grid`, `banana`, `tools`,
-`directions`, `dfm`, `sharpCorners`, `hover`, `focus`, `wireframe`, `section`,
+`directions`, `dfm`, `sharpCorners`, `threads`, `hover`, `focus`, `wireframe`, `section`,
 `measure`, `fit`, `reset`, and `top`; button names capitalize the action, such as
 `ViewerToolbar.SharpCornersButton`. `useViewerToolbar()` reads those controls.
 
@@ -670,6 +679,19 @@ axis legs also have `data-axis`, and finished labels have `data-measurement-id`.
 millimetres; the `format(mm)` callback changes their displayed string, not geometry
 units or angles (which remain degrees).
 
+### Showing threads
+
+The Engine cuts a modeled internal thread out of the mesh, so a tapped hole arrives as a
+plain bore. Pass `threads={{ threads: marks }}` to draw each thread back in as shading
+over its hole's cylinders, at its pitch and hand. Build a mark from a hole's Engine
+datasheet with `threadMark(feature, datasheet)` from `@toolpath/viewer/engine`; it is
+`null` unless the datasheet carries a thread, so only threads the Engine reports are
+drawn. A `ThreadMark` is `{ regions, pitch, majorDiameter }`: `pitch` is in mm and
+negative for a left-hand thread, and cylinders wider than `majorDiameter` (a counterbore)
+stay plain. The axis is fitted from the mesh, so marks need no coordinates. The datasheet
+gives no thread length, so a tap-drill section of the same bore below the thread is
+drawn threaded too.
+
 ### Showing sharp corners and tool marks
 
 DFM decisions belong to the application. Pass flagged feature tags as
@@ -719,9 +741,9 @@ Part keys include `part`, `partEmissive`, `hover`, `highlight`, `picked`, `edge`
 use `measure`/`measureSnap`; cube keys are `cube`, `cubeEdge`, and `cubeLabel`.
 The canvas background comes from the wrapper/parent, independently of those colors.
 
-Stable DOM classes include `viewer-root`, `viewer-canvas-container`,
-`viewer-canvas-frame`, `viewer-canvas`, `viewer-hover-card`, `viewer-toolbar-stack`,
-`viewer-toolbar`, `viewer-toolbar-button`, `viewer-toolbar-icon`,
+Stable DOM classes include `viewer-root`, `viewer-webgl-unavailable`,
+`viewer-canvas-container`, `viewer-canvas-frame`, `viewer-canvas`, `viewer-hover-card`,
+`viewer-toolbar-stack`, `viewer-toolbar`, `viewer-toolbar-button`, `viewer-toolbar-icon`,
 `viewer-toolbar-tooltip`, and `viewer-toolbar-divider`. Caller `className` values
 append to the component's hook. Corresponding `data-viewer-*` attributes identify
 the DOM boundaries; `data-viewer-toolbar-action` contains the control's action name.

package/dist/{chunk-M2B3CQPQ.js → chunk-LBG6GVGE.js}

@@ -9,9 +9,9 @@ import {
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo7,
   useRef as useRef6,
-  useSyncExternalStore
+  useSyncExternalStore as useSyncExternalStore2
 } from "react";
-import { Vector3 as Vector312 } from "three";
+import { Vector3 as Vector313 } from "three";
 
 // src/part-context.tsx
 import { createContext, useContext } from "react";
@@ -863,6 +863,7 @@ import {
   DataTexture,
   DoubleSide as DoubleSide2,
   Float32BufferAttribute as Float32BufferAttribute3,
+  FloatType,
   Group as Group2,
   LineBasicMaterial,
   LineSegments,
@@ -871,7 +872,7 @@ import {
   RedFormat,
   RGBAFormat,
   UnsignedByteType,
-  Vector3 as Vector35
+  Vector3 as Vector36
 } from "three";
 
 // src/render/edges.ts
@@ -1488,9 +1489,147 @@ function emptyCreases() {
   };
 }
 
+// src/render/threads.ts
+import {
+  Vector3 as Vector35
+} from "three";
+var THREAD_TEXTURE_ROWS = 2;
+var MAX_AXIAL_NORMAL = 0.2;
+var MIN_AXIS_CROSS = 0.1;
+var DIAMETER_SLACK = 1.1;
+function facetsOf(position, ranges) {
+  const facets = [];
+  const a = new Vector35();
+  const b = new Vector35();
+  const c = new Vector35();
+  for (const range of ranges) {
+    for (let triangle = range.start; triangle < range.end; triangle += 1) {
+      const first = triangle * 3;
+      if (first + 2 >= position.count) break;
+      a.fromBufferAttribute(position, first);
+      b.fromBufferAttribute(position, first + 1);
+      c.fromBufferAttribute(position, first + 2);
+      const normal = new Vector35().subVectors(b, a).cross(new Vector35().subVectors(c, a));
+      const doubleArea = normal.length();
+      if (doubleArea === 0) continue;
+      facets.push({
+        centre: new Vector35().add(a).add(b).add(c).divideScalar(3),
+        normal: normal.divideScalar(doubleArea),
+        area: doubleArea / 2
+      });
+    }
+  }
+  return facets;
+}
+function axisOf(facets) {
+  const first = facets[0];
+  if (!first) return null;
+  let furthest = first;
+  for (const facet of facets) {
+    if (Math.abs(facet.normal.dot(first.normal)) < Math.abs(furthest.normal.dot(first.normal))) {
+      furthest = facet;
+    }
+  }
+  const axis = new Vector35().crossVectors(first.normal, furthest.normal);
+  if (axis.length() < MIN_AXIS_CROSS) return null;
+  axis.normalize();
+  const allSquare = facets.every((facet) => Math.abs(facet.normal.dot(axis)) <= MAX_AXIAL_NORMAL);
+  return allSquare ? axis : null;
+}
+function fitBore(position, ranges) {
+  const facets = facetsOf(position, ranges);
+  const axis = axisOf(facets);
+  if (!axis) return null;
+  const u = new Vector35().crossVectors(axis, Math.abs(axis.x) < 0.9 ? new Vector35(1, 0, 0) : new Vector35(0, 1, 0)).normalize();
+  const v = new Vector35().crossVectors(axis, u);
+  let xx = 0;
+  let xy = 0;
+  let yy = 0;
+  let rx = 0;
+  let ry = 0;
+  let along = 0;
+  let total = 0;
+  for (const { centre, normal, area } of facets) {
+    const mx = normal.dot(u);
+    const my = normal.dot(v);
+    const length = Math.hypot(mx, my);
+    const nx = mx / length;
+    const ny = my / length;
+    const qx = centre.dot(u);
+    const qy = centre.dot(v);
+    const pxx = 1 - nx * nx;
+    const pxy = -nx * ny;
+    const pyy = 1 - ny * ny;
+    xx += area * pxx;
+    xy += area * pxy;
+    yy += area * pyy;
+    rx += area * (pxx * qx + pxy * qy);
+    ry += area * (pxy * qx + pyy * qy);
+    along += area * centre.dot(axis);
+    total += area;
+  }
+  const determinant = xx * yy - xy * xy;
+  if (Math.abs(determinant) < 1e-9 * total * total) return null;
+  const cx = (yy * rx - xy * ry) / determinant;
+  const cy = (xx * ry - xy * rx) / determinant;
+  let radius = 0;
+  for (const { centre, area } of facets) {
+    radius += area * Math.hypot(centre.dot(u) - cx, centre.dot(v) - cy);
+  }
+  return {
+    origin: new Vector35().addScaledVector(u, cx).addScaledVector(v, cy).addScaledVector(axis, along / total),
+    axis,
+    radius: radius / total
+  };
+}
+function threadedRanges(position, model, mark) {
+  const regions = [];
+  const ranges = [];
+  for (const region of mark.regions) {
+    const range = model.regionIndex.rangeForRegion(region);
+    if (!range) continue;
+    const bore = fitBore(position, [range]);
+    if (!bore || bore.radius * 2 > mark.majorDiameter * DIAMETER_SLACK) continue;
+    regions.push(region);
+    ranges.push(range);
+  }
+  return { regions, ranges };
+}
+function writeThreadTexels(data, width, geometry, model, texels, options) {
+  data.fill(0);
+  if (!options) return;
+  const position = geometry.getAttribute("position");
+  for (const mark of options.threads) {
+    if (!Number.isFinite(mark.pitch) || mark.pitch === 0) continue;
+    const { regions, ranges } = threadedRanges(position, model, mark);
+    const bore = fitBore(position, ranges);
+    if (!bore) continue;
+    for (const region of regions) {
+      const column = texels.get(region);
+      if (column === void 0) continue;
+      const first = column * 4;
+      const second = (width + column) * 4;
+      data[first] = bore.origin.x;
+      data[first + 1] = bore.origin.y;
+      data[first + 2] = bore.origin.z;
+      data[first + 3] = mark.pitch;
+      data[second] = bore.axis.x;
+      data[second + 1] = bore.axis.y;
+      data[second + 2] = bore.axis.z;
+    }
+  }
+}
+function threadKey(options) {
+  if (!options) return "";
+  return options.threads.map((mark) => `${mark.regions.join(",")}:${mark.pitch}:${mark.majorDiameter}`).join("|");
+}
+
 // src/render/part.ts
 var REGION_ATTRIBUTE = "aRegion";
 var EMISSIVE_MIX = 0.4;
+var THREAD_TILT = Math.tan(Math.PI / 4);
+var THREAD_ROOT_SHADE = 0.45;
+var THREAD_CREST_LIGHT = 1.15;
 function buildRegionTexels(model) {
   return new Map(model.regions.map((region, column) => [region.idx, column]));
 }
@@ -1522,6 +1661,10 @@ function createPart(model, geometry, theme) {
   const opacity = new Uint8Array(width).fill(255);
   const opacityTexture = new DataTexture(opacity, width, 1, RedFormat, UnsignedByteType);
   opacityTexture.needsUpdate = true;
+  const threads = new Float32Array(width * THREAD_TEXTURE_ROWS * 4);
+  const threadTexture = new DataTexture(threads, width, THREAD_TEXTURE_ROWS, RGBAFormat, FloatType);
+  threadTexture.needsUpdate = true;
+  let threadsKey = "";
   const focusState = { value: false };
   const wireframe = { value: false };
   let focused = false;
@@ -1547,15 +1690,26 @@ function createPart(model, geometry, theme) {
       shader.uniforms["uWireframe"] = wireframe;
       shader.uniforms["uFocus"] = focusState;
       shader.uniforms["uOpaqueFocusPass"] = { value: opaqueFocusPass };
+      shader.uniforms["uThreads"] = { value: threadTexture };
       shader.vertexShader = shader.vertexShader.replace(
         "#include <common>",
         `#include <common>
         attribute float ${REGION_ATTRIBUTE};
-        varying float vRegion;`
+        uniform sampler2D uThreads;
+        varying float vRegion;
+        varying vec3 vThreadPosition;
+        varying vec4 vThreadOrigin;
+        varying vec3 vThreadAxis;
+        varying vec3 vThreadAxisView;`
       ).replace(
         "#include <begin_vertex>",
         `#include <begin_vertex>
-        vRegion = ${REGION_ATTRIBUTE};`
+        vRegion = ${REGION_ATTRIBUTE};
+        // Every vertex of a triangle is in one region, so these are flat across it.
+        vThreadOrigin = texelFetch(uThreads, ivec2(int(vRegion + 0.5), 0), 0);
+        vThreadAxis = texelFetch(uThreads, ivec2(int(vRegion + 0.5), 1), 0).xyz;
+        vThreadAxisView = normalMatrix * vThreadAxis;
+        vThreadPosition = position;`
       );
       shader.fragmentShader = shader.fragmentShader.replace(
         "#include <common>",
@@ -1566,6 +1720,10 @@ function createPart(model, geometry, theme) {
         uniform bool uFocus;
         uniform bool uOpaqueFocusPass;
         varying float vRegion;
+        varying vec3 vThreadPosition;
+        varying vec4 vThreadOrigin;
+        varying vec3 vThreadAxis;
+        varying vec3 vThreadAxisView;
         vec4 regionState;`
       ).replace(
         "#include <color_fragment>",
@@ -1578,6 +1736,46 @@ function createPart(model, geometry, theme) {
         diffuseColor.a *= regionOpacity;
         if (uWireframe) diffuseColor.a *= regionState.a;
 `
+      ).replace(
+        "#include <normal_fragment_maps>",
+        `#include <normal_fragment_maps>
+        // Worked out for every pixel, threaded or not, and applied only where
+        // there is a thread: derivatives are undefined inside a branch that
+        // differs between neighbouring pixels, as it does along a region's edge.
+        bool threaded = vThreadOrigin.w != 0.0;
+        float threadPitch = threaded ? vThreadOrigin.w : 1.0;
+        vec3 threadAxis = threaded ? normalize(vThreadAxis) : vec3(0.0, 0.0, 1.0);
+        vec3 threadOffset = vThreadPosition - vThreadOrigin.xyz;
+        float threadAlong = dot(threadOffset, threadAxis);
+        vec3 threadU = normalize(cross(
+          threadAxis,
+          abs(threadAxis.x) < 0.9 ? vec3(1.0, 0.0, 0.0) : vec3(0.0, 1.0, 0.0)
+        ));
+        vec3 threadV = cross(threadAxis, threadU);
+        float threadX = dot(threadOffset, threadU);
+        float threadY = dot(threadOffset, threadV);
+        float threadTurn = atan(threadY, threadX) / PI2;
+        float threadPhase = threadAlong / threadPitch - threadTurn;
+        // Two angle seams on opposite sides, so the blur estimate has none.
+        float threadBlur = fwidth(threadAlong / threadPitch) + min(
+          fwidth(threadTurn),
+          fwidth(atan(-threadY, -threadX) / PI2)
+        );
+        if (threaded) {
+          float threadStrength = 1.0 - smoothstep(0.2, 0.45, threadBlur);
+          // The V of the thread: 1 at its root (phase 0), 0 at its crest (phase \xBD).
+          float threadDepth = abs(fract(threadPhase) - 0.5) * 2.0;
+          float threadSlope = clamp(sin(PI2 * threadPhase) * 3.0, -1.0, 1.0) * sign(threadPitch);
+          normal = normalize(
+            normal - ${THREAD_TILT.toFixed(4)} * threadStrength * threadSlope * normalize(vThreadAxisView)
+          );
+          float threadShade = mix(
+            ${THREAD_CREST_LIGHT.toFixed(2)},
+            ${THREAD_ROOT_SHADE.toFixed(2)},
+            smoothstep(0.0, 1.0, threadDepth)
+          );
+          diffuseColor.rgb *= mix(1.0, threadShade, threadStrength);
+        }`
       ).replace(
         "#include <emissivemap_fragment>",
         `#include <emissivemap_fragment>
@@ -1629,7 +1827,7 @@ function createPart(model, geometry, theme) {
   const object = new Group2();
   object.add(focusMesh, mesh, edges);
   const scratchColor = new Color2();
-  const scratchVector = new Vector35();
+  const scratchVector = new Vector36();
   const paintRegion = (region, color, weight) => {
     const column = texels.get(region);
     if (column === void 0) return;
@@ -1758,6 +1956,13 @@ function createPart(model, geometry, theme) {
     setHoveredSharpCorner(index) {
       sharpLines?.setHovered(index);
     },
+    setThreads(options) {
+      const key = threadKey(options);
+      if (key === threadsKey) return;
+      threadsKey = key;
+      writeThreadTexels(threads, width, geometry, model, texels, options);
+      threadTexture.needsUpdate = true;
+    },
     dispose() {
       object.clear();
       if (geometry.getAttribute(REGION_ATTRIBUTE) === regionAttribute) {
@@ -1770,6 +1975,7 @@ function createPart(model, geometry, theme) {
       sharpLines?.dispose();
       stateTexture.dispose();
       opacityTexture.dispose();
+      threadTexture.dispose();
     }
   };
 }
@@ -1883,9 +2089,10 @@ import {
   useEffect as useEffect4,
   useImperativeHandle,
   useMemo as useMemo4,
-  useRef as useRef3
+  useRef as useRef3,
+  useSyncExternalStore
 } from "react";
-import { Box3 as Box33, Vector3 as Vector39 } from "three";
+import { Box3 as Box33, Vector3 as Vector310 } from "three";
 
 // src/camera.tsx
 import { useFrame, useThree as useThree2 } from "@react-three/fiber";
@@ -1902,7 +2109,7 @@ import {
   Sphere,
   Spherical,
   Vector2 as Vector23,
-  Vector3 as Vector36,
+  Vector3 as Vector37,
   Vector4 as Vector42
 } from "three";
 
@@ -2000,7 +2207,7 @@ CameraControls.install({
     Sphere,
     Spherical,
     Vector2: Vector23,
-    Vector3: Vector36,
+    Vector3: Vector37,
     Vector4: Vector42
   }
 });
@@ -2023,9 +2230,9 @@ var ExtendedCameraControls = class extends CameraControls {
   // Scratch objects — `#onPointerMove` and `#adaptUpVector` run at pointer and
   // frame rate respectively, so neither may allocate.
   #spherical = new Spherical();
-  #scratchA = new Vector36();
-  #scratchB = new Vector36();
-  #scratchC = new Vector36();
+  #scratchA = new Vector37();
+  #scratchB = new Vector37();
+  #scratchC = new Vector37();
   constructor(camera, domElement, options = {}) {
     super(camera, domElement);
     this.#domElement = domElement;
@@ -2363,6 +2570,22 @@ function counted(notify) {
   };
 }
 
+// src/render/webgl.ts
+var isWebGLAvailable = () => {
+  if (typeof document === "undefined") {
+    return false;
+  }
+  try {
+    const context = document.createElement("canvas").getContext("webgl2");
+    context?.getExtension("WEBGL_lose_context")?.loseContext();
+    return context !== null;
+  } catch {
+    return false;
+  }
+};
+var probed;
+var webGLAvailableSnapshot = () => probed ??= isWebGLAvailable();
+
 // src/target-marker.tsx
 import { useFrame as useFrame2, useThree as useThree3 } from "@react-three/fiber";
 import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2 } from "react";
@@ -2370,7 +2593,7 @@ import {
   DoubleSide as DoubleSide3,
   RingGeometry,
   SphereGeometry,
-  Vector3 as Vector37
+  Vector3 as Vector38
 } from "three";
 
 // src/render/target.ts
@@ -2413,8 +2636,8 @@ var TargetMarker = ({ controlsRef }) => {
   const heldUntil = useRef2(0);
   const painted = useRef2(-1);
   const placed = useRef2(false);
-  const lastTarget = useMemo3(() => new Vector37(), []);
-  const scratch = useMemo3(() => new Vector37(), []);
+  const lastTarget = useMemo3(() => new Vector38(), []);
+  const scratch = useMemo3(() => new Vector38(), []);
   useEffect3(() => {
     const controls = controlsRef.current;
     if (!controls) return void 0;
@@ -2508,13 +2731,41 @@ var TargetMarker = ({ controlsRef }) => {
   ] });
 };
 
+// src/webgl-unavailable.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var STYLE = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "0.5rem",
+  height: "100%",
+  padding: "1rem",
+  boxSizing: "border-box",
+  textAlign: "center"
+};
+var DEFAULT_MESSAGE = /* @__PURE__ */ jsxs2(Fragment, { children: [
+  /* @__PURE__ */ jsx3("strong", { children: "3D view unavailable" }),
+  /* @__PURE__ */ jsx3("span", { children: "WebGL is blocked in this browser. Turn on graphics (hardware) acceleration in your browser settings, then restart the browser." })
+] });
+var WebGLUnavailable = ({ children = DEFAULT_MESSAGE }) => /* @__PURE__ */ jsx3(
+  "div",
+  {
+    className: "viewer-webgl-unavailable",
+    "data-viewer-webgl-unavailable": "true",
+    role: "alert",
+    style: STYLE,
+    children
+  }
+);
+
 // src/render/view-cube.ts
 import {
   BufferGeometry as BufferGeometry2,
   CanvasTexture,
   Float32BufferAttribute as Float32BufferAttribute4,
   SRGBColorSpace,
-  Vector3 as Vector38
+  Vector3 as Vector39
 } from "three";
 var VIEW_NAMES = [
   // The six faces.
@@ -2598,12 +2849,12 @@ function viewUp(direction) {
   return { x: 0, y: 0, z: 1 };
 }
 function squaredUp(direction, currentUp) {
-  const forward = new Vector38(direction.x, direction.y, direction.z).normalize();
+  const forward = new Vector39(direction.x, direction.y, direction.z).normalize();
   const canonical = viewUp(direction);
-  const zero = new Vector38(canonical.x, canonical.y, canonical.z);
+  const zero = new Vector39(canonical.x, canonical.y, canonical.z);
   zero.addScaledVector(forward, -forward.dot(zero)).normalize();
-  const quarter = new Vector38().crossVectors(forward, zero);
-  const current = new Vector38(currentUp.x, currentUp.y, currentUp.z);
+  const quarter = new Vector39().crossVectors(forward, zero);
+  const current = new Vector39(currentUp.x, currentUp.y, currentUp.z);
   const rolls = [zero, quarter, zero.clone().negate(), quarter.clone().negate()];
   const nearest = rolls.reduce(
     (best, roll) => roll.dot(current) > best.dot(current) ? roll : best
@@ -2621,11 +2872,11 @@ function cubeZones(chamfer = CHAMFER) {
     const direction = viewVector(name);
     const [sx, sy, sz] = VIEW_SIGNS[name];
     const sign = (axis) => VIEW_SIGNS[name][axis] ?? 0;
-    const normal = new Vector38(direction.x, direction.y, direction.z);
+    const normal = new Vector39(direction.x, direction.y, direction.z);
     let polygon;
     if (kind === "face") {
       const up = viewUp(direction);
-      const upVector = new Vector38(up.x, up.y, up.z);
+      const upVector = new Vector39(up.x, up.y, up.z);
       const right = normal.clone().negate().cross(upVector).normalize();
       const square = [
         [-1, -1],
@@ -2647,7 +2898,7 @@ function cubeZones(chamfer = CHAMFER) {
         [chamfer, 1, -chamfer]
       ];
       polygon = rectangle.map(
-        ([onA, onB, onC]) => new Vector38().setComponent(a, sign(a) * onA).setComponent(b, sign(b) * onB).setComponent(c, onC)
+        ([onA, onB, onC]) => new Vector39().setComponent(a, sign(a) * onA).setComponent(b, sign(b) * onB).setComponent(c, onC)
       );
     } else {
       const triangle = [
@@ -2655,11 +2906,11 @@ function cubeZones(chamfer = CHAMFER) {
         [chamfer, 1, chamfer],
         [chamfer, chamfer, 1]
       ];
-      polygon = triangle.map(([onX, onY, onZ]) => new Vector38(sx * onX, sy * onY, sz * onZ));
+      polygon = triangle.map(([onX, onY, onZ]) => new Vector39(sx * onX, sy * onY, sz * onZ));
     }
     const [first, second, third] = polygon;
     if (first && second && third) {
-      const facing = new Vector38().subVectors(second, first).cross(new Vector38().subVectors(third, first));
+      const facing = new Vector39().subVectors(second, first).cross(new Vector39().subVectors(third, first));
       if (facing.dot(normal) < 0) polygon.reverse();
     }
     return { name, kind, direction, polygon: polygon.map(vec) };
@@ -2749,7 +3000,7 @@ function labelTexture(label, color) {
 }
 
 // src/viewer.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var ViewerControlsContext = createContext3(null);
 var useViewerControls = () => {
   const controls = useContext3(ViewerControlsContext);
@@ -2789,10 +3040,10 @@ var ViewerScene = ({
   const framedRef = useRef3(null);
   const scratchBox = useMemo4(() => new Box33(), []);
   const scratchBoundary = useMemo4(() => new Box33(), []);
-  const scratchDirection = useMemo4(() => new Vector39(), []);
-  const scratchView = useMemo4(() => new Vector39(), []);
-  const scratchTarget = useMemo4(() => new Vector39(), []);
-  const scratchPosition = useMemo4(() => new Vector39(), []);
+  const scratchDirection = useMemo4(() => new Vector310(), []);
+  const scratchView = useMemo4(() => new Vector310(), []);
+  const scratchTarget = useMemo4(() => new Vector310(), []);
+  const scratchPosition = useMemo4(() => new Vector310(), []);
   const applyLimits = useCallback(
     (bounds, framed) => {
       controlsRef.current?.applyLimits(
@@ -2841,8 +3092,8 @@ var ViewerScene = ({
     (bounds) => {
       const controls = controlsRef.current;
       if (!controls) return false;
-      const target = controls.getTarget(new Vector39());
-      const direction = currentViewDirection(camera, target, new Vector39());
+      const target = controls.getTarget(new Vector310());
+      const direction = currentViewDirection(camera, target, new Vector310());
       const distance = fitDistance(projection, size, bounds, DEFAULT_FIT_MARGIN);
       const position = direction.multiplyScalar(distance).add(bounds.center);
       void controls.setLookAt(
@@ -2867,8 +3118,8 @@ var ViewerScene = ({
   const fitContent = useCallback(() => {
     const controls = controlsRef.current;
     if (!controls) return false;
-    const target = controls.getTarget(new Vector39());
-    return frame(currentViewDirection(camera, target, new Vector39()), true);
+    const target = controls.getTarget(new Vector310());
+    return frame(currentViewDirection(camera, target, new Vector310()), true);
   }, [camera, frame]);
   const resetContent = useCallback(() => {
     const bounds = measure();
@@ -2958,18 +3209,18 @@ var ViewerScene = ({
       initialFrameComplete.current = resetContent();
     }
   });
-  return /* @__PURE__ */ jsx3(ViewerTapProvider, { value: isTap, children: /* @__PURE__ */ jsxs2(ViewerRetargetContext.Provider, { value: retargetOn, children: [
-    /* @__PURE__ */ jsxs2("group", { ref: lightsRef, children: [
-      /* @__PURE__ */ jsx3("ambientLight", { color: theme.ambient, intensity: theme.ambientIntensity }),
-      /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(ViewerTapProvider, { value: isTap, children: /* @__PURE__ */ jsxs3(ViewerRetargetContext.Provider, { value: retargetOn, children: [
+    /* @__PURE__ */ jsxs3("group", { ref: lightsRef, children: [
+      /* @__PURE__ */ jsx4("ambientLight", { color: theme.ambient, intensity: theme.ambientIntensity }),
+      /* @__PURE__ */ jsx4(
         "hemisphereLight",
         {
           args: [theme.hemisphereSky, theme.hemisphereGround, theme.hemisphereIntensity]
         }
       )
     ] }),
-    /* @__PURE__ */ jsx3("group", { ref: contentRef, children }),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4("group", { ref: contentRef, children }),
+    /* @__PURE__ */ jsx4(
       CadCameraControls,
       {
         controlsRef,
@@ -2978,9 +3229,11 @@ var ViewerScene = ({
         zoomTo
       }
     ),
-    showOrbitTarget ? /* @__PURE__ */ jsx3(TargetMarker, { controlsRef }) : null
+    showOrbitTarget ? /* @__PURE__ */ jsx4(TargetMarker, { controlsRef }) : null
   ] }) });
 };
+var subscribeNever = () => () => {
+};
 var Viewer = forwardRef(function Viewer2({
   children,
   className,
@@ -2993,8 +3246,10 @@ var Viewer = forwardRef(function Viewer2({
   retargetOnDoubleClick = true,
   showOrbitTarget = false,
   theme,
-  onPointerMissed
+  onPointerMissed,
+  webglUnavailable
 }, ref) {
+  const webglAvailable = useSyncExternalStore(subscribeNever, webGLAvailableSnapshot, () => true);
   const actionsRef = useRef3(null);
   const resolved = useMemo4(() => resolveTheme(theme), [theme]);
   const sectionStore = useMemo4(() => createSectionStore(), []);
@@ -3020,7 +3275,7 @@ var Viewer = forwardRef(function Viewer2({
     tracker.current?.dispose();
     tracker.current = element ? trackTaps(element) : null;
   }, []);
-  return /* @__PURE__ */ jsx3(ViewerControlsContext.Provider, { value: proxy, children: /* @__PURE__ */ jsx3(SectionStoreContext.Provider, { value: sectionStore, children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(ViewerControlsContext.Provider, { value: proxy, children: /* @__PURE__ */ jsx4(SectionStoreContext.Provider, { value: sectionStore, children: /* @__PURE__ */ jsx4(
     "div",
     {
       className: ["viewer-root", className].filter(Boolean).join(" "),
@@ -3030,7 +3285,7 @@ var Viewer = forwardRef(function Viewer2({
         if (event.target instanceof HTMLCanvasElement) event.preventDefault();
       },
       style: { height: "100%", width: "100%", ...style },
-      children: /* @__PURE__ */ jsx3(
+      children: webglAvailable ? /* @__PURE__ */ jsx4(
         Canvas,
         {
           className: "viewer-canvas-container",
@@ -3051,7 +3306,7 @@ var Viewer = forwardRef(function Viewer2({
             if (event.button !== 0) return;
             if (tracker.current?.isTap(event) ?? true) onPointerMissed?.();
           },
-          children: /* @__PURE__ */ jsx3(
+          children: /* @__PURE__ */ jsx4(
             ViewerScene,
             {
               setControls,
@@ -3068,7 +3323,7 @@ var Viewer = forwardRef(function Viewer2({
           )
         },
         projection
-      )
+      ) : /* @__PURE__ */ jsx4(WebGLUnavailable, { children: webglUnavailable })
     }
   ) }) });
 });
@@ -3087,7 +3342,7 @@ import {
   Raycaster as Raycaster2,
   Scene,
   Vector2 as Vector26,
-  Vector3 as Vector311
+  Vector3 as Vector312
 } from "three";
 
 // src/arrow-mesh.tsx
@@ -3178,7 +3433,7 @@ function createDepthResetMaterial() {
 }
 
 // src/arrow-mesh.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var ArrowMesh = ({ geometry, color, opacity, onTop = false, events }) => {
   const invalidate = useThree5((state) => state.invalidate);
   const material = useMemo5(() => createArrowMaterial(), []);
@@ -3191,16 +3446,16 @@ var ArrowMesh = ({ geometry, color, opacity, onTop = false, events }) => {
     applyArrowColor(material, color, opacity);
     invalidate();
   }, [color, invalidate, material, opacity]);
-  return /* @__PURE__ */ jsxs3(Fragment, { children: [
-    reset ? /* @__PURE__ */ jsx4("mesh", { geometry, material: reset, renderOrder: 0, raycast: () => null }) : null,
-    /* @__PURE__ */ jsx4("mesh", { geometry, material: depth, renderOrder: 1, raycast: () => null }),
-    /* @__PURE__ */ jsx4("mesh", { geometry, material, renderOrder: 2, ...events })
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    reset ? /* @__PURE__ */ jsx5("mesh", { geometry, material: reset, renderOrder: 0, raycast: () => null }) : null,
+    /* @__PURE__ */ jsx5("mesh", { geometry, material: depth, renderOrder: 1, raycast: () => null }),
+    /* @__PURE__ */ jsx5("mesh", { geometry, material, renderOrder: 2, ...events })
   ] });
 };
 
 // src/render/arrow.ts
-import { LatheGeometry, Vector2 as Vector24, Vector3 as Vector310 } from "three";
-var ARROW_AXIS2 = new Vector310(0, 1, 0);
+import { LatheGeometry, Vector2 as Vector24, Vector3 as Vector311 } from "three";
+var ARROW_AXIS2 = new Vector311(0, 1, 0);
 var ARROW_ROUND = 32;
 var HEAD_LENGTH = 0.415;
 var HEAD_RADIUS = 0.153;
@@ -3426,12 +3681,12 @@ function createMaskMaterial() {
 }
 
 // src/section-view.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var FURNITURE2 = { [EXCLUDE_FROM_FRAME]: true };
 function resolveSectionPlane(options, box) {
   if (!options?.enabled || box.isEmpty()) return null;
   const normal = options.plane?.normal ?? options.normal ?? DEFAULT_SECTION_NORMAL;
-  const axis = new Vector311(normal.x, normal.y, normal.z);
+  const axis = new Vector312(normal.x, normal.y, normal.z);
   if (axis.lengthSq() === 0) axis.set(0, 0, 1);
   axis.normalize();
   const bounds = sectionBounds(box, normal);
@@ -3452,7 +3707,7 @@ function resolveSectionPlane(options, box) {
     }
   };
 }
-var Z = new Vector311(0, 0, 1);
+var Z = new Vector312(0, 0, 1);
 var SectionView = ({
   geometry,
   box,
@@ -3472,7 +3727,7 @@ var SectionView = ({
   const handleRef = useRef4(null);
   const [hovered, setHovered] = useState(false);
   const dragging = useRef4(null);
-  const span = useMemo6(() => box.getSize(new Vector311()).length(), [box]);
+  const span = useMemo6(() => box.getSize(new Vector312()).length(), [box]);
   const frameSize = span * SECTION_GIZMO_FRAME_SCALE;
   const directionColor2 = useMemo6(() => sectionDirectionColor(plane.normal), [plane]);
   const resolvedHandleColor = sectionHandleColor(handleColor, directionColor2);
@@ -3556,7 +3811,7 @@ var SectionView = ({
     event.stopPropagation();
     const view = camera.position.clone().sub(capPosition).normalize();
     const surface = dragPlane(plane.normal.clone(), view, capPosition);
-    const hit = event.ray.intersectPlane(surface, new Vector311());
+    const hit = event.ray.intersectPlane(surface, new Vector312());
     const start = {
       plane: surface,
       from: hit ? hit.dot(plane.normal) : 0,
@@ -3573,7 +3828,7 @@ var SectionView = ({
         -((native.clientY - rect.top) / rect.height) * 2 + 1
       );
       raycaster.setFromCamera(pointer, camera);
-      const point = raycaster.ray.intersectPlane(start.plane, new Vector311());
+      const point = raycaster.ray.intersectPlane(start.plane, new Vector312());
       if (!point) return;
       onDrag(start.constant - (point.dot(plane.normal) - start.from));
       invalidate();
@@ -3605,8 +3860,8 @@ var SectionView = ({
     // Excluded from framing, all of it. The cap is a quad half again as wide as
     // the part's diagonal, so a Fit that measured it would frame the cut rather
     // than the part and leave the part a speck in the middle of it.
-    /* @__PURE__ */ jsxs4("group", { userData: FURNITURE2, children: [
-      /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsxs5("group", { userData: FURNITURE2, children: [
+      /* @__PURE__ */ jsx6(
         "mesh",
         {
           geometry,
@@ -3615,7 +3870,7 @@ var SectionView = ({
           raycast: () => null
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(
         "mesh",
         {
           geometry,
@@ -3624,7 +3879,7 @@ var SectionView = ({
           raycast: () => null
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(
         "mesh",
         {
           geometry: quad,
@@ -3635,15 +3890,15 @@ var SectionView = ({
           raycast: () => null
         }
       ),
-      showHandle && onDrag ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
-        /* @__PURE__ */ jsxs4(
+      showHandle && onDrag ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        /* @__PURE__ */ jsxs5(
           "group",
           {
             position: capPosition,
             quaternion: capQuaternion,
             renderOrder: SECTION_RENDER_ORDER.outline,
             children: [
-              /* @__PURE__ */ jsx5("mesh", { geometry: frameSurface, raycast: () => null, children: /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx6("mesh", { geometry: frameSurface, raycast: () => null, children: /* @__PURE__ */ jsx6(
                 "meshBasicMaterial",
                 {
                   color: directionColor2,
@@ -3654,18 +3909,18 @@ var SectionView = ({
                   depthWrite: false
                 }
               ) }),
-              /* @__PURE__ */ jsx5("lineSegments", { geometry: frameEdges, raycast: () => null, children: /* @__PURE__ */ jsx5("lineBasicMaterial", { color: directionColor2, depthTest: false, depthWrite: false }) })
+              /* @__PURE__ */ jsx6("lineSegments", { geometry: frameEdges, raycast: () => null, children: /* @__PURE__ */ jsx6("lineBasicMaterial", { color: directionColor2, depthTest: false, depthWrite: false }) })
             ]
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "group",
           {
             ref: handleRef,
             position: capPosition,
             quaternion: handleQuaternion,
             renderOrder: SECTION_RENDER_ORDER.handle,
-            children: /* @__PURE__ */ jsx5(
+            children: /* @__PURE__ */ jsx6(
               ArrowMesh,
               {
                 geometry: handleShape,
@@ -3702,7 +3957,7 @@ function useContentBox() {
 }
 
 // src/part-mesh.tsx
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var PartMesh = ({
   model,
   geometry,
@@ -3724,6 +3979,7 @@ var PartMesh = ({
   theme,
   showEdges = true,
   sharpCorners = null,
+  threads = null,
   display = "solid",
   children
 }) => {
@@ -3740,11 +3996,11 @@ var PartMesh = ({
   onHoverRef.current = onHover;
   const box = useContentBox();
   const store = useSectionStore();
-  const shared = useSyncExternalStore(store.subscribe, store.get, store.get);
+  const shared = useSyncExternalStore2(store.subscribe, store.get, store.get);
   const controlled = section !== void 0;
   const options = controlled ? section : shared ?? void 0;
   const cut = useMemo7(() => resolveSectionPlane(options, box), [box, options]);
-  const engaged = useSyncExternalStore(store.subscribe, store.isEngaged, store.isEngaged);
+  const engaged = useSyncExternalStore2(store.subscribe, store.isEngaged, store.isEngaged);
   const pressedWhileEngaged = useRef6(false);
   const layers = useRef6({
     selection,
@@ -3825,6 +4081,13 @@ var PartMesh = ({
     if (hoverCorner.current !== null) dropHover();
     invalidate();
   }, [dropHover, invalidate, part, sharpKey]);
+  const threadsRef = useRef6(threads);
+  threadsRef.current = threads;
+  const threadsKey = threadKey(threads);
+  useLayoutEffect3(() => {
+    part.setThreads(threadsRef.current);
+    invalidate();
+  }, [invalidate, part, threadsKey]);
   const reportedSection = useRef6("");
   useLayoutEffect3(() => {
     const state = cut?.state ?? null;
@@ -3914,8 +4177,8 @@ var PartMesh = ({
     },
     [box, controlled, cut, onSectionChange, options, store]
   );
-  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    /* @__PURE__ */ jsx7(
       "primitive",
       {
         object: part.object,
@@ -3952,7 +4215,7 @@ var PartMesh = ({
         }
       }
     ),
-    cut ? /* @__PURE__ */ jsx6(
+    cut ? /* @__PURE__ */ jsx7(
       SectionView,
       {
         geometry,
@@ -3964,12 +4227,12 @@ var PartMesh = ({
         onDrag: !controlled || onSectionChange ? dragSection : void 0
       }
     ) : null,
-    children ? /* @__PURE__ */ jsx6(PartContext.Provider, { value: context, children }) : null
+    children ? /* @__PURE__ */ jsx7(PartContext.Provider, { value: context, children }) : null
   ] });
 };
-var ORIGIN = new Vector312();
-var UP = new Vector312(0, 0, 1);
-var TARGET = new Vector312();
+var ORIGIN = new Vector313();
+var UP = new Vector313(0, 0, 1);
+var TARGET = new Vector313();
 function readTarget(controls) {
   if (controls && typeof controls.getTarget === "function") {
     return controls.getTarget(TARGET);
@@ -4618,7 +4881,7 @@ function compareVersions(a, b) {
 }
 
 // src/engine/engine-part.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var models = /* @__PURE__ */ new WeakMap();
 var modelForReport = (report) => {
   if (typeof report !== "object" || report === null) {
@@ -4639,7 +4902,7 @@ var EnginePart = ({ report, ...props }) => {
     engineGeometryCache.retain(resource);
     return () => engineGeometryCache.release(resource);
   }, [resource]);
-  return /* @__PURE__ */ jsx7(PartMesh, { model, geometry: resource.geometry, ...props });
+  return /* @__PURE__ */ jsx8(PartMesh, { model, geometry: resource.geometry, ...props });
 };
 function useGeometryResource(part) {
   const resource = engineGeometryCache.get(part);
@@ -4648,6 +4911,23 @@ function useGeometryResource(part) {
   return resource;
 }
 
+// src/engine/threads.ts
+function threadMark(feature, datasheet) {
+  if (!isRecord(datasheet) || !isRecord(datasheet["facts"])) return null;
+  const facts = datasheet["facts"];
+  if (facts["kind"] !== "Hole" || !isRecord(facts["threading"])) return null;
+  const spec = facts["threading"]["spec"];
+  if (!isRecord(spec)) return null;
+  const pitch = spec["threadPitch"];
+  const majorDiameter = spec["basicDiameter"];
+  if (!isFiniteNumber(pitch) || pitch <= 0 || !isFiniteNumber(majorDiameter)) return null;
+  return {
+    regions: feature.regionIdxs,
+    pitch: spec["handedness"] === "Left" ? -pitch : pitch,
+    majorDiameter
+  };
+}
+
 export {
   usePartContext,
   sameDirection,
@@ -4822,5 +5102,6 @@ export {
   MIN_KERNEL_VERSION,
   normalizePartReport,
   assertSupportedKernelVersion,
-  EnginePart
+  EnginePart,
+  threadMark
 };

package/dist/engine/index.d.ts

@@ -1,5 +1,5 @@
-import { P as PartModel, a as PartMeshRefs } from '../normalize-C4Wj4IGK.js';
-export { E as EnginePart, b as EnginePartProps, M as MIN_KERNEL_VERSION, c as assertSupportedKernelVersion, n as normalizePartReport, s as smoothRegionNormals } from '../normalize-C4Wj4IGK.js';
+import { P as PartModel, a as PartMeshRefs, b as PartModelFeature, T as ThreadMark } from '../normalize-BBADLCmd.js';
+export { E as EnginePart, c as EnginePartProps, M as MIN_KERNEL_VERSION, d as assertSupportedKernelVersion, n as normalizePartReport, s as smoothRegionNormals } from '../normalize-BBADLCmd.js';
 import { BufferGeometry } from 'three';
 import 'react';
 
@@ -115,4 +115,15 @@ declare function loadPartMesh(mesh: PartMeshRefs, options?: LoadPartGeometryOpti
  */
 declare function parsePartGeometry(data: ArrayBuffer, mesh: PartMeshExpectation, format?: MeshFormat): Promise<BufferGeometry>;
 
-export { type CacheablePart, type EngineGeometryCache, type EngineGeometryResource, type FetchLike, type LoadPartGeometryOptions, type MeshAsset, type MeshFormat, PartMeshError, type PartMeshExpectation, createEngineGeometryCache, engineGeometryCache, engineGeometryResourceKey, loadPartGeometry, loadPartMesh, parsePartGeometry, partMeshAssets };
+/**
+ * The thread to draw in a hole, read from its Engine datasheet: a hole's
+ * `facts.threading.spec`, which the Engine fills for a modeled thread it
+ * took for a catalog thread (ISO 6H, ANSI 2B, straight pipe). `null` for a
+ * plain hole, any other feature, and a datasheet of an unexpected shape.
+ *
+ * Only what the Engine sends is drawn: a thread it did not report is not
+ * guessed at from the mesh.
+ */
+declare function threadMark(feature: PartModelFeature, datasheet: unknown): ThreadMark | null;
+
+export { type CacheablePart, type EngineGeometryCache, type EngineGeometryResource, type FetchLike, type LoadPartGeometryOptions, type MeshAsset, type MeshFormat, PartMeshError, type PartMeshExpectation, createEngineGeometryCache, engineGeometryCache, engineGeometryResourceKey, loadPartGeometry, loadPartMesh, parsePartGeometry, partMeshAssets, threadMark };

package/dist/engine/index.js

@@ -11,8 +11,9 @@ import {
   normalizePartReport,
   parsePartGeometry,
   partMeshAssets,
-  smoothRegionNormals
-} from "../chunk-M2B3CQPQ.js";
+  smoothRegionNormals,
+  threadMark
+} from "../chunk-LBG6GVGE.js";
 export {
   EnginePart,
   MIN_KERNEL_VERSION,
@@ -26,5 +27,6 @@ export {
   normalizePartReport,
   parsePartGeometry,
   partMeshAssets,
-  smoothRegionNormals
+  smoothRegionNormals,
+  threadMark
 };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { P as PartModel, F as FeatureTag, d as PartPick, V as Vec3, R as RegionHighlight, e as ViewerTheme, S as SectionOptions, f as SectionState, g as ViewerCamera, h as ViewportSize, i as PartModelRegion, C as CameraLimits, j as ViewerView, k as Projection, T as TriangleRange, l as RegionIndex, m as PartModelFeature, o as FeatureType } from './normalize-C4Wj4IGK.js';
-export { A as AXES_PLANE_OFFSET, p as AXES_PLANE_SCALE, q as AxesPlane, B as BuildPickInput, r as CAD_CAMERA_UP, t as CANDIDATE_WEIGHT, u as CAP_HATCH, D as DEFAULT_FIT_MARGIN, v as DEFAULT_SECTION_NORMAL, w as DEFAULT_THEME, x as DIRECTION_COLORS, y as DISABLED_SECTION, z as EXCLUDE_FROM_FRAME, E as EnginePart, G as FeatureHighlight, H as FocusOptions, I as HANDLE_PIXELS, J as HIGHLIGHT_COLORS, K as HIGHLIGHT_WEIGHT, L as HOVER_WEIGHT, N as HighlightLayers, O as KnownFeatureType, Q as KnownShapeKind, U as MAX_FRAME_RATIO, W as MIN_FRAME_RATIO, X as NO_MODIFIERS, Y as OUTLINE_SCALE, Z as PERSPECTIVE_FOV, _ as PICKED_SURFACE_LABEL, $ as PREVIEW_SCALE, a0 as PartDisplay, a1 as PartMesh, a2 as PartMeshProps, a as PartMeshRefs, a3 as PartObject, a4 as PickModifiers, a5 as PointerLocation, a6 as REGION_ATTRIBUTE, a7 as RegionPaint, a8 as SECTION_GIZMO_FRAME_SCALE, a9 as SECTION_RENDER_ORDER, aa as SceneBounds, ab as SectionAnchor, ac as SectionBounds, ad as SectionPlacement, ae as ShapeKind, af as SharpCorner, ag as SharpCornerOptions, ah as SurfaceCreases, ai as SurfaceHit, aj as adaptedUp, ak as applyHighlightLayers, al as applyProjection, am as aspectRatio, an as axesPlanes, ao as boundsFromBox, ap as buildPick, aq as buildRegionAttribute, ar as buildRegionTexels, as as cadViewDirections, at as cameraLimits, au as contentBounds, av as createPart, aw as currentViewDirection, ax as defaultBounds, ay as directionColor, az as dragPlane, aA as excludedFromFrame, aB as findSharpCorners, aC as fitDistance, aD as focusForPick, aE as hitUnderRay, n as normalizePartReport, aF as orthographicHalfHeight, aG as perspectiveFitDistance, aH as pickedStartDepth, aI as resolveTheme, aJ as screenLength, aK as sectionAnchor, aL as sectionBounds, aM as sectionConstant, aN as sectionDepth, aO as sectionDepthConstant, aP as sectionDepthRange, aQ as sectionFromPick, aR as sectionMeasurement, aS as sectionOffset, aT as sectionOptionsFromState, aU as sectionPlane, aV as sharpCornerPositions, s as smoothRegionNormals, aW as startPosition, aX as surfaceCreases, aY as surfaceUnderRay, aZ as targetBoundary, a_ as themesEqual, a$ as viewDirection } from './normalize-C4Wj4IGK.js';
+import { P as PartModel, F as FeatureTag, e as PartPick, V as Vec3, R as RegionHighlight, f as ViewerTheme, S as SectionOptions, g as SectionState, h as ViewerCamera, i as ViewportSize, j as PartModelRegion, C as CameraLimits, k as ViewerView, l as Projection, m as TriangleRange, o as RegionIndex, b as PartModelFeature, p as FeatureType } from './normalize-BBADLCmd.js';
+export { A as AXES_PLANE_OFFSET, q as AXES_PLANE_SCALE, r as AxesPlane, B as BuildPickInput, t as CAD_CAMERA_UP, u as CANDIDATE_WEIGHT, v as CAP_HATCH, D as DEFAULT_FIT_MARGIN, w as DEFAULT_SECTION_NORMAL, x as DEFAULT_THEME, y as DIRECTION_COLORS, z as DISABLED_SECTION, G as EXCLUDE_FROM_FRAME, E as EnginePart, H as FeatureHighlight, I as FocusOptions, J as HANDLE_PIXELS, K as HIGHLIGHT_COLORS, L as HIGHLIGHT_WEIGHT, N as HOVER_WEIGHT, O as HighlightLayers, Q as KnownFeatureType, U as KnownShapeKind, W as MAX_FRAME_RATIO, X as MIN_FRAME_RATIO, Y as NO_MODIFIERS, Z as OUTLINE_SCALE, _ as PERSPECTIVE_FOV, $ as PICKED_SURFACE_LABEL, a0 as PREVIEW_SCALE, a1 as PartDisplay, a2 as PartMesh, a3 as PartMeshProps, a as PartMeshRefs, a4 as PartObject, a5 as PickModifiers, a6 as PointerLocation, a7 as REGION_ATTRIBUTE, a8 as RegionPaint, a9 as SECTION_GIZMO_FRAME_SCALE, aa as SECTION_RENDER_ORDER, ab as SceneBounds, ac as SectionAnchor, ad as SectionBounds, ae as SectionPlacement, af as ShapeKind, ag as SharpCorner, ah as SharpCornerOptions, ai as SurfaceCreases, aj as SurfaceHit, T as ThreadMark, ak as ThreadOptions, al as adaptedUp, am as applyHighlightLayers, an as applyProjection, ao as aspectRatio, ap as axesPlanes, aq as boundsFromBox, ar as buildPick, as as buildRegionAttribute, at as buildRegionTexels, au as cadViewDirections, av as cameraLimits, aw as contentBounds, ax as createPart, ay as currentViewDirection, az as defaultBounds, aA as directionColor, aB as dragPlane, aC as excludedFromFrame, aD as findSharpCorners, aE as fitDistance, aF as focusForPick, aG as hitUnderRay, n as normalizePartReport, aH as orthographicHalfHeight, aI as perspectiveFitDistance, aJ as pickedStartDepth, aK as resolveTheme, aL as screenLength, aM as sectionAnchor, aN as sectionBounds, aO as sectionConstant, aP as sectionDepth, aQ as sectionDepthConstant, aR as sectionDepthRange, aS as sectionFromPick, aT as sectionMeasurement, aU as sectionOffset, aV as sectionOptionsFromState, aW as sectionPlane, aX as sharpCornerPositions, s as smoothRegionNormals, aY as startPosition, aZ as surfaceCreases, a_ as surfaceUnderRay, a$ as targetBoundary, b0 as themesEqual, b1 as viewDirection } from './normalize-BBADLCmd.js';
 import { BufferGeometry, Box3, CanvasTexture, Plane, Vector3, Matrix4, Vector2, Ray, ShaderMaterial, Texture, Color, MeshBasicMaterial, WebGLRenderTarget } from 'three';
 import * as react from 'react';
 import { ReactNode, PropsWithChildren, RefObject, CSSProperties } from 'react';
@@ -93,6 +93,8 @@ interface ViewerToolbarControls {
     dfm?: ViewerToolbarControl;
     /** The DFM rules' sharp corners, drawn on the part: see `sharpCorners` on `<PartMesh>`. */
     sharpCorners?: ViewerToolbarControl;
+    /** Threads drawn in their holes: see `threads` on `<PartMesh>`. */
+    threads?: ViewerToolbarControl;
     hover?: ViewerToolbarControl;
     focus?: ViewerToolbarControl;
     wireframe?: ViewerToolbarControl;
@@ -136,6 +138,7 @@ declare const ViewerToolbar: (({ className, children }: ViewerToolbarProps) => r
     DirectionsButton: () => react.JSX.Element;
     DfmButton: () => react.JSX.Element;
     SharpCornersButton: () => react.JSX.Element;
+    ThreadsButton: () => react.JSX.Element;
     HoverButton: () => react.JSX.Element;
     FocusButton: () => react.JSX.Element;
     WireframeButton: () => react.JSX.Element;
@@ -1501,6 +1504,13 @@ interface ViewerProps {
      * section handle. The usual meaning is "put the selection down".
      */
     onPointerMissed?: () => void;
+    /**
+     * What to show in place of the canvas when the browser will not create a
+     * WebGL context — hardware acceleration off, or the GPU blocklisted. It goes
+     * inside a `role="alert"` element (`viewer-webgl-unavailable`), and replaces
+     * the default message asking the user to turn acceleration on.
+     */
+    webglUnavailable?: ReactNode;
 }
 declare const Viewer: react.ForwardRefExoticComponent<ViewerProps & react.RefAttributes<ViewerHandle>>;
 

package/dist/index.js

@@ -163,7 +163,7 @@ import {
   viewUp,
   viewVector,
   visualSurfaces
-} from "./chunk-M2B3CQPQ.js";
+} from "./chunk-LBG6GVGE.js";
 
 // src/render/feature-triangles.ts
 var EMPTY = { positions: new Float32Array(), normals: new Float32Array() };
@@ -274,6 +274,7 @@ var SharpCornersIcon = () => /* @__PURE__ */ jsxs(SvgIcon, { children: [
   /* @__PURE__ */ jsx2("path", { d: "M4 3v17h17" }),
   /* @__PURE__ */ jsx2("circle", { cx: "9", cy: "15", r: "4" })
 ] });
+var ThreadsIcon = () => /* @__PURE__ */ jsx2(SvgIcon, { children: /* @__PURE__ */ jsx2("path", { d: "M8 3h8v18H8zM8 8l8-2M8 12l8-2M8 16l8-2M8 20l8-2" }) });
 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" }) });
@@ -291,6 +292,7 @@ var ICONS = {
   directions: DirectionsIcon,
   dfm: DfmIcon,
   sharpCorners: SharpCornersIcon,
+  threads: ThreadsIcon,
   hover: HoverIcon,
   focus: FocusIcon,
   wireframe: WireframeIcon,
@@ -401,6 +403,14 @@ var SharpCornersButton = () => /* @__PURE__ */ jsx3(
     label: (pressed) => pressed ? "Hide sharp corners" : "Show sharp corners"
   }
 );
+var ThreadsButton = () => /* @__PURE__ */ jsx3(
+  ToolbarButton,
+  {
+    action: "threads",
+    icon: "threads",
+    label: (pressed) => pressed ? "Hide threads" : "Show threads"
+  }
+);
 var HoverButton = () => /* @__PURE__ */ jsx3(
   ToolbarButton,
   {
@@ -461,6 +471,7 @@ var DefaultControls = () => {
     controls.directions ? /* @__PURE__ */ jsx3(DirectionsButton, {}, "directions") : null,
     controls.dfm ? /* @__PURE__ */ jsx3(DfmButton, {}, "dfm") : null,
     controls.sharpCorners ? /* @__PURE__ */ jsx3(SharpCornersButton, {}, "sharpCorners") : null,
+    controls.threads ? /* @__PURE__ */ jsx3(ThreadsButton, {}, "threads") : null,
     controls.hover ? /* @__PURE__ */ jsx3(HoverButton, {}, "hover") : null,
     controls.focus ? /* @__PURE__ */ jsx3(FocusButton, {}, "focus") : null,
     controls.wireframe ? /* @__PURE__ */ jsx3(WireframeButton, {}, "wireframe") : null,
@@ -502,6 +513,7 @@ var ViewerToolbar = Object.assign(ViewerToolbarRoot, {
   DirectionsButton,
   DfmButton,
   SharpCornersButton,
+  ThreadsButton,
   HoverButton,
   FocusButton,
   WireframeButton,

package/dist/{normalize-C4Wj4IGK.d.ts → normalize-BBADLCmd.d.ts}

@@ -546,6 +546,39 @@ declare function findSharpCorners(creases: SurfaceCreases, model: Pick<PartModel
 /** The flagged features' corners, as `x y z x y z` endpoint pairs. See {@link findSharpCorners}. */
 declare function sharpCornerPositions(creases: SurfaceCreases, model: Pick<PartModel, 'features' | 'regionIndex'>, options: SharpCornerOptions): Float32Array;
 
+/**
+ * Threads drawn into the bores they are cut in.
+ *
+ * The kernel cuts a modeled internal thread out of the body before it meshes
+ * it, so a tapped hole arrives as a plain bore. A displacement map cannot put
+ * the thread back: it moves vertices, and wants UVs and a dense mesh, where
+ * the Engine's has neither — a small bore is a handful of 30° facets. So the
+ * thread is drawn the way a bump map draws: the part's shader tilts each
+ * pixel's normal along the bore's axis as a helix of the thread's pitch runs
+ * past it, and the light falls as it would on the flanks of a real thread.
+ * The silhouette stays round, which inside a bore nobody sees.
+ *
+ * What the shader needs per region is the bore's axis, a point on it, and the
+ * pitch. The pitch comes from the caller; the axis and the point are fitted
+ * here from the region's own triangles, so the drawing sits on the mesh
+ * exactly and needs nothing from the report it does not already carry.
+ */
+/** One thread to draw, on the faces of the hole it is cut in. */
+interface ThreadMark {
+    /** The regions of the threaded hole, as the report numbers them. */
+    readonly regions: readonly number[];
+    /** From one crest to the next, in mm. Negative for a left-hand thread. */
+    readonly pitch: number;
+    /**
+     * The thread's major diameter, in mm. A cylinder of the hole wider than
+     * this — a counterbore — is not threaded, and is left plain.
+     */
+    readonly majorDiameter: number;
+}
+interface ThreadOptions {
+    readonly threads: readonly ThreadMark[];
+}
+
 /** The vertex attribute carrying each vertex's column in the state texture. */
 declare const REGION_ATTRIBUTE = "aRegion";
 type PartDisplay = 'solid' | 'wireframe';
@@ -610,6 +643,11 @@ interface PartObject {
     }, camera: ViewerCamera, viewport: ViewportSize): SharpCorner | null;
     /** Draws one corner up as the one under the pointer; `null` for none. */
     setHoveredSharpCorner(index: number | null): void;
+    /**
+     * Draws threads into the bores they are cut in — see `render/threads.ts`.
+     * `null` draws none. Keyed by content, like `setSharpCorners`.
+     */
+    setThreads(options: ThreadOptions | null): void;
     dispose(): void;
 }
 interface RegionPaint {
@@ -1180,6 +1218,13 @@ interface PartMeshProps {
      * Coloured by the theme's `sharpCorner`.
      */
     sharpCorners?: SharpCornerOptions | null;
+    /**
+     * Draws threads into the bores they are cut in: each mark's pitch, as a
+     * helix of light and shade over the hole's cylinders. The Engine cuts a
+     * modeled internal thread out of the mesh, so without this a tapped hole is
+     * a plain bore. Off when omitted or `null`. See `threadMark` in `/engine`.
+     */
+    threads?: ThreadOptions | null;
     /** Wireframe shows region boundaries and any hovered/painted faces, with no triangle diagonals. */
     display?: PartDisplay;
     /**
@@ -1198,7 +1243,7 @@ interface PartMeshProps {
  * React render at all: the hovered face lives in a ref, and routing it through
  * state is what this rewrite exists to stop doing.
  */
-declare const PartMesh: ({ model, geometry, selection, focus, candidates, highlights, regionHighlights, pickedRegions, hoveredFeatureIds, hover, activeDirection, section, onSectionChange, onAdjacency, focusFeature, onHover, onPick, theme, showEdges, sharpCorners, display, children, }: PartMeshProps) => react.JSX.Element;
+declare const PartMesh: ({ model, geometry, selection, focus, candidates, highlights, regionHighlights, pickedRegions, hoveredFeatureIds, hover, activeDirection, section, onSectionChange, onAdjacency, focusFeature, onHover, onPick, theme, showEdges, sharpCorners, threads, display, children, }: PartMeshProps) => react.JSX.Element;
 
 interface EnginePartProps extends Omit<PartMeshProps, 'model' | 'geometry'> {
     /**
@@ -1273,4 +1318,4 @@ declare function normalizePartReport(report: unknown): PartModel;
  */
 declare function assertSupportedKernelVersion(kernelVersion: string): void;
 
-export { PREVIEW_SCALE as $, AXES_PLANE_OFFSET as A, type BuildPickInput as B, type CameraLimits as C, DEFAULT_FIT_MARGIN as D, EnginePart as E, type FeatureTag as F, type FeatureHighlight as G, type FocusOptions as H, HANDLE_PIXELS as I, HIGHLIGHT_COLORS as J, HIGHLIGHT_WEIGHT as K, HOVER_WEIGHT as L, MIN_KERNEL_VERSION as M, type HighlightLayers as N, type KnownFeatureType as O, type PartModel as P, type KnownShapeKind as Q, type RegionHighlight as R, type SectionOptions as S, type TriangleRange as T, MAX_FRAME_RATIO as U, type Vec3 as V, MIN_FRAME_RATIO as W, NO_MODIFIERS as X, OUTLINE_SCALE as Y, PERSPECTIVE_FOV as Z, PICKED_SURFACE_LABEL as _, type PartMeshRefs as a, viewDirection as a$, type PartDisplay as a0, PartMesh as a1, type PartMeshProps as a2, type PartObject as a3, type PickModifiers as a4, type PointerLocation as a5, REGION_ATTRIBUTE as a6, type RegionPaint as a7, SECTION_GIZMO_FRAME_SCALE as a8, SECTION_RENDER_ORDER as a9, excludedFromFrame as aA, findSharpCorners as aB, fitDistance as aC, focusForPick as aD, hitUnderRay as aE, orthographicHalfHeight as aF, perspectiveFitDistance as aG, pickedStartDepth as aH, resolveTheme as aI, screenLength as aJ, sectionAnchor as aK, sectionBounds as aL, sectionConstant as aM, sectionDepth as aN, sectionDepthConstant as aO, sectionDepthRange as aP, sectionFromPick as aQ, sectionMeasurement as aR, sectionOffset as aS, sectionOptionsFromState as aT, sectionPlane as aU, sharpCornerPositions as aV, startPosition as aW, surfaceCreases as aX, surfaceUnderRay as aY, targetBoundary as aZ, themesEqual as a_, type SceneBounds as aa, type SectionAnchor as ab, type SectionBounds as ac, type SectionPlacement as ad, type ShapeKind as ae, type SharpCorner as af, type SharpCornerOptions as ag, type SurfaceCreases as ah, type SurfaceHit as ai, adaptedUp as aj, applyHighlightLayers as ak, applyProjection as al, aspectRatio as am, axesPlanes as an, boundsFromBox as ao, buildPick as ap, buildRegionAttribute as aq, buildRegionTexels as ar, cadViewDirections as as, cameraLimits as at, contentBounds as au, createPart as av, currentViewDirection as aw, defaultBounds as ax, directionColor as ay, dragPlane as az, type EnginePartProps as b, assertSupportedKernelVersion as c, type PartPick as d, type ViewerTheme as e, type SectionState as f, type ViewerCamera as g, type ViewportSize as h, type PartModelRegion as i, type ViewerView as j, type Projection as k, type RegionIndex as l, type PartModelFeature as m, normalizePartReport as n, type FeatureType as o, AXES_PLANE_SCALE as p, type AxesPlane as q, CAD_CAMERA_UP as r, smoothRegionNormals as s, CANDIDATE_WEIGHT as t, CAP_HATCH as u, DEFAULT_SECTION_NORMAL as v, DEFAULT_THEME as w, DIRECTION_COLORS as x, DISABLED_SECTION as y, EXCLUDE_FROM_FRAME as z };
+export { PICKED_SURFACE_LABEL as $, AXES_PLANE_OFFSET as A, type BuildPickInput as B, type CameraLimits as C, DEFAULT_FIT_MARGIN as D, EnginePart as E, type FeatureTag as F, EXCLUDE_FROM_FRAME as G, type FeatureHighlight as H, type FocusOptions as I, HANDLE_PIXELS as J, HIGHLIGHT_COLORS as K, HIGHLIGHT_WEIGHT as L, MIN_KERNEL_VERSION as M, HOVER_WEIGHT as N, type HighlightLayers as O, type PartModel as P, type KnownFeatureType as Q, type RegionHighlight as R, type SectionOptions as S, type ThreadMark as T, type KnownShapeKind as U, type Vec3 as V, MAX_FRAME_RATIO as W, MIN_FRAME_RATIO as X, NO_MODIFIERS as Y, OUTLINE_SCALE as Z, PERSPECTIVE_FOV as _, type PartMeshRefs as a, targetBoundary as a$, PREVIEW_SCALE as a0, type PartDisplay as a1, PartMesh as a2, type PartMeshProps as a3, type PartObject as a4, type PickModifiers as a5, type PointerLocation as a6, REGION_ATTRIBUTE as a7, type RegionPaint as a8, SECTION_GIZMO_FRAME_SCALE as a9, directionColor as aA, dragPlane as aB, excludedFromFrame as aC, findSharpCorners as aD, fitDistance as aE, focusForPick as aF, hitUnderRay as aG, orthographicHalfHeight as aH, perspectiveFitDistance as aI, pickedStartDepth as aJ, resolveTheme as aK, screenLength as aL, sectionAnchor as aM, sectionBounds as aN, sectionConstant as aO, sectionDepth as aP, sectionDepthConstant as aQ, sectionDepthRange as aR, sectionFromPick as aS, sectionMeasurement as aT, sectionOffset as aU, sectionOptionsFromState as aV, sectionPlane as aW, sharpCornerPositions as aX, startPosition as aY, surfaceCreases as aZ, surfaceUnderRay as a_, SECTION_RENDER_ORDER as aa, type SceneBounds as ab, type SectionAnchor as ac, type SectionBounds as ad, type SectionPlacement as ae, type ShapeKind as af, type SharpCorner as ag, type SharpCornerOptions as ah, type SurfaceCreases as ai, type SurfaceHit as aj, type ThreadOptions as ak, adaptedUp as al, applyHighlightLayers as am, applyProjection as an, aspectRatio as ao, axesPlanes as ap, boundsFromBox as aq, buildPick as ar, buildRegionAttribute as as, buildRegionTexels as at, cadViewDirections as au, cameraLimits as av, contentBounds as aw, createPart as ax, currentViewDirection as ay, defaultBounds as az, type PartModelFeature as b, themesEqual as b0, viewDirection as b1, type EnginePartProps as c, assertSupportedKernelVersion as d, type PartPick as e, type ViewerTheme as f, type SectionState as g, type ViewerCamera as h, type ViewportSize as i, type PartModelRegion as j, type ViewerView as k, type Projection as l, type TriangleRange as m, normalizePartReport as n, type RegionIndex as o, type FeatureType as p, AXES_PLANE_SCALE as q, type AxesPlane as r, smoothRegionNormals as s, CAD_CAMERA_UP as t, CANDIDATE_WEIGHT as u, CAP_HATCH as v, DEFAULT_SECTION_NORMAL as w, DEFAULT_THEME as x, DIRECTION_COLORS as y, DISABLED_SECTION as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolpath/viewer",
-  "version": "2.3.3",
+  "version": "2.5.0",
   "description": "React Three Fiber viewer for Toolpath Engine part reports",
   "license": "MIT",
   "engines": {