@floless/app 0.56.0 → 0.58.0

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

@@ -32,7 +32,9 @@ const EP_PX = 4;                            // end-dot radius in screen px (scre
 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 soloGroups = new Set();                 // profile keys isolated via the legend (dbl-click; Ctrl/Shift add to the set)
+let isolatedIds = null;                     // Tekla "isolate selected": Set of ids shown exclusively, or null for off
+let connHidden = new Set();                 // explicit per-PART hide (legend connection rows) — lets a shared part-kind (weld/nut) hide per-connection by id, not per group
 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
@@ -56,12 +58,18 @@ let dimPreviewLine = null;        // reused preview line (point 1 → cursor)
 let dimLabelHost = null;          // fixed-position container for label overlays
 const dimLabelPool = [];          // reused <div> labels, one per placed dim, positioned in the loop
 let dimCandidates3d = null;       // snap candidates cached for the active placement gesture
+// ---- derived dimension overlays (the legend's DIMENSIONS toggles: bolt pitch / edge clearance / cope) ----
+let overlayDimsGroup = null;      // THREE.Group of derived-dim lines (recomputed from the scene parts, not persisted)
+const overlayLabelPool = [];      // reused <div> label chips for the overlay dims (share dimLabelHost, positioned in the loop)
+let dimParts = [];                // the dim-relevant scene elements retained from the last build (plates + copes) to derive overlays from
+const DIM_TICK = 8;               // mm: length of the 45° CAD terminator tick — shared by placed dims (refreshDims) + derived overlays (cadDim)
 
 function init(canvas, theApi) {
   if (renderer) return;               // once
   canvasEl = canvas; api = theApi;
   renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
   renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+  renderer.localClippingEnabled = true;   // enable clip planes/boxes + the work area (Tekla-style sectioning) — driven via renderer.clippingPlanes (applyClips)
   scene = new THREE.Scene();
   scene.background = new THREE.Color(0x020817); // match the app --bg (the mode change reads from the geometry, not a tint)
   perspCam = new THREE.PerspectiveCamera(50, 1, 1, 50_000_000);
@@ -70,16 +78,26 @@ function init(canvas, theApi) {
   orthoCam.up.set(0, 0, 1);
   camera = perspCam;
   controls = new OrbitControls(camera, canvas);
-  controls.enableDamping = true;
+  controls.enableDamping = false;     // CAD feel: rotate/pan stop dead on release — NO post-release inertia/drift
+  controls.zoomSpeed = 1.3;           // a little snappier so the wheel reaches a connection detail in fewer ticks
   // 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
+  // CAD re-pivot: on every orbit/zoom/pan START (OrbitControls fires 'start' for all three — incl. the wheel,
+  // BEFORE applying the gesture), move the orbit target to the DEPTH of whatever is under the cursor. Kept ON
+  // the view axis so the view never jumps — only the pivot depth changes, which is what makes the wheel converge
+  // on a connection detail in a few ticks and orbit/pan scale to it, instead of pivoting around a stale framed
+  // centre far away. ponytail: on-axis depth re-pivot, not a true off-axis orbit-about-cursor (OrbitControls
+  // always keeps the pivot screen-centred — that would need a custom control); add that only if this isn't enough.
+  controls.addEventListener('start', repivotToCursor);
+  canvas.addEventListener('wheel', onWheelHover, { capture: true, passive: true }); // keep the cursor pos fresh for the wheel-triggered re-pivot (capture → runs before OrbitControls' wheel handler)
   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);
+  overlayScene = new THREE.Scene();   // clip/work-area gizmos render here in a 2nd unclipped pass (see loop)
   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).
@@ -107,6 +125,7 @@ function init(canvas, theApi) {
   // 3D dimension tool: a group of placed-dim lines (over the steel) + a live preview line + an HTML
   // overlay host for the midpoint labels (positioned each frame so they face the camera as screen text).
   dims3dGroup = new THREE.Group(); scene.add(dims3dGroup);
+  overlayDimsGroup = new THREE.Group(); scene.add(overlayDimsGroup);   // derived dim overlays (bolt pitch / edge clearance / cope), toggled from the legend
   dimPreviewLine = new THREE.Line(new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(), new THREE.Vector3()]), new THREE.LineBasicMaterial({ color: 0x22d3ee }));
   dimPreviewLine.material.depthTest = false; dimPreviewLine.renderOrder = 997; dimPreviewLine.visible = false; scene.add(dimPreviewLine);
   dimLabelHost = document.createElement('div');
@@ -151,8 +170,16 @@ function loop() {
   rafId = requestAnimationFrame(loop);
   controls.update();
   sizeEndpoints();
+  sizeClipHandles();
   positionDimLabels();
+  positionOverlayLabels();
   renderer.render(scene, camera);
+  if (overlayScene && overlayScene.children.length) {   // 2nd pass with clipping OFF → the clip/work-area gizmos are never sectioned by any clip
+    const saved = renderer.clippingPlanes;
+    renderer.clippingPlanes = EMPTY_CLIPS; renderer.autoClear = false;
+    renderer.render(overlayScene, camera);
+    renderer.autoClear = true; renderer.clippingPlanes = saved;
+  }
   if (cube) { syncCube(); cube.renderer.render(cube.scene, cube.cam); }
 }
 
