efficient-shell 0.0.0-stage → 4.126.2

package/dist/Preview-N4UYYXG6.js

@@ -0,0 +1,2955 @@
+import { PdfViewer, ToolbarSlotContext, PanelActions } from './chunk-FQB24B42.js';
+import { ImageAnnotator_default } from './chunk-AXWC3332.js';
+import { AboutApp } from './chunk-C3NELUTX.js';
+import { peekPdfPreviewStage, claimPdfPreviewStage, PDF_PREVIEW_UPDATE_EVENT } from './chunk-3L463T5H.js';
+import { WindowTitle, getActiveModalId } from './chunk-W6XTG23K.js';
+import './chunk-GA35NEND.js';
+import './chunk-YMGXZABY.js';
+import { toast_default } from './chunk-2VM2FRZJ.js';
+import './chunk-YNHLQ24V.js';
+import './chunk-7KIOEKHS.js';
+import { registerModalEscapeInterceptor } from './chunk-HYZ5QMVO.js';
+import './chunk-3CUSBZWG.js';
+import { useRef, useState, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var _stencilContextPatched = false;
+function ensureStencilContextAttribute() {
+  if (_stencilContextPatched) return;
+  if (typeof HTMLCanvasElement === "undefined") return;
+  _stencilContextPatched = true;
+  const orig = HTMLCanvasElement.prototype.getContext;
+  HTMLCanvasElement.prototype.getContext = function patchedGetContext(type, attrs) {
+    if (type === "webgl" || type === "webgl2" || type === "experimental-webgl") {
+      attrs = { ...attrs || {}, stencil: true };
+    }
+    return orig.call(this, type, attrs);
+  };
+  console.info("[Preview] section: canvas getContext patched (force stencil=true)");
+}
+var TITLE_DISPLAY_MAX = 24;
+function truncateForTitle(s) {
+  return s.length > TITLE_DISPLAY_MAX ? `${s.slice(0, TITLE_DISPLAY_MAX - 1)}\u2026` : s;
+}
+function swapPreviewData(prev, next) {
+  if (prev?.url && prev.url !== next.url && prev.url.startsWith("blob:")) {
+    URL.revokeObjectURL(prev.url);
+  }
+  return next;
+}
+function Preview() {
+  const consumedRef = useRef(void 0);
+  if (consumedRef.current === void 0) {
+    consumedRef.current = peekPdfPreviewStage();
+  }
+  const [data, setData] = useState(consumedRef.current?.data ?? null);
+  useEffect(() => {
+    const stage = consumedRef.current;
+    if (stage == null) return;
+    claimPdfPreviewStage(stage);
+    setData((prev) => prev === stage.data ? prev : swapPreviewData(prev, stage.data));
+  }, []);
+  useEffect(() => {
+    const myToken = consumedRef.current?.token;
+    if (myToken == null) return;
+    const handler = (e) => {
+      const detail = e.detail;
+      if (!detail || detail.token !== myToken) return;
+      setData((prev) => swapPreviewData(prev, detail.data));
+    };
+    window.addEventListener(PDF_PREVIEW_UPDATE_EVENT, handler);
+    return () => window.removeEventListener(PDF_PREVIEW_UPDATE_EVENT, handler);
+  }, []);
+  const shownUrlRef = useRef(void 0);
+  useEffect(() => {
+    shownUrlRef.current = data?.url;
+  }, [data?.url]);
+  const pendingRevokeRef = useRef(null);
+  useEffect(() => {
+    if (pendingRevokeRef.current !== null) {
+      clearTimeout(pendingRevokeRef.current);
+      pendingRevokeRef.current = null;
+    }
+    return () => {
+      const url = shownUrlRef.current;
+      if (url?.startsWith("blob:")) pendingRevokeRef.current = setTimeout(() => URL.revokeObjectURL(url), 0);
+    };
+  }, []);
+  const titleName = data?.filename ? truncateForTitle(data.filename) : "Untitled";
+  const fileRef = useRef(null);
+  const rootRef = useRef(null);
+  const [toolbarSlotEl, setToolbarSlotEl] = useState(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragDepthRef = useRef(0);
+  const handlePick = () => fileRef.current?.click();
+  const resetDrag = () => {
+    dragDepthRef.current = 0;
+    setIsDragging(false);
+  };
+  const isActiveWindow = (el) => {
+    const myModal = el.closest("[data-modal-id]");
+    if (!myModal) return true;
+    return getActiveModalId() === myModal.dataset.modalId;
+  };
+  useEffect(() => {
+    const onWindowDragEnd = () => resetDrag();
+    const onWindowDrop = () => resetDrag();
+    const onKey = (e) => {
+      if (e.key === "Escape") resetDrag();
+    };
+    window.addEventListener("dragend", onWindowDragEnd);
+    window.addEventListener("drop", onWindowDrop);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("dragend", onWindowDragEnd);
+      window.removeEventListener("drop", onWindowDrop);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, []);
+  const ingestFile = (file) => {
+    const ext = (file.name.split(".").pop() || "").toLowerCase();
+    const kind = ext === "pdf" ? "pdf" : ext === "dxf" ? "dxf" : ["jpg", "jpeg", "png", "gif", "webp", "svg", "avif", "bmp"].includes(ext) ? "image" : ["stp", "step", "stl", "obj", "gltf", "glb", "3mf", "iges", "igs", "ply", "fbx"].includes(ext) ? "3d" : void 0;
+    if (!kind) {
+      if (ext === "dwg") toast_default.error("DWG files need server-side conversion. Convert to PDF or DXF first.");
+      else toast_default.error(`Unsupported file type: .${ext || "unknown"}`);
+      return;
+    }
+    const url = URL.createObjectURL(file);
+    setData((prev) => {
+      if (prev?.url?.startsWith("blob:") && prev.url !== url) {
+        URL.revokeObjectURL(prev.url);
+      }
+      return { url, filename: file.name, kind };
+    });
+  };
+  const handleFile = (e) => {
+    const file = e.target.files?.[0];
+    if (file) ingestFile(file);
+    if (fileRef.current) fileRef.current.value = "";
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    resetDrag();
+    const file = e.dataTransfer.files?.[0];
+    if (file) ingestFile(file);
+  };
+  const Toolbar = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-gray-200 bg-gray-50 shrink-0", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileRef,
+        type: "file",
+        accept: ".pdf,.dxf,.jpg,.jpeg,.png,.gif,.webp,.svg,.avif,.bmp,.stp,.step,.stl,.obj,.gltf,.glb,.3mf,.iges,.igs,.ply,.fbx",
+        onChange: handleFile,
+        className: "hidden"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: handlePick,
+        className: "text-xs text-gray-700 hover:text-gray-900 px-2 py-1 rounded hover:bg-gray-200 transition-colors flex items-center gap-1",
+        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.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 00-1.883 2.542l.857 6a2.25 2.25 0 002.227 1.932H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-1.883-2.542m-16.5 0V6A2.25 2.25 0 016 3.75h3.879a1.5 1.5 0 011.06.44l2.122 2.12a1.5 1.5 0 001.06.44H18A2.25 2.25 0 0120.25 9v.776" }) }),
+          "Open"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400 ml-1", children: "PDF \xB7 DXF \xB7 3D \xB7 Images" }),
+    data?.filename && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-gray-300 mx-1" }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700 truncate max-w-[200px]", title: data.filename, children: data.filename })
+    ] }),
+    /* @__PURE__ */ jsx("div", { ref: setToolbarSlotEl, className: "ml-auto flex items-center gap-1 text-xs" })
+  ] });
+  let body;
+  if (!data) {
+    body = /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center text-gray-500 text-sm gap-3 p-8 text-center", children: [
+      /* @__PURE__ */ jsx("svg", { className: "h-12 w-12 text-gray-300", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" }) }),
+      /* @__PURE__ */ jsxs("p", { className: "font-medium text-gray-700", children: [
+        "Drop a file here, or click ",
+        /* @__PURE__ */ jsx("button", { onClick: handlePick, className: "text-blue-600 hover:underline", children: "Open" }),
+        "."
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-500 max-w-sm", children: [
+        /* @__PURE__ */ jsx("p", { className: "font-semibold uppercase tracking-wide text-[10px] text-gray-400 mb-1", children: "Supported formats" }),
+        /* @__PURE__ */ jsxs("ul", { className: "space-y-0.5", children: [
+          /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-gray-700", children: ".pdf" }),
+            " \u2014 multi-page document viewer"
+          ] }),
+          /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-gray-700", children: ".dxf" }),
+            " \u2014 vector CAD drawings (optional ",
+            /* @__PURE__ */ jsx("span", { className: "font-mono", children: "dxf-viewer" }),
+            " peer dep)"
+          ] }),
+          /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-gray-700", children: ".stp .step .stl .obj .gltf .glb .3mf .iges" }),
+            " \u2014 3D models (optional ",
+            /* @__PURE__ */ jsx("span", { className: "font-mono", children: "online-3d-viewer" }),
+            " peer dep)"
+          ] }),
+          /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-gray-700", children: ".jpg .jpeg .png .gif .webp .svg .avif .bmp" }),
+            " \u2014 raster images"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-[11px] text-gray-400 italic", children: "DWG files need to be converted to PDF or DXF first (server-side)." })
+      ] })
+    ] });
+  } else if (data.converting || !data.url) {
+    body = /* @__PURE__ */ jsx(ConvertingPanel, { filename: data.filename, message: data.convertingMessage });
+  } else if (data.kind === "dxf") {
+    body = /* @__PURE__ */ jsx(DxfPanel, { url: data.url, filename: data.filename, onDownload: data.onDownload, onEmail: data.onEmail }, data.url);
+  } else if (data.kind === "3d") {
+    body = /* @__PURE__ */ jsx(StepPanel, { url: data.url, filename: data.filename, onDownload: data.onDownload, onEmail: data.onEmail }, data.url);
+  } else if (data.kind === "image") {
+    body = /* @__PURE__ */ jsx(ImagePanel, { url: data.url, filename: data.filename, onDownload: data.onDownload, onEmail: data.onEmail }, data.url);
+  } else {
+    body = /* @__PURE__ */ jsx(PdfViewer, { url: data.url, filename: data.filename, onDownload: data.onDownload, onEmail: data.onEmail }, data.url);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative flex flex-col h-full",
+      ref: rootRef,
+      onDragEnter: (e) => {
+        if (!e.dataTransfer?.types?.includes?.("Files")) return;
+        if (!isActiveWindow(e.currentTarget)) return;
+        e.preventDefault();
+        dragDepthRef.current++;
+        if (!isDragging) setIsDragging(true);
+      },
+      onDragOver: (e) => {
+        if (!e.dataTransfer?.types?.includes?.("Files")) return;
+        if (!isActiveWindow(e.currentTarget)) return;
+        e.preventDefault();
+      },
+      onDragLeave: () => {
+        if (dragDepthRef.current > 0) dragDepthRef.current--;
+        if (dragDepthRef.current === 0) setIsDragging(false);
+      },
+      onDrop: (e) => {
+        if (!isActiveWindow(e.currentTarget)) {
+          resetDrag();
+          return;
+        }
+        handleDrop(e);
+      },
+      children: [
+        /* @__PURE__ */ jsx(WindowTitle, { title: `${titleName} - Preview` }),
+        /* @__PURE__ */ jsx(AboutApp, { app: "preview" }),
+        Toolbar,
+        /* @__PURE__ */ jsx(ToolbarSlotContext.Provider, { value: toolbarSlotEl, children: /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: body }) }),
+        isDragging && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-blue-500/15 border-4 border-dashed border-blue-500 pointer-events-none flex items-center justify-center z-20", children: /* @__PURE__ */ jsx("div", { className: "px-4 py-2 rounded-md bg-blue-600 text-white text-sm font-medium shadow-lg", children: "Drop to open" }) })
+      ]
+    }
+  );
+}
+function ConvertingPanel({ filename, message }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full bg-gray-100 gap-4 px-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ jsxs("svg", { className: "h-12 w-12 text-blue-500 animate-spin", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: "0.2" }),
+        /* @__PURE__ */ jsx("path", { d: "M22 12a10 10 0 0 1-10 10", strokeLinecap: "round" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "text-base font-semibold tracking-wide text-gray-700 uppercase", children: message || "Converting file" }),
+      /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-400 truncate max-w-md", children: filename })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "w-72 h-1.5 rounded-full bg-gray-200 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "h-full w-1/3 bg-blue-500 rounded-full animate-pulse", style: { animation: "preview-bar 1.4s ease-in-out infinite" } }) }),
+    /* @__PURE__ */ jsx("style", { children: `@keyframes preview-bar { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }` })
+  ] });
+}
+var DEFAULT_DXF_FONTS = [
+  "https://cdn.jsdelivr.net/gh/vagran/dxf-viewer-example-src@master/src/assets/fonts/Roboto-LightItalic.ttf",
+  "https://cdn.jsdelivr.net/gh/vagran/dxf-viewer-example-src@master/src/assets/fonts/NotoSansDisplay-SemiCondensedLightItalic.ttf",
+  "https://cdn.jsdelivr.net/gh/vagran/dxf-viewer-example-src@master/src/assets/fonts/NanumGothic-Regular.ttf"
+];
+var DXF_EDIT_COMMANDS = {
+  l: "LINE",
+  line: "LINE",
+  pl: "PLINE",
+  pline: "PLINE",
+  ex: "EXTEND",
+  extend: "EXTEND",
+  tr: "TRIM",
+  trim: "TRIM",
+  e: "ERASE",
+  erase: "ERASE",
+  m: "MOVE",
+  move: "MOVE",
+  co: "COPY",
+  cp: "COPY",
+  copy: "COPY",
+  o: "OFFSET",
+  offset: "OFFSET",
+  f: "FILLET",
+  fillet: "FILLET",
+  cha: "CHAMFER",
+  chamfer: "CHAMFER",
+  x: "EXPLODE",
+  explode: "EXPLODE",
+  mi: "MIRROR",
+  mirror: "MIRROR",
+  ro: "ROTATE",
+  rotate: "ROTATE",
+  sc: "SCALE",
+  scale: "SCALE",
+  s: "STRETCH",
+  stretch: "STRETCH",
+  ar: "ARRAY",
+  array: "ARRAY",
+  rec: "RECTANG",
+  rectang: "RECTANG",
+  rectangle: "RECTANG",
+  c: "CIRCLE",
+  circle: "CIRCLE",
+  a: "ARC",
+  arc: "ARC",
+  el: "ELLIPSE",
+  ellipse: "ELLIPSE",
+  t: "MTEXT",
+  mt: "MTEXT",
+  mtext: "MTEXT",
+  text: "TEXT",
+  b: "BLOCK",
+  block: "BLOCK",
+  i: "INSERT",
+  insert: "INSERT",
+  ha: "HATCH",
+  hatch: "HATCH"
+};
+var DXF_CMD_HELP = "Commands: DI distance \xB7 DIM/DLI linear dim \xB7 H / V force axis \xB7 <number> lock \u0394 \xB7 U undo pick \xB7 Z fit \xB7 LA layers \xB7 Esc exit";
+function DxfPanel({ url, filename, onDownload, onEmail }) {
+  const containerRef = useRef(null);
+  const viewerRef = useRef(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [layers, setLayers] = useState([]);
+  const [showLayers, setShowLayers] = useState(false);
+  const [showHint, setShowHint] = useState(true);
+  const [measureEnabled, setMeasureEnabled] = useState(false);
+  const [measureMode, setMeasureMode] = useState("auto");
+  const [measureDistance, setMeasureDistance] = useState(null);
+  const [measureResolved, setMeasureResolved] = useState(null);
+  const [measureFixedDist, setMeasureFixedDist] = useState(null);
+  const [measureFixedInput, setMeasureFixedInput] = useState("");
+  const measureModeRef = useRef(measureMode);
+  const measureFixedDistRef = useRef(measureFixedDist);
+  useEffect(() => {
+    measureModeRef.current = measureMode;
+  }, [measureMode]);
+  useEffect(() => {
+    measureFixedDistRef.current = measureFixedDist;
+  }, [measureFixedDist]);
+  const measureRedrawRef = useRef(null);
+  const measureResetRef = useRef(null);
+  const measureUndoRef = useRef(null);
+  const [cmdValue, setCmdValue] = useState("");
+  const [cmdEcho, setCmdEcho] = useState(null);
+  const lastCmdRef = useRef("");
+  const cmdInputRef = useRef(null);
+  const rootRef = useRef(null);
+  const measureRef = useRef(null);
+  useEffect(() => {
+    let cancelled = false;
+    let viewer = null;
+    setLoading(true);
+    setError(null);
+    setLayers([]);
+    (async () => {
+      let DxfViewer;
+      try {
+        const mod = await import('dxf-viewer');
+        DxfViewer = mod.DxfViewer;
+      } catch (e) {
+        if (!cancelled) {
+          setError("dxf-viewer is not installed in this app.");
+          setLoading(false);
+        }
+        return;
+      }
+      if (cancelled || !containerRef.current) return;
+      try {
+        await new Promise((resolve) => {
+          const tryStart = () => {
+            const r = containerRef.current?.getBoundingClientRect();
+            if (r && r.width > 4 && r.height > 4) resolve();
+            else requestAnimationFrame(tryStart);
+          };
+          tryStart();
+        });
+        if (cancelled || !containerRef.current) return;
+        const viewerOpts = { autoResize: true };
+        const defaultClear = DxfViewer.DefaultOptions?.clearColor;
+        if (typeof defaultClear?.clone === "function") {
+          viewerOpts.clearColor = defaultClear.clone().setHex(16777215);
+        }
+        viewer = new DxfViewer(containerRef.current, viewerOpts);
+        viewerRef.current = viewer;
+        const fontUrls = typeof window !== "undefined" && window.__REACT_OS_SHELL_DXF_FONTS__ || DEFAULT_DXF_FONTS;
+        await viewer.Load({ url, fonts: fontUrls, workerFactory: null });
+        if (cancelled) return;
+        try {
+          const list = viewer.GetLayers?.() ?? [];
+          if (Array.isArray(list)) {
+            setLayers(list.map((l) => ({
+              name: l.name,
+              displayName: l.displayName ?? l.name,
+              color: typeof l.color === "number" ? l.color : void 0,
+              visible: true
+            })));
+          }
+        } catch {
+        }
+        const refit = () => {
+          try {
+            const rect = containerRef.current?.getBoundingClientRect();
+            if (rect && rect.width > 0 && rect.height > 0) {
+              viewer.SetSize?.(Math.round(rect.width), Math.round(rect.height));
+            }
+            const bounds = viewer.GetBounds?.();
+            const origin = viewer.GetOrigin?.();
+            if (bounds && origin) {
+              viewer.FitView(
+                bounds.minX - origin.x,
+                bounds.maxX - origin.x,
+                bounds.minY - origin.y,
+                bounds.maxY - origin.y
+              );
+            }
+            viewer.Render?.();
+          } catch (err) {
+            console.warn("[Preview] DXF refit failed", err);
+          }
+        };
+        refit();
+        requestAnimationFrame(refit);
+        setLoading(false);
+      } catch (e) {
+        if (!cancelled) {
+          setError(e?.message || "Failed to render DXF.");
+          setLoading(false);
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+      try {
+        viewer?.Destroy?.();
+      } catch {
+      }
+      viewerRef.current = null;
+    };
+  }, [url]);
+  useEffect(() => {
+    if (!showHint || loading) return;
+    const t = setTimeout(() => setShowHint(false), 5e3);
+    return () => clearTimeout(t);
+  }, [showHint, loading]);
+  const layersKey = layers.map((l) => l.visible ? "1" : "0").join("");
+  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);
+      setMeasureResolved(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;");
+    const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+    const marker = document.createElementNS("http://www.w3.org/2000/svg", "marker");
+    marker.setAttribute("id", "dxf-measure-arrow");
+    marker.setAttribute("viewBox", "0 0 10 10");
+    marker.setAttribute("refX", "9");
+    marker.setAttribute("refY", "5");
+    marker.setAttribute("markerWidth", "6");
+    marker.setAttribute("markerHeight", "6");
+    marker.setAttribute("orient", "auto-start-reverse");
+    const arrowPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    arrowPath.setAttribute("d", "M 0 0 L 10 5 L 0 10 z");
+    arrowPath.setAttribute("fill", "#ff8800");
+    marker.appendChild(arrowPath);
+    defs.appendChild(marker);
+    svg.appendChild(defs);
+    overlay.appendChild(svg);
+    const mkRefLine = () => {
+      const el = document.createElementNS("http://www.w3.org/2000/svg", "line");
+      el.setAttribute("stroke", "#ff8800");
+      el.setAttribute("stroke-width", "1");
+      el.setAttribute("stroke-dasharray", "6,4");
+      el.setAttribute("opacity", "0.55");
+      el.style.display = "none";
+      svg.appendChild(el);
+      return el;
+    };
+    const refLineEl = mkRefLine();
+    const refLineVEl = mkRefLine();
+    const extLineA = document.createElementNS("http://www.w3.org/2000/svg", "line");
+    extLineA.setAttribute("stroke", "#ff8800");
+    extLineA.setAttribute("stroke-width", "1");
+    extLineA.setAttribute("opacity", "0.85");
+    extLineA.style.display = "none";
+    svg.appendChild(extLineA);
+    const extLineB = document.createElementNS("http://www.w3.org/2000/svg", "line");
+    extLineB.setAttribute("stroke", "#ff8800");
+    extLineB.setAttribute("stroke-width", "1");
+    extLineB.setAttribute("opacity", "0.85");
+    extLineB.style.display = "none";
+    svg.appendChild(extLineB);
+    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 fixedLineEl = document.createElementNS("http://www.w3.org/2000/svg", "line");
+    fixedLineEl.setAttribute("stroke", "#ff8800");
+    fixedLineEl.setAttribute("stroke-width", "1.5");
+    fixedLineEl.setAttribute("stroke-linecap", "round");
+    fixedLineEl.style.display = "none";
+    svg.appendChild(fixedLineEl);
+    const snapEl = document.createElement("div");
+    snapEl.style.cssText = `position:absolute;transform:translate(-50%,-50%);pointer-events:none;display:none;`;
+    const SVGNS = "http://www.w3.org/2000/svg";
+    const snapSvg = document.createElementNS(SVGNS, "svg");
+    snapSvg.setAttribute("width", "22");
+    snapSvg.setAttribute("height", "22");
+    snapSvg.setAttribute("viewBox", "0 0 22 22");
+    snapSvg.setAttribute("style", "overflow:visible;display:block");
+    snapEl.appendChild(snapSvg);
+    const mkSnapGlyph = (build) => {
+      const g = document.createElementNS(SVGNS, "g");
+      build(g);
+      g.style.display = "none";
+      snapSvg.appendChild(g);
+      return g;
+    };
+    const snapGlyphEndpoint = mkSnapGlyph((g) => {
+      const r = document.createElementNS(SVGNS, "rect");
+      r.setAttribute("x", "4");
+      r.setAttribute("y", "4");
+      r.setAttribute("width", "14");
+      r.setAttribute("height", "14");
+      r.setAttribute("fill", "rgba(255,255,255,0.9)");
+      r.setAttribute("stroke", "#ff8800");
+      r.setAttribute("stroke-width", "1.8");
+      g.appendChild(r);
+    });
+    const snapGlyphIntersection = mkSnapGlyph((g) => {
+      const mkLn = (x1, y1, x2, y2) => {
+        const ln = document.createElementNS(SVGNS, "line");
+        ln.setAttribute("x1", String(x1));
+        ln.setAttribute("y1", String(y1));
+        ln.setAttribute("x2", String(x2));
+        ln.setAttribute("y2", String(y2));
+        ln.setAttribute("stroke", "#ff8800");
+        ln.setAttribute("stroke-width", "2.2");
+        ln.setAttribute("stroke-linecap", "round");
+        return ln;
+      };
+      g.appendChild(mkLn(4, 4, 18, 18));
+      g.appendChild(mkLn(18, 4, 4, 18));
+    });
+    const snapGlyphLine = mkSnapGlyph((g) => {
+      const poly = document.createElementNS(SVGNS, "polygon");
+      poly.setAttribute("points", "4,4 18,4 4,18 18,18");
+      poly.setAttribute("fill", "rgba(255,255,255,0.9)");
+      poly.setAttribute("stroke", "#ff8800");
+      poly.setAttribute("stroke-width", "1.8");
+      poly.setAttribute("stroke-linejoin", "round");
+      g.appendChild(poly);
+    });
+    const snapGlyphMidpoint = mkSnapGlyph((g) => {
+      const poly = document.createElementNS(SVGNS, "polygon");
+      poly.setAttribute("points", "11,3 19,18 3,18");
+      poly.setAttribute("fill", "rgba(255,255,255,0.9)");
+      poly.setAttribute("stroke", "#ff8800");
+      poly.setAttribute("stroke-width", "1.8");
+      poly.setAttribute("stroke-linejoin", "round");
+      g.appendChild(poly);
+    });
+    const snapGlyphNode = mkSnapGlyph((g) => {
+      const c = document.createElementNS(SVGNS, "circle");
+      c.setAttribute("cx", "11");
+      c.setAttribute("cy", "11");
+      c.setAttribute("r", "7");
+      c.setAttribute("fill", "rgba(255,255,255,0.9)");
+      c.setAttribute("stroke", "#ff8800");
+      c.setAttribute("stroke-width", "1.8");
+      g.appendChild(c);
+      const mkLn = (x1, y1, x2, y2) => {
+        const ln = document.createElementNS(SVGNS, "line");
+        ln.setAttribute("x1", String(x1));
+        ln.setAttribute("y1", String(y1));
+        ln.setAttribute("x2", String(x2));
+        ln.setAttribute("y2", String(y2));
+        ln.setAttribute("stroke", "#ff8800");
+        ln.setAttribute("stroke-width", "1.6");
+        ln.setAttribute("stroke-linecap", "round");
+        return ln;
+      };
+      g.appendChild(mkLn(6.5, 6.5, 15.5, 15.5));
+      g.appendChild(mkLn(15.5, 6.5, 6.5, 15.5));
+    });
+    const setSnapGlyph = (type) => {
+      snapGlyphEndpoint.style.display = type === "endpoint" ? "" : "none";
+      snapGlyphIntersection.style.display = type === "intersection" ? "" : "none";
+      snapGlyphLine.style.display = type === "line" ? "" : "none";
+      snapGlyphMidpoint.style.display = type === "midpoint" ? "" : "none";
+      snapGlyphNode.style.display = type === "node" ? "" : "none";
+    };
+    overlay.appendChild(snapEl);
+    measureRef.current = {
+      picks: [],
+      rawSecondClick: null,
+      overlay,
+      svg,
+      line: lineEl,
+      fixedLine: fixedLineEl,
+      fixedLabel: null,
+      refLine: refLineEl,
+      refLineV: refLineVEl,
+      extLineA,
+      extLineB,
+      markers: [],
+      label: null,
+      snap: snapEl,
+      segs: null,
+      nodes: null
+    };
+    const Vector3Ctor = camera?.position?.constructor ?? scene?.position?.constructor ?? null;
+    let ready = false;
+    const pxFromScene = (sx, sy) => {
+      if (!Vector3Ctor) return { x: 0, y: 0 };
+      const v3 = new Vector3Ctor(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 };
+    };
+    const MAX_SNAP_SEGS = 4e5;
+    (() => {
+      try {
+        const st = measureRef.current;
+        if (!st) return;
+        const segXY = [];
+        const nodeXY = [];
+        let truncated = false;
+        const instanceXforms = (g) => {
+          const t0 = g?.attributes?.instanceTransform0;
+          const t1 = g?.attributes?.instanceTransform1;
+          if (t0 && t1) {
+            const out = [];
+            const n = Math.min(t0.count, t1.count);
+            for (let k = 0; k < n; k++) {
+              out.push([t0.getX(k), t0.getY(k), t0.getZ(k), t1.getX(k), t1.getY(k), t1.getZ(k)]);
+            }
+            return out;
+          }
+          const tp = g?.attributes?.instanceTransform;
+          if (tp) {
+            const out = [];
+            for (let k = 0; k < tp.count; k++) out.push([1, 0, tp.getX(k), 0, 1, tp.getY(k)]);
+            return out;
+          }
+          return [[1, 0, 0, 0, 1, 0]];
+        };
+        const visit = (obj) => {
+          const isSeg = !!obj?.isLineSegments;
+          const isPts = !!obj?.isPoints;
+          if (!isSeg && !isPts) return;
+          const g = obj.geometry;
+          const pos = g?.attributes?.position;
+          if (!pos) return;
+          const xfs = instanceXforms(g);
+          if (isSeg) {
+            const idx = g.index;
+            const pairCount = Math.floor((idx ? idx.count : pos.count) / 2);
+            for (let p = 0; p < pairCount; p++) {
+              const ia = idx ? idx.getX(2 * p) : 2 * p;
+              const ib = idx ? idx.getX(2 * p + 1) : 2 * p + 1;
+              const ax = pos.getX(ia), ay = pos.getY(ia);
+              const bx = pos.getX(ib), by = pos.getY(ib);
+              if (!Number.isFinite(ax + ay + bx + by)) continue;
+              for (const m of xfs) {
+                if (segXY.length >= MAX_SNAP_SEGS * 4) {
+                  truncated = true;
+                  return;
+                }
+                const tax = m[0] * ax + m[1] * ay + m[2], tay = m[3] * ax + m[4] * ay + m[5];
+                const tbx = m[0] * bx + m[1] * by + m[2], tby = m[3] * bx + m[4] * by + m[5];
+                if (tax === tbx && tay === tby) continue;
+                segXY.push(tax, tay, tbx, tby);
+              }
+            }
+          } else {
+            for (let i = 0; i < pos.count; i++) {
+              const x = pos.getX(i), y = pos.getY(i);
+              if (!Number.isFinite(x + y)) continue;
+              for (const m of xfs) {
+                nodeXY.push(m[0] * x + m[1] * y + m[2], m[3] * x + m[4] * y + m[5]);
+              }
+            }
+          }
+        };
+        if (typeof scene.traverseVisible === "function") scene.traverseVisible(visit);
+        else scene.traverse(visit);
+        st.segs = new Float64Array(segXY);
+        st.nodes = new Float64Array(nodeXY);
+        if (truncated) {
+          console.warn(`[Preview] DXF snap cache truncated at ${MAX_SNAP_SEGS} segments \u2014 snapping may miss some geometry.`);
+        }
+        ready = true;
+      } catch {
+      }
+    })();
+    const SNAP_PX = 18;
+    const segSegIntersectPx = (apx, apy, bpx, bpy, cpx, cpy, dpx, dpy) => {
+      const d = (bpx - apx) * (dpy - cpy) - (bpy - apy) * (dpx - cpx);
+      if (Math.abs(d) < 1e-9) return null;
+      const t = ((cpx - apx) * (dpy - cpy) - (cpy - apy) * (dpx - cpx)) / d;
+      const u = ((cpx - apx) * (bpy - apy) - (cpy - apy) * (bpx - apx)) / d;
+      const eps = 1e-4;
+      if (t < -eps || t > 1 + eps || u < -eps || u > 1 + eps) return null;
+      return { px: apx + t * (bpx - apx), py: apy + t * (bpy - apy), t };
+    };
+    const findSnap = (cx, cy) => {
+      const s = measureRef.current;
+      if (!s || !ready || !s.segs) return null;
+      const o = pxFromScene(0, 0);
+      const ex = pxFromScene(1, 0);
+      const ey = pxFromScene(0, 1);
+      const mxx = ex.x - o.x, mxy = ex.y - o.y;
+      const myx = ey.x - o.x, myy = ey.y - o.y;
+      const det = mxx * myy - myx * mxy;
+      if (!det) return null;
+      const csx = ((cx - o.x) * myy - (cy - o.y) * myx) / det;
+      const csy = ((cy - o.y) * mxx - (cx - o.x) * mxy) / det;
+      const rx = SNAP_PX / (Math.hypot(mxx, mxy) || 1);
+      const ry = SNAP_PX / (Math.hypot(myx, myy) || 1);
+      const minX = csx - rx, maxX = csx + rx, minY = csy - ry, maxY = csy + ry;
+      const T2 = SNAP_PX * SNAP_PX;
+      let bestPt = null, dPt = T2;
+      let bestMid = null, dMid = T2;
+      let bestLine = null, dLine = T2;
+      let bestX = null, dX = T2;
+      const cand = [];
+      const segs = s.segs;
+      for (let i = 0; i < segs.length; i += 4) {
+        const ax = segs[i], ay = segs[i + 1], bx = segs[i + 2], by = segs[i + 3];
+        if (ax < minX && bx < minX || ax > maxX && bx > maxX || ay < minY && by < minY || ay > maxY && by > maxY) continue;
+        const apx = o.x + mxx * ax + myx * ay, apy = o.y + mxy * ax + myy * ay;
+        const bpx = o.x + mxx * bx + myx * by, bpy = o.y + mxy * bx + myy * by;
+        let near = false;
+        let dx = cx - apx, dy = cy - apy;
+        let d2 = dx * dx + dy * dy;
+        if (d2 < T2) {
+          near = true;
+          if (d2 < dPt) {
+            dPt = d2;
+            bestPt = { sx: ax, sy: ay, type: "endpoint" };
+          }
+        }
+        dx = cx - bpx;
+        dy = cy - bpy;
+        d2 = dx * dx + dy * dy;
+        if (d2 < T2) {
+          near = true;
+          if (d2 < dPt) {
+            dPt = d2;
+            bestPt = { sx: bx, sy: by, type: "endpoint" };
+          }
+        }
+        dx = cx - (apx + bpx) / 2;
+        dy = cy - (apy + bpy) / 2;
+        d2 = dx * dx + dy * dy;
+        if (d2 < T2) {
+          near = true;
+          if (d2 < dMid) {
+            dMid = d2;
+            bestMid = { sx: (ax + bx) / 2, sy: (ay + by) / 2, type: "midpoint" };
+          }
+        }
+        const sdx = bpx - apx, sdy = bpy - apy;
+        const len2 = sdx * sdx + sdy * sdy;
+        if (len2 > 0) {
+          const t = ((cx - apx) * sdx + (cy - apy) * sdy) / len2;
+          if (t > 0 && t < 1) {
+            dx = cx - (apx + t * sdx);
+            dy = cy - (apy + t * sdy);
+            d2 = dx * dx + dy * dy;
+            if (d2 < T2) {
+              near = true;
+              if (d2 < dLine) {
+                dLine = d2;
+                bestLine = { sx: ax + t * (bx - ax), sy: ay + t * (by - ay), type: "line" };
+              }
+            }
+          }
+        }
+        if (near) cand.push({ ax, ay, bx, by, apx, apy, bpx, bpy });
+      }
+      const nodes = s.nodes;
+      if (nodes) {
+        for (let i = 0; i < nodes.length; i += 2) {
+          const x = nodes[i], y = nodes[i + 1];
+          if (x < minX || x > maxX || y < minY || y > maxY) continue;
+          const dx = cx - (o.x + mxx * x + myx * y);
+          const dy = cy - (o.y + mxy * x + myy * y);
+          const d2 = dx * dx + dy * dy;
+          if (d2 < dPt) {
+            dPt = d2;
+            bestPt = { sx: x, sy: y, type: "node" };
+          }
+        }
+      }
+      for (let i = 0; i < cand.length; i++) {
+        const A = cand[i];
+        for (let j = i + 1; j < cand.length; j++) {
+          const B = cand[j];
+          const ix = segSegIntersectPx(A.apx, A.apy, A.bpx, A.bpy, B.apx, B.apy, B.bpx, B.bpy);
+          if (!ix) continue;
+          const dx = cx - ix.px, dy = cy - ix.py;
+          const d2 = dx * dx + dy * dy;
+          if (d2 >= T2 || d2 >= dX) continue;
+          dX = d2;
+          bestX = { sx: A.ax + ix.t * (A.bx - A.ax), sy: A.ay + ix.t * (A.by - A.ay), type: "intersection" };
+        }
+      }
+      const top = bestX && bestPt ? dX < dPt - 1 ? bestX : bestPt : bestX ?? bestPt;
+      return top ?? bestMid ?? bestLine;
+    };
+    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;left:-9999px;top:-9999px;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 reconcileLockedPick = () => {
+      const s = measureRef.current;
+      if (!s || !s.rawSecondClick || s.picks.length < 2) return;
+      const a = s.picks[0];
+      const raw = s.rawSecondClick;
+      const fixed = measureFixedDistRef.current;
+      const mode = measureModeRef.current;
+      if (fixed !== null && Number.isFinite(fixed) && (mode === "horizontal" || mode === "vertical")) {
+        if (mode === "horizontal") {
+          const sign = raw.x >= a.x ? 1 : -1;
+          s.picks[1] = { x: a.x + sign * Math.abs(fixed), y: raw.y };
+        } else {
+          const sign = raw.y >= a.y ? 1 : -1;
+          s.picks[1] = { x: raw.x, y: a.y + sign * Math.abs(fixed) };
+        }
+      } else {
+        s.picks[1] = { x: raw.x, y: raw.y };
+      }
+    };
+    const resolveMode = (a, b) => {
+      const mode = measureModeRef.current;
+      if (mode !== "auto") return mode;
+      if (!a || !b) return "horizontal";
+      return Math.abs(b.x - a.x) >= Math.abs(b.y - a.y) ? "horizontal" : "vertical";
+    };
+    const computeMainDimEnds = () => {
+      const s = measureRef.current;
+      const a = s.picks[0];
+      const b = s.picks[1];
+      const mode = resolveMode(a, b);
+      const rawMode = measureModeRef.current;
+      const fixed = measureFixedDistRef.current;
+      if (fixed !== null && Number.isFinite(fixed) && rawMode === "horizontal") {
+        return { from: { x: b.x, y: a.y }, to: { x: b.x, y: b.y } };
+      }
+      if (fixed !== null && Number.isFinite(fixed) && rawMode === "vertical") {
+        return { from: { x: a.x, y: b.y }, to: { x: b.x, y: b.y } };
+      }
+      if (mode === "horizontal") return { from: a, to: { x: b.x, y: a.y } };
+      if (mode === "vertical") return { from: a, to: { x: a.x, y: b.y } };
+      return { from: a, to: b };
+    };
+    const updateOverlay = () => {
+      const s = measureRef.current;
+      if (!s) return;
+      reconcileLockedPick();
+      const rawMode = measureModeRef.current;
+      const fixed = measureFixedDistRef.current;
+      const fixedActive = fixed !== null && Number.isFinite(fixed) && (rawMode === "horizontal" || rawMode === "vertical");
+      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);
+      const drawRefLine = (el, dir, visible) => {
+        if (!el) return;
+        if (!visible || s.picks.length < 1) {
+          el.style.display = "none";
+          return;
+        }
+        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 + dir.dx, a.y + dir.dy);
+        const pxLen = Math.hypot(probe.x - ap.x, probe.y - ap.y) || 1;
+        const sceneStep = screenSpan / pxLen;
+        const p0 = pxFromScene(a.x - dir.dx * sceneStep, a.y - dir.dy * sceneStep);
+        const p1 = pxFromScene(a.x + dir.dx * sceneStep, a.y + dir.dy * sceneStep);
+        el.setAttribute("x1", String(p0.x));
+        el.setAttribute("y1", String(p0.y));
+        el.setAttribute("x2", String(p1.x));
+        el.setAttribute("y2", String(p1.y));
+        el.style.display = "";
+      };
+      let showH = rawMode === "horizontal";
+      let showV = rawMode === "vertical";
+      if (rawMode === "auto") {
+        if (s.picks.length >= 2) {
+          const r = resolveMode(s.picks[0], s.picks[1]);
+          showH = r === "horizontal";
+          showV = r === "vertical";
+        } else {
+          showH = true;
+          showV = true;
+        }
+      }
+      drawRefLine(s.refLine, { dx: 1, dy: 0 }, showH);
+      drawRefLine(s.refLineV, { dx: 0, dy: 1 }, showV);
+      if (s.picks.length === 2) {
+        const a = s.picks[0], b = s.picks[1];
+        const mode = resolveMode(a, b);
+        const ends = computeMainDimEnds();
+        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.setAttribute("marker-start", "url(#dxf-measure-arrow)");
+        s.line.setAttribute("marker-end", "url(#dxf-measure-arrow)");
+        const mainLen = Math.hypot(tp.x - fp.x, tp.y - fp.y);
+        s.line.style.display = mainLen > 0.5 ? "" : "none";
+        if (fixedActive && s.fixedLine) {
+          const r = mode === "horizontal" ? { x: b.x, y: a.y } : { x: a.x, y: b.y };
+          const ap = pxFromScene(a.x, a.y);
+          const rp = pxFromScene(r.x, r.y);
+          s.fixedLine.setAttribute("x1", String(ap.x));
+          s.fixedLine.setAttribute("y1", String(ap.y));
+          s.fixedLine.setAttribute("x2", String(rp.x));
+          s.fixedLine.setAttribute("y2", String(rp.y));
+          s.fixedLine.setAttribute("marker-start", "url(#dxf-measure-arrow)");
+          s.fixedLine.setAttribute("marker-end", "url(#dxf-measure-arrow)");
+          s.fixedLine.style.display = "";
+          const fLabel = ensureFixedLabel();
+          fLabel.textContent = formatMeasureDistance(Math.abs(fixed));
+          const fcx = (ap.x + rp.x) / 2;
+          const fcy = (ap.y + rp.y) / 2;
+          fLabel.style.left = `${fcx}px`;
+          fLabel.style.top = `${fcy}px`;
+          const w = canvas.clientWidth, h = canvas.clientHeight;
+          fLabel.style.display = fcx < 0 || fcy < 0 || fcx > w || fcy > h ? "none" : "";
+        } else {
+          if (s.fixedLine) s.fixedLine.style.display = "none";
+          if (s.fixedLabel) s.fixedLabel.style.display = "none";
+        }
+        const extA = s.extLineA;
+        const extB = s.extLineB;
+        if (!fixedActive && mode === "horizontal" && Math.abs(b.y - a.y) > 1e-9) {
+          const p = pxFromScene(b.x, a.y);
+          const q = pxFromScene(b.x, b.y);
+          extB.setAttribute("x1", String(p.x));
+          extB.setAttribute("y1", String(p.y));
+          extB.setAttribute("x2", String(q.x));
+          extB.setAttribute("y2", String(q.y));
+          extB.style.display = "";
+          extA.style.display = "none";
+        } else if (!fixedActive && mode === "vertical" && Math.abs(b.x - a.x) > 1e-9) {
+          const p = pxFromScene(a.x, b.y);
+          const q = pxFromScene(b.x, b.y);
+          extB.setAttribute("x1", String(p.x));
+          extB.setAttribute("y1", String(p.y));
+          extB.setAttribute("x2", String(q.x));
+          extB.setAttribute("y2", String(q.y));
+          extB.style.display = "";
+          extA.style.display = "none";
+        } else {
+          extA.style.display = "none";
+          extB.style.display = "none";
+        }
+        if (s.label) {
+          const cx = (fp.x + tp.x) / 2;
+          const cy = (fp.y + tp.y) / 2;
+          s.label.style.left = `${cx}px`;
+          s.label.style.top = `${cy}px`;
+          const w = canvas.clientWidth, h = canvas.clientHeight;
+          s.label.style.display = cx < 0 || cy < 0 || cx > w || cy > h ? "none" : "";
+          if (mainLen <= 0.5) s.label.style.display = "none";
+        }
+      } else {
+        s.line.style.display = "none";
+        if (s.fixedLine) s.fixedLine.style.display = "none";
+        if (s.fixedLabel) s.fixedLabel.style.display = "none";
+        if (s.extLineA) s.extLineA.style.display = "none";
+        if (s.extLineB) s.extLineB.style.display = "none";
+      }
+    };
+    const ensureFixedLabel = () => {
+      const s = measureRef.current;
+      if (s.fixedLabel) return s.fixedLabel;
+      const el = document.createElement("div");
+      el.style.cssText = `position:absolute;left:-9999px;top:-9999px;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.75);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.fixedLabel = el;
+      return el;
+    };
+    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 = "";
+        setSnapGlyph(lastSnap.type);
+      } 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 picked = lastSnap ? { x: lastSnap.sx, y: lastSnap.sy } : { x: raw.x, y: raw.y };
+      doPick(picked);
+    };
+    const recomputeLabel = () => {
+      const s = measureRef.current;
+      if (!s || s.picks.length !== 2) return;
+      reconcileLockedPick();
+      const a = s.picks[0], b = s.picks[1];
+      const rawMode = measureModeRef.current;
+      const mode = resolveMode(a, b);
+      const fixed = measureFixedDistRef.current;
+      const fixedActive = fixed !== null && Number.isFinite(fixed) && (rawMode === "horizontal" || rawMode === "vertical");
+      let dist;
+      let suffix = "";
+      let echo;
+      let shown = mode;
+      const adx = Math.abs(b.x - a.x), ady = Math.abs(b.y - a.y);
+      if (fixedActive && rawMode === "horizontal") {
+        dist = ady;
+        suffix = " \u2195";
+        shown = "vertical";
+        echo = `\u0394Y = ${formatMeasureDistance(ady)} with \u0394X locked to ${formatMeasureDistance(Math.abs(fixed))}`;
+      } else if (fixedActive && rawMode === "vertical") {
+        dist = adx;
+        suffix = " \u2194";
+        shown = "horizontal";
+        echo = `\u0394X = ${formatMeasureDistance(adx)} with \u0394Y locked to ${formatMeasureDistance(Math.abs(fixed))}`;
+      } else if (mode === "horizontal") {
+        dist = adx;
+        suffix = " \u2194";
+        echo = `Linear dimension = ${formatMeasureDistance(adx)} (\u0394X)`;
+      } else if (mode === "vertical") {
+        dist = ady;
+        suffix = " \u2195";
+        echo = `Linear dimension = ${formatMeasureDistance(ady)} (\u0394Y)`;
+      } else {
+        dist = Math.hypot(b.x - a.x, b.y - a.y);
+        echo = `Distance = ${formatMeasureDistance(dist)}   \u0394X = ${formatMeasureDistance(adx)}   \u0394Y = ${formatMeasureDistance(ady)}`;
+      }
+      if (!Number.isFinite(dist)) {
+        setMeasureDistance(null);
+        setMeasureResolved(null);
+        if (s.label) s.label.style.opacity = "0";
+        return;
+      }
+      setMeasureDistance(dist);
+      setMeasureResolved(shown);
+      setCmdEcho(echo);
+      const label = ensureLabel();
+      label.style.opacity = "1";
+      label.textContent = `${formatMeasureDistance(dist)}${suffix}`;
+    };
+    measureRedrawRef.current = () => {
+      recomputeLabel();
+      updateOverlay();
+    };
+    const hideDimVisuals = (s) => {
+      s.line.style.display = "none";
+      if (s.fixedLine) s.fixedLine.style.display = "none";
+      if (s.fixedLabel) s.fixedLabel.style.display = "none";
+      if (s.extLineA) s.extLineA.style.display = "none";
+      if (s.extLineB) s.extLineB.style.display = "none";
+      if (s.label) s.label.style.opacity = "0";
+      setMeasureDistance(null);
+      setMeasureResolved(null);
+    };
+    const resetPicks = () => {
+      const s = measureRef.current;
+      if (!s) return;
+      for (const m of s.markers) m.parentElement?.removeChild(m);
+      s.markers = [];
+      s.picks = [];
+      s.rawSecondClick = null;
+      if (s.refLine) s.refLine.style.display = "none";
+      if (s.refLineV) s.refLineV.style.display = "none";
+      hideDimVisuals(s);
+    };
+    measureResetRef.current = resetPicks;
+    measureUndoRef.current = () => {
+      const s = measureRef.current;
+      if (!s || s.picks.length === 0) return;
+      s.picks.pop();
+      const m = s.markers.pop();
+      m?.parentElement?.removeChild(m);
+      s.rawSecondClick = null;
+      hideDimVisuals(s);
+      updateOverlay();
+    };
+    const doPick = (p) => {
+      const s = measureRef.current;
+      if (!s) return;
+      if (s.picks.length === 2) resetPicks();
+      if (s.picks.length === 0) {
+        s.picks.push({ x: p.x, y: p.y });
+        s.markers.push(makeMarker());
+      } else {
+        s.rawSecondClick = { x: p.x, y: p.y };
+        s.picks.push({ x: p.x, y: p.y });
+        s.markers.push(makeMarker());
+        recomputeLabel();
+      }
+      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);
+      measureRedrawRef.current = null;
+      measureResetRef.current = null;
+      measureUndoRef.current = null;
+      teardown();
+      setMeasureDistance(null);
+      setMeasureResolved(null);
+    };
+  }, [measureEnabled, loading, error, layersKey]);
+  useEffect(() => {
+    measureRedrawRef.current?.();
+  }, [measureMode, measureFixedDist]);
+  const toggleLayer = (name) => {
+    setLayers((prev) => prev.map((l) => {
+      if (l.name !== name) return l;
+      const next = !l.visible;
+      try {
+        viewerRef.current?.ShowLayer?.(name, next);
+      } catch {
+      }
+      return { ...l, visible: next };
+    }));
+  };
+  const setAllLayers = (visible) => {
+    setLayers((prev) => prev.map((l) => {
+      if (l.visible === visible) return l;
+      try {
+        viewerRef.current?.ShowLayer?.(l.name, visible);
+      } catch {
+      }
+      return { ...l, visible };
+    }));
+  };
+  const handleDefaultDownload = () => {
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+  };
+  const handleResetView = () => {
+    try {
+      const v = viewerRef.current;
+      const bounds = v?.GetBounds?.();
+      const origin = v?.GetOrigin?.();
+      if (bounds && origin) {
+        v.FitView(
+          bounds.minX - origin.x,
+          bounds.maxX - origin.x,
+          bounds.minY - origin.y,
+          bounds.maxY - origin.y
+        );
+      } else {
+        v?.FitView?.();
+      }
+      v?.Render?.();
+    } catch {
+    }
+  };
+  const runCommand = (raw) => {
+    const exec = raw.trim() || lastCmdRef.current;
+    setCmdValue("");
+    if (!exec) return;
+    const cmd = exec.toLowerCase().split(/\s+/)[0];
+    const remember = () => {
+      lastCmdRef.current = exec;
+    };
+    const startMeasure = (mode, echo) => {
+      setMeasureEnabled(true);
+      setMeasureMode(mode);
+      measureResetRef.current?.();
+      setCmdEcho(echo);
+      remember();
+    };
+    if (/^-?(\d+\.?\d*|\.\d+)$/.test(cmd)) {
+      if (measureEnabled && (measureMode === "horizontal" || measureMode === "vertical")) {
+        const n = parseFloat(cmd);
+        if (n) {
+          setMeasureFixedInput(cmd);
+          setMeasureFixedDist(n);
+          setCmdEcho(`\u0394${measureMode === "horizontal" ? "X" : "Y"} locked to ${formatMeasureDistance(Math.abs(n))} \u2014 the label shows the perpendicular distance`);
+        } else {
+          setMeasureFixedInput("");
+          setMeasureFixedDist(null);
+          setCmdEcho("Fixed distance cleared.");
+        }
+      } else {
+        setCmdEcho("Fixed distances apply in H or V mode \u2014 type H or V first.");
+      }
+      return;
+    }
+    switch (cmd) {
+      case "di":
+      case "dist":
+      case "mea":
+      case "measuregeom":
+        startMeasure("point", "DIST \u2014 click two points; straight-line distance (Esc to exit)");
+        break;
+      case "dim":
+      case "dli":
+      case "dimlin":
+      case "dimlinear":
+        startMeasure("auto", "DIMLINEAR \u2014 click two points; measures \u0394X or \u0394Y, whichever is larger (H / V to force)");
+        break;
+      // H / V / AUTO switch the axis without dropping existing picks —
+      // same as clicking the pill.
+      case "h":
+      case "hor":
+      case "horizontal":
+        setMeasureEnabled(true);
+        setMeasureMode("horizontal");
+        setCmdEcho("Horizontal \u2014 \u0394X between the two picks");
+        remember();
+        break;
+      case "v":
+      case "ver":
+      case "vertical":
+        setMeasureEnabled(true);
+        setMeasureMode("vertical");
+        setCmdEcho("Vertical \u2014 \u0394Y between the two picks");
+        remember();
+        break;
+      case "au":
+      case "auto":
+        setMeasureEnabled(true);
+        setMeasureMode("auto");
+        setCmdEcho("Auto (DIMLINEAR) \u2014 measures along the dominant axis of the two picks");
+        remember();
+        break;
+      case "measure":
+        setMeasureEnabled(!measureEnabled);
+        setCmdEcho(measureEnabled ? "Measure off." : "Measure on \u2014 click two points.");
+        remember();
+        break;
+      case "u":
+      case "undo":
+        measureUndoRef.current?.();
+        setCmdEcho("Last pick removed.");
+        remember();
+        break;
+      case "z":
+      case "ze":
+      case "zoom":
+      case "fit":
+      case "zoomextents":
+        handleResetView();
+        setCmdEcho("Zoom extents.");
+        remember();
+        break;
+      case "la":
+      case "layer":
+      case "layers":
+        setShowLayers((s) => !s);
+        setCmdEcho("Layer panel toggled.");
+        remember();
+        break;
+      case "off":
+      case "clear":
+        setMeasureFixedDist(null);
+        setMeasureFixedInput("");
+        measureResetRef.current?.();
+        setCmdEcho("Measurement cleared.");
+        remember();
+        break;
+      case "?":
+      case "help":
+        setCmdEcho(DXF_CMD_HELP);
+        break;
+      default: {
+        const editCmd = DXF_EDIT_COMMANDS[cmd];
+        if (editCmd) setCmdEcho(`${editCmd} is a drawing command \u2014 Preview is a read-only viewer. Measuring: DI, DIM, H, V (? for help)`);
+        else setCmdEcho(`Unknown command "${cmd.toUpperCase()}" \u2014 try DI, DIM, H, V, Z, LA (? for help)`);
+      }
+    }
+  };
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.altKey) return;
+      if (e.key.length !== 1 || e.key === " ") return;
+      const t = e.target;
+      if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;
+      const root = rootRef.current;
+      if (!root) return;
+      const myModal = root.closest("[data-modal-id]");
+      if (myModal && getActiveModalId() !== myModal.dataset.modalId) return;
+      cmdInputRef.current?.focus();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+  const cmdValueRef = useRef(cmdValue);
+  const measureEnabledRef = useRef(measureEnabled);
+  useEffect(() => {
+    cmdValueRef.current = cmdValue;
+  }, [cmdValue]);
+  useEffect(() => {
+    measureEnabledRef.current = measureEnabled;
+  }, [measureEnabled]);
+  useEffect(() => {
+    return registerModalEscapeInterceptor(() => {
+      const root = rootRef.current;
+      if (!root) return false;
+      const myModal = root.closest("[data-modal-id]");
+      if (!myModal || getActiveModalId() !== myModal.dataset.modalId) return false;
+      if (cmdValueRef.current) {
+        setCmdValue("");
+        setCmdEcho("*Cancel*");
+        return true;
+      }
+      if (measureEnabledRef.current) {
+        setMeasureEnabled(false);
+        setCmdEcho("Measure off.");
+        return true;
+      }
+      return false;
+    });
+  }, []);
+  const btn = "px-2 py-1 rounded hover:bg-gray-200 transition-colors text-gray-600 flex items-center gap-1";
+  const colorHex = (n) => {
+    if (typeof n !== "number") return "#999";
+    return "#" + n.toString(16).padStart(6, "0");
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs(PanelActions, { children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setShowLayers((s) => !s),
+          className: btn + (showLayers ? " bg-gray-200" : ""),
+          title: "Toggle layer visibility",
+          disabled: layers.length === 0,
+          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: "M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3" }) }),
+            "Layers ",
+            layers.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-gray-400", children: [
+              "(",
+              layers.filter((l) => l.visible).length,
+              "/",
+              layers.length,
+              ")"
+            ] })
+          ]
+        }
+      ),
+      /* @__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, or type DI / DIM below",
+          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(Fragment, { children: [
+        /* @__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("auto"),
+              className: `px-2 transition-colors ${measureMode === "auto" ? "bg-orange-500 text-white" : "bg-white text-gray-600 hover:bg-gray-50"}`,
+              title: "Auto \u2014 AutoCAD DIMLINEAR: measures \u0394X or \u0394Y, whichever is larger between the two picks",
+              children: "Auto"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setMeasureMode("horizontal"),
+              className: `px-2 transition-colors ${measureMode === "horizontal" ? "bg-orange-500 text-white" : "bg-white text-gray-600 hover:bg-gray-50"}`,
+              title: "Horizontal \u2014 distance along the X axis between two picks (AutoCAD DIMLINEAR horizontal)",
+              children: "H"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setMeasureMode("vertical"),
+              className: `px-2 transition-colors ${measureMode === "vertical" ? "bg-orange-500 text-white" : "bg-white text-gray-600 hover:bg-gray-50"}`,
+              title: "Vertical \u2014 distance along the Y axis between two picks (AutoCAD DIMLINEAR vertical)",
+              children: "V"
+            }
+          ),
+          /* @__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 (Euclidean) distance between two picks (AutoCAD DIST)",
+              children: "Point"
+            }
+          )
+        ] }),
+        (measureMode === "horizontal" || measureMode === "vertical") && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              inputMode: "decimal",
+              step: "any",
+              value: measureFixedInput,
+              placeholder: measureMode === "horizontal" ? "fix \u0394x" : "fix \u0394y",
+              onChange: (e) => {
+                const raw = e.target.value;
+                setMeasureFixedInput(raw);
+                if (raw.trim() === "") setMeasureFixedDist(null);
+                else {
+                  const n = parseFloat(raw);
+                  setMeasureFixedDist(Number.isFinite(n) && n !== 0 ? n : null);
+                }
+              },
+              className: "h-7 w-20 px-1.5 text-[11px] font-mono rounded border border-gray-200 bg-white text-gray-700 focus:outline-none focus:border-orange-400",
+              title: "Lock the second pick's axis coord to first pick + this value (mm). The reported measurement becomes the perpendicular distance."
+            }
+          ),
+          measureFixedDist !== null && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => {
+                setMeasureFixedDist(null);
+                setMeasureFixedInput("");
+              },
+              className: "text-gray-400 hover:text-gray-600 text-[11px] px-1",
+              title: "Clear fixed distance",
+              children: "\xD7"
+            }
+          )
+        ] })
+      ] }),
+      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: measureResolved === "horizontal" ? `Horizontal distance (\u0394x) between the two picked points${measureMode === "auto" ? " \u2014 Auto resolved to the X axis" : ""}` : measureResolved === "vertical" ? `Vertical distance (\u0394y) between the two picked points${measureMode === "auto" ? " \u2014 Auto resolved to the Y axis" : ""}` : "Straight-line distance between the two picked points",
+          children: [
+            formatMeasureDistance(measureDistance),
+            measureResolved === "horizontal" ? " \u2194" : measureResolved === "vertical" ? " \u2195" : ""
+          ]
+        }
+      ),
+      /* @__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" }) }),
+        "Download"
+      ] }),
+      onEmail && /* @__PURE__ */ jsxs("button", { onClick: onEmail, 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: "M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" }) }),
+        "Email"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative flex-1 bg-white min-h-0", children: [
+      /* @__PURE__ */ jsx("div", { ref: containerRef, style: { width: "100%", height: "100%" } }),
+      showLayers && layers.length > 0 && /* @__PURE__ */ jsxs("div", { className: "absolute top-2 right-2 w-64 max-h-[70%] flex flex-col bg-white/95 backdrop-blur border border-gray-200 rounded-md shadow-xl z-10 text-xs", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 border-b border-gray-200 bg-gray-50", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-700", children: "Layers" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx("button", { onClick: () => setAllLayers(true), className: "px-1.5 py-0.5 rounded hover:bg-gray-200 text-gray-600", children: "All" }),
+            /* @__PURE__ */ jsx("button", { onClick: () => setAllLayers(false), className: "px-1.5 py-0.5 rounded hover:bg-gray-200 text-gray-600", children: "None" }),
+            /* @__PURE__ */ jsx("button", { onClick: () => setShowLayers(false), className: "px-1.5 py-0.5 rounded hover:bg-gray-200 text-gray-600", title: "Close", children: "\xD7" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "overflow-y-auto py-1", children: layers.map((l) => /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 px-2 py-1 hover:bg-gray-100 cursor-pointer", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: l.visible,
+              onChange: () => toggleLayer(l.name),
+              className: "h-3.5 w-3.5"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "inline-block h-3 w-3 rounded-sm border border-gray-300 shrink-0",
+              style: { background: colorHex(l.color) }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "truncate text-gray-700", title: l.displayName, children: l.displayName || l.name })
+        ] }, l.name)) })
+      ] }),
+      showHint && !loading && !error && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-3 left-1/2 -translate-x-1/2 bg-gray-900/85 text-white text-[11px] px-3 py-1.5 rounded-full shadow-lg flex items-center gap-3 z-10 pointer-events-none", children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.8, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" }) }),
+          "Drag to pan"
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-white/40", children: "\u2022" }),
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.8, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM10.5 7.5v6m3-3h-6" }) }),
+          "Scroll to zoom"
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-white/40", children: "\u2022" }),
+        /* @__PURE__ */ jsx("span", { children: "Fit to reset" }),
+        /* @__PURE__ */ jsx("span", { className: "text-white/40", children: "\u2022" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          "Type ",
+          /* @__PURE__ */ jsx("span", { className: "font-mono font-semibold", children: "DI" }),
+          " / ",
+          /* @__PURE__ */ jsx("span", { className: "font-mono font-semibold", children: "DIM" }),
+          " to measure"
+        ] })
+      ] }),
+      loading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-white/80 text-sm text-gray-500", children: "Loading drawing\u2026" }),
+      error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center text-sm text-red-600 px-6 text-center", children: error })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "shrink-0 border-t border-gray-200 bg-gray-50", children: [
+      cmdEcho && /* @__PURE__ */ jsx("div", { className: "px-2.5 pt-1 text-[11px] font-mono text-gray-500 truncate", title: cmdEcho, children: cmdEcho }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-2.5 h-7", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[11px] font-mono font-semibold text-gray-400 select-none", children: ">" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: cmdInputRef,
+            value: cmdValue,
+            onChange: (e) => setCmdValue(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                runCommand(cmdValue);
+              } else if (e.key === "Escape") {
+                if (cmdValue) {
+                  e.stopPropagation();
+                  setCmdValue("");
+                  setCmdEcho("*Cancel*");
+                } else {
+                  e.target.blur();
+                }
+              }
+            },
+            placeholder: "Type a command \u2014 DI, DIM, H, V, Z, LA (? for help)",
+            spellCheck: false,
+            autoComplete: "off",
+            className: "flex-1 min-w-0 bg-transparent text-[11px] font-mono text-gray-700 focus:outline-none placeholder:text-gray-300"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+var DEFAULT_O3DV_LIBS = "https://cdn.jsdelivr.net/npm/online-3d-viewer@0.18.0/libs/";
+function buildTree(node, depth = 0) {
+  return {
+    id: node.GetId?.() ?? 0,
+    name: node.GetName?.() || (depth === 0 ? "Root" : "Node"),
+    isMeshNode: !!node.IsMeshNode?.(),
+    meshIndices: node.GetMeshIndices?.() ?? [],
+    children: (node.GetChildNodes?.() ?? []).map((c) => buildTree(c, depth + 1))
+  };
+}
+function collectNodeIds(node, out) {
+  out.add(node.id);
+  for (const c of node.children) collectNodeIds(c, out);
+}
+function hexToRgb(OV, hex) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(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(3)} m`;
+  return `${mm.toFixed(2)} mm`;
+}
+function StepPanel({ url, filename, onDownload, onEmail }) {
+  const containerRef = useRef(null);
+  const viewerRef = useRef(null);
+  const ovRef = useRef(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [showHint, setShowHint] = useState(true);
+  const [tree, setTree] = useState(null);
+  const [expanded, setExpanded] = useState({});
+  const [hidden, setHidden] = useState(/* @__PURE__ */ new Set());
+  const [bgColor, setBgColor] = useState("#f5f6f8");
+  const [showEdges, setShowEdges] = useState(true);
+  const [edgeColor, setEdgeColor] = useState("#000000");
+  const [edgeThreshold, setEdgeThreshold] = useState(1);
+  const [showMeshes, setShowMeshes] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
+  const [perspective, setPerspective] = useState(false);
+  const [sectionEnabled, setSectionEnabled] = useState(false);
+  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);
+    setExpanded({});
+    setHidden(/* @__PURE__ */ new Set());
+    (async () => {
+      let OV;
+      try {
+        OV = await import('online-3d-viewer');
+      } catch {
+        if (!cancelled) {
+          setError("online-3d-viewer is not installed in this app. Add it to enable 3D file viewing.");
+          setLoading(false);
+        }
+        return;
+      }
+      ovRef.current = OV;
+      if (cancelled || !containerRef.current) return;
+      await new Promise((resolve) => {
+        const tryStart = () => {
+          const r = containerRef.current?.getBoundingClientRect();
+          if (r && r.width > 4 && r.height > 4) resolve();
+          else requestAnimationFrame(tryStart);
+        };
+        tryStart();
+      });
+      if (cancelled || !containerRef.current) return;
+      try {
+        const libsBase = typeof window !== "undefined" && window.__REACT_OS_SHELL_O3DV_LIBS__ || DEFAULT_O3DV_LIBS;
+        OV.SetExternalLibLocation?.(libsBase);
+        ensureStencilContextAttribute();
+        viewer = new OV.EmbeddedViewer(containerRef.current, {
+          backgroundColor: new OV.RGBAColor(245, 246, 248, 255),
+          defaultColor: new OV.RGBColor(180, 188, 200),
+          edgeSettings: new OV.EdgeSettings(true, new OV.RGBColor(0, 0, 0), 1),
+          onModelLoaded: () => {
+            if (cancelled) return;
+            try {
+              const model = viewer.GetModel?.();
+              const root = model?.GetRootNode?.();
+              if (root) {
+                const t = buildTree(root);
+                setTree(t);
+                const expandIds = { [t.id]: true };
+                for (const c of t.children) expandIds[c.id] = true;
+                setExpanded(expandIds);
+              }
+            } catch (err) {
+              console.warn("[Preview] mesh tree extraction failed", err);
+            }
+            setLoading(false);
+          },
+          onModelLoadFailed: () => {
+            if (!cancelled) {
+              setError("Failed to load 3D model.");
+              setLoading(false);
+            }
+          }
+        });
+        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.");
+          setLoading(false);
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+      try {
+        resizeObserver?.disconnect();
+      } catch {
+      }
+      try {
+        viewer?.Destroy?.();
+      } catch {
+      }
+      viewerRef.current = null;
+    };
+  }, [url, filename]);
+  useEffect(() => {
+    const v = viewerRef.current;
+    if (!v?.viewer) return;
+    try {
+      const visit = (mesh) => {
+        if (mesh.userData?.__sectionHelper) return;
+        const ud = mesh.userData?.originalMeshInstance ?? mesh.userData;
+        const nodeId = ud?.id?.nodeId ?? ud?.nodeId;
+        if (typeof nodeId === "number") {
+          mesh.visible = !hidden.has(nodeId);
+        }
+      };
+      v.viewer.mainModel?.EnumerateMeshesAndLines?.(visit);
+      v.viewer.mainModel?.EnumerateEdges?.(visit);
+      v.viewer.Render?.();
+    } catch (err) {
+      console.warn("[Preview] visibility update failed", err);
+    }
+  }, [hidden, tree]);
+  useEffect(() => {
+    const OV = ovRef.current;
+    const v = viewerRef.current;
+    if (!OV || !v?.viewer) return;
+    try {
+      v.viewer.SetEdgeSettings(new OV.EdgeSettings(showEdges, hexToRgb(OV, edgeColor), edgeThreshold));
+      const s = sectionRef.current;
+      if (s) {
+        const helperEdges = [];
+        v.viewer.mainModel?.EnumerateEdges?.((edge) => {
+          if (edge.userData?.__sectionHelper) helperEdges.push(edge);
+        });
+        for (const e of helperEdges) {
+          e.parent?.remove(e);
+          e.geometry?.dispose?.();
+          e.material?.dispose?.();
+        }
+        const plane = s.plane;
+        const applyMatClip = (mat) => {
+          if (!mat || s.materialState.has(mat)) return;
+          s.materialState.set(mat, { clippingPlanes: mat.clippingPlanes, clipShadows: mat.clipShadows });
+          mat.clippingPlanes = [plane];
+          mat.clipShadows = true;
+          mat.needsUpdate = true;
+        };
+        v.viewer.mainModel?.EnumerateEdges?.((edge) => {
+          const mat = edge.material;
+          if (Array.isArray(mat)) for (const m of mat) applyMatClip(m);
+          else applyMatClip(mat);
+        });
+      }
+      v.viewer.Render?.();
+    } catch {
+    }
+  }, [showEdges, edgeColor, edgeThreshold]);
+  useEffect(() => {
+    const OV = ovRef.current;
+    const v = viewerRef.current;
+    if (!OV || !v?.viewer) return;
+    try {
+      const c = hexToRgb(OV, bgColor);
+      v.viewer.SetBackgroundColor(new OV.RGBAColor(c.r, c.g, c.b, 255));
+      v.viewer.Render?.();
+    } catch {
+    }
+  }, [bgColor]);
+  useEffect(() => {
+    const v = viewerRef.current;
+    if (!v?.viewer || loading) return;
+    const renderer = v.viewer.renderer;
+    const scene = v.viewer.scene;
+    if (!renderer || !scene) return;
+    if (sectionRef.current) {
+      const s = sectionRef.current;
+      for (const [mat, prev] of s.materialState.entries()) {
+        mat.clippingPlanes = prev.clippingPlanes;
+        mat.clipShadows = prev.clipShadows;
+        mat.needsUpdate = true;
+      }
+      for (const helper of s.helpers) {
+        helper.parent?.remove(helper);
+        helper.material?.dispose?.();
+      }
+      if (s.capMesh) {
+        scene.remove(s.capMesh);
+        s.capMesh.geometry?.dispose?.();
+        s.capMesh.material?.dispose?.();
+      }
+      sectionRef.current = null;
+    }
+    if (!sectionEnabled) {
+      renderer.localClippingEnabled = false;
+      v.viewer.Render?.();
+      return;
+    }
+    const bbox = v.viewer.GetBoundingBox?.(() => true);
+    if (!bbox) return;
+    const targets = [];
+    v.viewer.mainModel?.EnumerateMeshes?.((mesh) => {
+      if (!mesh.userData?.__sectionHelper) targets.push(mesh);
+    });
+    if (!targets.length) {
+      renderer.localClippingEnabled = false;
+      v.viewer.Render?.();
+      return;
+    }
+    const sample = targets[0];
+    const Mesh = sample.constructor;
+    const Material = sample.material?.constructor;
+    const Geometry = sample.geometry?.constructor;
+    const BufferAttr = sample.geometry?.attributes?.position?.constructor;
+    if (!Mesh || !Material || !Geometry || !BufferAttr) {
+      console.warn("[Preview] section: missing THREE constructors, falling back to no cap");
+    }
+    const FrontSide = 0, BackSide = 1, DoubleSide = 2;
+    const AlwaysStencilFunc = 519, NotEqualStencilFunc = 517;
+    const IncrementWrapStencilOp = 7682, DecrementWrapStencilOp = 7683;
+    const ReplaceStencilOp = 7681;
+    let hasStencil = true;
+    try {
+      const gl = renderer.getContext?.();
+      const attrs = gl?.getContextAttributes?.();
+      hasStencil = attrs?.stencil !== false;
+      renderer.autoClearStencil = true;
+      console.info("[Preview] section: stencil buffer =", hasStencil, "targets =", targets.length);
+    } catch {
+    }
+    renderer.localClippingEnabled = true;
+    const plane = {
+      normal: { x: 0, y: 0, z: -1 },
+      constant: 0
+    };
+    plane.clone = function planeClone() {
+      const c = {
+        normal: { x: this.normal.x, y: this.normal.y, z: this.normal.z },
+        constant: this.constant
+      };
+      c.clone = planeClone;
+      return c;
+    };
+    const helpers = [];
+    const materialState = /* @__PURE__ */ new Map();
+    const applyToMaterial = (mat) => {
+      if (!mat || materialState.has(mat)) return;
+      materialState.set(mat, { clippingPlanes: mat.clippingPlanes, clipShadows: mat.clipShadows });
+      mat.clippingPlanes = [plane];
+      mat.clipShadows = true;
+      mat.needsUpdate = true;
+    };
+    for (const mesh of targets) {
+      const mat = mesh.material;
+      if (Array.isArray(mat)) for (const m of mat) applyToMaterial(m);
+      else applyToMaterial(mat);
+      const sourceMat2 = Array.isArray(mat) ? mat[0] : mat;
+      if (Mesh && hasStencil && sourceMat2?.clone) {
+        const makeStencil = (side, op) => {
+          const m = sourceMat2.clone();
+          m.depthWrite = false;
+          m.depthTest = false;
+          m.colorWrite = false;
+          m.stencilWrite = true;
+          m.stencilFunc = AlwaysStencilFunc;
+          m.stencilFail = op;
+          m.stencilZFail = op;
+          m.stencilZPass = op;
+          m.side = side;
+          m.transparent = false;
+          m.clippingPlanes = [plane];
+          m.clipShadows = true;
+          m.needsUpdate = true;
+          const helper = new Mesh(mesh.geometry, m);
+          helper.matrixAutoUpdate = false;
+          helper.renderOrder = 1;
+          helper.userData.__sectionHelper = true;
+          mesh.add(helper);
+          helpers.push(helper);
+        };
+        makeStencil(BackSide, IncrementWrapStencilOp);
+        makeStencil(FrontSide, DecrementWrapStencilOp);
+      }
+    }
+    v.viewer.mainModel?.EnumerateEdges?.((edge) => {
+      const mat = edge.material;
+      if (Array.isArray(mat)) for (const m of mat) applyToMaterial(m);
+      else applyToMaterial(mat);
+    });
+    let capMesh = null;
+    const sourceMat = targets[0]?.material && (Array.isArray(targets[0].material) ? targets[0].material[0] : targets[0].material);
+    if (hasStencil && Mesh && Geometry && BufferAttr && sourceMat?.clone) {
+      const dx = bbox.max.x - bbox.min.x;
+      const dy = bbox.max.y - bbox.min.y;
+      const dz = bbox.max.z - bbox.min.z;
+      const capSize = Math.max(dx, dy, dz, 1) * 2;
+      const half = capSize / 2;
+      const capGeom = new Geometry();
+      const positions = new Float32Array([
+        -half,
+        -half,
+        0,
+        half,
+        -half,
+        0,
+        half,
+        half,
+        0,
+        -half,
+        half,
+        0
+      ]);
+      const normals = new Float32Array([
+        0,
+        0,
+        1,
+        0,
+        0,
+        1,
+        0,
+        0,
+        1,
+        0,
+        0,
+        1
+      ]);
+      capGeom.setAttribute("position", new BufferAttr(positions, 3));
+      capGeom.setAttribute("normal", new BufferAttr(normals, 3));
+      capGeom.setIndex([0, 1, 2, 0, 2, 3]);
+      const capMat = sourceMat.clone();
+      const sourceColorHex = sourceMat.color?.getHex?.() ?? 11844808;
+      capMat.emissive?.setHex?.(sourceColorHex);
+      if ("emissiveIntensity" in capMat) capMat.emissiveIntensity = 0.25;
+      capMat.side = DoubleSide;
+      capMat.transparent = false;
+      capMat.opacity = 1;
+      capMat.stencilWrite = true;
+      capMat.stencilRef = 0;
+      capMat.stencilFunc = NotEqualStencilFunc;
+      capMat.stencilFail = ReplaceStencilOp;
+      capMat.stencilZFail = ReplaceStencilOp;
+      capMat.stencilZPass = ReplaceStencilOp;
+      capMat.clippingPlanes = [];
+      capMat.polygonOffset = true;
+      capMat.polygonOffsetFactor = -1;
+      capMat.polygonOffsetUnits = -1;
+      capMat.needsUpdate = true;
+      capMesh = new Mesh(capGeom, capMat);
+      capMesh.renderOrder = 2;
+      capMesh.userData.__sectionHelper = true;
+      scene.add(capMesh);
+    }
+    sectionRef.current = { plane, capMesh, helpers, materialState, bbox };
+    console.info("[Preview] section: helpers =", helpers.length, "cap =", !!capMesh);
+    v.viewer.Render?.();
+  }, [sectionEnabled, loading, tree]);
+  useEffect(() => {
+    const v = viewerRef.current;
+    const s = sectionRef.current;
+    if (!v?.viewer || !s || !sectionEnabled) return;
+    try {
+      const bbox = s.bbox;
+      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 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;
+        nx = sign * sin\u03B8;
+      } else {
+        nz = sign * cos\u03B8;
+        ny = sign * sin\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 = -(nx * Px + ny * Py + nz * Pz);
+      if (s.capMesh) {
+        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;
+        const pz = cz - nz * dist;
+        s.capMesh.position.set(px, py, pz);
+        s.capMesh.lookAt?.(px + nx, py + ny, pz + nz);
+      }
+      v.viewer.Render?.();
+    } catch (err) {
+      console.warn("[Preview] section update failed", err);
+    }
+  }, [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 canvas = renderer?.domElement;
+    if (!renderer || !scene || !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;
+    let LineSegmentsCtor = null;
+    let LineBasicMaterialCtor = null;
+    scene.traverse((obj) => {
+      if (LineSegmentsCtor && LineBasicMaterialCtor) return;
+      if (!obj?.isLineSegments) return;
+      LineSegmentsCtor = obj.constructor;
+      const mat = Array.isArray(obj.material) ? obj.material[0] : obj.material;
+      if (mat?.constructor) LineBasicMaterialCtor = mat.constructor;
+    });
+    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 };
+    const OV = ovRef.current;
+    const intersectionMode = OV?.IntersectionMode?.MeshOnly ?? 1;
+    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 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 = LineSegmentsCtor ?? MeshCtor;
+      const LineMatCtor = LineBasicMaterialCtor ?? 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.left = "-9999px";
+      el.style.top = "-9999px";
+      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 camera = v.viewer.camera;
+      if (!camera) 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`;
+      const offScreen = x < 0 || y < 0 || x > rect.width || y > rect.height;
+      s.label.style.opacity = projected.z > 1 || offScreen ? "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) => {
+      if (!v.viewer.camera) return;
+      const rect = canvas.getBoundingClientRect();
+      const mouseCoords = {
+        x: ev.clientX - rect.left,
+        y: ev.clientY - rect.top
+      };
+      const hit = v.viewer.GetMeshIntersectionUnderMouse?.(intersectionMode, mouseCoords);
+      if (!hit) return;
+      const s = measureRef.current;
+      const point = new Vector3Ctor(hit.point.x, hit.point.y, hit.point.z);
+      const normal = worldNormalFromHit(hit);
+      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(hit.object, hit);
+        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);
+    return () => clearTimeout(t);
+  }, [showHint, loading]);
+  const toggleNodeVisible = (node) => {
+    const ids = /* @__PURE__ */ new Set();
+    collectNodeIds(node, ids);
+    setHidden((prev) => {
+      const next = new Set(prev);
+      const anyVisible = [...ids].some((id) => !next.has(id));
+      for (const id of ids) {
+        if (anyVisible) next.add(id);
+        else next.delete(id);
+      }
+      return next;
+    });
+  };
+  const toggleExpanded = (id) => {
+    setExpanded((prev) => ({ ...prev, [id]: !prev[id] }));
+  };
+  const fitNode = (node) => {
+    handleFit();
+  };
+  const handleFit = () => {
+    try {
+      const v = viewerRef.current;
+      const sphere = v?.viewer?.GetBoundingSphere?.(() => true);
+      if (sphere) v.viewer.FitSphereToWindow(sphere, true);
+      v?.viewer?.Render?.();
+    } catch {
+    }
+  };
+  useEffect(() => {
+    const OV = ovRef.current;
+    const v = viewerRef.current;
+    if (!OV || !v?.viewer || loading) return;
+    try {
+      v.viewer.SetProjectionMode(perspective ? OV.ProjectionMode.Perspective : OV.ProjectionMode.Orthographic);
+    } catch {
+    }
+  }, [perspective, loading]);
+  const setCameraPreset = (preset) => {
+    const OV = ovRef.current;
+    const v = viewerRef.current;
+    if (!OV || !v?.viewer) return;
+    try {
+      const sphere = v.viewer.GetBoundingSphere?.(() => true);
+      if (!sphere) return;
+      const c = sphere.center;
+      const r = sphere.radius || 1;
+      const dist = r * 3;
+      const cx = c.x ?? 0, cy = c.y ?? 0, cz = c.z ?? 0;
+      let eye, up;
+      switch (preset) {
+        case "top":
+          eye = new OV.Coord3D(cx, cy, cz + dist);
+          up = new OV.Coord3D(0, 1, 0);
+          break;
+        case "front":
+          eye = new OV.Coord3D(cx, cy - dist, cz);
+          up = new OV.Coord3D(0, 0, 1);
+          break;
+        case "side":
+          eye = new OV.Coord3D(cx + dist, cy, cz);
+          up = new OV.Coord3D(0, 0, 1);
+          break;
+        case "iso":
+        default: {
+          const k = dist / Math.sqrt(3);
+          eye = new OV.Coord3D(cx + k, cy - k, cz + k);
+          up = new OV.Coord3D(0, 0, 1);
+          break;
+        }
+      }
+      const center = new OV.Coord3D(cx, cy, cz);
+      const cam = new OV.Camera(eye, center, up, 45);
+      v.viewer.SetCamera(cam);
+      v.viewer.AdjustClippingPlanesToSphere?.(sphere);
+      v.viewer.Render?.();
+    } catch {
+    }
+  };
+  const handleSnapshot = () => {
+    try {
+      const v = viewerRef.current;
+      const size = v?.viewer?.GetCanvasSize?.() ?? { width: 1280, height: 720 };
+      const dataUrl = v?.viewer?.GetImageAsDataUrl?.(size.width, size.height, false);
+      if (!dataUrl) return;
+      const a = document.createElement("a");
+      a.href = dataUrl;
+      a.download = `${filename.replace(/\.[^.]+$/, "")}-snapshot.png`;
+      a.click();
+    } catch {
+    }
+  };
+  const handleResetDisplay = () => {
+    setBgColor("#f5f6f8");
+    setShowEdges(true);
+    setEdgeColor("#000000");
+    setEdgeThreshold(1);
+    setSectionEnabled(false);
+    setSectionAxis("x");
+    setSectionFlip(false);
+    setSectionPosition(0.5);
+    setSectionAngle(0);
+  };
+  const handleDefaultDownload = () => {
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+  };
+  const ext = (filename.split(".").pop() || "").toUpperCase();
+  const renderTreeNode = (node, depth = 0) => {
+    const hasChildren = node.children.length > 0;
+    const isExpanded = expanded[node.id] !== false;
+    const isVisible = !hidden.has(node.id);
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "group flex items-center gap-1 px-1.5 py-1 hover:bg-gray-100 cursor-default text-[12px] text-gray-700",
+          style: { paddingLeft: `${depth * 12 + 6}px` },
+          children: [
+            hasChildren ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => toggleExpanded(node.id),
+                className: "h-4 w-4 shrink-0 flex items-center justify-center text-gray-500 hover:text-gray-900",
+                title: isExpanded ? "Collapse" : "Expand",
+                children: /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: isExpanded ? "M19.5 8.25l-7.5 7.5-7.5-7.5" : "M8.25 4.5l7.5 7.5-7.5 7.5" }) })
+              }
+            ) : /* @__PURE__ */ jsx("span", { className: "h-4 w-4 shrink-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "h-1 w-1 rounded-full bg-gray-400" }) }),
+            /* @__PURE__ */ jsx("span", { className: `flex-1 truncate ${isVisible ? "" : "opacity-40"}`, title: node.name, children: node.name }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => fitNode(),
+                className: "h-4 w-4 shrink-0 text-gray-400 hover:text-gray-900 opacity-0 group-hover:opacity-100 transition-opacity",
+                title: "Fit to view",
+                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.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" }) })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => toggleNodeVisible(node),
+                className: "h-4 w-4 shrink-0 text-gray-500 hover:text-gray-900",
+                title: isVisible ? "Hide" : "Show",
+                children: isVisible ? /* @__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: "M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" }),
+                  /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
+                ] }) : /* @__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.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" }) })
+              }
+            )
+          ]
+        }
+      ),
+      isExpanded && hasChildren && /* @__PURE__ */ jsx("div", { children: node.children.map((c) => renderTreeNode(c, depth + 1)) })
+    ] }, node.id);
+  };
+  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: [
+      /* @__PURE__ */ jsx("button", { onClick: handleFit, className: tBtn, title: "Fit to view", 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 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" }) }) }),
+      /* @__PURE__ */ jsx("div", { className: tBtnSep }),
+      /* @__PURE__ */ jsx("button", { onClick: () => setCameraPreset("iso"), className: tBtn, title: "Isometric view", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold", children: "ISO" }) }),
+      /* @__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" }),
+        /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z" })
+      ] }) }),
+      /* @__PURE__ */ jsx("button", { onClick: () => setShowHint((s) => !s), className: tBtn, title: "How to navigate", 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: "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__ */ jsx(
+        "button",
+        {
+          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: [
+        /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" }),
+        /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
+      ] }) }),
+      /* @__PURE__ */ jsx("button", { onClick: onDownload ?? handleDefaultDownload, className: tBtn, title: "Download original file", 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 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" }) }) }),
+      onEmail && /* @__PURE__ */ jsx("button", { onClick: onEmail, className: tBtn, title: "Email", 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: "M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" }) }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 flex min-h-0", children: /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-w-0", style: { background: bgColor }, children: [
+      /* @__PURE__ */ jsx("div", { ref: containerRef, style: { width: "100%", height: "100%" } }),
+      showMeshes && /* @__PURE__ */ jsxs("div", { className: "absolute top-2 left-2 w-64 max-h-[80%] flex flex-col bg-white/95 backdrop-blur border border-gray-200 rounded-md shadow-xl z-10 text-xs", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 border-b border-gray-200 bg-gray-50", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-700", children: "Meshes" }),
+          /* @__PURE__ */ jsx("button", { onClick: () => setShowMeshes(false), className: "px-1.5 py-0.5 rounded hover:bg-gray-200 text-gray-600", title: "Close", children: "\xD7" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto py-1", children: tree ? renderTreeNode(tree) : /* @__PURE__ */ jsx("div", { className: "px-3 py-3 text-[11px] text-gray-500 italic", children: loading ? "Reading model\u2026" : "No structure available" }) }),
+        tree && /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 text-[10px] text-gray-500 border-t border-gray-200", children: hidden.size === 0 ? "All visible" : `${hidden.size} hidden` })
+      ] }),
+      showHint && !loading && !error && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-3 left-1/2 -translate-x-1/2 bg-gray-900/85 text-white text-[11px] px-3 py-1.5 rounded-full shadow-lg flex items-center gap-3 z-10 pointer-events-none", children: [
+        /* @__PURE__ */ jsx("span", { children: "Drag to rotate" }),
+        /* @__PURE__ */ jsx("span", { className: "text-white/40", children: "\u2022" }),
+        /* @__PURE__ */ jsx("span", { children: "Right-click drag to pan" }),
+        /* @__PURE__ */ jsx("span", { className: "text-white/40", children: "\u2022" }),
+        /* @__PURE__ */ jsx("span", { children: "Scroll to zoom" })
+      ] }),
+      loading && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-white/85 text-sm text-gray-600 gap-2", children: [
+        /* @__PURE__ */ jsxs("svg", { className: "h-6 w-6 text-blue-500 animate-spin", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: "0.2" }),
+          /* @__PURE__ */ jsx("path", { d: "M22 12a10 10 0 0 1-10 10", strokeLinecap: "round" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { children: "Loading 3D model\u2026" }),
+        ext === "STP" || ext === "STEP" ? /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400", children: "STEP files load OpenCascade WASM (~5 MB) on first use." }) : null
+      ] }),
+      error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center text-sm text-red-600 px-6 text-center bg-white/85", children: error }),
+      showSettings && /* @__PURE__ */ jsxs("div", { className: "absolute top-2 right-2 w-64 max-h-[80%] flex flex-col bg-white/95 backdrop-blur border border-gray-200 rounded-md shadow-xl z-10 text-xs", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 border-b border-gray-200 bg-gray-50", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-700", children: "Model Display" }),
+          /* @__PURE__ */ jsx("button", { onClick: () => setShowSettings(false), className: "px-1.5 py-0.5 rounded hover:bg-gray-200 text-gray-600", title: "Close", children: "\xD7" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-3 py-3 space-y-3 text-[12px] text-gray-700", children: [
+          /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("span", { children: "Background Color" }),
+            /* @__PURE__ */ jsx("input", { type: "color", value: bgColor, onChange: (e) => setBgColor(e.target.value), className: "h-6 w-10 rounded border border-gray-300 bg-white" })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("span", { children: "Show Edges" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setShowEdges((s) => !s),
+                role: "switch",
+                "aria-checked": showEdges,
+                className: `relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors ${showEdges ? "bg-blue-500" : "bg-gray-300"}`,
+                children: /* @__PURE__ */ jsx("span", { className: `inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform ${showEdges ? "translate-x-[18px]" : "translate-x-0.5"}` })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: showEdges ? "" : "opacity-40", children: "Edge Color" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "color",
+                value: edgeColor,
+                onChange: (e) => setEdgeColor(e.target.value),
+                disabled: !showEdges,
+                className: "h-6 w-10 rounded border border-gray-300 bg-white disabled:opacity-40"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: showEdges ? "" : "opacity-40 pointer-events-none", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 mb-1", children: [
+              /* @__PURE__ */ jsx("span", { children: "Edge Threshold" }),
+              /* @__PURE__ */ jsxs("span", { className: "text-gray-500 tabular-nums", children: [
+                edgeThreshold,
+                "\xB0"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 0,
+                max: 45,
+                step: 1,
+                value: edgeThreshold,
+                onChange: (e) => setEdgeThreshold(Number(e.target.value)),
+                className: "w-full accent-blue-500"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "border-t border-gray-200 -mx-3 px-3 pt-3 mt-1", children: [
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Section View" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setSectionEnabled((s) => !s),
+                  role: "switch",
+                  "aria-checked": sectionEnabled,
+                  className: `relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors ${sectionEnabled ? "bg-blue-500" : "bg-gray-300"}`,
+                  children: /* @__PURE__ */ jsx("span", { className: `inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform ${sectionEnabled ? "translate-x-[18px]" : "translate-x-0.5"}` })
+                }
+              )
+            ] }),
+            /* @__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" }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => setSectionFlip((f) => !f),
+                      className: "text-[10px] text-gray-600 hover:text-gray-900 px-1.5 py-0.5 rounded bg-gray-100 hover:bg-gray-200",
+                      title: "Flip section direction",
+                      children: sectionFlip ? "\u2190 flipped" : "flip \u2192"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1", children: ["x", "y", "z"].map((ax) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => setSectionAxis(ax),
+                    className: `py-1 rounded text-[11px] font-semibold ${sectionAxis === ax ? "bg-blue-500 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`,
+                    children: ax.toUpperCase()
+                  },
+                  ax
+                )) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 mb-1", children: [
+                  /* @__PURE__ */ jsx("span", { children: "Position" }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-gray-500 tabular-nums", children: [
+                    Math.round(sectionPosition * 100),
+                    "%"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "range",
+                    min: 0,
+                    max: 1,
+                    step: 0.01,
+                    value: sectionPosition,
+                    onChange: (e) => setSectionPosition(Number(e.target.value)),
+                    className: "w-full accent-blue-500"
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "px-3 py-2 border-t border-gray-200", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleResetDisplay,
+            className: "w-full text-[11px] text-gray-700 bg-gray-100 hover:bg-gray-200 rounded py-1.5 transition-colors",
+            children: "Reset to Default"
+          }
+        ) })
+      ] })
+    ] }) })
+  ] });
+}
+function ImagePanel({ url, filename, onDownload, onEmail }) {
+  const [zoom, setZoom] = useState(1);
+  const [error, setError] = useState(false);
+  const [annotating, setAnnotating] = useState(false);
+  const annotatorRef = useRef(null);
+  const handleDefaultDownload = async () => {
+    if (url.startsWith("blob:") || url.startsWith("data:")) {
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      a.click();
+      return;
+    }
+    const tryFetch = async (init) => {
+      const res = await fetch(url, init);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      return res.blob();
+    };
+    try {
+      let blob;
+      try {
+        blob = await tryFetch({ credentials: "include" });
+      } catch {
+        blob = await tryFetch({ credentials: "omit" });
+      }
+      const blobUrl = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = blobUrl;
+      a.download = filename;
+      a.click();
+      setTimeout(() => URL.revokeObjectURL(blobUrl), 1e3);
+    } catch {
+      toast_default.error("Download failed \u2014 couldn't reach the file.");
+    }
+  };
+  const btn = "px-2 py-1 rounded hover:bg-gray-200 transition-colors text-gray-600 flex items-center gap-1";
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs(PanelActions, { children: [
+      !annotating && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("button", { onClick: () => setZoom((z) => Math.max(0.1, Math.round((z - 0.25) * 100) / 100)), className: btn, children: "\u2212" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-gray-500 w-12 text-center tabular-nums", children: [
+          Math.round(zoom * 100),
+          "%"
+        ] }),
+        /* @__PURE__ */ jsx("button", { onClick: () => setZoom((z) => Math.min(8, Math.round((z + 0.25) * 100) / 100)), className: btn, children: "+" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => setZoom(1), className: btn, children: "1:1" }),
+        /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-gray-300 mx-1" }),
+        /* @__PURE__ */ jsxs("button", { onClick: () => setAnnotating(true), className: btn, title: "Annotate this image", 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: "M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" }) }),
+          "Annotate"
+        ] })
+      ] }),
+      annotating && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("button", { onClick: () => setAnnotating(false), className: btn, title: "Back to viewer", 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: "M15.75 19.5L8.25 12l7.5-7.5" }) }),
+          "View"
+        ] }),
+        /* @__PURE__ */ jsxs("button", { onClick: () => annotatorRef.current?.copy(), 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: "M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" }) }),
+          "Copy"
+        ] }),
+        /* @__PURE__ */ jsxs("button", { onClick: () => annotatorRef.current?.save(), 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" }) }),
+          "Save"
+        ] })
+      ] }),
+      /* @__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" }) }),
+        "Download"
+      ] }),
+      onEmail && /* @__PURE__ */ jsxs("button", { onClick: onEmail, 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: "M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" }) }),
+        "Email"
+      ] })
+    ] }),
+    annotating ? /* @__PURE__ */ jsx(ImageAnnotator_default, { ref: annotatorRef, src: url, filename }) : /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto bg-gray-100 flex items-center justify-center p-4", children: error ? /* @__PURE__ */ jsx("div", { className: "text-sm text-red-600", children: "Failed to load image." }) : /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: url,
+        alt: filename,
+        onError: () => setError(true),
+        style: { transform: `scale(${zoom})`, transformOrigin: "center center", transition: "transform 120ms ease" },
+        className: "max-w-full max-h-full shadow-lg rounded bg-white"
+      }
+    ) })
+  ] });
+}
+
+export { Preview as default };
+//# sourceMappingURL=Preview-N4UYYXG6.js.map
+//# sourceMappingURL=Preview-N4UYYXG6.js.map