@floless/app 0.35.0 → 0.36.0

package/dist/web/steel-3d-view.js

@@ -3,8 +3,13 @@
  *
  * Three.js lives ONLY here (the rest of the editor is import-free). It renders the SAME scene the
  * IFC/Tekla bake uses (fetched from /api/contract/:id/scene → contractToScene), so the editable 3D
- * matches what bakes out. Phase B = read-only: orbit + shaded model + selection highlight. Phase C
- * adds drag + snapping (it will pull the pure math from ./steel-3d-core.js).
+ * matches what bakes out. This mode is a SUPERSET of AWARE's read-only viewer-3d: same navigation
+ * (RIGHT-drag orbit, MIDDLE-drag pan, wheel zoom — LEFT is reserved for editing/select), same chrome
+ * (Persp/Ortho, Solid/Wire/X-ray, Fit, a per-profile legend with hide/isolate, a ViewCube, a hover
+ * readout) — PLUS editing: drag a member to move it (Alt = elevation), and Trim/Extend + Split. The
+ * member's START end shows a YELLOW dot, the END a MAGENTA dot — in 3D these mark direction and show
+ * the member is grabbable (the BODY is the grab handle; single-end changes go through Trim/Extend or
+ * Split, since free endpoint-drag is depth-ambiguous). In 2D the same dots ARE the draggable handles.
  *
  * Exposes `window.Steel3DView` so the editor's classic script can drive it. The scene is Z-up
  * (contractToScene emits meta.up='z'), so the camera/grid are set up Z-up.
@@ -13,8 +18,21 @@ import * as THREE from 'three';
 import { OrbitControls } from 'three/addons/OrbitControls.js';
 import { snapCandidates, snapPoint, planPointToWp, memberGeometry, elevationLevels } from './steel-3d-core.js';
 
-let renderer, scene, camera, controls, root, api, canvasEl, ro, rafId, grid, raycaster, downXY, lastPick = '(none)';
+let renderer, scene, perspCam, orthoCam, camera, controls, root, api, canvasEl, ro, rafId, grid, raycaster, downXY, lastPick = '(none)';
 let pending = null, dragging = null, marker = null, readout = null; // pending = member gesture; readout = drag dimension overlay
+let boxSel = null, rubber = null;          // LEFT-drag-on-empty rubber-band multi-select
+let hoverId = null, hoverChip = null, hoverRAF = 0, lastHoverXY = null; // hover readout + cursor
+let epGroup = null;                         // yellow/magenta endpoint markers (start/end direction dots)
+let epGeom = null, epMatStart = null, epMatEnd = null; // shared across all endpoint dots (no per-rebuild churn)
+let epRing = null, epPreview = null;        // white ring on the active end node + a rubber line while dragging it
+let hoverEp = null, dragEp = null;          // {id,end} of the hovered / dragged end node
+let refGroup = null; let refLineOn = false; // optional reference (work) lines between each member's end points
+const EP_PX = 4;                            // end-dot radius in screen px (screen-constant via pxToWorld)
+let sceneBox = new THREE.Box3();            // current model bounds (Fit / ViewCube)
+let displayMode = 'solid';                  // solid | wire | xray
+const groupHidden = new Set();              // profile keys hidden via the legend
+let soloGroup = null;                       // profile key isolated via the legend (dbl-click)
+let cube = null;                            // ViewCube { renderer, scene, cam, mesh, faces }
 const DRAG_TOL_PX = 4;   // movement past this = a drag (not a click)
 const SNAP_TOL_PX = 10;  // snap an endpoint to a target within this screen distance
 const FT_MM = 304.8;     // mm per foot (the dimension readout shows feet, matching the editor)
@@ -23,6 +41,8 @@ const meshById = new Map();           // member id -> THREE.Mesh
 const groupColor = new Map();         // group key -> THREE.Color
 const baseMat = new Map();            // group key -> MeshStandardMaterial (shared per profile)
 const SELECT_EMISSIVE = 0x3b82f6;     // --brand: selected members glow blue
+const EP_START = 0xfacc15;            // start endpoint (end 1) — yellow
+const EP_END = 0xf472b6;             // end endpoint (end 2) — magenta
 
 function init(canvas, theApi) {
   if (renderer) return;               // once
@@ -31,14 +51,34 @@ function init(canvas, theApi) {
   renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
   scene = new THREE.Scene();
   scene.background = new THREE.Color(0x020817); // match the app --bg (the mode change reads from the geometry, not a tint)
-  camera = new THREE.PerspectiveCamera(50, 1, 1, 50_000_000);
-  camera.up.set(0, 0, 1);             // Z-up to match the scene
+  perspCam = new THREE.PerspectiveCamera(50, 1, 1, 50_000_000);
+  perspCam.up.set(0, 0, 1);           // Z-up to match the scene
+  orthoCam = new THREE.OrthographicCamera(-1, 1, 1, -1, 1, 50_000_000);
+  orthoCam.up.set(0, 0, 1);
+  camera = perspCam;
   controls = new OrbitControls(camera, canvas);
   controls.enableDamping = true;
+  // CAD-style mouse map (matches AWARE viewer-3d): LEFT is OURS (pick / drag / box-select — NOT
+  // orbit), RIGHT-drag orbits, MIDDLE-drag pans, wheel zooms. This removes the old ambiguity where
+  // a left-drag could mean either "orbit" or "move a member" — the source of "how do I drag in 3D?".
+  controls.mouseButtons = { LEFT: null, MIDDLE: THREE.MOUSE.PAN, RIGHT: THREE.MOUSE.ROTATE };
+  controls.zoomToCursor = true;       // Tekla-style: the mouse position is the centre of zooming
   scene.add(new THREE.AmbientLight(0xffffff, 0.65));
   const key = new THREE.DirectionalLight(0xffffff, 0.85); key.position.set(0.4, -1, 1.2); scene.add(key);
   const fill = new THREE.DirectionalLight(0xffffff, 0.25); fill.position.set(-1, 0.6, 0.4); scene.add(fill);
   root = new THREE.Group(); scene.add(root);
+  epGroup = new THREE.Group(); scene.add(epGroup);
+  // ONE geometry + two materials shared by every endpoint dot (rebuilt often on hover/selection —
+  // sharing avoids allocating/leaking a geometry+material per dot each rebuild).
+  epGeom = new THREE.SphereGeometry(1, 16, 12);
+  epMatStart = new THREE.MeshBasicMaterial({ color: EP_START }); epMatStart.depthTest = false;
+  epMatEnd = new THREE.MeshBasicMaterial({ color: EP_END }); epMatEnd.depthTest = false;
+  // white ring drawn on the hovered/dragged end node so it's visibly "selected" (billboarded each frame)
+  epRing = new THREE.Mesh(new THREE.RingGeometry(0.78, 1, 28), new THREE.MeshBasicMaterial({ color: 0xf8fafc, side: THREE.DoubleSide }));
+  epRing.material.depthTest = false; epRing.renderOrder = 1000; epRing.visible = false; scene.add(epRing);
+  // rubber preview line from the fixed end to the dragged end node
+  epPreview = new THREE.Line(new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(), new THREE.Vector3()]), new THREE.LineBasicMaterial({ color: 0x3b82f6 }));
+  epPreview.material.depthTest = false; epPreview.renderOrder = 997; epPreview.visible = false; scene.add(epPreview);
   raycaster = new THREE.Raycaster();
   // a --brand snap marker (one sphere at the winning snap target; the readout carries the type)
   marker = new THREE.Mesh(new THREE.SphereGeometry(1, 16, 12), new THREE.MeshBasicMaterial({ color: 0x3b82f6 }));
