react-os-shell 0.1.32 → 0.1.35

package/dist/{chunk-CZKAKVP6.js → chunk-MONP6MMC.js}

@@ -1,5 +1,5 @@
 import { toast_default } from './chunk-WIJ45SYD.js';
-import { WindowTitle } from './chunk-AKZTZLKP.js';
+import { WindowTitle, getActiveModalId } from './chunk-44AH2OXU.js';
 import { useState, useEffect, useRef } from 'react';
 import * as pdfjsLib from 'pdfjs-dist';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -43,19 +43,49 @@ function Preview() {
   }, []);
   const titleName = data?.filename ? truncateForTitle(data.filename) : "Untitled";
   const fileRef = useRef(null);
+  const rootRef = useRef(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 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 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];
@@ -64,7 +94,7 @@ function Preview() {
   };
   const handleDrop = (e) => {
     e.preventDefault();
-    setIsDragging(false);
+    resetDrag();
     const file = e.dataTransfer.files?.[0];
     if (file) ingestFile(file);
   };
@@ -147,14 +177,30 @@ function Preview() {
     "div",
     {
       className: "relative flex flex-col h-full",
-      onDragOver: (e) => {
+      ref: rootRef,
+      onDragEnter: (e) => {
+        if (!e.dataTransfer?.types?.includes?.("Files")) return;
+        if (!isActiveWindow(e.currentTarget)) return;
         e.preventDefault();
+        dragDepthRef.current++;
         if (!isDragging) setIsDragging(true);
       },
-      onDragLeave: (e) => {
-        if (e.currentTarget === e.target) setIsDragging(false);
+      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);
       },
-      onDrop: handleDrop,
       children: [
         /* @__PURE__ */ jsx(WindowTitle, { title: `${titleName} - Preview` }),
         Toolbar,
@@ -604,7 +650,6 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
   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;
@@ -729,114 +774,47 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
   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;
+    const renderer = v.viewer.renderer;
+    if (!renderer) 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;
-      };
-      const targets = [];
-      v.viewer.mainModel?.EnumerateMeshes?.((mesh) => {
-        if (mesh.userData?.__sectionHelper) return;
-        targets.push(mesh);
-      });
-      for (const mesh of targets) {
-        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;
-      capMesh.userData.__sectionHelper = true;
-      scene.add(capMesh);
-      renderer.localClippingEnabled = true;
-      sectionRef.current = { plane, capMesh, helpers, materialState, bbox };
+      sectionRef.current = null;
+    }
+    if (!sectionEnabled) {
+      renderer.localClippingEnabled = false;
       v.viewer.Render?.();
-      teardown = () => {
-      };
-    })();
-    return () => {
-      cancelled = true;
-      if (teardown) teardown();
+      return;
+    }
+    const bbox = v.viewer.GetBoundingBox?.(() => true);
+    if (!bbox) return;
+    const plane = { normal: { x: 0, y: 0, z: -1 }, constant: 0 };
+    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) => {
+      if (mesh.userData?.__sectionHelper) return;
+      const mat = mesh.material;
+      if (Array.isArray(mat)) for (const m of mat) applyToMaterial(m);
+      else applyToMaterial(mat);
+    });
+    v.viewer.mainModel?.EnumerateEdges?.((edge) => {
+      const mat = edge.material;
+      if (Array.isArray(mat)) for (const m of mat) applyToMaterial(m);
+      else applyToMaterial(mat);
+    });
+    renderer.localClippingEnabled = true;
+    sectionRef.current = { plane, capMesh: null, helpers: [], materialState, bbox };
+    v.viewer.Render?.();
   }, [sectionEnabled, loading, tree]);
   useEffect(() => {
     const v = viewerRef.current;
@@ -849,32 +827,15 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
       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.normal.x = sectionAxis === "x" ? dir : 0;
+      s.plane.normal.y = sectionAxis === "y" ? dir : 0;
+      s.plane.normal.z = sectionAxis === "z" ? dir : 0;
       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]);
