react-os-shell 0.1.27 → 0.1.31

package/dist/chunk-RGYSM6P5.js

@@ -0,0 +1,1264 @@
+import { toast_default } from './chunk-WIJ45SYD.js';
+import { WindowTitle } from './chunk-AKZTZLKP.js';
+import { useState, useEffect, useRef } from 'react';
+import * as pdfjsLib from 'pdfjs-dist';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var TITLE_DISPLAY_MAX = 24;
+function truncateForTitle(s) {
+  return s.length > TITLE_DISPLAY_MAX ? `${s.slice(0, TITLE_DISPLAY_MAX - 1)}\u2026` : s;
+}
+if (typeof window !== "undefined" && !pdfjsLib.GlobalWorkerOptions.workerSrc) {
+  pdfjsLib.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjsLib.version}/build/pdf.worker.min.mjs`;
+}
+var EVENT_NAME = "react-os-shell:pdf-preview";
+var pendingData = null;
+function setPdfPreview(data) {
+  pendingData = data;
+  if (typeof window !== "undefined") {
+    window.dispatchEvent(new CustomEvent(EVENT_NAME, { detail: data }));
+  }
+}
+function Preview() {
+  const [data, setData] = useState(() => {
+    const d = pendingData;
+    pendingData = null;
+    return d;
+  });
+  useEffect(() => {
+    const handler = (e) => {
+      const next = e.detail;
+      setData((prev) => {
+        if (prev?.url && prev.url !== next.url && prev.url.startsWith("blob:")) {
+          URL.revokeObjectURL(prev.url);
+        }
+        return next;
+      });
+    };
+    window.addEventListener(EVENT_NAME, handler);
+    return () => window.removeEventListener(EVENT_NAME, handler);
+  }, []);
+  useEffect(() => () => {
+    if (data?.url?.startsWith("blob:")) URL.revokeObjectURL(data.url);
+  }, []);
+  const titleName = data?.filename ? truncateForTitle(data.filename) : "Untitled";
+  const fileRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const handlePick = () => fileRef.current?.click();
+  const ingestFile = (file) => {
+    const url = URL.createObjectURL(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) {
+      URL.revokeObjectURL(url);
+      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;
+    }
+    setPdfPreview({ 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();
+    setIsDragging(false);
+    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 })
+    ] })
+  ] });
+  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(PdfPanel, { 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",
+      onDragOver: (e) => {
+        e.preventDefault();
+        if (!isDragging) setIsDragging(true);
+      },
+      onDragLeave: (e) => {
+        if (e.currentTarget === e.target) setIsDragging(false);
+      },
+      onDrop: handleDrop,
+      children: [
+        /* @__PURE__ */ jsx(WindowTitle, { title: `${titleName} - Preview` }),
+        Toolbar,
+        /* @__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%); } }` })
+  ] });
+}
+function PdfPanel({ url, filename, onDownload, onEmail }) {
+  const canvasRef = useRef(null);
+  const containerRef = useRef(null);
+  const [pdf, setPdf] = useState(null);
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(0);
+  const [scale, setScale] = useState(1.5);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    pdfjsLib.getDocument(url).promise.then((doc) => {
+      if (cancelled) return;
+      setPdf(doc);
+      setTotalPages(doc.numPages);
+      setLoading(false);
+    }).catch(() => {
+      if (!cancelled) {
+        toast_default.error("Failed to load PDF");
+        setLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [url]);
+  useEffect(() => {
+    if (!pdf || !containerRef.current) return;
+    pdf.getPage(1).then((p) => {
+      const containerW = containerRef.current?.clientWidth || 800;
+      const viewport = p.getViewport({ scale: 1 });
+      const fitScale = (containerW - 40) / viewport.width;
+      setScale(Math.min(Math.max(fitScale, 0.5), 3));
+    });
+  }, [pdf]);
+  useEffect(() => {
+    if (!pdf || !canvasRef.current) return;
+    let cancelled = false;
+    pdf.getPage(page).then((p) => {
+      if (cancelled || !canvasRef.current) return;
+      const viewport = p.getViewport({ scale });
+      const canvas = canvasRef.current;
+      canvas.width = viewport.width;
+      canvas.height = viewport.height;
+      const ctx = canvas.getContext("2d");
+      p.render({ canvas, canvasContext: ctx, viewport }).promise.catch(() => {
+      });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [pdf, page, scale]);
+  const handlePrint = () => {
+    if (!pdf) return;
+    const win = window.open("", "_blank");
+    if (!win) {
+      toast_default.error("Allow popups to print");
+      return;
+    }
+    const promises = [];
+    for (let i = 1; i <= totalPages; i++) {
+      promises.push(pdf.getPage(i).then((p) => {
+        const vp = p.getViewport({ scale: 2 });
+        const c = document.createElement("canvas");
+        c.width = vp.width;
+        c.height = vp.height;
+        return p.render({ canvas: c, canvasContext: c.getContext("2d"), viewport: vp }).promise.then(() => c.toDataURL());
+      }));
+    }
+    Promise.all(promises).then((images) => {
+      win.document.write(`<html><head><title>${filename}</title><style>@media print{body{margin:0}img{width:100%;page-break-after:always}}</style></head><body>`);
+      win.document.write(images.map((src) => `<img src="${src}"/>`).join(""));
+      win.document.write("</body></html>");
+      win.document.close();
+      setTimeout(() => {
+        win.print();
+        win.close();
+      }, 300);
+    });
+  };
+  const handleDefaultDownload = () => {
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+  };
+  const fitWidth = () => {
+    if (!pdf || !containerRef.current) return;
+    pdf.getPage(page).then((p) => {
+      const containerW = containerRef.current?.clientWidth || 800;
+      const viewport = p.getViewport({ scale: 1 });
+      setScale(Math.min(Math.max((containerW - 40) / viewport.width, 0.5), 3));
+    });
+  };
+  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("div", { className: "flex items-center justify-between px-3 py-1.5 border-b border-gray-200 bg-gray-50 shrink-0 text-xs", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx("button", { onClick: () => setPage((p) => Math.max(1, p - 1)), disabled: page <= 1, className: "px-2 py-1 rounded hover:bg-gray-200 disabled:opacity-30", children: /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5L8.25 12l7.5-7.5" }) }) }),
+        /* @__PURE__ */ jsxs("span", { className: "text-gray-600 font-medium tabular-nums", children: [
+          page,
+          " / ",
+          totalPages
+        ] }),
+        /* @__PURE__ */ jsx("button", { onClick: () => setPage((p) => Math.min(totalPages, p + 1)), disabled: page >= totalPages, className: "px-2 py-1 rounded hover:bg-gray-200 disabled:opacity-30", children: /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx("button", { onClick: () => setScale((s) => Math.max(0.3, Math.round((s - 0.25) * 100) / 100)), className: btn, children: "\u2212" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-gray-500 w-12 text-center tabular-nums", children: [
+          Math.round(scale * 100),
+          "%"
+        ] }),
+        /* @__PURE__ */ jsx("button", { onClick: () => setScale((s) => Math.min(4, Math.round((s + 0.25) * 100) / 100)), className: btn, children: "+" }),
+        /* @__PURE__ */ jsx("button", { onClick: fitWidth, className: btn, children: "Fit" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxs("button", { onClick: handlePrint, 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: "M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0110.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0l.229 2.523a1.125 1.125 0 01-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0021 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 00-1.913-.247M6.34 18H5.25A2.25 2.25 0 013 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 011.913-.247m10.5 0a48.536 48.536 0 00-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5zm-3 0h.008v.008H15V10.5z" }) }),
+          "Print"
+        ] }),
+        /* @__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__ */ jsx("div", { ref: containerRef, className: "flex-1 overflow-auto bg-gray-100 flex justify-center p-4", children: loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-20 text-gray-400 text-sm", children: "Loading PDF..." }) : /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "shadow-lg rounded" }) })
+  ] });
+}
+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"
+];
+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);
+  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;
+        let three = null;
+        try {
+          three = await import(
+            /* @vite-ignore */
+            'three'
+          );
+        } catch {
+        }
+        const ClearColor = three?.Color ?? null;
+        const viewerOpts = { autoResize: true };
+        if (ClearColor) viewerOpts.clearColor = new ClearColor(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 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 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", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-1.5 border-b border-gray-200 bg-gray-50 shrink-0 text-xs", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-600", children: "DXF" }),
+        /* @__PURE__ */ jsx("span", { className: "text-gray-400 truncate max-w-xs", children: filename })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 relative", 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__ */ 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" })
+      ] }),
+      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 })
+    ] })
+  ] });
+}
+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 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(true);
+  const [showSettings, setShowSettings] = useState(true);
+  const [sectionEnabled, setSectionEnabled] = useState(false);
+  const [sectionAxis, setSectionAxis] = useState("z");
+  const [sectionFlip, setSectionFlip] = useState(false);
+  const [sectionPosition, setSectionPosition] = useState(0.5);
+  const [sectionCapColor, setSectionCapColor] = useState("#9aa6b3");
+  const sectionRef = useRef(null);
+  useEffect(() => {
+    let cancelled = false;
+    let viewer = 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);
+        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]);
+      } catch (e) {
+        if (!cancelled) {
+          setError(e?.message || "Failed to load 3D model.");
+          setLoading(false);
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+      try {
+        viewer?.Destroy?.();
+      } catch {
+      }
+      viewerRef.current = null;
+    };
+  }, [url, filename]);
+  useEffect(() => {
+    const v = viewerRef.current;
+    if (!v?.viewer) return;
+    try {
+      const visit = (mesh) => {
+        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));
+      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;
+    let cancelled = false;
+    let teardown = null;
+    (async () => {
+      const THREE = await import('three');
+      if (cancelled) 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.geometry?.dispose?.();
+          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 plane = new THREE.Plane(new THREE.Vector3(0, 0, -1), 0);
+      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;
+      };
+      v.viewer.mainModel?.EnumerateMeshes?.((mesh) => {
+        const mat = mesh.material;
+        if (Array.isArray(mat)) for (const m of mat) applyToMaterial(m);
+        else applyToMaterial(mat);
+        const makeStencil = (side, op) => {
+          const m = new THREE.MeshBasicMaterial({
+            depthWrite: false,
+            depthTest: false,
+            colorWrite: false,
+            stencilWrite: true,
+            stencilFunc: THREE.AlwaysStencilFunc,
+            stencilFail: op,
+            stencilZFail: op,
+            stencilZPass: op,
+            side,
+            clippingPlanes: [plane]
+          });
+          const helper = new THREE.Mesh(mesh.geometry, m);
+          helper.matrixAutoUpdate = false;
+          helper.renderOrder = 1;
+          helper.userData.__sectionHelper = true;
+          mesh.add(helper);
+          helpers.push(helper);
+        };
+        makeStencil(THREE.BackSide, THREE.IncrementWrapStencilOp);
+        makeStencil(THREE.FrontSide, THREE.DecrementWrapStencilOp);
+      });
+      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) * 2 || 1;
+      const capGeom = new THREE.PlaneGeometry(capSize, capSize);
+      const capMat = new THREE.MeshPhongMaterial({
+        color: 10135219,
+        side: THREE.DoubleSide,
+        stencilWrite: true,
+        stencilRef: 0,
+        stencilFunc: THREE.NotEqualStencilFunc,
+        stencilFail: THREE.ReplaceStencilOp,
+        stencilZFail: THREE.ReplaceStencilOp,
+        stencilZPass: THREE.ReplaceStencilOp
+      });
+      const capMesh = new THREE.Mesh(capGeom, capMat);
+      capMesh.renderOrder = 2;
+      scene.add(capMesh);
+      renderer.localClippingEnabled = true;
+      sectionRef.current = { plane, capMesh, helpers, materialState, bbox };
+      v.viewer.Render?.();
+      teardown = () => {
+      };
+    })();
+    return () => {
+      cancelled = true;
+      if (teardown) teardown();
+    };
+  }, [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 value = min + (max - min) * sectionPosition;
+      const dir = sectionFlip ? 1 : -1;
+      const nx = sectionAxis === "x" ? dir : 0;
+      const ny = sectionAxis === "y" ? dir : 0;
+      const nz = sectionAxis === "z" ? dir : 0;
+      s.plane.normal.set(nx, ny, nz);
+      s.plane.constant = -dir * value;
+      const cx = (bbox.min.x + bbox.max.x) / 2;
+      const cy = (bbox.min.y + bbox.max.y) / 2;
+      const cz = (bbox.min.z + bbox.max.z) / 2;
+      const center = { x: cx, y: cy, z: cz };
+      const dist = nx * center.x + ny * center.y + nz * center.z + s.plane.constant;
+      const px = center.x - nx * dist;
+      const py = center.y - ny * dist;
+      const pz = center.z - nz * dist;
+      s.capMesh.position.set(px, py, pz);
+      s.capMesh.lookAt(px + nx, py + ny, pz + nz);
+      try {
+        const m = /^#?([0-9a-f]{6})$/i.exec(sectionCapColor);
+        const n = m ? parseInt(m[1], 16) : 10135219;
+        s.capMesh.material.color.setHex(n);
+      } catch {
+      }
+      v.viewer.Render?.();
+    } catch (err) {
+      console.warn("[Preview] section update failed", err);
+    }
+  }, [sectionEnabled, sectionAxis, sectionFlip, sectionPosition, sectionCapColor]);
+  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?.GetBoundingSphere?.(() => true);
+      if (sphere) v.viewer.FitSphereToWindow(sphere, true);
+      v?.viewer?.Render?.();
+    } catch {
+    }
+  };
+  const setCameraPreset = (preset) => {
+    const OV = ovRef.current;
+    const v = viewerRef.current;
+    if (!OV || !v?.viewer) return;
+    try {
+      const sphere = v.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("z");
+    setSectionFlip(false);
+    setSectionPosition(0.5);
+    setSectionCapColor("#9aa6b3");
+  };
+  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-slate-700/50 cursor-default text-[12px] text-slate-200",
+          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-slate-400 hover:text-slate-100",
+                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-slate-500" }) }),
+            /* @__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-slate-500 hover:text-slate-100 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-slate-400 hover:text-slate-100",
+                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-slate-300 hover:bg-slate-700 hover:text-white transition-colors";
+  const tBtnActive = "h-8 w-8 shrink-0 flex items-center justify-center rounded bg-slate-700 text-white";
+  const tBtnSep = "h-5 w-px bg-slate-700 mx-1";
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full bg-slate-900", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 px-2 py-1.5 bg-slate-800 border-b border-slate-700 shrink-0", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold tracking-wide text-slate-300 px-2 truncate max-w-xs", title: filename, children: filename }),
+      /* @__PURE__ */ jsx("div", { className: tBtnSep }),
+      /* @__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("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("div", { className: "flex-1" }),
+      /* @__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__ */ jsxs("div", { className: "flex-1 flex min-h-0", children: [
+      showMeshes && /* @__PURE__ */ jsxs("div", { className: "w-60 shrink-0 bg-slate-800 border-r border-slate-700 flex flex-col", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-[11px] font-semibold uppercase tracking-wide text-slate-400 border-b border-slate-700", children: "Meshes" }),
+        /* @__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-slate-500 italic", children: loading ? "Reading model\u2026" : "No structure available" }) }),
+        tree && /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 text-[10px] text-slate-500 border-t border-slate-700", children: hidden.size === 0 ? "All visible" : `${hidden.size} hidden` })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-w-0", style: { background: bgColor }, children: [
+        /* @__PURE__ */ jsx("div", { ref: containerRef, style: { width: "100%", height: "100%" } }),
+        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: "w-60 shrink-0 bg-slate-800 border-l border-slate-700 flex flex-col", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-[11px] font-semibold uppercase tracking-wide text-slate-400 border-b border-slate-700", children: "Model Display" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-3 py-3 space-y-3 text-[12px] text-slate-200", 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-slate-600 bg-transparent" })
+          ] }),
+          /* @__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),
+                className: `relative h-5 w-9 rounded-full transition-colors ${showEdges ? "bg-blue-500" : "bg-slate-600"}`,
+                children: /* @__PURE__ */ jsx("span", { className: `absolute top-0.5 h-4 w-4 rounded-full bg-white transition-transform ${showEdges ? "translate-x-4" : "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-slate-600 bg-transparent 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-slate-400 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-slate-700 -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),
+                  className: `relative h-5 w-9 rounded-full transition-colors ${sectionEnabled ? "bg-blue-500" : "bg-slate-600"}`,
+                  children: /* @__PURE__ */ jsx("span", { className: `absolute top-0.5 h-4 w-4 rounded-full bg-white transition-transform ${sectionEnabled ? "translate-x-4" : "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: "Axis" }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => setSectionFlip((f) => !f),
+                      className: "text-[10px] text-slate-300 hover:text-white px-1.5 py-0.5 rounded bg-slate-700 hover:bg-slate-600",
+                      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-slate-700 text-slate-300 hover:bg-slate-600"}`,
+                    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-slate-400 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__ */ jsxs("label", { className: "flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsx("span", { children: "Cap Color" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "color",
+                    value: sectionCapColor,
+                    onChange: (e) => setSectionCapColor(e.target.value),
+                    className: "h-6 w-10 rounded border border-slate-600 bg-transparent"
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "px-3 py-2 border-t border-slate-700", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleResetDisplay,
+            className: "w-full text-[11px] text-slate-300 bg-slate-700 hover:bg-slate-600 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 handleDefaultDownload = () => {
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+  };
+  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("div", { className: "flex items-center justify-between px-3 py-1.5 border-b border-gray-200 bg-gray-50 shrink-0 text-xs", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-600", children: "Image" }),
+        /* @__PURE__ */ jsx("span", { className: "text-gray-400 truncate max-w-xs", children: filename })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", 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__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__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__ */ 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, setPdfPreview };
+//# sourceMappingURL=chunk-RGYSM6P5.js.map
+//# sourceMappingURL=chunk-RGYSM6P5.js.map