@floless/app 0.35.1 → 0.37.0

package/dist/web/steel-editor.html

@@ -59,7 +59,7 @@
  .elabrow{display:flex;align-items:center;justify-content:space-between;margin:8px 0 2px}
  .elabrow .elab{margin:0}
  .defck{display:inline-flex;align-items:center;gap:4px;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);cursor:pointer}
- .defck input{width:auto;margin:0;cursor:pointer}
+ .defck input{width:auto;margin:0;cursor:pointer;accent-color:var(--brand)}
  input:disabled{opacity:.55;cursor:default}
  .badge{display:block;background:var(--brand);color:#fff;text-align:center;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:5px;border-radius:6px;margin-bottom:10px}
  .pick{color:var(--brand)!important}
@@ -113,6 +113,18 @@
  #comboPop{position:fixed;z-index:30;background:var(--panel);border:1px solid #475569;border-radius:6px;max-height:240px;overflow:auto;box-shadow:0 8px 24px rgba(0,0,0,.5);display:none}
  #comboPop .opt{padding:6px 10px;cursor:pointer;font-size:13px;color:var(--text);white-space:nowrap}
  #comboPop .opt:hover,#comboPop .opt.active{background:#334155}
+ /* "More" overflow menu — themed popup (reuses the #comboPop look); flat rows keep each button's id + handler. */
+ #moreWrap{position:relative;display:inline-flex}
+ #moreMenu{position:absolute;right:0;top:calc(100% + 6px);min-width:210px;background:var(--panel);border:1px solid #475569;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.5);padding:4px 0;z-index:30;display:none}
+ #moreMenu.open{display:block}
+ #moreMenu .mlabel{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);padding:8px 12px 2px}
+ #moreMenu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
+ #moreMenu button{display:block;width:100%;text-align:left;background:transparent;border:0;border-radius:0;padding:7px 12px;color:var(--text);white-space:nowrap}
+ #moreMenu button:hover{background:#334155}
+ #moreMenu button.mdanger{color:#fca5a5}
+ #moreMenu button.mdanger:hover{background:#7f1d1d;color:#fecaca}
+ button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
+ #srcStat{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #detailNewForm input#dnName{margin:2px 0 10px}
  #dnDrop{border:1px dashed #475569;border-radius:8px;background:#0b1220;min-height:88px;display:flex;align-items:center;justify-content:center;gap:12px;text-align:center;color:var(--mut);cursor:pointer;padding:12px;font-size:12px}
  #dnDrop:hover{border-color:var(--brand);color:var(--text)} #dnDrop.has{border-style:solid;border-color:var(--brand)}
@@ -144,6 +156,21 @@
  #viewToggle .seg.on{background:var(--panel);color:var(--text);box-shadow:inset 0 -2px 0 var(--brand)}
  #stagewrap{position:relative}
  #stage3d{position:absolute;inset:0;width:100%;height:100%;display:none;outline:none}
+ /* yellow = START (end 1), magenta = END (end 2) — also the drag handles. Same colours in 3D. */
+ circle.handle.ep-start{fill:#facc15;stroke:#0b1220;stroke-width:2}
+ circle.handle.ep-end{fill:#f472b6;stroke:#0b1220;stroke-width:2}
+ .epdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
+ /* 3D-only floating chrome (parity with AWARE viewer-3d): toolbar TL, legend BL, ViewCube BR */
+ #m3dBar{position:absolute;top:12px;left:12px;display:none;gap:6px;align-items:center;z-index:6}
+ #m3dBar .seg-group,#m3dBar>button{box-shadow:0 4px 14px rgba(0,0,0,.45)}
+ #m3dBar>button{font-size:12px;padding:5px 9px}
+ #m3dLegend{position:absolute;left:12px;bottom:64px;display:none;flex-direction:column;gap:1px;max-height:40%;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;z-index:6;box-shadow:0 4px 14px rgba(0,0,0,.45);font-size:12px}
+ #m3dLegend .lhint{color:var(--mut);font-size:10px;margin-bottom:4px}
+ #m3dLegend .lrow{display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none;padding:2px 4px;border-radius:5px;white-space:nowrap}
+ #m3dLegend .lrow:hover{background:#33415580}
+ #m3dLegend .lrow.off{opacity:.4} #m3dLegend .lrow.off .lsw{filter:grayscale(1)}
+ #m3dLegend .lsw{width:11px;height:11px;border-radius:2px;flex:none}
+ #m3dCube{position:absolute;right:12px;bottom:12px;width:84px;height:84px;display:none;z-index:6;cursor:pointer;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
 </style>
 <script type="importmap">{"imports":{"three":"./vendor/three.module.js","three/addons/":"./vendor/"}}</script>
 <script type="module" src="./steel-3d-view.js"></script>
@@ -160,20 +187,39 @@
  <span class=stat id=srcStat style="display:none"></span><span style="flex:1"></span>
  <button id=undoB title="Undo (Ctrl+Z)">↶</button>
  <button id=redoB title="Redo (Ctrl+Y / Ctrl+Shift+Z)">↷</button>
- <button id=dupB title="Select duplicate (overlapping) members — review then Delete to dedupe">Duplicates</button>
- <button id=mrgB title="Merge collinear segments — joins same-profile, end-to-end runs into one member. Undoable.">Merge collinear</button>
  <button id=mAdd title="Toggle add-member mode">Add member</button>
- <button id=detailsBtn>Details</button>
- <button id=framesBtn>Frames</button>
- <button id=revertB title="Discard all saved edits and reload the detected contract">Revert</button>
- <button id=exp>Export contract</button>
- <button id=reloadB title="Reload from server — picks up any AI writebacks">↻ Reload</button>
  <button id=askAiBtn>Ask AI ▸</button>
+ <div id=moreWrap>
+  <button id=moreBtn title="More actions" aria-haspopup=menu aria-expanded=false aria-label="More actions">⋯</button>
+  <div id=moreMenu role=menu>
+   <div class=mlabel>Review</div>
+   <button id=dupB title="Select duplicate (overlapping) members — review then Delete to dedupe">Duplicates</button>
+   <button id=mrgB title="Merge collinear segments — joins same-profile, end-to-end runs into one member. Undoable.">Merge collinear</button>
+   <hr>
+   <div class=mlabel>Reference</div>
+   <button id=detailsBtn>Details</button>
+   <button id=framesBtn>Frames</button>
+   <hr>
+   <div class=mlabel>Session</div>
+   <button id=reloadB title="Reload from server — picks up any AI writebacks">↻ Reload</button>
+   <button id=exp>Export contract</button>
+   <hr>
+   <button id=revertB class=mdanger title="Discard all saved edits and reload the detected contract">Revert</button>
+  </div>
+ </div>
 </header>
 <main>
  <div id=stagewrap>
   <div id=stage><svg id=svg></svg></div>
   <canvas id=stage3d tabindex=0 aria-label="3D model"></canvas>
+  <div id=m3dBar role=group aria-label="3D view controls">
+   <div class=seg-group id=m3dProj title="Camera projection"><button data-proj=persp class=on>Persp</button><button data-proj=ortho>Ortho</button></div>
+   <div class=seg-group id=m3dMode title="Display mode"><button data-mode=solid class=on>Solid</button><button data-mode=wire>Wire</button><button data-mode=xray>X-ray</button></div>
+   <button id=m3dFit title="Fit all to view">Fit</button>
+   <button id=m3dRef title="Show the reference line (work-line between the end points) for every member">Ref line</button>
+  </div>
+  <div id=m3dLegend></div>
+  <div id=m3dCube title="Click a face for that view · drag the scene with the right button to orbit"></div>
   <div id=zoombar>
    <button id=zOut title="Zoom out">−</button>
    <input id=zRange type=range min=10 max=400 step=1 value=100>
@@ -375,6 +421,25 @@ const fmtDecIn=v=>(v==null||isNaN(v))?'—':((Math.round(v*100)/100)+'"');
 function ensureMeta(m){if(!m.role)m.role='beam';
  if(!m.ends){const c=/(^|[^A-Z])MF/i.test(m.profile||'')?'moment':'';m.ends=[{tos:null,note:c,tosDef:true,detail:''},{tos:null,note:c,tosDef:true,detail:''}];}
  if(!m.col)m.col={bos:null,tos:null,note:(/(^|[^A-Z])MF/i.test(m.profile||'')?'moment':''),tosDef:true,detail:''};return m;}
+// Effective profile position on the reference line (the work-line between the end dots), à la Tekla.
+// Explicit m.position wins; else a flat beam → top (top-of-steel), a steep beam (brace) / column → middle.
+// MIRROR of server/contract-to-scene.ts depthPosition (same 0.5774 ≈ 30° threshold, mm units).
+function posDefault(m){
+ if(m.position==='top'||m.position==='middle'||m.position==='bottom')return m.position;
+ if(m.role==='column')return 'middle';
+ const k=304.8/((P&&P.pt_per_ft>0)?P.pt_per_ft:1);
+ const z0=(m.ends&&m.ends[0]&&m.ends[0].tos!=null)?m.ends[0].tos:defaultTOS;
+ const z1=(m.ends&&m.ends[1]&&m.ends[1].tos!=null)?m.ends[1].tos:defaultTOS;
+ const dz=Math.abs((z0||0)-(z1||0))*25.4, horiz=Math.hypot(m.wp[1][0]-m.wp[0][0],m.wp[1][1]-m.wp[0][1])*k;
+ return dz>horiz*0.5774?'middle':'top';}
+// Swap a member's start (yellow, end 1) and end (magenta, end 2) handles — reverse its direction.
+// Beam: reverse wp + the per-end metadata (each end's TOS/note/detail follows its point). Column:
+// the two handles are bottom (BOS) and top (TOS), so swap those. Used by 2D + 3D via the same panel.
+function swapMemberEnds(m){
+ if(Array.isArray(m.wp)&&m.wp.length>=2)m.wp=[m.wp[1].slice(),m.wp[0].slice()];
+ if(Array.isArray(m.ends)&&m.ends.length>=2)m.ends=[m.ends[1],m.ends[0]];
+ if(m.col){const b=(m.col.bos!=null?m.col.bos:0),t=(m.col.tos!=null?m.col.tos:defaultTOS);m.col.bos=t;m.col.tos=b;m.col.tosDef=false;}
+ return m;}
 // best-effort: framing plans carry TOS at the level UNO — assume the L2 datum +16'-6" (198"); each end's
 // 'default' checkbox links it to this value (auto-updates when changed); uncheck to override.
 let defaultTOS=198, addProfile='';
@@ -385,10 +450,10 @@ const autofillTOS=syncDefaults;
 // profs is per-plan — computed in setPlan()
 function snapshot(){return JSON.stringify(P.members);}
 function pushUndo(prev){undo.push(prev);if(undo.length>200)undo.shift();redo.length=0;scheduleSave();}
-function apply(json){P.members=JSON.parse(json);selIds=new Set([...selIds].filter(id=>byId(id)));scheduleSave();render();}
+function apply(json){P.members=JSON.parse(json);selIds=new Set([...selIds].filter(id=>byId(id)));scheduleSave();render();sync3D();}
 function doUndo(){if(!undo.length)return;redo.push(snapshot());apply(undo.pop());}
 function doRedo(){if(!redo.length)return;undo.push(snapshot());apply(redo.pop());}
-function edit(fn){const pv=snapshot();fn();pushUndo(pv);render();}
+function edit(fn){const pv=snapshot();fn();pushUndo(pv);render();sync3D();}
 // --- auto-save: edits persist to this browser (localStorage). Raster stays embedded; only members + TOS are stored. ---
 const LSKEY = 'steeltakeoff:edits:v1:' + APP_ID;
 function dataSig(){return C.plans.map(p=>p.sheet+':'+((p.segments||[]).length)).join('|');}  // ignore stored edits if the dataset changed
@@ -442,8 +507,12 @@ function projPt(p,a,b){const vx=b[0]-a[0],vy=b[1]-a[1],L2=vx*vx+vy*vy||1;
  let t=((p[0]-a[0])*vx+(p[1]-a[1])*vy)/L2;t=Math.max(0,Math.min(1,t));return {pt:[a[0]+t*vx,a[1]+t*vy],t};}
 function setGeo(){document.body.classList.toggle('geo',!!geoMode);}
 // nearest end → intersection: extends when the line is past the end, trims when it crosses the member. ponytail: keeps the larger piece on a deep overshoot — undo+drag if that's wrong.
-function snapEnd(m,tA,tB){const I=lineX(m.wp[0],m.wp[1],tA,tB);if(!I)return false;
- const pv=snapshot();const h=len(m.wp[0],I)<=len(m.wp[1],I)?0:1;m.wp[h]=I;m.rfi=(WT[m.profile]==null);pushUndo(pv);render();return true;}
+// Multi: trim/extend the nearest end of EVERY given member to the (tA,tB) target line; members
+// parallel to the target (no intersection) are skipped. One undo for the whole batch.
+function snapEndMulti(ms,tA,tB){const pv=snapshot();let n=0;
+ for(const m of ms){const I=lineX(m.wp[0],m.wp[1],tA,tB);if(!I)continue;
+   const h=len(m.wp[0],I)<=len(m.wp[1],I)?0:1;m.wp[h]=I;m.rfi=(WT[m.profile]==null);n++;}
+ if(n){pushUndo(pv);render();sync3D();}return n;}
 function doSplit(m,pt){const pv=snapshot();ensureMeta(m);const base=JSON.parse(JSON.stringify(m));
  const a=m.wp[0].slice(),b=m.wp[1].slice(),q=pt.slice(),mk=()=>({tos:null,note:'',tosDef:true,detail:''});
  m.wp=[a,q];if(m.ends)m.ends=[m.ends[0],mk()];                         // first half keeps its start end, fresh cut end
@@ -501,6 +570,10 @@ const svg=document.getElementById('svg');
 function toSvg(e){const p=svg.createSVGPoint();p.x=e.clientX;p.y=e.clientY;return p.matrixTransform(svg.getScreenCTM().inverse());}
 // --- zoom + pan ---
 const ZMIN=0.1, ZMAX=4;
+// start/end dot radius in CONTENT units. The member line is a content-unit stroke (scales with zoom),
+// so a screen-constant dot gets dwarfed by the thick line at high zoom. This grows with zoom (the +3
+// content term) while keeping a screen-px floor at low zoom (the 5/zoom term): ~7px at fit, ~17px at 400%.
+const epR=()=>3+5/zoom;
 let zoom=1; const stage=document.getElementById('stage');
 // The editor runs in an iframe; keyboard shortcuts (Ctrl+D etc.) only reach our handler when the
 // iframe has focus. The SVG canvas isn't focusable, so clicking it wouldn't grab focus and a real
@@ -523,12 +596,12 @@ function doDup(){const arr=selArr();if(!arr.length)return;const o=12,pv=snapshot
  selIds=ns;mode='sel';setMode();pushUndo(pv);render();}
 function esc(s){return String(s).replace(/[<>&"]/g,c=>({'<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;'}[c]));}
 function render(){
- if(geoMode&&selIds.size!==1){geoMode=null;document.body.classList.remove('geo');}   // geo edit needs exactly one member
+ if(geoMode&&(selIds.size<1||(geoMode==='split'&&selIds.size!==1))){geoMode=null;document.body.classList.remove('geo');}   // Split needs exactly one member; Extend/Trim works on any selection
  let s=RB64?`<image href="data:image/jpeg;base64,${RB64}" x="${X0}" y="${Y0}" width="${X1-X0}" height="${Y1-Y0}"/>`:'';
  for(const sg of P.segments) s+=`<line class=seg data-seg="${sg.id}" x1="${sg.a[0]}" y1="${sg.a[1]}" x2="${sg.b[0]}" y2="${sg.b[1]}"/>`;
  for(const m of P.members){const c=colorFor(m.profile);const on=selIds.has(m.id);const g=on?` style="filter:drop-shadow(0 0 3px ${c}) drop-shadow(0 0 8px ${c})"`:'';
    s+=`<line class="member${m.rfi?' rfi':''}${on?' sel':''}" data-id="${m.id}" x1="${m.wp[0][0]}" y1="${m.wp[0][1]}" x2="${m.wp[1][0]}" y2="${m.wp[1][1]}" stroke="${c}"${g}/>`;}
- {const hsel=selArr();if(hsel.length>=1&&hsel.length<=2){const HR=9/zoom;for(const sm of hsel)for(let i=0;i<2;i++) s+=`<circle class=handle data-mid="${sm.id}" data-h="${i}" cx="${sm.wp[i][0]}" cy="${sm.wp[i][1]}" r="${HR}"/>`;}}
+ {const hsel=selArr();if(hsel.length>=1){const HR=epR();for(const sm of hsel)for(let i=0;i<2;i++) s+=`<circle class="handle ${i===0?'ep-start':'ep-end'}" data-mid="${sm.id}" data-h="${i}" cx="${sm.wp[i][0]}" cy="${sm.wp[i][1]}" r="${HR}"/>`;}}  // end 1 (start) yellow, end 2 (end) magenta · shown for every selected member · radius grows with zoom (epR) so it stays visible against the thick line
  if((mode==='add'||(picking&&pickKind==='profile'))&&P.labels) for(const lb of P.labels){const w=Math.max(40,lb.text.length*11);
    s+=`<rect class=lblhot data-prof="${esc(lb.text)}" x="${lb.disp[0]-w/2}" y="${lb.disp[1]-10}" width="${w}" height="20" rx="3"><title>${esc(lb.text)}</title></rect>`;}
  if(picking&&pickKind==='detail'&&P.details) for(const d of P.details){const w=Math.max(34,d.text.length*8);
@@ -547,11 +620,12 @@ function updDup(){const n=redundantDups().length;
  document.getElementById('dpc').textContent=n;document.getElementById('dupStat').classList.toggle('has',n>0);
  const b=document.getElementById('dupB');if(b.dataset.flash)return;            // don't clobber transient "none" feedback
  b.disabled=false;b.classList.toggle('alert',n>0);b.textContent=n>0?('Duplicates ('+n+')'):'Re-check duplicates';}
-// keep selection-number badges + endpoint handles a constant size on screen at any zoom
+// keep selection-number badges constant on screen while zooming; the end dots grow with zoom (epR) so
+// they stay readable against the thick member line — both must track zoom live as the user zooms.
 function updateBadges(){const R=12/zoom,F=13/zoom,ox=el=>(+el.dataset.fi-(+el.dataset.gn-1)/2)*R*2;
  svg.querySelectorAll('circle.numbg').forEach(c=>{c.setAttribute('cx',(+c.dataset.bx)+ox(c));c.setAttribute('r',R);});
  svg.querySelectorAll('text.numtx').forEach(t=>{t.setAttribute('x',(+t.dataset.bx)+ox(t));t.style.fontSize=F+'px';});
- svg.querySelectorAll('circle.handle').forEach(h=>h.setAttribute('r',9/zoom));}
+ svg.querySelectorAll('circle.handle').forEach(h=>h.setAttribute('r',epR()));}
 function updateHandles(m){svg.querySelectorAll(`circle.handle[data-mid="${m.id}"]`).forEach(h=>{const i=+h.dataset.h;h.setAttribute('cx',m.wp[i][0]);h.setAttribute('cy',m.wp[i][1]);});}
 function updateLine(m){const ln=svg.querySelector(`line.member[data-id="${m.id}"]`);
  if(ln){ln.setAttribute('x1',m.wp[0][0]);ln.setAttribute('y1',m.wp[0][1]);ln.setAttribute('x2',m.wp[1][0]);ln.setAttribute('y2',m.wp[1][1]);}}
@@ -560,6 +634,10 @@ function stats(){
  let w=0,rfi=0; for(const m of P.members){const wpf=WT[m.profile]; if(wpf==null)rfi++; else w+=len(m.wp[0],m.wp[1])/FT*wpf;}
  document.getElementById('wt').textContent=(w/2000).toFixed(1);document.getElementById('wtlb').textContent=Math.round(w).toLocaleString();document.getElementById('rc').textContent=rfi;
 }
+// Aggregate one field across a multi-selection → the shared value, or VARIES when they differ. Drives the
+// "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;}
 function panel(){
  const p=document.getElementById('panel');
  if(mode==='add'){
@@ -585,17 +663,73 @@ function panel(){
   const _rc=document.getElementById('resetCols');if(_rc)_rc.onclick=()=>{C.profile_colors={};scheduleSave();render();};
   return;}
  if(arr.length>1){
+  arr.forEach(ensureMeta);
+  const beams=arr.filter(m=>m.role!=='column'), cols=arr.filter(m=>m.role==='column');
+  const allBeam=cols.length===0, allCol=beams.length===0;
   const totalL=arr.reduce((t,m)=>t+len(m.wp[0],m.wp[1])/FT,0).toFixed(1);
-  const shared=arr.every(m=>m.profile===arr[0].profile)?arr[0].profile:null;
-  const dupSet=new Set(redundantDups());const dupSel=arr.filter(m=>dupSet.has(m.id)).length;
+  const allKnown=arr.every(m=>WT[m.profile]!=null);
+  const totalW=allKnown?Math.round(arr.reduce((t,m)=>t+len(m.wp[0],m.wp[1])/FT*WT[m.profile],0)):null;
+  const dupSet=new Set(redundantDups()), dupSel=arr.filter(m=>dupSet.has(m.id)).length;
+  const profAgg=agg(arr,m=>m.profile), allVerified=arr.every(m=>m.verified===true);
+  const VV=v=>v===VARIES, valOf=v=>VV(v)||v==null?'':esc(fmtFtIn(v)), decOf=v=>VV(v)||v==null?'':esc(fmtDecIn(v));
+  const exPH='5 3/4&quot; · 1&#39;-0 1/4&quot;';
+  // multi-aware field renderers: show the shared value when all agree, else a "Varies" placeholder (typing applies to all).
+  const mTos=(id,label,os)=>{const defA=agg(os,o=>o.tosDef!==false),def=defA===true,vEff=def?defaultTOS:agg(os,o=>o.tosDef!==false?defaultTOS:o.tos);
+    return `<div class=elabrow><span class=elab>${label}</span><label class=defck><input type=checkbox id=${id}_ck ${def?'checked':''}>default</label></div>`+
+      `<input id=${id} inputmode=decimal placeholder="${(!def&&VV(vEff))?'Varies':exPH}" value="${def?esc(fmtFtIn(defaultTOS)):valOf(vEff)}"${def?' disabled':''}><span class=edec>${def?esc(fmtDecIn(defaultTOS)):decOf(vEff)}</span>`;};
+  const mFt=(id,label,os,get)=>{const a=agg(os,get);return `<div class=elab>${label}</div><input id=${id} inputmode=decimal placeholder="${VV(a)?'Varies':exPH}" value="${valOf(a)}"><span class=edec>${decOf(a)}</span>`;};
+  const mNote=(id,os)=>{const a=agg(os,o=>o.note||'');return `<input id=${id} class="f combo" data-src=conntypes placeholder="${VV(a)?'Varies':'connection / note'}" value="${VV(a)?'':esc(a||'')}" autocomplete=off>`;};
+  const mDet=(id,os)=>{const a=agg(os,o=>o.detail||'');return `<div class=elab>Connection detail</div><input id=${id} class=combo data-src=details placeholder="${VV(a)?'Varies':'e.g. 5-S504'}" value="${VV(a)?'':esc(a||'')}" autocomplete=off>`;};
+  const dotS='<span class=epdot style="background:#facc15"></span>',dotE='<span class=epdot style="background:#f472b6"></span>';
+  let elev='';
+  if(!allBeam&&!allCol) elev=`<div class="hint f" style="border:1px solid var(--line);border-radius:6px;padding:8px 10px">Mixed beam + column — select one type only to edit levels.</div>`;
+  else if(allCol){const cs=cols.map(m=>m.col);
+    elev=`<div class="sect f">Elevation</div>${mFt('bos',dotS+'Bottom (BOS)',cs,o=>o.bos)}${mTos('tosC',dotE+'Top (TOS)',cs)}${mNote('ntC',cs)}${mDet('dtC',cs)}`;}
+  else{const s0=beams.map(m=>m.ends[0]),s1=beams.map(m=>m.ends[1]);
+    elev=`<div class="sect f">${dotS}Start</div>${mTos('tosA','TOS',s0)}${mNote('ntA',s0)}${mDet('dtA',s0)}`+
+      `<div class=divrow><hr><button class=ghost id=matchEnds>Match → both ends (each)</button><hr></div>`+
+      `<div class=sect>${dotE}End</div>${mTos('tosB','TOS',s1)}${mNote('ntB',s1)}${mDet('dtB',s1)}`;}
+  const posA=!allCol?agg(beams,m=>posDefault(m)):null;
   p.innerHTML=`<h3>${arr.length} members selected</h3>
-   <div class=row><label>Profile</label><input id=pf class=combo data-src=profiles placeholder="${shared==null?'— mixed —':''}" value="${shared==null?'':esc(shared)}" autocomplete=off></div>
-   <div class="row hint">Total length <b>${totalL} ft</b>${dupSel?` · <span style="color:#fca5a5">${dupSel} duplicate${dupSel>1?'s':''}</span> (overlap a kept member — deleting these dedupes)`:''}</div>
-   <div class=row><button class=danger id=del>Delete selected (${arr.length})</button></div>`;
+   <div class="row hint" style="margin-top:0">Edits apply to <b>all ${arr.length}</b> selected · a blank <b>Varies</b> field is left unchanged.</div>
+   <div class=row><label>Profile</label><input id=pf class=combo data-src=profiles placeholder="${VV(profAgg)?'Varies':''}" value="${VV(profAgg)?'':esc(profAgg||'')}" autocomplete=off></div>
+   <div class="seg2 f"><button id=rBeam class="${allBeam?'on':''}">Beam</button><button id=rCol class="${allCol?'on':''}">Column</button></div>
+   ${(!allBeam&&!allCol)?`<div class=hint style="margin-top:4px">Mixed — ${beams.length} beam${beams.length>1?'s':''}, ${cols.length} column${cols.length>1?'s':''}</div>`:''}
+   <div class="row hint">Total length <b>${totalL} ft</b>${totalW!=null?` · <b>${totalW.toLocaleString()} lb</b>`:''}${dupSel?` · <span style="color:#fca5a5">${dupSel} duplicate${dupSel>1?'s':''}</span> (overlap a kept member — deleting these dedupes)`:''}</div>
+   <div class=row><button class=ghostw id=verifyBtn${allVerified?' style="border-color:#166534;color:#86efac"':''}>${allVerified?'✓ All verified — click to unverify':'Mark all verified'}</button></div>
+   ${elev}
+   ${!allCol?`<div class=divrow><hr><span class=sect style="margin:0">Profile position</span><hr></div>
+   <div class=hint style="margin:0 0 6px">Where the section sits on the reference line (beams) — like Tekla.</div>
+   <div class=seg2 style="margin-top:0"><button id=posTop class="${posA==='top'?'on':''}">Top</button><button id=posMid class="${posA==='middle'?'on':''}">Middle</button><button id=posBot class="${posA==='bottom'?'on':''}">Bottom</button></div>`:''}
+   <div class=divrow><hr><span class=sect style="margin:0">Modify geometry</span><hr></div>
+   <div class=seg2 style="margin-top:0"><button id=geoEL class="${geoMode==='el'?'on':''}">Extend / Trim all</button></div>
+   <div class=hint style="margin-top:6px">${geoMode==='el'?'Click a <b>target line</b> — the nearest end of <b>every</b> selected member snaps to where it meets that line.':'<b>Extend/Trim</b> (E) every selected member\'s nearest end to one line. <b>Esc</b> cancels.'}</div>
+   <div class=row><button class=ghostw id=swapEnds title="Reverse every selected member: swap each one's start and end (yellow ↔ magenta / bottom ↔ top) handles">⇄ Swap start ↔ end (all)</button></div>
+   <div class="row f"><button class=danger id=del>Delete selected (${arr.length})</button></div>`;
+  // wiring — every commit applies to the whole selection; a blank field is a no-op (leaves each member's own value).
   document.getElementById('pf').onchange=e=>{const v=e.target.value.toUpperCase().replace(/ /g,'');if(!v)return;edit(()=>{for(const m of selArr()){m.profile=v;m.rfi=(WT[v]==null);}if(!profs.includes(v)){profs.push(v);profs.sort();}});};
+  document.getElementById('rBeam').onclick=()=>edit(()=>{for(const m of selArr())if(m.role==='column'){m.role='beam';ensureMeta(m);}});
+  document.getElementById('rCol').onclick=()=>edit(()=>{for(const m of selArr())if(m.role!=='column'){m.role='column';ensureMeta(m);}});
+  document.getElementById('verifyBtn').onclick=()=>edit(()=>{const v=!allVerified;for(const m of selArr())m.verified=v;});
+  {const _gel=document.getElementById('geoEL');if(_gel)_gel.onclick=()=>{geoMode=(geoMode==='el'?null:'el');setGeo();render();};}
+  {const _sw=document.getElementById('swapEnds');if(_sw)_sw.onclick=()=>edit(()=>{for(const m of selArr())swapMemberEnds(m);});}  // reverse start↔end for the whole selection (2D + 3D via render+sync3D)
   document.getElementById('del').onclick=()=>edit(()=>{P.members=P.members.filter(m=>!selIds.has(m.id));selIds.clear();});
+  {const sp=v=>edit(()=>{for(const m of selArr())if(m.role!=='column')m.position=v;});
+   const _pt=document.getElementById('posTop'),_pm=document.getElementById('posMid'),_pb=document.getElementById('posBot');
+   if(_pt)_pt.onclick=()=>sp('top');if(_pm)_pm.onclick=()=>sp('middle');if(_pb)_pb.onclick=()=>sp('bottom');}
+  // elevation wiring: a blank commit is skipped (Varies = unchanged); the "default" checkbox shows indeterminate when mixed.
+  const wMTos=(id,os)=>{const ck=document.getElementById(id+'_ck');if(ck){if(agg(os,o=>o.tosDef!==false)===VARIES)ck.indeterminate=true;ck.onchange=e=>edit(()=>{for(const o of os){o.tosDef=e.target.checked;if(o.tosDef)o.tos=defaultTOS;}});}
+    const inp=document.getElementById(id);if(inp)inp.onchange=e=>{const t=e.target.value.trim();if(!t)return;edit(()=>{const v=parseLen(t);for(const o of os){o.tos=v;o.tosDef=false;}});};};
+  const wMText=(id,os,set)=>{const i=document.getElementById(id);if(i)i.onchange=e=>{const t=e.target.value.trim();if(!t)return;edit(()=>{for(const o of os)set(o,t);});};};
+  if(allCol){const cs=cols.map(m=>m.col);
+    {const i=document.getElementById('bos');if(i)i.onchange=e=>{const t=e.target.value.trim();if(!t)return;edit(()=>{const v=parseLen(t);for(const o of cs)o.bos=v;});}}
+    wMTos('tosC',cs);wMText('ntC',cs,(o,v)=>o.note=v);wMText('dtC',cs,(o,v)=>o.detail=v);}
+  else if(allBeam){const s0=beams.map(m=>m.ends[0]),s1=beams.map(m=>m.ends[1]);
+    wMTos('tosA',s0);wMText('ntA',s0,(o,v)=>o.note=v);wMText('dtA',s0,(o,v)=>o.detail=v);
+    wMTos('tosB',s1);wMText('ntB',s1,(o,v)=>o.note=v);wMText('dtB',s1,(o,v)=>o.detail=v);
+    {const me=document.getElementById('matchEnds');if(me)me.onclick=()=>edit(()=>{for(const m of selArr())if(m.role!=='column')m.ends[1]={tos:m.ends[0].tos,note:m.ends[0].note,tosDef:m.ends[0].tosDef,detail:m.ends[0].detail};});}}
   return;}
- const m=ensureMeta(arr[0]), wpf=WT[m.profile], L=(len(m.wp[0],m.wp[1])/FT).toFixed(1), col=(m.role==='column');
+ const m=ensureMeta(arr[0]), wpf=WT[m.profile], L=(len(m.wp[0],m.wp[1])/FT).toFixed(1), col=(m.role==='column'), pos=posDefault(m);
  const _lvl=({'S-202':'second','S-203':'roof'})[P.sheet];
  const mfSug=((m.mf||/^MF/i.test(m.profile))&&_lvl&&C.moment_frames)?[...new Set(C.moment_frames.flatMap(f=>f[_lvl]||[]))].filter(Boolean):[];
  const ftFld=(id,label,v)=>`<div class=elab>${label}</div><input id=${id} inputmode=decimal placeholder="5 3/4&quot; · 1&#39;-0 1/4&quot;" value="${esc(fmtFtIn(v))}"><span class=edec>${esc(fmtDecIn(v))}</span>`;
@@ -603,11 +737,12 @@ function panel(){
    return `<div class=elabrow><span class=elab>${label}</span><label class=defck><input type=checkbox id=${id}_ck ${def?'checked':''}>default</label></div><input id=${id} inputmode=decimal placeholder="5 3/4&quot; · 1&#39;-0 1/4&quot;" value="${esc(fmtFtIn(v))}"${def?' disabled':''}><span class=edec>${esc(fmtDecIn(v))}</span>`;};
  const nin=(id,v)=>`<input id=${id} class="f combo" data-src=conntypes placeholder="connection / note" value="${esc(v||'')}" autocomplete=off>`;
  const dFld=(id,o)=>{const hasPrev=o.detail&&previewFor(o.detail);return `<div class=elab>Connection detail</div><div style="display:flex;gap:6px"><input id=${id} class=combo data-src=details placeholder="e.g. 5-S504" value="${esc(o.detail||'')}" style="flex:1" autocomplete=off>${hasPrev?`<button id=${id}_open class=ghost title="Open detail ${esc(o.detail)}">⤢</button>`:''}<button id=${id}_pk class="ghost${(picking&&pickKind==='detail'&&pickEnd===o)?' on':''}" title="Pick a detail callout from the drawing">⌖</button></div>`;};
+ const dotS='<span class=epdot style="background:#facc15"></span>',dotE='<span class=epdot style="background:#f472b6"></span>';  // start=yellow, end=magenta — matches the canvas end markers
  const elev = col
-  ? `<div class="sect f">Elevation</div>${ftFld('bos','Bottom (BOS)',m.col.bos)}${tosFld('tosC','Top (TOS)',m.col)}${nin('ntC',m.col.note)}${dFld('dtC',m.col)}`
-  : `<div class="sect f">Start</div>${tosFld('tosA','TOS',m.ends[0])}${nin('ntA',m.ends[0].note)}${dFld('dtA',m.ends[0])}
+  ? `<div class="sect f">Elevation</div>${ftFld('bos',dotS+'Bottom (BOS)',m.col.bos)}${tosFld('tosC',dotE+'Top (TOS)',m.col)}${nin('ntC',m.col.note)}${dFld('dtC',m.col)}`
+  : `<div class="sect f">${dotS}Start</div>${tosFld('tosA','TOS',m.ends[0])}${nin('ntA',m.ends[0].note)}${dFld('dtA',m.ends[0])}
      <div class=divrow><hr><button class=ghost id=matchEnds>Match → both ends</button><hr></div>
-     <div class=sect>End</div>${tosFld('tosB','TOS',m.ends[1])}${nin('ntB',m.ends[1].note)}${dFld('dtB',m.ends[1])}`;
+     <div class=sect>${dotE}End</div>${tosFld('tosB','TOS',m.ends[1])}${nin('ntB',m.ends[1].note)}${dFld('dtB',m.ends[1])}`;
  p.innerHTML=`<h3>Member ${esc(m.id)}</h3>
   <div class=row><label>Profile</label><div style="display:flex;gap:6px"><input id=pf class=combo data-src=profiles value="${esc(m.profile)}" style="flex:1" autocomplete=off><button id=pickProf class="ghost${(picking&&pickKind==='profile')?' on':''}" title="Pick profile by clicking a label in the drawing">⌖ pick</button></div>${(picking&&pickKind==='profile')?'<div class="hint" style="margin-top:4px;font-style:italic;color:var(--brand)">Click a profile label in the drawing…</div>':(picking&&pickKind==='detail')?'<div class="hint" style="margin-top:4px;font-style:italic;color:#a855f7">Click a detail callout in the drawing…</div>':''}</div>
   <div class="seg2 f"><button id=rBeam class="${col?'':'on'}">Beam</button><button id=rCol class="${col?'on':''}">Column</button></div>
@@ -615,9 +750,13 @@ function panel(){
   <div class=row><button class=ghostw id=verifyBtn${m.verified?' style="border-color:#166534;color:#86efac"':''} title="Mark this member human-confirmed → 100% in the confidence report">${m.verified?'✓ Verified — human-confirmed':'Mark verified'}</button></div>
   ${mfSug.length?`<div class="row" style="border:1px solid #a855f7;border-radius:6px;padding:7px 8px;background:rgba(168,85,247,.07)"><div class=elab style="color:#c4b5fd;margin:0">Moment-frame girder · ${_lvl==='roof'?'roof':'2nd floor'} (from Frames)</div><div style="display:flex;flex-wrap:wrap;gap:5px;margin-top:5px">${mfSug.map(s=>`<button class="ghost mfsug${s===m.profile?' on':''}" data-s="${esc(s)}">${esc(s)}</button>`).join('')}</div></div>`:''}
   ${elev}
+  ${col?'':`<div class=divrow><hr><span class=sect style="margin:0">Profile position</span><hr></div>
+  <div class=hint style="margin:0 0 6px">Where the section sits on the reference line (between the end dots) — like Tekla. Top = top-of-steel (dots on the top flange).</div>
+  <div class=seg2 style="margin-top:0"><button id=posTop class="${pos==='top'?'on':''}">Top</button><button id=posMid class="${pos==='middle'?'on':''}">Middle</button><button id=posBot class="${pos==='bottom'?'on':''}">Bottom</button></div>`}
   <div class=divrow><hr><span class=sect style="margin:0">Modify geometry</span><hr></div>
   <div class=seg2 style="margin-top:0"><button id=geoEL class="${geoMode==='el'?'on':''}">Extend / Trim</button><button id=geoSplit class="${geoMode==='split'?'on':''}">Split</button></div>
   <div class=hint style="margin-top:6px">${geoMode==='el'?'Click a <b>target line</b> — another member or a grey segment. The nearest end of this member snaps to where the two lines meet (extends if short, trims if it overshoots).':geoMode==='split'?'Click a <b>point on this member</b> to cut it into two members.':'<b>Extend/Trim</b> (E) an end to meet another line · <b>Split</b> (S) at a point. <b>Esc</b> cancels.'}</div>
+  <div class=row><button class=ghostw id=swapEnds title="Reverse the member: swap the start (${col?'bottom':'yellow'}) and end (${col?'top':'magenta'}) handles">⇄ Swap start ↔ end</button></div>
   <div class="row f"><button class=danger id=del>Delete member</button></div>`;
  document.getElementById('pf').onchange=e=>edit(()=>{const v=e.target.value.toUpperCase().replace(/ /g,'');m.profile=v;m.rfi=(WT[v]==null);if(v&&!profs.includes(v)){profs.push(v);profs.sort();}});
  document.getElementById('pickProf').onclick=()=>{if(picking&&pickKind==='profile'){picking=false;}else{picking=true;pickKind='profile';pickEnd=null;}render();};
@@ -627,6 +766,10 @@ function panel(){
  const _gel=document.getElementById('geoEL'),_gsp=document.getElementById('geoSplit');
  if(_gel)_gel.onclick=()=>{geoMode=(geoMode==='el'?null:'el');setGeo();render();};
  if(_gsp)_gsp.onclick=()=>{geoMode=(geoMode==='split'?null:'split');setGeo();render();};
+ {const _sw=document.getElementById('swapEnds');if(_sw)_sw.onclick=()=>edit(()=>swapMemberEnds(m));}  // reverse start↔end (2D + 3D via render+sync3D)
+ {const setPos=v=>edit(()=>{m.position=v;});  // profile placement on the reference line (Tekla-style); persists + re-extrudes the 3D
+  const _pt=document.getElementById('posTop'),_pm=document.getElementById('posMid'),_pb=document.getElementById('posBot');
+  if(_pt)_pt.onclick=()=>setPos('top');if(_pm)_pm.onclick=()=>setPos('middle');if(_pb)_pb.onclick=()=>setPos('bottom');}
  const wireTos=(id,o)=>{const ck=document.getElementById(id+'_ck');if(ck)ck.onchange=e=>edit(()=>{o.tosDef=e.target.checked;if(o.tosDef)o.tos=defaultTOS;});
    const inp=document.getElementById(id);if(inp)inp.onchange=e=>edit(()=>{o.tos=parseLen(e.target.value);o.tosDef=false;});};
  const wireDet=(id,o)=>{const i=document.getElementById(id);if(i)i.onchange=e=>edit(()=>{o.detail=e.target.value.trim();});
@@ -649,9 +792,9 @@ function panel(){
  document.getElementById('del').onclick=()=>edit(()=>{P.members=P.members.filter(x=>x.id!==m.id);selIds.clear();});
  {const vb=document.getElementById('verifyBtn');if(vb)vb.onclick=()=>edit(()=>{m.verified=!m.verified;});}
 }
-function addFromSeg(sid){const sg=P.segments.find(s=>s.id===sid);if(!sg)return;const P=addProfile;const id='m'+Date.now();const pv=snapshot();
- P.members.push(ensureMeta({id,profile:P,wp:[sg.a.slice(),sg.b.slice()],angle:sg.o,rfi:(WT[P]==null)}));
- if(P&&!profs.includes(P)){profs.push(P);profs.sort();}pushUndo(pv);render();}
+function addFromSeg(sid){const sg=P.segments.find(s=>s.id===sid);if(!sg)return;const prof=addProfile;const id='m'+Date.now();const pv=snapshot();
+ P.members.push(ensureMeta({id,profile:prof,wp:[sg.a.slice(),sg.b.slice()],angle:sg.o,rfi:(WT[prof]==null)}));
+ if(prof&&!profs.includes(prof)){profs.push(prof);profs.sort();}pushUndo(pv);render();sync3D();}
 // --- marquee hit-test (crossing selection): does segment ab touch rect [x0,y0,x1,y1]? ---
 function inRect(p,r){return p[0]>=r[0]&&p[0]<=r[2]&&p[1]>=r[1]&&p[1]<=r[3];}
 function ccw(a,b,c){return (c[1]-a[1])*(b[0]-a[0])-(b[1]-a[1])*(c[0]-a[0]);}
@@ -686,17 +829,18 @@ function toast(msg){let t=document.getElementById('toast');
  t.textContent=msg;t.style.opacity='1';clearTimeout(t._h);t._h=setTimeout(()=>{t.style.opacity='0';},2600);}
 // --- pointer: select(+ctrl toggle / box) + group-move + endpoint (Shift = ortho) ---
 svg.addEventListener('pointerdown',e=>{if(e.button!==0)return;const t=e.target;
- if(geoMode&&selIds.size===1){const id=[...selIds][0],m=byId(id);
-   if(geoMode==='split'){const q=toSvg(e),raw=projPt([q.x,q.y],m.wp[0],m.wp[1]);
-     const d=Math.hypot(q.x-raw.pt[0],q.y-raw.pt[1]);                       // clicked on the member?
-     if(d>=16/zoom||raw.t<=0.03||raw.t>=0.97){geoMode=null;setGeo();snapClear();render();return;}
-     let cut=raw.pt;                                                        // snap the cut to a nearby endpoint/grid, kept ON the member
-     if(!e.altKey){buildSnap(m.id);const sn=snap(raw.pt[0],raw.pt[1]);if(sn.hit){const p2=projPt([sn.x,sn.y],m.wp[0],m.wp[1]);if(p2.t>0.02&&p2.t<0.98)cut=p2.pt;}}
-     snapClear();doSplit(m,cut);return;}
-   let tgt=null;                                                       // extend/trim → pick a target line
-   if(t.classList.contains('member')&&t.dataset.id!==id){const tm=byId(t.dataset.id);if(tm)tgt=[tm.wp[0],tm.wp[1]];}
+ if(geoMode==='split'&&selIds.size===1){const id=[...selIds][0],m=byId(id);
+   const q=toSvg(e),raw=projPt([q.x,q.y],m.wp[0],m.wp[1]);
+   const d=Math.hypot(q.x-raw.pt[0],q.y-raw.pt[1]);                       // clicked on the member?
+   if(d>=16/zoom||raw.t<=0.03||raw.t>=0.97){geoMode=null;setGeo();snapClear();render();return;}
+   let cut=raw.pt;                                                        // snap the cut to a nearby endpoint/grid, kept ON the member
+   if(!e.altKey){buildSnap(m.id);const sn=snap(raw.pt[0],raw.pt[1]);if(sn.hit){const p2=projPt([sn.x,sn.y],m.wp[0],m.wp[1]);if(p2.t>0.02&&p2.t<0.98)cut=p2.pt;}}
+   snapClear();doSplit(m,cut);return;}
+ if(geoMode==='el'&&selIds.size>=1){                                   // extend/trim → pick ONE target line; ALL selected ends snap to it
+   let tgt=null;
+   if(t.classList.contains('member')&&!selIds.has(t.dataset.id)){const tm=byId(t.dataset.id);if(tm)tgt=[tm.wp[0],tm.wp[1]];}
    else if(t.classList.contains('seg')){const sg=P.segments.find(s=>s.id===t.dataset.seg);if(sg)tgt=[sg.a,sg.b];}
-   if(tgt){geoMode=null;setGeo();snapEnd(m,tgt[0],tgt[1]);}            // miss (empty/own line) keeps the mode armed
+   if(tgt){geoMode=null;setGeo();snapEndMulti(selArr(),tgt[0],tgt[1]);}  // miss (empty/own line) keeps the mode armed
    return;}
  if(t.classList.contains('handle')){const id=t.dataset.mid||[...selIds][0],m=byId(id),h=+t.dataset.h;if(!m)return;buildSnap(id);
    drag={type:'end',h,id,anchor:m.wp[1-h].slice(),pre:snapshot()};svg.setPointerCapture(e.pointerId);e.preventDefault();return;}
@@ -768,42 +912,83 @@ document.getElementById('undoB').onclick=doUndo;
 document.getElementById('redoB').onclick=doRedo;
 addEventListener('keydown',e=>{
  const inForm=/^(INPUT|SELECT|TEXTAREA)$/.test((document.activeElement||{}).tagName);
+ if(e.key==='Escape'&&moreOpen()){closeMore();moreBtn.focus();return;}
  if(e.key==='Escape'&&lightboxOpen()){closeLightbox();return;}
  if(e.key==='Escape'&&askAiIsOpen()){askAiClose();return;}
  if(e.key==='Escape'&&detailsOpen()){closeDetails();return;}
  if(e.key==='Escape'&&framesOpen()){closeFrames();return;}
  if(e.key==='Escape'&&rfiOpen()){closeRFI();return;}
  if(e.key==='Escape'&&confOpen()){closeConf();return;}
- if(e.key==='Home'){e.preventDefault();fitToWindow();return;}
+ if(e.key==='Home'){e.preventDefault();if(view3d&&window.Steel3DView)window.Steel3DView.frameAll();else fitToWindow();return;}
+ if(!view3d&&!inForm&&(((e.key==='z'||e.key==='Z')&&e.altKey)||(e.key===' '&&e.shiftKey))){e.preventDefault();zoomToSelection();return;}  // 2D zoom-to-selected (Tekla Shift+Space / Alt+Z); 3D handles its own (steel-3d-view onKey)
  if(e.key==='Escape'){if(geoMode){geoMode=null;setGeo();render();return;}if(mode==='add'){mode='sel';setMode();}picking=false;pickKind='profile';pickEnd=null;selIds.clear();render();return;}
  if((e.key==='Delete'||e.key==='Backspace')&&selIds.size&&!inForm){e.preventDefault();edit(()=>{P.members=P.members.filter(m=>!selIds.has(m.id));selIds.clear();});return;}
- if(!inForm&&selIds.size===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey){const kk=e.key.toLowerCase();
-   if(kk==='e'){e.preventDefault();geoMode=(geoMode==='el'?null:'el');setGeo();render();return;}
-   if(kk==='s'){e.preventDefault();geoMode=(geoMode==='split'?null:'split');setGeo();render();return;}}
+ if(!inForm&&selIds.size>=1&&!e.ctrlKey&&!e.metaKey&&!e.altKey){const kk=e.key.toLowerCase();
+   if(kk==='e'){e.preventDefault();geoMode=(geoMode==='el'?null:'el');setGeo();render();return;}                       // Extend/Trim — any selection
+   if(kk==='s'&&selIds.size===1){e.preventDefault();geoMode=(geoMode==='split'?null:'split');setGeo();render();return;}}  // Split — single only
  if(!(e.ctrlKey||e.metaKey))return;const k=e.key.toLowerCase();
  if(k==='z'&&!e.shiftKey){e.preventDefault();doUndo();}
  else if(k==='y'||(k==='z'&&e.shiftKey)){e.preventDefault();doRedo();}
  else if(k==='d'&&selIds.size){e.preventDefault();doDup();}
- else if(k==='a'&&!inForm){e.preventDefault();selIds=new Set(P.members.map(m=>m.id));render();}});
+ else if(k==='a'&&!inForm){e.preventDefault();selIds=new Set(P.members.map(m=>m.id));render();}
+ else if(k==='s'){e.preventDefault();persist();(window.flushContract?window.flushContract():Promise.resolve()).then(()=>toast('Saved ✓')).catch(()=>toast('Save failed'));}});  // edits autosave; Ctrl+S just flushes now (no browser "save page" dialog)
 // zoom bar
 document.getElementById('zIn').onclick=()=>zoomCentered(zoom*1.25);
 document.getElementById('zOut').onclick=()=>zoomCentered(zoom/1.25);
 document.getElementById('zFit').onclick=fitToWindow;
 document.getElementById('zRange').oninput=e=>zoomCentered(+e.target.value/100);
+// --- "More" overflow menu: click-toggles a themed popup; closes on item-click, click-outside, or Esc. ---
+const moreBtn=document.getElementById('moreBtn'),moreMenu=document.getElementById('moreMenu');
+function moreOpen(){return moreMenu.classList.contains('open');}
+function moreOutside(e){if(!moreMenu.contains(e.target)&&e.target!==moreBtn)closeMore();}
+function closeMore(){moreMenu.classList.remove('open');moreBtn.setAttribute('aria-expanded','false');document.removeEventListener('mousedown',moreOutside,true);}
+moreBtn.onclick=e=>{e.stopPropagation();if(moreOpen())closeMore();else{moreMenu.classList.add('open');moreBtn.setAttribute('aria-expanded','true');document.addEventListener('mousedown',moreOutside,true);}};
+moreMenu.addEventListener('click',e=>{if(e.target.closest('button'))closeMore();});  // an item's own handler runs (bubble) before this closes the menu
 // --- 2D|3D view toggle. 3D is rendered by Steel3DView (Three.js, loaded as a module → window). It
 // fetches the SAME scene the bake uses (/api/contract/:id/scene) so 2D and 3D show one contract. ---
 const view3dApi={
  // POST the in-progress contract so the model reflects unsaved edits; throws on a bad contract.
  fetchScene:async()=>{const r=await fetch('/api/contract/'+encodeURIComponent(APP_ID)+'/scene',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({contract:C})});const j=await r.json();if(!j.ok)throw new Error(j.error||'scene render failed');return j.scene;},  // endpoint shape: {ok, scene, skipped}
- onSelect:(id,additive)=>{if(!id){selIds=new Set();}else if(additive){selIds.has(id)?selIds.delete(id):selIds.add(id);}else{selIds=new Set([id]);}render();},  // 3D pick → shared selection (Phase B4)
+ onSelect:(id,additive)=>{if(!id){selIds=new Set();}else if(additive){selIds.has(id)?selIds.delete(id):selIds.add(id);}else{selIds=new Set([id]);}render();},  // 3D pick → shared selection
+ onSelectMany:(ids)=>{selIds=new Set(ids||[]);if(mode==='add'){mode='sel';setMode();}render();},  // 3D box-select → shared selection
  getMembers:()=>P.members,                                   // raw members (wp) for snap geometry
  ptPerFt:()=>(P&&P.pt_per_ft>0?P.pt_per_ft:1),
  defaultTosMm:()=>(defaultTOS!=null?defaultTOS*25.4:0),      // editor stores default T.O.S in inches
+ geoMode:()=>geoMode,                                        // 'el' | 'split' | null — armed Trim/Extend/Split state
  onMoveMember:(id,newWp)=>{edit(()=>{const m=byId(id);if(m)m.wp=newWp;});},  // 3D drag → write wp (undoable, autosaves, syncs 2D/chip/BOM)
+ onMoveEndpoint:(id,end,wp)=>{edit(()=>{const m=byId(id);if(m&&Array.isArray(m.wp)&&m.wp.length>=2)m.wp[end]=wp;});},  // 3D end-node drag → write just that endpoint
  onElevateMember:(id,dIn)=>{edit(()=>{const m=byId(id);if(!m)return;ensureMeta(m);  // 3D Alt-drag → raise/lower T.O.S by dIn inches
    if(m.role==='column'){m.col.tos=(m.col.tos!=null?m.col.tos:defaultTOS)+dIn;m.col.bos=(m.col.bos!=null?m.col.bos:0)+dIn;m.col.tosDef=false;}  // rigid raise (bos null→0, both shift) so the column isn't stretched
    else m.ends.forEach(e=>{e.tos=(e.tos!=null?e.tos:defaultTOS)+dIn;e.tosDef=false;});});},
+ onTrimExtend:(targetId)=>{const tm=byId(targetId);if(tm){geoMode=null;setGeo();snapEndMulti(selArr(),tm.wp[0],tm.wp[1]);}},  // 3D Trim/Extend → every selected member's nearest end to the target line
+ onSplit:(id,wp)=>{const m=byId(id);if(m){doSplit(m,wp);sync3D();}},  // 3D Split → cut at the clicked point on the member
 };
+// Re-extrude the 3D model after a structural edit (keeps the camera where it is). Selection-only
+// changes go through render()'s setSelection — only geometry mutations need a rebuild.
+function sync3D(){if(view3d&&view3dReady&&window.Steel3DView){window.Steel3DView.rebuild(false).then(()=>{window.Steel3DView.setSelection(selIds);build3DLegend();}).catch(()=>{});}}  // rebuild also refreshes the legend (an edit may add/remove a profile)
+// Build the 3D legend overlay from the live scene groups (per profile). Single-click hide/show,
+// double-click isolate — mirrors the AWARE viewer-3d legend (deferred click so dbl-click can cancel).
+let leg3dClickT=null;
+function build3DLegend(){const host=document.getElementById('m3dLegend');if(!host||!window.Steel3DView)return;
+ const groups=window.Steel3DView.getGroups();host.replaceChildren();
+ if(!groups.length){host.style.display='none';return;}
+ const hint=document.createElement('div');hint.className='lhint';hint.textContent='click: hide/show · dbl-click: isolate';host.appendChild(hint);
+ for(const g of groups){const row=document.createElement('div');row.className='lrow';row.dataset.key=g.key;
+   const sw=document.createElement('span');sw.className='lsw';sw.style.background=g.color;
+   row.append(sw,document.createTextNode(g.label));
+   row.addEventListener('click',()=>{clearTimeout(leg3dClickT);leg3dClickT=setTimeout(()=>{window.Steel3DView.toggleGroup(g.key);refresh3DLegend();},220);});
+   row.addEventListener('dblclick',e=>{e.preventDefault();clearTimeout(leg3dClickT);window.Steel3DView.soloToggle(g.key);refresh3DLegend();});
+   host.appendChild(row);}
+ host.style.display='flex';refresh3DLegend();}
+function refresh3DLegend(){if(!window.Steel3DView)return;const st=window.Steel3DView.groupState(),hidden=new Set(st.hidden);
+ document.querySelectorAll('#m3dLegend .lrow').forEach(r=>{const k=r.dataset.key;r.classList.toggle('off',hidden.has(k)||(st.solo!==null&&st.solo!==k));});}
+let bar3dWired=false;
+function seg3dActive(sel,attr,val){document.querySelectorAll(sel+' button').forEach(b=>b.classList.toggle('on',b.getAttribute(attr)===val));}
+function wire3DBar(){if(bar3dWired||!window.Steel3DView)return;bar3dWired=true;
+ document.querySelectorAll('#m3dProj button').forEach(b=>b.onclick=()=>{window.Steel3DView.setProjection(b.dataset.proj);seg3dActive('#m3dProj','data-proj',b.dataset.proj);});
+ document.querySelectorAll('#m3dMode button').forEach(b=>b.onclick=()=>{window.Steel3DView.setDisplayMode(b.dataset.mode);seg3dActive('#m3dMode','data-mode',b.dataset.mode);});
+ document.getElementById('m3dFit').onclick=()=>window.Steel3DView.frameAll();
+ document.getElementById('m3dRef').onclick=()=>{const on=!window.Steel3DView.refLine();window.Steel3DView.setRefLine(on);document.getElementById('m3dRef').classList.toggle('on',on);};}
 function applyViewState(on){            // flip the toggle + swap the canvases (no 3D side effects)
  view3d=on;
  const t2=document.getElementById('vt2d'),t3=document.getElementById('vt3d');
@@ -812,6 +997,10 @@ function applyViewState(on){            // flip the toggle + swap the canvases (
  document.getElementById('stage').style.display=on?'none':'';
  document.getElementById('stage3d').style.display=on?'block':'none';
  document.getElementById('zoombar').style.display=on?'none':'';      // zoom slider is 2D-only
+ document.getElementById('planSel').style.display=on?'none':'';      // plan selector is 2D-only (3D shows the whole model)
+ document.getElementById('m3dBar').style.display=on?'flex':'none';
+ document.getElementById('m3dCube').style.display=on?'block':'none';
+ if(!on)document.getElementById('m3dLegend').style.display='none';   // legend is shown by build3DLegend when entering 3D
 }
 async function setView(on){
  if(on){
@@ -820,8 +1009,10 @@ async function setView(on){
    if(!view3dReady){window.Steel3DView.init(document.getElementById('stage3d'),view3dApi);view3dReady=true;}
    applyViewState(true);
    window.Steel3DView.show();
-   await window.Steel3DView.rebuild();
+   await window.Steel3DView.rebuild(true);   // fit the camera on entering 3D
    window.Steel3DView.setSelection(selIds);
+   wire3DBar();build3DLegend();
+   seg3dActive('#m3dProj','data-proj',window.Steel3DView.projection());seg3dActive('#m3dMode','data-mode',window.Steel3DView.mode());  // reflect persisted state
   }catch(e){                            // a failed open must not strand the UI in 3D with a blank canvas
    applyViewState(false);if(window.Steel3DView)window.Steel3DView.hide();
    toast('Could not open 3D view: '+((e&&e.message)||e));
@@ -934,6 +1125,13 @@ function rfiReason(m){if(!m.profile)return 'No profile assigned';
 function zoomToMember(m){const a=m.wp[0],b=m.wp[1],w=Math.abs(a[0]-b[0])||40,h=Math.abs(a[1]-b[1])||40;
  applyZoom(Math.max(.3,Math.min(2.5,Math.min(stage.clientWidth/(w*2.2),stage.clientHeight/(h*2.2)))));
  const cx=(a[0]+b[0])/2,cy=(a[1]+b[1])/2;stage.scrollLeft=(cx-X0)*zoom-stage.clientWidth/2;stage.scrollTop=(cy-Y0)*zoom-stage.clientHeight/2;}
+// Frame the whole current selection (Tekla "Zoom selected"); falls back to fit-all when nothing's picked — mirrors the 3D view's frameSelection().
+function zoomToSelection(){const arr=selArr();if(!arr.length){fitToWindow();return;}
+ let x0=Infinity,y0=Infinity,x1=-Infinity,y1=-Infinity;
+ for(const m of arr)for(const p of m.wp){if(p[0]<x0)x0=p[0];if(p[0]>x1)x1=p[0];if(p[1]<y0)y0=p[1];if(p[1]>y1)y1=p[1];}
+ const w=Math.max(x1-x0,40),h=Math.max(y1-y0,40);
+ applyZoom(Math.min(stage.clientWidth/(w*1.35),stage.clientHeight/(h*1.35)));
+ const cx=(x0+x1)/2,cy=(y0+y1)/2;stage.scrollLeft=(cx-X0)*zoom-stage.clientWidth/2;stage.scrollTop=(cy-Y0)*zoom-stage.clientHeight/2;}
 function openRFI(){const g=document.getElementById('rfiGrid');const list=rfiList();
  g.innerHTML=list.length?('<div class=hint style="margin-bottom:10px">'+list.length+' member'+(list.length>1?'s':'')+' have no resolved AISC size, so their weight is excluded from the BOM. Assign a profile to clear it — for <b>MF/BF</b> marks use the <b>Frames</b> schedule. Edits here update the contract.</div><table class=ftab><thead><tr><th>#</th><th>Profile / mark</th><th>Role</th><th>Length</th><th>Why it’s flagged</th><th></th></tr></thead><tbody>'+
    list.map((m,i)=>{ensureMeta(m);const L=(len(m.wp[0],m.wp[1])/FT).toFixed(1);
@@ -1144,6 +1342,7 @@ function setPlan(i){C.active=i;P=C.plans[i];
  undo=P.undo||(P.undo=[]);redo=P.redo||(P.redo=[]);
  selIds=new Set();picking=false;pickKind='profile';pickEnd=null;mode='sel';geoMode=null;
  defaultTOS=(P.default_tos!=null?P.default_tos:198);
+ P.default_tos=defaultTOS;  // make the default explicit so the 3D scene + bake use the SAME TOS the editor/dots do (contractToScene falls back to 0, not 198 — keeping them in sync stops the end dots floating off the steel)
  if(!P.autofilled){autofillTOS();P.autofilled=true;}
  const ds=new Set([...(P.details||[]).map(d=>d.text),...Object.keys(C.custom_details)]);document.getElementById('detailsBtn').textContent='Details ('+ds.size+')';
  setMode();render();fitToWindow();
@@ -1165,7 +1364,7 @@ try{stage.focus({preventScroll:true});}catch(_){}   // grab keyboard focus on op
   if(src.read_at){try{const d=new Date(src.read_at);if(!isNaN(d.getTime()))parts.push(d.toLocaleDateString());}catch{/* skip unparseable date */}}
   if(!parts.length)return;
   const el=document.getElementById('srcStat');if(!el)return;
-  el.textContent=parts.join(' · ');el.style.display='';
+  el.textContent=parts.join(' · ');el.title=parts.join(' · ');el.style.display='';  // title = full provenance (the chip itself truncates with ellipsis)
 })();
 // --- Ask AI: send instruction + optional screenshots → POST /api/contract-request ---
 // The server records a tweak-contract request; the terminal AI picks it up async and PUTs

package/package.json

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