+  }, [sectionEnabled, sectionAxis, sectionFlip, sectionPosition]);
   useEffect(() => {
     if (!showHint || loading) return;
     const t = setTimeout(() => setShowHint(false), 5e3);
@@ -902,7 +863,7 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
   const handleFit = () => {
     try {
       const v = viewerRef.current;
-      const sphere = v?.GetBoundingSphere?.(() => true);
+      const sphere = v?.viewer?.GetBoundingSphere?.(() => true);
       if (sphere) v.viewer.FitSphereToWindow(sphere, true);
       v?.viewer?.Render?.();
     } catch {
@@ -913,7 +874,7 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
     const v = viewerRef.current;
     if (!OV || !v?.viewer) return;
     try {
-      const sphere = v.GetBoundingSphere?.(() => true);
+      const sphere = v.viewer.GetBoundingSphere?.(() => true);
       if (!sphere) return;
       const c = sphere.center;
       const r = sphere.radius || 1;
@@ -971,7 +932,6 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
     setSectionAxis("z");
     setSectionFlip(false);
     setSectionPosition(0.5);
-    setSectionCapColor("#9aa6b3");
   };
   const handleDefaultDownload = () => {
     const a = document.createElement("a");
@@ -988,24 +948,24 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
       /* @__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",
+          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-slate-400 hover:text-slate-100",
+                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-slate-500" }) }),
+            ) : /* @__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-slate-500 hover:text-slate-100 opacity-0 group-hover:opacity-100 transition-opacity",
+                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" }) })
               }
@@ -1014,7 +974,7 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
               "button",
               {
                 onClick: () => toggleNodeVisible(node),
-                className: "h-4 w-4 shrink-0 text-slate-400 hover:text-slate-100",
+                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" }),
@@ -1028,12 +988,12 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
       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 }),
+  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 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("div", { className: "flex items-center gap-1 px-2 py-1.5 bg-gray-50 border-b border-gray-200 shrink-0", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold tracking-wide text-gray-700 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 }),
@@ -1057,10 +1017,10 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
       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` })
+      showMeshes && /* @__PURE__ */ jsxs("div", { className: "w-60 shrink-0 bg-gray-50 border-r border-gray-200 flex flex-col", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-[11px] font-semibold uppercase tracking-wide text-gray-500 border-b border-gray-200", 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-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` })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-w-0", style: { background: bgColor }, children: [
         /* @__PURE__ */ jsx("div", { ref: containerRef, style: { width: "100%", height: "100%" } }),
@@ -1081,12 +1041,12 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
         ] }),
         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: [
+      showSettings && /* @__PURE__ */ jsxs("div", { className: "w-60 shrink-0 bg-gray-50 border-l border-gray-200 flex flex-col", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-[11px] font-semibold uppercase tracking-wide text-gray-500 border-b border-gray-200", children: "Model Display" }),
+        /* @__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-slate-600 bg-transparent" })
+            /* @__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" }),
@@ -1094,7 +1054,7 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
               "button",
               {
                 onClick: () => setShowEdges((s) => !s),
-                className: `relative h-5 w-9 rounded-full transition-colors ${showEdges ? "bg-blue-500" : "bg-slate-600"}`,
+                className: `relative h-5 w-9 rounded-full transition-colors ${showEdges ? "bg-blue-500" : "bg-gray-300"}`,
                 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"}` })
               }
             )
@@ -1108,14 +1068,14 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
                 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"
+                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-slate-400 tabular-nums", children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-gray-500 tabular-nums", children: [
                 edgeThreshold,
                 "\xB0"
               ] })
@@ -1133,14 +1093,14 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "border-t border-slate-700 -mx-3 px-3 pt-3 mt-1", children: [
+          /* @__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),
-                  className: `relative h-5 w-9 rounded-full transition-colors ${sectionEnabled ? "bg-blue-500" : "bg-slate-600"}`,
+                  className: `relative h-5 w-9 rounded-full transition-colors ${sectionEnabled ? "bg-blue-500" : "bg-gray-300"}`,
                   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"}` })
                 }
               )
@@ -1153,7 +1113,7 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
                     "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",
+                      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"
                     }
@@ -1163,7 +1123,7 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
                   "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"}`,
+                    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
@@ -1172,7 +1132,7 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
               /* @__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: [
+                  /* @__PURE__ */ jsxs("span", { className: "text-gray-500 tabular-nums", children: [
                     Math.round(sectionPosition * 100),
                     "%"
                   ] })
@@ -1189,27 +1149,15 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
                     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(
+        /* @__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-slate-300 bg-slate-700 hover:bg-slate-600 rounded py-1.5 transition-colors",
+            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"
           }
         ) })
@@ -1267,5 +1215,5 @@ function ImagePanel({ url, filename, onDownload, onEmail }) {
 }
 
 export { Preview, setPdfPreview };
-//# sourceMappingURL=chunk-CZKAKVP6.js.map
-//# sourceMappingURL=chunk-CZKAKVP6.js.map
+//# sourceMappingURL=chunk-MONP6MMC.js.map
+//# sourceMappingURL=chunk-MONP6MMC.js.map