@floless/app 0.59.0 → 0.60.0

package/dist/skills/floless-app-vectorize/scripts/extract_pdf.py

@@ -0,0 +1,240 @@
+#!/usr/bin/env python3
+"""Deterministic vector-PDF -> drawing.vector/v1 extractor (compose-time, no LLM).
+
+One PyMuPDF pass per page: every page.get_drawings() path becomes a geometry element
+(SVG `d` in DISPLAY coords) and every page.get_text("dict") span becomes a text element
+(baseline origin, real size, rotation). Emits a RAW drawing.vector/v1 contract ready to
+PUT to /api/contract/vectorize — the server's postProcess handles endpoint-snap, dedupe
+and layer derivation, but per-element ids are REQUIRED by the PUT schema, so this script
+assigns them (e1.. per sheet, s1.. sheets).
+
+Usage:
+
+  python extract_pdf.py drawing.pdf [more.pdf ...] [--out contract.json]
+
+The script forces UTF-8 on its own stdout/stderr (drawings contain glyphs like a diameter
+sign that crash Windows cp1250 consoles), so no shell-specific env setup is needed.
+
+Requires PyMuPDF (pip install pymupdf). A raster-only page (scan / photo / hand sketch)
+yields no geometry — that is the Slice-2 vision path, NOT this script's job; the caller
+must tell the user honestly instead of tracing pixels.
+"""
+
+import argparse
+import hashlib
+import json
+import math
+import os
+import sys
+from datetime import datetime, timezone
+
+import fitz  # PyMuPDF
+
+
+def fmt(v):
+    """Compact numeric formatting for SVG path data."""
+    return f"{round(v, 2):g}"
+
+
+def rgb_hex(c):
+    """PyMuPDF float RGB tuple -> #rrggbb, or None."""
+    if c is None:
+        return None
+    r, g, b = (max(0, min(255, round(v * 255))) for v in c)
+    return f"#{r:02x}{g:02x}{b:02x}"
+
+
+def int_hex(c):
+    """get_text span colour int (sRGB) -> #rrggbb."""
+    return f"#{(c or 0) & 0xFFFFFF:06x}"
+
+
+def path_to_element(pth, m):
+    """One get_drawings() path -> a geometry element dict (or None if it draws nothing).
+
+    Item -> SVG mapping: 'l' segments chain into M/L, 'c' cubic beziers into C,
+    're' rects and 'qu' quads into closed 4-corner polygons. Every point is mapped
+    through the page's rotation_matrix so a rotated page lands in display space.
+    """
+    d, pts, kinds = [], [], set()
+    cur = None
+    breaks = 0  # subpath breaks after the first M (disqualifies pts[])
+
+    def moveto(p):
+        nonlocal cur, breaks
+        if cur is not None:
+            breaks += 1
+        d.append(f"M{fmt(p.x)} {fmt(p.y)}")
+        pts.append([round(p.x, 2), round(p.y, 2)])
+        cur = p
+
+    def cont(p):
+        return cur is not None and abs(cur.x - p.x) < 1e-4 and abs(cur.y - p.y) < 1e-4
+
+    for item in pth["items"]:
+        op = item[0]
+        if op == "l":
+            p1, p2 = item[1] * m, item[2] * m
+            if abs(p1.x - p2.x) < 1e-6 and abs(p1.y - p2.y) < 1e-6:
+                continue  # zero-length
+            if not cont(p1):
+                moveto(p1)
+            d.append(f"L{fmt(p2.x)} {fmt(p2.y)}")
+            pts.append([round(p2.x, 2), round(p2.y, 2)])
+            cur = p2
+            kinds.add("l")
+        elif op == "c":
+            p1, c1, c2, p2 = (item[i] * m for i in (1, 2, 3, 4))
+            if not cont(p1):
+                moveto(p1)
+            d.append(f"C{fmt(c1.x)} {fmt(c1.y)} {fmt(c2.x)} {fmt(c2.y)} {fmt(p2.x)} {fmt(p2.y)}")
+            cur = p2
+            kinds.add("c")
+        elif op in ("re", "qu"):
+            q = item[1].quad if op == "re" else item[1]
+            ul, ur, lr, ll = (p * m for p in (q.ul, q.ur, q.lr, q.ll))
+            if cur is not None:
+                breaks += 1
+            d.append(
+                f"M{fmt(ul.x)} {fmt(ul.y)} L{fmt(ur.x)} {fmt(ur.y)} "
+                f"L{fmt(lr.x)} {fmt(lr.y)} L{fmt(ll.x)} {fmt(ll.y)} Z"
+            )
+            cur = None
+            kinds.add(op)
+
+    if not d:
+        return None
+    closed = bool(pth.get("closePath"))
+    if closed and not d[-1].endswith("Z"):
+        d.append("Z")
+
+    kind = "spline" if "c" in kinds else ("line" if kinds == {"l"} and len(pts) == 2 else "polyline")
+    el = {"kind": kind}
+    if kinds == {"l"} and breaks == 0 and len(pts) >= 2:
+        # Continuous straight-line chain: emit VERTICES ONLY (no `d`). Renderers rebuild the path
+        # from pts, and the server's endpoint-snap edits pts — a `d` alongside would shadow the
+        # snapped geometry (renderers prefer `d` when both are present).
+        if closed and pts[0] != pts[-1]:
+            pts.append(list(pts[0]))  # make the closing edge explicit — pts paths carry no Z
+        el["pts"] = pts
+        if len(pts) > 2:
+            el["kind"] = "polyline"
+    else:
+        el["d"] = " ".join(d)
+    color = rgb_hex(pth.get("color")) or rgb_hex(pth.get("fill"))
+    if color is None:
+        return None  # neither stroked nor filled -> draws nothing
+    el["color"] = color
+    if pth.get("width"):
+        el["w"] = round(pth["width"], 3)
+    dashes = (pth.get("dashes") or "").strip()
+    if dashes and dashes not in ("[] 0", "[]"):
+        el["dashed"] = True
+    if pth.get("layer"):
+        el["layer"] = pth["layer"]
+    return el
+
+
+def text_elements(page, m):
+    """get_text('dict') spans -> text elements with baseline origin, size, rotation, colour."""
+    rot = fitz.Matrix(m.a, m.b, m.c, m.d, 0, 0)  # rotation part only (for direction vectors)
+    out = []
+    for block in page.get_text("dict")["blocks"]:
+        if block.get("type") != 0:
+            continue
+        for line in block["lines"]:
+            dv = fitz.Point(line["dir"]) * rot
+            angle = round(math.degrees(math.atan2(dv.y, dv.x)), 2)
+            for span in line["spans"]:
+                if not span["text"].strip():
+                    continue
+                origin = fitz.Point(span["origin"]) * m
+                bbox = fitz.Rect(span["bbox"]) * m
+                bbox.normalize()
+                el = {
+                    "kind": "text",
+                    "text": span["text"],
+                    "origin": [round(origin.x, 2), round(origin.y, 2)],
+                    "bbox": [round(v, 2) for v in (bbox.x0, bbox.y0, bbox.x1, bbox.y1)],
+                    "size": round(span["size"], 2),
+                    "color": int_hex(span.get("color")),
+                }
+                if span.get("font"):
+                    el["font"] = span["font"]
+                if abs(angle) > 0.01:
+                    el["angle"] = angle
+                out.append(el)
+    return out
+
+
+def extract(paths):
+    sheets = []
+    for path in paths:
+        doc = fitz.open(path)
+        stem = os.path.splitext(os.path.basename(path))[0]
+        for pno in range(doc.page_count):
+            page = doc[pno]
+            m = page.rotation_matrix  # unrotated -> display space; page.rect is already display
+            elements = []
+            for pth in page.get_drawings():
+                el = path_to_element(pth, m)
+                if el:
+                    elements.append(el)
+            elements.extend(text_elements(page, m))
+            for i, el in enumerate(elements):
+                el["id"] = f"e{i + 1}"  # PUT schema requires ids; stable in document order
+            sheets.append({
+                "id": f"s{len(sheets) + 1}",
+                "label": f"{stem} p{pno + 1}",
+                "page": {"w": round(page.rect.width, 2), "h": round(page.rect.height, 2)},
+                "elements": elements,
+            })
+        doc.close()
+
+    first = paths[0]
+    name = os.path.basename(first) + (f" (+{len(paths) - 1} more)" if len(paths) > 1 else "")
+    return {
+        "type": "drawing.vector/v1",
+        "units": "pt",  # no transform emitted -> display space (PDF points) is world 1:1
+        "source": {
+            "name": name,
+            "path": os.path.abspath(first),
+            "kind": "pdf",
+            "sha256": hashlib.sha256(open(first, "rb").read()).hexdigest(),
+            "read_at": datetime.now(timezone.utc).isoformat(timespec="seconds"),
+            "extractor": f"pymupdf@compose-time ({getattr(fitz, 'VersionBind', '?')})",
+        },
+        "sheets": sheets,
+    }
+
+
+def main():
+    # Self-sufficient UTF-8 output regardless of console codepage (Windows cp1250 crashes on Ø/—).
+    for stream in (sys.stdout, sys.stderr):
+        try:
+            stream.reconfigure(encoding="utf-8")
+        except AttributeError:
+            pass
+    ap = argparse.ArgumentParser(description=__doc__)
+    ap.add_argument("pdfs", nargs="+", help="vector PDF file(s) to extract")
+    ap.add_argument("--out", help="write the contract JSON here instead of stdout")
+    args = ap.parse_args()
+
+    contract = extract(args.pdfs)
+    total = sum(len(s["elements"]) for s in contract["sheets"])
+    if total == 0:
+        print(
+            "WARNING: no vector geometry or text found — this looks like a raster-only PDF "
+            "(scan/photo). The deterministic path cannot read it; do not fabricate linework.",
+            file=sys.stderr,
+        )
+    if args.out:
+        with open(args.out, "w", encoding="utf-8") as f:
+            json.dump(contract, f, ensure_ascii=False)
+        print(f"{args.out}: {len(contract['sheets'])} sheet(s), {total} element(s)", file=sys.stderr)
+    else:
+        json.dump(contract, sys.stdout, ensure_ascii=False)
+
+
+if __name__ == "__main__":
+    main()