@@ -335,6 +362,34 @@ function clearRoot() {
 // member is left uncoped rather than breaking the whole scene.
 const _csgEval = new Evaluator();
 _csgEval.useGroups = false; // one solid out → the member's single material applies
+
+// The 2D cut profile (u-v plane, centred) as a rectangle with ONLY the re-entrant corner filleted — the
+// inner end (+u, away from the beam tip) on the web side (`reentrantV` sign in v), the corner AISC requires
+// radiused on a cope. Corners elsewhere stay square so the cope mouth + outer flange edges read crisp.
+function roundedCutGeometry(W, D, T, r, reentrantV) {
+  const hw = W / 2, hd = D / 2;
+  const rr = Math.max(0, Math.min(r, Math.min(hw, hd) - 0.1));
+  const pts = [[-hw, -hd], [hw, -hd], [hw, hd], [-hw, hd]]; // CCW: BL, BR, TR, TL
+  const rx = hw, ry = reentrantV * hd; // the re-entrant corner to fillet
+  const shape = new THREE.Shape();
+  shape.moveTo(pts[0][0], pts[0][1]); // BL — never the rounded corner
+  const N = pts.length;
+  for (let i = 1; i <= N; i++) {
+    const cur = pts[i % N], prev = pts[(i - 1 + N) % N], next = pts[(i + 1) % N];
+    if (rr > 0 && i < N && Math.abs(cur[0] - rx) < 1e-6 && Math.abs(cur[1] - ry) < 1e-6) {
+      const dl = Math.hypot(cur[0] - prev[0], cur[1] - prev[1]) || 1;
+      const ol = Math.hypot(next[0] - cur[0], next[1] - cur[1]) || 1;
+      shape.lineTo(cur[0] - ((cur[0] - prev[0]) / dl) * rr, cur[1] - ((cur[1] - prev[1]) / dl) * rr);
+      shape.quadraticCurveTo(cur[0], cur[1], cur[0] + ((next[0] - cur[0]) / ol) * rr, cur[1] + ((next[1] - cur[1]) / ol) * rr);
+    } else {
+      shape.lineTo(cur[0], cur[1]);
+    }
+  }
+  const g = new THREE.ExtrudeGeometry(shape, { depth: T, bevelEnabled: false, curveSegments: 8 });
+  g.translate(0, 0, -T / 2); // extrude runs 0..T along local n → centre it
+  return g;
+}
+
 function applyCopes(mesh, cuts) {
   try {
     mesh.updateMatrix(); // local TRS (root is identity → local == world mm)
@@ -342,14 +397,21 @@ function applyCopes(mesh, cuts) {
     let result = new Brush(mesh.geometry); result.updateMatrixWorld(true); // member-local, identity
     for (const cut of cuts) {
       const pad = 0.6; // over-cut so coplanar faces don't leave slivers
-      const g = new THREE.BoxGeometry(Math.max(cut.width || 1, 1) + pad, Math.max(cut.depth || 1, 1) + pad, Math.max(cut.thickness || 1, 1) + pad);
+      const W = Math.max(cut.width || 1, 1) + pad, D = Math.max(cut.depth || 1, 1) + pad, Th = Math.max(cut.thickness || 1, 1) + pad;
       const u = V(...(cut.uDir || [1, 0, 0])).normalize(), vv = V(...(cut.vDir || [0, 1, 0])).normalize();
       const n = new THREE.Vector3().crossVectors(u, vv).normalize();
       const world = new THREE.Matrix4().makeBasis(u, vv, n); world.setPosition(cut.center[0], cut.center[1], cut.center[2]);
-      const b = new Brush(g);
-      invMember.clone().multiply(world).decompose(b.position, b.quaternion, b.scale); // cut → member-local
-      b.updateMatrixWorld(true);
-      result = _csgEval.evaluate(result, b, SUBTRACTION);
+      const localM = invMember.clone().multiply(world); // cut → member-local
+      const mkBrush = (geom) => { const b = new Brush(geom); localM.decompose(b.position, b.quaternion, b.scale); b.updateMatrixWorld(true); return b; };
+      const rounded = cut.radius > 0 && !!cut.reentrantV; // re-entrant fillet (AISC); else a square cut
+      let g = rounded ? roundedCutGeometry(W, D, Th, cut.radius, cut.reentrantV) : new THREE.BoxGeometry(W, D, Th);
+      try {
+        result = _csgEval.evaluate(result, mkBrush(g), SUBTRACTION);
+      } catch (e) {
+        if (!rounded) throw e;
+        g.dispose(); g = new THREE.BoxGeometry(W, D, Th); // square-cut fallback when the fillet fights CSG
+        result = _csgEval.evaluate(result, mkBrush(g), SUBTRACTION);
+      }
       g.dispose();
     }
     mesh.geometry.dispose();
@@ -384,8 +446,15 @@ function buildFromScene(sc) {
     box.expandByObject(mesh);
   }
   sceneBox = box.clone();
+  // Retain the dim-relevant parts (plates + copes) so the legend's DIMENSIONS overlays can be derived
+  // from the resolved geometry — fin-plate holes give bolt pitch/edge clearance, cuts give cope size.
+  // (computeOverlayDims scopes the plate path to group 'shear-plate' — base/washer plates are skipped there.)
+  dimParts = (sc.elements || []).filter((el) => el && (el.kind === 'plate' || el.kind === 'cut'));
+  renderClipGizmo();   // re-anchor the selected clip's gizmo to the (possibly new) sceneBox after a rebuild
   buildGrid(box);
   buildRefLines();
+  if (isolatedIds) { isolatedIds = new Set([...isolatedIds].filter((id) => meshById.has(id))); if (!isolatedIds.size) { isolatedIds = null; if (api && api.onIsolateChange) api.onIsolateChange(false); } } // drop ids an edit removed; if none survive, exit isolation + refresh the host's Show-all button
+  if (connHidden.size) connHidden = new Set([...connHidden].filter((id) => meshById.has(id)));   // drop per-part hides whose mesh an edit removed
   applyGroupVisibility(); applyDisplayMode();
   built = true;
   if (fitPending) { fitCamera(box); fitPending = false; } // fit only on entering 3D (rebuild(true)) — NOT on every edit
@@ -462,7 +531,7 @@ function fitCamera(box, dir) {
   perspCam.position.copy(c).addScaledVector(d, dist);
   orthoCam.position.copy(c).addScaledVector(d, dist);
   const r = box.getBoundingSphere(new THREE.Sphere()).radius || dist;
-  const near = Math.max(dist / 1000, 1), far = dist + r * 4;
+  const near = Math.max(dist / 2000, 0.5), far = dist + r * 4; // small near so the wheel can zoom right up to a connection detail without clipping
   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)
@@ -470,6 +539,25 @@ function fitCamera(box, dir) {
   controls.update();
 }
 
+// CAD re-pivot (wired to OrbitControls' 'start' — fires for orbit/pan/wheel before the gesture is applied):
+// set the orbit/zoom target to the DEPTH of whatever visible mesh is under the cursor, ON the camera's view
+// axis. On-axis keeps the camera orientation (the camera was already looking along this axis), so there's no
+// jump — only the pivot distance changes, so the next orbit rotates about that point's depth and the wheel/pan
+// scale to it. Empty space → keep the current pivot (Fit / Home re-centre the model).
+function onWheelHover(e) { lastHoverXY = [e.clientX, e.clientY]; }   // capture-phase wheel → fresh cursor pos for the re-pivot (named so dispose can remove it)
+function repivotToCursor() {
+  if (!controls || !camera || !canvasEl || !lastHoverXY || !raycaster) return;
+  camera.updateMatrixWorld(); root.updateMatrixWorld(true);
+  const rect = canvasEl.getBoundingClientRect(); if (!rect.width || !rect.height) return;
+  const ndc = new THREE.Vector2(((lastHoverXY[0] - rect.left) / rect.width) * 2 - 1, -((lastHoverXY[1] - rect.top) / rect.height) * 2 + 1);
+  raycaster.setFromCamera(ndc, camera);
+  const hits = raycaster.intersectObjects([...meshById.values()].filter((m) => m.visible), false);
+  if (!hits.length) return;                                            // nothing under the cursor → leave the pivot put
+  const fwd = camera.getWorldDirection(new THREE.Vector3());
+  const depth = hits[0].point.clone().sub(camera.position).dot(fwd);   // hit distance along the view axis
+  if (depth > 1e-3) controls.target.copy(camera.position).addScaledVector(fwd, depth);
+}
+
 let rebuildSeq = 0;
 async function rebuild(fit = false) {
   if (!api) return;
@@ -479,6 +567,7 @@ async function rebuild(fit = false) {
   if (seq !== rebuildSeq) return;      // a newer rebuild superseded this one → drop the stale scene (no out-of-order apply)
   if (sc) buildFromScene(sc);
   refreshDims();                       // persisted dims appear + survive edit-rebuilds (re-coloured for the current selection)
+  try { refreshOverlayDims(); } catch (e) { console.warn('dim overlays skipped (bad part)', e); }  // a malformed part drops its overlay, never the whole rebuild (mirrors applyCopes' containment)
 }
 
 // ---- Persp/Ortho + Solid/Wire/X-ray + group visibility (parity with the AWARE viewer) ----
@@ -511,14 +600,348 @@ function applyDisplayMode() {
 function applyGroupVisibility() {
   for (const m of meshById.values()) {
     const k = m.userData && m.userData.group;
-    m.visible = !groupHidden.has(k) && (soloGroup === null || soloGroup === k);
+    const byGroup = !groupHidden.has(k) && (soloGroups.size === 0 || soloGroups.has(k));
+    const byIso = isolatedIds === null || isolatedIds.has(m.userData.id);   // isolate-selected: only the isolated ids show
+    m.visible = byGroup && byIso && !connHidden.has(m.userData.id);   // connHidden: per-part legend hide (connection rows split a shared part-kind by connection)
   }
 }
-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 toggleGroup(k) { if (groupHidden.has(k)) groupHidden.delete(k); else groupHidden.add(k); soloGroups.clear(); applyGroupVisibility(); rebuildEndpoints(); refreshOverlayDims(); refreshDims(); }
+// Hide/show a SET of groups in one pass (a legend type-category master toggle) — deterministic (not a flip),
+// so "hide all" / "show all" for the category is exact. Clears solo, like toggleGroup.
+function setGroupsHidden(keys, hidden) { for (const k of (keys || [])) { if (hidden) groupHidden.add(k); else groupHidden.delete(k); } soloGroups.clear(); applyGroupVisibility(); rebuildEndpoints(); refreshOverlayDims(); refreshDims(); }
+// Hide/show specific PART ids (a legend connection row / connection master). Per-id so a connection's own
+// nuts/welds toggle independently of the other connection's (the part-kind group is shared across joints).
+function setIdsHidden(ids, hidden) { for (const id of (ids || [])) { if (hidden) connHidden.add(id); else connHidden.delete(id); } applyGroupVisibility(); rebuildEndpoints(); refreshOverlayDims(); refreshDims(); }
+// Isolate an explicit SET of profile groups (the editor's legend builds it from Ctrl/Shift dbl-clicks, Explorer-style).
+function setSoloGroups(keys) { soloGroups = new Set((keys || []).filter((k) => k != null)); if (soloGroups.size) groupHidden.clear(); applyGroupVisibility(); rebuildEndpoints(); refreshOverlayDims(); refreshDims(); }
+function soloToggle(k) { setSoloGroups(soloGroups.size === 1 && soloGroups.has(k) ? [] : [k]); }   // plain dbl-click: isolate just this group (or clear if it's already the only one)
+function showAllGroups() { groupHidden.clear(); soloGroups.clear(); isolatedIds = null; connHidden.clear(); applyGroupVisibility(); rebuildEndpoints(); refreshOverlayDims(); refreshDims(); if (api && api.onIsolateChange) api.onIsolateChange(false); }
+function groupState() { return { hidden: [...groupHidden], solo: [...soloGroups] }; }
+// Tekla "isolate selected": show ONLY the currently-selected parts (a snapshot taken now — distinct from
+// soloToggle, which isolates a whole PROFILE group from the legend). clearIsolation / showAllGroups restore all.
+function isolateSelected() { if (!selIds.size) return false; isolatedIds = new Set(selIds); applyGroupVisibility(); rebuildEndpoints(); refreshOverlayDims(); refreshDims(); updateStatusChip(); if (api && api.onIsolateChange) api.onIsolateChange(true); return true; }
+function clearIsolation() { if (isolatedIds === null) return; isolatedIds = null; applyGroupVisibility(); rebuildEndpoints(); refreshOverlayDims(); refreshDims(); updateStatusChip(); if (api && api.onIsolateChange) api.onIsolateChange(false); }
+function isIsolated() { return isolatedIds !== null; }
 function getGroups() { return sceneGroups.map((g) => ({ ...g })); }
+
+// ---- clip planes / clip boxes (Tekla-style sectioning) ----
+// three.js clips a fragment whose SIGNED DISTANCE to a Plane is negative — so the normal side is KEPT. With the
+// default union behaviour a fragment is removed if it's clipped by ANY plane → kept only on the keep-side of ALL
+// of them. So a clip plane = 1 plane (keep the normal side); a clip box = 6 INWARD planes (keep inside). They all
+// live in renderer.clippingPlanes (GLOBAL): clips survive scene rebuilds (renderer-level, not per-material) and
+// clip the grid/dims/markers too, like Tekla. The ViewCube has its own renderer → it's never clipped.
+let overlayScene = null;              // clip/work-area gizmos live here, rendered in a 2nd UNCLIPPED pass so a clip never sections its own (or another's) handles
+let clips = [];                       // each clip stores its SOURCE geom (plane: n+point; box: Box3) + derived .planes
+let workArea = null;                  // the single work area (a clip box with a visible boundary) — set by the work-area controls
+let clipSeq = 0, clipMode = null;     // clipMode: 'plane' (click a face) | 'box' (2-corner draw) | null
+let selectedClipIds = new Set();      // the clips whose outline + drag handles show in 3D (multi-select like parts/dims)
+let clipBoxDraft = null;              // { a:[x,y] } during a 2-point clip-box draw
+let clipGizmo = null;                 // THREE.Group: the selected clip's outline + drag handles
+let clipPreview = null;               // THREE.Box3Helper while drawing a clip box
+const EMPTY_CLIPS = Object.freeze([]);
+const CLIP_PLANE_COLOR = 0x3b82f6, CLIP_BOX_COLOR = 0x93c5fd;   // brand blue (plane) / lighter blue (box) — match the legend swatches
+function applyClips() {
+  if (!renderer) return;
+  const active = clips.filter((c) => c.enabled).flatMap((c) => c.planes);
+  if (workArea && workArea.enabled) active.push(...workArea.planes);   // the work area sections the view too
+  renderer.clippingPlanes = active.length ? active : EMPTY_CLIPS;
+}
+// 6 inward planes (keep INSIDE) for an axis-aligned Box3 → a section/clip box.
+function boxToPlanes(b) {
+  return [
+    new THREE.Plane(new THREE.Vector3(-1, 0, 0), b.max.x), new THREE.Plane(new THREE.Vector3(1, 0, 0), -b.min.x),
+    new THREE.Plane(new THREE.Vector3(0, -1, 0), b.max.y), new THREE.Plane(new THREE.Vector3(0, 1, 0), -b.min.y),
+    new THREE.Plane(new THREE.Vector3(0, 0, -1), b.max.z), new THREE.Plane(new THREE.Vector3(0, 0, 1), -b.min.z),
+  ];
+}
+function rebuildClipPlanes(c) {        // recompute a clip's .planes from its editable source geometry (after a handle drag)
+  c.planes = c.kind === 'box' ? boxToPlanes(c.box) : [new THREE.Plane().setFromNormalAndCoplanarPoint(c.n, c.point)];
+}
+function setClipMode(m) {               // arm/disarm a clip pick: 'plane' (click a face) | 'box' (draw 2 corners) | null
+  if (m && dimMode3d) toggleDimTool();
+  clipMode = (m === 'plane' || m === 'box') ? m : null;
+  clipBoxDraft = null; setClipPreview(null);
+  if (canvasEl) canvasEl.style.cursor = clipMode ? 'crosshair' : 'default';
+  updateStatusChip();
+  if (api && api.onClipModeChange) api.onClipModeChange(clipMode);
+  return clipMode;
+}
+function clipModeOn() { return clipMode; }
+// A clip plane from a clicked surface (screen px): keep the camera-far side. Selects the new clip. Stays armed.
+function addClipPlaneAtScreen(cx, cy) {
+  camera.updateMatrixWorld(); root.updateMatrixWorld(true);
+  const rect = canvasEl.getBoundingClientRect(); if (!rect.width || !rect.height) return null;
+  const ndc = new THREE.Vector2(((cx - rect.left) / rect.width) * 2 - 1, -((cy - rect.top) / rect.height) * 2 + 1);
+  raycaster.setFromCamera(ndc, camera);
+  const hit = raycaster.intersectObjects([...meshById.values()].filter((m) => m.visible), false)[0];
+  if (!hit || !hit.face) return null;       // missed a face → no plane (the user can click again)
+  const n = hit.face.normal.clone().transformDirection(hit.object.matrixWorld).normalize();  // face normal → world
+  if (n.dot(camera.position.clone().sub(hit.point)) > 0) n.negate();                          // point AWAY from the camera → keep the FAR side, cut away what's between you and the clicked surface (reveal the section)
+  if (api && api.beginClipEdit) api.beginClipEdit();   // undoable
+  const id = 'clip' + (++clipSeq);
+  const c = { id, kind: 'plane', enabled: true, n: n.clone(), point: hit.point.clone(), planes: [], label: 'Plane ' + clipSeq };
+  rebuildClipPlanes(c); clips.push(c);
+  applyClips(); selectClip(id); if (api && api.onClipsChange) api.onClipsChange();
+  return id;
+}
+function addClipBoxFromBox(box) {       // commit a clip box from an explicit Box3 (the 2-corner draw) — selects it
+  if (!box || box.isEmpty()) return null;
+  if (api && api.beginClipEdit) api.beginClipEdit();   // undoable
+  const id = 'clip' + (++clipSeq);
+  const c = { id, kind: 'box', enabled: true, box: box.clone(), planes: [], label: 'Box ' + clipSeq };
+  rebuildClipPlanes(c); clips.push(c);
+  applyClips(); selectClip(id); if (api && api.onClipsChange) api.onClipsChange();
+  return id;
+}
+function addClipBox(pad = 150) {        // convenience: a clip box from the selection's bounds (or the whole model)
+  const box = new THREE.Box3();
+  if (selIds.size) for (const id of selIds) { const m = meshById.get(id); if (m && m.visible) box.expandByObject(m); }
+  if (box.isEmpty()) box.copy(sceneBox);
+  if (box.isEmpty()) return null;
+  box.expandByScalar(pad);
+  return addClipBoxFromBox(box);
+}
+function toggleClip(id, on) { const c = clips.find((x) => x.id === id); if (!c) return; if (api && api.beginClipEdit) api.beginClipEdit(); c.enabled = on === undefined ? !c.enabled : !!on; applyClips(); renderClipGizmo(); if (api && api.onClipsChange) api.onClipsChange(); }
+// Rename a clip. Returns false if the name is empty or already used by ANOTHER clip (case-insensitive) — the
+// caller (legend inline edit) keeps the old name + warns. Undoable.
+function renameClip(id, name) {
+  const c = clips.find((x) => x.id === id); if (!c) return false;
+  const nm = String(name || '').trim(); if (!nm) return false;
+  if (clips.some((x) => x.id !== id && x.label.toLowerCase() === nm.toLowerCase())) return false;   // name taken
+  if (api && api.beginClipEdit) api.beginClipEdit();
+  c.label = nm; if (api && api.onClipsChange) api.onClipsChange();
+  return true;
+}
+function removeClip(id) { if (!clips.some((c) => c.id === id)) return; if (api && api.beginClipEdit) api.beginClipEdit(); clips = clips.filter((c) => c.id !== id); selectedClipIds.delete(id); applyClips(); renderClipGizmo(); if (api && api.onClipsChange) api.onClipsChange(); }
+function clearClips() { if (!clips.length) { if (api && api.onClipsChange) api.onClipsChange(); return; } if (api && api.beginClipEdit) api.beginClipEdit(); clips = []; selectedClipIds.clear(); applyClips(); renderClipGizmo(); if (api && api.onClipsChange) api.onClipsChange(); }
+function getClips() { return clips.map((c) => ({ id: c.id, kind: c.kind, enabled: c.enabled, label: c.label, selected: selectedClipIds.has(c.id), size: c.box ? [c.box.max.x - c.box.min.x, c.box.max.y - c.box.min.y, c.box.max.z - c.box.min.z].map((v) => Math.round(v)) : null, planeConst: c.kind === 'plane' && c.planes[0] ? Math.round(c.planes[0].constant) : null })); }
+function setSelectedClips(ids) { selectedClipIds = new Set((ids || []).filter((id) => clips.some((c) => c.id === id))); renderClipGizmo(); if (api && api.onClipsChange) api.onClipsChange(); }   // multi-select (the editor builds the set from Ctrl/Shift clicks)
+function selectClip(id) { setSelectedClips(id ? [id] : []); }
+function selectedClips() { return [...selectedClipIds]; }
+function deleteSelectedClips() { if (!selectedClipIds.size) return; if (api && api.beginClipEdit) api.beginClipEdit(); clips = clips.filter((c) => !selectedClipIds.has(c.id)); selectedClipIds.clear(); applyClips(); renderClipGizmo(); if (api && api.onClipsChange) api.onClipsChange(); }   // Del key
+// ---- undo/redo: clips + work area are view-state (not in the contract), so the editor's snapshot grabs this
+// serialized form and restores it via setClipState. Each manipulation calls api.beginClipEdit() FIRST (pushes a
+// pre-edit snapshot); the editor's Ctrl+Z/Y then restores clips alongside the contract.
+function clipState() {
+  return {
+    clips: clips.map((c) => c.kind === 'box'
+      ? { id: c.id, kind: 'box', enabled: c.enabled, label: c.label, box: { min: c.box.min.toArray(), max: c.box.max.toArray() } }
+      : { id: c.id, kind: 'plane', enabled: c.enabled, label: c.label, n: c.n.toArray(), point: c.point.toArray() }),
+    workArea: workArea ? { enabled: workArea.enabled, box: { min: workArea.box.min.toArray(), max: workArea.box.max.toArray() } } : null,
+    selected: [...selectedClipIds], seq: clipSeq,
+  };
+}
+function setClipState(s) {
+  s = s || { clips: [], workArea: null, selected: [], seq: clipSeq };
+  clips = (s.clips || []).map((d) => {
+    const c = d.kind === 'box'
+      ? { id: d.id, kind: 'box', enabled: d.enabled, label: d.label, box: new THREE.Box3(new THREE.Vector3(...d.box.min), new THREE.Vector3(...d.box.max)), planes: [] }
+      : { id: d.id, kind: 'plane', enabled: d.enabled, label: d.label, n: new THREE.Vector3(...d.n), point: new THREE.Vector3(...d.point), planes: [] };
+    rebuildClipPlanes(c); return c;
+  });
+  if (s.workArea) { const b = new THREE.Box3(new THREE.Vector3(...s.workArea.box.min), new THREE.Vector3(...s.workArea.box.max)); workArea = { enabled: s.workArea.enabled, box: b, planes: boxToPlanes(b) }; }
+  else workArea = null;
+  selectedClipIds = new Set(s.selected || []);
+  if (typeof s.seq === 'number') clipSeq = Math.max(clipSeq, s.seq);
+  applyClips(); renderClipGizmo(); renderWorkArea();
+  if (api && api.onClipsChange) api.onClipsChange();
+}
+
+// ---- clip gizmo: the selected clip's outline + draggable handles (a plane move-arrow, or 6 box face handles) ----
+function clearClipGizmo() {
+  if (!clipGizmo) return;
+  for (const o of [...clipGizmo.children]) { clipGizmo.remove(o); if (o.geometry) o.geometry.dispose(); const mm = Array.isArray(o.material) ? o.material : (o.material ? [o.material] : []); mm.forEach((m) => m.dispose()); }
+  if (overlayScene) overlayScene.remove(clipGizmo); clipGizmo = null;
+}
+const FACE_AXES = [{ axis: 'x', sign: 1 }, { axis: 'x', sign: -1 }, { axis: 'y', sign: 1 }, { axis: 'y', sign: -1 }, { axis: 'z', sign: 1 }, { axis: 'z', sign: -1 }];
+function renderClipGizmo() {
+  clearClipGizmo();
+  if (!selectedClipIds.size || !overlayScene) return;
+  clipGizmo = new THREE.Group(); overlayScene.add(clipGizmo);
+  // The SAME manipulator for a clip plane AND each clip-box face: a translucent disc lying in the plane/face +
+  // a normal arrow (stem + cone) showing the drag direction. Grab the disc or the arrow to slide it along `normal`.
+  const addHandle = (anchor, normal, ud, color) => {
+    const disc = new THREE.Mesh(new THREE.CircleGeometry(1, 32), new THREE.MeshBasicMaterial({ color, transparent: true, opacity: 0.32, side: THREE.DoubleSide }));
+    disc.material.depthTest = false; disc.renderOrder = 998; disc.position.copy(anchor); disc.quaternion.setFromUnitVectors(_ZA, normal); disc.userData = { clipHandle: true, disc: true, ...ud }; clipGizmo.add(disc);
+    const stem = new THREE.Line(new THREE.BufferGeometry().setFromPoints([anchor.clone(), anchor.clone()]), new THREE.LineBasicMaterial({ color })); stem.material.depthTest = false; stem.renderOrder = 998; stem.userData = { clipStem: true, baseHp: anchor.clone(), normal: normal.clone() }; clipGizmo.add(stem);
+    const cone = new THREE.Mesh(new THREE.ConeGeometry(0.5, 1.5, 18), new THREE.MeshBasicMaterial({ color })); cone.material.depthTest = false; cone.renderOrder = 999; cone.quaternion.setFromUnitVectors(_YA, normal); cone.userData = { clipHandle: true, arrow: true, baseHp: anchor.clone(), normal: normal.clone(), ...ud }; clipGizmo.add(cone);
+  };
+  for (const c of clips) {                       // a gizmo for EACH selected clip (the handles carry clipId so a drag knows which one)
+    if (!selectedClipIds.has(c.id)) continue;
+    if (c.kind === 'box') {
+      const hb = new THREE.Box3Helper(c.box, new THREE.Color(CLIP_BOX_COLOR)); hb.material.depthTest = false; hb.renderOrder = 996; clipGizmo.add(hb);
+      const ctr = c.box.getCenter(new THREE.Vector3());
+      for (const f of FACE_AXES) {
+        const p = ctr.clone(); p[f.axis] = f.sign > 0 ? c.box.max[f.axis] : c.box.min[f.axis];               // face centre
+        const nf = new THREE.Vector3(f.axis === 'x' ? f.sign : 0, f.axis === 'y' ? f.sign : 0, f.axis === 'z' ? f.sign : 0);  // OUTWARD face normal = drag axis
+        addHandle(p, nf, { face: f, clipId: c.id }, CLIP_BOX_COLOR);
+      }
+    } else {
+      const ctr = sceneBox.getCenter(new THREE.Vector3());
+      const d = c.n.dot(ctr) + c.planes[0].constant, hp = ctr.clone().addScaledVector(c.n, -d);   // model centre projected onto the plane
+      const r = (sceneBox.getSize(new THREE.Vector3()).length() * 0.28) || 800;   // a moderate plane "patch" around the handle — shows the plane without spanning the whole view
+      const u = (Math.abs(c.n.z) < 0.9 ? new THREE.Vector3(0, 0, 1) : new THREE.Vector3(1, 0, 0)).cross(c.n).normalize(), v = c.n.clone().cross(u).normalize();
+      const sq = [hp.clone().addScaledVector(u, r).addScaledVector(v, r), hp.clone().addScaledVector(u, -r).addScaledVector(v, r), hp.clone().addScaledVector(u, -r).addScaledVector(v, -r), hp.clone().addScaledVector(u, r).addScaledVector(v, -r)];
+      const outline = new THREE.LineLoop(new THREE.BufferGeometry().setFromPoints(sq), new THREE.LineBasicMaterial({ color: CLIP_PLANE_COLOR })); outline.material.depthTest = false; outline.renderOrder = 996; clipGizmo.add(outline);
+      addHandle(hp, c.n, { plane: true, clipId: c.id }, CLIP_PLANE_COLOR);   // disc-in-plane + normal arrow (same manipulator as the box faces)
+    }
+  }
+  sizeClipHandles();
+}
+function sizeClipHandles() {            // screen-constant handles (like the endpoint dots): box pads ~10px; plane disc ~14px + an arrow offset ~34px off the plane
+  if (!clipGizmo) return;
+  for (const h of clipGizmo.children) {
+    const ud = h.userData; if (!ud) continue;
+    if (ud.arrow) { const off = pxToWorldAt(34, ud.baseHp); h.position.copy(ud.baseHp).addScaledVector(ud.normal, off); h.scale.setScalar(pxToWorldAt(11, h.position)); }
+    else if (ud.disc) h.scale.setScalar(pxToWorldAt(14, h.position));
+    else if (ud.clipHandle) h.scale.setScalar(pxToWorldAt(10, h.position));   // box face pads
+    else if (ud.clipStem) h.geometry.setFromPoints([ud.baseHp, ud.baseHp.clone().addScaledVector(ud.normal, pxToWorldAt(34, ud.baseHp))]);  // stem from the plane to the cone
+  }
+}
+function setClipPreview(box) {          // ghost wireframe while drawing a clip box (null clears it)
+  if (clipPreview) { if (overlayScene) overlayScene.remove(clipPreview); clipPreview.geometry.dispose(); clipPreview.material.dispose(); clipPreview = null; }
+  if (!box || box.isEmpty() || !overlayScene) return;
+  clipPreview = new THREE.Box3Helper(box.clone(), new THREE.Color(CLIP_BOX_COLOR)); clipPreview.material.depthTest = false; clipPreview.renderOrder = 997; overlayScene.add(clipPreview);
+}
+// Screen-space nearest clip handle (mesh) within a px tolerance, or null — like pickEndpoint.
+function pickClipHandle(cx, cy) {
+  if (!clipGizmo) return null;
+  camera.updateMatrixWorld();
+  const rect = canvasEl.getBoundingClientRect(), px = cx - rect.left, py = cy - rect.top;
+  let best = null, bestD = 16;
+  for (const h of clipGizmo.children) {
+    if (!h.userData || !h.userData.clipHandle) continue;
+    const v = h.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, dd = Math.hypot(sx - px, sy - py);
+    if (dd < bestD) { bestD = dd; best = h; }
+  }
+  return best;
+}
+// test helper: the selected clip's handles projected to client px (so an E2E can drag a specific one)
+function clipHandlesScreen() {
+  if (!clipGizmo || !canvasEl) return [];
+  camera.updateMatrixWorld();
+  const rect = canvasEl.getBoundingClientRect(), out = [];
+  for (const h of clipGizmo.children) {
+    if (!h.userData || !h.userData.clipHandle) continue;
+    const v = h.position.clone().project(camera);
+    out.push({ plane: !!h.userData.plane, axis: h.userData.face ? h.userData.face.axis : null, sign: h.userData.face ? h.userData.face.sign : 0, x: rect.left + (v.x * 0.5 + 0.5) * rect.width, y: rect.top + (-v.y * 0.5 + 0.5) * rect.height, behind: v.z > 1 });
+  }
+  return out;
+}
+// t along the line P + t*u (u unit) at the point closest to the cursor ray — drives handle dragging.
+function lineClosestT(P, u, ray) {
+  const w0 = P.clone().sub(ray.origin), b = u.dot(ray.direction), e = ray.direction.dot(w0), d = u.dot(w0), cc = ray.direction.dot(ray.direction);
+  const denom = cc - b * b; if (Math.abs(denom) < 1e-6) return d;     // line ∥ ray → fall back to projecting w0 on u
+  return (b * e - cc * d) / denom;
+}
+function rayAt(cx, cy) {
+  const rect = canvasEl.getBoundingClientRect();
+  raycaster.setFromCamera(new THREE.Vector2(((cx - rect.left) / rect.width) * 2 - 1, -((cy - rect.top) / rect.height) * 2 + 1), camera);
+  return raycaster.ray;
+}
+function startClipDrag(h, e) {          // h = the picked handle mesh; set up a drag along its axis
+  const c = clips.find((x) => x.id === h.userData.clipId); if (!c) { controls.enabled = true; return; }
+  const u = h.userData.plane ? c.n.clone() : new THREE.Vector3(h.userData.face.axis === 'x' ? 1 : 0, h.userData.face.axis === 'y' ? 1 : 0, h.userData.face.axis === 'z' ? 1 : 0);
+  const lineP = h.position.clone(), t0 = lineClosestT(lineP, u, rayAt(e.clientX, e.clientY));
+  pending = h.userData.plane
+    ? { clipDrag: true, clip: c, plane: true, u, lineP, t0, basePoint: c.point.clone(), prePoint: c.point.clone() }
+    : { clipDrag: true, clip: c, face: h.userData.face, u, lineP, t0, startCoord: h.userData.face.sign > 0 ? c.box.max[h.userData.face.axis] : c.box.min[h.userData.face.axis], preBox: c.box.clone() };
+  dragging = null;
+}
+function onMoveClip(e) {
+  if (!dragging && Math.hypot(e.clientX - downXY[0], e.clientY - downXY[1]) <= DRAG_TOL_PX) return;
+  if (!dragging && api && api.beginClipEdit) api.beginClipEdit();   // first real move → snapshot the pre-drag state for undo
+  dragging = pending;
+  const c = pending.clip, t = lineClosestT(pending.lineP, pending.u, rayAt(e.clientX, e.clientY)), delta = t - pending.t0;
+  if (pending.plane) { c.point = pending.basePoint.clone().addScaledVector(pending.u, delta); }
+  else {
+    const f = pending.face; let val = pending.startCoord + delta;
+    if (f.sign > 0) c.box.max[f.axis] = Math.max(val, c.box.min[f.axis] + 1);   // keep min < max
+    else c.box.min[f.axis] = Math.min(val, c.box.max[f.axis] - 1);
+  }
+  rebuildClipPlanes(c); applyClips(); renderClipGizmo();
+  if (readout) {   // live readout near the cursor: the box dimension along the drag axis, or the plane's offset moved
+    readout._dist.textContent = (pending.plane ? (delta / FT_MM) : ((c.box.max[pending.face.axis] - c.box.min[pending.face.axis]) / FT_MM)).toFixed(2) + ' ft';
+    readout._type.textContent = pending.plane ? ' ⟂' : ' ' + pending.face.axis.toUpperCase();
+    readout.style.left = (e.clientX + 14) + 'px'; readout.style.top = (e.clientY + 14) + 'px'; readout.style.display = 'block';
+  }
+}
+// 3-step clip-box draw: click the two FOOTPRINT corners on the floor, then move up/down to PULL the height and
+// click to commit (CAD "rectangle then extrude"). clipBoxDraft: {a} → {a,b} → committed.
+const clipBoxFloorZ = () => (sceneBox.isEmpty() ? 0 : sceneBox.min.z);
+function clipBoxFrom(a, b, zlo, ztop) {
+  return new THREE.Box3(new THREE.Vector3(Math.min(a[0], b[0]), Math.min(a[1], b[1]), Math.min(zlo, ztop)), new THREE.Vector3(Math.max(a[0], b[0]), Math.max(a[1], b[1]), Math.max(zlo, ztop)));
+}
+// the cursor's height above the floor — the closest point on the vertical line through the footprint centre to
+// the cursor ray (works in any non-top view; a top view can't define a height so it stays ~flat there).
+function clipBoxHeightAt(cx, cy) {
+  const zlo = clipBoxFloorZ(), a = clipBoxDraft.a, b = clipBoxDraft.b;
+  const P = new THREE.Vector3((a[0] + b[0]) / 2, (a[1] + b[1]) / 2, zlo);
+  return zlo + Math.max(lineClosestT(P, new THREE.Vector3(0, 0, 1), rayAt(cx, cy)), 1);
+}
+function onClipBoxClick(e) {
+  const zlo = clipBoxFloorZ();
+  if (!clipBoxDraft) {                                                  // corner 1
+    const g = rayToPlane(e.clientX, e.clientY, zlo); if (!g) return;
+    clipBoxDraft = { a: [g[0], g[1]], b: null }; updateStatusChip(); return;
+  }
+  if (!clipBoxDraft.b) {                                                // corner 2 → footprint set; enter height mode
+    const g = rayToPlane(e.clientX, e.clientY, zlo); if (!g) return;
+    if (Math.abs(g[0] - clipBoxDraft.a[0]) < 1 && Math.abs(g[1] - clipBoxDraft.a[1]) < 1) return;   // ignore a same-point 2nd click
+    clipBoxDraft.b = [g[0], g[1]]; updateStatusChip(); return;
+  }
+  const box = clipBoxFrom(clipBoxDraft.a, clipBoxDraft.b, zlo, clipBoxHeightAt(e.clientX, e.clientY));   // 3rd click → commit the height
+  clipBoxDraft = null; setClipPreview(null); setClipMode(null);
+  if (box.min.x < box.max.x && box.min.y < box.max.y && box.min.z < box.max.z) addClipBoxFromBox(box);
+}
+function clipBoxPreviewAt(cx, cy) {     // live preview: a flat footprint rectangle while picking corners, then the pulled height
+  if (clipMode !== 'box' || !clipBoxDraft) return;
+  const zlo = clipBoxFloorZ();
+  if (!clipBoxDraft.b) {
+    const g = rayToPlane(cx, cy, zlo); if (!g) { setClipPreview(null); return; }
+    setClipPreview(clipBoxFrom(clipBoxDraft.a, [g[0], g[1]], zlo, zlo));        // flat rectangle on the floor
+  } else {
+    setClipPreview(clipBoxFrom(clipBoxDraft.a, clipBoxDraft.b, zlo, clipBoxHeightAt(cx, cy)));
+  }
+}
+
+// ---- working area (Tekla-style) ----
+// One box that bounds the view: shown as a wireframe cuboid AND it sections the model (parts outside it hide),
+// composing with any clip planes/boxes through applyClips (workArea.planes are added when enabled). "Set to all
+// objects" = the model bounds; "define from selection" = a padded box around the selection.
+let workAreaHelper = null;            // THREE.Box3Helper wireframe for the work area (recreated on each box change)
+function renderWorkArea() {
+  if (workAreaHelper) { if (overlayScene) overlayScene.remove(workAreaHelper); workAreaHelper.geometry.dispose(); workAreaHelper.material.dispose(); workAreaHelper = null; }
+  if (!workArea || !workArea.enabled || workArea.box.isEmpty() || !overlayScene) return;
+  workAreaHelper = new THREE.Box3Helper(workArea.box, new THREE.Color(0x3b82f6));
+  workAreaHelper.material.depthTest = false; workAreaHelper.renderOrder = 995; // unclipped overlay pass keeps it visible through any clip
+  overlayScene.add(workAreaHelper);
+}
+function setWorkAreaBox(box) {
+  if (!box || box.isEmpty()) return false;
+  if (api && api.beginClipEdit) api.beginClipEdit();   // undoable
+  workArea = { enabled: true, planes: boxToPlanes(box), box: box.clone() };
+  applyClips(); renderWorkArea();
+  if (api && api.onWorkAreaChange) api.onWorkAreaChange(workAreaState());
+  return true;
+}
+function workAreaSetAll() { return setWorkAreaBox(sceneBox.clone()); }                  // "set work area to all objects" = model bounds
+function workAreaFromSelection(pad = 150) {                                              // define a new work area around the selection
+  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()) return false; box.expandByScalar(pad); return setWorkAreaBox(box);
+}
+function workAreaToggle(on) {
+  if (!workArea) return on === false ? false : workAreaSetAll();                         // first toggle-on with no box → bound the whole model
+  if (api && api.beginClipEdit) api.beginClipEdit();   // undoable
+  workArea.enabled = on === undefined ? !workArea.enabled : !!on;
+  applyClips(); renderWorkArea();
+  if (api && api.onWorkAreaChange) api.onWorkAreaChange(workAreaState());
+  return workArea.enabled;
+}
+function clearWorkArea() { if (api && api.beginClipEdit && workArea) api.beginClipEdit(); workArea = null; applyClips(); renderWorkArea(); if (api && api.onWorkAreaChange) api.onWorkAreaChange(null); }
+function workAreaState() { return workArea ? { on: workArea.enabled } : null; }
+
 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])); }
@@ -553,9 +976,13 @@ function panView(dx, dy) { // dx/dy in "steps" along the camera's screen right/u
   camera.position.add(move); controls.target.add(move); controls.update();
 }
 const ARROWS = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, 1], ArrowDown: [0, -1] };