@@ -51,13 +91,25 @@ function init(canvas, theApi) {
   readout._type = document.createElement('span'); readout._type.style.color = 'var(--mut,#94a3b8)';
   readout.append(readout._dist, readout._type);
   document.body.appendChild(readout);
+  // persistent hover/selection status chip, bottom-centre of the canvas (mirrors the viewer's readout)
+  hoverChip = document.createElement('div');
+  hoverChip.style.cssText = 'position:fixed;display:none;pointer-events:none;z-index:55;background:var(--panel,#0f172a);color:var(--mut,#94a3b8);border:1px solid var(--line,#334155);border-radius:6px;padding:5px 12px;font:12px system-ui;white-space:nowrap;max-width:60vw;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 8px rgba(0,0,0,.45)';
+  document.body.appendChild(hoverChip);
+  // rubber-band overlay for LEFT-drag box-select on empty space
+  rubber = document.createElement('div');
+  rubber.style.cssText = 'position:fixed;display:none;pointer-events:none;z-index:58;border:1px solid var(--brand,#3b82f6);background:rgba(59,130,246,.12)';
+  document.body.appendChild(rubber);
   // Pointer gestures: down on a member → grab it (suppress orbit); move → drag with snapping; up →
-  // commit the move, or (no move) select. Down on empty space → OrbitControls orbits/pans as usual.
-  // Capture phase on pointerdown so we can stop orbit BEFORE OrbitControls sees a member grab.
+  // commit the move, or (no move) select. Down on empty space → rubber-band box-select. RIGHT/MIDDLE
+  // fall through to OrbitControls (orbit/pan). Capture phase so we own the LEFT button first.
   canvas.addEventListener('pointerdown', onDown, true);
   window.addEventListener('pointermove', onMove); // window so a drag keeps tracking off-canvas
   window.addEventListener('pointerup', onUp);
+  canvas.addEventListener('pointermove', onHoverMove); // canvas-only: cursor + hover readout when idle
+  canvas.addEventListener('dblclick', onDblClick);     // Tekla "set view point": dbl-click sets the orbit/zoom pivot
+  window.addEventListener('keydown', onKey);           // Tekla keyboard nav: arrows pan, Ctrl/Shift+arrows rotate
   ro = new ResizeObserver(resize); ro.observe(canvas.parentElement || canvas);
+  initCube();
   // Resize once more on the next frame: the stage may still be laying out when init() runs (the
   // designer flagged a first-render size mismatch as the common rough edge here).
   requestAnimationFrame(resize);
@@ -70,12 +122,16 @@ function resize() {
   const el = canvasEl.parentElement || canvasEl;
   const w = el.clientWidth || 1, h = el.clientHeight || 1;
   renderer.setSize(w, h, false);
-  camera.aspect = w / h; camera.updateProjectionMatrix();
+  perspCam.aspect = w / h; perspCam.updateProjectionMatrix();
+  if (camera === orthoCam) reframeOrtho();
 }
 
 function loop() {
   rafId = requestAnimationFrame(loop);
-  controls.update(); renderer.render(scene, camera);
+  controls.update();
+  sizeEndpoints();
+  renderer.render(scene, camera);
+  if (cube) { syncCube(); cube.renderer.render(cube.scene, cube.cam); }
 }
 
 const V = (x, y, z) => new THREE.Vector3(x, y, z);
@@ -167,19 +223,24 @@ function buildFromScene(sc) {
   clearRoot();
   for (const mat of baseMat.values()) mat.dispose(); // shared per-profile materials from the prior build
   groupColor.clear(); baseMat.clear();
-  for (const g of sc.groups || []) groupColor.set(g.key, new THREE.Color(g.color || '#94a3b8'));
+  sceneGroups = (sc.groups || []).map((g) => ({ key: g.key, label: g.label, color: g.color || '#94a3b8' }));
+  for (const g of sceneGroups) groupColor.set(g.key, new THREE.Color(g.color));
   const box = new THREE.Box3();
   for (const el of sc.elements || []) {
     const mesh = new THREE.Mesh(undefined, materialFor(el.group));
     placeMember(mesh, el.from, el.to, el); // real cross-section (I / channel / angle / tube / box) from the profile
-    mesh.userData.id = el.id; mesh.userData.group = el.group; // group needed to restore the profile material on deselect
+    mesh.userData.id = el.id; mesh.userData.group = el.group; mesh.userData.profile = el.meta && el.meta.profile;
     root.add(mesh); meshById.set(el.id, mesh);
     box.expandByObject(mesh);
   }
+  sceneBox = box.clone();
   buildGrid(box);
+  buildRefLines();
+  applyGroupVisibility(); applyDisplayMode();
   built = true;
-  if (fitPending || !box.isEmpty()) { fitCamera(box); fitPending = false; }
+  if (fitPending) { fitCamera(box); fitPending = false; } // fit only on entering 3D (rebuild(true)) — NOT on every edit
 }
+let sceneGroups = [];
 
 // A muted reference grid on the ground plane (XY, since Z-up), sized to the model. --line at low
 // opacity — no white grid (per the baseline). Rebuilt with the model so it always fits.
@@ -196,37 +257,171 @@ function buildGrid(box) {
   scene.add(grid);
 }
 
-function fitCamera(box) {
+// Optional reference lines: the work-line (between the two end dots) of every member — the centreline
+// downstream tools (Tekla/Revit/IFC) place steel against. Toggled from the toolbar; rebuilt with the model.
+function buildRefLines() {
+  if (refGroup) { scene.remove(refGroup); refGroup.geometry.dispose(); refGroup.material.dispose(); refGroup = null; }
+  if (!refLineOn || !api) return;
+  const pts = [];
+  for (const m of members()) {
+    if (!m || !Array.isArray(m.wp) || m.wp.length < 2) continue;
+    const g = memberGeometry(m, api.ptPerFt(), api.defaultTosMm());
+    pts.push(new THREE.Vector3(g.line[0][0], g.line[0][1], g.line[0][2]), new THREE.Vector3(g.line[1][0], g.line[1][1], g.line[1][2]));
+  }
+  if (!pts.length) return;
+  refGroup = new THREE.LineSegments(new THREE.BufferGeometry().setFromPoints(pts), new THREE.LineBasicMaterial({ color: 0x93c5fd }));
+  refGroup.renderOrder = 996; scene.add(refGroup);
+}
+function setRefLine(on) { refLineOn = !!on; buildRefLines(); }
+
+// The ortho frustum half-height in world units (set by a fit to the box, or by a projection toggle
+// to match the current perspective view). reframeOrtho applies it aspect-preserving on resize, so the
+// model never ends up under-framed/"cut-off" in ortho and the user's zoom (orthoCam.zoom) is kept.
+let orthoBaseH = 0;
+function reframeOrtho() {
+  const aspect = perspCam.aspect || 1;
+  const h = orthoBaseH > 0 ? orthoBaseH : Math.tan(THREE.MathUtils.degToRad(perspCam.fov) * 0.5) * (camera.position.distanceTo(controls.target) || 1);
+  orthoCam.left = -h * aspect; orthoCam.right = h * aspect; orthoCam.top = h; orthoCam.bottom = -h;
+  orthoCam.updateProjectionMatrix();
+}
+
+function fitCamera(box, dir) {
   if (box.isEmpty()) return;
   const c = box.getCenter(new THREE.Vector3());
-  const dir = new THREE.Vector3(0.55, -0.8, 0.5).normalize(); // 3/4 iso: front-right-above (Z-up)
+  const d = dir ? dir.clone().normalize() : new THREE.Vector3(0.55, -0.8, 0.5).normalize(); // default 3/4 iso
   // Build the camera's right/up axes for this view direction, then size the distance so the WIDEST
   // box corner (projected onto right/up) fits the frustum. Projecting corners (not a bounding sphere)
   // fits a flat plan tightly — a sphere over-zooms because it ignores that the slab is thin.
-  const fwd = dir.clone().negate();
+  const fwd = d.clone().negate();
   const up0 = Math.abs(fwd.z) > 0.95 ? V(0, 1, 0) : V(0, 0, 1);
   const right = new THREE.Vector3().crossVectors(up0, fwd).normalize();
   const up = new THREE.Vector3().crossVectors(fwd, right).normalize();
-  const tanV = Math.tan(THREE.MathUtils.degToRad(camera.fov) / 2), tanH = tanV * camera.aspect;
-  let need = 1000;
+  const aspect = perspCam.aspect || 1;
+  const tanV = Math.tan(THREE.MathUtils.degToRad(perspCam.fov) / 2), tanH = tanV * aspect;
+  let need = 1000, extR = 1, extU = 1;
   for (let i = 0; i < 8; i++) {
     const corner = V(i & 1 ? box.max.x : box.min.x, i & 2 ? box.max.y : box.min.y, i & 4 ? box.max.z : box.min.z).sub(c);
-    need = Math.max(need, Math.abs(corner.dot(right)) / tanH, Math.abs(corner.dot(up)) / tanV);
+    const cr = Math.abs(corner.dot(right)), cu = Math.abs(corner.dot(up)), cd = corner.dot(d); // cd = depth toward the camera
+    extR = Math.max(extR, cr); extU = Math.max(extU, cu);
+    // include the corner's depth: a corner NEARER the camera projects larger, so it needs MORE distance
+    // (omitting cd under-fits the near corners → they clip just outside the frustum).
+    need = Math.max(need, cd + Math.max(cr / tanH, cu / tanV));
   }
   const dist = need * 1.15; // small margin
   controls.target.copy(c);
-  camera.position.copy(c).addScaledVector(dir, dist);
+  perspCam.position.copy(c).addScaledVector(d, dist);
+  orthoCam.position.copy(c).addScaledVector(d, dist);
   const r = box.getBoundingSphere(new THREE.Sphere()).radius || dist;
-  camera.near = Math.max(dist / 1000, 1); camera.far = dist + r * 4; camera.updateProjectionMatrix();
+  const near = Math.max(dist / 1000, 1), far = dist + r * 4;
+  perspCam.near = near; perspCam.far = far; perspCam.updateProjectionMatrix();
+  orthoCam.near = near; orthoCam.far = far; orthoCam.zoom = 1;
+  orthoBaseH = Math.max(extU, extR / aspect) * 1.15; // tight, aspect-preserving box fit (no ortho under-frame)
+  if (camera === orthoCam) reframeOrtho();
   controls.update();
 }
 
-async function rebuild() {
+let rebuildSeq = 0;
+async function rebuild(fit = false) {
   if (!api) return;
+  if (fit) fitPending = true;          // entering 3D re-fits; an edit-triggered rebuild keeps the camera put
+  const seq = ++rebuildSeq;
   const sc = await api.fetchScene();   // editor POSTs the current contract to /scene
+  if (seq !== rebuildSeq) return;      // a newer rebuild superseded this one → drop the stale scene (no out-of-order apply)
   if (sc) buildFromScene(sc);
 }
 
+// ---- Persp/Ortho + Solid/Wire/X-ray + group visibility (parity with the AWARE viewer) ----
+function setProjection(mode) {
+  const want = mode === 'ortho' ? orthoCam : perspCam;
+  if (want === camera) return;
+  const tgt = controls.target.clone(), pos = camera.position.clone();
+  camera = want; controls.object = camera;
+  camera.position.copy(pos); camera.lookAt(tgt);
+  if (camera === orthoCam) {
+    // match the perspective view on toggle (preserve the user's current zoom) — Fit re-tightens to the box
+    orthoBaseH = Math.tan(THREE.MathUtils.degToRad(perspCam.fov) * 0.5) * (pos.distanceTo(tgt) || 1);
+    orthoCam.zoom = 1; reframeOrtho();
+  } else camera.updateProjectionMatrix();
+  controls.update();
+}
+function projection() { return camera === orthoCam ? 'ortho' : 'persp'; }
+function setDisplayMode(m) { displayMode = m; applyDisplayMode(); }
+// solid → opaque; wire → wireframe; xray → translucent, no depth write. Applied to whatever material
+// each mesh currently carries (shared profile material OR its selection clone).
+function applyDisplayMode() {
+  for (const mesh of meshById.values()) {
+    const mat = mesh.material; if (!mat) continue;
+    if (displayMode === 'wire') { mat.wireframe = true; mat.transparent = false; mat.opacity = 1; mat.depthWrite = true; }
+    else if (displayMode === 'xray') { mat.wireframe = false; mat.transparent = true; mat.opacity = 0.25; mat.depthWrite = false; }
+    else { mat.wireframe = false; mat.transparent = false; mat.opacity = 1; mat.depthWrite = true; }
+    mat.needsUpdate = true;
+  }
+}
+function applyGroupVisibility() {
+  for (const m of meshById.values()) {
+    const k = m.userData && m.userData.group;
+    m.visible = !groupHidden.has(k) && (soloGroup === null || soloGroup === k);
+  }
+}
+function toggleGroup(k) { if (groupHidden.has(k)) groupHidden.delete(k); else groupHidden.add(k); soloGroup = null; applyGroupVisibility(); rebuildEndpoints(); }
+function soloToggle(k) { soloGroup = soloGroup === k ? null : k; if (soloGroup) groupHidden.clear(); applyGroupVisibility(); rebuildEndpoints(); }
+function showAllGroups() { groupHidden.clear(); soloGroup = null; applyGroupVisibility(); rebuildEndpoints(); }
+function groupState() { return { hidden: [...groupHidden], solo: soloGroup }; }
+function getGroups() { return sceneGroups.map((g) => ({ ...g })); }
+function frameAll() { fitCamera(sceneBox); }
+const VIEWS = { top: [0, 0, 1], bottom: [0, 0, -1], front: [0, -1, 0], back: [0, 1, 0], right: [1, 0, 0], left: [-1, 0, 0], iso: [0.55, -0.8, 0.5] };
+function applyView(name) { const d = VIEWS[name]; if (d) fitCamera(sceneBox, new THREE.Vector3(d[0], d[1], d[2])); }
+// Fit just the selection (Tekla "Zoom selected" / Shift+Space); falls back to fit-all when nothing's picked.
+function frameSelection() {
+  if (!selIds.size) { fitCamera(sceneBox); return; }
+  const box = new THREE.Box3();
+  for (const id of selIds) { const m = meshById.get(id); if (m && m.visible) box.expandByObject(m); }
+  if (!box.isEmpty()) fitCamera(box);
+}
+// ---- Tekla-style keyboard nav: arrows pan, Ctrl+arrows rotate 15°, Shift+arrows rotate 5° ----
+const _UP = new THREE.Vector3(0, 0, 1);
+function rotateView(dAz, dPolar) { // dAz = around world up (Z); dPolar = tilt around the camera-right axis
+  camera.updateMatrix();
+  const off = camera.position.clone().sub(controls.target);
+  off.applyAxisAngle(_UP, dAz);
+  const right = new THREE.Vector3().crossVectors(off, _UP);
+  if (right.lengthSq() < 1e-9) right.setFromMatrixColumn(camera.matrix, 0); // looking straight down/up → use the camera's screen-right so tilt still works
+  right.normalize();
+  const tilted = off.clone().applyAxisAngle(right, dPolar);
+  if (Math.abs(tilted.clone().normalize().dot(_UP)) < 0.999) off.copy(tilted); // don't flip over the pole
+  camera.position.copy(controls.target).add(off); camera.lookAt(controls.target); controls.update();
+}
+function panView(dx, dy) { // dx/dy in "steps" along the camera's screen right/up
+  // step ∝ the on-screen world height: distance for perspective, frustum-height/zoom for ortho.
+  const step = camera.isOrthographicCamera
+    ? ((orthoCam.top - orthoCam.bottom) / (orthoCam.zoom || 1)) * 0.06
+    : camera.position.distanceTo(controls.target) * 0.06;
+  const right = new THREE.Vector3().setFromMatrixColumn(camera.matrix, 0);
+  const up = new THREE.Vector3().setFromMatrixColumn(camera.matrix, 1);
+  const move = right.multiplyScalar(dx * step).add(up.multiplyScalar(dy * step));
+  camera.position.add(move); controls.target.add(move); controls.update();
+}
+const ARROWS = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, 1], ArrowDown: [0, -1] };
+function onKey(e) {
+  if (!renderer || !canvasEl || canvasEl.style.display === 'none') return;     // only when 3D is active
+  const ae = document.activeElement; if (ae && /^(INPUT|SELECT|TEXTAREA)$/.test(ae.tagName)) return;
+  if ((e.key === ' ' && e.shiftKey) || ((e.key === 'z' || e.key === 'Z') && e.altKey)) { e.preventDefault(); frameSelection(); return; } // zoom-selected (Tekla Shift+Space / viewer Alt+Z)
+  const a = ARROWS[e.key]; if (!a) return;
+  const [hx, hy] = a;
+  if (e.ctrlKey || e.metaKey) { e.preventDefault(); rotateView(-hx * Math.PI / 12, hy * Math.PI / 12); }  // 15°
+  else if (e.shiftKey) { e.preventDefault(); rotateView(-hx * Math.PI / 36, hy * Math.PI / 36); }          // 5°
+  else { e.preventDefault(); panView(hx, hy); }                                                            // pan
+}
+// Tekla "set view point": double-click a member → make that point the orbit/zoom pivot.
+function onDblClick(e) {
+  camera.updateMatrixWorld(); root.updateMatrixWorld(true);
+  const rect = canvasEl.getBoundingClientRect();
+  const ndc = new THREE.Vector2(((e.clientX - rect.left) / rect.width) * 2 - 1, -((e.clientY - rect.top) / rect.height) * 2 + 1);
+  raycaster.setFromCamera(ndc, camera);
+  const hits = raycaster.intersectObjects([...meshById.values()].filter((m) => m.visible), false);
+  if (hits.length) { controls.target.copy(hits[0].point); controls.update(); }
+}
+
 function setSelection(ids) {
   const set = ids instanceof Set ? ids : new Set(ids || []);
   for (const [id, mesh] of meshById) {
@@ -237,22 +432,122 @@ function setSelection(ids) {
     mesh.material.emissive = new THREE.Color(on ? SELECT_EMISSIVE : 0x000000);
     mesh.material.emissiveIntensity = on ? 0.6 : 0;
   }
+  applyDisplayMode();                 // selection swapped the materials → re-apply wire/xray
+  selIds = new Set(set);
+  rebuildEndpoints();                 // endpoint dots follow the selection (+ any hover)
+  updateStatusChip();
 }
+let selIds = new Set();
 function selectedMaterial(mesh) {
   if (!mesh.userData._selMat) mesh.userData._selMat = materialFor(mesh.userData.group).clone();
   return mesh.userData._selMat;
 }
 
+// ---- yellow (start) / magenta (end) endpoint markers — also the drag handles ----
+// Shown for every selected member, plus the hovered member. The dot at the member's `from` end
+// (start / end 1) is yellow; the `to` end (end 2 / column top) is magenta. Sizes held ~constant on
+// screen in the render loop (sizeEndpoints).
+function rebuildEndpoints() {
+  if (!epGroup) return;
+  for (const c of [...epGroup.children]) epGroup.remove(c); // shared geom/material → nothing to dispose
+  const show = new Set(selIds); if (hoverId) show.add(hoverId);
+  for (const id of show) {
+    const mesh = meshById.get(id); if (mesh && !mesh.visible) continue; // a legend-hidden member shows no dots
+    const m = members().find((x) => x.id === id); if (!m) continue;
+    const g = memberGeometry(m, api.ptPerFt(), api.defaultTosMm());
+    addEndpoint(g.line[0], epMatStart, id, 0); addEndpoint(g.line[1], epMatEnd, id, 1);
+  }
+}
+function addEndpoint(p, mat, id, end) {
+  const s = new THREE.Mesh(epGeom, mat);
+  s.position.set(p[0], p[1], p[2]); s.renderOrder = 998; s.userData = { epId: id, epEnd: end }; epGroup.add(s);
+}
+function sizeEndpoints() {
+  if (!epGroup) return;
+  const r = pxToWorld(EP_PX); // small + screen-constant (shrinks as you zoom in, persp AND ortho)
+  const active = dragEp || hoverEp;
+  for (const c of epGroup.children) {
+    const isActive = active && c.userData.epId === active.id && c.userData.epEnd === active.end;
+    c.scale.setScalar(isActive ? r * 1.6 : r); // the targeted end node pops
+  }
+  // white ring on the active end node so the user sees which start/end is selected
+  if (epRing) {
+    let dot = null;
+    if (active) dot = epGroup.children.find((c) => c.userData.epId === active.id && c.userData.epEnd === active.end);
+    if (dot) { epRing.position.copy(dot.position); epRing.quaternion.copy(camera.quaternion); epRing.scale.setScalar(r * 2.4); epRing.visible = true; }
+    else epRing.visible = false;
+  }
+}
+
+// ---- ViewCube (parity with AWARE viewer-3d) — a small labelled cube; a face click snaps the view ----
+const CUBE_FACES = [
+  { label: 'RIGHT', view: 'right' }, { label: 'LEFT', view: 'left' },   // +X, -X
+  { label: 'BACK', view: 'back' }, { label: 'FRONT', view: 'front' },   // +Y, -Y
+  { label: 'TOP', view: 'top' }, { label: 'BOTTOM', view: 'bottom' },   // +Z, -Z
+];
+function faceTexture(label) {
+  const c = document.createElement('canvas'); c.width = c.height = 128; const g = c.getContext('2d');
+  g.fillStyle = '#1e293b'; g.fillRect(0, 0, 128, 128); g.strokeStyle = '#475569'; g.lineWidth = 6; g.strokeRect(4, 4, 120, 120);
+  g.fillStyle = '#e2e8f0'; g.font = 'bold 20px ui-sans-serif,system-ui,sans-serif'; g.textAlign = 'center'; g.textBaseline = 'middle';
+  g.fillText(label, 64, 64); return new THREE.CanvasTexture(c);
+}
+function initCube() {
+  const host = document.getElementById('m3dCube'); if (!host) return;
+  const PX = 84;
+  const cr = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+  cr.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); cr.setSize(PX, PX);
+  host.appendChild(cr.domElement);
+  const cs = new THREE.Scene();
+  const cc = new THREE.PerspectiveCamera(40, 1, 0.1, 20); cc.position.set(0, 0, 5); cc.up.set(0, 0, 1);
+  const mesh = new THREE.Mesh(new THREE.BoxGeometry(1.9, 1.9, 1.9), CUBE_FACES.map((f) => new THREE.MeshBasicMaterial({ map: faceTexture(f.label) })));
+  mesh.add(new THREE.LineSegments(new THREE.EdgesGeometry(mesh.geometry), new THREE.LineBasicMaterial({ color: 0x64748b })));
+  cs.add(mesh);
+  const ray = new THREE.Raycaster(), mouse = new THREE.Vector2();
+  cr.domElement.addEventListener('pointerdown', (e) => {
+    e.preventDefault();
+    const r = cr.domElement.getBoundingClientRect();
+    mouse.x = ((e.clientX - r.left) / r.width) * 2 - 1; mouse.y = -((e.clientY - r.top) / r.height) * 2 + 1;
+    ray.setFromCamera(mouse, cc);
+    const hit = ray.intersectObject(mesh, false)[0]; if (!hit || !hit.face) return;
+    const p = mesh.worldToLocal(hit.point.clone()), snap = (x) => Math.abs(x) > 0.6 ? Math.sign(x) : 0;
+    const dv = new THREE.Vector3(snap(p.x), snap(p.y), snap(p.z));
+    if (Math.abs(dv.x) + Math.abs(dv.y) + Math.abs(dv.z) <= 1) { const f = CUBE_FACES[hit.face.materialIndex]; if (f) applyView(f.view); } // a face → ortho view
+    else fitCamera(sceneBox, dv);  // an edge/corner → iso-style view from that world direction
+  });
+  cube = { renderer: cr, scene: cs, cam: cc, mesh };
+}
+// Mirror the scene from the main camera's direction (the FRONT face turns toward the viewer in a
+// front view, etc.) by orienting the cube by the inverse of the camera's world rotation.
+function syncCube() { cube.mesh.quaternion.copy(camera.quaternion).invert(); }
+
 // Raycast the member meshes at a client (px) point → the hit member id, or null for empty space.
+// Only VISIBLE meshes (a legend-hidden group must not swallow the pick for what's behind it).
 function pickAt(cx, cy) {
   camera.updateMatrixWorld(); root.updateMatrixWorld(true); // ensure current after any camera/mesh move
   const rect = canvasEl.getBoundingClientRect();
   const ndc = new THREE.Vector2(((cx - rect.left) / rect.width) * 2 - 1, -((cy - rect.top) / rect.height) * 2 + 1);
   raycaster.setFromCamera(ndc, camera);
-  const hits = raycaster.intersectObjects([...meshById.values()], false);
+  const hits = raycaster.intersectObjects([...meshById.values()].filter((m) => m.visible), false);
   lastPick = hits.length ? hits[0].object.userData.id : null;
   return lastPick;
 }
+// The (currently shown) end-node dot nearest the cursor within a screen tolerance → { id, end } or
+// null. Screen-space (not a raycast) so the small dots are easy to grab at any zoom. Dots win over
+// the member body, letting you grab one end to stretch it.
+function pickEndpoint(cx, cy) {
+  if (!epGroup || !epGroup.children.length) return null;
+  camera.updateMatrixWorld();
+  const rect = canvasEl.getBoundingClientRect();
+  const px = cx - rect.left, py = cy - rect.top;
+  let best = null, bestD = 14; // px grab tolerance
+  for (const c of epGroup.children) {
+    const v = c.position.clone().project(camera); if (v.z > 1) continue;
+    const sx = (v.x * 0.5 + 0.5) * rect.width, sy = (-v.y * 0.5 + 0.5) * rect.height;
+    const d = Math.hypot(sx - px, sy - py);
+    if (d < bestD) { bestD = d; best = c; }
+  }
+  return best ? { id: best.userData.epId, end: best.userData.epEnd } : null;
+}
 
 // project a 3D mm point → canvas-relative screen px (for screen-space snapping + the marker)
 function toScreen(p) {
@@ -284,13 +579,27 @@ function rayToVerticalPlane(cx, cy, thru) {
   return raycaster.ray.intersectPlane(plane, hit) ? [hit.x, hit.y, hit.z] : null;
 }
 const members = () => (api && api.getMembers && api.getMembers()) || [];
-const markerSize = () => Math.max(camera.position.distanceTo(controls.target) * 0.012, 10);
+const geoMode = () => (api && api.geoMode && api.geoMode()) || null;
+// world units per screen pixel at the target plane — drives screen-CONSTANT marker/dot sizes, for
+// BOTH perspective (distance) and ortho (frustum height / zoom), so dots stay small when zoomed in.
+function worldPerPixel() {
+  const h = (canvasEl && canvasEl.clientHeight) || 1;
+  if (camera === orthoCam) return ((orthoCam.top - orthoCam.bottom) / (orthoCam.zoom || 1)) / h;
+  return (2 * Math.tan(THREE.MathUtils.degToRad(perspCam.fov) / 2) * camera.position.distanceTo(controls.target)) / h;
+}
+const pxToWorld = (px) => px * worldPerPixel();
+const markerSize = () => pxToWorld(8); // snap marker ~8px radius
 
 function onDown(e) {
-  if (e.button !== 0) return;
+  if (e.button !== 0) return;                 // RIGHT/MIDDLE → OrbitControls (orbit/pan)
   downXY = [e.clientX, e.clientY];
   let id = null; try { id = pickAt(e.clientX, e.clientY); } catch { id = null; }
-  if (!id) { pending = null; return; }          // empty space → OrbitControls orbits/pans
+  // Geometry-edit mode (Trim/Extend or Split armed in the inspector): a click does the edit, no drag.
+  if (geoMode() && selIds.size === 1) { e.stopPropagation(); pending = { geo: geoMode(), selId: [...selIds][0], targetId: id }; return; }
+  // An end node (the yellow/magenta dot) under the cursor → grab just that endpoint to stretch the member.
+  let ep = null; try { ep = pickEndpoint(e.clientX, e.clientY); } catch { ep = null; }
+  if (ep) { e.stopPropagation(); controls.enabled = false; startEndpointGrab(ep, e); return; }
+  if (!id) { pending = null; boxSel = { x: e.clientX, y: e.clientY }; return; }  // empty space → box-select on drag
   e.stopPropagation(); controls.enabled = false; // grabbed a member → suppress orbit (enabled=false is the reliable guard)
   try {
     const m = members().find((x) => x.id === id);
@@ -324,9 +633,45 @@ function onMoveVertical(e) {
   readout.style.left = (e.clientX + 14) + 'px'; readout.style.top = (e.clientY + 14) + 'px'; readout.style.display = 'block';
 }
 
+// Grab a single end node: drag it on the member's work-plane (its TOS), snapping to other members.
+function startEndpointGrab(ep, e) {
+  try {
+    const m = members().find((x) => x.id === ep.id); if (!m) { controls.enabled = true; return; }
+    const ppf = api.ptPerFt(), dtos = api.defaultTosMm();
+    const g = memberGeometry(m, ppf, dtos);
+    pending = {
+      epDrag: true, id: ep.id, end: ep.end, ppf,
+      planeZ: g.line[ep.end][2], fixed: g.line[1 - ep.end],
+      candidates: snapCandidates(members(), ppf, dtos, ep.id),
+      newPt: [g.line[ep.end][0], g.line[ep.end][1]],
+    };
+    dragEp = { id: ep.id, end: ep.end };
+  } catch (err) { controls.enabled = true; pending = null; dragEp = null; }
+}
+function onMoveEndpoint(e) {
+  if (!dragging && Math.hypot(e.clientX - downXY[0], e.clientY - downXY[1]) <= DRAG_TOL_PX) return;
+  dragging = pending;
+  const hit = rayToPlane(e.clientX, e.clientY, pending.planeZ); if (!hit) return;
+  const r = snapPoint([hit[0], hit[1], pending.planeZ], pending.candidates, toScreen, SNAP_TOL_PX);
+  const np = r.candidate ? r.snapped : [hit[0], hit[1], pending.planeZ];
+  pending.newPt = [np[0], np[1]];
+  const dot = epGroup.children.find((c) => c.userData.epId === pending.id && c.userData.epEnd === pending.end);
+  if (dot) dot.position.set(np[0], np[1], pending.planeZ);
+  const f = pending.fixed;
+  epPreview.geometry.setFromPoints([new THREE.Vector3(f[0], f[1], f[2]), new THREE.Vector3(np[0], np[1], pending.planeZ)]);
+  epPreview.visible = true;
+  if (r.candidate) { marker.position.set(np[0], np[1], np[2]); marker.scale.setScalar(markerSize()); marker.visible = true; } else marker.visible = false;
+  const len = Math.hypot(np[0] - f[0], np[1] - f[1]) / FT_MM;
+  readout._dist.textContent = len.toFixed(2) + ' ft'; readout._type.textContent = r.candidate ? ' · ' + r.candidate.type : '';
+  readout.style.left = (e.clientX + 14) + 'px'; readout.style.top = (e.clientY + 14) + 'px'; readout.style.display = 'block';
+}
+
 function onMove(e) {
   if (!renderer || !canvasEl || canvasEl.style.display === 'none') return; // 3D inactive — ignore window pointer events
-  if (!pending || !pending.grab || !pending.origMm) return;
+  if (boxSel) { onBoxMove(e); return; }
+  if (!pending || pending.geo) return;
+  if (pending.epDrag) { onMoveEndpoint(e); return; }
+  if (!pending.grab || !pending.origMm) return;
   if (!dragging && Math.hypot(e.clientX - downXY[0], e.clientY - downXY[1]) <= DRAG_TOL_PX) return;
   if (!dragging) pending.mode = e.altKey ? 'vertical' : 'plan'; // lock the mode at drag start (Alt = vertical/elevation)
   dragging = pending;
@@ -352,14 +697,61 @@ function onMove(e) {
   readout.style.left = (e.clientX + 14) + 'px'; readout.style.top = (e.clientY + 14) + 'px'; readout.style.display = 'block';
 }
 
+function onBoxMove(e) {
+  if (Math.hypot(e.clientX - boxSel.x, e.clientY - boxSel.y) < DRAG_TOL_PX) { rubber.style.display = 'none'; return; }
+  boxSel.moved = true;
+  const x = Math.min(e.clientX, boxSel.x), y = Math.min(e.clientY, boxSel.y);
+  rubber.style.left = x + 'px'; rubber.style.top = y + 'px';
+  rubber.style.width = Math.abs(e.clientX - boxSel.x) + 'px'; rubber.style.height = Math.abs(e.clientY - boxSel.y) + 'px';
+  rubber.style.display = 'block';
+}
+// every VISIBLE member whose centre projects inside the drag rectangle (centre-point hit-test)
+function membersInRect(x0, y0, x1, y1) {
+  const rect = canvasEl.getBoundingClientRect();
+  const lo = { x: Math.min(x0, x1), y: Math.min(y0, y1) }, hi = { x: Math.max(x0, x1), y: Math.max(y0, y1) };
+  const out = [];
+  for (const [id, m] of meshById) {
+    if (!m.visible) continue;
+    const w = m.getWorldPosition(new THREE.Vector3()).project(camera); if (w.z > 1) continue;
+    const sx = rect.left + (w.x * 0.5 + 0.5) * rect.width, sy = rect.top + (-w.y * 0.5 + 0.5) * rect.height;
+    if (sx >= lo.x && sx <= hi.x && sy >= lo.y && sy <= hi.y) out.push(id);
+  }
+  return out;
+}
+
 function onUp(e) {
-  if (marker) marker.visible = false; if (readout) readout.style.display = 'none'; // always clear drag overlays, even on the early-return paths
-  if (!renderer || !canvasEl || canvasEl.style.display === 'none') { downXY = null; return; } // 3D inactive
+  if (marker) marker.visible = false; if (readout) readout.style.display = 'none'; if (rubber) rubber.style.display = 'none'; if (epPreview) epPreview.visible = false; dragEp = null; // always clear overlays
+  if (!renderer || !canvasEl || canvasEl.style.display === 'none') { downXY = null; boxSel = pending = dragging = null; if (controls) controls.enabled = true; return; } // 3D hidden mid-gesture → drop stale gesture state (no resume on re-show)
+  const bs = boxSel; boxSel = null;
+  if (bs) { // empty-space gesture: drag = box-select, click = clear selection
+    if (bs.moved) { const ids = membersInRect(bs.x, bs.y, e.clientX, e.clientY); if (api && api.onSelectMany) api.onSelectMany(ids); }
+    else if (api && api.onSelect) api.onSelect(null, false);
+    downXY = null; return;
+  }
   const p = pending, wasDragging = dragging; pending = dragging = null;
   controls.enabled = true;
   const moved = downXY ? Math.hypot(e.clientX - downXY[0], e.clientY - downXY[1]) : Infinity; downXY = null;
-  if (!p) { // empty-space gesture: a click (no move) clears the selection
-    if (moved <= DRAG_TOL_PX && api && api.onSelect) api.onSelect(null, false);
+  if (!p) return;
+  if (p.epDrag) { // end-node drag → write just that endpoint's wp; a click (no drag) just selects the member
+    if (wasDragging && p.newPt && api && api.onMoveEndpoint) { if (api.onSelect) api.onSelect(p.id, false); api.onMoveEndpoint(p.id, p.end, planPointToWp(p.newPt, p.ppf)); }
+    else if (api && api.onSelect) api.onSelect(p.id, false);
+    return;
+  }
+  if (p.geo) { // Trim/Extend or Split — a click (no drag) performs the edit
+    if (moved > DRAG_TOL_PX) return;
+    if (p.geo === 'el') { if (p.targetId && p.targetId !== p.selId && api && api.onTrimExtend) api.onTrimExtend(p.selId, p.targetId); return; }
+    if (p.geo === 'split') {  // cut the selected member at the clicked point on its centreline
+      const m = members().find((x) => x.id === p.selId); if (!m) return;
+      const ppf = api.ptPerFt();
+      const g = memberGeometry(m, ppf, api.defaultTosMm());
+      const planeZ = (g.line[0][2] + g.line[1][2]) / 2;
+      const hit = rayToPlane(e.clientX, e.clientY, planeZ); if (!hit) return;
+      if (p.targetId !== p.selId) return;                                    // the cut click must land on the selected member's body
+      const { pt: cut, t } = closestOnSeg3([hit[0], hit[1]], g.line[0], g.line[1]); // nearest point ON the member (plan)
+      if (t <= 0.03 || t >= 0.97) return;                                    // too near an end → no degenerate split
+      if (api && api.onSplit) api.onSplit(p.selId, planPointToWp(cut, ppf));
+      return;
+    }
     return;
   }
   if (!wasDragging) { if (api && api.onSelect) api.onSelect(p.id, p.ctrl); return; } // member click → select
@@ -375,21 +767,69 @@ function onUp(e) {
   if (api && api.onSelect) api.onSelect(p.id, false);                                // keep the moved member selected
   if (api && api.onMoveMember) api.onMoveMember(p.id, newWp);                         // editor writes wp via edit()
 }
+// nearest point on segment a-b to plan point p (XY only) → { pt:[x,y], t }
+function closestOnSeg3(p, a, b) {
+  const abx = b[0] - a[0], aby = b[1] - a[1], l2 = abx * abx + aby * aby || 1;
+  let t = ((p[0] - a[0]) * abx + (p[1] - a[1]) * aby) / l2; t = Math.max(0, Math.min(1, t));
+  return { pt: [a[0] + abx * t, a[1] + aby * t], t };
+}
 
-function show() { if (canvasEl) { canvasEl.style.display = 'block'; resize(); } if (!rafId) loop(); } // resume the render loop
-function hide() { if (canvasEl) canvasEl.style.display = 'none'; if (rafId) { cancelAnimationFrame(rafId); rafId = null; } } // stop rendering while in 2D
+// ---- hover: cursor + readout chip (no drag in progress) ----
+function onHoverMove(e) {
+  lastHoverXY = [e.clientX, e.clientY];
+  if (hoverRAF || pending || dragging || boxSel) return;
+  hoverRAF = requestAnimationFrame(() => {
+    hoverRAF = 0;
+    if (!lastHoverXY || pending || dragging || boxSel) return;
+    let ep = null; try { ep = pickEndpoint(lastHoverXY[0], lastHoverXY[1]); } catch { ep = null; }
+    if (ep) { // over an end node → ring + move cursor; keep its member's dots shown
+      hoverEp = ep; canvasEl.style.cursor = 'move';
+      if (hoverId !== ep.id) { hoverId = ep.id; rebuildEndpoints(); }
+      updateStatusChip(); return;
+    }
+    hoverEp = null;
+    let id = null; try { id = pickAt(lastHoverXY[0], lastHoverXY[1]); } catch { id = null; }
+    canvasEl.style.cursor = geoMode() ? 'crosshair' : (id ? 'grab' : 'default');
+    if (id !== hoverId) { hoverId = id; rebuildEndpoints(); updateStatusChip(); }
+  });
+}
+function updateStatusChip() {
+  if (!hoverChip || !canvasEl) return;
+  const rect = canvasEl.getBoundingClientRect();
+  let txt = '';
+  const showId = hoverId || (selIds.size === 1 ? [...selIds][0] : null);
+  if (showId) { const m = members().find((x) => x.id === showId); txt = m ? `${m.id} · ${m.profile || '—'}` : ''; }
+  else if (selIds.size > 1) txt = `${selIds.size} members selected`;
+  else txt = 'Drag a member to move · ends to stretch · Alt+drag elevation · right-drag orbits';
+  hoverChip.textContent = txt;
+  hoverChip.style.left = (rect.left + rect.width / 2) + 'px'; hoverChip.style.transform = 'translateX(-50%)';
+  hoverChip.style.top = (rect.bottom - 30) + 'px';
+  hoverChip.style.display = canvasEl.style.display === 'none' ? 'none' : 'block';
+}
+
+function show() { if (controls) controls.enabled = true; if (canvasEl) { canvasEl.style.display = 'block'; resize(); } if (!rafId) loop(); updateStatusChip(); } // resume the render loop (reset orbit in case a gesture was stranded by a mid-drag hide)
+function hide() { if (canvasEl) canvasEl.style.display = 'none'; if (hoverChip) hoverChip.style.display = 'none'; if (rafId) { cancelAnimationFrame(rafId); rafId = null; } }
 function isReady() { return built; }
 
 function dispose() {
   if (rafId) cancelAnimationFrame(rafId);
+  if (hoverRAF) cancelAnimationFrame(hoverRAF);
   if (ro) ro.disconnect();
-  if (canvasEl) canvasEl.removeEventListener('pointerdown', onDown, true);
+  if (canvasEl) { canvasEl.removeEventListener('pointerdown', onDown, true); canvasEl.removeEventListener('pointermove', onHoverMove); canvasEl.removeEventListener('dblclick', onDblClick); }
   window.removeEventListener('pointermove', onMove);
   window.removeEventListener('pointerup', onUp);
-  if (readout && readout.parentNode) readout.parentNode.removeChild(readout);
+  window.removeEventListener('keydown', onKey);
+  for (const ovl of [readout, hoverChip, rubber]) if (ovl && ovl.parentNode) ovl.parentNode.removeChild(ovl);
+  if (cube) {
+    cube.scene.traverse((o) => { if (o.geometry) o.geometry.dispose(); const mm = Array.isArray(o.material) ? o.material : (o.material ? [o.material] : []); for (const m of mm) { if (m.map) m.map.dispose(); m.dispose(); } });
+    cube.renderer.dispose(); if (cube.renderer.domElement.parentNode) cube.renderer.domElement.parentNode.removeChild(cube.renderer.domElement); cube = null;
+  }
+  if (epGeom) epGeom.dispose(); if (epMatStart) epMatStart.dispose(); if (epMatEnd) epMatEnd.dispose();
+  for (const o of [epRing, epPreview, refGroup]) if (o) { if (o.geometry) o.geometry.dispose(); if (o.material) o.material.dispose(); }
+  epGeom = epMatStart = epMatEnd = epRing = epPreview = refGroup = null;
   clearRoot();
   if (renderer) renderer.dispose();
-  renderer = scene = camera = controls = root = api = canvasEl = ro = null; built = false;
+  renderer = scene = camera = perspCam = orthoCam = controls = root = api = canvasEl = ro = null; built = false;
 }
 
 function debug() {
@@ -402,15 +842,21 @@ function debug() {
     firstId: meshById.keys().next().value ?? null,
     ids: [...meshById.keys()].slice(0, 12),
     geomTypes: [...meshById.values()].reduce((h, m) => { const t = m.geometry.type; h[t] = (h[t] || 0) + 1; return h; }, {}),
-    lastPick,
+    lastPick, projection: projection(), mode: displayMode,
+    hidden: [...groupHidden], solo: soloGroup, visible: [...meshById.values()].filter((m) => m.visible).length,
+    endpoints: epGroup ? epGroup.children.length : 0,
+    endpointColors: epGroup ? epGroup.children.map((c) => '#' + c.material.color.getHexString()) : [],
+    hoverId, hoverEp, dragEp, refLine: refLineOn,
+    inFrustum: (() => { let n = 0, t = 0; for (const m of meshById.values()) { t++; const v = m.getWorldPosition(new THREE.Vector3()).project(camera); if (Math.abs(v.x) <= 1 && Math.abs(v.y) <= 1 && v.z >= -1 && v.z <= 1) n++; } return { n, t }; })(),
     camPos: camera ? [camera.position.x, camera.position.y, camera.position.z] : null,
+    target: controls ? [controls.target.x, controls.target.y, controls.target.z] : null,
     near: camera?.near, far: camera?.far,
   };
 }
 // test helper: the current material colour + emissive of a member (verifies deselect restores colour)
 function probe(id) {
   const m = meshById.get(id); if (!m) return null;
-  return { color: '#' + m.material.color.getHexString(), emissive: m.material.emissiveIntensity || 0 };
+  return { color: '#' + m.material.color.getHexString(), emissive: m.material.emissiveIntensity || 0, visible: m.visible, wireframe: !!m.material.wireframe };
 }
 // test helper: client (px) coords of a member's endpoint (end 0|1) — lets an E2E drive a precise drag
 function screenOf(id, end) {
@@ -419,4 +865,16 @@ function screenOf(id, end) {
   const s = toScreen(g.line[end]); const rect = canvasEl.getBoundingClientRect();
   return { x: rect.left + s.x, y: rect.top + s.y };
 }
-window.Steel3DView = { init, show, hide, rebuild, setSelection, isReady, debug, probe, screenOf, dispose };
+// test helper: client (px) coords of a member's centre — lets an E2E click/drag the body
+function centerOf(id) {
+  const m = meshById.get(id); if (!m) return null;
+  const w = m.getWorldPosition(new THREE.Vector3()).project(camera); const rect = canvasEl.getBoundingClientRect();
+  return { x: rect.left + (w.x * 0.5 + 0.5) * rect.width, y: rect.top + (-w.y * 0.5 + 0.5) * rect.height };
+}
+window.Steel3DView = {
+  init, show, hide, rebuild, setSelection, isReady, dispose,
+  setProjection, projection, setDisplayMode, mode: () => displayMode, frameAll, frameSelection, applyView,
+  setRefLine, refLine: () => refLineOn,
+  toggleGroup, soloToggle, showAllGroups, groupState, getGroups,
+  debug, probe, screenOf, centerOf,
+};