package/dist/templates/vectorize.flo

@@ -0,0 +1,61 @@
+app:           vectorize
+version:       0.1.0
+display-name:  Vectorize
+publisher:     floless
+description: |
+  Turn any drawing — a sketch, a PDF, a photo — into clean, editable 2D vectors. Your terminal AI
+  reads the drawing ONCE at compose time (a deterministic PyMuPDF pass — no LLM) and bakes it into a
+  drawing.vector contract; double-click the node to open the 2D vector editor, where you pan and zoom,
+  toggle what's shown, flag weak traces, and export SVG. Attach a drawing and use "Re-read & re-bake ▸"
+  (or ask your terminal AI) to vectorize your own; the deterministic run just re-renders a short summary
+  of what was read. Ships with a tiny example so it works out of the box.
+exposes-as-agent: false
+# Workflow changelog (FloLess-published). Newest first; the app shows entries newer than the installed
+# version when offering an update. Plain-English — it surfaces to the user.
+changelog:
+  - version: 0.1.0
+    summary: Vectorize a drawing into clean 2D linework you can edit and export
+inputs:
+  drawing:
+    type: image
+    widget: file
+    accept: [pdf, png, jpg]
+    read-strategy: bake
+    description: A drawing to vectorize — read by your terminal AI into clean 2D vectors; swap to re-read & re-bake.
+requires:
+  - html-report@0.2.x
+layout: linear
+nodes:
+  # ── node 1: read — vectorize the drawing into clean 2D linework ───────────────
+  # This is where your drawing becomes editable vectors. Your terminal AI reads the
+  # attached drawing once (a deterministic PyMuPDF pass — no LLM) and bakes every line,
+  # curve and label into the contract. Double-click this node to open the 2D vector
+  # editor: pan and zoom the drawing, toggle Lines / Curves / Text, flag any weak traces,
+  # and Export SVG. `contract` tells FloLess which editor to open; `takeoff` is the single
+  # source the editor, Approve and the run all read. It ships with a tiny EXAMPLE so it
+  # renders out of the box — "Re-read & re-bake ▸" replaces it with your own drawing. The
+  # deterministic run re-renders the short summary below.
+  - id: read
+    agent: html-report
+    command: render
+    config:
+      contract: drawing.vector/v1
+      takeoff:
+        type: drawing.vector/v1
+        units: mm
+        source: { name: "Example — sample detail (not your drawing)" }
+        sheets:
+          - id: s1
+            label: "Sample detail"
+            page: { w: 300, h: 200 }
+            elements:
+              - { id: e1, kind: polyline, d: "M60 50 H240 V150 H60 Z", color: "#334155", w: 1.4 }
+              - { id: e2, kind: line, d: "M150 30 L150 170", color: "#94a3b8", w: 0.8, dashed: true }
+              - { id: e3, kind: line, d: "M60 100 H240", color: "#94a3b8", w: 0.8 }
+              - { id: t1, kind: text, text: "SAMPLE DETAIL", size: 11, origin: [66, 44], color: "#334155" }
+              - { id: t2, kind: text, text: "PL 13mm", size: 9, origin: [98, 96], color: "#334155" }
+      title: "Vectorized drawing"
+      data:
+        - { Kind: Lines, Count: 3 }
+        - { Kind: Text, Count: 2 }
+connections: []

