@floless/app 0.70.0 → 0.71.0

package/dist/floless-server.cjs

@@ -53022,7 +53022,7 @@ function appVersion() {
   return resolveVersion({
     isSea: isSea2(),
     sqVersionXml: readSqVersionXml(),
-    define: true ? "0.70.0" : void 0,
+    define: true ? "0.71.0" : void 0,
     pkgVersion: readPkgVersion()
   });
 }
@@ -53032,7 +53032,7 @@ function resolveChannel(s) {
   return "dev";
 }
 function appChannel() {
-  return resolveChannel({ isSea: isSea2(), define: true ? "0.70.0" : void 0 });
+  return resolveChannel({ isSea: isSea2(), define: true ? "0.71.0" : void 0 });
 }
 
 // workflow-update.ts
@@ -54698,6 +54698,8 @@ function expandJoints(joints, memberGeo) {
         return;
       }
       for (const part of expandBasePlate(j, col)) {
+        part.conn = j.id;
+        part.connKind = j.kind;
         elements.push(part);
         usedGroups.add(part.group);
       }
@@ -54719,6 +54721,8 @@ function expandJoints(joints, memberGeo) {
         return;
       }
       for (const part of parts) {
+        part.conn = j.id;
+        part.connKind = j.kind;
         elements.push(part);
         if (part.kind !== "cut") usedGroups.add(part.group);
       }

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

@@ -526,6 +526,7 @@ function applyCopes(mesh, cuts) {
 
 function buildFromScene(sc) {
   clearRoot();
+  resetConnState(); // a fresh scene rebuilds selection from scratch — drop any stale connection envelope/context
   for (const mat of baseMat.values()) mat.dispose(); // shared per-profile materials from the prior build
   groupColor.clear(); baseMat.clear();
   sceneGroups = (sc.groups || []).map((g) => ({ key: g.key, label: g.label, color: g.color || '#94a3b8' }));
@@ -547,6 +548,7 @@ function buildFromScene(sc) {
     if (memberCuts && memberCuts.length) applyCopes(mesh, memberCuts); // notch a coped member end
     mesh.userData.id = el.id; mesh.userData.group = el.group; mesh.userData.profile = el.meta && el.meta.profile;
     mesh.userData.derived = !!(el.kind && el.kind !== 'box'); // connection parts: rendered, not member-editable
+    mesh.userData.conn = el.conn || null; mesh.userData.connKind = el.connKind || null; // Connection Component membership (Slice A) — the whole-select/drill handle
     root.add(mesh); meshById.set(el.id, mesh);
     box.expandByObject(mesh);
   }
@@ -1302,6 +1304,7 @@ function onKey(e) {
   if (insertMode && e.key === 'Escape') { e.preventDefault(); setInsertMode(false); if (api && api.toast) api.toast('Insert cancelled'); return; }   // Esc disarms the detail-placement pick
   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 === 'Escape' && !dimMode3d && !cmActive() && ascendConn()) { e.preventDefault(); return; } // Esc ascends the connection drill: part → whole → nothing
   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 —
@@ -1354,6 +1357,16 @@ function onDblClick(e) {
   const hits = raycaster.intersectObjects([...meshById.values()].filter((m) => m.visible), false); // incl. connection parts
   if (!hits.length) return; // empty space → no-op (Fit / Home fit-all; avoids an accidental camera teleport)
   const p = hits[0].point, mesh = hits[0].object;
+  // Connection drill-down (Slice A): double-clicking a part of a connection we're NOT already inside ENTERS
+  // that connection (selects the part under the cursor) and frames it. A part of the connection we're
+  // already in, or a bare member, falls through to the classic zoom-to-part below (non-breaking).
+  const dblConn = mesh.userData && mesh.userData.conn;
+  if (dblConn && ctxConn !== dblConn) {
+    enterConn(dblConn, mesh.userData.id);
+    const cb = connBox(dblConn);
+    if (!cb.isEmpty()) { const vDir = camera.position.clone().sub(controls.target).normalize(); fitCamera(cb, vDir.lengthSq() > 0.5 ? vDir : undefined); }
+    return;
+  }
   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
@@ -1378,6 +1391,7 @@ function setSelection(ids) {
   }
   applyDisplayMode();                 // selection swapped the materials → re-apply wire/xray
   selIds = new Set(set);
+  reconcileConnState(set);            // any selection path (2D click, box-select, keyboard) must not leave a stale connection envelope/drill
   rebuildEndpoints();                 // endpoint dots follow the selection (+ any hover)
   updateStatusChip();
 }
@@ -1817,14 +1831,19 @@ 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
+  if (!hits.length) { resetCycle(); clearConnSel(); return; }                       // empty → deselect (clears any connection too)
+  if (ctrl) { resetCycle(); resetConnState(); if (api && api.onSelect) api.onSelect(hits[0], true); return; } // additive toggles the nearest RAW part (leaves connection mode)
   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);
+  const pick = hits[cycleIdx], conn = connOf(pick);
+  if (!conn) { resetConnState(); if (api && api.onSelect) api.onSelect(pick, false); return; } // a bare member → normal single select
+  if (ctxConn === conn) {                     // drilled INTO this connection → clicks land on its parts (bolt array or a single part)
+    const grp = boltGroupOf(pick);
+    if (grp.length > 1) { if (api && api.onSelectMany) api.onSelectMany(grp); } else if (api && api.onSelect) api.onSelect(pick, false);
+    return;
+  }
+  selectWholeConn(conn);                       // at root (or over a different connection) → select the WHOLE connection
 }
 // 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) {
