react-os-shell 0.2.45 → 0.2.46

package/dist/{chunk-DUUANLLE.js → chunk-QBH7KERS.js}

@@ -664,6 +664,11 @@ function hexToRgb(OV, hex) {
   const n = m ? parseInt(m[1], 16) : 0;
   return new OV.RGBColor(n >> 16 & 255, n >> 8 & 255, n & 255);
 }
+function formatMeasureDistance(mm) {
+  if (mm >= 1e3) return `${(mm / 1e3).toFixed(2)} m`;
+  if (mm >= 10) return `${mm.toFixed(1)} mm`;
+  return `${mm.toFixed(2)} mm`;
+}
 function StepPanel({ url, filename, onDownload, onEmail }) {
   const containerRef = useRef(null);
   const viewerRef = useRef(null);
@@ -680,15 +685,21 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
   const [edgeThreshold, setEdgeThreshold] = useState(1);
   const [showMeshes, setShowMeshes] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
-  const [perspective, setPerspective] = useState(true);
+  const [perspective, setPerspective] = useState(false);
   const [sectionEnabled, setSectionEnabled] = useState(false);
-  const [sectionAxis, setSectionAxis] = useState("z");
+  const [sectionAxis, setSectionAxis] = useState("x");
   const [sectionFlip, setSectionFlip] = useState(false);
   const [sectionPosition, setSectionPosition] = useState(0.5);
+  const [sectionAngle, setSectionAngle] = useState(0);
+  const [measureEnabled, setMeasureEnabled] = useState(false);
+  const [measureMode, setMeasureMode] = useState("point");
+  const [measureDistance, setMeasureDistance] = useState(null);
+  const measureRef = useRef(null);
   const sectionRef = useRef(null);
   useEffect(() => {
     let cancelled = false;
     let viewer = null;
+    let resizeObserver = null;
     setLoading(true);
     setError(null);
     setTree(null);
@@ -751,6 +762,18 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
         viewerRef.current = viewer;
         const inputFile = new OV.InputFile(filename, OV.FileSource.Url, url);
         viewer.LoadModelFromInputFiles([inputFile]);
+        if (containerRef.current && typeof ResizeObserver !== "undefined") {
+          resizeObserver = new ResizeObserver(() => {
+            try {
+              const v = viewerRef.current;
+              if (v?.Resize) v.Resize();
+              else if (v?.viewer?.Resize) v.viewer.Resize();
+              v?.viewer?.Render?.();
+            } catch {
+            }
+          });
+          resizeObserver.observe(containerRef.current);
+        }
       } catch (e) {
         if (!cancelled) {
           setError(e?.message || "Failed to load 3D model.");
@@ -760,6 +783,10 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
     })();
     return () => {
       cancelled = true;
+      try {
+        resizeObserver?.disconnect();
+      } catch {
+      }
       try {
         viewer?.Destroy?.();
       } catch {
@@ -1003,19 +1030,35 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
       const axisIdx = sectionAxis === "x" ? 0 : sectionAxis === "y" ? 1 : 2;
       const min = [bbox.min.x, bbox.min.y, bbox.min.z][axisIdx];
       const max = [bbox.max.x, bbox.max.y, bbox.max.z][axisIdx];
-      const value = min + (max - min) * sectionPosition;
-      const dir = sectionFlip ? 1 : -1;
-      const nx = sectionAxis === "x" ? dir : 0;
-      const ny = sectionAxis === "y" ? dir : 0;
-      const nz = sectionAxis === "z" ? dir : 0;
+      const t = min + (max - min) * sectionPosition;
+      const \u03B8 = sectionAngle * Math.PI / 180;
+      const cos\u03B8 = Math.cos(\u03B8), sin\u03B8 = Math.sin(\u03B8);
+      const sign = sectionFlip ? -1 : 1;
+      let nx = 0, ny = 0, nz = 0;
+      if (sectionAxis === "x") {
+        nx = sign * cos\u03B8;
+        nz = sign * sin\u03B8;
+      } else if (sectionAxis === "y") {
+        ny = sign * cos\u03B8;
+        nz = sign * sin\u03B8;
+      } else {
+        nx = sign * sin\u03B8;
+        nz = sign * cos\u03B8;
+      }
+      const center = {
+        x: (bbox.min.x + bbox.max.x) / 2,
+        y: (bbox.min.y + bbox.max.y) / 2,
+        z: (bbox.min.z + bbox.max.z) / 2
+      };
+      const Px = sectionAxis === "x" ? t : center.x;
+      const Py = sectionAxis === "y" ? t : center.y;
+      const Pz = sectionAxis === "z" ? t : center.z;
       s.plane.normal.x = nx;
       s.plane.normal.y = ny;
       s.plane.normal.z = nz;
-      s.plane.constant = -dir * value;
+      s.plane.constant = -(nx * Px + ny * Py + nz * Pz);
       if (s.capMesh) {
-        const cx = (bbox.min.x + bbox.max.x) / 2;
-        const cy = (bbox.min.y + bbox.max.y) / 2;
-        const cz = (bbox.min.z + bbox.max.z) / 2;
+        const cx = center.x, cy = center.y, cz = center.z;
         const dist = nx * cx + ny * cy + nz * cz + s.plane.constant;
         const px = cx - nx * dist;
         const py = cy - ny * dist;
@@ -1027,7 +1070,367 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
     } catch (err) {
       console.warn("[Preview] section update failed", err);
     }
-  }, [sectionEnabled, sectionAxis, sectionFlip, sectionPosition]);
+  }, [sectionEnabled, sectionAxis, sectionFlip, sectionPosition, sectionAngle]);
+  useEffect(() => {
+    const v = viewerRef.current;
+    if (!v?.viewer || loading || !containerRef.current) return;
+    const renderer = v.viewer.renderer;
+    const scene = v.viewer.scene;
+    const camera = v.viewer.camera;
+    const canvas = renderer?.domElement;
+    if (!renderer || !scene || !camera || !canvas) return;
+    let sampleMesh = null;
+    v.viewer.mainModel?.EnumerateMeshes?.((m) => {
+      if (!sampleMesh && !m.userData?.__sectionHelper && !m.userData?.__measureHelper) sampleMesh = m;
+    });
+    if (!sampleMesh) return;
+    const Vector3Ctor = sampleMesh.position.constructor;
+    const MeshCtor = sampleMesh.constructor;
+    const MaterialCtor = (Array.isArray(sampleMesh.material) ? sampleMesh.material[0] : sampleMesh.material)?.constructor;
+    const GeometryCtor = sampleMesh.geometry.constructor;
+    const BufferAttrCtor = sampleMesh.geometry.attributes?.position?.constructor;
+    if (!Vector3Ctor || !MeshCtor || !MaterialCtor || !GeometryCtor || !BufferAttrCtor) return;
+    const teardown = () => {
+      const s = measureRef.current;
+      if (!s) return;
+      if (s.rafId !== null) cancelAnimationFrame(s.rafId);
+      for (const m of s.markers) {
+        scene.remove(m);
+        m.geometry?.dispose?.();
+        m.material?.dispose?.();
+      }
+      if (s.line) {
+        scene.remove(s.line);
+        s.line.geometry?.dispose?.();
+        s.line.material?.dispose?.();
+      }
+      if (s.label && s.label.parentElement) s.label.parentElement.removeChild(s.label);
+      measureRef.current = null;
+      v.viewer.Render?.();
+    };
+    if (!measureEnabled) {
+      teardown();
+      setMeasureDistance(null);
+      return;
+    }
+    measureRef.current = { points: [], normals: [], markers: [], line: null, label: null, rafId: null };
+    let THREE = null;
+    let raycaster = null;
+    (async () => {
+      try {
+        THREE = await import(
+          /* @vite-ignore */
+          'three'
+        );
+        raycaster = new THREE.Raycaster();
+      } catch (err) {
+        console.warn("[Preview] measure: failed to load three for raycaster", err);
+      }
+    })();
+    const bbox = v.viewer.GetBoundingBox?.(() => true);
+    const diag = bbox ? Math.sqrt(
+      (bbox.max.x - bbox.min.x) ** 2 + (bbox.max.y - bbox.min.y) ** 2 + (bbox.max.z - bbox.min.z) ** 2
+    ) : 100;
+    const markerRadius = Math.max(diag * 5e-3, 0.2);
+    const ndcFromEvent = (ev) => {
+      const rect = canvas.getBoundingClientRect();
+      return {
+        x: (ev.clientX - rect.left) / rect.width * 2 - 1,
+        y: -((ev.clientY - rect.top) / rect.height * 2 - 1)
+      };
+    };
+    const collectTargets = () => {
+      const out = [];
+      v.viewer.mainModel?.EnumerateMeshes?.((m) => {
+        if (m.userData?.__sectionHelper || m.userData?.__measureHelper) return;
+        if (m.visible === false) return;
+        out.push(m);
+      });
+      return out;
+    };
+    const makeMarker = (point) => {
+      const widthSegs = 16, heightSegs = 12;
+      const positions = [];
+      const indices = [];
+      for (let iy = 0; iy <= heightSegs; iy++) {
+        const v2 = iy / heightSegs;
+        const phi = v2 * Math.PI;
+        for (let ix = 0; ix <= widthSegs; ix++) {
+          const u = ix / widthSegs;
+          const theta = u * Math.PI * 2;
+          positions.push(
+            markerRadius * Math.sin(phi) * Math.cos(theta),
+            markerRadius * Math.cos(phi),
+            markerRadius * Math.sin(phi) * Math.sin(theta)
+          );
+        }
+      }
+      for (let iy = 0; iy < heightSegs; iy++) {
+        for (let ix = 0; ix < widthSegs; ix++) {
+          const a = iy * (widthSegs + 1) + ix;
+          const b = a + widthSegs + 1;
+          indices.push(a, b, a + 1, b, b + 1, a + 1);
+        }
+      }
+      const geom = new GeometryCtor();
+      geom.setAttribute("position", new BufferAttrCtor(new Float32Array(positions), 3));
+      geom.setIndex(indices);
+      geom.computeVertexNormals?.();
+      const mat = new MaterialCtor();
+      mat.color?.setHex?.(16746496);
+      mat.depthTest = false;
+      mat.depthWrite = false;
+      mat.transparent = true;
+      mat.opacity = 0.95;
+      const mesh = new MeshCtor(geom, mat);
+      mesh.position.copy(point);
+      mesh.renderOrder = 9999;
+      mesh.userData.__measureHelper = true;
+      scene.add(mesh);
+      return mesh;
+    };
+    const buildFaceHighlight = (mesh, hit) => {
+      const geom = mesh?.geometry;
+      const posAttr = geom?.attributes?.position;
+      if (!geom || !posAttr || !hit?.face?.normal) return null;
+      const positions = posAttr.array;
+      const indices = geom.index ? geom.index.array : null;
+      const localPoint = new Vector3Ctor(hit.point.x, hit.point.y, hit.point.z);
+      mesh.worldToLocal?.(localPoint);
+      const ln = hit.face.normal;
+      const planeC = -(ln.x * localPoint.x + ln.y * localPoint.y + ln.z * localPoint.z);
+      geom.computeBoundingBox?.();
+      const bb = geom.boundingBox;
+      const diag2 = bb ? Math.sqrt((bb.max.x - bb.min.x) ** 2 + (bb.max.y - bb.min.y) ** 2 + (bb.max.z - bb.min.z) ** 2) : 100;
+      const PLANE_TOL = Math.max(diag2 * 1e-3, 5e-3);
+      const NORMAL_TOL = 0.9995;
+      const triCount = indices ? indices.length / 3 : posAttr.count / 3;
+      const matched = [];
+      const tmpV = new Vector3Ctor();
+      for (let t = 0; t < triCount; t++) {
+        const ia = indices ? indices[t * 3] : t * 3;
+        const ib = indices ? indices[t * 3 + 1] : t * 3 + 1;
+        const ic = indices ? indices[t * 3 + 2] : t * 3 + 2;
+        const ax = positions[ia * 3], ay = positions[ia * 3 + 1], az = positions[ia * 3 + 2];
+        const bx = positions[ib * 3], by = positions[ib * 3 + 1], bz = positions[ib * 3 + 2];
+        const cx = positions[ic * 3], cy = positions[ic * 3 + 1], cz = positions[ic * 3 + 2];
+        const ux = bx - ax, uy = by - ay, uz = bz - az;
+        const vx = cx - ax, vy = cy - ay, vz = cz - az;
+        let nx = uy * vz - uz * vy;
+        let ny = uz * vx - ux * vz;
+        let nz = ux * vy - uy * vx;
+        const nlen = Math.sqrt(nx * nx + ny * ny + nz * nz);
+        if (nlen === 0) continue;
+        nx /= nlen;
+        ny /= nlen;
+        nz /= nlen;
+        const ndot = nx * ln.x + ny * ln.y + nz * ln.z;
+        if (ndot < NORMAL_TOL) continue;
+        const ccx = (ax + bx + cx) / 3, ccy = (ay + by + cy) / 3, ccz = (az + bz + cz) / 3;
+        const dist = Math.abs(ln.x * ccx + ln.y * ccy + ln.z * ccz + planeC);
+        if (dist > PLANE_TOL) continue;
+        for (const [vx_, vy_, vz_] of [[ax, ay, az], [bx, by, bz], [cx, cy, cz]]) {
+          tmpV.set?.(vx_, vy_, vz_);
+          mesh.localToWorld?.(tmpV);
+          matched.push(tmpV.x, tmpV.y, tmpV.z);
+        }
+      }
+      if (matched.length === 0) return null;
+      const hgeom = new GeometryCtor();
+      hgeom.setAttribute("position", new BufferAttrCtor(new Float32Array(matched), 3));
+      hgeom.computeVertexNormals?.();
+      const hmat = new MaterialCtor();
+      hmat.color?.setHex?.(16746496);
+      hmat.transparent = true;
+      hmat.opacity = 0.45;
+      hmat.depthWrite = false;
+      hmat.polygonOffset = true;
+      hmat.polygonOffsetFactor = -2;
+      hmat.polygonOffsetUnits = -2;
+      const highlight = new MeshCtor(hgeom, hmat);
+      highlight.renderOrder = 9998;
+      highlight.userData.__measureHelper = true;
+      scene.add(highlight);
+      return highlight;
+    };
+    const drawLine = (a, b) => {
+      const geom = new GeometryCtor();
+      geom.setAttribute("position", new BufferAttrCtor(new Float32Array([a.x, a.y, a.z, b.x, b.y, b.z]), 3));
+      const LineCtor = THREE?.Line ?? MeshCtor;
+      const LineMatCtor = THREE?.LineBasicMaterial ?? MaterialCtor;
+      const mat = new LineMatCtor({ color: 16746496, depthTest: false, depthWrite: false, transparent: true, opacity: 0.95 });
+      const line = new LineCtor(geom, mat);
+      line.renderOrder = 9998;
+      line.userData.__measureHelper = true;
+      scene.add(line);
+      return line;
+    };
+    const ensureLabel = () => {
+      const s = measureRef.current;
+      if (s.label) return s.label;
+      const el = document.createElement("div");
+      el.style.position = "absolute";
+      el.style.transform = "translate(-50%, -50%)";
+      el.style.padding = "2px 6px";
+      el.style.fontSize = "11px";
+      el.style.fontWeight = "600";
+      el.style.fontFamily = "system-ui, -apple-system, sans-serif";
+      el.style.background = "rgba(255, 136, 0, 0.95)";
+      el.style.color = "#fff";
+      el.style.borderRadius = "4px";
+      el.style.pointerEvents = "none";
+      el.style.whiteSpace = "nowrap";
+      el.style.boxShadow = "0 1px 4px rgba(0,0,0,0.25)";
+      el.style.zIndex = "5";
+      containerRef.current.appendChild(el);
+      s.label = el;
+      return el;
+    };
+    const updateLabel = () => {
+      const s = measureRef.current;
+      if (!s || s.points.length < 2 || !s.label) return;
+      const a = s.points[0], b = s.points[1];
+      const mid = new Vector3Ctor((a.x + b.x) / 2, (a.y + b.y) / 2, (a.z + b.z) / 2);
+      const projected = mid.clone();
+      projected.project?.(camera);
+      const rect = canvas.getBoundingClientRect();
+      const x = (projected.x + 1) / 2 * rect.width;
+      const y = (-projected.y + 1) / 2 * rect.height;
+      s.label.style.left = `${x}px`;
+      s.label.style.top = `${y}px`;
+      s.label.style.opacity = projected.z > 1 ? "0" : "1";
+    };
+    const tick = () => {
+      const s = measureRef.current;
+      if (!s) return;
+      updateLabel();
+      s.rafId = requestAnimationFrame(tick);
+    };
+    measureRef.current.rafId = requestAnimationFrame(tick);
+    const DRAG_TOL = 4;
+    const DRAG_TIME = 350;
+    let downX = 0, downY = 0, downTime = 0, dragging = false, downActive = false;
+    const worldNormalFromHit = (hit) => {
+      const fn = hit?.face?.normal;
+      const obj = hit?.object;
+      if (!fn || !obj) return null;
+      try {
+        const local = new Vector3Ctor(fn.x, fn.y, fn.z);
+        local.transformDirection?.(obj.matrixWorld);
+        return { x: local.x, y: local.y, z: local.z };
+      } catch {
+        return { x: fn.x, y: fn.y, z: fn.z };
+      }
+    };
+    const doMeasurePick = (ev) => {
+      const targets = collectTargets();
+      if (!targets.length || !raycaster) return;
+      const ndc = ndcFromEvent(ev);
+      raycaster.setFromCamera(ndc, camera);
+      const hits = raycaster.intersectObjects(targets, false);
+      if (!hits.length) return;
+      const s = measureRef.current;
+      const point = new Vector3Ctor(hits[0].point.x, hits[0].point.y, hits[0].point.z);
+      const normal = worldNormalFromHit(hits[0]);
+      if (s.points.length === 2) {
+        for (const m of s.markers) {
+          scene.remove(m);
+          m.geometry?.dispose?.();
+          m.material?.dispose?.();
+        }
+        if (s.line) {
+          scene.remove(s.line);
+          s.line.geometry?.dispose?.();
+          s.line.material?.dispose?.();
+        }
+        if (s.label) s.label.style.opacity = "0";
+        s.points = [];
+        s.markers = [];
+        s.line = null;
+        s.normals = [];
+        setMeasureDistance(null);
+      }
+      s.points.push(point);
+      s.normals.push(normal);
+      if (measureMode === "perp") {
+        const highlight = buildFaceHighlight(hits[0].object, hits[0]);
+        s.markers.push(highlight ?? makeMarker(point));
+      } else {
+        s.markers.push(makeMarker(point));
+      }
+      if (s.points.length === 2) {
+        const a = s.points[0];
+        let b = s.points[1];
+        let dist;
+        let suffix = "";
+        if (measureMode === "perp") {
+          const refN = s.normals[0] ?? s.normals[1];
+          if (refN) {
+            const len = Math.sqrt(refN.x * refN.x + refN.y * refN.y + refN.z * refN.z) || 1;
+            const nx = refN.x / len, ny = refN.y / len, nz = refN.z / len;
+            const dx = b.x - a.x, dy = b.y - a.y, dz = b.z - a.z;
+            const proj = dx * nx + dy * ny + dz * nz;
+            const projectedB = new Vector3Ctor(a.x + nx * proj, a.y + ny * proj, a.z + nz * proj);
+            s.points[1] = projectedB;
+            b = projectedB;
+            dist = Math.abs(proj);
+            suffix = " \u22A5";
+          } else {
+            const dx = b.x - a.x, dy = b.y - a.y, dz = b.z - a.z;
+            dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
+          }
+        } else {
+          const dx = b.x - a.x, dy = b.y - a.y, dz = b.z - a.z;
+          dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
+        }
+        s.line = drawLine(a, b);
+        setMeasureDistance(dist);
+        const label = ensureLabel();
+        label.textContent = `${formatMeasureDistance(dist)}${suffix}`;
+      }
+      v.viewer.Render?.();
+    };
+    const onPointerDown = (ev) => {
+      if (ev.button !== 0) return;
+      downX = ev.clientX;
+      downY = ev.clientY;
+      downTime = performance.now();
+      dragging = false;
+      downActive = true;
+    };
+    const onPointerMove = (ev) => {
+      if (!downActive) return;
+      const dx = ev.clientX - downX, dy = ev.clientY - downY;
+      if (dx * dx + dy * dy > DRAG_TOL * DRAG_TOL) dragging = true;
+    };
+    const onPointerUp = (ev) => {
+      if (ev.button !== 0 || !downActive) return;
+      const elapsed = performance.now() - downTime;
+      const wasClick = !dragging && elapsed < DRAG_TIME;
+      downActive = false;
+      if (!wasClick) return;
+      doMeasurePick(ev);
+    };
+    const onKeyDown = (ev) => {
+      if (ev.key === "Escape") setMeasureEnabled(false);
+    };
+    canvas.style.cursor = "crosshair";
+    canvas.addEventListener("pointerdown", onPointerDown);
+    canvas.addEventListener("pointermove", onPointerMove);
+    canvas.addEventListener("pointerup", onPointerUp);
+    canvas.addEventListener("pointercancel", onPointerUp);
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      canvas.style.cursor = "";
+      canvas.removeEventListener("pointerdown", onPointerDown);
+      canvas.removeEventListener("pointermove", onPointerMove);
+      canvas.removeEventListener("pointerup", onPointerUp);
+      canvas.removeEventListener("pointercancel", onPointerUp);
+      window.removeEventListener("keydown", onKeyDown);
+      teardown();
+      setMeasureDistance(null);
+    };
+  }, [measureEnabled, measureMode, loading, tree]);
   useEffect(() => {
     if (!showHint || loading) return;
     const t = setTimeout(() => setShowHint(false), 5e3);
@@ -1130,9 +1533,10 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
     setEdgeColor("#000000");
     setEdgeThreshold(1);
     setSectionEnabled(false);
-    setSectionAxis("z");
+    setSectionAxis("x");
     setSectionFlip(false);
     setSectionPosition(0.5);
+    setSectionAngle(0);
   };
   const handleDefaultDownload = () => {
     const a = document.createElement("a");
@@ -1191,6 +1595,8 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
   };
   const tBtn = "h-8 w-8 shrink-0 flex items-center justify-center rounded text-gray-600 hover:bg-gray-200 hover:text-gray-900 transition-colors";
   const tBtnActive = "h-8 w-8 shrink-0 flex items-center justify-center rounded bg-gray-200 text-gray-900";
+  const tBtnWide = "h-8 shrink-0 flex items-center justify-center px-2 rounded text-gray-600 hover:bg-gray-200 hover:text-gray-900 transition-colors";
+  const tBtnWideActive = "h-8 shrink-0 flex items-center justify-center px-2 rounded bg-gray-200 text-gray-900";
   const tBtnSep = "h-5 w-px bg-gray-300 mx-1";
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full bg-white", children: [
     /* @__PURE__ */ jsxs(PanelActions, { children: [
@@ -1200,6 +1606,15 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
       /* @__PURE__ */ jsx("button", { onClick: () => setCameraPreset("top"), className: tBtn, title: "Top view", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold", children: "TOP" }) }),
       /* @__PURE__ */ jsx("button", { onClick: () => setCameraPreset("front"), className: tBtn, title: "Front view", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold", children: "FRT" }) }),
       /* @__PURE__ */ jsx("button", { onClick: () => setCameraPreset("side"), className: tBtn, title: "Side view", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold", children: "SDE" }) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setPerspective((p) => !p),
+          className: perspective ? tBtnWideActive : tBtnWide,
+          title: perspective ? "Switch to orthographic view" : "Switch to perspective view",
+          children: /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold whitespace-nowrap", children: perspective ? "Perspective" : "Orthographic" })
+        }
+      ),
       /* @__PURE__ */ jsx("div", { className: tBtnSep }),
       /* @__PURE__ */ jsx("button", { onClick: handleSnapshot, className: tBtn, title: "Save snapshot as PNG", children: /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: [
         /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z" }),
@@ -1209,12 +1624,39 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
       /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: () => setPerspective((p) => !p),
-          className: perspective ? tBtnActive : tBtn,
-          title: perspective ? "Switch to orthographic view" : "Switch to perspective view",
-          children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold", children: perspective ? "PSP" : "ORT" })
+          onClick: () => setMeasureEnabled((m) => !m),
+          className: measureEnabled ? tBtnActive : tBtn,
+          title: measureEnabled ? "Stop measuring (Esc)" : "Measure distance \u2014 click two points on the model",
+          children: /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: [
+            /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 14.25l6-6 6 6 4.5-4.5M9.75 8.25v3M12.75 11.25v3M15.75 14.25v3" }),
+            /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.25 18.75h19.5" })
+          ] })
         }
       ),
+      measureEnabled && /* @__PURE__ */ jsxs("div", { className: "flex items-stretch h-8 rounded border border-gray-200 overflow-hidden", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setMeasureMode("point"),
+            className: `px-2 text-[11px] font-semibold transition-colors ${measureMode === "point" ? "bg-orange-500 text-white" : "bg-white text-gray-600 hover:bg-gray-50"}`,
+            title: "Point \u2014 measure straight-line distance between two picked points",
+            children: "Point"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setMeasureMode("perp"),
+            className: `px-2 text-[12px] font-semibold transition-colors ${measureMode === "perp" ? "bg-orange-500 text-white" : "bg-white text-gray-600 hover:bg-gray-50"}`,
+            title: "Perpendicular \u2014 pick two surfaces and measure the perpendicular gap between them",
+            children: "\u22A5"
+          }
+        )
+      ] }),
+      measureEnabled && measureDistance !== null && /* @__PURE__ */ jsxs("div", { className: "px-2 py-1 text-[11px] font-mono font-semibold text-orange-600 bg-orange-50 border border-orange-200 rounded whitespace-nowrap", title: measureMode === "perp" ? "Perpendicular distance between the two picked surfaces" : "Straight-line distance between the two picked points", children: [
+        formatMeasureDistance(measureDistance),
+        measureMode === "perp" ? " \u22A5" : ""
+      ] }),
       /* @__PURE__ */ jsx("div", { className: tBtnSep }),
       /* @__PURE__ */ jsx("button", { onClick: () => setShowMeshes((s) => !s), className: showMeshes ? tBtnActive : tBtn, title: "Toggle meshes panel", children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" }) }) }),
       /* @__PURE__ */ jsx("button", { onClick: () => setShowSettings((s) => !s), className: showSettings ? tBtnActive : tBtn, title: "Toggle display panel", children: /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: [
@@ -1322,6 +1764,27 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
               )
             ] }),
             /* @__PURE__ */ jsxs("div", { className: sectionEnabled ? "mt-2 space-y-2" : "mt-2 space-y-2 opacity-40 pointer-events-none", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 mb-1", children: [
+                  /* @__PURE__ */ jsx("span", { children: "Angle" }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-gray-500 tabular-nums", children: [
+                    sectionAngle,
+                    "\xB0"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "range",
+                    min: 0,
+                    max: 180,
+                    step: 1,
+                    value: sectionAngle,
+                    onChange: (e) => setSectionAngle(Number(e.target.value)),
+                    className: "w-full accent-blue-500"
+                  }
+                )
+              ] }),
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 mb-1", children: [
                   /* @__PURE__ */ jsx("span", { children: "Axis" }),
@@ -1446,5 +1909,5 @@ function ImagePanel({ url, filename, onDownload, onEmail }) {
 }
 
 export { Preview, setPdfPreview };
-//# sourceMappingURL=chunk-DUUANLLE.js.map
-//# sourceMappingURL=chunk-DUUANLLE.js.map
+//# sourceMappingURL=chunk-QBH7KERS.js.map
+//# sourceMappingURL=chunk-QBH7KERS.js.map