+const VIEW_KEYS = { t: 'top', f: 'front', r: 'right', b: 'back', l: 'left' };   // single-key ortho views, mirrors the ViewCube + AWARE viewer-3d
 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 (pending && pending.clipDrag && e.key === 'Escape') { e.preventDefault(); const p = pending; if (p.plane) p.clip.point = p.prePoint; else p.clip.box.copy(p.preBox); rebuildClipPlanes(p.clip); applyClips(); renderClipGizmo(); pending = dragging = null; if (controls) controls.enabled = true; if (readout) readout.style.display = 'none'; return; } // Esc mid-drag → undo the handle move
+  if (clipMode && e.key === 'Escape') { e.preventDefault(); if (clipMode === 'box' && clipBoxDraft) { if (clipBoxDraft.b) clipBoxDraft.b = null; else clipBoxDraft = null; setClipPreview(null); updateStatusChip(); } else setClipMode(null); return; } // Esc steps back: height→footprint→cancel, else disarms the pick
+  if (isolatedIds && e.key === 'Escape' && !dimMode3d) { e.preventDefault(); clearIsolation(); return; } // Esc exits isolate-selected (the dim tool's own Esc wins while it's armed)
   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 k = e.key.toLowerCase();
   // Don't touch the dim tool while a member gesture (drag / box-select) owns the shared marker/readout —