@@ -1834,6 +1853,63 @@ function boltGroupOf(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];
 }
+
+// ── Connection Components (Slice A): select/drill a whole connection (base-plate / shear-plate) as ONE
+// unit. `selConn` = the connection currently whole-selected at root; `ctxConn` = the connection we've
+// DRILLED INTO (double-click) so subsequent clicks land on its individual parts. Both derive from the
+// `conn` tag every ConnPart carries (buildFromScene stashes el.conn on userData). A bare member (no conn)
+// clears both. The host editor re-derives its breadcrumb + component inspector from the selection ids each
+// render() — no view→editor callback needed; reconcileConnState() (from setSelection) keeps this honest.
+let selConn = null, ctxConn = null;
+function connOf(id) { const m = id && meshById.get(id); return m && m.userData ? (m.userData.conn || null) : null; }
+function connChildIds(conn) { const out = []; for (const [id, m] of meshById) { if (m.userData && m.userData.conn === conn) out.push(id); } return out; } // every rendered part of this connection
+function connBox(conn) { const b = new THREE.Box3(); for (const m of meshById.values()) { if (m.userData && m.userData.conn === conn && m.visible) b.expandByObject(m); } return b; }
+// The dashed brand-blue envelope = the single "this is a group" cue for a whole-connection selection.
+let connEnvelope = null;
+function clearConnEnvelope() { if (connEnvelope) { if (overlayScene) overlayScene.remove(connEnvelope); connEnvelope.geometry.dispose(); connEnvelope.material.dispose(); connEnvelope = null; } }
+function renderConnEnvelope(conn) {
+  clearConnEnvelope();
+  if (!conn || !overlayScene) return;
+  const b = connBox(conn); if (b.isEmpty()) return;
+  b.expandByScalar(Math.max(6, b.getSize(new THREE.Vector3()).length() * 0.02)); // a little breathing room around the parts
+  connEnvelope = new THREE.Box3Helper(b, new THREE.Color(SELECT_EMISSIVE)); // --brand
+  connEnvelope.material.depthTest = false; connEnvelope.material.transparent = true; connEnvelope.material.opacity = 0.6; connEnvelope.renderOrder = 996;
+  overlayScene.add(connEnvelope);
+}
+function resetConnState() { selConn = null; ctxConn = null; clearConnEnvelope(); } // internal reset, no callbacks
+// Select the WHOLE connection at root (single-click a part, or a breadcrumb click). Clears any drill context.
+function selectWholeConn(conn) {
+  if (!conn || !connChildIds(conn).length) return clearConnSel();
+  selConn = conn; ctxConn = null;
+  renderConnEnvelope(conn);
+  if (api && api.onSelectMany) api.onSelectMany(connChildIds(conn));
+}
+// Clear any connection selection/drill (back to bare Model root — deselects).
+function clearConnSel() { resetConnState(); if (api && api.onSelect) api.onSelect(null, false); }
+// Enter a connection (double-click) and select the part under the cursor — the drill-in step.
+function enterConn(conn, partId) {
+  ctxConn = conn; selConn = conn; clearConnEnvelope(); // inside → the part-level highlight carries; no whole envelope
+  const grp = boltGroupOf(partId);
+  if (grp.length > 1) { if (api && api.onSelectMany) api.onSelectMany(grp); }
+  else if (api && api.onSelect) api.onSelect(partId, false);
+}
+// Ascend one level: drilled part → whole connection → nothing. Returns true if it consumed the gesture.
+function ascendConn() {
+  if (ctxConn) { selectWholeConn(ctxConn); return true; } // part → whole
+  if (selConn) { clearConnSel(); return true; }           // whole → nothing
+  return false;
+}
+// Keep the connection state honest against ANY selection change — not just the 3D click paths but a 2D
+// member click, box-select, keyboard, or Delete that route through setSelection(). Whole: the full child
+// set must still be selected, else drop the stale envelope; drilled: the selection must stay WITHIN the
+// connection, else exit the drill. Callback-free (resetConnState) so it can't recurse through render().
+function reconcileConnState(set) {
+  if (!selConn) return;
+  const kids = connChildIds(selConn);
+  if (ctxConn) { if (!set.size || ![...set].every((id) => kids.includes(id))) resetConnState(); }  // drilled: any pick outside the connection → exit
+  else if (!kids.length || !kids.every((k) => set.has(k))) resetConnState();                        // whole: must remain the full set, else drop the envelope
+}
+function connContext() { return { selConn, ctxConn }; } // test/editor read
 // 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.
