@floless/app 0.67.0 → 0.69.0

package/dist/web/steel-editor.html

@@ -12,6 +12,8 @@
  *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font:13px system-ui;height:100vh;display:flex;flex-direction:column}
  header{display:flex;align-items:center;gap:14px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--line)}
  header b{font-size:14px} .stat{color:var(--mut)} .stat b{color:var(--text)}
+ header .tb-sep{width:1px;height:20px;background:var(--line);flex:0 0 auto;align-self:center}   /* thin divider grouping the header action clusters (history | tools | AI | more) */
+ #dim3dWrap{gap:8px}   /* 3D Dimension cluster in the header — display flips inline-flex/none by view (applyViewState) */
  button{background:#334155;color:var(--text);border:1px solid #475569;border-radius:6px;padding:5px 10px;cursor:pointer;font:13px system-ui}
  button:hover{background:#475569} button.on{background:var(--brand);border-color:var(--brand)}
  button:disabled{opacity:.4;cursor:default;background:#334155}
@@ -101,6 +103,20 @@
  #moreMenu .msnap-hdr .chev{color:var(--mut);font-size:10px;transition:transform .15s}
  #moreMenu .msnap-hdr[aria-expanded=true] .chev{transform:rotate(90deg)}
  #moreMenu .msnap-sect{display:none} #moreMenu .msnap-sect.open{display:block}
+ /* Section accordions — every ⋯ section (Snapping, Display, Detailing, …) collapses/expands like Snapping; state persists (wireMoreSections). */
+ #moreMenu .msec-hdr{display:flex;align-items:center;justify-content:space-between;font-weight:600;border-top:1px solid var(--line)}   /* headers read as headers: semibold + a divider between sections */
+ #moreMenu #snapHdr{border-top:0}   /* first section — no divider above it */
+ #moreMenu .msec-hdr .chev{color:var(--mut);font-size:10px;transition:transform .15s}
+ #moreMenu .msec-hdr[aria-expanded=true]{background:rgba(59,130,246,.08);color:var(--brand)}   /* the OPEN section's header is brand-tinted so its (indented) items read as "inside" it, not merged with the next section */
+ #moreMenu .msec-hdr[aria-expanded=true] .chev{transform:rotate(90deg);color:var(--brand)}
+ #moreMenu .msec-hdr[aria-expanded=true]:hover{background:#334155;color:var(--text)}   /* keep the normal hover feedback on an open header */
+ #moreMenu .msec-body{display:none} #moreMenu .msec-body.open{display:block;padding-bottom:4px}
+ #moreMenu .msec-body button,#moreMenu .msec-body .mhint{padding-left:26px}   /* indent items so they sit visually UNDER their header */
+ /* Insert-detail now lives in the Detailing section; its picker flies out to the LEFT of the ⋯ menu (which hugs the right edge). */
+ #moreMenu .m3dwrap.ins-in-menu{display:block}
+ #moreMenu #m3dInsert.on{color:var(--brand)}
+ #moreMenu #m3dInsertMenu{left:auto;right:calc(100% + 4px);top:0}
+ body:not(.v3d) #moreMenu #insWrap{display:none}   /* Insert detail places into the 3D scene — hide it in 2D (needs 2 ids to beat the .m3dwrap.ins-in-menu display:block) */
  #moreMenu button.msnap{display:flex;align-items:center;gap:0}
  #moreMenu button.msnap.on{color:var(--text)}   /* the switch carries the state — don't also brand the text (reads as an armed tool elsewhere in this menu) */
  #moreMenu .mck,.cmmenu .mck{position:relative;width:26px;height:14px;margin-right:9px;border-radius:7px;border:1px solid var(--line);background:#0b1220;flex:none;transition:background-color .15s,border-color .15s}   /* delicate CSS-only slider switch — shared by the ⋯ Snapping rows and the Move/Copy → Drag-to-move/copy toggle */
@@ -229,6 +245,11 @@
  text.dimtx{fill:#e2e8f0;font-weight:600;font-family:system-ui;text-anchor:middle;dominant-baseline:central;pointer-events:none}
  line.dim.dimsel{stroke:#f59e0b} line.dimwit.dimsel{stroke:#f59e0b;opacity:1} rect.dimchip.dimsel{stroke:#f59e0b} circle.dimend.dimsel{fill:#f59e0b}
  circle.dimhandle{fill:#22d3ee;stroke:#0b1220;stroke-width:2;cursor:grab}
+ /* property-label chips (right-click → Properties popup): dark chip + brand-blue accent, distinct from the cyan dimension chips.
+    pointer-events:none on the whole group — labels are passive annotations; clicks/marquee/drag pass through to the members underneath. */
+ g.pllabels{pointer-events:none}
+ rect.plchip{fill:#0b1220;stroke:var(--brand);stroke-width:1;vector-effect:non-scaling-stroke}
+ text.pltx{fill:#e2e8f0;font-family:system-ui;text-anchor:middle;dominant-baseline:central}
  /* structural grid layer (under the members): dash-dot slate lines + label bubbles at both ends */
  line.gridln{stroke:#64748b;stroke-width:1.3;stroke-dasharray:12 4 2 4;vector-effect:non-scaling-stroke;pointer-events:none;opacity:.85}
  line.gridhit{stroke:transparent;stroke-width:9;vector-effect:non-scaling-stroke;pointer-events:stroke}
@@ -279,16 +300,46 @@
  .m3dmenu.open{display:block}
  .m3dmenu button{display:block;width:100%;text-align:left;background:transparent;border:0;border-radius:0;padding:7px 12px;color:var(--text);white-space:nowrap;font-size:12px;box-shadow:none}
  .m3dmenu button:hover{background:#334155}
+ .m3dmenu button.on{color:var(--brand)}   /* active choice in a radio-style menu (Camera / Display) */
+ .m3dmenu button.on::after{content:'✓';float:right;margin-left:16px;color:var(--brand)}
  .m3dmenu button:disabled{opacity:.4;cursor:default;background:transparent}
  .m3dmenu button.mdanger{color:#fca5a5} .m3dmenu button.mdanger:hover{background:#7f1d1d;color:#fecaca}
  .m3dmenu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
  .m3dmenu label{display:flex;align-items:center;gap:7px;padding:7px 12px;color:var(--text);font-size:12px;cursor:pointer;white-space:nowrap}
  .m3dmenu label:hover{background:#334155}
- .m3dmenu label input{margin:0;accent-color:var(--brand);cursor:pointer}
+ .m3dmenu label input{margin:0;width:auto;accent-color:var(--brand);cursor:pointer}   /* width:auto — don't inherit the global input{width:100%}; keeps the checkbox tight against its label (View / Plane / Work toggles) */
  .m3dmenu .wpprow{display:flex;gap:4px;align-items:center;padding:4px 12px}
  .m3dmenu .wpprow button{width:auto;flex:none;padding:4px 8px;border:1px solid var(--line);border-radius:5px}
  .m3dmenu .wpprow input{width:74px;height:24px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:5px;padding:0 6px;font:12px system-ui}
  .m3dmenu .wpprow input:focus{outline:none;border-color:var(--brand)}
+ /* right-click property-labels popup — floating panel, built from the same tokens as .m3dmenu / .mpanel (no new vocabulary) */
+ #propPop{position:fixed;left:0;top:0;z-index:46;width:280px;max-height:60vh;display:none;flex-direction:column;background:var(--panel);border:1px solid #475569;border-radius:10px;box-shadow:0 16px 48px rgba(0,0,0,.6);font-size:12px;color:var(--text)}
+ #propPop.open{display:flex}
+ #propPop .pph{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line)}
+ #propPop .pph b{font-size:12px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+ #propPop .pph .pcount{color:var(--mut);font-size:10px;white-space:nowrap}
+ #propPop .pph button{background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:4px;font-size:11px;padding:1px 6px;cursor:pointer;line-height:1.5}
+ #propPop .pph button:hover{border-color:var(--brand);color:var(--text)}
+ #propPop .pph button.pin.on{border-color:var(--brand);color:var(--brand)}
+ #propPop .ppsearch{padding:8px 10px 4px}
+ #propPop .ppsearch input{width:100%;height:26px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:0 8px;font:12px system-ui;box-sizing:border-box}
+ #propPop .ppsearch input:focus{outline:none;border-color:var(--brand)}
+ #propPop .ppmeta{color:var(--mut);font-size:10px;padding:2px 10px 0}
+ #propPop .ppscope{color:var(--mut);font-size:10px;padding:2px 10px 6px;font-style:italic}
+ #propPop .pplist{overflow:auto;flex:1;padding:2px 0;min-height:40px;border-top:1px solid var(--line)}
+ #propPop .pprow{display:flex;align-items:center;gap:8px;min-height:32px;padding:2px 10px;cursor:pointer}
+ #propPop .pprow:hover{background:#334155}
+ #propPop .pprow.dis{opacity:.5;cursor:default}
+ #propPop .pprow.dis:hover{background:transparent}
+ #propPop .pprow input{margin:0;accent-color:var(--brand);cursor:pointer;flex:none;width:auto}   /* width:auto beats the editor's global input{width:100%} that would otherwise stretch the checkbox across the row */
+ #propPop .pprow .pn{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+ #propPop .pprow .pv{color:var(--mut);font-variant-numeric:tabular-nums;max-width:44%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
+ #propPop .pprow .pv.varies{font-style:italic}
+ #propPop .ppempty{color:var(--mut);font-size:11px;padding:12px 10px;text-align:center}
+ #propPop .ppfoot{border-top:1px solid var(--line);padding:8px 10px;display:flex;flex-direction:column;gap:6px}
+ #propPop .ppfoot .seg2{margin-top:0}
+ #propPop .ppfoot label{display:flex;align-items:center;gap:7px;color:var(--text);cursor:pointer;font-size:11px}
+ #propPop .ppfoot label input{margin:0;accent-color:var(--brand);cursor:pointer;flex:none;width:auto}
  /* thin cluster divider in the 3D toolbar */
  #m3dBar .tb-sep{width:1px;height:18px;background:var(--line);flex:0 0 auto;align-self:center}
  /* Themed tooltip — replaces native title= so no OS-default tooltip leaks the dark theme. */
@@ -349,22 +400,29 @@
 </head><body>
 <header>
  <b>Steel Model</b>
- <div id=viewToggle role=group aria-label="Canvas view"><button id=vt2d class="seg on" aria-pressed=true title="Plan view (2D overlay)">2D</button><button id=vt3d class=seg aria-pressed=false title="3D model view">3D</button></div>
- <select id=planSel title="Switch plan view"></select>
+ <div id=viewToggle role=group aria-label="Canvas view"><button id=vt2d class="seg on" aria-pressed=true data-tip="Plan view (2D overlay)">2D</button><button id=vt3d class=seg aria-pressed=false data-tip="3D model view">3D</button></div>
+ <select id=planSel data-tip="Switch plan view"></select>
  <span class=stat>Members <b id=mc>0</b></span><span class=stat>Weight <b id=wt>0</b> tons · <b id=wtlb>0</b> lb</span>
- <span class=stat id=rfiStat title="Click to list unresolved members (RFI)">RFI <b id=rc>0</b></span>
- <span class=stat id=dupStat title="Overlapping/duplicate members (same geometry)">Dup <b id=dpc>0</b></span>
- <span class=stat id=csStat title="Coordinate system — Global by default. Set a local frame from the ⋯ menu for skewed framing.">Axes <b>Global</b></span>
- <span class=stat id=snapStat style="display:none" title="Snap restricted for this operation — right-click the canvas to change; click here or press Esc to clear">Snap <b>—</b></span>
- <span class=stat id=confStat title="Confidence report — AI-read score vs. target. Click to review element evidence." style="display:none">Confidence <b id=confPct>—</b><span id=confTgt></span></span>
- <span class=stat id=saveStat title="Edits auto-save in this browser (localStorage)">Saved</span>
+ <span class=stat id=rfiStat data-tip="Click to list members with an unresolved size (RFI — Request for Information)">RFI <b id=rc>0</b></span>
+ <span class=stat id=dupStat data-tip="Overlapping/duplicate members (same geometry)">Dup <b id=dpc>0</b></span>
+ <span class=stat id=csStat data-tip="Coordinate system — Global by default. Set a local frame from the ⋯ menu for skewed framing.">Axes <b>Global</b></span>
+ <span class=stat id=snapStat style="display:none" data-tip="Snap restricted for this operation — right-click the canvas to change; click here or press Esc to clear">Snap <b>—</b></span>
+ <span class=stat id=confStat data-tip="Confidence report — AI-read score vs. target. Click to review element evidence." style="display:none">Confidence <b id=confPct>—</b><span id=confTgt></span></span>
+ <span class=stat id=saveStat data-tip="Edits auto-save in this browser (localStorage)">Saved</span>
  <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=mAdd title="Toggle add-member mode — drag to draw. Shift=ortho, Alt=no snap, right-click=restrict snap to one type">Add member</button>
- <button id=dimB title="Dimension tool (D) — click two snapped points, then a third to place. Default Free (aligned); hold Shift to lock to an axis, X/Y force horizontal/vertical, F free. Right-click the canvas to restrict snapping to one type.">⊢ Dimension</button>
+ <button id=undoB data-tip="Undo (Ctrl+Z)">↶</button>
+ <button id=redoB data-tip="Redo (Ctrl+Y / Ctrl+Shift+Z)">↷</button>
+ <span class=tb-sep></span>
+ <button id=mAdd data-tip="Toggle add-member mode — drag to draw. Shift=ortho, Alt=no snap, right-click=restrict snap to one type">Add member</button>
+ <button id=dimB data-tip="Dimension tool (D) — click two snapped points, then a third to place. Default Free (aligned); hold Shift to lock to an axis, X/Y force horizontal/vertical, F free. Right-click the canvas to restrict snapping to one type.">⊢ Dimension</button>
+ <!-- 3D Dimension cluster — relocated here from the 3D toolbar so Dimension has ONE home; shown only in 3D (applyViewState). Same ids so steel-3d-view.js reflectDimBar() still drives it. -->
+ <span id=dim3dWrap style="display:none;align-items:center;gap:8px">
+  <button id=m3dDim data-tip="Measure in 3D — click two snapped points (D); axis Free / X / Y / Z, Alt = vertical; right-click = restrict snap">⊢ Dimension</button>
+  <div class=seg-group id=m3dDimAxis style="display:none"><button data-d3axis=free class=on data-tip="Free 3D measurement (F)">Free</button><button data-d3axis=x data-tip="Lock measurement to X (X)">X</button><button data-d3axis=y data-tip="Lock measurement to Y (Y)">Y</button><button data-d3axis=z data-tip="Lock to Z / vertical (Z); Alt = quick vertical">Z</button></div>
+  <button id=m3dDimShow data-tip="Show or hide placed 3D dimensions" style="display:none">Hide dims</button>
+ </span>
  <div class=cmwrap>
-  <button id=xfB aria-haspopup=menu aria-expanded=false title="Move, Copy, array and to-level, plus how left-dragging a member behaves. Move (M) / Copy (C) also arm from the keyboard.">Move / Copy ▾</button>
+  <button id=xfB aria-haspopup=menu aria-expanded=false data-tip="Move, Copy, array and to-level, plus how left-dragging a member behaves. Move (M) / Copy (C) also arm from the keyboard.">Move / Copy ▾</button>
   <div class=cmmenu id=xfMenu role=menu>
    <div class=mlabel>Move</div>
    <button id=mvTwoB>Move — two points <span class=mkbd>M</span></button>
@@ -374,52 +432,63 @@
    <button id=cpArrB>Copy array…</button>
    <button id=cpLevelB>Copy to level…</button>
    <div class=mlabel>Dragging</div>
-   <button id=dragMoveB role=menuitemcheckbox aria-checked=false title="When ON, left-dragging a member moves it and Ctrl+drag copies it. When OFF (default), a drag does neither — a click only selects, so members can't be nudged by accident (the Move and Copy tools still work). Applies to 2D and 3D."><span class=mck aria-hidden=true></span>Drag to move/copy</button>
+   <button id=dragMoveB role=menuitemcheckbox aria-checked=false data-tip="When ON, left-dragging a member moves it and Ctrl+drag copies it. When OFF (default), a drag does neither — a click only selects, so members can't be nudged by accident (the Move and Copy tools still work). Applies to 2D and 3D."><span class=mck aria-hidden=true></span>Drag to move/copy</button>
   </div>
  </div>
+ <span class=tb-sep></span>
  <button id=askAiBtn>Ask AI ▸</button>
+ <span class=tb-sep></span>
  <div id=moreWrap>
-  <button id=moreBtn title="More actions" aria-haspopup=menu aria-expanded=false aria-label="More actions">⋯</button>
+  <button id=moreBtn data-tip="More actions" aria-haspopup=menu aria-expanded=false aria-label="More actions">⋯</button>
   <div id=moreMenu role=menu>
-   <button id=snapHdr class=msnap-hdr aria-expanded=false aria-controls=snapSect title="Running snaps — click to expand and turn each on/off (also on the snap bar, bottom-right)">Snapping<span class=chev aria-hidden=true>▸</span></button>
-   <div id=snapSect class=msnap-sect>
-    <button class="msnap on" data-snap=end role=menuitemcheckbox aria-checked=true title="Snap to member/segment endpoints"><span class=mck aria-hidden=true></span><span class=sg aria-hidden=true>□</span>Endpoint</button>
-    <button class="msnap on" data-snap=int role=menuitemcheckbox aria-checked=true title="Snap to where two members/segments cross"><span class=mck aria-hidden=true></span><span class=sg aria-hidden=true>✕</span>Intersection</button>
-    <button class="msnap on" data-snap=mid role=menuitemcheckbox aria-checked=true title="Snap to the midpoint of a member/segment"><span class=mck aria-hidden=true></span><span class=sg aria-hidden=true>△</span>Midpoint</button>
-    <button class="msnap on" data-snap=line role=menuitemcheckbox aria-checked=true title="Snap to the nearest point on any member/segment line"><span class=mck aria-hidden=true></span><span class=sg aria-hidden=true>⧗</span>Nearest</button>
-    <button class="msnap" data-snap=ext role=menuitemcheckbox aria-checked=false title="Snap along the invisible extension of a member/line past its endpoint, with a dashed guide line"><span class=mck aria-hidden=true></span><span class=sg aria-hidden=true>┈</span>Extension</button>
+   <!-- Every section is a collapse/expand accordion (same as Snapping); state persists in localStorage (wireMoreSections). -->
+   <button id=snapHdr class="msnap-hdr msec-hdr" data-sec=snap aria-expanded=false aria-controls=snapSect data-tip="Running snaps — click to expand and turn each on/off (also on the snap bar, bottom-right)">Snapping<span class=chev aria-hidden=true>▸</span></button>
+   <div id=snapSect class="msnap-sect msec-body">
+    <button class="msnap on" data-snap=end role=menuitemcheckbox aria-checked=true data-tip="Snap to member/segment endpoints"><span class=mck aria-hidden=true></span><span class=sg aria-hidden=true>□</span>Endpoint</button>
+    <button class="msnap on" data-snap=int role=menuitemcheckbox aria-checked=true data-tip="Snap to where two members/segments cross"><span class=mck aria-hidden=true></span><span class=sg aria-hidden=true>✕</span>Intersection</button>
+    <button class="msnap on" data-snap=mid role=menuitemcheckbox aria-checked=true data-tip="Snap to the midpoint of a member/segment"><span class=mck aria-hidden=true></span><span class=sg aria-hidden=true>△</span>Midpoint</button>
+    <button class="msnap on" data-snap=line role=menuitemcheckbox aria-checked=true data-tip="Snap to the nearest point on any member/segment line"><span class=mck aria-hidden=true></span><span class=sg aria-hidden=true>⧗</span>Nearest</button>
+    <button class="msnap" data-snap=ext role=menuitemcheckbox aria-checked=false data-tip="Snap along the invisible extension of a member/line past its endpoint, with a dashed guide line"><span class=mck aria-hidden=true></span><span class=sg aria-hidden=true>┈</span>Extension</button>
     <div class=mhint>Right-click the canvas any time to force one snap type for a single pick.</div>
    </div>
+   <button class=msec-hdr data-sec=display aria-expanded=false data-tip="Show/hide plan layers, and edit grid lines">Display<span class=chev aria-hidden=true>▸</span></button>
+   <div class=msec-body>
+    <button id=dimToggleB data-tip="Show or hide all placed dimensions on the plan">Hide dimensions</button>
+    <button id=calloutToggleB data-tip="Show or hide the clickable callout bubbles (section / elevation / detail references) on the plan">Hide callouts</button>
+    <button id=gridToggleB data-tip="Show or hide the grid lines in 2D and 3D">Hide grid</button>
+    <button id=gridEditB data-tip="Grid lines — a plan reference with structural bay spacings (n*d repeats a bay). Shows in 2D and 3D; drawing and drags snap to its lines and intersections.">Grid lines…</button>
+   </div>
+   <button class=msec-hdr data-sec=detailing aria-expanded=false data-tip="Connection details, plates, frames, and inserted detail images">Detailing<span class=chev aria-hidden=true>▸</span></button>
+   <div class=msec-body>
+    <button id=detailsBtn>Details</button>
+    <button id=connBtn data-tip="A lookup table of connection types (moment, shear, pinned, …). Each maps to a design detail and, per platform, a component ID; reference a row from each member end.">Connections</button>
+    <div class="m3dwrap ins-in-menu" id=insWrap>
+     <button id=m3dInsert data-tip="Insert a 2D detail image into the 3D scene, near a beam (3D view only)">Insert detail…</button>
+     <div id=m3dInsertMenu class=m3dmenu role=menu></div>
+     <input id=insFile type=file accept="image/*" style="display:none">
+    </div>
+    <button id=bpBtn data-tip="Auto-detail base plates on every column (a plate + anchor kit + weld, shown in 3D). Tune sizes per the schedule via the AI or per-column params.">Base plates</button>
+    <button id=spBtn data-tip="Auto-detail bolted shear (fin) plates on eligible beam ends (a fin plate + bolt group + weld, shown in 3D). Tune sizes per the schedule via the AI or per-end params.">Shear plates</button>
+    <button id=framesBtn>Frames</button>
+   </div>
+   <button class=msec-hdr data-sec=checks aria-expanded=false data-tip="Find and fix modelling problems">Model checks<span class=chev aria-hidden=true>▸</span></button>
+   <div class=msec-body>
+    <button id=dupB data-tip="Selects overlapping members drawn twice by mistake — review, then press Delete to remove the extra one.">Duplicates</button>
+    <button id=revB data-tip="Select beams drawn the wrong way — a mostly-horizontal beam should run left→right, a steep/skew beam bottom→up. Review, then press P to swap their direction.">Reversed beams</button>
+    <button id=mrgB data-tip="Joins straight, end-to-end runs of the same profile into one beam. Undoable.">Merge collinear beams</button>
+   </div>
+   <button class=msec-hdr data-sec=coords aria-expanded=false data-tip="Local vs global drawing axes (for skewed framing)">Coordinate system<span class=chev aria-hidden=true>▸</span></button>
+   <div class=msec-body>
+    <button id=csSetB data-tip="Define a local X axis by clicking two points (origin, then X-direction). Y follows at 90°. Orthogonal drawing and X/Y dimensions then snap to this frame — for skewed framing.">↺ Set local axes…</button>
+    <button id=csResetB data-tip="Return to the global X/Y axes (default)" disabled>Reset to global axes</button>
+   </div>
+   <button class=msec-hdr data-sec=session aria-expanded=false data-tip="Reload from the server, or export the data">Session<span class=chev aria-hidden=true>▸</span></button>
+   <div class=msec-body>
+    <button id=reloadB data-tip="Reloads this page and pulls in any changes your terminal AI made since you last opened it.">↻ Reload from server</button>
+    <button id=exp>Export contract…</button>
+   </div>
    <hr>
-   <div class=mlabel>Dimensions</div>
-   <button id=dimToggleB title="Show or hide all placed dimensions on the plan">Hide dimensions</button>
-   <button id=calloutToggleB title="Show or hide the clickable callout bubbles (section / elevation / detail references) on the plan">Hide callouts</button>
-   <hr>
-   <div class=mlabel>Grid</div>
-   <button id=gridEditB title="Grid lines — a plan reference with Tekla-style spacings (n*d repeats a bay). Shows in 2D and 3D; drawing and drags snap to its lines and intersections.">Grid lines…</button>
-   <button id=gridToggleB title="Show or hide the grid lines in 2D and 3D">Hide grid</button>
-   <hr>
-   <div class=mlabel>Coordinate system</div>
-   <button id=csSetB title="Define a local X axis by clicking two points (origin, then X-direction). Y follows at 90°. Orthogonal drawing and X/Y dimensions then snap to this frame — for skewed framing.">↺ Set local axes…</button>
-   <button id=csResetB title="Return to the global X/Y axes (default)" disabled>Reset to global</button>
-   <hr>
-   <div class=mlabel>Review</div>
-   <button id=dupB title="Select duplicate (overlapping) members — review then Delete to dedupe">Duplicates</button>
-   <button id=revB title="Select beams drawn the wrong way — a mostly-horizontal beam should run left→right, a steep/skew beam bottom→up. Review, then press P to swap their direction.">Reversed beams</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=connBtn title="Connection library — map each connection type to its design detail# and per-platform component id; reference a row from each member end">Connections</button>
-   <button id=bpBtn title="Auto-detail base plates on every column (a plate + anchor kit + weld, shown in 3D). Tune sizes per the schedule via the AI or per-column params.">Base plates</button>
-   <button id=spBtn title="Auto-detail bolted shear (fin) plates on eligible beam ends (a fin plate + bolt group + weld, shown in 3D). Tune sizes per the schedule via the AI or per-end params.">Shear plates</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>
+   <button id=revertB class=mdanger data-tip="Throws away every change you've made in this browser and reloads the original AI-read model. This can't be undone.">Revert all edits…</button>
   </div>
  </div>
 </header>
@@ -428,20 +497,37 @@
   <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">
-   <!-- Camera -->
-   <div class=seg-group id=m3dProj><button data-proj=persp class=on data-tip="Perspective view — natural depth">Persp</button><button data-proj=ortho data-tip="Orthographic — true scale, no perspective">Ortho</button></div>
+   <!-- Camera projection — dropdown (like Plane / Work area); the button shows the current mode -->
+   <div class=m3dwrap>
+    <button id=m3dProjBtn data-tip="Camera projection — perspective, or orthographic (true scale)">Persp ▾</button>
+    <div id=m3dProj class=m3dmenu role=menu>
+     <button data-proj=persp class=on data-tip="Perspective — natural depth">Perspective</button>
+     <button data-proj=ortho data-tip="Orthographic — true scale, no perspective">Orthographic</button>
+    </div>
+   </div>
    <button id=m3dFit data-tip="Fit all to view (Home)">Fit</button>
+   <button id=m3dFitSel data-tip="Zoom to selected — frame just the selected members (Alt+Z)">Zoom sel</button>
    <span class=tb-sep></span>
-   <!-- Display / visibility -->
-   <div class=seg-group id=m3dMode><button data-mode=solid class=on data-tip="Solid shaded model">Solid</button><button data-mode=wire data-tip="Wireframe — edges only">Wire</button><button data-mode=xray data-tip="See-through — reveal hidden parts">X-ray</button></div>
+   <!-- Display mode — dropdown; the button shows the current mode -->
+   <div class=m3dwrap>
+    <button id=m3dModeBtn data-tip="Display mode — solid, wireframe, or see-through (X-ray)">Solid ▾</button>
+    <div id=m3dMode class=m3dmenu role=menu>
+     <button data-mode=solid class=on data-tip="Solid shaded model">Solid</button>
+     <button data-mode=wire data-tip="Wireframe — edges only">Wire</button>
+     <button data-mode=xray data-tip="See-through — reveal hidden parts">X-ray</button>
+    </div>
+   </div>
    <button id=m3dIso data-tip="Isolate selected — hide everything else (Esc to exit)" style="display:none">Isolate</button>
    <span class=tb-sep></span>
-   <!-- Measure / annotate -->
-   <button id=m3dRef data-tip="Show each member's reference line (centreline)">Ref line</button>
-   <button id=m3dLabels data-tip="Show each member's mark/id label in the 3D view">Labels</button>
-   <button id=m3dDim data-tip="Measure — click two snapped points (D); axis Free/X/Y/Z, Alt = vertical; right-click = restrict snap">Dimension</button>
-   <div class=seg-group id=m3dDimAxis style="display:none"><button data-d3axis=free class=on data-tip="Free 3D measurement (F)">Free</button><button data-d3axis=x data-tip="Lock measurement to X (X)">X</button><button data-d3axis=y data-tip="Lock measurement to Y (Y)">Y</button><button data-d3axis=z data-tip="Lock to Z / vertical (Z); Alt = quick vertical">Z</button></div>
-   <button id=m3dDimShow data-tip="Show or hide placed 3D dimensions" style="display:none">Hide dims</button>
+   <!-- Display toggles: reference lines + mark labels (grouped into a menu, like Plane / Work area).
+        The Dimension tool moved to the header so it lives in one place across 2D and 3D. -->
+   <div class=m3dwrap>
+    <button id=m3dView data-tip="Show or hide reference lines and mark labels on the 3D model">View ▾</button>
+    <div id=m3dViewMenu class=m3dmenu role=menu>
+     <label data-tip="Show each member's reference line (centreline)"><input type=checkbox id=m3dRef> Ref line</label>
+     <label data-tip="Show each member's mark / id label in the 3D view"><input type=checkbox id=m3dLabels> Labels</label>
+    </div>
+   </div>
    <span class=tb-sep></span>
    <!-- Section -->
    <div class=m3dwrap>
@@ -453,11 +539,6 @@
      <button data-clip=clear class=mdanger data-tip="Remove every clip">Clear all clips</button>
     </div>
    </div>
-   <div class=m3dwrap>
-    <button id=m3dInsert data-tip="Insert a 2D detail image into the 3D scene, near a beam">Insert ▾</button>
-    <div id=m3dInsertMenu class=m3dmenu role=menu></div>
-    <input id=insFile type=file accept="image/*" style="display:none">
-   </div>
    <div class=m3dwrap>
     <button id=m3dWp data-tip="Working plane — every 3D pick (Move/Copy, next: drawing) lands on it. Set it from a face, 3 points, or a principal plane.">◇ Plane ▾</button>
     <div id=m3dWpMenu class=m3dmenu role=menu>
@@ -488,19 +569,19 @@
   <div id=m3dCube data-tip="Click a face for that view · right-drag to orbit"></div>
   <div id=m3dAxes></div>
   <div id=zoombar>
-   <button id=zOut title="Zoom out">−</button>
+   <button id=zOut data-tip="Zoom out">−</button>
    <input id=zRange type=range min=10 max=400 step=1 value=100>
-   <button id=zIn title="Zoom in">+</button>
+   <button id=zIn data-tip="Zoom in">+</button>
    <span id=zPct>100%</span>
-   <button id=zFit title="Zoom to fit (Home)">Fit</button>
+   <button id=zFit data-tip="Zoom to fit (Home)">Fit</button>
   </div>
   <!-- Quick-access snap toggles (same persistent state as the ⋯ menu → Snapping section; keep the two in sync — same 5 items). -->
   <div id=snapBar role=group aria-label="Snap settings">
-   <button data-snap=end title="Endpoint snap">□</button>
-   <button data-snap=int title="Intersection snap">✕</button>
-   <button data-snap=mid title="Midpoint snap">△</button>
-   <button data-snap=line title="Nearest snap">⧗</button>
-   <button data-snap=ext title="Extension snap">┈</button>
+   <button data-snap=end data-tip="Endpoint snap">□</button>
+   <button data-snap=int data-tip="Intersection snap">✕</button>
+   <button data-snap=mid data-tip="Midpoint snap">△</button>
+   <button data-snap=line data-tip="Nearest snap">⧗</button>
+   <button data-snap=ext data-tip="Extension snap">┈</button>
   </div>
  </div>
  <aside id=panel></aside>
@@ -513,7 +594,7 @@
  <div id=detailNewForm style="display:none;padding:14px;border-bottom:1px solid var(--line)">
   <label class=elab for=dnName>Detail name</label>
   <input id=dnName placeholder="e.g. 5-S504 or My moment conn." autocomplete=off>
-  <div id=dnDrop title="Paste or click to choose"><span id=dnDropTxt>Paste a screenshot (Ctrl+V) — or click to choose an image</span><img id=dnPrev alt=""></div>
+  <div id=dnDrop data-tip="Paste or click to choose"><span id=dnDropTxt>Paste a screenshot (Ctrl+V) — or click to choose an image</span><img id=dnPrev alt=""></div>
   <input id=dnFile type=file accept="image/*" hidden>
   <div id=dnBtns><button id=dnCancel class=ghost>Cancel</button><button id=dnAdd>Add detail</button></div>
   <div class=hint id=dnHint>For anything the auto‑detection missed. The image stays on your machine.</div>
@@ -532,7 +613,7 @@
  <div class=mpanel><div class=mhead><b>Unresolved members — RFI</b><button id=rfiClose>✕</button></div>
  <div id=rfiGrid style="padding:14px;overflow:auto"></div></div></div>
 <div id=confModal><div class=mbackdrop id=confBackdrop></div>
- <div class=mpanel><div class=mhead><b>Confidence report</b><label class=conf-tgt title="Confidence target for this read (%). Overrides the workflow default; saved with the contract.">Target <input id=confTarget type=number min=0 max=100 step=1> %</label><button id=confClose>✕</button></div>
+ <div class=mpanel><div class=mhead><b>Confidence report</b><label class=conf-tgt data-tip="Confidence target for this read (%). Overrides the workflow default; saved with the contract.">Target <input id=confTarget type=number min=0 max=100 step=1> %</label><button id=confClose>✕</button></div>
  <div id=confCats class=conf-cats></div>
  <div id=confFilter class=conf-filter></div>
  <div id=confBody class=conf-body></div></div></div>
@@ -607,7 +688,7 @@ async function boot() {
   if(!Array.isArray(C.dims3d))C.dims3d=[];   // model-global draft-only 3D dimensions
   if(!Array.isArray(C.detail_placements))C.detail_placements=[];   // model-global draft-only placed detail images (Slice 4)
   if(!C.dim_overlays||typeof C.dim_overlays!=='object'||Array.isArray(C.dim_overlays))C.dim_overlays={bolt_pitch:true,edge_clearance:true,cope_size:true,base_plate:true,anchor_depth:true};  // model-global legend DIMENSIONS toggles — all on by default
-  main();
+  main();   // (C.prop_labels is normalised inside main(), right after the PROP_DEFS/sanitizePropLabels registry is defined — see ~"normalise the contract's incoming value" — since that helper isn't in scope out here in boot())
   // SSE: listen for external contract writebacks (e.g. the terminal AI PUT a revision).
   // We open our own EventSource to the same /api/events endpoint as the main app.
   // Uses the same parse format: es.onmessage → JSON.parse(e.data) → {type, ...}.
@@ -672,7 +753,7 @@ function showAiUpdateBanner(message) {
   const dismissBtn = document.createElement('button');
   dismissBtn.style.cssText = 'background:transparent;color:#93c5fd;border:1px solid #3b82f6;border-radius:6px;padding:5px 10px;cursor:pointer;font:13px system-ui';
   dismissBtn.textContent = '✕';
-  dismissBtn.title = 'Dismiss';
+  dismissBtn.dataset.tip = 'Dismiss';
   dismissBtn.onclick = () => bar.remove();
 
   bar.appendChild(msg);
@@ -832,7 +913,7 @@ function setSaved(state,msg){const el=document.getElementById('saveStat');if(!el
  else if(state==='err'){el.classList.add('err');el.textContent='Save failed';}
  else el.textContent=msg||'Auto-save on';}
 function persist(){try{localStorage.setItem(LSKEY,JSON.stringify({sig:dataSig(),ts:Date.now(),active:C.active,
-   custom_details:C.custom_details, profile_colors:C.profile_colors, target_confidence:C.target_confidence, dims3d:C.dims3d, dim_overlays:C.dim_overlays, joints:C.joints, detail_placements:C.detail_placements,
+   custom_details:C.custom_details, profile_colors:C.profile_colors, target_confidence:C.target_confidence, dims3d:C.dims3d, dim_overlays:C.dim_overlays, prop_labels:C.prop_labels, joints:C.joints, detail_placements:C.detail_placements,
    plans:C.plans.map(p=>({sheet:p.sheet,members:p.members,default_tos:p.default_tos,details:p.details,dims:p.dims,frame:p.frame||null,grid:p.grid||null}))}));setSaved('ok');}catch(e){setSaved('err');console.error('local autosave failed',e);}}
 // --- server-side draft save: PUT the FULL contract C — this is the copy Approve bakes.
 // localStorage (persist) stays the instant per-browser draft cache; this is the durable one.
@@ -866,6 +947,7 @@ function restoreSaved(){try{const raw=localStorage.getItem(LSKEY);if(!raw)return
    if(Array.isArray(d.dims3d))C.dims3d=d.dims3d;   // restore model-global 3D dims from the local draft
    if(Array.isArray(d.detail_placements))C.detail_placements=d.detail_placements;   // restore placed details
    if(d.dim_overlays&&typeof d.dim_overlays==='object'&&!Array.isArray(d.dim_overlays)){const o=d.dim_overlays;C.dim_overlays={bolt_pitch:o.bolt_pitch!==false,edge_clearance:o.edge_clearance!==false,cope_size:o.cope_size!==false,base_plate:o.base_plate!==false,anchor_depth:o.anchor_depth!==false};}   // restore the legend DIMENSIONS toggles — sanitised to the known boolean keys (a corrupt/partial draft can't desync the legend from what's drawn; on unless explicitly false)
+   if('prop_labels' in d)C.prop_labels=sanitizePropLabels(d.prop_labels);   // restore canvas property-label display state (sanitised to known keys/placement)
    if(Array.isArray(d.joints))C.joints=d.joints;   // restore model-global connection joints (base plates) from the local draft
    if(d.active!=null)C.active=d.active;return true;}catch(e){console.warn('discarding corrupt local draft',e);return false;}}
 function updUR(){document.getElementById('undoB').disabled=!undo.length;document.getElementById('redoB').disabled=!redo.length;}
@@ -1070,7 +1152,7 @@ function renderGridPanel(p){
   const nCols=planColumnCount(),hasEls=!!filterElsForPlan();
   p.innerHTML=`<span class=badge>Grid lines</span>
    <div class=hint style="margin-top:8px">No grid yet. Grid lines are a plan reference — they don't constrain members.</div>
-   <div class=gbtns><button id=gridReadB ${hasEls?'':'disabled'} title="${hasEls?'Detect the printed grid lines and bubbles in this sheet’s linework. Undoable.':'Needs this sheet’s filter linework — re-read the drawing with the steel filter step to capture it.'}">From drawing</button><button id=gridAutoB ${nCols<2?'disabled':''} title="${nCols<2?'Needs at least two columns in the model to infer spacing.':'Infer spacings and origin from the column layout. Undoable.'}">Auto from columns</button><button id=gridBlankB title="Start from a 4×4 grid of 30' bays and edit the spacings. Undoable.">Start blank</button></div>
+   <div class=gbtns><button id=gridReadB ${hasEls?'':'disabled'} data-tip="${hasEls?'Detect the printed grid lines and bubbles in this sheet’s linework. Undoable.':'Needs this sheet’s filter linework — re-read the drawing with the steel filter step to capture it.'}">From drawing</button><button id=gridAutoB ${nCols<2?'disabled':''} data-tip="${nCols<2?'Needs at least two columns in the model to infer spacing.':'Infer spacings and origin from the column layout. Undoable.'}">Auto from columns</button><button id=gridBlankB data-tip="Start from a 4×4 grid of 30' bays and edit the spacings. Undoable.">Start blank</button></div>
    <div class=hint style="margin-top:10px">Spacing uses <b>n*d</b> to repeat (e.g. <b>3*25'</b> = three 25' bays). Tokens: <b>25'-6"</b>, <b>6"</b>, <b>7.5m</b>, bare mm.</div>`;
   const rb=document.getElementById('gridReadB');if(rb)rb.onclick=()=>gridReadFromDrawing(null);
   const ab=document.getElementById('gridAutoB');if(ab)ab.onclick=()=>{const g=gc.inferGrid(P.members,ppf);if(!g){toast('No columns to infer a grid from');return;}edit(()=>{P.grid=g;});};
@@ -1093,14 +1175,14 @@ function renderGridPanel(p){
   <div class=sect style="margin-top:10px">Labels</div>
   <div style="display:flex;gap:6px"><input id=gLX class=gin value="${esc(g.labels_x||'')}" placeholder="auto: 1 2 3…" autocomplete=off spellcheck=false><input id=gLY class=gin value="${esc(g.labels_y||'')}" placeholder="auto: A B C…" autocomplete=off spellcheck=false></div>
   <div id=gLfb class=gfb></div>
-  ${(!g.labels_x&&!g.labels_y)?'<div class=gbtns style="margin-top:6px"><button id=gridLabelsAiB class=ghostw title="Many drawings outline their bubble text, so the marks can’t be read deterministically. This sends a request to your AI terminal — it reads the printed marks from the source drawing and fills the labels as a contract update.">Ask AI to read the labels ▸</button></div>':''}
+  ${(!g.labels_x&&!g.labels_y)?'<div class=gbtns style="margin-top:6px"><button id=gridLabelsAiB class=ghostw data-tip="Many drawings outline their bubble text, so the marks can’t be read deterministically. This sends a request to your AI terminal — it reads the printed marks from the source drawing and fills the labels as a contract update.">Ask AI to read the labels ▸</button></div>':''}
   <div class=sect style="margin-top:10px">Extension</div>
   <input id=gExt class=gin style="width:110px" value="${esc(gc.fmtLen(isFinite(g.ext)?g.ext:1524))}" autocomplete=off spellcheck=false>
   <div class=hint style="margin-top:3px">How far every line runs past the outermost, in plan. Drag a bubble <b>along</b> its line to override just that one.</div>
-  ${(()=>{const n=Object.keys(g.ends_x||{}).length+Object.keys(g.ends_y||{}).length;return n?`<div class=gfb style="display:flex;align-items:center;gap:8px;margin-top:5px"><span>${n} line${n===1?'':'s'} with a custom extent</span><button id=gridResetExtB class=ghost style="height:22px;padding:0 8px;font-size:11px" title="Reset every line back to the Extension value above. Undoable.">Reset all</button></div>`:'';})()}
-  <div class=gbtns><button id=gridPickB class="${gridPick?'on':''}" title="Click the grid's 1-A corner on the plan — snaps to member ends. Esc cancels.">Pick origin</button><button id=gridReadB2 ${filterElsForPlan()?'':'disabled'} title="${filterElsForPlan()?'Re-detect the printed grid from this sheet’s linework — keeps your levels and hand-set labels. Undoable.':'Needs this sheet’s filter linework — re-read the drawing with the steel filter step to capture it.'}">From drawing</button><button id=gridAutoB2 ${nCols<2?'disabled':''} title="${nCols<2?'Needs at least two columns in the model to infer spacing.':'Re-infer spacings and origin from the column layout. Undoable.'}">Auto from columns</button></div>
+  ${(()=>{const n=Object.keys(g.ends_x||{}).length+Object.keys(g.ends_y||{}).length;return n?`<div class=gfb style="display:flex;align-items:center;gap:8px;margin-top:5px"><span>${n} line${n===1?'':'s'} with a custom extent</span><button id=gridResetExtB class=ghost style="height:22px;padding:0 8px;font-size:11px" data-tip="Reset every line back to the Extension value above. Undoable.">Reset all</button></div>`:'';})()}
+  <div class=gbtns><button id=gridPickB class="${gridPick?'on':''}" data-tip="Click the grid's 1-A corner on the plan — snaps to member ends. Esc cancels.">Pick origin</button><button id=gridReadB2 ${filterElsForPlan()?'':'disabled'} data-tip="${filterElsForPlan()?'Re-detect the printed grid from this sheet’s linework — keeps your levels and hand-set labels. Undoable.':'Needs this sheet’s filter linework — re-read the drawing with the steel filter step to capture it.'}">From drawing</button><button id=gridAutoB2 ${nCols<2?'disabled':''} data-tip="${nCols<2?'Needs at least two columns in the model to infer spacing.':'Re-infer spacings and origin from the column layout. Undoable.'}">Auto from columns</button></div>
   ${gridPick?'<div class=hint style="margin-top:6px">Click the grid’s <b>1-A corner</b> on the plan — snaps to member ends (<b>Alt</b> off). <b>Esc</b> cancels.</div>':''}
-  <div class=gbtns style="margin-top:16px"><button id=gridRemoveB class=ghostw style="flex:1" title="Delete all grid lines and levels. Undoable.">Remove grid</button><button id=gridDoneB>Done</button></div>`;
+  <div class=gbtns style="margin-top:16px"><button id=gridRemoveB class=ghostw style="flex:1" data-tip="Delete all grid lines and levels. Undoable.">Remove grid</button><button id=gridDoneB>Done</button></div>`;
  const fbSpacing=(inpId,fbId,style,override,emptyMsg)=>{
   const el=document.getElementById(fbId),v=document.getElementById(inpId).value;
   const r=gc.parseSpacings(v);
@@ -1291,9 +1373,11 @@ function render(){
    for(const k in grp){const a=grp[k],n=a.length;a.forEach((it,j)=>{const x=it.c[0]+(j-(n-1)/2)*R*2,y=it.c[1];const d=`data-bx="${it.c[0]}" data-fi="${j}" data-gn="${n}"`;
      s+=`<circle class=numbg ${d} cx="${x}" cy="${y}" r="${R}"/><text class=numtx ${d} x="${x}" y="${y}" style="font-size:${F}px">${it.idx+1}</text>`;});}}
  s+=renderDims();
+ s+=renderPropLabels();   // right-click property-label chips (2D); 3D labels ride the div-overlay pool
  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)
+ syncPropLabelsAfterRender();   // corner-note + push labels to 3D + refresh the popup rows against the (possibly changed) selection
 }
 function updDup(){const n=redundantDups().length;
  document.getElementById('dpc').textContent=n;document.getElementById('dupStat').classList.toggle('has',n>0);
@@ -1311,6 +1395,15 @@ function updateBadges(){const R=12/zoom,F=13/zoom,ox=el=>(+el.dataset.fi-(+el.da
  svg.querySelectorAll('text.gridtx').forEach(t=>t.style.fontSize=(12/zoom)+'px');
  svg.querySelectorAll('rect.dimchip').forEach(r=>{const w=(+r.dataset.w)/zoom,h=(+r.dataset.h)/zoom;
    r.setAttribute('width',w);r.setAttribute('height',h);r.setAttribute('x',(+r.dataset.cx)-w/2);r.setAttribute('y',(+r.dataset.cy)-h/2);});
+ // property-label chips: recompute size + stacked screen offset from the baked anchor (ax,ay) + per-row screen
+ // offset (off) so they stay constant on screen while zooming (like dim chips) — AND re-apply the zoom
+ // threshold live (data-mlen × zoom), so zooming reveals/hides labels as members cross ~24px on screen.
+ {const plG=svg.querySelector('g.pllabels');if(plG){let hid=0;
+   plG.querySelectorAll('rect.plchip').forEach(r=>{const w=(+r.dataset.tw*6.4+12)/zoom,h=15/zoom,cy=(+r.dataset.ay)+(+r.dataset.off)/zoom;
+     const show=(+r.dataset.mlen)*zoom>=PLABEL_MIN_PX;r.style.display=show?'':'none';if(!show)hid++;
+     r.setAttribute('width',w);r.setAttribute('height',h);r.setAttribute('x',(+r.dataset.ax)-w/2);r.setAttribute('y',cy-h/2);});
+   plG.querySelectorAll('text.pltx').forEach(t=>{const show=(+t.dataset.mlen)*zoom>=PLABEL_MIN_PX;t.style.display=show?'':'none';t.setAttribute('y',(+t.dataset.ay)+(+t.dataset.off)/zoom);t.style.fontSize=(11/zoom)+'px';});
+   propLabelsHidden=hid;updatePropHint();}}   // hid counts hidden chip ROWS (>0 ⇒ note shows) — the note only needs the boolean
  const cg=svg.querySelector('g.csglyph');if(cg&&P.frame)cg.outerHTML=axisGlyphSvg(P.frame.o,P.frame.u,false);}  // glyph is sized in 1/zoom → regenerate on zoom (like the dim chips)
 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}"]`);
@@ -1346,7 +1439,7 @@ function panel(){
    <div class=sect style="margin-top:12px">Direction</div>
    <div class=seg2><button id=dimAxFree class="${dimAxis==='free'?'on':''}">Free</button><button id=dimAxX class="${dimAxis==='x'?'on':''}">X</button><button id=dimAxY class="${dimAxis==='y'?'on':''}">Y</button></div>
    <div class=sect style="margin-top:12px">Mode</div>
-   <div class=seg2><button id=dimChainB class="${dimChain?'on':''}" title="Chain (C) — keep adding dimensions from the last point; Esc/Enter ends the chain">⛓ Chain</button></div>
+   <div class=seg2><button id=dimChainB class="${dimChain?'on':''}" data-tip="Chain (C) — keep adding dimensions from the last point; Esc/Enter ends the chain">⛓ Chain</button></div>
    <div class=hint style="margin-top:8px">Snaps to grid intersections, member ends, and onto member lines — same as drawing. <b>Alt</b> turns snap off. <b>Esc</b> cancels.</div>`;
   document.getElementById('dimAxFree').onclick=()=>{dimSetAxis('free');dimRefreshPrev();panel();};
   document.getElementById('dimAxX').onclick=()=>{dimSetAxis('x');dimRefreshPrev();panel();};
@@ -1357,7 +1450,7 @@ function panel(){
   p.innerHTML=`<span class=badge>Dimension${selDimIds.size>1?'s · '+selDimIds.size:''}</span>
    ${one?`<div class=hint style="margin-top:8px">Length <b>${esc(dimValueText(dimGeo(one.a,one.b,one.axis,one.off).px))}</b> · ${({free:'Free (aligned)',x:'X (horizontal)',y:'Y (vertical)'})[one.axis]}</div>`:''}
    <div class=sect style="margin-top:12px">Edit</div>
-   <div class=seg2><button id=dimSplitB class="${dimSplitMode?'on':''}" title="Add split point (S) — click points along the dimension to insert extra dimension points; each click splits the segment under it. Esc ends.">✂ Add split point</button></div>
+   <div class=seg2><button id=dimSplitB class="${dimSplitMode?'on':''}" data-tip="Add split point (S) — click points along the dimension to insert extra dimension points; each click splits the segment under it. Esc ends.">✂ Add split point</button></div>
    <div class=hint style="margin-top:8px">${dimSplitMode?'Click points along the dimension to split it — keep clicking to add more. <b>Alt</b> = no snap · <b>Esc</b> ends.':'Drag an end handle to re-measure · <b>Del</b> removes · <b>Esc</b> deselects.'}</div>`;
   document.getElementById('dimSplitB').onclick=()=>toggleDimSplit();
   return;}
@@ -1392,7 +1485,7 @@ function panel(){
      +sec('Orientation')+`<div class=detrow><label class=detf><span>Rotation °</span><input id=detRot inputmode=decimal value="${esc(String(dp.rotZ||0))}" autocomplete=off></label><label class=detf><span>Size</span><input id=detSize inputmode=decimal value="${ftin(dp.size||1000)}" autocomplete=off></label></div>`
      +sec('Appearance')+`<div class=detrow style="align-items:center"><span class=detf style="flex:none">Opacity</span><input id=detOpacity type=range min=0 max=100 value="${opPct}"><span id=detOpacityV class=edec style="min-width:36px;text-align:right;font-variant-numeric:tabular-nums">${opPct}%</span></div>`
      +`<div class=divrow><hr></div>`
-     +`<div class="row f" style="gap:6px;flex-wrap:wrap"><button class=ghostw id=detAsk title="Record a request for your terminal AI to build/adjust this detail">Ask AI to build this…</button><button class=danger id=detRemove>Remove detail</button></div>`;
+     +`<div class="row f" style="gap:6px;flex-wrap:wrap"><button class=ghostw id=detAsk data-tip="Record a request for your terminal AI to build/adjust this detail">Ask AI to build this…</button><button class=danger id=detRemove>Remove detail</button></div>`;
    p.innerHTML=html;
    const find=()=>(C.detail_placements||[]).find(x=>x&&x.id===detId);
    const wr=(id,fn)=>{const i=document.getElementById(id);if(i)i.onchange=e=>fn(e.target.value);};
@@ -1445,12 +1538,12 @@ 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 title="Select the parent member to edit this connection">✎ Edit on ${esc(j.main)} →</button></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();};
    return;
   }}
  const arr=selArr();
- if(arr.length===0){p.innerHTML='<h3 style="display:flex;justify-content:space-between;align-items:center">Legend'+(Object.keys(C.profile_colors).length?'<button class=ghost id=resetCols style="font-size:10px;padding:1px 6px">reset colours</button>':'')+'</h3><div class=legend>'+profs.filter(pr=>P.members.some(mm=>mm.profile===pr)).map(pr=>`<span><input type=color class=swc data-prof="${esc(pr)}" value="${colorFor(pr)}" title="Click to recolour ${esc(pr)}">${esc(pr)}</span>`).join('')+'</div><div class=hint style="margin-top:12px">Click a member to edit; <b>Ctrl+click</b> to add/remove; drag an empty area to <b>box-select</b> (Ctrl adds). Drag a selected line to move it (all selected move together) — it snaps onto nearby grid/endpoints; drag an end dot to adjust — also snaps (<b>Alt</b> off). Hold <b>Shift</b> to keep it straight (H/V). <b>Ctrl+D</b> duplicate, <b>Ctrl+Z/Y</b> undo/redo, <b>Del</b> delete, <b>Esc</b> deselect. <b>Ctrl+scroll</b> zoom, <b>middle-drag</b> pan, <b>Home</b> fit. Dashed = RFI (size unresolved, e.g. MF).</div>'+
+ if(arr.length===0){p.innerHTML='<h3 style="display:flex;justify-content:space-between;align-items:center">Legend'+(Object.keys(C.profile_colors).length?'<button class=ghost id=resetCols style="font-size:10px;padding:1px 6px">reset colours</button>':'')+'</h3><div class=legend>'+profs.filter(pr=>P.members.some(mm=>mm.profile===pr)).map(pr=>`<span><input type=color class=swc data-prof="${esc(pr)}" value="${colorFor(pr)}" data-tip="Click to recolour ${esc(pr)}">${esc(pr)}</span>`).join('')+'</div><div class=hint style="margin-top:12px">Click a member to edit; <b>Ctrl+click</b> to add/remove; drag an empty area to <b>box-select</b> (Ctrl adds). Drag a selected line to move it (all selected move together) — it snaps onto nearby grid/endpoints; drag an end dot to adjust — also snaps (<b>Alt</b> off). Hold <b>Shift</b> to keep it straight (H/V). <b>Ctrl+D</b> duplicate, <b>Ctrl+Z/Y</b> undo/redo, <b>Del</b> delete, <b>Esc</b> deselect. <b>Ctrl+scroll</b> zoom, <b>middle-drag</b> pan, <b>Home</b> fit. Dashed = RFI (size unresolved, e.g. MF).</div>'+
    '<div style="border-top:1px solid var(--line);margin-top:12px;padding-top:12px"><div class=sect>Project defaults</div>'+
    '<div class=hint style="margin:0 0 6px;font-size:11px">Level <b>'+esc(fmtFtIn(defaultTOS))+'</b> ('+esc(P.sheet)+'). '+((P.tos_callouts&&P.tos_callouts.length)?'Per-zone T.O. STEEL callouts from the drawing applied to each member; ':'')+'ends ticked <b>default</b> follow the level.</div>'+
    '<div class=elab>Default TOS</div><input id=defTos inputmode=decimal placeholder="5 3/4&quot; · 1&#39;-0 1/4&quot;" value="'+esc(fmtFtIn(defaultTOS))+'"><span class=edec>'+esc(fmtDecIn(defaultTOS))+'</span>'+
@@ -1492,7 +1585,7 @@ function panel(){
    <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>
-   <div class="seg2 mtype" id=mTypeM style="margin-top:6px" title="Set member type for all selected — drives legend grouping">${MEMBER_TYPES.map(t=>`<button data-mtype="${t.k}" class="${arr.every(x=>memberTypeOf(x)===t.k)?'on':''}">${t.label}</button>`).join('')}</div>
+   <div class="seg2 mtype" id=mTypeM style="margin-top:6px" data-tip="Set member type for all selected — drives legend grouping">${MEMBER_TYPES.map(t=>`<button data-mtype="${t.k}" class="${arr.every(x=>memberTypeOf(x)===t.k)?'on':''}">${t.label}</button>`).join('')}</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>
@@ -1503,7 +1596,7 @@ function panel(){
    <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 · Shortcut: P">⇄ Swap start ↔ end (all) <span style="opacity:.55">(P)</span></button></div>
+   <div class=row><button class=ghostw id=swapEnds data-tip="Reverse every selected member: swap each one's start and end (yellow ↔ magenta / bottom ↔ top) handles · Shortcut: P">⇄ Swap start ↔ end (all) <span style="opacity:.55">(P)</span></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();}});};
@@ -1536,7 +1629,7 @@ function panel(){
  const tosFld=(id,label,o)=>{const def=o.tosDef!==false,v=def?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="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 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 data-tip="Open detail ${esc(o.detail)}">⤢</button>`:''}<button id=${id}_pk class="ghost${(picking&&pickKind==='detail'&&pickEnd===o)?' on':''}" data-tip="Pick a detail callout from the drawing">⌖</button></div>`;};
  // Per-end connection-library picker (sets o.conn = a connections[] row id). When set, the row's
  // type/detail# are the source of truth (shown read-only below); the free-text note/detail dim to a
  // fallback. Readonly combo → pick only, no free typing; the connrows source shows every row.
@@ -1558,7 +1651,7 @@ function panel(){
   ${pFld('plateWidth','Plate width "N"','auto','mm')}${pFld('plateDepth','Plate depth "B"','auto','mm')}${pFld('thickness','Thickness','1"','mm')}${pFld('weldLeg','Weld leg','5/16"','mm')}
   <div class=elab style="margin-top:7px;opacity:.7">Anchor kit</div>
   ${pFld('boltCols','Bolt columns','2','')}${pFld('boltRows','Bolt rows','2','')}${pFld('boltDia','Bolt ⌀','1"','mm')}${pFld('embedment','Embedment','auto','mm')}${pFld('grout','Grout','auto','mm')}
-  <div class="row f"><button class="ghostw" id=bpRemove title="Delete this column's base plate" style="color:#fca5a5;border-color:#7f1d1d">Remove base plate</button></div>`:'';
+  <div class="row f"><button class="ghostw" id=bpRemove data-tip="Delete this column's base plate" style="color:#fca5a5;border-color:#7f1d1d">Remove base plate</button></div>`:'';
  // This BEAM's shear-plate joints — one params block per detailed END (start/end). Mirrors bpSect but
  // per-end (a beam can be detailed at both ends), and adds the clearance + web-side + stiffener controls.
  const spjs=col?[]:[0,1].map(e=>({e,j:(C.joints||[]).find(j=>j&&j.kind==='shear-plate'&&j.main===m.id&&j.at==='end'+e)})).filter(x=>x.j);
@@ -1580,16 +1673,16 @@ function panel(){
    <div class=seg2 style="margin-top:0"><button id="spg_e${e}_325" class="${(j.params&&j.params.boltGrade==='A490')?'':'on'}">A325</button><button id="spg_e${e}_490" class="${(j.params&&j.params.boltGrade==='A490')?'on':''}">A490</button></div>
    <div class=hint style="margin:4px 0 0">Bolt length auto-sizes from the grip (AISC) → shown on the bolt callout.</div>
    <div class=elabrow><span class=elab>Opposite stiffener</span><label class=defck><input type=checkbox id="spck_e${e}"${st?' checked':''}>add</label></div>
-   <div class="row f"><button class="ghostw" id="sprm_e${e}" title="Delete this end's shear plate" style="color:#fca5a5;border-color:#7f1d1d">Remove shear plate</button></div>`;};
+   <div class="row f"><button class="ghostw" id="sprm_e${e}" data-tip="Delete this end's shear plate" style="color:#fca5a5;border-color:#7f1d1d">Remove shear plate</button></div>`;};
  const spSect=spjs.length?`<div class=hint style="margin:8px 0 0">${spAllAuto?'Auto-added — millimetres; empty = engine default. <b>Clearance</b> = the gap (≈½–¾") so the beam clears the support; <b>Web side</b> picks which face of the web the plate laps. Clear all via <b>Clear shear plates</b> in the toolbar (AI-tuned plates are kept).':'Tune this end&#39;s shear plate — millimetres; empty = engine default. <b>Clearance</b> = the gap (≈½–¾") so the beam clears the support; <b>Web side</b> picks which face of the web the plate laps.'}</div>${spjs.map(spBlock).join('')}`:'';
  const _cps=(!col&&copesByMember[m.id])?copesByMember[m.id]:[];  // auto cope(s) on this beam (from the rendered scene)
  const copeSect=_cps.length?`<div class=divrow><hr><span class=sect style="margin:0">Cope (auto)</span><hr></div><div class=hint style="margin:0 0 2px">${_cps.map(esc).join(' · ')} — auto, clash-driven so the beam clears the support.</div>`:'';
  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=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':''}" data-tip="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>
-  <div class="seg2 mtype" id=mTypeS style="margin-top:6px" title="Member type — drives legend grouping (independent of the Beam/Column geometry above)">${MEMBER_TYPES.map(t=>`<button data-mtype="${t.k}" class="${memberTypeOf(m)===t.k?'on':''}">${t.label}</button>`).join('')}</div>
+  <div class="seg2 mtype" id=mTypeS style="margin-top:6px" data-tip="Member type — drives legend grouping (independent of the Beam/Column geometry above)">${MEMBER_TYPES.map(t=>`<button data-mtype="${t.k}" class="${memberTypeOf(m)===t.k?'on':''}">${t.label}</button>`).join('')}</div>
   <div class="row hint">Length <b>${L} ft</b> · ${wpf==null?'<span class=pill style="background:#7f1d1d">RFI — size unresolved</span>':'Weight <b>'+(len(m.wp[0],m.wp[1])/FT*wpf).toFixed(0)+' lb</b> · '+wpf+' lb/ft'}</div>
-  <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>
+  <div class=row><button class=ghostw id=verifyBtn${m.verified?' style="border-color:#166534;color:#86efac"':''} data-tip="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}
   ${bpSect}${spSect}${copeSect}
@@ -1599,7 +1692,7 @@ function panel(){
   <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 · Shortcut: P">⇄ Swap start ↔ end <span style="opacity:.55">(P)</span></button></div>
+  <div class=row><button class=ghostw id=swapEnds data-tip="Reverse the member: swap the start (${col?'bottom':'yellow'}) and end (${col?'top':'magenta'}) handles · Shortcut: P">⇄ Swap start ↔ end <span style="opacity:.55">(P)</span></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();};
@@ -1740,6 +1833,160 @@ function snapMark(x,y,kind){kind=kind||lastSnapKind;snapClear();
  else{const r=7/zoom;el=document.createElementNS(ns,'path');el.setAttribute('d',`M ${x-r} ${y-r} L ${x+r} ${y-r} L ${x-r} ${y+r} L ${x+r} ${y+r} Z`);}  // on-line ("nearest") = HOURGLASS/clepsydra (AutoCAD Nearest glyph); circle is reserved for a future Center snap
  el.id='snapMark';el.setAttribute('class','snapmk');svg.appendChild(el);document.body.classList.add('snapping');}   // marker up → hide the native crosshair (see .snapping CSS)
 function snapClear(){const c=document.getElementById('snapMark');if(c)c.remove();const g=document.getElementById('snapExtLine');if(g)g.remove();document.body.classList.remove('snapping');}
+// ===== Right-click property labels (Properties popup → text-chip labels on the 2D/3D canvas) =====
+// One registry drives BOTH the popup rows and the rendered labels: {key,label,get(m),fmt}. get() returns
+// the raw value, or `undefined` when the property doesn't apply to that member's role (shown as "—",
+// checkbox disabled). fmt() turns a raw value into the display string ('' = nothing to label). Values
+// go through the same imperial formatters the side pane uses; the contract stays canonical metric.
+function _effTos(o){return o?(o.tosDef!==false?defaultTOS:o.tos):undefined;}   // beam end / column top → effective TOS (inches), default-aware
+function _lenFt(m){return len(m.wp[0],m.wp[1])/FT;}
+const PROP_DEFS=[
+ {key:'id',        label:'Mark',          get:m=>m.id,                                              fmt:v=>v==null?'':String(v)},
+ {key:'profile',   label:'Profile',       get:m=>m.profile,                                         fmt:v=>v==null?'':String(v)},
+ {key:'type',      label:'Type',          get:m=>MTYPE_LABEL[memberTypeOf(m)],                      fmt:v=>v==null?'':String(v)},
+ {key:'role',      label:'Role',          get:m=>m.role==='column'?'Column':'Beam',                 fmt:v=>v||''},
+ {key:'length',    label:'Length',        get:m=>_lenFt(m),                                         fmt:v=>v==null?'':v.toFixed(1)+' ft'},
+ {key:'weight',    label:'Weight',        get:m=>{const w=_wt(m.profile);return w==null?undefined:_lenFt(m)*w;}, fmt:v=>v==null?'':Math.round(v).toLocaleString()+' lb'},
+ {key:'position',  label:'Position',      get:m=>m.role==='column'?undefined:posDefault(m),         fmt:v=>v?v[0].toUpperCase()+v.slice(1):''},
+ {key:'verified',  label:'Verified',      get:m=>m.verified===true?'Yes':'No',                      fmt:v=>v||''},
+ {key:'tos_start', label:'TOS (start)',   get:m=>m.role==='column'?undefined:_effTos(m.ends&&m.ends[0]), fmt:v=>v==null?'':fmtFtIn(v)},
+ {key:'tos_end',   label:'TOS (end)',     get:m=>m.role==='column'?undefined:_effTos(m.ends&&m.ends[1]), fmt:v=>v==null?'':fmtFtIn(v)},
+ {key:'col_tos',   label:'Top (TOS)',     get:m=>m.role==='column'?_effTos(m.col):undefined,        fmt:v=>v==null?'':fmtFtIn(v)},
+ {key:'col_bos',   label:'Bottom (BOS)',  get:m=>m.role==='column'?(m.col?m.col.bos:undefined):undefined, fmt:v=>v==null?'':fmtFtIn(v)},
+ {key:'note_start',label:'Note (start)',  get:m=>m.role==='column'?undefined:((m.ends&&m.ends[0])?(m.ends[0].note||''):undefined), fmt:v=>v==null?'':String(v)},
+ {key:'note_end',  label:'Note (end)',    get:m=>m.role==='column'?undefined:((m.ends&&m.ends[1])?(m.ends[1].note||''):undefined), fmt:v=>v==null?'':String(v)},
+ {key:'col_note',  label:'Note',          get:m=>m.role==='column'?(m.col?(m.col.note||''):undefined):undefined, fmt:v=>v==null?'':String(v)},
+ {key:'detail_start',label:'Detail (start)',get:m=>m.role==='column'?undefined:((m.ends&&m.ends[0])?(m.ends[0].detail||''):undefined), fmt:v=>v==null?'':String(v)},
+ {key:'detail_end',label:'Detail (end)',  get:m=>m.role==='column'?undefined:((m.ends&&m.ends[1])?(m.ends[1].detail||''):undefined), fmt:v=>v==null?'':String(v)},
+ {key:'col_detail',label:'Detail',        get:m=>m.role==='column'?(m.col?(m.col.detail||''):undefined):undefined, fmt:v=>v==null?'':String(v)},
+];
+const PROP_KEYS=new Set(PROP_DEFS.map(d=>d.key));
+// normalise persisted/incoming prop_labels to known keys/placement so a corrupt draft can't desync the UI
+function sanitizePropLabels(x){const o=(x&&typeof x==='object'&&!Array.isArray(x))?x:{};
+ return {props:Array.isArray(o.props)?o.props.filter(k=>PROP_KEYS.has(k)):[],
+  placement:['start','mid','end'].includes(o.placement)?o.placement:'mid',
+  selected_only:o.selected_only===true,
+  ids:Array.isArray(o.ids)?o.ids.filter(v=>typeof v==='string'):[]};}
+C.prop_labels=sanitizePropLabels(C.prop_labels);   // normalise the contract's incoming value now (PROP_KEYS is initialised above; runs before main's bootstrap render + restoreSaved override)
+// the "Label: value" lines a member contributes for the currently-checked props (registry order; skips N/A + empty)
+function propLabelLinesFor(m){const pl=C.prop_labels;if(!pl||!pl.props.length)return [];ensureMeta(m);
+ const out=[];for(const def of PROP_DEFS){if(!pl.props.includes(def.key))continue;const raw=def.get(m);if(raw===undefined)continue;const t=def.fmt(raw);if(t==='')continue;out.push(def.label+': '+t);}return out;}
+// members that actually get a label, honouring the plan-wide-vs-selected-only scope
+function propLabelMembers(){const pl=C.prop_labels;if(!pl||!pl.props.length)return [];
+ let base=P.members;if(pl.selected_only){const ids=new Set(pl.ids||[]);base=P.members.filter(m=>ids.has(m.id));}
+ return base.filter(m=>propLabelLinesFor(m).length>0);}
+// one popup row's aggregate across the current selection: a shared value, "Varies", or N/A (disabled)
+function propAggRow(def,arr){let anyApplicable=false,anyNonEmpty=false;const vals=[];
+ for(const m of arr){ensureMeta(m);const raw=def.get(m);if(raw===undefined)continue;anyApplicable=true;const t=def.fmt(raw);vals.push(t);if(t!=='')anyNonEmpty=true;}
+ if(!anyApplicable||!anyNonEmpty)return {state:'na'};
+ const nonEmpty=[...new Set(vals.filter(t=>t!==''))];
+ if(nonEmpty.length===1&&vals.every(t=>t===nonEmpty[0]))return {state:'val',text:nonEmpty[0]};
+ return {state:'varies'};}
+
+// ---- 2D SVG chips (rendered inside render(); zoom-constant via data-ax/ay/off, rescaled in updateBadges) ----
+let propLabelsHidden=0;
+// A member's labels hide when its on-screen length < this (px) — the density guard (§5.5). Kept as one
+// constant so renderPropLabels (initial paint) and updateBadges (live on zoom) agree.
+const PLABEL_MIN_PX=24;
+function renderPropLabels(){const pl=C.prop_labels;propLabelsHidden=0;if(!pl||!pl.props.length)return '';
+ const ms=propLabelMembers();if(!ms.length)return '';
+ let hidden=0,s='';
+ // Emit chips for EVERY labelled member (carrying its display length in data-mlen); the zoom threshold
+ // only sets each chip's initial visibility. updateBadges re-applies it live as the user zooms — so
+ // zooming in reveals a hidden label and zooming out hides it (they're in the DOM either way).
+ for(const m of ms){const lines=propLabelLinesFor(m);if(!lines.length)continue;
+   const a=m.wp[0],b=m.wp[1],mlen=len(a,b);const show=mlen*zoom>=PLABEL_MIN_PX;if(!show)hidden++;
+   const anc=pl.placement==='start'?a:pl.placement==='end'?b:[(a[0]+b[0])/2,(a[1]+b[1])/2];
+   const n=lines.length,hide=show?'':';display:none';
+   lines.forEach((txt,i)=>{const off=(i-(n-1)/2)*15,tw=txt.length,w=(tw*6.4+12)/zoom,h=15/zoom,cy=anc[1]+off/zoom;
+     s+=`<rect class=plchip data-ax="${anc[0]}" data-ay="${anc[1]}" data-off="${off}" data-tw="${tw}" data-mlen="${mlen}" x="${anc[0]-w/2}" y="${cy-h/2}" width="${w}" height="${h}" rx="${3/zoom}" style="${hide}"/>`
+       +`<text class=pltx data-ax="${anc[0]}" data-ay="${anc[1]}" data-off="${off}" data-mlen="${mlen}" x="${anc[0]}" y="${cy}" style="font-size:${11/zoom}px${hide}">${esc(txt)}</text>`;});}
+ propLabelsHidden=hidden;
+ return `<g class="pllabels">${s}</g>`;}
+// fixed-screen corner note when the zoom threshold is hiding labels (an HTML pill, outside the zoomed SVG)
+function updatePropHint(){let el=document.getElementById('plHint');
+ const show=!view3d&&propLabelsHidden>0;
+ if(!show){if(el)el.style.display='none';return;}
+ if(!el){el=document.createElement('div');el.id='plHint';el.style.cssText='position:fixed;z-index:20;pointer-events:none;background:var(--panel);color:var(--mut);border:1px solid var(--line);border-radius:6px;padding:3px 9px;font:11px system-ui;box-shadow:0 2px 8px rgba(0,0,0,.4)';document.body.appendChild(el);}
+ const st=document.getElementById('stage').getBoundingClientRect();
+ el.textContent='Labels hidden — zoom in';el.style.display='block';
+ el.style.left=(st.left+st.width/2-70)+'px';el.style.top=(st.bottom-30)+'px';}
+
+// ---- 3D bridge: hand the label spec to the 3D view (it owns projection/placement over member geometry) ----
+function refreshPropLabels3d(){const V=window.Steel3DView;if(!V||!V.setPropLabels)return;
+ const pl=C.prop_labels;
+ if(!pl||!pl.props.length){V.setPropLabels(null);return;}
+ V.setPropLabels({labels:propLabelMembers().map(m=>({id:m.id,lines:propLabelLinesFor(m)})),placement:pl.placement});}
+
+// ---- The floating Properties popup ----
+let propPopPinned=false;
+function propPopOpen(){const el=document.getElementById('propPop');return !!(el&&el.classList.contains('open'));}
+function propPopEl(){let el=document.getElementById('propPop');if(el)return el;
+ el=document.createElement('div');el.id='propPop';el.setAttribute('role','dialog');el.setAttribute('aria-label','Member properties');
+ el.innerHTML=`<div class=pph><b id=ppTitle>Properties</b><span class=pcount id=ppLabeled></span>`
+   +`<button class=pin id=ppPin data-tip="Pin — keep open across selections">📌</button>`
+   +`<button id=ppClear data-tip="Uncheck every label">Clear all</button>`
+   +`<button id=ppClose data-tip="Close (Esc)">✕</button></div>`
+   +`<div class=ppsearch><input id=ppSearch placeholder="Search properties…" autocomplete=off aria-label="Search properties"></div>`
+   +`<div class=ppmeta id=ppMeta></div><div class=ppscope id=ppScope></div>`
+   +`<div class=pplist id=ppList></div>`
+   +`<div class=ppfoot><div class=seg2 id=ppPlace><button data-pl=start>Start</button><button data-pl=mid>Middle</button><button data-pl=end>End</button></div>`
+   +`<label><input type=checkbox id=ppSel>Selected only</label></div>`;
+ document.body.appendChild(el);
+ const list=el.querySelector('#ppList');
+ list.addEventListener('click',e=>{const row=e.target.closest('.pprow');if(!row||row.classList.contains('dis'))return;if(e.target.tagName==='INPUT')return;togglePropKey(row.dataset.k);});
+ list.addEventListener('change',e=>{const cb=e.target;if(cb.tagName!=='INPUT')return;const row=cb.closest('.pprow');if(row)togglePropKey(row.dataset.k,cb.checked);});
+ el.querySelector('#ppSearch').addEventListener('input',renderPropPop);
+ el.querySelector('#ppClear').onclick=()=>{C.prop_labels.props=[];refreshPropLabels();};
+ el.querySelector('#ppClose').onclick=()=>closePropPop(true);
+ el.querySelector('#ppPin').onclick=()=>{propPopPinned=!propPopPinned;if(propPopPinned)dockPropPop();renderPropPop();};
+ el.querySelector('#ppPlace').addEventListener('click',e=>{const b=e.target.closest('button');if(!b)return;C.prop_labels.placement=b.dataset.pl;refreshPropLabels();});
+ el.querySelector('#ppSel').addEventListener('change',e=>{const pl=C.prop_labels;pl.selected_only=e.target.checked;if(pl.selected_only)pl.ids=selArr().map(m=>m.id);refreshPropLabels();});
+ // focus trap + Esc (behaves as a lightweight non-modal dialog)
+ el.addEventListener('keydown',e=>{if(e.key==='Escape'){e.stopPropagation();closePropPop(true);return;}
+   if(e.key!=='Tab')return;const f=[...el.querySelectorAll('button,input,[tabindex]')].filter(n=>!n.disabled&&n.offsetParent!==null);
+   if(!f.length)return;const first=f[0],last=f[f.length-1];
+   if(e.shiftKey&&document.activeElement===first){e.preventDefault();last.focus();}
+   else if(!e.shiftKey&&document.activeElement===last){e.preventDefault();first.focus();}});
+ return el;}
+function togglePropKey(k,on){const pl=C.prop_labels,has=pl.props.includes(k);if(on===undefined)on=!has;
+ if(on&&!has)pl.props.push(k);else if(!on&&has)pl.props=pl.props.filter(x=>x!==k);
+ if(on&&pl.selected_only&&selArr().length)pl.ids=selArr().map(m=>m.id);   // Selected-only: re-target the pinned set to the current selection when adding a label (so checking a prop after re-selecting labels what's actually selected, not a stale set)
+ refreshPropLabels();}
+// rebuild the popup contents against the current selection (chrome + rows), preserving row focus
+function renderPropPop(){const el=document.getElementById('propPop');if(!el||!el.classList.contains('open'))return;
+ const arr=selArr(),pl=C.prop_labels,q=(el.querySelector('#ppSearch').value||'').trim().toLowerCase();
+ el.querySelector('#ppTitle').textContent='Properties ('+arr.length+' selected)';
+ el.querySelector('#ppLabeled').textContent=pl.props.length?pl.props.length+' labeled':'';
+ el.querySelector('#ppScope').textContent=pl.selected_only?'Labels apply to the selected members':'Labels apply to all members on this plan';
+ el.querySelectorAll('#ppPlace button').forEach(b=>b.classList.toggle('on',b.dataset.pl===pl.placement));
+ el.querySelector('#ppSel').checked=pl.selected_only;
+ const ae=document.activeElement,fk=(ae&&ae.closest&&ae.closest('.pprow'))?ae.closest('.pprow').dataset.k:null;
+ let shown=0;const rows=PROP_DEFS.map(def=>{
+   if(q&&!def.label.toLowerCase().includes(q))return '';
+   shown++;const r=propAggRow(def,arr),checked=pl.props.includes(def.key),dis=r.state==='na';
+   const val=r.state==='val'?esc(r.text):r.state==='varies'?'Varies':'—',vc=r.state==='varies'?' varies':'';
+   return `<div class="pprow${dis?' dis':''}" data-k="${def.key}"${dis?' data-tip="Nothing to label — no value in the selection"':''}>`
+     +`<input type=checkbox ${checked?'checked':''}${dis?' disabled':''} aria-label="${esc(def.label)}">`
+     +`<span class=pn>${esc(def.label)}</span><span class="pv${vc}">${val}</span></div>`;}).join('');
+ el.querySelector('#ppList').innerHTML=rows||'<div class=ppempty>No properties match your search.</div>';
+ el.querySelector('#ppMeta').textContent=shown+' of '+PROP_DEFS.length+' shown';
+ if(fk){const cb=el.querySelector('.pprow[data-k="'+fk+'"] input');if(cb)cb.focus();}}
+function dockPropPop(){const el=propPopEl(),st=document.getElementById(view3d?'stage3d':'stage').getBoundingClientRect();
+ el.style.left=Math.max(4,st.right-el.offsetWidth-12)+'px';el.style.top=(st.top+12)+'px';}
+function openPropLabels(x,y){if(!selArr().length)return;const el=propPopEl();const sr=el.querySelector('#ppSearch');
+ sr.value='';   // clear any prior filter BEFORE rendering rows, so reopening never shows a filtered list under a blank search box
+ el.classList.add('open');renderPropPop();
+ if(propPopPinned){dockPropPop();}
+ else{const r=el.getBoundingClientRect();el.style.left=Math.max(4,Math.min(x,innerWidth-r.width-8))+'px';el.style.top=Math.max(4,Math.min(y,innerHeight-r.height-8))+'px';}
+ setTimeout(()=>sr.focus(),0);}
+function closePropPop(force){const el=document.getElementById('propPop');if(!el)return;if(propPopPinned&&!force)return;el.classList.remove('open');
+ const c=document.getElementById(view3d?'stage3d':'stage');if(c)c.focus&&c.focus();}
+document.addEventListener('pointerdown',e=>{if(propPopOpen()&&!propPopPinned&&!e.target.closest('#propPop'))closePropPop();},true);
+// after every render the checked labels + the popup rows stay in sync with the (possibly changed) selection/geometry
+function syncPropLabelsAfterRender(){updatePropHint();refreshPropLabels3d();if(propPopOpen())renderPropPop();}
+function refreshPropLabels(){scheduleSave();render();}   // render() → renderPropLabels() (2D) + syncPropLabelsAfterRender() (hint/3D/popup)
+
 // --- Tekla-style snap override (right-click): restrict snapping to ONE type for the current operation.
 // 2D: right-click anywhere on the canvas (set it before grabbing an endpoint — a drag captures the pointer).
 // 3D: right-CLICK while the Dimension tool is armed (right-DRAG stays orbit/pan). The override clears when
@@ -1768,11 +2015,17 @@ function openSnapMenu(x,y,is3d){const m=snapMenuEl();m._is3d=!!is3d;
  m.style.left=Math.max(4,Math.min(x,innerWidth-r.width-8))+'px';m.style.top=Math.max(4,Math.min(y,innerHeight-r.height-8))+'px';
  m.focus();}
 document.addEventListener('pointerdown',e=>{if(snapMenuOpen()&&!e.target.closest('#snapMenu'))closeSnapMenu();},true);
-document.getElementById('stage').addEventListener('contextmenu',e=>{e.preventDefault();openSnapMenu(e.clientX,e.clientY,false);});
+// Right-click routes by intent (spec §2a — the two conditions are mutually exclusive, so exactly one opens):
+// a selection in plain select mode → the Properties popup; otherwise (no selection, or a placing/measuring
+// mode armed) → the snap-override menu. This gates the previously-unconditional 2D snap menu.
+document.getElementById('stage').addEventListener('contextmenu',e=>{e.preventDefault();
+ if(mode==='sel'&&!dimMode&&!csaxisMode&&!dimSplitMode&&!geoMode&&!cmTool&&!picking&&selArr().length){openPropLabels(e.clientX,e.clientY);return;}
+ openSnapMenu(e.clientX,e.clientY,false);});
 document.getElementById('stage3d').addEventListener('contextmenu',e=>{e.preventDefault();const V=window.Steel3DView;
- if(!V||!V.dimToolOn||!V.dimToolOn())return;                       // 3D menu only for the armed dim tool
- if(V.rightDragged&&V.rightDragged())return;                       // that right button was an orbit/pan, not a click
- openSnapMenu(e.clientX,e.clientY,true);});
+ if(V&&V.rightDragged&&V.rightDragged())return;                    // that right button was an orbit/pan, not a click — no menu
+ if(V&&V.dimToolOn&&V.dimToolOn()){openSnapMenu(e.clientX,e.clientY,true);return;}   // dim tool armed → snap-override menu (unchanged)
+ if(mode==='sel'&&!cmTool&&!picking&&selArr().length){openPropLabels(e.clientX,e.clientY);return;}   // a selection → Properties popup
+});
 document.getElementById('snapStat').onclick=()=>{snapOnly=null;const V=window.Steel3DView;if(V&&V.setSnapOnly)V.setSnapOnly(null);updSnapStat();};
 // --- Dimension tool: armed mode + 3-click placement (anchor, anchor, offset). Shares the editor's
 // buildSnap/snap/snapMark stack. The in-progress preview lives in its own <g> (render() rebuilds
@@ -2079,7 +2332,7 @@ function axisGlyphSvg(o,dir,preview){
   +tag(lx,'#ef4444','X')+tag(ly,'#22c55e','Y')+`</g>`;}
 // header chip + the More-menu "Reset to global" enabled state — reflect the current frame.
 function updCS(){const s=document.getElementById('csStat');
- if(s){const f=P&&P.frame;s.innerHTML='Axes <b>'+(f?(Math.round(Math.atan2(f.u[1],f.u[0])*180/Math.PI)+'° local'):'Global')+'</b>';s.classList.toggle('local',!!f);s.title=f?'Local coordinate frame active — ortho draw & X/Y dimensions follow it. Reset via the ⋯ menu.':'Global axes (default). Set a local frame from the ⋯ menu for skewed framing.';}
+ if(s){const f=P&&P.frame;s.innerHTML='Axes <b>'+(f?(Math.round(Math.atan2(f.u[1],f.u[0])*180/Math.PI)+'° local'):'Global')+'</b>';s.classList.toggle('local',!!f);s.dataset.tip=f?'Local coordinate frame active — ortho draw & X/Y dimensions follow it. Reset via the ⋯ menu.':'Global axes (default). Set a local frame from the ⋯ menu for skewed framing.';}
  const r=document.getElementById('csResetB');if(r)r.disabled=!(P&&P.frame);}
 // themed transient toast (baseline tokens — never a native alert)
 function toast(msg){let t=document.getElementById('toast');
@@ -2362,10 +2615,13 @@ 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')&&!e.target.closest('.msnap')&&!e.target.closest('.msnap-hdr'))closeMore();});  // an item's own handler runs (bubble) before this closes the menu; the snap toggles + the "Snapping" expander keep the menu open (settings, not one-shot actions)
+moreMenu.addEventListener('click',e=>{if(e.target.closest('button')&&!e.target.closest('.msnap')&&!e.target.closest('.msec-hdr')&&!e.target.closest('.ins-in-menu'))closeMore();});  // an item's own handler runs (bubble) before this closes the menu; the snap toggles, section headers, and the Insert picker keep the menu open (settings, not one-shot actions)
 // "Snapping" is collapsible to save menu space — the header expands the running-snap switches below it
-{const snapHdr=document.getElementById('snapHdr'),snapSect=document.getElementById('snapSect');
- snapHdr.onclick=e=>{e.stopPropagation();const open=snapSect.classList.toggle('open');snapHdr.setAttribute('aria-expanded',String(open));};}
+// Every ⋯ section is a collapse/expand accordion (Snapping + Display + Detailing + …); state persists in localStorage.
+{const SEC_KEY='steelMoreSections';let openSecs;try{openSecs=new Set(JSON.parse(localStorage.getItem(SEC_KEY)||'[]'));}catch(e){openSecs=new Set();}
+ function setSec(hdr,open){const body=hdr.nextElementSibling;if(!body)return;body.classList.toggle('open',open);hdr.setAttribute('aria-expanded',String(open));const k=hdr.dataset.sec;if(k){open?openSecs.add(k):openSecs.delete(k);try{localStorage.setItem(SEC_KEY,JSON.stringify([...openSecs]));}catch(e){}}}
+ document.querySelectorAll('#moreMenu .msec-hdr').forEach(hdr=>{setSec(hdr,openSecs.has(hdr.dataset.sec));  // restore
+   hdr.onclick=e=>{e.stopPropagation();setSec(hdr,!hdr.nextElementSibling.classList.contains('open'));};});}
 // --- Running-snaps: one source of truth (snapEnabled) rendered onto TWO surfaces — the ⋯ menu switches
 // (aria-checked) + the quick-access snap bar (aria-pressed). toggleSnap() is the only writer; both surfaces
 // call it, so they can't drift. The transient right-click override is separate and never writes here. ---
@@ -2472,7 +2728,7 @@ const view3dApi={
  onClipsChange:()=>{build3DLegend();},   // a clip added / removed / toggled → rebuild the legend's Clip section
  beginClipEdit:()=>pushUndo(snapshot()),   // a clip / work-area manipulation → push a pre-edit snapshot so Ctrl+Z/Y restores it
  onClipModeChange:(m)=>{const b=document.getElementById('m3dClip');if(b){b.classList.toggle('on',!!m);b.textContent=m?'Clip ✕':'Clip ▾';}},  // armed → button fills brand-blue + becomes a cancel target (✕ = cancel)
- onInsertModeChange:(on)=>{const b=document.getElementById('m3dInsert');if(b){b.classList.toggle('on',!!on);b.textContent=on?'Insert ✕':'Insert ▾';}},  // mirror the clip arm/cancel affordance
+ onInsertModeChange:(on)=>{const b=document.getElementById('m3dInsert');if(b){b.classList.toggle('on',!!on);b.textContent=on?'✕ Cancel insert':'Insert detail…';}},  // armed → cancel target
  onInsertPlace:(pick,pending)=>{if(!pending||!pending.name){toast('Pick a detail to insert first');return;}   // Slice 4: place the queued detail at the pick, select it, record the create intent
   const id='det'+Date.now().toString(36)+Math.floor(Math.random()*1e4).toString(36);const sheet=(P&&P.sheet)||'';
   const place={id,detailName:pending.name,sheet,anchorId:pick.anchorId||null,pos:pick.point,u:pick.u,n:pick.n,rotZ:0,size:1000,opacity:1};
@@ -2609,7 +2865,7 @@ function build3DLegend(){const host=document.getElementById('m3dLegend');if(!hos
  if(!groups.length){host.style.display='none';return;}
  const hint=document.createElement('div');hint.className='lhint';hint.textContent='click hide/show · dbl-click isolate · Ctrl/Shift multi';host.appendChild(hint);
  const addRow=(g,indent,draggable)=>{const row=document.createElement('div');row.className='lrow'+(indent?' typed':'');row.dataset.key=g.key;
-   if(draggable){const dh=document.createElement('span');dh.className='drag-handle';dh.textContent='⠿';dh.title='Drag onto another type';['click','dblclick'].forEach(ev=>dh.addEventListener(ev,e=>e.stopPropagation()));row.appendChild(dh);}  // handle = the only drag initiator; swallow its own clicks so it never toggles the row
+   if(draggable){const dh=document.createElement('span');dh.className='drag-handle';dh.textContent='⠿';dh.dataset.tip='Drag onto another type';['click','dblclick'].forEach(ev=>dh.addEventListener(ev,e=>e.stopPropagation()));row.appendChild(dh);}  // handle = the only drag initiator; swallow its own clicks so it never toggles the row
    const sw=document.createElement('span');sw.className='lsw';sw.style.background=g.color;
    row.append(sw,document.createTextNode(g.label));
    row.addEventListener('click',()=>{if(row._dragging)return;clearTimeout(leg3dClickT);leg3dClickT=setTimeout(()=>{window.Steel3DView.toggleGroup(g.key);refresh3DLegend();},220);});
@@ -2620,7 +2876,7 @@ function build3DLegend(){const host=document.getElementById('m3dLegend');if(!hos
  // getState()→'on'|'off'|'mixed' drives the master glyph; onToggle() runs the master action (refresh follows).
  const buildCatHeader=(cat,label,count,opts)=>{opts=opts||{};const hdr=document.createElement('div');hdr.className='cat-hdr'+(opts.empty?' empty':'')+(opts.sub?' sub':'');hdr.dataset.cat=cat;hdr._getState=opts.getState;
    const chev=Object.assign(document.createElement('span'),{className:'cat-chevron',textContent:collapsedCats.has(cat)?'▶':'▼'});
-   const tog=Object.assign(document.createElement('span'),{className:'cat-tog',title:opts.toggleTitle||('Show / hide all '+label.toLowerCase())});if(opts.empty||!opts.onToggle)tog.style.display='none';
+   const tog=Object.assign(document.createElement('span'),{className:'cat-tog'});tog.dataset.tip=opts.toggleTitle||('Show / hide all '+label.toLowerCase());if(opts.empty||!opts.onToggle)tog.style.display='none';
    const lab=Object.assign(document.createElement('span'),{className:'cat-label',textContent:label});
    const cnt=Object.assign(document.createElement('span'),{className:'cat-count',textContent:'('+count+')'});
    hdr.append(chev,tog,lab,cnt);
@@ -2698,7 +2954,7 @@ function build3DLegend(){const host=document.getElementById('m3dLegend');if(!hos
  // the grid's colour, not the cyan dim overlays.
  if(typeof P!=='undefined'&&P&&P.grid){
    host.appendChild(Object.assign(document.createElement('div'),{className:'ldiv'}));
-   const grow=document.createElement('div');grow.className='lrow dim';grow.title='Show / hide the structural grid (2D + 3D)';
+   const grow=document.createElement('div');grow.className='lrow dim';grow.dataset.tip='Show / hide the structural grid (2D + 3D)';
    const gsw=document.createElement('span');gsw.className='lsw';gsw.style.borderColor='#64748b';
    grow.append(gsw,document.createTextNode('Grid lines'));
    grow.classList.toggle('dimoff',!gridOn());
@@ -2718,10 +2974,10 @@ function build3DLegend(){const host=document.getElementById('m3dLegend');if(!hos
  else for(const c of clips){
    // Three separate zones (no fighting): swatch/label = SELECT (reveals its 3D drag handles), On/Off pill = ENABLE, × = DELETE.
    const row=document.createElement('div');row.className='lrow clip typed'+(c.selected?' sel':'');  // enable state is shown by the On/Off pill, not by dimming the row
-   const sw=document.createElement('span');sw.className='lsw';sw.style.background=c.kind==='box'?'#93c5fd':'#3b82f6';sw.title='Select — show its drag handles in 3D';  // box = lighter blue, plane = brand blue
-   const lab=document.createElement('span');lab.className='clab';lab.textContent=c.label;lab.title='Click to select · double-click to rename';
-   const tog=document.createElement('button');tog.className='cpill'+(c.enabled?' on':'');tog.textContent=c.enabled?'On':'Off';tog.title='Enable / disable this clip';
-   const x=document.createElement('span');x.className='lx';x.textContent='×';x.title='Delete this clip';
+   const sw=document.createElement('span');sw.className='lsw';sw.style.background=c.kind==='box'?'#93c5fd':'#3b82f6';sw.dataset.tip='Select — show its drag handles in 3D';  // box = lighter blue, plane = brand blue
+   const lab=document.createElement('span');lab.className='clab';lab.textContent=c.label;lab.dataset.tip='Click to select · double-click to rename';
+   const tog=document.createElement('button');tog.className='cpill'+(c.enabled?' on':'');tog.textContent=c.enabled?'On':'Off';tog.dataset.tip='Enable / disable this clip';
+   const x=document.createElement('span');x.className='lx';x.textContent='×';x.dataset.tip='Delete this clip';
    row.append(sw,lab,tog,x);
    sw.addEventListener('click',e=>{e.stopPropagation();clipSelect(c.id,e);});   // Ctrl/Shift = multi-select (same as parts/dims)
    let clipClickT=null;
@@ -2755,11 +3011,24 @@ function refresh3DLegend(){if(!window.Steel3DView)return;const st=window.Steel3D
  document.querySelectorAll('#m3dLegend .cat-hdr').forEach(updateCatTog);}  // refresh the type-category master toggles too
 let bar3dWired=false;
 function seg3dActive(sel,attr,val){document.querySelectorAll(sel+' button').forEach(b=>b.classList.toggle('on',b.getAttribute(attr)===val));}
+// Reflect the live projection / display mode into the Camera + Display dropdowns: tick the active menu item AND label the trigger button, so the current mode shows without opening the menu.
+function reflectProj(){const V=window.Steel3DView;if(!V)return;const p=V.projection();seg3dActive('#m3dProj','data-proj',p);const b=document.getElementById('m3dProjBtn');if(b)b.textContent=(p==='ortho'?'Ortho':'Persp')+' ▾';}
+function reflectMode(){const V=window.Steel3DView;if(!V)return;const m=V.mode();seg3dActive('#m3dMode','data-mode',m);const b=document.getElementById('m3dModeBtn');if(b)b.textContent=(m==='wire'?'Wire':m==='xray'?'X-ray':'Solid')+' ▾';}
 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);});
+ // Camera + Display dropdowns — open/close like Clip/Work/Plane; picking an item sets the mode, ticks it, and relabels the trigger (reflectProj/reflectMode).
+ const projBtn=document.getElementById('m3dProjBtn'),projMenu=document.getElementById('m3dProj');
+ function projMenuOutside(e){if(!projMenu.contains(e.target)&&e.target!==projBtn)projMenuClose();}
+ function projMenuClose(){projMenu.classList.remove('open');document.removeEventListener('mousedown',projMenuOutside,true);}
+ projBtn.onclick=e=>{e.stopPropagation();if(projMenu.classList.contains('open'))projMenuClose();else{projMenu.classList.add('open');document.addEventListener('mousedown',projMenuOutside,true);}};
+ projMenu.querySelectorAll('button').forEach(b=>b.onclick=()=>{window.Steel3DView.setProjection(b.dataset.proj);reflectProj();projMenuClose();});
+ const modeBtn=document.getElementById('m3dModeBtn'),modeMenu=document.getElementById('m3dMode');
+ function modeMenuOutside(e){if(!modeMenu.contains(e.target)&&e.target!==modeBtn)modeMenuClose();}
+ function modeMenuClose(){modeMenu.classList.remove('open');document.removeEventListener('mousedown',modeMenuOutside,true);}
+ modeBtn.onclick=e=>{e.stopPropagation();if(modeMenu.classList.contains('open'))modeMenuClose();else{modeMenu.classList.add('open');document.addEventListener('mousedown',modeMenuOutside,true);}};
+ modeMenu.querySelectorAll('button').forEach(b=>b.onclick=()=>{window.Steel3DView.setDisplayMode(b.dataset.mode);reflectMode();modeMenuClose();});
  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);};
+ document.getElementById('m3dFitSel').onclick=()=>window.Steel3DView.frameSelection();   // Zoom to selected (Alt+Z already bound in steel-3d-view.js)
+ document.getElementById('m3dRef').onchange=e=>window.Steel3DView.setRefLine(e.target.checked);   // View ▾ menu checkbox
  const d3=window.Steel3DView;
  document.getElementById('m3dDim').onclick=()=>{d3.toggleDimTool();setLastCmd('Dimension',()=>{const b=document.getElementById('m3dDim');if(b&&!b.classList.contains('on'))d3.toggleDimTool();});};  // toggleDimTool()'s reflectDimBar() owns the button .on class + axis/show visibility (single source, no duplicate DOM toggles)
  document.querySelectorAll('#m3dDimAxis button').forEach(b=>b.onclick=()=>{d3.setDimAxis(b.dataset.d3axis);seg3dActive('#m3dDimAxis','data-d3axis',b.dataset.d3axis);});
@@ -2775,8 +3044,16 @@ function wire3DBar(){if(bar3dWired||!window.Steel3DView)return;bar3dWired=true;
    else{clipMenu.classList.add('open');document.addEventListener('mousedown',clipMenuOutside,true);}};
  clipMenu.querySelectorAll('button').forEach(b=>b.onclick=()=>{clipMenuClose();const a=b.dataset.clip;
    if(a==='plane'){d3.setClipMode('plane');setLastCmd('Clip plane',()=>d3.setClipMode('plane'));}else if(a==='box'){d3.setClipMode('box');setLastCmd('Clip box',()=>d3.setClipMode('box'));}else if(a==='clear')d3.clearClips();});
- // Labels: a plain toggle (mirrors Ref line) — show each member's mark/id in the 3D view.
- document.getElementById('m3dLabels').onclick=()=>{const on=!d3.labelsOn();d3.setLabelsOn(on);document.getElementById('m3dLabels').classList.toggle('on',on);};
+ // Labels: a checkbox in the View ▾ menu (mirrors Ref line) — show each member's mark/id in the 3D view.
+ document.getElementById('m3dLabels').onchange=e=>d3.setLabelsOn(e.target.checked);
+ // View menu: groups the Ref line + Labels toggles (same open/close discipline as Clip / Work area / Plane).
+ const viewBtn=document.getElementById('m3dView'),viewMenu=document.getElementById('m3dViewMenu');
+ function viewMenuOutside(e){if(!viewMenu.contains(e.target)&&e.target!==viewBtn)viewMenuClose();}
+ function viewMenuClose(){viewMenu.classList.remove('open');document.removeEventListener('mousedown',viewMenuOutside,true);}
+ viewBtn.onclick=e=>{e.stopPropagation();
+   if(viewMenu.classList.contains('open'))viewMenuClose();
+   else{document.getElementById('m3dRef').checked=!!d3.refLine();document.getElementById('m3dLabels').checked=!!d3.labelsOn();  // reflect live state on open
+     viewMenu.classList.add('open');document.addEventListener('mousedown',viewMenuOutside,true);}};
  // Insert a detail: the ▾ menu lists the detail library + an "add image" option; picking one arms a
  // placement pick (onInsertPlace drops it). While armed the button is a cancel target (onInsertModeChange).
  // The menu is built with DOM nodes (textContent) — the detail names are user text, never innerHTML.
@@ -2786,10 +3063,10 @@ function wire3DBar(){if(bar3dWired||!window.Steel3DView)return;bar3dWired=true;
  function insMenuBuild(){const names=Object.keys(C.custom_details||{}).sort((a,b)=>String(a).localeCompare(String(b),undefined,{numeric:true}));
    const frag=document.createDocumentFragment();
    const lab=document.createElement('div');lab.className='mlabel';lab.textContent='Place a detail';frag.appendChild(lab);
-   if(names.length){for(const n of names){const b=document.createElement('button');b.textContent=n;b.title='Place '+n;b.onclick=()=>{insMenuClose();armInsert(n);};frag.appendChild(b);}}
+   if(names.length){for(const n of names){const b=document.createElement('button');b.textContent=n;b.dataset.tip='Place '+n;b.onclick=()=>{insMenuClose();closeMore();armInsert(n);};frag.appendChild(b);}}
    else{const note=document.createElement('div');note.style.cssText='padding:4px 10px;color:var(--mut);font-size:12px';note.textContent='No saved details yet — add one below.';frag.appendChild(note);}
    frag.appendChild(document.createElement('hr'));
-   const add=document.createElement('button');add.textContent='＋ Add an image…';add.onclick=()=>{insMenuClose();document.getElementById('insFile').click();};frag.appendChild(add);
+   const add=document.createElement('button');add.textContent='＋ Add an image…';add.onclick=()=>{insMenuClose();closeMore();document.getElementById('insFile').click();};frag.appendChild(add);
    insMenu.replaceChildren(frag);}
  insBtn.onclick=e=>{e.stopPropagation();
    if(d3.insertMode()){d3.setInsertMode(false);return;}                     // armed → cancel the pick
@@ -2836,6 +3113,9 @@ function applyViewState(on){            // flip the toggle + swap the canvases (
  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.body.classList.toggle('v3d',on);   // 3D-only chrome (e.g. ⋯ → Detailing → Insert detail) keys off this
+ document.getElementById('dimB').style.display=on?'none':'';                       // 2D Dimension button — 2D only
+ document.getElementById('dim3dWrap').style.display=on?'inline-flex':'none';       // 3D Dimension cluster (moved to header) — 3D only
  document.getElementById('m3dCube').style.display=on?'block':'none';
  document.getElementById('m3dAxes').style.display=on?'block':'none';
  document.getElementById('snapBar').classList.toggle('s3d',on);   // in 3D the snap bar shifts clear of the world-axis triad (bottom-right); see #snapBar.s3d
@@ -2854,13 +3134,15 @@ async function setView(on){
    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
+   reflectProj();reflectMode();  // reflect persisted projection + display mode into the Camera/Display dropdown triggers
   }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));
   }
  }else{if(cmTool&&window.Steel3DView&&window.Steel3DView.cmClear3d)window.Steel3DView.cmClear3d();   // 3D→2D: drop the mm-space pick the same way (tool stays armed)
   applyViewState(false);if(window.Steel3DView)window.Steel3DView.hide();}
+ if(propPopOpen()){if(propPopPinned)dockPropPop();else closePropPop(true);}   // the popup is anchored to one canvas — re-dock if pinned, else dismiss on the view switch
+ refreshPropLabels3d();updatePropHint();   // push the label set to whichever view is now live (3D shows them; 2D hides the 3D host) + refresh the corner note
 }
 document.getElementById('vt2d').onclick=()=>{if(view3d)setView(false);};
 document.getElementById('vt3d').onclick=()=>{if(!view3d)setView(true);};
@@ -2907,7 +3189,7 @@ function openDetails(){const g=document.getElementById('detailsGrid');const uniq
  g.innerHTML=uniq.length?uniq.map(t=>{const custom=C.custom_details[t]!=null;const sheet=custom?'':(sheetOf(t)||'');const pv=previewFor(t),b=custom?null:bubbleFor(t);
    const prev=pv?(b?`<img class=dthumb data-t="${esc(t)}" alt="${esc(t)}">`:`<img src="data:image/jpeg;base64,${pv}" alt="${esc(t)}">`):`<div class=dprev>Preview pending<br>from sheet ${esc(sheet)}</div>`;
    const sub=custom?'Custom detail':('Sheet '+esc(sheet)+(b?' · detail '+esc(numOf(t)):''));
-   return `<div class=dcard><div class=dprevwrap${pv?` data-det="${esc(t)}"`:''}>${prev}</div><div class=dmeta><input class=dname data-old="${esc(t)}" value="${esc(t)}" title="Rename (updates every plan)" autocomplete=off><div class=ds>${sub}${custom?` · <a href="#" class=ddel data-del="${esc(t)}">delete</a>`:''}</div></div></div>`;}).join('')
+   return `<div class=dcard><div class=dprevwrap${pv?` data-det="${esc(t)}"`:''}>${prev}</div><div class=dmeta><input class=dname data-old="${esc(t)}" value="${esc(t)}" data-tip="Rename (updates every plan)" autocomplete=off><div class=ds>${sub}${custom?` · <a href="#" class=ddel data-del="${esc(t)}">delete</a>`:''}</div></div></div>`;}).join('')
    :'<div class=hint>No detail callouts detected. Use ＋ New detail to add your own.</div>';
  g.querySelectorAll('img.dthumb').forEach(im=>detThumb(im.dataset.t,im));
  g.querySelectorAll('.dprevwrap[data-det]').forEach(c=>c.onclick=()=>openPreview(c.dataset.det));
@@ -2938,7 +3220,7 @@ function updBpBtn(){const b=document.getElementById('bpBtn');if(!b)return;
  const colSet=new Set(colMemberIds()), n=autoBasePlates().length;
  const covered=new Set((C.joints||[]).filter(j=>j&&j.kind==='base-plate'&&colSet.has(j.main)).map(j=>j.main)).size;  // only CURRENT columns (ignore joints orphaned by a deleted column)
  b.disabled=colSet.size===0;                                            // no columns → nothing to detail (empty-state)
- b.title=colSet.size===0?'No columns in this model to detail base plates.':'Auto-detail base plates on every column (a plate + anchor kit + weld, shown in 3D). Tune sizes per the schedule via the AI or per-column params.';
+ b.dataset.tip=colSet.size===0?'No columns in this model to detail base plates.':'Auto-detail base plates on every column (a plate + anchor kit + weld, shown in 3D). Tune sizes per the schedule via the AI or per-column params.';
  b.textContent=((colSet.size>0&&covered>=colSet.size&&n>0)?'Clear base plates':'Base plates')+(n?' ('+n+')':'');}  // label flips once all current columns are covered, so the destructive 2nd click reads clearly
 // C.joints is model-global but now rides the snapshot (snapshot()/apply() carry it), so every joint
 // mutation goes through edit() — auto-detail, the inspector, and Remove are all undoable (Ctrl+Z/Y).
@@ -2983,7 +3265,7 @@ function updSpBtn(){const b=document.getElementById('spBtn');if(!b)return;
  const elig=spEligibleEnds(),n=autoShearPlates().length;
  const covered=elig.filter(({beam,endIdx})=>spJointOf(beam.id,endIdx)).length;  // eligible ends already detailed (auto OR user)
  b.disabled=elig.length===0;                                            // no eligible beam ends → nothing to detail (empty-state, disabled-not-hidden)
- b.title=elig.length===0?'No eligible beam ends in this model to detail shear plates.':'Auto-detail bolted shear (fin) plates on eligible beam ends (a fin plate + bolt group + weld, shown in 3D). Tune sizes per the schedule via the AI or per-end params.';
+ b.dataset.tip=elig.length===0?'No eligible beam ends in this model to detail shear plates.':'Auto-detail bolted shear (fin) plates on eligible beam ends (a fin plate + bolt group + weld, shown in 3D). Tune sizes per the schedule via the AI or per-end params.';
  b.textContent=((elig.length>0&&covered>=elig.length&&n>0)?'Clear shear plates':'Shear plates')+(n?' ('+n+')':'');}  // label flips to Clear once all ELIGIBLE ends are covered (moment ends are legitimately excluded)
 function toggleShearPlates(){
   const elig=spEligibleEnds();
@@ -3007,7 +3289,7 @@ function renderConnTable(){const tb=document.getElementById('connBody');if(!tb)r
   +`<td><input class="combo ftab-inp" data-src=details data-f=detail value="${esc(r.detail||'')}" placeholder="e.g. 50S504" autocomplete=off></td>`
   +`<td><input class=ftab-inp data-f=target value="${esc((r.targets&&r.targets[connPlat])||'')}" placeholder="e.g. 146" autocomplete=off></td>`
   +`<td class=csrc>${srcChip(r.source||'user')}</td>`
-  +`<td><button class="danger cdel" title="Remove this row">✕</button></td></tr>`).join('');
+  +`<td><button class="danger cdel" data-tip="Remove this row">✕</button></td></tr>`).join('');
  tb.querySelectorAll('tr[data-id]').forEach(tr=>{const id=tr.dataset.id;const row=connRowById(id);if(!row)return;
   tr.querySelector('[data-f=type]').onchange=e=>edit(()=>{row.type=e.target.value.trim();});
   tr.querySelector('[data-f=detail]').onchange=e=>edit(()=>{row.detail=e.target.value.trim();});
@@ -3177,7 +3459,7 @@ function updConf(){const el=document.getElementById('confStat');if(!el)return;co
   else{const gap=tgt-sc;
    tg.innerHTML=' · <span style="color:var(--mut)">target '+tgt+'%</span>'+(gap>0?' <span style="color:'+col+'">(−'+gap+'%)</span>':'');}
  }
- el.title='Confidence '+(sc==null?'—':sc+'%')+(tgt!=null?' vs target '+tgt+'%':'')+' — '+s.overall.tons.toFixed(1)+' t scored · '+s.overall.rfiCount+' RFI. Click for the report.';}
+ el.dataset.tip='Confidence '+(sc==null?'—':sc+'%')+(tgt!=null?' vs target '+tgt+'%':'')+' — '+s.overall.tons.toFixed(1)+' t scored · '+s.overall.rfiCount+' RFI. Click for the report.';}
 // --- the report modal ---
 let confBand='all',confCat='all',confExpand=null;
 function openConf(){confExpand=null;renderConf();document.getElementById('confModal').style.display='flex';}
@@ -3188,7 +3470,7 @@ function _countsHtml(c){const out=['verified','high','med','low','rfi'].filter(k
 function renderConf(){const s=scoreContractJS();const cat=s.byCategory;
  const ct=document.getElementById('confTarget');if(ct&&document.activeElement!==ct){  // value = the per-read OVERRIDE only; the app default shows as a placeholder (empty = using default)
   ct.value=typeof C.target_confidence==='number'?C.target_confidence:'';ct.placeholder=TARGET_CONF!=null?String(TARGET_CONF):'70';}
- const card=(key,label,cs,stub)=>'<div class="ccard'+(stub?' stub':' click')+(confCat===key?' on':'')+'" data-cat="'+key+'"'+(stub?' title="not scored yet"':'')+'>'+
+ const card=(key,label,cs,stub)=>'<div class="ccard'+(stub?' stub':' click')+(confCat===key?' on':'')+'" data-cat="'+key+'"'+(stub?' data-tip="not scored yet"':'')+'>'+
    '<div class=cc-label>'+label+'</div>'+
    '<div class=cc-score style="color:'+(stub?'var(--mut)':bandColorForPct(cs.score))+'">'+(stub||cs.score==null?'—':cs.score+'%')+'</div>'+
    _bar(stub?null:cs.score)+
@@ -3466,7 +3748,7 @@ if(new URLSearchParams(location.search).get('selftest')==='1'){(function(){
   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.title=parts.join(' · ');el.style.display='';  // title = full provenance (the chip itself truncates with ellipsis)
+  el.textContent=parts.join(' · ');el.dataset.tip=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
@@ -3518,7 +3800,7 @@ function askAiRenderThumbs() {
     img.src = snap.dataUrl;      // full dataURL — safe, not user text, no textContent needed
     img.alt = '';
     const rmBtn = document.createElement('button');
-    rmBtn.title = 'Remove';
+    rmBtn.dataset.tip = 'Remove';
     rmBtn.textContent = '✕';
     rmBtn.onclick = () => { askAiSnapshots.splice(idx, 1); askAiRenderThumbs(); };
     const nameEl = document.createElement('div');