@@ -566,6 +993,8 @@ function onKey(e) {
     if (k === 'escape') { e.preventDefault(); if (dimDraft3d) { dimDraft3d = null; dimPreviewLine.visible = false; readout.style.display = 'none'; } else toggleDimTool(); return; } // Esc: cancel the in-progress dim, else exit the tool
     if (k === 'f' || k === 'x' || k === 'y' || k === 'z') { e.preventDefault(); setDimAxis(k === 'f' ? 'free' : k); reflectDimAxisBar(); return; } // sticky axis: Free / X / Y / Z
   }
+  // Named-view shortcuts mirror the ViewCube faces (parity with AWARE viewer-3d): T/F/R/B/L snap to an ortho view.
+  if (VIEW_KEYS[k] && !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey) { e.preventDefault(); applyView(VIEW_KEYS[k]); return; }
   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°
@@ -576,7 +1005,7 @@ function onKey(e) {
 function toggleDimTool() {
   dimMode3d = !dimMode3d;
   if (!dimMode3d) { dimDraft3d = null; dimCandidates3d = null; dimPreviewLine.visible = false; marker.visible = false; readout.style.display = 'none'; canvasEl.style.cursor = 'default'; }
-  else { controls.enabled = true; canvasEl.style.cursor = 'crosshair'; }  // show the crosshair on arm, before the first mousemove
+  else { if (clipMode) setClipMode(null); controls.enabled = true; canvasEl.style.cursor = 'crosshair'; }  // arming the dim tool disarms the clip pick (they share the left-click + Esc); shows the crosshair before the first mousemove
   reflectDimBar();
   return dimMode3d;
 }
@@ -607,7 +1036,7 @@ function onDblClick(e) {
   if (mesh.geometry && !mesh.geometry.boundingBox) mesh.geometry.computeBoundingBox();
   const s = mesh.geometry && mesh.geometry.boundingBox ? mesh.geometry.boundingBox.getSize(new THREE.Vector3()) : V(400, 400, 400);
   const sect = Math.max(40, Math.min(s.x, s.y, s.z)); // the part's smallest extent ≈ a section / plate scale
-  const half = Math.min(Math.max(sect * 3, 300), 2500); // a detail-scale zoom box (clamped sane)
+  const half = Math.min(Math.max(sect * 3, 120), 2500); // a detail-scale zoom box — floor lowered so dbl-clicking a connection zooms in tight
   const viewDir = camera.position.clone().sub(controls.target).normalize(); // keep the current view orientation
   fitCamera(new THREE.Box3().setFromCenterAndSize(p, new THREE.Vector3(half * 2, half * 2, half * 2)), viewDir.lengthSq() > 0.5 ? viewDir : undefined);
 }
@@ -670,20 +1099,53 @@ function sizeEndpoints() {
 }
 
 // ---- placed 3D dimensions ----
-// Rebuild the placed-dim lines from the editor's dims3d (the single source of truth). Lines render
-// depthTest:false so they're never buried; the selected dim draws amber. Labels are HTML overlays
-// (pool below), so only the line geometry is rebuilt here.
+// 45° CAD terminator ticks at each end of a placed dim line (p1,p2 world arrays). The tick lies in the plane
+// of the line and world-up — perpendicular biased to vertical (or world-X when the line is itself vertical) —
+// so a user-drawn dim reads like the derived overlays' ticks. Returns the 2 tick segments' endpoints (4 pts).
+function dimTicks(p1, p2) {
+  const a = new THREE.Vector3(...p1), b = new THREE.Vector3(...p2), dir = b.clone().sub(a);
+  if (dir.lengthSq() < 1e-9) return [];
+  dir.normalize();
+  let perp = new THREE.Vector3(0, 0, 1).addScaledVector(dir, -dir.z);          // world-up with its along-line component removed
+  if (perp.lengthSq() < 1e-6) perp = new THREE.Vector3(1, 0, 0).addScaledVector(dir, -dir.x);   // line is vertical → bias the tick to world-X
+  const t = dir.clone().add(perp.normalize()).normalize().multiplyScalar(DIM_TICK / 2);
+  return [a.clone().sub(t), a.clone().add(t), b.clone().sub(t), b.clone().add(t)];
+}
+// Rebuild the placed-dim lines from the editor's dims3d (the single source of truth). Each is the user-drawn
+// segment + 45° end ticks (CAD style, matching the derived overlays); depthTest:false so they're never
+// buried; the selected dim draws amber. Labels are HTML overlays (pool below), so only geometry is rebuilt.
+// With isolation / solo / legend-hide active, a placed dim hides when an endpoint has no VISIBLE mesh at it —
+// it would otherwise measure to isolated-away geometry (placed dims store only two world points, no member
+// ref, so visibility is inferred from what's rendered there). ponytail: O(dims · visibleMeshes) per refresh,
+// only while something is hidden — fine at model scale; cache mesh AABBs if it ever bites on huge models.
+const _epV = new THREE.Vector3(), _epBox = new THREE.Box3();
+function endpointUnseen(p) {
+  if (!p) return false;
+  _epV.set(p[0], p[1], p[2]);
+  for (const m of meshById.values()) {
+    if (m.visible === false) continue;
+    _epBox.setFromObject(m);
+    if (_epBox.distanceToPoint(_epV) <= 2) return false;   // a visible mesh sits at this endpoint → seen
+  }
+  return true;
+}
+function dimHiddenByIsolation(d) {
+  if (isolatedIds === null && soloGroups.size === 0 && groupHidden.size === 0) return false;  // nothing hidden → every dim shows
+  return endpointUnseen(d.a) || endpointUnseen(d.b);
+}
 function refreshDims() {
   if (!dims3dGroup || !api || !api.getDims3d) return;
   dimCandidates3d = null;               // a rebuild may follow a member edit → don't keep stale snap targets for the next click
   for (const c of [...dims3dGroup.children]) { dims3dGroup.remove(c); c.geometry.dispose(); c.material.dispose(); }
   const dims = api.getDims3d() || [];
-  const sel = api.selDim3d ? api.selDim3d() : null;
+  const sel = new Set(api.selDim3d ? api.selDim3d() : []);            // selDim3d now returns the selected-id ARRAY (multi-select)
   if (dims3dVisibleFlag) {
     for (const d of dims) {
+      if (dimHiddenByIsolation(d)) continue;   // isolated away → no line (the label is hidden in syncDimLabels)
       const g = dim3dGeom(d.a, d.b, d.axis);
-      const col = d.id === sel ? 0xf59e0b : 0x67e8f9;                 // amber (#f59e0b) when selected, else muted cyan-300 — a quieter tint of the 0x22d3ee preview/2D-dim cyan (intentional, not a stray value)
-      const line = new THREE.Line(new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(...g.p1), new THREE.Vector3(...g.p2)]), new THREE.LineBasicMaterial({ color: col }));
+      const col = sel.has(d.id) ? 0xf59e0b : 0x67e8f9;               // amber (#f59e0b) when selected, else muted cyan-300 — a quieter tint of the 0x22d3ee preview/2D-dim cyan (intentional, not a stray value)
+      const pts = [new THREE.Vector3(...g.p1), new THREE.Vector3(...g.p2), ...dimTicks(g.p1, g.p2)];   // the dim line + a 45° tick at each end
+      const line = new THREE.LineSegments(new THREE.BufferGeometry().setFromPoints(pts), new THREE.LineBasicMaterial({ color: col }));
       line.material.depthTest = false; line.renderOrder = 996; line.userData.dimId = d.id;
       dims3dGroup.add(line);
     }
@@ -694,20 +1156,33 @@ function refreshDims() {
 function syncDimLabels(dims) {
   while (dimLabelPool.length < dims.length) {
     const el = document.createElement('div');
-    el.style.cssText = 'position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;background:var(--panel,#0f172a);color:var(--text,#f8fafc);border:1px solid var(--line,#1e293b);border-radius:4px;padding:2px 6px;font:12px system-ui;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.5)';
-    el.addEventListener('pointerdown', (e) => { e.stopPropagation(); const id = el._dimId; if (api && api.onSelectDim3d) { api.onSelectDim3d(id); refreshDims(); } });
+    el.style.cssText = 'position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;background:var(--panel,#0f172a);color:var(--text,#f8fafc);border:1px solid var(--line,#1e293b);border-left:2px solid #67e8f9;border-radius:4px;padding:2px 6px;font:12px system-ui;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.5)';   // cyan left accent (amber when selected) ties the chip to its dim line — matches the derived overlays
+    el.addEventListener('pointerdown', (e) => { e.stopPropagation(); const id = el._dimId; if (api && api.onSelectDim3d) { api.onSelectDim3d(id, { ctrl: e.ctrlKey || e.metaKey, shift: e.shiftKey }); refreshDims(); } });   // Ctrl/Shift = multi-select (same as parts)
     dimLabelHost.appendChild(el); dimLabelPool.push(el);
   }
+  const selSet = new Set(api.selDim3d ? api.selDim3d() : []);
   for (let i = 0; i < dimLabelPool.length; i++) {
     const el = dimLabelPool[i], d = dims[i];
-    if (!d || !dims3dVisibleFlag) { el.style.display = 'none'; el._dimId = null; el._mid = null; continue; }
+    if (!d || !dims3dVisibleFlag || dimHiddenByIsolation(d)) { el.style.display = 'none'; el._dimId = null; el._mid = null; continue; }   // isolated-away dims hide their label too
     el._dimId = d.id;
     const g = dim3dGeom(d.a, d.b, d.axis);
     el.textContent = api.fmtLen ? api.fmtLen(g.valueMm) : (g.valueMm / 304.8).toFixed(2) + ' ft';
-    el.style.borderColor = d.id === (api.selDim3d && api.selDim3d()) ? '#f59e0b' : 'var(--line,#1e293b)';
+    const seld = selSet.has(d.id);
+    el.style.borderColor = seld ? '#f59e0b' : 'var(--line,#1e293b)';
+    el.style.borderLeftColor = seld ? '#f59e0b' : '#67e8f9';   // keep the cyan left accent unless selected (then the whole border goes amber)
     el.style.display = 'block'; el._mid = g.mid;
   }
 }
+// A 3D point is "clipped" when it's on the cut-away side of ANY active clip plane/box (global clipping uses the
+// union rule, so a fragment outside any plane is removed). Used to hide a dim's HTML label when its anchor is cut.
+const _clipPt = new THREE.Vector3();
+function isPointClipped(p) {
+  const planes = renderer && renderer.clippingPlanes;
+  if (!planes || !planes.length || !p) return false;
+  _clipPt.set(p[0], p[1], p[2]);
+  for (let i = 0; i < planes.length; i++) if (planes[i].distanceToPoint(_clipPt) < 0) return true;
+  return false;
+}
 // project each visible label's 3D midpoint → screen px (called from the render loop). Hidden when the
 // midpoint is behind the camera (project z>1).
 function positionDimLabels() {
@@ -715,6 +1190,7 @@ function positionDimLabels() {
   dimLabelHost.style.display = 'block';
   for (const el of dimLabelPool) {
     if (el.style.display === 'none' || !el._mid) continue;
+    if (isPointClipped(el._mid)) { el.style.visibility = 'hidden'; continue; }   // a dim whose anchor is sectioned away by a clip is cut too
     const [mx, my, mz] = el._mid;
     const v = new THREE.Vector3(mx, my, mz).project(camera);
     // hide when the midpoint is behind the camera (z>1) OR outside the canvas frustum (|x|,|y|>1):
@@ -728,6 +1204,179 @@ function positionDimLabels() {
   }
 }
 
+// ---- derived dimension overlays (the legend's DIMENSIONS toggles) ----
+// Recompute the bolt-pitch / edge-clearance / cope-size dims from the retained scene parts as proper CAD
+// linear dimensions — witness/extension lines off the feature + an OFFSET dimension line + 45° end ticks + a
+// label chip sitting over the line's midpoint (the chip's panel reads as text-on-line). Emitted only when the
+// per-category toggle is on (api.getDimOverlays) AND the annotated part is visible. Pure geometry off the
+// resolved parts: plate.center/uDir/vDir + holes give the bolt grid & plate edges; a `cut` box gives the
+// cope size. Each category offsets to a DIFFERENT side so several read uncluttered, and the whole dim draws
+// depthTest:false at a high renderOrder so it sits on top of the steel.
+
+// One CAD linear dimension for the span A→B (Vector3), pushed perpendicular by the world vector `off`.
+// Returns the witness/extension segments + the dimension-line+tick segments (each a flat list where every 2
+// points = one line segment) and the label anchor (the offset midpoint, ON the dimension line). Terminators
+// are 45° architectural ticks (steel-detail convention — crisper than filled arrows at this scale).
+function cadDim(A, B, off) {
+  const span = B.clone().sub(A), sl = span.length(); if (sl < 1e-6) return null;          // zero span → no dimension
+  const md = span.multiplyScalar(1 / sl);                                                   // unit along the span (= the dim line, since the offset is forced perpendicular)
+  const o = off.clone().addScaledVector(md, -off.dot(md));                                  // force the offset perpendicular to the span (a dim line runs parallel to what it measures) → the 45° tick stays a true bisector
+  const olen = o.length(); if (olen < 1e-6) return null;                                    // no usable perpendicular offset → skip
+  const od = o.multiplyScalar(1 / olen);
+  const GAP = 4, OVER = 6;                                                                  // mm: witness gap off the feature, witness overshoot past the dim line
+  const a2 = A.clone().addScaledVector(od, olen), b2 = B.clone().addScaledVector(od, olen); // the offset dimension-line endpoints
+  const tick = md.clone().add(od).normalize().multiplyScalar(DIM_TICK / 2);                 // a 45° tick — od ⟂ md, so (md+od) bisects them; normalised to DIM_TICK
+  const witness = [], dim = [], w = (p, q) => witness.push([p.x, p.y, p.z], [q.x, q.y, q.z]), d = (p, q) => dim.push([p.x, p.y, p.z], [q.x, q.y, q.z]);
+  w(A.clone().addScaledVector(od, GAP), a2.clone().addScaledVector(od, OVER));   // witness line at A (small gap off the part → just past the dim line)
+  w(B.clone().addScaledVector(od, GAP), b2.clone().addScaledVector(od, OVER));   // witness line at B
+  d(a2, b2);                                                                      // the dimension line
+  d(a2.clone().sub(tick), a2.clone().add(tick)); d(b2.clone().sub(tick), b2.clone().add(tick));   // 45° ticks at each end
+  return { witness, dim, labelPos: a2.clone().add(b2).multiplyScalar(0.5).toArray() };
+}
+
+function computeOverlayDims() {
+  const ov = (api && api.getDimOverlays) ? (api.getDimOverlays() || {}) : {};
+  const on = (c) => ov[c] !== false;       // a category is ON unless EXPLICITLY false — matches the legend row's .dimoff (===false) + the all-on default, so a missing/unknown key shows rather than silently suppressing
+  if (!on('bolt_pitch') && !on('edge_clearance') && !on('cope_size') && !on('base_plate') && !on('anchor_depth')) return [];
+  const fmt = (mm) => (api && api.fmtLen ? api.fmtLen(mm) : (mm / 304.8).toFixed(2) + ' ft');
+  const vis = (id) => { const m = meshById.get(id); return !m || m.visible !== false; };       // a legend-hidden part suppresses its dims
+  const fin3 = (a) => Array.isArray(a) && a.length === 3 && a.every(Number.isFinite);           // a structurally-present-but-malformed center/dir is skipped like a no-dim part — never throws out of rebuild()
+  const out = [];
+  const dim = (A, B, off, label, cat) => { const g = cadDim(A, B, off); if (g) out.push({ witness: g.witness, dim: g.dim, labelPos: g.labelPos, label, cat }); };   // cadDim returns null for a degenerate span/offset
+  // A chain of CAD dims along ordered local coords `cs` (→ world via `mk`), all pushed by `off`. ≥4 EQUAL
+  // gaps collapse to one "N @ x" (the AISC array convention for long runs); otherwise each gap is its own
+  // plain-length link — how detailers chain bolt pitch / anchor gauge (no "1 @ …" noise on a single space).
+  const chain = (cs, mk, off, cat) => {
+    if (!Array.isArray(cs) || cs.length < 2) return;
+    const gaps = []; for (let i = 1; i < cs.length; i++) gaps.push(cs[i] - cs[i - 1]);
+    const equal = gaps.every((g) => Math.abs(g - gaps[0]) < 0.5);                                          // equal within 0.5 mm
+    if (gaps.length >= 4 && equal) { dim(mk(cs[0]), mk(cs[cs.length - 1]), off, `${gaps.length} @ ${fmt(gaps[0])}`, cat); return; }
+    for (let i = 1; i < cs.length; i++) dim(mk(cs[i - 1]), mk(cs[i]), off, fmt(cs[i] - cs[i - 1]), cat);
+  };
+  // Insert the member centerline (local 0) as a chain break so an anchor gauge reads bolt→CL→bolt, like a
+  // real anchor-bolt detail (AB-series) — but ONLY for a SYMMETRIC grid: it must straddle 0 with no bolt on
+  // it AND the outer lines must mirror about 0 (cs[0] ≈ -cs[last]). An off-centre pattern keeps a plain
+  // bolt→bolt chain (a CL break there would dimension to a centerline the bolts aren't symmetric about).
+  const splitAtCL = (cs) => (cs.length >= 2 && cs[0] < -0.5 && cs[cs.length - 1] > 0.5
+    && Math.abs(cs[0] + cs[cs.length - 1]) < 0.5 && cs.every((c) => Math.abs(c) > 0.5)
+    ? [...cs, 0].sort((a, b) => a - b) : cs);
+  for (const el of dimParts) {
+    if (!el || !fin3(el.center) || !fin3(el.uDir) || !fin3(el.vDir)) continue;
+    const C = V(...el.center), u = V(...el.uDir).normalize(), vv = V(...el.vDir).normalize();
+    const P = (uu, vd) => C.clone().addScaledVector(u, uu).addScaledVector(vv, vd);   // plate-local (u,v) → world Vector3
+    if (el.kind === 'plate' && el.group === 'shear-plate') {     // fin plates only — base/washer plates also carry a holes array but their "bolts" are anchors, not a shear-bolt group
+      if (!vis(el.id)) continue;
+      const holes = (Array.isArray(el.holes) ? el.holes : []).filter((h) => h && isFinite(h.u) && isFinite(h.v));
+      if (!holes.length) continue;
+      const us = [...new Set(holes.map((h) => Math.round(h.u * 100) / 100))].sort((a, b) => a - b);  // distinct bolt columns (u)
+      const vs = [...new Set(holes.map((h) => Math.round(h.v * 100) / 100))].sort((a, b) => a - b);  // distinct bolt rows (v)
+      const uMid = (us[0] + us[us.length - 1]) / 2, vMid = (vs[0] + vs[vs.length - 1]) / 2;
+      const vTop = vs[vs.length - 1], uFar = us[us.length - 1];
+      // Each category's dim line is pushed ~30-40 mm clear of the bolt grid, to a DIFFERENT side so several
+      // read uncluttered: pitch → +u (free/beam edge), gauge → +v (above), edge distances → -u/-v, cope → outer.
+      if (on('bolt_pitch')) {
+        // vertical pitch as a chain — to the free (beam-side) edge (+u); each space its own plain link
+        chain(vs, (vd) => P(uMid, vd), u.clone().multiplyScalar(38), 'bolt_pitch');
+        // horizontal gauge (multi-column only) ABOVE the group (+v), opposite the eh end-distance (-v) so they don't stack
+        chain(us, (uu) => P(uu, vMid), vv.clone().multiplyScalar(38), 'bolt_pitch');
+      }
+      if (on('edge_clearance') && el.width > 0 && el.depth > 0) {
+        const hw = el.width / 2, hd = el.depth / 2;
+        // edge distances → the welded-edge side, opposite the pitch dim. The symmetric BOTTOM ev is omitted
+        // (the engine centres the bolt column, so top == bottom) — show one ev + the end distance.
+        dim(P(uMid, vTop), P(uMid, hd), u.clone().multiplyScalar(-30), `ev ${fmt(hd - vTop)}`, 'edge_clearance');
+        dim(P(uFar, vMid), P(hw, vMid), vv.clone().multiplyScalar(-30), `eh ${fmt(hw - uFar)}`, 'edge_clearance');  // end distance to the free edge, dropped below the plate
+      }
+    } else if (el.kind === 'plate' && el.group === 'base-plate') {     // base plate — anchor-rod grid (holes) on a horizontal plate; same derivation as the fin plate, relabelled for anchors
+      if ((!on('base_plate') && !on('anchor_depth')) || !vis(el.id) || !(el.width > 0) || !(el.depth > 0)) continue;
+      const holes = (Array.isArray(el.holes) ? el.holes : []).filter((h) => h && isFinite(h.u) && isFinite(h.v));
+      if (!holes.length) continue;
+      const us = [...new Set(holes.map((h) => Math.round(h.u * 100) / 100))].sort((a, b) => a - b);
+      const vs = [...new Set(holes.map((h) => Math.round(h.v * 100) / 100))].sort((a, b) => a - b);
+      const uMid = (us[0] + us[us.length - 1]) / 2, vMid = (vs[0] + vs[vs.length - 1]) / 2;
+      const hw = el.width / 2, uHi = us[us.length - 1], OFF = 35;   // OFF: mm the anchor dims clear the grid (moderate, like the fin-plate offsets)
+      if (on('base_plate')) {
+        // Anchor gauge as a centerline-broken chain on two perpendicular sides (AB-series convention): the
+        // u-spacing below the grid (-v), the v-gauge to the side (+u) — plain bolt→CL links, no "N @". The
+        // perpendicular placement + the values disambiguate the two axes without a non-standard text label.
+        chain(splitAtCL(us), (uu) => P(uu, vMid), vv.clone().multiplyScalar(-OFF), 'base_plate');
+        chain(splitAtCL(vs), (vd) => P(uMid, vd), u.clone().multiplyScalar(OFF), 'base_plate');
+        dim(P(uHi, vMid), P(hw, vMid), vv.clone().multiplyScalar(OFF), `e ${fmt(hw - uHi)}`, 'base_plate');   // outer anchor → the +u plate edge (+v side)
+      }
+      // Anchor projection/grout/embedment — a VERTICAL chain on an outer rod (elevation-detail style): PROJ (rod
+      // top → B.O. plate), GROUT (B.O. plate → T.O. concrete, only when a grout pad is scheduled), EMBED (T.O.
+      // concrete → rod bottom). Only when a real embedment is scheduled (else the rod is a meaningless stub). The
+      // depth geometry is resolved by the engine onto the plate's meta.anchor.
+      const an = el.meta && el.meta.anchor;
+      if (on('anchor_depth') && an && an.embedSet && fin3([an.rodTopZ, an.rodBotZ, an.plateBotZ]) && Number.isFinite(an.concreteTopZ)) {
+        const Pc = P(us[0], vs[0]);                                   // an outer (corner) anchor's world XY
+        const Z = (z) => V(Pc.x, Pc.y, z);
+        const off = u.clone().multiplyScalar(-60);                    // push the vertical chain clear of the column (⟂ to the Z span)
+        dim(Z(an.rodTopZ), Z(an.plateBotZ), off, `PROJ ${fmt(an.projMm)}`, 'anchor_depth');
+        if (an.groutMm > 0.5) dim(Z(an.plateBotZ), Z(an.concreteTopZ), off, `GROUT ${fmt(an.groutMm)}`, 'anchor_depth');
+        dim(Z(an.concreteTopZ), Z(an.rodBotZ), off, `EMBED ${fmt(an.embedMm)}`, 'anchor_depth');
+      }
+    } else if (el.kind === 'cut') {
+      if (!on('cope_size') || !vis(el.member)) continue;
+      const hw = (el.width || 0) / 2, hd = (el.depth || 0) / 2;
+      if (!(hw > 0 && hd > 0)) continue;
+      const webV = (el.reentrantV || -1) >= 0 ? 1 : -1;          // the web side; push the dim to the OUTER (flange/void) side, clear of the beam body
+      dim(P(-hw, -webV * hd), P(hw, -webV * hd), vv.clone().multiplyScalar(-webV * 22), `${fmt(el.width)} × ${fmt(el.depth)}`, 'cope_size');  // cope size (length × depth in one chip), on the outer void side
+    }
+  }
+  return out;
+}
+function refreshOverlayDims() {
+  if (!overlayDimsGroup) return;
+  for (const c of [...overlayDimsGroup.children]) { overlayDimsGroup.remove(c); c.geometry.dispose(); c.material.dispose(); }
+  const specs = computeOverlayDims();
+  const wpts = [], dpts = [];
+  for (const s of specs) { for (const p of s.witness) wpts.push(new THREE.Vector3(p[0], p[1], p[2])); for (const p of s.dim) dpts.push(new THREE.Vector3(p[0], p[1], p[2])); }
+  // Two batches, both depthTest:false so the whole dim sits on top of the steel (the user's ask): the
+  // witness/extension lines recede at 0.55 opacity, the dimension line + ticks read full-strength above them.
+  const addBatch = (pts, opacity, order) => {
+    if (!pts.length) return;
+    const mat = new THREE.LineBasicMaterial({ color: 0x67e8f9, transparent: opacity < 1, opacity });
+    mat.depthTest = false;
+    const ls = new THREE.LineSegments(new THREE.BufferGeometry().setFromPoints(pts), mat);
+    ls.renderOrder = order; overlayDimsGroup.add(ls);
+  };
+  addBatch(wpts, 0.55, 997);
+  addBatch(dpts, 1, 998);
+  syncOverlayLabels(specs);
+}
+// One themed chip per LABELLED overlay dim (witness-only lines carry no chip). Passive (pointer-events:none) —
+// overlay dims aren't selectable, unlike the placed dims — and share dimLabelHost (positioned each frame).
+function syncOverlayLabels(specs) {
+  const labeled = specs.filter((s) => s.label);
+  while (overlayLabelPool.length < labeled.length) {
+    const el = document.createElement('div');
+    el.style.cssText = 'position:absolute;transform:translate(-50%,-50%);pointer-events:none;background:var(--panel,#0f172a);color:var(--text,#f8fafc);border:1px solid var(--line,#1e293b);border-left:2px solid #67e8f9;border-radius:4px;padding:2px 6px;font:12px system-ui;white-space:nowrap;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.5)';   // cyan left accent ties the chip to its dim line; 1px dark ring stops it blending into a shadowed plate face
+    if (dimLabelHost) dimLabelHost.appendChild(el);
+    overlayLabelPool.push(el);
+  }
+  for (let i = 0; i < overlayLabelPool.length; i++) {
+    const el = overlayLabelPool[i], s = labeled[i];
+    if (!s) { el.style.display = 'none'; el._mid = null; continue; }
+    el.textContent = s.label;
+    el._mid = s.labelPos;
+    el.style.display = 'block';
+  }
+}
+function positionOverlayLabels() {
+  if (!dimLabelHost || !canvasEl || canvasEl.style.display === 'none') return;
+  const rect = canvasEl.getBoundingClientRect();
+  for (const el of overlayLabelPool) {
+    if (el.style.display === 'none' || !el._mid) continue;
+    if (isPointClipped(el._mid)) { el.style.visibility = 'hidden'; continue; }   // overlay dim cut away with its geometry
+    const v = new THREE.Vector3(el._mid[0], el._mid[1], el._mid[2]).project(camera);
+    if (v.z > 1 || v.x < -1 || v.x > 1 || v.y < -1 || v.y > 1) { el.style.visibility = 'hidden'; continue; }
+    el.style.left = (rect.left + (v.x * 0.5 + 0.5) * rect.width) + 'px';
+    el.style.top = (rect.top + (-v.y * 0.5 + 0.5) * rect.height) + 'px';
+    el.style.visibility = 'visible';
+  }
+}
+
 // ---- 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
@@ -780,6 +1429,46 @@ function pickAt(cx, cy) {
   lastPick = hits.length ? hits[0].object.userData.id : null;
   return lastPick;
 }
+// Raycast ALL visible meshes — members AND derived connection parts — at a client point → ids
+// front-to-back (nearest first), deduped. Backs click-to-cycle so a small plate/bolt/weld stacked on a
+// beam at a joint is reachable without a modifier (D). pickAt stays members-only — the down-gesture
+// (drag / box-select / geo-edit) and the dim-tool plane pick; hover uses pickAllAt so derived parts get the select cursor.
+function pickAllAt(cx, cy) {
+  camera.updateMatrixWorld(); root.updateMatrixWorld(true);
+  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()].filter((m) => m.visible), false);
+  const ids = [];
+  for (const h of hits) { const id = h.object.userData.id; if (id && !ids.includes(id)) ids.push(id); }
+  return ids;
+}
+// Click selection with cycle-through-overlaps: a plain click selects the nearest thing under the cursor
+// (incl. a derived part); clicking the SAME spot again steps to the next overlapping mesh (plate → beam …)
+// so a joint's stacked parts are all reachable. Ctrl+click toggles the nearest (no cycle). Drag (move/box/
+// endpoint) never routes here, so member drag/edit is unchanged.
+let cycleAnchor = null, cycleIds = [], cycleIdx = 0;
+const CYCLE_TOL_PX = 8;
+function resetCycle() { cycleAnchor = null; cycleIds = []; cycleIdx = 0; }
+function clickSelect(cx, cy, ctrl) {
+  let hits = []; try { hits = pickAllAt(cx, cy); } catch { hits = []; }
+  if (!hits.length) { resetCycle(); if (api && api.onSelect) api.onSelect(null, !!ctrl); return; }
+  if (ctrl) { resetCycle(); if (api && api.onSelect) api.onSelect(hits[0], true); return; } // additive toggles the nearest
+  const same = cycleAnchor && Math.hypot(cx - cycleAnchor[0], cy - cycleAnchor[1]) <= CYCLE_TOL_PX
+    && cycleIds.length === hits.length && cycleIds.every((v, i) => v === hits[i]);
+  if (same) cycleIdx = (cycleIdx + 1) % hits.length; else { cycleIds = hits; cycleIdx = 0; cycleAnchor = [cx, cy]; }
+  const pick = hits[cycleIdx], grp = boltGroupOf(pick); // a bolt → select the whole bolt ARRAY (a pattern, not one bolt)
+  if (grp.length > 1) { if (api && api.onSelectMany) api.onSelectMany(grp); }
+  else if (api && api.onSelect) api.onSelect(pick, false);
+}
+// A bolt/head/nut id → all bolt-group part ids of the same joint (the connection's bolt array); else just [id].
+function boltGroupOf(id) {
+  const ci = id.indexOf(':'); if (ci < 0) return [id];
+  const jid = id.slice(0, ci);
+  if (!/^(bolt|head|nut)/.test(id.slice(ci + 1))) return [id];
+  const ids = [...meshById.keys()].filter((k) => { const c = k.indexOf(':'); return c >= 0 && k.slice(0, c) === jid && /^(bolt|head|nut)/.test(k.slice(c + 1)); });
+  return ids.length ? ids : [id];
+}
 // 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.
@@ -864,6 +1553,9 @@ function dimEffectiveAxis(alt) { return alt && dimDraft3d ? 'z' : dimAxis3d; }
 
 function onDown(e) {
   if (e.button !== 0) return;                 // RIGHT/MIDDLE → OrbitControls (orbit/pan)
+  if (clipMode === 'plane') { e.stopPropagation(); addClipPlaneAtScreen(e.clientX, e.clientY); return; } // armed: left-click a face → place a clip plane (stays armed)
+  if (clipMode === 'box') { e.stopPropagation(); onClipBoxClick(e); return; }                            // armed: 2-corner clip-box draw on the floor plane
+  if (selectedClipIds.size) { let ch = null; try { ch = pickClipHandle(e.clientX, e.clientY); } catch { ch = null; } if (ch) { e.stopPropagation(); controls.enabled = false; downXY = [e.clientX, e.clientY]; startClipDrag(ch, e); return; } } // grab a clip handle (plane dot / box face) → drag it
   if (dimMode3d) {                            // 2-click dimension placement (not a drag): pick A, then B → place
     e.stopPropagation(); controls.enabled = true;
     const r = dimPointAt(e, dimDraft3d && dimDraft3d.a); if (!r) return;
@@ -953,6 +1645,7 @@ function onMoveEndpoint(e) {
 function onMove(e) {
   if (!renderer || !canvasEl || canvasEl.style.display === 'none') return; // 3D inactive — ignore window pointer events
   if (boxSel) { onBoxMove(e); return; }
+  if (pending && pending.clipDrag) { onMoveClip(e); return; }   // dragging a clip handle (plane offset / box face)
   if (!pending || pending.geo) return;
   if (pending.epDrag) { onMoveEndpoint(e); return; }
   if (!pending.grab || !pending.origMm) return;
@@ -1008,14 +1701,15 @@ function onUp(e) {
   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);
+    if (bs.moved) { resetCycle(); const ids = membersInRect(bs.x, bs.y, e.clientX, e.clientY); if (api && api.onSelectMany) api.onSelectMany(ids); }
+    else clickSelect(e.clientX, e.clientY, e.ctrlKey || e.metaKey); // click in empty space → cycle-pick (may land on a derived part) or clear
     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) return;
+  if (p.clipDrag) return;   // a clip handle drag is applied live during onMoveClip; nothing to commit on up (controls re-enabled above)
   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);
@@ -1038,7 +1732,7 @@ function onUp(e) {
     }
     return;
   }
-  if (!wasDragging) { if (api && api.onSelect) api.onSelect(p.id, p.ctrl); return; } // member click → select
+  if (!wasDragging) { clickSelect(e.clientX, e.clientY, p.ctrl); return; } // click → cycle-pick: member, or a derived part stacked on it at a joint
   if (p.mode === 'vertical') { // elevation drag → write T.O.S (inches)
     if (p.dz && Math.abs(p.dz) > 1e-6) {
       if (api && api.onSelect) api.onSelect(p.id, false);
@@ -1066,6 +1760,7 @@ function onHoverMove(e) {
   hoverRAF = requestAnimationFrame(() => {
     hoverRAF = 0;
     if (!lastHoverXY || pending || dragging || boxSel) return;
+    if (clipMode) { canvasEl.style.cursor = 'crosshair'; if (clipMode === 'box') clipBoxPreviewAt(lastHoverXY[0], lastHoverXY[1]); return; } // armed clip pick: crosshair (+ live box preview while drawing)
     if (dimMode3d) {                           // dim tool: snap marker + live preview line + readout (no member hover)
       canvasEl.style.cursor = 'crosshair';
       const ev = { clientX: lastHoverXY[0], clientY: lastHoverXY[1], altKey: dimLastAlt };
@@ -1080,6 +1775,7 @@ function onHoverMove(e) {
       } else { dimPreviewLine.visible = false; if (!dimDraft3d) readout.style.display = 'none'; }
       return;
     }
+    if (selectedClipIds.size) { let ch = null; try { ch = pickClipHandle(lastHoverXY[0], lastHoverXY[1]); } catch { ch = null; } if (ch) { canvasEl.style.cursor = 'move'; return; } } // over a clip handle → move cursor
     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';
@@ -1087,9 +1783,10 @@ function onHoverMove(e) {
       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(); }
+    let top = null; try { top = pickAllAt(lastHoverXY[0], lastHoverXY[1])[0] || null; } catch { top = null; }
+    const topMesh = top ? meshById.get(top) : null, isPart = !!(topMesh && topMesh.userData.derived);
+    canvasEl.style.cursor = geoMode() ? 'crosshair' : (top ? (isPart ? 'pointer' : 'grab') : 'default'); // derived part → pointer (select-only); member → grab (draggable)
+    if (top !== hoverId) { hoverId = top; rebuildEndpoints(); updateStatusChip(); }
   });
 }
 function updateStatusChip() {
@@ -1097,8 +1794,11 @@ function updateStatusChip() {
   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 || '—'}` : ''; }
+  if (clipMode === 'plane') txt = 'Click a face to set a clip plane · Esc to cancel';
+  else if (clipMode === 'box') txt = !clipBoxDraft ? 'Click the first floor corner of the clip box · Esc to cancel' : !clipBoxDraft.b ? 'Click the opposite floor corner · Esc to cancel' : 'Move up/down to set the height, then click · Esc to step back';
+  else 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 if (isolatedIds) txt = `Isolated: ${isolatedIds.size} · Show all to restore`;
   else txt = 'Drag to move · ends to stretch · Alt+drag elevation · right-drag orbit · dbl-click to zoom in';
   hoverChip.textContent = txt;
   hoverChip.style.left = (rect.left + rect.width / 2) + 'px'; hoverChip.style.transform = 'translateX(-50%)';
@@ -1106,9 +1806,10 @@ function updateStatusChip() {
   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(); refreshDims(); } // resume the render loop (reset orbit in case a gesture was stranded by a mid-drag hide)
+function show() { if (controls) controls.enabled = true; if (canvasEl) { canvasEl.style.display = 'block'; resize(); } if (!rafId) loop(); updateStatusChip(); refreshDims(); refreshOverlayDims(); } // resume the render loop (reset orbit in case a gesture was stranded by a mid-drag hide)
 function hide() {
   if (dimMode3d) toggleDimTool();              // disarm the dim tool + sync its toolbar (no stale draft/armed state on return)
+  if (clipMode) setClipMode(null);             // disarm the clip-plane pick too (no stale armed state on return)
   if (dimLabelHost) dimLabelHost.style.display = 'none'; // the loop that hides labels is about to stop — hide synchronously so none are stranded
   if (canvasEl) canvasEl.style.display = 'none'; if (hoverChip) hoverChip.style.display = 'none'; if (rafId) { cancelAnimationFrame(rafId); rafId = null; }
 }
@@ -1118,7 +1819,8 @@ function dispose() {
   if (rafId) cancelAnimationFrame(rafId);
   if (hoverRAF) cancelAnimationFrame(hoverRAF);
   if (ro) ro.disconnect();
-  if (canvasEl) { canvasEl.removeEventListener('pointerdown', onDown, true); canvasEl.removeEventListener('pointermove', onHoverMove); canvasEl.removeEventListener('dblclick', onDblClick); }
+  if (canvasEl) { canvasEl.removeEventListener('pointerdown', onDown, true); canvasEl.removeEventListener('pointermove', onHoverMove); canvasEl.removeEventListener('dblclick', onDblClick); canvasEl.removeEventListener('wheel', onWheelHover, true); }
+  if (controls) controls.removeEventListener('start', repivotToCursor);
   window.removeEventListener('pointermove', onMove);
   window.removeEventListener('pointerup', onUp);
   window.removeEventListener('keydown', onKey);
@@ -1130,11 +1832,16 @@ function dispose() {
   }
   if (epGeom) epGeom.dispose(); if (epMatStart) epMatStart.dispose(); if (epMatEnd) epMatEnd.dispose();
   if (dims3dGroup) { if (scene) scene.remove(dims3dGroup); for (const c of dims3dGroup.children) { c.geometry.dispose(); c.material.dispose(); } } // placed-dim lines
+  if (overlayDimsGroup) { if (scene) scene.remove(overlayDimsGroup); for (const c of overlayDimsGroup.children) { c.geometry.dispose(); c.material.dispose(); } } // derived dim-overlay lines
+  overlayLabelPool.length = 0; dimParts = [];
   if (dimPreviewLine && scene) scene.remove(dimPreviewLine);
   for (const o of [epRing, epPreview, refGroup, dimPreviewLine]) if (o) { if (o.geometry) o.geometry.dispose(); if (o.material) o.material.dispose(); }
   epGeom = epMatStart = epMatEnd = epRing = epPreview = refGroup = null;
-  dims3dGroup = dimPreviewLine = null;
+  dims3dGroup = dimPreviewLine = overlayDimsGroup = null;
   clearRoot();
+  if (workAreaHelper) { if (overlayScene) overlayScene.remove(workAreaHelper); workAreaHelper.geometry.dispose(); workAreaHelper.material.dispose(); workAreaHelper = null; }
+  clearClipGizmo(); setClipPreview(null); overlayScene = null;
+  clips = []; workArea = null; clipMode = null; selectedClipIds.clear(); clipBoxDraft = null;   // clips live on the renderer; drop them with the renderer
   if (renderer) renderer.dispose();
   renderer = scene = camera = perspCam = orthoCam = controls = root = api = canvasEl = ro = null; built = false;
 }
@@ -1150,7 +1857,7 @@ function debug() {
     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, projection: projection(), mode: displayMode,
-    hidden: [...groupHidden], solo: soloGroup, visible: [...meshById.values()].filter((m) => m.visible).length,
+    hidden: [...groupHidden], solo: [...soloGroups], isolated: isolatedIds ? [...isolatedIds] : null, 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,
@@ -1158,6 +1865,7 @@ function debug() {
     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,
+    clips: getClips(), clipPlaneCount: renderer && renderer.clippingPlanes ? renderer.clippingPlanes.length : 0, clipMode, workArea: workAreaState(), selectedClips: [...selectedClipIds],
   };
 }
 // test helper: the current material colour + emissive of a member (verifies deselect restores colour)
@@ -1178,13 +1886,22 @@ function centerOf(id) {
   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 };
 }
+function worldOf(id) { const m = meshById.get(id); if (!m) return null; const w = m.getWorldPosition(new THREE.Vector3()); return [w.x, w.y, w.z]; } // test helper: a rendered part's world position
 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,
+  toggleGroup, setGroupsHidden, setIdsHidden, connHiddenIds: () => [...connHidden], soloToggle, setSoloGroups, showAllGroups, groupState, getGroups,
+  setClipMode, clipMode: clipModeOn, addClipBox, toggleClip, removeClip, clearClips, getClips, renameClip, selectClip, setSelectedClips, selectedClips, deleteSelectedClips, clipState, setClipState,
+  isolateSelected, clearIsolation, isIsolated,
+  workAreaSetAll, workAreaFromSelection, workAreaToggle, clearWorkArea, workAreaState,
   toggleDimTool, setDimAxis, dimAxis, setDims3dVisible, dims3dVisible, refreshDims,
+  refreshOverlayDims,
+  overlayDimsInfo: () => computeOverlayDims().map((s) => ({ label: s.label, cat: s.cat })),   // the dims currently emitted (toggle + visibility applied) — for tests
+  overlayLabelTexts: () => overlayLabelPool.filter((el) => el.style.display !== 'none' && el.style.visibility !== 'hidden').map((el) => el.textContent),
   dims3dCount: () => (api && api.getDims3d ? (api.getDims3d() || []).length : 0),
+  selDims3dCount: () => (api && api.selDim3d ? (api.selDim3d() || []).length : 0),   // test helper: how many 3D dims are selected
   dim3dLabelOf: (i) => { const el = dimLabelPool[i]; if (!el || el.style.display === 'none') return null; const r = el.getBoundingClientRect(); return { x: r.left + r.width / 2, y: r.top + r.height / 2, text: el.textContent }; },
-  debug, probe, screenOf, centerOf,
+  debug, probe, screenOf, centerOf, worldOf, clipHandlesScreen,
+  pointClipped: (p) => isPointClipped(p),   // test helper: is a world point on the cut-away side of any active clip?
 };