@floless/app 0.48.1 → 0.50.0

package/dist/floless-server.cjs

@@ -52856,7 +52856,7 @@ function appVersion() {
   return resolveVersion({
     isSea: isSea2(),
     sqVersionXml: readSqVersionXml(),
-    define: true ? "0.48.1" : void 0,
+    define: true ? "0.50.0" : void 0,
     pkgVersion: readPkgVersion()
   });
 }
@@ -52866,7 +52866,7 @@ function resolveChannel(s) {
   return "dev";
 }
 function appChannel() {
-  return resolveChannel({ isSea: isSea2(), define: true ? "0.48.1" : void 0 });
+  return resolveChannel({ isSea: isSea2(), define: true ? "0.50.0" : void 0 });
 }
 
 // workflow-update.ts

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

@@ -212,6 +212,7 @@
         "segments": { "type": "array", "items": { "$ref": "#/$defs/segment" } },
         "labels": { "type": "array", "items": { "$ref": "#/$defs/label" } },
         "details": { "type": "array", "items": { "$ref": "#/$defs/detail" } },
+        "callouts": { "type": "array", "items": { "$ref": "#/$defs/callout" }, "description": "Drawing cross-references drawn ON this plan that point to another sheet (section cuts, elevation marks, detail refs). The editor renders a clickable bubble at each `disp` that jumps to the referenced sheet." },
         "tos_callouts": { "type": "array", "items": { "$ref": "#/$defs/tos_callout" } },
         "members": { "type": "array", "items": { "$ref": "#/$defs/member" } },
         "dims": { "type": "array", "items": { "$ref": "#/$defs/dim" }, "description": "Draft-only on-drawing dimensions (editor annotations). NOT baked into the lock / 3D / IFC / BOM." },
@@ -281,6 +282,26 @@
         "disp": { "$ref": "#/$defs/point2" }
       }
     },
