@floless/app 0.35.1 → 0.36.0

package/dist/floless-server.cjs

@@ -52856,7 +52856,7 @@ function appVersion() {
   return resolveVersion({
     isSea: isSea2(),
     sqVersionXml: readSqVersionXml(),
-    define: true ? "0.35.1" : void 0,
+    define: true ? "0.36.0" : void 0,
     pkgVersion: readPkgVersion()
   });
 }
@@ -52866,7 +52866,7 @@ function resolveChannel(s) {
   return "dev";
 }
 function appChannel() {
-  return resolveChannel({ isSea: isSea2(), define: true ? "0.35.1" : void 0 });
+  return resolveChannel({ isSea: isSea2(), define: true ? "0.36.0" : void 0 });
 }
 
 // oauth-presets.ts
@@ -53759,6 +53759,10 @@ function bakeContractIntoApp(sourcePath, contract) {
 // contract-to-scene.ts
 var FT_TO_MM = 304.8;
 var IN_TO_MM = 25.4;
+function depthPosition(explicit, dzMm, horizMm) {
+  if (explicit === "top" || explicit === "middle" || explicit === "bottom") return explicit;
+  return dzMm > horizMm * 0.5774 ? "middle" : "top";
+}
 function profileDims(profile) {
   if (!profile) return null;
   const p = profile.trim().toUpperCase();
@@ -53826,8 +53830,10 @@ function contractToScene(contractInput) {
       } else {
         const z0 = m.ends?.[0]?.tos != null ? m.ends[0].tos * IN_TO_MM : defaultTosMm;
         const z1 = m.ends?.[1]?.tos != null ? m.ends[1].tos * IN_TO_MM : defaultTosMm;
-        from = [ax, ay, z0];
-        to = [bx, by, z1];
+        const pos = depthPosition(m.position, Math.abs(z1 - z0), Math.hypot(bx - ax, by - ay));
+        const zoff = pos === "top" ? -dims.d / 2 : pos === "bottom" ? dims.d / 2 : 0;
+        from = [ax, ay, z0 + zoff];
+        to = [bx, by, z1 + zoff];
       }
       elements.push({ id: m.id, group: profile, kind: "box", from, to, section: { w: dims.w, d: dims.d }, meta: { profile } });
     }
@@ -58653,6 +58659,8 @@ async function startServer() {
   });
   app.post(
     "/api/contract/:appId/score",
+    { bodyLimit: 25 * 1024 * 1024 },
+    // contracts embed rasters (matches /scene + PUT) — the editor/host-AI POSTs the live contract to score
     async (req, reply) => {
       const doc2 = req.body && "contract" in req.body ? req.body.contract : readContract(req.params.appId);
       if (doc2 == null) return reply.status(404).send({ ok: false, error: "no contract to score" });
@@ -58682,6 +58690,8 @@ async function startServer() {
   );
   app.post(
     "/api/contract/:appId/scene",
+    { bodyLimit: 25 * 1024 * 1024 },
+    // contracts embed rasters (matches PUT /api/contract) — the editor POSTs the live contract on every 3D rebuild
     async (req, reply) => {
       const doc2 = req.body && "contract" in req.body ? req.body.contract : readContract(req.params.appId);
       if (doc2 == null) return reply.status(404).send({ ok: false, error: "no contract to render" });

package/dist/schemas/steel.takeoff.v1.schema.json

@@ -125,6 +125,7 @@
         },
         "angle": { "enum": ["H", "V", "D"] },
         "role": { "enum": ["beam", "column"], "description": "Defaults to beam when absent." },
+        "position": { "enum": ["top", "middle", "bottom"], "description": "Profile placement relative to the reference line (the work-line between the two work-points), like Tekla's depth position. top = line at the section top (steel hangs below); middle = line through the centroid; bottom = line at the section bottom. When absent the editor defaults a flat beam to top (line = top of steel) and a column / steep brace to middle." },
         "rfi": { "type": "boolean", "description": "True when the size is unresolved (excluded from the BOM)." },
         "mf": { "type": "boolean", "description": "Moment-frame member (persistent flag)." },
         "ends": {

package/dist/skills/floless-app-steel-takeoff/SKILL.md

@@ -222,6 +222,14 @@ Important optional fields:
 Key field rules:
 - All `wp` / `disp` / `a` / `b` coordinates are **display space** (not native PDF coords, not
   millimetres).
+- **Endpoint direction (canonical order).** `wp[0]`/`ends[0]` is the member's **START** (drawn as a
+  **yellow** dot in the editor); `wp[1]`/`ends[1]` is the **END** (drawn **magenta**). Always emit
+  endpoints in a consistent direction so start/end read the same across the whole takeoff:
+  - **Columns** — bottom → top (start at the lower elevation): `wp`/`col` go `bos` (start) → `tos` (end).
+  - **Beams** in plan — **left → right** (start = smaller X); for a vertical-in-plan run, **bottom → up**
+    (start = the lower end on the sheet, i.e. the **larger** display-Y since display Y grows downward).
+  This is the on-screen reading direction (→ or ↑). It costs nothing to get right at authoring time and
+  makes the yellow/magenta end handles meaningful in both the 2D and 3D editor.
 - Elevations are **decimal inches** (canonical); the editor accepts/displays ft-in strings.
   `tosDef: false` means the value came from a drawing callout; `true` means it follows the plan
   default.

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,
+};

package/dist/web/steel-editor.html

@@ -144,6 +144,21 @@
  #viewToggle .seg.on{background:var(--panel);color:var(--text);box-shadow:inset 0 -2px 0 var(--brand)}
  #stagewrap{position:relative}
  #stage3d{position:absolute;inset:0;width:100%;height:100%;display:none;outline:none}
+ /* yellow = START (end 1), magenta = END (end 2) — also the drag handles. Same colours in 3D. */
+ circle.handle.ep-start{fill:#facc15;stroke:#0b1220;stroke-width:2}
+ circle.handle.ep-end{fill:#f472b6;stroke:#0b1220;stroke-width:2}
+ .epdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
+ /* 3D-only floating chrome (parity with AWARE viewer-3d): toolbar TL, legend BL, ViewCube BR */
+ #m3dBar{position:absolute;top:12px;left:12px;display:none;gap:6px;align-items:center;z-index:6}
+ #m3dBar .seg-group,#m3dBar>button{box-shadow:0 4px 14px rgba(0,0,0,.45)}
+ #m3dBar>button{font-size:12px;padding:5px 9px}
+ #m3dLegend{position:absolute;left:12px;bottom:64px;display:none;flex-direction:column;gap:1px;max-height:40%;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;z-index:6;box-shadow:0 4px 14px rgba(0,0,0,.45);font-size:12px}
+ #m3dLegend .lhint{color:var(--mut);font-size:10px;margin-bottom:4px}
+ #m3dLegend .lrow{display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none;padding:2px 4px;border-radius:5px;white-space:nowrap}
+ #m3dLegend .lrow:hover{background:#33415580}
+ #m3dLegend .lrow.off{opacity:.4} #m3dLegend .lrow.off .lsw{filter:grayscale(1)}
+ #m3dLegend .lsw{width:11px;height:11px;border-radius:2px;flex:none}
+ #m3dCube{position:absolute;right:12px;bottom:12px;width:84px;height:84px;display:none;z-index:6;cursor:pointer;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
 </style>
 <script type="importmap">{"imports":{"three":"./vendor/three.module.js","three/addons/":"./vendor/"}}</script>
 <script type="module" src="./steel-3d-view.js"></script>
@@ -174,6 +189,14 @@
  <div id=stagewrap>
   <div id=stage><svg id=svg></svg></div>
   <canvas id=stage3d tabindex=0 aria-label="3D model"></canvas>
+  <div id=m3dBar role=group aria-label="3D view controls">
+   <div class=seg-group id=m3dProj title="Camera projection"><button data-proj=persp class=on>Persp</button><button data-proj=ortho>Ortho</button></div>
+   <div class=seg-group id=m3dMode title="Display mode"><button data-mode=solid class=on>Solid</button><button data-mode=wire>Wire</button><button data-mode=xray>X-ray</button></div>
+   <button id=m3dFit title="Fit all to view">Fit</button>
+   <button id=m3dRef title="Show the reference line (work-line between the end points) for every member">Ref line</button>
+  </div>
+  <div id=m3dLegend></div>
+  <div id=m3dCube title="Click a face for that view · drag the scene with the right button to orbit"></div>
   <div id=zoombar>
    <button id=zOut title="Zoom out">−</button>
    <input id=zRange type=range min=10 max=400 step=1 value=100>
@@ -375,6 +398,17 @@ const fmtDecIn=v=>(v==null||isNaN(v))?'—':((Math.round(v*100)/100)+'"');
 function ensureMeta(m){if(!m.role)m.role='beam';
  if(!m.ends){const c=/(^|[^A-Z])MF/i.test(m.profile||'')?'moment':'';m.ends=[{tos:null,note:c,tosDef:true,detail:''},{tos:null,note:c,tosDef:true,detail:''}];}
  if(!m.col)m.col={bos:null,tos:null,note:(/(^|[^A-Z])MF/i.test(m.profile||'')?'moment':''),tosDef:true,detail:''};return m;}
+// Effective profile position on the reference line (the work-line between the end dots), à la Tekla.
+// Explicit m.position wins; else a flat beam → top (top-of-steel), a steep beam (brace) / column → middle.
+// MIRROR of server/contract-to-scene.ts depthPosition (same 0.5774 ≈ 30° threshold, mm units).
+function posDefault(m){
+ if(m.position==='top'||m.position==='middle'||m.position==='bottom')return m.position;
+ if(m.role==='column')return 'middle';
+ const k=304.8/((P&&P.pt_per_ft>0)?P.pt_per_ft:1);
+ const z0=(m.ends&&m.ends[0]&&m.ends[0].tos!=null)?m.ends[0].tos:defaultTOS;
+ const z1=(m.ends&&m.ends[1]&&m.ends[1].tos!=null)?m.ends[1].tos:defaultTOS;
+ const dz=Math.abs((z0||0)-(z1||0))*25.4, horiz=Math.hypot(m.wp[1][0]-m.wp[0][0],m.wp[1][1]-m.wp[0][1])*k;
+ return dz>horiz*0.5774?'middle':'top';}
 // best-effort: framing plans carry TOS at the level UNO — assume the L2 datum +16'-6" (198"); each end's
 // 'default' checkbox links it to this value (auto-updates when changed); uncheck to override.
 let defaultTOS=198, addProfile='';
@@ -385,10 +419,10 @@ const autofillTOS=syncDefaults;
 // profs is per-plan — computed in setPlan()
 function snapshot(){return JSON.stringify(P.members);}
 function pushUndo(prev){undo.push(prev);if(undo.length>200)undo.shift();redo.length=0;scheduleSave();}
-function apply(json){P.members=JSON.parse(json);selIds=new Set([...selIds].filter(id=>byId(id)));scheduleSave();render();}
+function apply(json){P.members=JSON.parse(json);selIds=new Set([...selIds].filter(id=>byId(id)));scheduleSave();render();sync3D();}
 function doUndo(){if(!undo.length)return;redo.push(snapshot());apply(undo.pop());}
 function doRedo(){if(!redo.length)return;undo.push(snapshot());apply(redo.pop());}
-function edit(fn){const pv=snapshot();fn();pushUndo(pv);render();}
+function edit(fn){const pv=snapshot();fn();pushUndo(pv);render();sync3D();}
 // --- auto-save: edits persist to this browser (localStorage). Raster stays embedded; only members + TOS are stored. ---
 const LSKEY = 'steeltakeoff:edits:v1:' + APP_ID;
 function dataSig(){return C.plans.map(p=>p.sheet+':'+((p.segments||[]).length)).join('|');}  // ignore stored edits if the dataset changed
@@ -528,7 +562,7 @@ function render(){
  for(const sg of P.segments) s+=`<line class=seg data-seg="${sg.id}" x1="${sg.a[0]}" y1="${sg.a[1]}" x2="${sg.b[0]}" y2="${sg.b[1]}"/>`;
  for(const m of P.members){const c=colorFor(m.profile);const on=selIds.has(m.id);const g=on?` style="filter:drop-shadow(0 0 3px ${c}) drop-shadow(0 0 8px ${c})"`:'';
    s+=`<line class="member${m.rfi?' rfi':''}${on?' sel':''}" data-id="${m.id}" x1="${m.wp[0][0]}" y1="${m.wp[0][1]}" x2="${m.wp[1][0]}" y2="${m.wp[1][1]}" stroke="${c}"${g}/>`;}
- {const hsel=selArr();if(hsel.length>=1&&hsel.length<=2){const HR=9/zoom;for(const sm of hsel)for(let i=0;i<2;i++) s+=`<circle class=handle data-mid="${sm.id}" data-h="${i}" cx="${sm.wp[i][0]}" cy="${sm.wp[i][1]}" r="${HR}"/>`;}}
+ {const hsel=selArr();if(hsel.length>=1&&hsel.length<=2){const HR=5.5/zoom;for(const sm of hsel)for(let i=0;i<2;i++) s+=`<circle class="handle ${i===0?'ep-start':'ep-end'}" data-mid="${sm.id}" data-h="${i}" cx="${sm.wp[i][0]}" cy="${sm.wp[i][1]}" r="${HR}"/>`;}}  // end 1 (start) yellow, end 2 (end) magenta · small + zoom-constant
  if((mode==='add'||(picking&&pickKind==='profile'))&&P.labels) for(const lb of P.labels){const w=Math.max(40,lb.text.length*11);
    s+=`<rect class=lblhot data-prof="${esc(lb.text)}" x="${lb.disp[0]-w/2}" y="${lb.disp[1]-10}" width="${w}" height="20" rx="3"><title>${esc(lb.text)}</title></rect>`;}
  if(picking&&pickKind==='detail'&&P.details) for(const d of P.details){const w=Math.max(34,d.text.length*8);
@@ -551,7 +585,7 @@ function updDup(){const n=redundantDups().length;
 function updateBadges(){const R=12/zoom,F=13/zoom,ox=el=>(+el.dataset.fi-(+el.dataset.gn-1)/2)*R*2;
  svg.querySelectorAll('circle.numbg').forEach(c=>{c.setAttribute('cx',(+c.dataset.bx)+ox(c));c.setAttribute('r',R);});
  svg.querySelectorAll('text.numtx').forEach(t=>{t.setAttribute('x',(+t.dataset.bx)+ox(t));t.style.fontSize=F+'px';});
- svg.querySelectorAll('circle.handle').forEach(h=>h.setAttribute('r',9/zoom));}
+ svg.querySelectorAll('circle.handle').forEach(h=>h.setAttribute('r',5.5/zoom));}
 function updateHandles(m){svg.querySelectorAll(`circle.handle[data-mid="${m.id}"]`).forEach(h=>{const i=+h.dataset.h;h.setAttribute('cx',m.wp[i][0]);h.setAttribute('cy',m.wp[i][1]);});}
 function updateLine(m){const ln=svg.querySelector(`line.member[data-id="${m.id}"]`);
  if(ln){ln.setAttribute('x1',m.wp[0][0]);ln.setAttribute('y1',m.wp[0][1]);ln.setAttribute('x2',m.wp[1][0]);ln.setAttribute('y2',m.wp[1][1]);}}
@@ -595,7 +629,7 @@ function panel(){
   document.getElementById('pf').onchange=e=>{const v=e.target.value.toUpperCase().replace(/ /g,'');if(!v)return;edit(()=>{for(const m of selArr()){m.profile=v;m.rfi=(WT[v]==null);}if(!profs.includes(v)){profs.push(v);profs.sort();}});};
   document.getElementById('del').onclick=()=>edit(()=>{P.members=P.members.filter(m=>!selIds.has(m.id));selIds.clear();});
   return;}
- const m=ensureMeta(arr[0]), wpf=WT[m.profile], L=(len(m.wp[0],m.wp[1])/FT).toFixed(1), col=(m.role==='column');
+ const m=ensureMeta(arr[0]), wpf=WT[m.profile], L=(len(m.wp[0],m.wp[1])/FT).toFixed(1), col=(m.role==='column'), pos=posDefault(m);
  const _lvl=({'S-202':'second','S-203':'roof'})[P.sheet];
  const mfSug=((m.mf||/^MF/i.test(m.profile))&&_lvl&&C.moment_frames)?[...new Set(C.moment_frames.flatMap(f=>f[_lvl]||[]))].filter(Boolean):[];
  const ftFld=(id,label,v)=>`<div class=elab>${label}</div><input id=${id} inputmode=decimal placeholder="5 3/4&quot; · 1&#39;-0 1/4&quot;" value="${esc(fmtFtIn(v))}"><span class=edec>${esc(fmtDecIn(v))}</span>`;
@@ -603,11 +637,12 @@ function panel(){
    return `<div class=elabrow><span class=elab>${label}</span><label class=defck><input type=checkbox id=${id}_ck ${def?'checked':''}>default</label></div><input id=${id} inputmode=decimal placeholder="5 3/4&quot; · 1&#39;-0 1/4&quot;" value="${esc(fmtFtIn(v))}"${def?' disabled':''}><span class=edec>${esc(fmtDecIn(v))}</span>`;};
  const nin=(id,v)=>`<input id=${id} class="f combo" data-src=conntypes placeholder="connection / note" value="${esc(v||'')}" autocomplete=off>`;
  const dFld=(id,o)=>{const hasPrev=o.detail&&previewFor(o.detail);return `<div class=elab>Connection detail</div><div style="display:flex;gap:6px"><input id=${id} class=combo data-src=details placeholder="e.g. 5-S504" value="${esc(o.detail||'')}" style="flex:1" autocomplete=off>${hasPrev?`<button id=${id}_open class=ghost title="Open detail ${esc(o.detail)}">⤢</button>`:''}<button id=${id}_pk class="ghost${(picking&&pickKind==='detail'&&pickEnd===o)?' on':''}" title="Pick a detail callout from the drawing">⌖</button></div>`;};
+ const dotS='<span class=epdot style="background:#facc15"></span>',dotE='<span class=epdot style="background:#f472b6"></span>';  // start=yellow, end=magenta — matches the canvas end markers
  const elev = col
-  ? `<div class="sect f">Elevation</div>${ftFld('bos','Bottom (BOS)',m.col.bos)}${tosFld('tosC','Top (TOS)',m.col)}${nin('ntC',m.col.note)}${dFld('dtC',m.col)}`
-  : `<div class="sect f">Start</div>${tosFld('tosA','TOS',m.ends[0])}${nin('ntA',m.ends[0].note)}${dFld('dtA',m.ends[0])}
+  ? `<div class="sect f">Elevation</div>${ftFld('bos',dotS+'Bottom (BOS)',m.col.bos)}${tosFld('tosC',dotE+'Top (TOS)',m.col)}${nin('ntC',m.col.note)}${dFld('dtC',m.col)}`
+  : `<div class="sect f">${dotS}Start</div>${tosFld('tosA','TOS',m.ends[0])}${nin('ntA',m.ends[0].note)}${dFld('dtA',m.ends[0])}
      <div class=divrow><hr><button class=ghost id=matchEnds>Match → both ends</button><hr></div>
-     <div class=sect>End</div>${tosFld('tosB','TOS',m.ends[1])}${nin('ntB',m.ends[1].note)}${dFld('dtB',m.ends[1])}`;
+     <div class=sect>${dotE}End</div>${tosFld('tosB','TOS',m.ends[1])}${nin('ntB',m.ends[1].note)}${dFld('dtB',m.ends[1])}`;
  p.innerHTML=`<h3>Member ${esc(m.id)}</h3>
   <div class=row><label>Profile</label><div style="display:flex;gap:6px"><input id=pf class=combo data-src=profiles value="${esc(m.profile)}" style="flex:1" autocomplete=off><button id=pickProf class="ghost${(picking&&pickKind==='profile')?' on':''}" title="Pick profile by clicking a label in the drawing">⌖ pick</button></div>${(picking&&pickKind==='profile')?'<div class="hint" style="margin-top:4px;font-style:italic;color:var(--brand)">Click a profile label in the drawing…</div>':(picking&&pickKind==='detail')?'<div class="hint" style="margin-top:4px;font-style:italic;color:#a855f7">Click a detail callout in the drawing…</div>':''}</div>
   <div class="seg2 f"><button id=rBeam class="${col?'':'on'}">Beam</button><button id=rCol class="${col?'on':''}">Column</button></div>
@@ -615,6 +650,9 @@ function panel(){
   <div class=row><button class=ghostw id=verifyBtn${m.verified?' style="border-color:#166534;color:#86efac"':''} title="Mark this member human-confirmed → 100% in the confidence report">${m.verified?'✓ Verified — human-confirmed':'Mark verified'}</button></div>
   ${mfSug.length?`<div class="row" style="border:1px solid #a855f7;border-radius:6px;padding:7px 8px;background:rgba(168,85,247,.07)"><div class=elab style="color:#c4b5fd;margin:0">Moment-frame girder · ${_lvl==='roof'?'roof':'2nd floor'} (from Frames)</div><div style="display:flex;flex-wrap:wrap;gap:5px;margin-top:5px">${mfSug.map(s=>`<button class="ghost mfsug${s===m.profile?' on':''}" data-s="${esc(s)}">${esc(s)}</button>`).join('')}</div></div>`:''}
   ${elev}
+  ${col?'':`<div class=divrow><hr><span class=sect style="margin:0">Profile position</span><hr></div>
+  <div class=hint style="margin:0 0 6px">Where the section sits on the reference line (between the end dots) — like Tekla. Top = top-of-steel (dots on the top flange).</div>
+  <div class=seg2 style="margin-top:0"><button id=posTop class="${pos==='top'?'on':''}">Top</button><button id=posMid class="${pos==='middle'?'on':''}">Middle</button><button id=posBot class="${pos==='bottom'?'on':''}">Bottom</button></div>`}
   <div class=divrow><hr><span class=sect style="margin:0">Modify geometry</span><hr></div>
   <div class=seg2 style="margin-top:0"><button id=geoEL class="${geoMode==='el'?'on':''}">Extend / Trim</button><button id=geoSplit class="${geoMode==='split'?'on':''}">Split</button></div>
   <div class=hint style="margin-top:6px">${geoMode==='el'?'Click a <b>target line</b> — another member or a grey segment. The nearest end of this member snaps to where the two lines meet (extends if short, trims if it overshoots).':geoMode==='split'?'Click a <b>point on this member</b> to cut it into two members.':'<b>Extend/Trim</b> (E) an end to meet another line · <b>Split</b> (S) at a point. <b>Esc</b> cancels.'}</div>
@@ -627,6 +665,9 @@ function panel(){
  const _gel=document.getElementById('geoEL'),_gsp=document.getElementById('geoSplit');
  if(_gel)_gel.onclick=()=>{geoMode=(geoMode==='el'?null:'el');setGeo();render();};
  if(_gsp)_gsp.onclick=()=>{geoMode=(geoMode==='split'?null:'split');setGeo();render();};
+ {const setPos=v=>edit(()=>{m.position=v;});  // profile placement on the reference line (Tekla-style); persists + re-extrudes the 3D
+  const _pt=document.getElementById('posTop'),_pm=document.getElementById('posMid'),_pb=document.getElementById('posBot');
+  if(_pt)_pt.onclick=()=>setPos('top');if(_pm)_pm.onclick=()=>setPos('middle');if(_pb)_pb.onclick=()=>setPos('bottom');}
  const wireTos=(id,o)=>{const ck=document.getElementById(id+'_ck');if(ck)ck.onchange=e=>edit(()=>{o.tosDef=e.target.checked;if(o.tosDef)o.tos=defaultTOS;});
    const inp=document.getElementById(id);if(inp)inp.onchange=e=>edit(()=>{o.tos=parseLen(e.target.value);o.tosDef=false;});};
  const wireDet=(id,o)=>{const i=document.getElementById(id);if(i)i.onchange=e=>edit(()=>{o.detail=e.target.value.trim();});
@@ -774,7 +815,7 @@ addEventListener('keydown',e=>{
  if(e.key==='Escape'&&framesOpen()){closeFrames();return;}
  if(e.key==='Escape'&&rfiOpen()){closeRFI();return;}
  if(e.key==='Escape'&&confOpen()){closeConf();return;}
- if(e.key==='Home'){e.preventDefault();fitToWindow();return;}
+ if(e.key==='Home'){e.preventDefault();if(view3d&&window.Steel3DView)window.Steel3DView.frameAll();else fitToWindow();return;}
  if(e.key==='Escape'){if(geoMode){geoMode=null;setGeo();render();return;}if(mode==='add'){mode='sel';setMode();}picking=false;pickKind='profile';pickEnd=null;selIds.clear();render();return;}
  if((e.key==='Delete'||e.key==='Backspace')&&selIds.size&&!inForm){e.preventDefault();edit(()=>{P.members=P.members.filter(m=>!selIds.has(m.id));selIds.clear();});return;}
  if(!inForm&&selIds.size===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey){const kk=e.key.toLowerCase();
@@ -795,15 +836,46 @@ document.getElementById('zRange').oninput=e=>zoomCentered(+e.target.value/100);
 const view3dApi={
  // POST the in-progress contract so the model reflects unsaved edits; throws on a bad contract.
  fetchScene:async()=>{const r=await fetch('/api/contract/'+encodeURIComponent(APP_ID)+'/scene',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({contract:C})});const j=await r.json();if(!j.ok)throw new Error(j.error||'scene render failed');return j.scene;},  // endpoint shape: {ok, scene, skipped}
- onSelect:(id,additive)=>{if(!id){selIds=new Set();}else if(additive){selIds.has(id)?selIds.delete(id):selIds.add(id);}else{selIds=new Set([id]);}render();},  // 3D pick → shared selection (Phase B4)
+ onSelect:(id,additive)=>{if(!id){selIds=new Set();}else if(additive){selIds.has(id)?selIds.delete(id):selIds.add(id);}else{selIds=new Set([id]);}render();},  // 3D pick → shared selection
+ onSelectMany:(ids)=>{selIds=new Set(ids||[]);if(mode==='add'){mode='sel';setMode();}render();},  // 3D box-select → shared selection
  getMembers:()=>P.members,                                   // raw members (wp) for snap geometry
  ptPerFt:()=>(P&&P.pt_per_ft>0?P.pt_per_ft:1),
  defaultTosMm:()=>(defaultTOS!=null?defaultTOS*25.4:0),      // editor stores default T.O.S in inches
+ geoMode:()=>geoMode,                                        // 'el' | 'split' | null — armed Trim/Extend/Split state
  onMoveMember:(id,newWp)=>{edit(()=>{const m=byId(id);if(m)m.wp=newWp;});},  // 3D drag → write wp (undoable, autosaves, syncs 2D/chip/BOM)
+ onMoveEndpoint:(id,end,wp)=>{edit(()=>{const m=byId(id);if(m&&Array.isArray(m.wp)&&m.wp.length>=2)m.wp[end]=wp;});},  // 3D end-node drag → write just that endpoint
  onElevateMember:(id,dIn)=>{edit(()=>{const m=byId(id);if(!m)return;ensureMeta(m);  // 3D Alt-drag → raise/lower T.O.S by dIn inches
    if(m.role==='column'){m.col.tos=(m.col.tos!=null?m.col.tos:defaultTOS)+dIn;m.col.bos=(m.col.bos!=null?m.col.bos:0)+dIn;m.col.tosDef=false;}  // rigid raise (bos null→0, both shift) so the column isn't stretched
    else m.ends.forEach(e=>{e.tos=(e.tos!=null?e.tos:defaultTOS)+dIn;e.tosDef=false;});});},
+ onTrimExtend:(id,targetId)=>{const m=byId(id),tm=byId(targetId);if(m&&tm){snapEnd(m,tm.wp[0],tm.wp[1]);geoMode=null;setGeo();sync3D();}},  // 3D Trim/Extend → nearest end to the target member's line
+ onSplit:(id,wp)=>{const m=byId(id);if(m){doSplit(m,wp);sync3D();}},  // 3D Split → cut at the clicked point on the member
 };
+// Re-extrude the 3D model after a structural edit (keeps the camera where it is). Selection-only
+// changes go through render()'s setSelection — only geometry mutations need a rebuild.
+function sync3D(){if(view3d&&view3dReady&&window.Steel3DView){window.Steel3DView.rebuild(false).then(()=>{window.Steel3DView.setSelection(selIds);build3DLegend();}).catch(()=>{});}}  // rebuild also refreshes the legend (an edit may add/remove a profile)
+// Build the 3D legend overlay from the live scene groups (per profile). Single-click hide/show,
+// double-click isolate — mirrors the AWARE viewer-3d legend (deferred click so dbl-click can cancel).
+let leg3dClickT=null;
+function build3DLegend(){const host=document.getElementById('m3dLegend');if(!host||!window.Steel3DView)return;
+ const groups=window.Steel3DView.getGroups();host.replaceChildren();
+ if(!groups.length){host.style.display='none';return;}
+ const hint=document.createElement('div');hint.className='lhint';hint.textContent='click: hide/show · dbl-click: isolate';host.appendChild(hint);
+ for(const g of groups){const row=document.createElement('div');row.className='lrow';row.dataset.key=g.key;
+   const sw=document.createElement('span');sw.className='lsw';sw.style.background=g.color;
+   row.append(sw,document.createTextNode(g.label));
+   row.addEventListener('click',()=>{clearTimeout(leg3dClickT);leg3dClickT=setTimeout(()=>{window.Steel3DView.toggleGroup(g.key);refresh3DLegend();},220);});
+   row.addEventListener('dblclick',e=>{e.preventDefault();clearTimeout(leg3dClickT);window.Steel3DView.soloToggle(g.key);refresh3DLegend();});
+   host.appendChild(row);}
+ host.style.display='flex';refresh3DLegend();}
+function refresh3DLegend(){if(!window.Steel3DView)return;const st=window.Steel3DView.groupState(),hidden=new Set(st.hidden);
+ document.querySelectorAll('#m3dLegend .lrow').forEach(r=>{const k=r.dataset.key;r.classList.toggle('off',hidden.has(k)||(st.solo!==null&&st.solo!==k));});}
+let bar3dWired=false;
+function seg3dActive(sel,attr,val){document.querySelectorAll(sel+' button').forEach(b=>b.classList.toggle('on',b.getAttribute(attr)===val));}
+function wire3DBar(){if(bar3dWired||!window.Steel3DView)return;bar3dWired=true;
+ document.querySelectorAll('#m3dProj button').forEach(b=>b.onclick=()=>{window.Steel3DView.setProjection(b.dataset.proj);seg3dActive('#m3dProj','data-proj',b.dataset.proj);});
+ document.querySelectorAll('#m3dMode button').forEach(b=>b.onclick=()=>{window.Steel3DView.setDisplayMode(b.dataset.mode);seg3dActive('#m3dMode','data-mode',b.dataset.mode);});
+ document.getElementById('m3dFit').onclick=()=>window.Steel3DView.frameAll();
+ document.getElementById('m3dRef').onclick=()=>{const on=!window.Steel3DView.refLine();window.Steel3DView.setRefLine(on);document.getElementById('m3dRef').classList.toggle('on',on);};}
 function applyViewState(on){            // flip the toggle + swap the canvases (no 3D side effects)
  view3d=on;
  const t2=document.getElementById('vt2d'),t3=document.getElementById('vt3d');
@@ -812,6 +884,10 @@ function applyViewState(on){            // flip the toggle + swap the canvases (
  document.getElementById('stage').style.display=on?'none':'';
  document.getElementById('stage3d').style.display=on?'block':'none';
  document.getElementById('zoombar').style.display=on?'none':'';      // zoom slider is 2D-only
+ document.getElementById('planSel').style.display=on?'none':'';      // plan selector is 2D-only (3D shows the whole model)
+ document.getElementById('m3dBar').style.display=on?'flex':'none';
+ document.getElementById('m3dCube').style.display=on?'block':'none';
+ if(!on)document.getElementById('m3dLegend').style.display='none';   // legend is shown by build3DLegend when entering 3D
 }
 async function setView(on){
  if(on){
@@ -820,8 +896,10 @@ async function setView(on){
    if(!view3dReady){window.Steel3DView.init(document.getElementById('stage3d'),view3dApi);view3dReady=true;}
    applyViewState(true);
    window.Steel3DView.show();
-   await window.Steel3DView.rebuild();
+   await window.Steel3DView.rebuild(true);   // fit the camera on entering 3D
    window.Steel3DView.setSelection(selIds);
+   wire3DBar();build3DLegend();
+   seg3dActive('#m3dProj','data-proj',window.Steel3DView.projection());seg3dActive('#m3dMode','data-mode',window.Steel3DView.mode());  // reflect persisted state
   }catch(e){                            // a failed open must not strand the UI in 3D with a blank canvas
    applyViewState(false);if(window.Steel3DView)window.Steel3DView.hide();
    toast('Could not open 3D view: '+((e&&e.message)||e));
@@ -1144,6 +1222,7 @@ function setPlan(i){C.active=i;P=C.plans[i];
  undo=P.undo||(P.undo=[]);redo=P.redo||(P.redo=[]);
  selIds=new Set();picking=false;pickKind='profile';pickEnd=null;mode='sel';geoMode=null;
  defaultTOS=(P.default_tos!=null?P.default_tos:198);
+ P.default_tos=defaultTOS;  // make the default explicit so the 3D scene + bake use the SAME TOS the editor/dots do (contractToScene falls back to 0, not 198 — keeping them in sync stops the end dots floating off the steel)
  if(!P.autofilled){autofillTOS();P.autofilled=true;}
  const ds=new Set([...(P.details||[]).map(d=>d.text),...Object.keys(C.custom_details)]);document.getElementById('detailsBtn').textContent='Details ('+ds.size+')';
  setMode();render();fitToWindow();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floless/app",
-  "version": "0.35.1",
+  "version": "0.36.0",
   "type": "module",
   "description": "Thin localhost host for floless.app — serves web/ and shells the aware CLI. No engine, no LLM.",
   "bin": {