@floless/app 0.59.0 → 0.59.1

package/dist/floless-server.cjs

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

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

@@ -61,11 +61,12 @@
           "properties": {
             "w": { "type": "number", "minimum": 1 },
             "h": { "type": "number", "minimum": 1 },
-            "bg_b64": { "type": "string", "description": "Base64 JPEG of the page (title block excluded). CONFIDENTIAL — machine-local, stripped from the baked .flo (contract-bake.ts), never committed." }
+            "bg_b64": { "type": "string", "description": "Base64 JPEG of the page (title block excluded). CONFIDENTIAL — machine-local, stripped from the baked .flo (contract-bake.ts), never committed." },
+            "rect": { "type": "array", "items": { "type": "number" }, "minItems": 4, "maxItems": 4, "description": "[x0,y0,x1,y1] in vector-frame coords: the region `bg_b64` was clipped to, so the viewer registers the raster to it (not the whole page). Absent = covers the steelBbox (legacy)." }
           }
         },
         "steelBbox": { "type": "array", "items": { "type": "number" }, "minItems": 4, "maxItems": 4, "description": "[x0,y0,x1,y1] of the steel linework, for Zoom-to-steel." },
-        "mode": { "enum": ["thickness", "layer", "color", "thickness+layer", "thickness+color"], "description": "Active match mode." },
+        "mode": { "enum": ["", "thickness", "layer", "color", "thickness+layer", "thickness+color", "layer+color", "thickness+layer+color"], "description": "Active match dimensions, '+'-joined and AND-ed (canonical order: thickness, layer, color). Any combo of layer/thickness/color; \"\" = match nothing (all boxes unchecked — a valid saved state)." },
         "hide_title_block": { "type": "boolean" },
         "layers": {
           "type": "array",
@@ -142,7 +143,8 @@
           "properties": {
             "w": { "type": "number", "minimum": 1 },
             "h": { "type": "number", "minimum": 1 },
-            "bg_b64": { "type": "string", "description": "Base64 JPEG of this sheet (title block excluded). CONFIDENTIAL — stripped before bake, never committed." }
+            "bg_b64": { "type": "string", "description": "Base64 JPEG of this sheet (title block excluded). CONFIDENTIAL — stripped before bake, never committed." },
+            "rect": { "type": "array", "items": { "type": "number" }, "minItems": 4, "maxItems": 4, "description": "[x0,y0,x1,y1] in the same vector-frame coords as element `d` paths: the region `bg_b64` was clipped to. The viewer registers the raster to THIS rect (not the whole page) so it aligns 1:1 with the linework. Absent = the raster covers the steelBbox (legacy)." }
           }
         },
         "steelBbox": { "type": "array", "items": { "type": "number" }, "minItems": 4, "maxItems": 4, "description": "[x0,y0,x1,y1] of this sheet's steel linework, for Zoom-to-steel." },

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

@@ -80,10 +80,13 @@ native/display coords):
    pt>, color:<#rrggbb stroke>, d:<SVG path>, dashed:<bool> }`.
 2. **Text** — `page.get_text("dict")`: per span keep `{ kind:"text", layer:<OCG>, w:0, color:<#hex>,
    text:<string>, bbox:[x0,y0,x1,y1] }`.
