@toolpath/viewer 2.3.3 → 2.6.0

package/dist/{chunk-M2B3CQPQ.js → chunk-ESPHWO5M.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();
     }
   };
 }
@@ -1837,6 +2043,7 @@ var NO_MODIFIERS = {
   shift: false,
   secondary: false
 };
+var ignoreRay = () => void 0;
 function viewDirection(camera, target) {
   const { x, y, z } = camera.position;
   const dx = x - target.x;
@@ -1883,9 +2090,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 +2110,7 @@ import {
   Sphere,
   Spherical,
   Vector2 as Vector23,
-  Vector3 as Vector36,
+  Vector3 as Vector37,
   Vector4 as Vector42
 } from "three";
 
@@ -2000,7 +2208,7 @@ CameraControls.install({
     Sphere,
     Spherical,
     Vector2: Vector23,
-    Vector3: Vector36,
+    Vector3: Vector37,
     Vector4: Vector42
   }
 });
@@ -2023,9 +2231,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 +2571,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 +2594,7 @@ import {
   DoubleSide as DoubleSide3,
   RingGeometry,
   SphereGeometry,
-  Vector3 as Vector37
+  Vector3 as Vector38
 } from "three";
 
 // src/render/target.ts
@@ -2413,8 +2637,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 +2732,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 +2850,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 +2873,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 +2899,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 +2907,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 +3001,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 +3041,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 +3093,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 +3119,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 +3210,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 +3230,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 +3247,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 +3276,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 +3286,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 +3307,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 +3324,7 @@ var Viewer = forwardRef(function Viewer2({
           )
         },
         projection
-      )
+      ) : /* @__PURE__ */ jsx4(WebGLUnavailable, { children: webglUnavailable })
     }
   ) }) });
 });
@@ -3087,7 +3343,7 @@ import {
   Raycaster as Raycaster2,
   Scene,
   Vector2 as Vector26,
-  Vector3 as Vector311
+  Vector3 as Vector312
 } from "three";
 
 // src/arrow-mesh.tsx
@@ -3178,7 +3434,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 +3447,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 +3682,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 +3708,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 +3728,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 +3812,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 +3829,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 +3861,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 +3871,7 @@ var SectionView = ({
           raycast: () => null
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(
         "mesh",
         {
           geometry,
@@ -3624,7 +3880,7 @@ var SectionView = ({
           raycast: () => null
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(
         "mesh",
         {
           geometry: quad,
@@ -3635,15 +3891,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 +3910,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 +3958,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 +3980,7 @@ var PartMesh = ({
   theme,
   showEdges = true,
   sharpCorners = null,
+  threads = null,
   display = "solid",
   children
 }) => {
@@ -3740,11 +3997,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 +4082,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 +4178,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 +4216,7 @@ var PartMesh = ({
         }
       }
     ),
-    cut ? /* @__PURE__ */ jsx6(
+    cut ? /* @__PURE__ */ jsx7(
       SectionView,
       {
         geometry,
@@ -3964,12 +4228,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 +4882,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 +4903,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 +4912,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,
@@ -4762,6 +5043,7 @@ export {
   bestOwner,
   cycleOwner,
   NO_MODIFIERS,
+  ignoreRay,
   viewDirection,
   buildPick,
   focusForPick,
@@ -4822,5 +5104,6 @@ export {
   MIN_KERNEL_VERSION,
   normalizePartReport,
   assertSupportedKernelVersion,
-  EnginePart
+  EnginePart,
+  threadMark
 };