@@ -2575,7 +2651,7 @@ function dispose() {
   gridTexCache.clear();
   clearRoot();
   if (workAreaHelper) { if (overlayScene) overlayScene.remove(workAreaHelper); workAreaHelper.geometry.dispose(); workAreaHelper.material.dispose(); workAreaHelper = null; }
-  clearClipGizmo(); setClipPreview(null); overlayScene = null;
+  clearConnEnvelope(); 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;
@@ -2637,6 +2713,7 @@ window.Steel3DView = {
   setProjection, projection, setDisplayMode, mode: () => displayMode, frameAll, frameSelection, applyView,
   setRefLine, refLine: () => refLineOn,
   setInsertMode, insertMode: insertModeOn,          // arm/query the detail-placement pick (Slice 4)
+  selectWholeConn, clearConnSel, ascendConn, connContext, connEnvelopeOn: () => !!connEnvelope, // Connection Components (Slice A): whole-select / drill / ascend + test probes
   setLabelsOn, labelsOn: () => labelsOnFlag,          // member mark/id label overlay toggle
   syncMemberLabels,                                  // editor calls after a mark/id edit to refresh labels
   setPropLabels,                                     // right-click property labels: editor pushes { labels:[{id,lines}], placement }

package/dist/web/steel-editor.html

@@ -33,6 +33,13 @@
  .detf input{width:100%}
  #detOpacity{accent-color:var(--brand);flex:1;min-width:0}
  #zoombar #zPct{min-width:40px;text-align:right;color:var(--mut);font-variant-numeric:tabular-nums}
+ /* Connection Component breadcrumb (Slice A) — a floating chip over the 3D canvas, same recipe as #zoombar. */
+ #connCrumb{position:absolute;left:50%;top:48px;transform:translateX(-50%);display:none;align-items:center;gap:1px;max-width:min(72%,560px);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:4px 10px;box-shadow:0 4px 14px rgba(0,0,0,.45);z-index:58;font-size:12px;white-space:nowrap;overflow:hidden}  /* below #m3dBar (top:12,h~29,z:59); z:58 keeps it clickable above the dim-label chips (57) */
+ #connCrumb .seg{color:var(--mut);cursor:pointer;padding:1px 4px;border-radius:4px;background:none;border:0;font:inherit;max-width:260px;overflow:hidden;text-overflow:ellipsis}
+ #connCrumb .seg:hover{color:var(--text);text-decoration:underline}
+ #connCrumb .seg.cur{color:var(--brand);font-weight:600;cursor:default;text-decoration:none}
+ #connCrumb .sep{color:var(--mut);opacity:.7;padding:0 2px}
+ .pilllink{background:none;border:0;color:var(--brand);cursor:pointer;font:inherit;padding:0;text-decoration:underline}
  aside{width:240px;flex:none;background:var(--panel);border-left:1px solid var(--line);padding:12px;overflow:auto}
  aside h3{margin:0 0 8px;font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
  select,input{background:#0f172a;color:var(--text);border:1px solid #475569;border-radius:6px;padding:6px;width:100%;font:13px system-ui}
@@ -496,6 +503,7 @@
  <div id=stagewrap>
   <div id=stage><svg id=svg></svg></div>
   <canvas id=stage3d tabindex=0 aria-label="3D model"></canvas>
+  <div id=connCrumb role=navigation aria-label="Connection breadcrumb"></div>
   <div id=m3dBar role=group aria-label="3D view controls">
    <!-- Camera projection — dropdown (like Plane / Work area); the button shows the current mode -->
    <div class=m3dwrap>
@@ -1377,6 +1385,7 @@ function render(){
  if(P.frame)s+=axisGlyphSvg(P.frame.o,P.frame.u,false);   // local-axes glyph at the origin (only when a frame is set; removed on reset)
  svg.innerHTML=s; document.getElementById('profiles').innerHTML=profs.map(p=>`<option value="${esc(p)}">`).join(''); document.getElementById('details').innerHTML=(P.details||[]).map(d=>`<option value="${esc(d.text)}">`).join(''); stats(); panel(); updUR(); updDup(); updConf(); updCS(); updConnBtn(); updBpBtn(); updSpBtn(); updGridToggle();
  if(view3d&&window.Steel3DView){window.Steel3DView.setSelection(selIds);updateIsolateBtn();if(selIds.size&&window.Steel3DView.selectedClips&&window.Steel3DView.selectedClips().length)window.Steel3DView.setSelectedClips([]);}  // keep the 3D highlight in sync; selecting a member clears any clip selection (exclusive)
+ try{updateConnCrumb();}catch(_){}  // Connection Component breadcrumb follows the selection (3D-only; hidden at root)
  syncPropLabelsAfterRender();   // corner-note + push labels to 3D + refresh the popup rows against the (possibly changed) selection
 }
 function updDup(){const n=redundantDups().length;
@@ -1417,6 +1426,54 @@ function stats(){
 // "Varies" placeholders + the indeterminate "default" checkbox in the multi-edit panel. get() must return a primitive.
 const VARIES=Symbol('varies');
 function agg(list,get){if(!list.length)return undefined;const f=get(list[0]);for(let i=1;i<list.length;i++)if(get(list[i])!==f)return VARIES;return f;}
+// ── Connection Components (Slice A). Derive the current connection-selection state from selIds + the
+// resolved scene parts (partsById carries each part's `conn` tag). Returns {conn,kind,main,joint,childIds,
+// whole,mode} or null when the selection isn't one connection's parts. `whole` = every selectable part of
+// the connection is selected (copes are subtractive → not rendered/selectable, so excluded). Robust: no
+// dependence on cross-view callback timing — every render() re-derives it.
+function connSelInfo(){
+ const ids=[...selIds]; if(!ids.length) return null;
+ let conn=null;
+ for(const id of ids){ const el=(partsById||{})[id]; const c=el&&el.conn; if(!c) return null; if(conn==null) conn=c; else if(conn!==c) return null; }
+ if(!conn) return null;
+ const j=(C.joints||[]).find(x=>x&&x.id===conn); if(!j) return null;
+ const childIds=Object.keys(partsById||{}).filter(id=>{const el=partsById[id];return el&&el.conn===conn&&el.kind!=='cut';});
+ const whole=childIds.length>0&&childIds.every(id=>selIds.has(id));
+ return {conn,kind:j.kind,main:j.main,joint:j,childIds,whole,mode:whole?'whole':'part'};
+}
+// The floating breadcrumb over the 3D canvas: Model ▸ <Connection> [▸ <Part>]. Segments jump levels via the
+// 3D view's own ascend/whole-select so the canvas selection + envelope stay in lockstep. 3D-only; hidden at root.
+function updateConnCrumb(){
+ const el=document.getElementById('connCrumb'); if(!el) return;
+ const cs=view3d?connSelInfo():null;
+ if(!cs){ el.style.display='none'; el.innerHTML=''; return; }
+ const name=(cs.kind==='base-plate'?'Base plate':cs.kind==='shear-plate'?'Shear plate':'Connection')+' · '+cs.main;
+ let html='<button class=seg data-lvl=root data-tip="Back to the model (deselect)">Model</button><span class=sep>▸</span>';
+ if(cs.whole){ html+='<span class="seg cur">'+esc(name)+'</span>'; }
+ else{
+  html+='<button class=seg data-lvl=whole data-tip="Select the whole connection">'+esc(name)+'</button><span class=sep>▸</span>';
+  const partId=[...selIds].find(id=>/:bolt\d+$/.test(id))||[...selIds][0];
+  const pel=(partsById||{})[partId]; const plbl=(pel&&pel.meta&&pel.meta.label)||'Part';
+  html+='<span class="seg cur">'+esc(plbl)+'</span>';
+ }
+ el.innerHTML=html; el.style.display='flex';
+ {const b=el.querySelector('[data-lvl=root]'); if(b)b.onclick=()=>{ if(window.Steel3DView&&window.Steel3DView.clearConnSel)window.Steel3DView.clearConnSel(); else{selIds=new Set();render();} };}
+ {const b=el.querySelector('[data-lvl=whole]'); if(b)b.onclick=()=>{ if(window.Steel3DView&&window.Steel3DView.selectWholeConn)window.Steel3DView.selectWholeConn(cs.conn); };}
+}
+// Route a "modify this connection" ask through the Request relay (intent+target). A recipe connection's
+// geometry is member-derived, so move/replace/adjust go to the terminal AI (the UI relays intent) — unlike
+// Delete, which is a direct, deterministic contract edit.
+async function connModifyRequest(j){
+ if(!j) return;
+ try{await window.flushContract();}catch(_){}
+ try{persist();}catch(_){}
+ const kindName=j.kind==='base-plate'?'base plate':j.kind==='shear-plate'?'shear plate':'connection';
+ const instruction='Modify the '+kindName+' connection "'+j.id+'" on member '+j.main+' (sheet '+((P&&P.sheet)||'?')+') — adjust, replace or move it per my request.';
+ try{const res=await fetch('/api/contract-request',{method:'POST',headers:{'content-type':'application/json'},
+     body:JSON.stringify({appId:APP_ID,instruction,intent:'modify',target:{sheet:(P&&P.sheet)||undefined,ids:[j.id,j.main]}})});
+   toast(res.ok?'Change queued for your terminal AI session':'Could not queue the request');
+ }catch(_){toast('Could not queue the request');}
+}
 function panel(){
  const p=document.getElementById('panel');
  if(!selDimIds.size||!dimsVisible)dimSplitMode=false;document.body.classList.toggle('dimsplit',dimSplitMode);   // split mode is meaningless without a (visible) dim selected — also disarms when dims are hidden
@@ -1499,6 +1556,38 @@ function panel(){
    {const rm=document.getElementById('detRemove');if(rm)rm.onclick=()=>edit(()=>{C.detail_placements=(C.detail_placements||[]).filter(x=>x&&x.id!==detId);selIds.clear();});}
    return;
   }}
+ // A WHOLE connection selected (Slice A) — the Component inspector: type badge + editability chip +
+ // on-member link + part count + a read-only param summary, then Delete (direct contract edit) /
+ // Modify (relay) / Edit-on-member. Precedes the single-part branch below (which handles the DRILLED case).
+ {const cs=connSelInfo();
+  if(cs&&cs.whole){
+   const j=cs.joint,isBP=j.kind==='base-plate',pp=j.params||{};
+   const plate=(partsById||{})[cs.conn+':plate']||null;
+   const dim=(n)=>(n==null?'<span style="color:var(--mut)">auto</span>':esc(fmtFtIn(Number(n)/25.4)));
+   const kv=(l,val)=>`<div style="display:flex;justify-content:space-between;gap:8px;font-size:12px;margin:3px 0"><span style="color:var(--mut)">${esc(l)}</span><span style="font-variant-numeric:tabular-nums">${val}</span></div>`;
+   const sec=t=>`<div class=divrow><hr><span class=sect style="margin:0">${esc(t)}</span><hr></div>`;
+   const sz=plate?dim(plate.width)+' × '+dim(plate.depth):'<span style="color:var(--mut)">auto</span>';
+   let body='';
+   if(isBP)body=sec('Plate')+kv('Size',sz)+kv('Thickness',plate?dim(plate.thickness):dim(pp.thickness))+sec('Anchors')+kv('Grid (cols × rows)',esc(`${pp.boltCols||2} × ${pp.boltRows||2}`))+kv('Diameter',pp.boltDia?dim(pp.boltDia):dim(24));
+   else body=sec('Plate')+kv('Size',sz)+kv('Thickness',plate?dim(plate.thickness):dim(pp.plateThickness))+sec('Bolts')+kv('Grid (cols × rows)',esc(`${pp.boltCols||1} × ${pp.boltRows||3}`))+kv('Diameter',pp.boltDia?dim(pp.boltDia):dim(20))+sec('Weld')+kv('Leg',pp.weldLeg?dim(pp.weldLeg):dim(6));
+   p.innerHTML=`<span class=badge>${isBP?'Base plate':'Shear plate'}</span>
+     <div class=row style="margin:0 0 6px"><span class=chip style="border-color:var(--brand);color:#bfdbfe">Parametric — editable</span></div>
+     <div class="row hint" style="margin:0 0 2px">On <button class=pilllink id=cmpMember data-tip="Select ${esc(j.main)}">${esc(j.main)}</button> · ${cs.childIds.length} parts</div>
+     <div class="row hint" style="margin:0 0 6px;font-size:11px">Double-click to enter and pick a part · <b>Esc</b> steps back.</div>
+     ${body}
+     <div class=divrow><hr></div>
+     <div class="row f" style="gap:6px;flex-wrap:wrap">
+       <button class=ghostw id=cmpEdit data-tip="Edit this connection's parameters on ${esc(j.main)}">✎ Edit parameters on ${esc(j.main)} →</button>
+       <button class=ghostw id=cmpAsk data-tip="Record a request for your terminal AI to modify / replace / move this connection">Modify connection…</button>
+       <button class=danger id=cmpDel data-tip="Remove this whole connection">Delete connection</button>
+     </div>`;
+   const toMember=()=>{if(window.Steel3DView&&window.Steel3DView.clearConnSel)window.Steel3DView.clearConnSel();selIds=new Set([j.main]);selDimIds.clear();sel3dDimIds.clear();render();};
+   {const b=document.getElementById('cmpMember');if(b)b.onclick=toMember;}
+   {const b=document.getElementById('cmpEdit');if(b)b.onclick=toMember;}
+   {const b=document.getElementById('cmpAsk');if(b)b.onclick=()=>connModifyRequest(j);}
+   {const b=document.getElementById('cmpDel');if(b)b.onclick=()=>edit(()=>{C.joints=(C.joints||[]).filter(x=>x!==j);selIds.clear();});}
+   return;
+  }}
  // A derived CONNECTION PART selected in 3D (plate / bolt / weld / cope / stiffener) — show its details
  // read-only (parts have no own state; their params live on the parent joint) + a jump to that member.
  {const selList=[...selIds];
@@ -1523,7 +1612,7 @@ function panel(){
    const sec=t=>`<div class=divrow><hr><span class=sect style="margin:0">${t}</span><hr></div>`;
    let body='';
    if(pk==='plate'&&j.kind==='shear-plate')body=sec('Plate')+kv('Width',dim(el&&el.width))+kv('Height',dim(el&&el.depth))+kv('Thickness',dim(el&&el.thickness))+kv('Weld leg',v('weldLeg','mm'))+kv('Clearance',v('clearance','mm'));
-   else if(pk==='bolt')body=sec('Bolts')+kv('Grid (cols × rows)',`${pp.boltCols||1} × ${pp.boltRows||3}`)+kv('Diameter',v('boltDia','mm'))+kv('Grade',pp.boltGrade?esc(pp.boltGrade):'A325'+dft)+kv('Pitch',v('boltPitch','mm'))+kv('Length','<span style="color:var(--mut)">auto (from grip)</span>');
+   else if(pk==='bolt')body=sec('Bolts')+kv('Grid (cols × rows)',esc(`${pp.boltCols||1} × ${pp.boltRows||3}`))+kv('Diameter',v('boltDia','mm'))+kv('Grade',pp.boltGrade?esc(pp.boltGrade):'A325'+dft)+kv('Pitch',v('boltPitch','mm'))+kv('Length','<span style="color:var(--mut)">auto (from grip)</span>');
    else if(pk==='weld')body=sec('Weld')+kv('Leg',v('weldLeg','mm'));
    else if(pk==='cope')body=sec('Cope')+kv('Length',dim(el&&el.width))+kv('Depth',dim(el&&el.depth))+kv('Re-entrant radius',v('copeRadius','mm'));
    else if(pk==='stiff')body=sec('Stiffener')+`<div class=hint style="margin:0">Opposite-side web stiffener on the support.</div>`;
@@ -1538,8 +1627,9 @@ function panel(){
      ${lbl?`<div class="row" style="margin:3px 0 0;font-size:12px;color:var(--brand);font-variant-numeric:tabular-nums">${esc(lbl)}</div>`:''}
      ${body}
      <div class=divrow><hr></div>
-     <div class="row f"><button class=ghostw id=partEdit data-tip="Select the parent member to edit this connection">✎ Edit on ${esc(j.main)} →</button></div>`;
-   const eb=document.getElementById('partEdit');if(eb)eb.onclick=()=>{selIds=new Set([j.main]);selDimIds.clear();sel3dDimIds.clear();render();};
+     <div class="row f" style="gap:6px;flex-wrap:wrap"><button class=ghostw id=partBack data-tip="Back to the whole connection (Esc)">◂ Connection</button><button class=ghostw id=partEdit data-tip="Select the parent member to edit this connection">✎ Edit on ${esc(j.main)} →</button></div>`;
+   {const bb=document.getElementById('partBack');if(bb)bb.onclick=()=>{if(window.Steel3DView&&window.Steel3DView.ascendConn)window.Steel3DView.ascendConn();};}
+   const eb=document.getElementById('partEdit');if(eb)eb.onclick=()=>{if(window.Steel3DView&&window.Steel3DView.clearConnSel)window.Steel3DView.clearConnSel();selIds=new Set([j.main]);selDimIds.clear();sel3dDimIds.clear();render();};
    return;
   }}
  const arr=selArr();

package/package.json

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