-3. **Per-sheet entry** — push `{ sheet:<number>, title:<name?>, page:{ w, h, bg_b64 }, steelBbox,
+3. **Per-sheet entry** — push `{ sheet:<number>, title:<name?>, page:{ w, h, bg_b64, rect }, steelBbox,
    elements:[…] }` onto `filter.sheets`. `bg_b64` is a dimmed raster of THIS sheet's framing area
-   (**title block excluded** — CONFIDENTIAL, machine-local, never committed); `steelBbox` = the bbox
-   of this sheet's steel-layer elements (Zoom-to-steel).
+   (**title block excluded** — CONFIDENTIAL, machine-local, never committed). **`page.rect` = the exact
+   clip `[x0,y0,x1,y1]` you rendered `bg_b64` from, in the SAME display-space coords as the element `d`
+   paths** — the viewer registers the raster to `rect` (not the whole page), so it aligns 1:1 with the
+   linework. `w`/`h` stay the full display-space page size (the vectors' coordinate frame). `steelBbox`
+   = the bbox of this sheet's steel-layer elements (Zoom-to-steel).
 4. **Global facets (union across sheets)** — aggregate distinct `layers` / `thicknesses` / `colors`
    with a summed `count` each, ACROSS all sheets, into the top-level `filter.layers/thicknesses/colors`
    (NOT per-sheet). Round each element's `w` and the facet `w` the **same** way (matching is

package/dist/web/steel-filter-core.js

@@ -10,24 +10,37 @@
  *
  * Shapes:
  *   element : { kind:'line'|'text', layer:string, w:number, color:string, d?:string, text?:string, bbox?:number[], dashed?:boolean }
- *   mode    : 'thickness' | 'layer' | 'color' | 'thickness+layer' | 'thickness+color'
+ *   mode    : any '+'-joined combo of 'layer'/'thickness'/'color', AND-ed (e.g. 'thickness+layer').
+ *             '' = match nothing. Canonical order = MODE_ORDER (keeps legacy 'thickness+…' strings).
  *   sel     : { layers:Set<string>, thicknesses:Set<number>, colors:Set<string> }
  *   filter  : { mode, layers:[{name,count,steel?,drawable?,on?}], thicknesses:[{w,count,on?}], colors:[{hex,count,on?}], elements:[…] }
  */
 
-/** The active match predicate — does this element pass the current mode + selection? */
+/** Canonical dimension order for a mode string — keeps legacy 'thickness+layer'/'thickness+color'. */
+export const MODE_ORDER = ['thickness', 'layer', 'color'];
+
+/** The dimensions a mode activates, order-agnostic: 'thickness+layer' -> ['thickness','layer']. */
+export function modeDims(mode) {
+  return String(mode || '').split('+').filter((d) => MODE_ORDER.includes(d));
+}
+
+/** Build the canonical mode string from a set/list of checked dimensions. */
+export function canonicalMode(dims) {
+  const set = new Set(dims);
+  return MODE_ORDER.filter((d) => set.has(d)).join('+');
+}
+
+/**
+ * The active match predicate — an element passes when it matches EVERY checked dimension (AND).
+ * Zero checked dimensions match nothing (a valid, visible "0 shown" state, not a fall-through to all).
+ */
 export function matchesActive(el, mode, sel) {
-  const byLayer = () => sel.layers.has(el.layer);
-  const byThk = () => sel.thicknesses.has(el.w);
-  const byColor = () => sel.colors.has(el.color);
-  switch (mode) {
-    case 'thickness': return byThk();
-    case 'layer': return byLayer();
-    case 'color': return byColor();
-    case 'thickness+layer': return byThk() && byLayer();
-    case 'thickness+color': return byThk() && byColor();
-    default: return false;
-  }
+  const dims = modeDims(mode);
+  if (!dims.length) return false;
+  return dims.every((d) =>
+    d === 'layer' ? sel.layers.has(el.layer)
+      : d === 'thickness' ? sel.thicknesses.has(el.w)
+        : sel.colors.has(el.color));
 }
 
 /**
@@ -66,6 +79,24 @@ export function countShown(elements, mode, sel) {
   return n;
 }
 
+/**
+ * Where a sheet's background raster (`page.bg_b64`) maps, in the same vector-frame coords as the
+ * elements' `d` paths — so the raster registers 1:1 with the linework. The producer clips the raster
+ * to the framing area and records that clip in `page.rect` ([x0,y0,x1,y1]); the renderer places the
+ * <image> there (preserveAspectRatio="none") instead of stretching it across the whole page.
+ *
+ * ponytail: `steelBbox` fallback bridges pre-`rect` contracts (the producer clipped the raster to the
+ * steel bbox, so it aligns exactly). Upgrade path: drop it once every baked contract carries page.rect.
+ */
+export function bgRect(sheet) {
+  const pg = (sheet && sheet.page) || {};
+  const valid = (r) => Array.isArray(r) && r.length === 4 && r[2] - r[0] > 0 && r[3] - r[1] > 0;
+  // Try each candidate in order — a degenerate page.rect must NOT skip a valid steelBbox.
+  const r = valid(pg.rect) ? pg.rect : (valid(sheet && sheet.steelBbox) ? sheet.steelBbox : null);
+  if (r) return { x: r[0], y: r[1], w: r[2] - r[0], h: r[3] - r[1] };
+  return { x: 0, y: 0, w: pg.w || 0, h: pg.h || 0 };
+}
+
 /**
  * Write the live selection + mode back onto the filter block's `on` flags so it persists on the
  * contract (what Save PUTs, and what the reader reads). Mutates and returns `filter`.

package/dist/web/steel-filter.html

@@ -38,11 +38,9 @@ header select#sheetSel{font-weight:600;min-width:200px;max-width:320px}
 .opts label em{margin-left:auto;color:var(--mut);font-style:normal;font-size:11px}
 .opts .sw{width:12px;height:12px;border-radius:3px;flex:0 0 12px;border:1px solid var(--line)}
 .opts label.textlayer{opacity:.55;cursor:default}
-/* Fully custom checkbox/radio — the native unchecked widget is a white/grey square that breaks the dark baseline. */
-input[type=radio],input[type=checkbox]{-webkit-appearance:none;appearance:none;width:14px;height:14px;flex:none;border:1px solid #475569;border-radius:3px;background:transparent;cursor:pointer;margin:0;vertical-align:middle}
-input[type=radio]{border-radius:50%}
+/* Fully custom checkbox — the native unchecked widget is a white/grey square that breaks the dark baseline. */
+input[type=checkbox]{-webkit-appearance:none;appearance:none;width:14px;height:14px;flex:none;border:1px solid #475569;border-radius:3px;background:transparent;cursor:pointer;margin:0;vertical-align:middle}
 input[type=checkbox]:checked{background:var(--brand);border-color:var(--brand);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-5' stroke='%23fff' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
-input[type=radio]:checked{background:var(--brand);border-color:var(--brand);box-shadow:inset 0 0 0 3px var(--panel)}
 input:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
 .facet.dim{opacity:.4} .facet.dim .opts,.facet.dim .acts{pointer-events:none}
 .hint{color:var(--mut);font-size:11px;line-height:1.5}
@@ -82,12 +80,11 @@ footer{margin-top:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;bo
 <div id="app">
   <aside id="panel">
     <section id="modes">
-      <h2>Match mode</h2>
-      <label><input type="radio" name="mode" value="layer" checked /> Layer only</label>
-      <label><input type="radio" name="mode" value="thickness" /> Thickness only</label>
-      <label><input type="radio" name="mode" value="color" /> Color only</label>
-      <label><input type="radio" name="mode" value="thickness+layer" /> Thickness + Layer</label>
-      <label><input type="radio" name="mode" value="thickness+color" /> Thickness + Color</label>
+      <h2>Match on</h2>
+      <label><input type="checkbox" name="dim" value="layer" checked /> Layer</label>
+      <label><input type="checkbox" name="dim" value="thickness" /> Thickness</label>
+      <label><input type="checkbox" name="dim" value="color" /> Color</label>
+      <p class="hint">Checked criteria must all match (AND).</p>
     </section>
     <section class="facet" id="facet-layers">
       <h2>Layers <span class="acts"><button data-all="layers">all</button><button data-none="layers">none</button></span></h2>
@@ -128,7 +125,7 @@ footer{margin-top:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;bo
 </div>
 
 <script type="module">
-import { matchesActive, selFromFilter, eyedropperAdd, countShown, applySelToFilter, normalizeFilter } from './steel-filter-core.js';
+import { matchesActive, modeDims, canonicalMode, selFromFilter, eyedropperAdd, countShown, bgRect, applySelToFilter, normalizeFilter } from './steel-filter-core.js';
 
 const APP_ID = new URLSearchParams(location.search).get('app') || '';
 const SVGNS = 'http://www.w3.org/2000/svg';
@@ -183,9 +180,11 @@ function showEmpty(msg){
 }
 
 function initFromFilter(){
-  mode = F.mode || 'layer';
-  document.querySelector(`input[name=mode][value="${mode}"]`)?.setAttribute('checked','');
-  document.querySelectorAll('input[name=mode]').forEach(r => { r.checked = (r.value === mode); });
+  // Canonicalize on load (drops unknown tokens, orders dims) so a facet-only save writes a valid
+  // enum string; a saved-empty '' round-trips as '', while an absent mode defaults to 'layer'.
+  mode = (F.mode == null) ? 'layer' : canonicalMode(modeDims(F.mode));
+  const on = new Set(modeDims(mode));
+  document.querySelectorAll('input[name=dim]').forEach(cb => { cb.checked = on.has(cb.value); });
   // layer colours: steel layers vivid+distinct, others a single muted slate (GLOBAL facets)
   let si = 0;
   layerColor = {};
@@ -217,7 +216,16 @@ function setSheet(i){
   const sh = sheets[active] || {};
   const pg = (sh.page && sh.page.w > 0 && sh.page.h > 0) ? sh.page : { w: 1000, h: 1000 };  // guard empty page → no NaN viewBox
   svg.setAttribute('viewBox', `0 0 ${pg.w} ${pg.h}`);
-  if(pg.bg_b64){ bgImg.setAttribute('href', 'data:image/jpeg;base64,' + pg.bg_b64); bgImg.setAttribute('width', pg.w); bgImg.setAttribute('height', pg.h); bgImg.style.display=''; }
+  if(pg.bg_b64){
+    // Register the raster to its true extent (the framing-area clip), NOT the whole page — else a
+    // crop gets stretched over the full viewBox and floats off-scale from the vector linework.
+    const r = bgRect(sh);
+    bgImg.setAttribute('href', 'data:image/jpeg;base64,' + pg.bg_b64);
+    bgImg.setAttribute('x', r.x); bgImg.setAttribute('y', r.y);
+    bgImg.setAttribute('width', r.w); bgImg.setAttribute('height', r.h);
+    bgImg.setAttribute('preserveAspectRatio', 'none');
+    bgImg.style.display='';
+  }
   else bgImg.style.display = 'none';
   buildOverlay();
   base = { x: 0, y: 0, w: pg.w, h: pg.h }; vb = { ...base }; setVB();
@@ -309,13 +317,17 @@ function apply(){
     html += ' · <b>' + sa + '</b> of <b>' + ta + '</b> total (' + sheets.length + ' sheets)';
   }
   countEl.innerHTML = html;
-  document.getElementById('facet-layers').classList.toggle('dim', !(mode === 'layer' || mode === 'thickness+layer'));
-  document.getElementById('facet-thicknesses').classList.toggle('dim', !mode.startsWith('thickness'));
-  document.getElementById('facet-colors').classList.toggle('dim', !(mode === 'color' || mode === 'thickness+color'));
+  const dims = new Set(modeDims(mode));
+  document.getElementById('facet-layers').classList.toggle('dim', !dims.has('layer'));
+  document.getElementById('facet-thicknesses').classList.toggle('dim', !dims.has('thickness'));
+  document.getElementById('facet-colors').classList.toggle('dim', !dims.has('color'));
 }
 
 // --- modes + all/none ---
-document.querySelectorAll('input[name=mode]').forEach(r => r.addEventListener('change', () => { if(r.checked){ mode = r.value; markDirty(); apply(); } }));
+document.querySelectorAll('input[name=dim]').forEach(cb => cb.addEventListener('change', () => {
+  mode = canonicalMode([...document.querySelectorAll('input[name=dim]:checked')].map(c => c.value));
+  markDirty(); apply();
+}));
 document.querySelectorAll('[data-all]').forEach(b => b.addEventListener('click', () => setAllFacet(b.dataset.all, true)));
 document.querySelectorAll('[data-none]').forEach(b => b.addEventListener('click', () => setAllFacet(b.dataset.none, false)));
 function setAllFacet(facet, on){

package/package.json

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