+    "callout": {
+      "type": "object",
+      "required": ["kind", "target"],
+      "additionalProperties": true,
+      "description": "A drawing cross-reference drawn ON this plan that points to another sheet — a section cut, an elevation mark, or a detail reference. Clicking its bubble in the editor jumps to the referenced sheet (a loaded plan → switch to it & frame it; otherwise the detail lightbox).",
+      "properties": {
+        "kind": { "enum": ["section", "elevation", "detail-ref"], "description": "section = a section cut symbol; elevation = an elevation / interior-elevation mark; detail-ref = a detail callout pointing to another sheet." },
+        "text": { "type": "string", "description": "The mark as drawn, e.g. \"A\", \"A-A\", \"3/S-501\"." },
+        "disp": { "$ref": "#/$defs/point2", "description": "Where the mark is drawn on THIS plan (display space) — the clickable hotspot anchor." },
+        "target": {
+          "type": "object",
+          "additionalProperties": true,
+          "description": "Where the mark points.",
+          "properties": {
+            "sheet": { "type": "string", "description": "Referenced sheet, e.g. S-301." },
+            "number": { "type": "string", "description": "Detail / section number on that sheet, e.g. \"A\" or \"3\"." }
+          }
+        }
+      }
+    },
     "tos_callout": {
       "type": "object",
       "required": ["elev_in"],

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

@@ -223,6 +223,9 @@ Important optional fields:
   "weights": { "W16X26": 26, "HSS6X6X3/8": 27.48 },   // profile → plf; null for unresolved
   "moment_frames": [ … ],                               // from Frame Elevation sheets
   "detail_bubbles": { "S-504": { "5": [0.32, 0.71] } }, // sheet → { number → [fx,fy] }
+  "connections": [                                       // vendor-neutral connection library
+    { "id": "cx-m1", "type": "moment", "detail": "5-S504", "targets": { "tekla": "146" }, "source": "drawing" }
+  ],
   "plans": [
     {
       "sheet": "S-202",
@@ -234,6 +237,7 @@ Important optional fields:
       "segments": [ { "id": "seg-1", "a": [x,y], "b": [x,y], "o": "H" } ],
       "labels":   [ { "text": "W16X26", "disp": [x,y] } ],
       "details":  [ { "text": "5-S504",  "disp": [x,y] } ],
+      "callouts": [ { "kind": "section", "text": "A", "disp": [x,y], "target": { "sheet": "S-301", "number": "A" } } ],
       "tos_callouts": [ { "elev_in": 198, "type": "TOS", "disp": [x,y] } ],
       "members": [
         {
@@ -245,7 +249,7 @@ Important optional fields:
           "rfi": false,
           "mf": false,
           "ends": [
-            { "tos": 198, "note": "moment", "tosDef": false, "detail": "5-S504" },
+            { "tos": 198, "note": "moment", "tosDef": false, "detail": "5-S504", "conn": "cx-m1" },
             { "tos": 198, "note": "shear",  "tosDef": true,  "detail": "" }
           ]
         },
@@ -282,6 +286,25 @@ Key field rules:
   moment-frame member (persistent; survives AISC resolution).
 - `raster_b64` is a base64 JPEG of the framing area (title block excluded). It is
   **machine-local** and **never committed**.
+- **Connection library (`connections[]`) + per-end refs.** A vendor-neutral top-level
+  `connections: [{ id, type, detail, targets:{ tekla:"146", … }, source }]` maps a connection
+  TYPE → the firm's design detail# → per-platform component ids. A member end references a row by id
+  via `ends[].conn` (or `col.conn` for a column); the legacy `note`/`detail` stay as the fallback
+  when `conn` is empty. `source` is `drawing` (read from a callout — best evidence), `company-rules`
+  (the firm's standard), or `user`. Prefer a `conn` reference over free text when the connection is
+  known — the editor's per-end picker and the Connections confidence card both key on it.
+- **Company-rules pre-fill (§5.5).** If a firm-standard knowledge file is present (e.g.
+  `company-rules.md`: "moment → 50S504 → Tekla 146"), read it and emit those rows in `connections[]`
+  with `source: "company-rules"`, then PUT. The user reviews/edits them in the editor's
+  **Connections** library panel and assigns a row per member end. No new agent verb — it's contract data.
+- **Clickable callouts (`callouts[]`).** Harvest the cross-reference marks drawn ON the plan that
+  point to ANOTHER sheet — **section cuts** (e.g. a circle with `A` over `A` and a sheet ref),
+  **elevation/interior-elevation marks**, and **detail references** — as per-plan
+  `callouts: [{ kind:"section"|"elevation"|"detail-ref", text:"A", disp:[x,y], target:{ sheet:"S-301", number:"A" } }]`.
+  `disp` is where the mark sits on THIS plan (display space — the clickable hotspot); `target` is where
+  it points. The editor draws a clickable bubble at each `disp`: clicking jumps to the referenced sheet
+  if it's loaded as a plan, else opens the detail lightbox. (Keep `details[]` as-is — those are the
+  detail callouts that already preview; `callouts[]` adds the section/elevation marks and off-sheet refs.)
 
 ### 5. Write to the contract store
 

package/dist/web/steel-editor.html

@@ -68,7 +68,16 @@
  rect.dethot{cursor:pointer;fill:rgba(168,85,247,.16);stroke:#a855f7;stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
  rect.dethot:hover{fill:rgba(168,85,247,.34)}
  text.dettx{fill:#ddd6fe;font:bold 11px system-ui;text-anchor:middle;pointer-events:none}
- #detailsModal,#framesModal,#rfiModal,#confModal,#askAiModal{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center}
+ /* clickable callout bubbles (Workstream B): section/elevation/detail-ref + plain details — navigable cross-references drawn on the plan in select mode. Existing palette only: purple #a855f7 (details), cyan #22d3ee (sections/elevations); solid vs dashed separates the kinds. */
+ g.cohot{cursor:pointer}
+ circle.cobub{stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.55}
+ circle.cobub.k-detail,circle.cobub.k-detailref{stroke:#a855f7;color:#a855f7;fill:rgba(168,85,247,.12)}
+ circle.cobub.k-section,circle.cobub.k-elev{stroke:#22d3ee;color:#22d3ee;fill:rgba(34,211,238,.10)}
+ circle.cobub.k-detailref,circle.cobub.k-elev{stroke-dasharray:3 3}
+ g.cohot:hover circle.cobub{opacity:1;stroke-width:2;filter:drop-shadow(0 0 4px currentColor)}
+ text.cotx{fill:#e2e8f0;font:bold 11px system-ui;text-anchor:middle;dominant-baseline:central;pointer-events:none;opacity:.6}
+ g.cohot:hover text.cotx{opacity:1}
+ #detailsModal,#framesModal,#rfiModal,#confModal,#askAiModal,#connModal{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center}
  #askAiDrop:hover{border-color:var(--brand);color:var(--text)} #askAiDrop.has{border-style:solid;border-color:var(--brand)}
  .aithumb{position:relative;display:inline-flex} .aithumb img{height:60px;border-radius:4px;border:1px solid var(--line);background:#fff;display:block}
  .aithumb button{position:absolute;top:-5px;right:-5px;width:16px;height:16px;padding:0;border-radius:8px;font-size:10px;line-height:16px;text-align:center;background:#7f1d1d;border-color:#991b1b;color:#fecaca}
@@ -93,7 +102,11 @@
  .chip{display:inline-block;padding:1px 6px;border-radius:4px;font-size:10px;border:1px solid var(--line);color:var(--mut);margin:0 3px 3px 0}
  .chip.assumed,.chip.weak{border-color:#713f12;color:#fbbf24} .chip.fail{border-color:#7f1d1d;color:#fca5a5}
  tr.confrow{cursor:pointer} .conf-expand{color:var(--mut);font-size:12px;line-height:1.6;background:#0b1220}
- .ftab td .combo{padding:4px 6px} .ftab .rea{color:var(--mut);font-size:12px} .rfichip{display:inline-block;min-width:18px;height:18px;line-height:18px;text-align:center;background:#7f1d1d;color:#fecaca;border-radius:9px;font-size:11px;padding:0 5px}
+ .ftab td .combo{padding:4px 6px} .ftab .rea{color:var(--mut);font-size:12px}
+ .ftab-inp{background:#0f172a;color:var(--text);border:1px solid #475569;border-radius:4px;padding:4px 6px;width:100%;font:13px system-ui}
+ .ftab-inp:focus{outline:none;border-color:var(--brand)}
+ .ftab .cdel{padding:3px 7px;font-size:11px} .ftab .csrc{white-space:nowrap}
+ .connset{opacity:.55} .rfichip{display:inline-block;min-width:18px;height:18px;line-height:18px;text-align:center;background:#7f1d1d;color:#fecaca;border-radius:9px;font-size:11px;padding:0 5px}
  .mbackdrop{position:absolute;inset:0;background:rgba(2,8,23,.62)}
  .mpanel{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:10px;width:min(880px,92vw);max-height:86vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.6)}
  .mhead{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
@@ -211,6 +224,7 @@
   <div id=moreMenu role=menu>
    <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>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>
@@ -223,6 +237,7 @@
    <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=framesBtn>Frames</button>
    <hr>
    <div class=mlabel>Session</div>
@@ -272,6 +287,12 @@
   <div class=hint id=dnHint>For anything the auto‑detection missed. The image stays on your machine.</div>
  </div>
  <div class=mgrid id=detailsGrid></div></div></div>
+<div id=connModal><div class=mbackdrop id=connBackdrop></div>
+ <div class=mpanel><div class=mhead><b>Connection library</b><div style="display:flex;gap:8px;align-items:center"><button id=connNew>＋ New row</button><button id=connClose>✕</button></div></div>
+ <div class=conf-filter><span class=glab>Platform</span><div class=grp id=connPlatGrp><button class=on data-plat=tekla>Tekla</button><button data-plat=sds2>SDS2</button><button data-plat=revit>Revit</button></div><span class=hint style="margin:0">The design detail# is platform-neutral; the component id is per-platform.</span></div>
+ <div style="overflow:auto;flex:1;padding:14px;scrollbar-width:thin">
+  <table class=ftab id=connTable><thead><tr><th style="width:24%">Type</th><th style="width:24%">Detail #</th><th id=connCompHead style="width:24%">Tekla id</th><th style="width:18%">Source</th><th style="width:10%"></th></tr></thead><tbody id=connBody></tbody></table>
+ </div></div></div>
 <div id=framesModal><div class=mbackdrop id=framesBackdrop></div>
  <div class=mpanel><div class=mhead><b>Moment frame schedule</b><button id=framesClose>✕</button></div>
  <div id=framesGrid style="padding:14px;overflow:auto"></div></div></div>
@@ -427,6 +448,7 @@ function main() {
 let P, X0,Y0,X1,Y1, FT, RB64, EXTX, EXTY, profs;   // per-plan, set by setPlan()
 let mode='sel', drag=null, picking=false, pickKind='profile', pickEnd=null, geoMode=null;
 let dimMode=false, dimDraft=null, dimAxis='free', selDimIds=new Set(), dimsVisible=true;   // Dimension tool: armed flag, in-progress {a,b,axis}, sticky axis, selected dim ids (multi-select), show/hide
+let calloutsVisible=true;   // Workstream B: show/hide the clickable callout bubbles (details + section/elevation/detail-ref) on the plan in select mode
 let csaxisMode=false, csDraft=null;   // Local coordinate system "set axes" tool: armed flag + in-progress origin [x,y] (null until click 1). P.frame={o,u} holds the committed local frame (null = global).
 let dimChain=false, dimChainPrev=null, dimSeq=0;   // chained "continuous" dimensioning: toggle, the running {point,axis,off,rot}, and a counter for unique ids on rapid clicks
 let dimSplitMode=false;   // "add split point" mode on a selected dim — each click inserts a point and splits the dim segment under it into two
@@ -739,6 +761,22 @@ function render(){
    s+=`<rect class=lblhot data-prof="${esc(lb.text)}" x="${lb.disp[0]-w/2}" y="${lb.disp[1]-10}" width="${w}" height="20" rx="3"><title>${esc(lb.text)}</title></rect>`;}
  if(picking&&pickKind==='detail'&&P.details) for(const d of P.details){const w=Math.max(34,d.text.length*8);
    s+=`<rect class=dethot data-det="${esc(d.text)}" x="${d.disp[0]-w/2}" y="${d.disp[1]-9}" width="${w}" height="18" rx="3"><title>${esc(d.text)}</title></rect><text class=dettx x="${d.disp[0]}" y="${d.disp[1]+4}">${esc(d.text)}</text>`;}
+ // Workstream B: clickable callout bubbles in normal select mode — details[] + per-plan callouts[].
+ // data-co-sheet drives the smart jump (loaded plan → switch; else data-co-prev → detail lightbox).
+ // hidden while a sub-tool is armed (dim-split / geo extend-trim-split) so the bubbles never distract
+ // or shadow a tool click — those handlers run earlier in pointerdown, but don't draw navigables mid-tool.
+ if(calloutsVisible&&mode==='sel'&&!picking&&!dimMode&&!csaxisMode&&!dimSplitMode&&!geoMode){
+   const sheetLoaded=sh=>!!sh&&C.plans.some(p=>p.sheet&&p.sheet.toUpperCase()===String(sh).toUpperCase());
+   // honest destination hint: loaded → no suffix (jumps); a resolvable preview → "(lightbox)"; else "(not loaded)".
+   const hint=(sh,prev)=>sheetLoaded(sh)?'':(prev&&previewFor(prev)?' (lightbox)':' (not loaded)');
+   const cob=(kc,mark,disp,sheet,prev,tip)=>`<g class=cohot data-co-sheet="${esc(sheet||'')}" data-co-prev="${esc(prev||'')}"><title>${esc(tip)}</title><circle class="cobub k-${kc}" cx="${disp[0]}" cy="${disp[1]}" r="11"/><text class=cotx x="${disp[0]}" y="${disp[1]}">${esc(String(mark==null?'':mark).slice(0,3))}</text></g>`;
+   for(const d of (P.details||[])){if(!Array.isArray(d.disp))continue;const sh=sheetOf(d.text),nu=numOf(d.text);
+     s+=cob('detail',nu||d.text,d.disp,sh,d.text,'Detail '+(nu||d.text||'')+(sh?' → '+sh:'')+hint(sh,d.text));}
+   for(const co of (P.callouts||[])){if(!Array.isArray(co.disp))continue;const sh=co.target&&co.target.sheet,nu=co.target&&co.target.number;
+     const kc=co.kind==='section'?'section':co.kind==='elevation'?'elev':'detailref';const kl=co.kind==='section'?'Section':co.kind==='elevation'?'Elevation':'Detail ref';
+     const prev=(nu&&sh)?(nu+'-'+sh):(co.text||'');
+     s+=cob(kc,co.text||nu,co.disp,sh,prev,kl+' '+(co.text||nu||'')+(sh?' → '+sh:'')+hint(sh,prev));}
+ }
  // numbered badges on the selected members (1..N in selection order; coincident ones fan out so duplicates are countable)
  // sized in 1/zoom units → constant on screen at any zoom (updateBadges keeps them in sync while zooming)
  const selM=selArr();
@@ -748,7 +786,7 @@ function render(){
      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();
  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();
+ 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();
  if(view3d&&window.Steel3DView)window.Steel3DView.setSelection(selIds);  // keep the 3D highlight in sync with the 2D selection
 }
 function updDup(){const n=redundantDups().length;
@@ -901,12 +939,20 @@ function panel(){
    return `<div class=elabrow><span class=elab>${label}</span><label class=defck><input type=checkbox id=${id}_ck ${def?'checked':''}>default</label></div><input id=${id} inputmode=decimal placeholder="5 3/4&quot; · 1&#39;-0 1/4&quot;" value="${esc(fmtFtIn(v))}"${def?' disabled':''}><span class=edec>${esc(fmtDecIn(v))}</span>`;};
  const nin=(id,v)=>`<input id=${id} class="f combo" data-src=conntypes placeholder="connection / note" value="${esc(v||'')}" autocomplete=off>`;
  const dFld=(id,o)=>{const hasPrev=o.detail&&previewFor(o.detail);return `<div class=elab>Connection detail</div><div style="display:flex;gap:6px"><input id=${id} class=combo data-src=details placeholder="e.g. 5-S504" value="${esc(o.detail||'')}" style="flex:1" autocomplete=off>${hasPrev?`<button id=${id}_open class=ghost title="Open detail ${esc(o.detail)}">⤢</button>`:''}<button id=${id}_pk class="ghost${(picking&&pickKind==='detail'&&pickEnd===o)?' on':''}" title="Pick a detail callout from the drawing">⌖</button></div>`;};
+ // 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.
+ const cFld=(id,o)=>{const row=o.conn?connRowById(o.conn):null;
+   const cap=row?`<span class=edec style="text-align:left">${esc(row.type||'?')}${row.detail?' · '+esc(row.detail):''} — ${esc(row.source||'user')}</span>`
+     :(o.conn?'<span class=edec style="text-align:left;color:#fca5a5">references a missing row — re-pick</span>':'');
+   return `<div class=elab>Connection</div><input id=${id} class=combo data-src=connrows readonly placeholder="— none — (pick from the library)" value="${esc(row?connLabel(row):'')}" autocomplete=off>${cap}`;};
+ const fb=(o,html)=>`<div class="${o.conn?'connset':''}">${html}</div>`; // dim the note/detail fallback when a library row is referenced
  const dotS='<span class=epdot style="background:#facc15"></span>',dotE='<span class=epdot style="background:#f472b6"></span>';  // start=yellow, end=magenta — matches the canvas end markers
  const elev = col
-  ? `<div class="sect f">Elevation</div>${ftFld('bos',dotS+'Bottom (BOS)',m.col.bos)}${tosFld('tosC',dotE+'Top (TOS)',m.col)}${nin('ntC',m.col.note)}${dFld('dtC',m.col)}`
-  : `<div class="sect f">${dotS}Start</div>${tosFld('tosA','TOS',m.ends[0])}${nin('ntA',m.ends[0].note)}${dFld('dtA',m.ends[0])}
+  ? `<div class="sect f">Elevation</div>${ftFld('bos',dotS+'Bottom (BOS)',m.col.bos)}${tosFld('tosC',dotE+'Top (TOS)',m.col)}${cFld('cnC',m.col)}${fb(m.col,nin('ntC',m.col.note)+dFld('dtC',m.col))}`
+  : `<div class="sect f">${dotS}Start</div>${tosFld('tosA','TOS',m.ends[0])}${cFld('cnA',m.ends[0])}${fb(m.ends[0],nin('ntA',m.ends[0].note)+dFld('dtA',m.ends[0]))}
      <div class=divrow><hr><button class=ghost id=matchEnds>Match → both ends</button><hr></div>
-     <div class=sect>${dotE}End</div>${tosFld('tosB','TOS',m.ends[1])}${nin('ntB',m.ends[1].note)}${dFld('dtB',m.ends[1])}`;
+     <div class=sect>${dotE}End</div>${tosFld('tosB','TOS',m.ends[1])}${cFld('cnB',m.ends[1])}${fb(m.ends[1],nin('ntB',m.ends[1].note)+dFld('dtB',m.ends[1]))}`;
  p.innerHTML=`<h3>Member ${esc(m.id)}</h3>
   <div class=row><label>Profile</label><div style="display:flex;gap:6px"><input id=pf class=combo data-src=profiles value="${esc(m.profile)}" style="flex:1" autocomplete=off><button id=pickProf class="ghost${(picking&&pickKind==='profile')?' on':''}" title="Pick profile by clicking a label in the drawing">⌖ pick</button></div>${(picking&&pickKind==='profile')?'<div class="hint" style="margin-top:4px;font-style:italic;color:var(--brand)">Click a profile label in the drawing…</div>':(picking&&pickKind==='detail')?'<div class="hint" style="margin-top:4px;font-style:italic;color:#a855f7">Click a detail callout in the drawing…</div>':''}</div>
   <div class="seg2 f"><button id=rBeam class="${col?'':'on'}">Beam</button><button id=rCol class="${col?'on':''}">Column</button></div>
@@ -939,18 +985,19 @@ function panel(){
  const wireDet=(id,o)=>{const i=document.getElementById(id);if(i)i.onchange=e=>edit(()=>{o.detail=e.target.value.trim();});
    const pk=document.getElementById(id+'_pk');if(pk)pk.onclick=()=>{if(picking&&pickKind==='detail'&&pickEnd===o){picking=false;pickEnd=null;}else{picking=true;pickKind='detail';pickEnd=o;}render();};
    const op=document.getElementById(id+'_open');if(op)op.onclick=()=>openPreview(o.detail);};
+ const wireConn=(id,o)=>{const i=document.getElementById(id);if(!i)return;i.onchange=e=>edit(()=>{const v=(e.target.value||'').trim();o.conn=(!v||v==='— none —')?'':v.split(' · ')[0];});};
  if(col){
   document.getElementById('bos').onchange=e=>edit(()=>{m.col.bos=parseLen(e.target.value);});
   wireTos('tosC',m.col);
   document.getElementById('ntC').onchange=e=>edit(()=>{m.col.note=e.target.value;});
-  wireDet('dtC',m.col);
+  wireDet('dtC',m.col);wireConn('cnC',m.col);
  }else{
   wireTos('tosA',m.ends[0]);
   document.getElementById('ntA').onchange=e=>edit(()=>{m.ends[0].note=e.target.value;});
-  wireDet('dtA',m.ends[0]);
+  wireDet('dtA',m.ends[0]);wireConn('cnA',m.ends[0]);
   wireTos('tosB',m.ends[1]);
   document.getElementById('ntB').onchange=e=>edit(()=>{m.ends[1].note=e.target.value;});
-  wireDet('dtB',m.ends[1]);
+  wireDet('dtB',m.ends[1]);wireConn('cnB',m.ends[1]);
   document.getElementById('matchEnds').onclick=()=>edit(()=>{m.ends[1]={tos:m.ends[0].tos,note:m.ends[0].note,tosDef:m.ends[0].tosDef,detail:m.ends[0].detail,conn:m.ends[0].conn,connVerified:m.ends[0].connVerified};});
  }
  document.getElementById('del').onclick=()=>edit(()=>{P.members=P.members.filter(x=>x.id!==m.id);selIds.clear();if(selDimIds.size){P.dims=P.dims.filter(d=>!selDimIds.has(d.id));selDimIds.clear();}});  // also drop any dims a mixed marquee selected
@@ -1157,6 +1204,12 @@ svg.addEventListener('pointerdown',e=>{if(e.button!==0)return;const t=e.target;
    return;}
  if(t.classList.contains('dethot')){const det=t.dataset.det;
    if(picking&&pickKind==='detail'&&pickEnd){const o=pickEnd;picking=false;pickEnd=null;edit(()=>{o.detail=det;});}return;}
+ {const cg=t.closest('g.cohot');if(cg){const sheet=cg.dataset.coSheet,prev=cg.dataset.coPrev;   // Workstream B smart jump
+   const idx=sheet?C.plans.findIndex(p=>p.sheet&&p.sheet.toUpperCase()===sheet.toUpperCase()):-1;
+   if(idx>=0){if(idx!==C.active)setPlan(idx);else fitToWindow();}                                  // referenced sheet is loaded → switch to it (or re-frame if already here)
+   else if(prev&&previewFor(prev))openPreview(prev);                                               // not loaded but we have the detail image → lightbox
+   else toast(sheet?('Sheet '+sheet+' isn’t loaded — open it to jump there'):'No target sheet for this callout');
+   return;}}
  if(t.classList.contains('seg')&&mode==='add'){addFromSeg(t.dataset.seg);return;}
  if(t.tagName==='image'&&mode==='add'){buildSnap(null);let q=toSvg(e),x0=q.x,y0=q.y;if(!e.altKey){const sn=snap(x0,y0);x0=sn.x;y0=sn.y;}const ln=document.createElementNS('http://www.w3.org/2000/svg','line');ln.setAttribute('class','draw');ln.setAttribute('x1',x0);ln.setAttribute('y1',y0);ln.setAttribute('x2',x0);ln.setAttribute('y2',y0);svg.appendChild(ln);drag={type:'draw',x0,y0,line:ln};svg.setPointerCapture(e.pointerId);e.preventDefault();return;}
  if(t.classList.contains('member')&&mode==='sel'){const id=t.dataset.id;
@@ -1219,6 +1272,8 @@ document.getElementById('csSetB').onclick=()=>{csaxisMode=!csaxisMode;setCsMode(
 document.getElementById('csResetB').onclick=()=>{resetFrame();render();};
 function updDimToggle(){const b=document.getElementById('dimToggleB');if(b)b.textContent=dimsVisible?'Hide dimensions':'Show dimensions';}
 document.getElementById('dimToggleB').onclick=()=>{dimsVisible=!dimsVisible;updDimToggle();render();};
+function updCalloutToggle(){const b=document.getElementById('calloutToggleB');if(b)b.textContent=calloutsVisible?'Hide callouts':'Show callouts';}
+document.getElementById('calloutToggleB').onclick=()=>{calloutsVisible=!calloutsVisible;updCalloutToggle();render();};
 document.getElementById('dupB').onclick=()=>{const ids=redundantDups();   // re-scan on demand (also runs live after every edit)
  if(!ids.length){const b=document.getElementById('dupB');b.dataset.flash='1';b.classList.add('ok');b.textContent='No duplicates ✓';
    setTimeout(()=>{delete b.dataset.flash;b.classList.remove('ok');updDup();},1500);return;}
@@ -1240,6 +1295,7 @@ addEventListener('keydown',e=>{
  if(e.key==='Escape'&&lightboxOpen()){closeLightbox();return;}
  if(e.key==='Escape'&&askAiIsOpen()){askAiClose();return;}
  if(e.key==='Escape'&&detailsOpen()){closeDetails();return;}
+ if(e.key==='Escape'&&connLibOpen()){closeConnLib();return;}
  if(e.key==='Escape'&&framesOpen()){closeFrames();return;}
  if(e.key==='Escape'&&rfiOpen()){closeRFI();return;}
  if(e.key==='Escape'&&confOpen()){closeConf();return;}
@@ -1428,6 +1484,37 @@ function detailsOpen(){return document.getElementById('detailsModal').style.disp
 document.getElementById('detailsBtn').onclick=openDetails;
 document.getElementById('detailsClose').onclick=closeDetails;
 document.getElementById('detailsBackdrop').onclick=closeDetails;
+// --- connection library: edit connections[] (type → design detail# → per-platform component id) ---
+// The library is the vendor-neutral source; member ends reference a row via ends[].conn / col.conn.
+// connPlat scopes the editable "component id" column to one platform; the detail# is platform-neutral.
+let connPlat='tekla';const PLAT_LABEL={tekla:'Tekla',sds2:'SDS2',revit:'Revit'};
+function openConnLib(){if(!Array.isArray(C.connections))C.connections=[];renderConnTable();document.getElementById('connModal').style.display='flex';}
+function closeConnLib(){document.getElementById('connModal').style.display='none';}
+function connLibOpen(){return document.getElementById('connModal').style.display==='flex';}
+function updConnBtn(){const b=document.getElementById('connBtn');if(b)b.textContent='Connections'+((C.connections||[]).length?' ('+C.connections.length+')':'');}
+function renderConnTable(){const tb=document.getElementById('connBody');if(!tb)return;
+ document.getElementById('connCompHead').textContent=(PLAT_LABEL[connPlat]||connPlat)+' id';
+ const rows=C.connections||[];
+ if(!rows.length){tb.innerHTML='<tr><td colspan=5 style="text-align:center;padding:32px;color:var(--mut);font-size:12px">No connections defined — click ＋ New row to add the first.</td></tr>';updConnBtn();return;}
+ const srcChip=s=>s==='drawing'?'<span class="chip assumed">drawing</span>':s==='company-rules'?'<span class=chip>company-rules</span>':'<span class=chip style="border-color:#1d4ed8;color:#93c5fd">user</span>';
+ tb.innerHTML=rows.map(r=>`<tr data-id="${esc(r.id)}">`
+  +`<td><input class="combo ftab-inp" data-src=conntypes data-f=type value="${esc(r.type||'')}" placeholder="moment" autocomplete=off></td>`
+  +`<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('');
+ 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();});
+  tr.querySelector('[data-f=target]').onchange=e=>edit(()=>{if(!row.targets)row.targets={};const v=e.target.value.trim();if(v)row.targets[connPlat]=v;else delete row.targets[connPlat];});
+  tr.querySelector('.cdel').onclick=()=>{edit(()=>{C.connections=C.connections.filter(x=>x.id!==id);
+    for(const pl of (C.plans||[]))for(const m of (pl.members||[])){if(m.col&&m.col.conn===id)m.col.conn='';for(const en of (m.ends||[]))if(en&&en.conn===id)en.conn='';}});renderConnTable();};});
+ updConnBtn();}
+document.getElementById('connBtn').onclick=openConnLib;
+document.getElementById('connClose').onclick=closeConnLib;
+document.getElementById('connBackdrop').onclick=closeConnLib;
+document.getElementById('connNew').onclick=()=>{edit(()=>{if(!Array.isArray(C.connections))C.connections=[];C.connections.push({id:'conn'+Date.now(),type:'moment',detail:'',targets:{[connPlat]:''},source:'user'});});renderConnTable();const tb=document.getElementById('connBody');if(tb.lastElementChild)tb.lastElementChild.scrollIntoView({block:'nearest'});};
+document.getElementById('connPlatGrp').querySelectorAll('button').forEach(b=>b.onclick=()=>{connPlat=b.dataset.plat;document.getElementById('connPlatGrp').querySelectorAll('button').forEach(x=>x.classList.toggle('on',x===b));renderConnTable();});
 // --- create your own detail (name + screenshot) — for anything the auto-detect missed ---
 function readImageCompressed(file,cb){const r=new FileReader();r.onload=()=>{const im=new Image();im.onload=()=>{
   const max=1400;let w=im.naturalWidth,h=im.naturalHeight;const sc=Math.min(1,max/Math.max(w,h));w=Math.max(1,Math.round(w*sc));h=Math.max(1,Math.round(h*sc));
@@ -1678,12 +1765,18 @@ lbView.addEventListener('dblclick',lbReset);
 const COMBO_SRC={
  profiles:()=>profs,
  conntypes:()=>['moment','drag','shear','braced','pinned','fixed'],
- details:()=>{const s=new Set();(P.details||[]).forEach(d=>s.add(d.text));Object.keys(C.custom_details).forEach(n=>s.add(n));return [...s].sort((a,b)=>String(a).localeCompare(String(b),undefined,{numeric:true}));}
+ details:()=>{const s=new Set();(P.details||[]).forEach(d=>s.add(d.text));Object.keys(C.custom_details).forEach(n=>s.add(n));return [...s].sort((a,b)=>String(a).localeCompare(String(b),undefined,{numeric:true}));},
+ connrows:()=>['— none —',...(C.connections||[]).map(r=>connLabel(r))]
 };
+// A connection-library row's one-line label for the per-end picker. The id is the prefix (parsed
+// back on select); type/detail follow for the human. Kept here so COMBO_SRC + cFld + wireConn agree.
+function connLabel(r){return r.id+' · '+(r.type||'?')+(r.detail?' · '+r.detail:'');}
+function connRowById(id){return (C.connections||[]).find(r=>r&&r.id===id)||null;}
 const comboPop=document.createElement('div');comboPop.id='comboPop';document.body.appendChild(comboPop);
 let comboInput=null,comboIdx=-1;
 function showCombo(inp){const src=COMBO_SRC[inp.dataset.src];if(!src)return;comboInput=inp;
- const q=(inp.value||'').trim().toUpperCase();const opts=src().filter(o=>String(o).toUpperCase().includes(q));
+ // connrows is a row PICKER (readonly), not a type-to-filter field — always offer every row.
+ const q=inp.dataset.src==='connrows'?'':(inp.value||'').trim().toUpperCase();const opts=src().filter(o=>String(o).toUpperCase().includes(q));
  if(!opts.length){comboPop.style.display='none';return;}
  comboPop.innerHTML=opts.map(o=>`<div class=opt data-v="${esc(o)}">${esc(o)}</div>`).join('');
  const r=inp.getBoundingClientRect();comboPop.style.left=Math.round(r.left)+'px';comboPop.style.top=Math.round(r.bottom+2)+'px';comboPop.style.minWidth=Math.round(r.width)+'px';

package/package.json

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