@floless/app 0.49.0 → 0.51.0

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

@@ -237,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": [
         {
@@ -296,6 +297,14 @@ Key field rules:
   `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/aware.js

@@ -1072,6 +1072,8 @@
         // Export/write group — visually separated from the look-and-read actions above.
         addNodeActionDivider(card);
         addNodeAction(card, 'Export IFC ▸', () => exportContractIfc(currentId));
+        addNodeAction(card, 'Export BOM (CSV) ▸', () => exportContractBom(currentId, 'csv'));
+        addNodeAction(card, 'Export BOM (Excel) ▸', () => exportContractBom(currentId, 'xlsx'));
         const teklaBtn = addNodeAction(card, 'Send to Tekla ▸', () => exportContractTekla(currentId));
         teklaBtn.dataset.tip = 'Tekla must be open with a model loaded. Click to create native parts in it.';
         card.dataset.tip = 'Double-click to open the contract editor';
@@ -1544,6 +1546,40 @@
     }
   }
 
+  // Export BOM ▸ — write the approved takeoff's Bill of Materials OUT to a CSV or a real .xlsx and
+  // download it. Generated host-side (no model): the server reuses the same BOM aggregation the
+  // canvas BOM node shows, saves the file under ~/.floless/exports/<appId>/, and returns the bytes
+  // (csv text, or xlsx base64) which the browser turns into a download. api() throws on any failure
+  // (no contract, all-RFI 422, write error).
+  async function exportContractBom(appId, format) {
+    const label = format === 'xlsx' ? 'Excel' : 'CSV';
+    showToast(`Generating BOM ${label}…`, 'info');
+    try {
+      const res = await api('/api/contract/' + encodeURIComponent(appId) + '/export-bom/' + format, { method: 'POST' });
+      const body = res.encoding === 'base64' ? b64ToBytes(res.content || '') : (res.content || '');
+      const mime = format === 'xlsx'
+        ? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+        : 'text/csv';
+      const blob = new Blob([body], { type: mime });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url; a.download = res.filename || (appId + '-bom.' + format);
+      document.body.appendChild(a); a.click(); a.remove();
+      setTimeout(() => URL.revokeObjectURL(url), 4000);
+      showToast(`BOM ${label} saved & downloaded — ${res.filename || appId + '-bom.' + format}`, 'ok');
+    } catch (e) {
+      showToast(`BOM ${label} export failed: ` + (e && e.message ? e.message : String(e)), 'warn');
+    }
+  }
+
+  // Decode a base64 string into a Uint8Array for a binary download (the .xlsx bytes).
+  function b64ToBytes(b64) {
+    const bin = atob(b64);
+    const out = new Uint8Array(bin.length);
+    for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
+    return out;
+  }
+
   // Send to Tekla ▸ — create native parts in the OPEN Tekla model from the approved takeoff. Needs
   // Tekla running with a model; when it's not, the server returns a clear needsTekla state (api()
   // throws with err.body.needsTekla) — surfaced as an informational nudge, not a hard error.

package/dist/web/steel-editor.html

@@ -68,6 +68,15 @@
  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}
+ /* 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}
@@ -215,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>
@@ -438,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
@@ -750,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();
@@ -1177,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;
@@ -1239,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;}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floless/app",
-  "version": "0.49.0",
+  "version": "0.51.0",
   "type": "module",
   "description": "Thin localhost host for floless.app — serves web/ and shells the aware CLI. No engine, no LLM.",
   "bin": {
@@ -39,6 +39,7 @@
     "rcedit": "^5.0.2",
     "tsx": "^4.19.0",
     "typescript": "^5.6.0",
+    "write-excel-file": "^4.1.1",
     "yaml": "^2.9.0"
   }
 }