package/dist/web/aware.js

@@ -1752,9 +1752,9 @@
   function openContractEditor(appId, type) {
     const r = window.CONTRACT_RENDERERS && window.CONTRACT_RENDERERS[type];
     if (!r) return false;
-    // The editor bakes the .lock on Approve — that control belongs to the contract editor, not the
-    // filter view (which has its own Save). Make sure it's visible here (openFilterView hides it).
-    const ap0 = document.getElementById('contract-editor-approve'); if (ap0) ap0.hidden = false;
+    // The editor bakes the .lock on Approve — that control belongs to an editable contract editor, not
+    // the filter view (own Save) nor a view-only renderer. Show it unless the renderer is viewOnly.
+    const ap0 = document.getElementById('contract-editor-approve'); if (ap0) ap0.hidden = !!r.viewOnly;
     $contractEditorTitle.replaceChildren(
       Object.assign(document.createElement('span'), { textContent: appId, style: 'color:var(--text);font-weight:600' }),
       Object.assign(document.createElement('span'), { textContent: ' · ' + type, style: 'color:var(--text-muted)' }),

package/dist/web/renderers.js

@@ -13,6 +13,12 @@ window.CONTRACT_RENDERERS = {
   'steel.takeoff/v1': {
     editorUrl: (appId) => '/steel-editor.html?app=' + encodeURIComponent(appId),
   },
+  'drawing.vector/v1': {
+    editorUrl: (appId) => '/vector-editor.html?app=' + encodeURIComponent(appId),
+    // View-only for now: the vector editor renders + exports SVG but has no Save/edit path yet (the
+    // edit/re-bake flow is a later slice), so the shell hides its Approve button (see openContractEditor).
+    viewOnly: true,
+  },
 };
 
 // Return the contract type string declared on a node, or null when none.

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){