react-os-shell 0.2.45 → 0.2.47

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

@@ -410,6 +410,10 @@ function DxfPanel({ url, filename, onDownload, onEmail }) {
   const [layers, setLayers] = useState([]);
   const [showLayers, setShowLayers] = useState(false);
   const [showHint, setShowHint] = useState(true);
+  const [measureEnabled, setMeasureEnabled] = useState(false);
+  const [measureMode, setMeasureMode] = useState("point");
+  const [measureDistance, setMeasureDistance] = useState(null);
+  const measureRef = useRef(null);
   useEffect(() => {
     let cancelled = false;
     let viewer = null;
@@ -512,6 +516,348 @@ function DxfPanel({ url, filename, onDownload, onEmail }) {
     const t = setTimeout(() => setShowHint(false), 5e3);
     return () => clearTimeout(t);
   }, [showHint, loading]);
+  useEffect(() => {
+    const v = viewerRef.current;
+    if (loading || error || !v) return;
+    const scene = v.GetScene?.();
+    const camera = v.GetCamera?.();
+    const canvas = v.GetCanvas?.();
+    if (!scene || !camera || !canvas || !containerRef.current) return;
+    const teardown = () => {
+      const s = measureRef.current;
+      if (!s) return;
+      if (s.overlay && s.overlay.parentElement) s.overlay.parentElement.removeChild(s.overlay);
+      measureRef.current = null;
+    };
+    if (!measureEnabled) {
+      teardown();
+      setMeasureDistance(null);
+      return;
+    }
+    const overlay = document.createElement("div");
+    overlay.style.cssText = "position:absolute;inset:0;pointer-events:none;z-index:5;";
+    containerRef.current.appendChild(overlay);
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("style", "position:absolute;inset:0;width:100%;height:100%;pointer-events:none;");
+    overlay.appendChild(svg);
+    const refLineEl = document.createElementNS("http://www.w3.org/2000/svg", "line");
+    refLineEl.setAttribute("stroke", "#ff8800");
+    refLineEl.setAttribute("stroke-width", "1");
+    refLineEl.setAttribute("stroke-dasharray", "6,4");
+    refLineEl.setAttribute("opacity", "0.55");
+    refLineEl.style.display = "none";
+    svg.appendChild(refLineEl);
+    const lineEl = document.createElementNS("http://www.w3.org/2000/svg", "line");
+    lineEl.setAttribute("stroke", "#ff8800");
+    lineEl.setAttribute("stroke-width", "1.5");
+    lineEl.setAttribute("stroke-linecap", "round");
+    lineEl.style.display = "none";
+    svg.appendChild(lineEl);
+    const snapEl = document.createElement("div");
+    snapEl.style.cssText = `position:absolute;width:14px;height:14px;border:2px solid #ff8800;background:rgba(255,255,255,0.7);transform:translate(-50%,-50%) rotate(45deg);box-sizing:border-box;display:none;`;
+    overlay.appendChild(snapEl);
+    measureRef.current = {
+      picks: [],
+      lineDir: null,
+      overlay,
+      svg,
+      line: lineEl,
+      refLine: refLineEl,
+      markers: [],
+      label: null,
+      snap: snapEl,
+      segments: []
+    };
+    let THREE = null;
+    let ready = false;
+    const pxFromScene = (sx, sy) => {
+      if (!THREE) return { x: 0, y: 0 };
+      const v3 = new THREE.Vector3(sx, sy, 0).project(camera);
+      const w = canvas.clientWidth, h = canvas.clientHeight;
+      return { x: (v3.x + 1) / 2 * w, y: (-v3.y + 1) / 2 * h };
+    };
+    (async () => {
+      try {
+        THREE = await import(
+          /* @vite-ignore */
+          'three'
+        );
+        const segs = measureRef.current?.segments;
+        if (!segs) return;
+        const va = new THREE.Vector3(), vb = new THREE.Vector3();
+        scene.traverse((obj) => {
+          if (!obj?.isLineSegments) return;
+          const pos = obj.geometry?.attributes?.position;
+          if (!pos) return;
+          const arr = pos.array;
+          obj.updateMatrixWorld?.();
+          const m = obj.matrixWorld;
+          for (let i = 0; i < arr.length; i += 6) {
+            va.set(arr[i], arr[i + 1], arr[i + 2]).applyMatrix4(m);
+            vb.set(arr[i + 3], arr[i + 4], arr[i + 5]).applyMatrix4(m);
+            segs.push({ ax: va.x, ay: va.y, bx: vb.x, by: vb.y });
+          }
+        });
+        ready = true;
+      } catch {
+      }
+    })();
+    const SNAP_PX = 12;
+    const findSnap = (cx, cy) => {
+      const s = measureRef.current;
+      if (!s || !ready) return null;
+      let best = null;
+      let bestD2 = SNAP_PX * SNAP_PX;
+      for (const seg of s.segments) {
+        const ap = pxFromScene(seg.ax, seg.ay);
+        const bp = pxFromScene(seg.bx, seg.by);
+        const ldx = seg.bx - seg.ax, ldy = seg.by - seg.ay;
+        const llen = Math.sqrt(ldx * ldx + ldy * ldy) || 1;
+        const segDir = { dx: ldx / llen, dy: ldy / llen };
+        let dx = cx - ap.x, dy = cy - ap.y;
+        let d2 = dx * dx + dy * dy;
+        if (d2 < bestD2) {
+          best = { sx: seg.ax, sy: seg.ay, type: "endpoint", dir: segDir };
+          bestD2 = d2;
+        }
+        dx = cx - bp.x;
+        dy = cy - bp.y;
+        d2 = dx * dx + dy * dy;
+        if (d2 < bestD2) {
+          best = { sx: seg.bx, sy: seg.by, type: "endpoint", dir: segDir };
+          bestD2 = d2;
+        }
+        const sdx = bp.x - ap.x, sdy = bp.y - ap.y;
+        const len2 = sdx * sdx + sdy * sdy;
+        if (len2 > 0) {
+          const t = ((cx - ap.x) * sdx + (cy - ap.y) * sdy) / len2;
+          if (t > 0 && t < 1) {
+            const px = ap.x + t * sdx, py = ap.y + t * sdy;
+            dx = cx - px;
+            dy = cy - py;
+            d2 = dx * dx + dy * dy;
+            if (d2 < bestD2) {
+              const sx = seg.ax + t * (seg.bx - seg.ax);
+              const sy = seg.ay + t * (seg.by - seg.ay);
+              best = { sx, sy, type: "line", dir: segDir };
+              bestD2 = d2;
+            }
+          }
+        }
+      }
+      return best;
+    };
+    const makeMarker = () => {
+      const el = document.createElement("div");
+      el.style.cssText = `position:absolute;width:10px;height:10px;border-radius:50%;background:#ff8800;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.25);transform:translate(-50%,-50%);pointer-events:none;`;
+      overlay.appendChild(el);
+      return el;
+    };
+    const ensureLabel = () => {
+      const s = measureRef.current;
+      if (s.label) return s.label;
+      const el = document.createElement("div");
+      el.style.cssText = `position:absolute;transform:translate(-50%,-50%);padding:2px 6px;font-size:11px;font-weight:600;font-family:system-ui,-apple-system,sans-serif;background:rgba(255,136,0,0.95);color:#fff;border-radius:4px;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,0.25);pointer-events:none;`;
+      overlay.appendChild(el);
+      s.label = el;
+      return el;
+    };
+    const positionMarker = (el, x, y) => {
+      const p = pxFromScene(x, y);
+      el.style.left = `${p.x}px`;
+      el.style.top = `${p.y}px`;
+    };
+    const computeRenderedEnds = () => {
+      const s = measureRef.current;
+      const a = s.picks[0];
+      let b = s.picks[1];
+      if (measureMode === "perp" && s.lineDir) {
+        const d = s.lineDir;
+        const ax = a.x, ay = a.y;
+        const t = (b.x - ax) * d.dx + (b.y - ay) * d.dy;
+        const fx = ax + d.dx * t;
+        const fy = ay + d.dy * t;
+        return { from: { x: fx, y: fy }, to: { x: b.x, y: b.y } };
+      }
+      return { from: a, to: b };
+    };
+    const updateOverlay = () => {
+      const s = measureRef.current;
+      if (!s) return;
+      if (s.markers[0]) positionMarker(s.markers[0], s.picks[0].x, s.picks[0].y);
+      if (s.markers[1]) positionMarker(s.markers[1], s.picks[1].x, s.picks[1].y);
+      if (measureMode === "perp" && s.picks.length >= 1 && s.lineDir && s.refLine) {
+        const a = s.picks[0];
+        const w = canvas.clientWidth, h = canvas.clientHeight;
+        const screenSpan = Math.hypot(w, h) * 4;
+        const ap = pxFromScene(a.x, a.y);
+        const probe = pxFromScene(a.x + s.lineDir.dx, a.y + s.lineDir.dy);
+        const pxLen = Math.hypot(probe.x - ap.x, probe.y - ap.y) || 1;
+        const sceneStep = screenSpan / pxLen;
+        const x0 = a.x - s.lineDir.dx * sceneStep;
+        const y0 = a.y - s.lineDir.dy * sceneStep;
+        const x1 = a.x + s.lineDir.dx * sceneStep;
+        const y1 = a.y + s.lineDir.dy * sceneStep;
+        const p0 = pxFromScene(x0, y0);
+        const p1 = pxFromScene(x1, y1);
+        s.refLine.setAttribute("x1", String(p0.x));
+        s.refLine.setAttribute("y1", String(p0.y));
+        s.refLine.setAttribute("x2", String(p1.x));
+        s.refLine.setAttribute("y2", String(p1.y));
+        s.refLine.style.display = "";
+      } else if (s.refLine) {
+        s.refLine.style.display = "none";
+      }
+      if (s.picks.length === 2) {
+        const ends = computeRenderedEnds();
+        const fp = pxFromScene(ends.from.x, ends.from.y);
+        const tp = pxFromScene(ends.to.x, ends.to.y);
+        s.line.setAttribute("x1", String(fp.x));
+        s.line.setAttribute("y1", String(fp.y));
+        s.line.setAttribute("x2", String(tp.x));
+        s.line.setAttribute("y2", String(tp.y));
+        s.line.style.display = "";
+        if (s.label) {
+          s.label.style.left = `${(fp.x + tp.x) / 2}px`;
+          s.label.style.top = `${(fp.y + tp.y) / 2}px`;
+        }
+      } else {
+        s.line.style.display = "none";
+      }
+    };
+    const DRAG_TOL = 4;
+    const DRAG_TIME = 350;
+    let downX = 0, downY = 0, downTime = 0, downActive = false, dragging = false;
+    let lastSnap = null;
+    const handlePointerDown = (ev) => {
+      const d = ev?.detail;
+      if (!d || d.domEvent?.button !== 0) return;
+      downX = d.canvasCoord.x;
+      downY = d.canvasCoord.y;
+      downTime = performance.now();
+      dragging = false;
+      downActive = true;
+    };
+    const handlePointerMove = (ev) => {
+      const rect = canvas.getBoundingClientRect();
+      const cx = ev.clientX - rect.left;
+      const cy = ev.clientY - rect.top;
+      if (downActive) {
+        if ((cx - downX) ** 2 + (cy - downY) ** 2 > DRAG_TOL * DRAG_TOL) dragging = true;
+      }
+      const s = measureRef.current;
+      if (!s || !s.snap) return;
+      if (downActive && dragging) {
+        s.snap.style.display = "none";
+        return;
+      }
+      lastSnap = findSnap(cx, cy);
+      if (lastSnap) {
+        const p = pxFromScene(lastSnap.sx, lastSnap.sy);
+        s.snap.style.left = `${p.x}px`;
+        s.snap.style.top = `${p.y}px`;
+        s.snap.style.display = "";
+      } else {
+        s.snap.style.display = "none";
+      }
+    };
+    const handlePointerUp = (ev) => {
+      if (!downActive) return;
+      downActive = false;
+      const elapsed = performance.now() - downTime;
+      if (dragging || elapsed > DRAG_TIME) return;
+      const raw = ev?.detail?.position;
+      if (!raw) return;
+      const useSnap = lastSnap && Math.hypot(downX - canvas.getBoundingClientRect().width, 0) >= 0;
+      const picked = useSnap && lastSnap ? { x: lastSnap.sx, y: lastSnap.sy, snapType: lastSnap.type, lineDir: lastSnap.dir } : { x: raw.x, y: raw.y, lineDir: void 0 };
+      doPick(picked);
+    };
+    const doPick = (p) => {
+      const s = measureRef.current;
+      if (!s) return;
+      if (s.picks.length === 2) {
+        for (const m of s.markers) m.parentElement?.removeChild(m);
+        s.markers = [];
+        s.picks = [];
+        s.lineDir = null;
+        s.line.style.display = "none";
+        if (s.refLine) s.refLine.style.display = "none";
+        if (s.label) s.label.style.opacity = "0";
+        setMeasureDistance(null);
+      }
+      if (measureMode === "perp" && s.picks.length === 0) {
+        if (!p.lineDir) {
+          const label = ensureLabel();
+          label.style.opacity = "1";
+          label.style.left = `${pxFromScene(p.x, p.y).x}px`;
+          label.style.top = `${pxFromScene(p.x, p.y).y - 18}px`;
+          label.textContent = "\u22A5: snap to a line or corner first";
+          setTimeout(() => {
+            if (s.label && s.picks.length === 0) s.label.style.opacity = "0";
+          }, 1500);
+          return;
+        }
+        s.lineDir = p.lineDir;
+      }
+      s.picks.push({ x: p.x, y: p.y });
+      s.markers.push(makeMarker());
+      if (s.picks.length === 2) {
+        const a = s.picks[0], b = s.picks[1];
+        let dist;
+        let suffix = "";
+        if (measureMode === "perp" && s.lineDir) {
+          const dx = b.x - a.x, dy = b.y - a.y;
+          dist = Math.abs(dx * s.lineDir.dy - dy * s.lineDir.dx);
+          suffix = " \u22A5";
+        } else {
+          const dx = b.x - a.x, dy = b.y - a.y;
+          dist = Math.sqrt(dx * dx + dy * dy);
+        }
+        setMeasureDistance(dist);
+        const label = ensureLabel();
+        label.style.opacity = "1";
+        label.textContent = `${formatMeasureDistance(dist)}${suffix}`;
+      }
+      updateOverlay();
+    };
+    const onKeyDown = (ev) => {
+      if (ev.key === "Escape") setMeasureEnabled(false);
+    };
+    canvas.style.cursor = "crosshair";
+    try {
+      v.Subscribe?.("pointerdown", handlePointerDown);
+    } catch {
+    }
+    try {
+      v.Subscribe?.("pointerup", handlePointerUp);
+    } catch {
+    }
+    try {
+      v.Subscribe?.("viewChanged", updateOverlay);
+    } catch {
+    }
+    canvas.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      canvas.style.cursor = "";
+      try {
+        v.Unsubscribe?.("pointerdown", handlePointerDown);
+      } catch {
+      }
+      try {
+        v.Unsubscribe?.("pointerup", handlePointerUp);
+      } catch {
+      }
+      try {
+        v.Unsubscribe?.("viewChanged", updateOverlay);
+      } catch {
+      }
+      canvas.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("keydown", onKeyDown);
+      teardown();
+      setMeasureDistance(null);
+    };
+  }, [measureEnabled, measureMode, loading, error]);
   const toggleLayer = (name) => {
     setLayers((prev) => prev.map((l) => {
       if (l.name !== name) return l;
@@ -586,6 +932,45 @@ function DxfPanel({ url, filename, onDownload, onEmail }) {
         }
       ),
       /* @__PURE__ */ jsx("button", { onClick: () => setShowHint((s) => !s), className: btn, title: "How to navigate", children: /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" }) }) }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setMeasureEnabled((m) => !m),
+          className: btn + (measureEnabled ? " bg-gray-200" : ""),
+          title: measureEnabled ? "Stop measuring (Esc)" : "Measure distance \u2014 click two points on the drawing",
+          children: [
+            /* @__PURE__ */ jsxs("svg", { className: "h-3.5 w-3.5", 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" })
+            ] }),
+            "Measure"
+          ]
+        }
+      ),
+      measureEnabled && /* @__PURE__ */ jsxs("div", { className: "flex items-stretch h-7 rounded border border-gray-200 overflow-hidden text-[11px] font-semibold", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setMeasureMode("point"),
+            className: `px-2 transition-colors ${measureMode === "point" ? "bg-orange-500 text-white" : "bg-white text-gray-600 hover:bg-gray-50"}`,
+            title: "Point \u2014 straight-line distance between two picks",
+            children: "Point"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setMeasureMode("perp"),
+            className: `px-2 transition-colors ${measureMode === "perp" ? "bg-orange-500 text-white" : "bg-white text-gray-600 hover:bg-gray-50"}`,
+            title: "Perpendicular \u2014 click on a line first, then pick a point. Reports the perpendicular distance.",
+            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 from second pick to first line" : "Straight-line distance between the two picked points", children: [
+        formatMeasureDistance(measureDistance),
+        measureMode === "perp" ? " \u22A5" : ""
+      ] }),
       /* @__PURE__ */ jsx("button", { onClick: handleResetView, className: btn, title: "Fit drawing to view", children: "Fit" }),
       /* @__PURE__ */ jsxs("button", { onClick: onDownload ?? handleDefaultDownload, className: btn, children: [
         /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" }) }),
@@ -664,6 +1049,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 +1070,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 +1147,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 +1168,10 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
     })();
     return () => {
       cancelled = true;
+      try {
+        resizeObserver?.disconnect();
+      } catch {
+      }
       try {
         viewer?.Destroy?.();
       } catch {
@@ -1003,19 +1415,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 +1455,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 +1918,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 +1980,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 +1991,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 +2009,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 +2149,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 +2294,5 @@ function ImagePanel({ url, filename, onDownload, onEmail }) {
 }
 
 export { Preview, setPdfPreview };
-//# sourceMappingURL=chunk-DUUANLLE.js.map
-//# sourceMappingURL=chunk-DUUANLLE.js.map
+//# sourceMappingURL=chunk-G6WVMTJU.js.map
+//# sourceMappingURL=chunk-G6WVMTJU.js.map