npm - @floless/app - Versions diffs - 0.60.0 → 0.62.0 - Mend

@floless/app 0.60.0 → 0.62.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/floless-server.cjs +227 -5
package/dist/schemas/drawing.vector.v1.schema.json +93 -5
package/dist/skills/floless-app-vectorize/SKILL.md +68 -23
package/dist/skills/floless-app-vectorize/references/vision-inputs.template.json +40 -0
package/dist/skills/floless-app-vectorize/scripts/vision_to_contract.py +151 -0
package/dist/templates/vectorize.flo +21 -13
package/dist/web/aware.js +12 -8
package/dist/web/renderers.js +4 -3
package/dist/web/steel-3d-view.js +48 -3
package/dist/web/steel-editor.html +341 -9
package/dist/web/vector-editor.html +184 -7
package/package.json +1 -1

package/dist/web/vector-editor.html CHANGED Viewed

@@ -47,6 +47,27 @@
   #zoombar #zpct{min-width:42px;text-align:right;color:var(--mut);font-variant-numeric:tabular-nums}
   #zoombar .ghost{height:24px;padding:0 8px;background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:5px;font-size:11px}
   #zoombar .ghost:hover{color:var(--text);border-color:var(--brand)}
+  /* Auto-save chip — same states/colors as steel-editor's #saveStat. */
+  #saveStat{color:var(--mut);font-size:12px}
+  #saveStat.dirty{color:#fbbf24} #saveStat.err{color:#f87171}
+  /* Weak-trace review list (inner scroll box — inherits the themed scrollbar rules above). */
+  #weakList{max-height:280px;overflow:auto;display:flex;flex-direction:column;gap:2px;margin-top:4px}
+  .wrow{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px;font-size:12px}
+  .wrow:hover{background:var(--line)}
+  .wrow .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
+  .wrow .pct{color:#f59e0b;font-variant-numeric:tabular-nums;font-size:11px}
+  .wrow button{height:22px;padding:0 8px;font-size:11px;border-radius:5px}
+  .wrow .ghost{background:transparent;border:1px solid var(--line);color:var(--mut)}
+  .wrow .ghost:hover{color:var(--text);border-color:var(--brand);background:transparent}
+  .wrow .danger{background:#7f1d1d;border-color:#991b1b;color:#fecaca}
+  .wrow .danger:hover{background:#991b1b}
+  .wrow.flash{background:var(--line)}
+  #svg .locfl{stroke:var(--brand)!important} #svg text.locfl{fill:var(--brand)!important}
+  /* Single-level Undo toast (styled modal pattern — never a native dialog). */
+  #toast{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 12px;box-shadow:0 4px 14px rgba(0,0,0,.45);z-index:6;color:var(--text)}
+  #toast.show{display:flex}
+  #toast .ghost{height:24px;padding:0 8px;background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:5px;font-size:11px}
+  #toast .ghost:hover{color:var(--text);border-color:var(--brand)}
 </style>
 </head>
 <body>
@@ -55,6 +76,7 @@
     <span class="stat" id="title">—</span>
     <span class="spacer"></span>
     <span class="stat"><b id="nEl">0</b> elements · <b id="nTx">0</b> text</span>
+    <span id="saveStat" title="Edits save to the app's contract automatically" hidden>Auto-save on</span>
     <button class="primary" id="exportBtn" disabled>Export SVG</button>
   </header>
   <div id="wrap">
@@ -66,6 +88,7 @@
         <input type="range" id="zoom" min="10" max="800" value="100" aria-label="Zoom">
         <span id="zpct">100%</span>
       </div>
+      <div id="toast" role="status"><span id="toastMsg"></span><button class="ghost" id="undoBtn">Undo</button></div>
     </div>
     <aside>
       <div>
@@ -83,7 +106,9 @@
       <div>
         <h3>Confidence</h3>
         <label class="ck" id="weakRow" hidden><input type="checkbox" id="weakOnly"><span>Isolate weak traces</span><span class="ct" id="cWeak">0</span></label>
-        <div class="muted" id="weakNote">No weak traces — read deterministically.</div>
+        <div class="muted" id="revLine" hidden>Reviewed 0/0</div>
+        <div id="weakList" hidden></div>
+        <div class="muted" id="weakNote">No weak traces — traced exactly from the vector PDF (no AI involved).</div>
       </div>
     </aside>
   </div>
@@ -100,6 +125,12 @@
   let sheet = null;
   let view = { x: 0, y: 0, w: 100, h: 100 };
+  let C = null; // the full contract (PUT body) — `sheet` is a reference into it
+  // Edits are only possible against the app's live contract store; a static ?src= view stays read-only.
+  const editable = !!app && src.indexOf('/api/contract/') === 0;
+  let initialWeak = 0; // M in "Reviewed N/M" — the weak count when the drawing loaded
+  let lastDeleted = null; // single-level undo: { el, i } of the last deleted trace
+  let toastT = 0;
   function showState(msg) { $('stateMsg').textContent = msg; $('state').classList.add('show'); $('state').querySelector('.spin').style.display = msg ? 'none' : ''; }
   function hideState() { $('state').classList.remove('show'); }
@@ -257,20 +288,166 @@
     }
   }
+  // ── auto-save (mirrors steel-editor: debounce-chip + flushContract for the shell's Approve) ──
+  let saveT = 0;
+  function setSaved(state) {
+    if (!editable) return;
+    const el = $('saveStat'); el.hidden = false; el.classList.remove('dirty', 'err');
+    if (state === 'dirty') { el.classList.add('dirty'); el.textContent = 'Saving…'; }
+    else if (state === 'err') { el.classList.add('err'); el.textContent = 'Save failed'; }
+    else el.textContent = 'Saved';
+  }
+  // PUT the full contract as the server-side draft — the copy Approve bakes. Saves are
+  // SERIALIZED through a generation-checked queue: overlapping PUTs could land out of order
+  // (last-write-wins on the server), letting an older in-flight snapshot overwrite a newer one
+  // right before Approve. Each queued write stringifies C at send time, and a write that has
+  // been superseded by a newer request skips itself — so the queue's tail always leaves the
+  // LATEST state on the server. Returns the queue tail (ok boolean).
+  let saveGen = 0;
+  let saveQueue = Promise.resolve(true);
+  async function doPut() {
+    try {
+      const res = await fetch('/api/contract/' + encodeURIComponent(app), {
+        method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify(C),
+      });
+      setSaved(res.ok ? 'ok' : 'err');
+      if (!res.ok) console.error('server save rejected (' + res.status + ')', await res.text().catch(() => ''));
+      return res.ok;
+    } catch (e) { setSaved('err'); console.error('server save failed', e); return false; }
+  }
+  function persistServer() {
+    if (!editable || !C) return Promise.resolve(true);
+    const gen = ++saveGen;
+    saveQueue = saveQueue.then(() => (gen === saveGen ? doPut() : true)); // superseded → the newer write carries C
+    return saveQueue;
+  }
+  function scheduleSave() { if (!editable) return; setSaved('dirty'); clearTimeout(saveT); saveT = setTimeout(persistServer, 500); }
+  // The shell's Approve button awaits this before baking — throw so a rejected save aborts the bake.
+  window.flushContract = async function flushContract() {
+    if (!editable) return;
+    clearTimeout(saveT);
+    const ok = await persistServer(); // queued behind any in-flight write → latest state, in order
+    if (!ok) throw new Error('Save failed — the edited contract was rejected; fix it before Approve');
+  };
+  // ── weak-trace review: Accept clears the flag (absent = trusted), Delete removes with 1-level Undo ──
+  function isWeak(el) { return el.confidence != null && el.confidence < WEAK; }
+  function elLabel(el) {
+    if (el.kind === 'text') return '“' + (el.text || '') + '”';
+    return (el.kind || 'trace') + ' · ' + (el.id || '?');
+  }
+  function acceptEl(id) {
+    const el = sheet.elements.find((e) => e.id === id);
+    if (!el) return;
+    delete el.confidence; // schema: absent = trusted — cleaner than a magic 1.0
+    afterEdit();
+  }
+  function deleteEl(id) {
+    const i = sheet.elements.findIndex((e) => e.id === id);
+    if (i < 0) return;
+    // Prune the id from any group memberships too — a dangling groups[].elementIds reference
+    // would survive PUT/Approve (the schema only checks it's a string array). Remember each
+    // pruned spot so Undo restores memberships along with the element.
+    const memberships = [];
+    for (const g of sheet.groups || []) {
+      const gi = (g.elementIds || []).indexOf(id);
+      if (gi >= 0) { memberships.push({ g, gi }); g.elementIds.splice(gi, 1); }
+    }
+    lastDeleted = { el: sheet.elements[i], i, memberships };
+    sheet.elements.splice(i, 1);
+    showToast('Trace deleted');
+    afterEdit();
+  }
+  function undoDelete() {
+    if (!lastDeleted) return;
+    sheet.elements.splice(Math.min(lastDeleted.i, sheet.elements.length), 0, lastDeleted.el);
+    for (const m of lastDeleted.memberships) m.g.elementIds.splice(Math.min(m.gi, m.g.elementIds.length), 0, lastDeleted.el.id);
+    lastDeleted = null;
+    hideToast();
+    afterEdit();
+  }
+  function showToast(msg) {
+    $('toastMsg').textContent = msg;
+    $('toast').classList.add('show');
+    clearTimeout(toastT); toastT = setTimeout(hideToast, 6000);
+  }
+  function hideToast() { $('toast').classList.remove('show'); clearTimeout(toastT); }
+  $('undoBtn').addEventListener('click', undoDelete);
+  function buildWeakList() {
+    const box = $('weakList');
+    while (box.firstChild) box.removeChild(box.firstChild);
+    const weak = editable ? sheet.elements.filter(isWeak) : [];
+    box.hidden = weak.length === 0;
+    for (const el of weak) {
+      const row = document.createElement('div'); row.className = 'wrow'; row.dataset.id = el.id || '';
+      const lbl = document.createElement('span'); lbl.className = 'lbl'; lbl.textContent = elLabel(el);
+      lbl.title = 'Show this trace on the drawing';
+      lbl.addEventListener('click', () => locateOnCanvas(el.id));
+      const pct = document.createElement('span'); pct.className = 'pct'; pct.textContent = Math.round((el.confidence || 0) * 100) + '%';
+      const ok = document.createElement('button'); ok.className = 'ghost'; ok.textContent = 'Accept';
+      ok.title = 'Mark this trace as correct — clears its low-confidence flag.';
+      ok.addEventListener('click', () => acceptEl(el.id));
+      const del = document.createElement('button'); del.className = 'danger'; del.textContent = 'Delete';
+      del.title = 'Remove this trace from the drawing (Undo available).';
+      del.addEventListener('click', () => deleteEl(el.id));
+      row.append(lbl, pct, ok, del); box.appendChild(row);
+    }
+  }
+  // Locate: list row → flash the trace on the canvas; canvas click on a weak trace → flash its row.
+  function locateOnCanvas(id) {
+    const node = [...svg.children].find((n) => n.dataset.id === id);
+    if (!node) return;
+    node.classList.add('locfl');
+    setTimeout(() => node.classList.remove('locfl'), 1200);
+  }
+  svg.addEventListener('click', (e) => {
+    const id = e.target && e.target.dataset && e.target.dataset.id;
+    if (!id || !e.target.classList.contains('weak')) return;
+    const row = [...document.querySelectorAll('#weakList .wrow')].find((r) => r.dataset.id === id);
+    if (!row) return;
+    row.scrollIntoView({ block: 'nearest' });
+    row.classList.add('flash');
+    setTimeout(() => row.classList.remove('flash'), 1200);
+  });
+  // Header stats + Confidence section (counts, note wording, Reviewed N/M) — rerun after every edit.
+  function refreshStats() {
+    const c = counts();
+    $('nEl').textContent = sheet.elements.length; $('nTx').textContent = c.text;
+    $('cLines').textContent = c.lines; $('cCurves').textContent = c.curves; $('cText').textContent = c.text;
+    $('cWeak').textContent = c.weak;
+    // The zero-weak wording must match HOW the drawing was read: after a vision read the honest
+    // message is "scored above the bar, still spot-check", never the exact-extraction claim
+    // (the extractor field is the provenance; absent/non-vision = the no-AI deterministic path).
+    const visionRead = /^vision/.test((C && C.source && C.source.extractor) || '');
+    $('weakNote').textContent = c.weak
+      ? (c.weak + ' trace' + (c.weak === 1 ? '' : 's') + ' scored below ' + WEAK + ' confidence.')
+      : (visionRead ? 'No weak traces — every element scored above ' + WEAK + '. Spot-check against the original.' : 'No weak traces — traced exactly from the vector PDF (no AI involved).');
+    $('weakRow').hidden = c.weak === 0; // hide the filter when there's nothing to filter (not disabled)
+    if (c.weak === 0) $('weakOnly').checked = false; // nothing left to isolate — release the filter
+    // Reviewed N/M — M is the weak count at load; Accept and Delete both count as reviewed.
+    const reviewed = Math.max(0, initialWeak - c.weak);
+    $('revLine').hidden = !editable || initialWeak === 0;
+    $('revLine').textContent = c.weak === 0 && initialWeak > 0
+      ? 'All ' + initialWeak + ' reviewed'
+      : 'Reviewed ' + reviewed + '/' + initialWeak;
+  }
+  function afterEdit() { refreshStats(); render(); buildWeakList(); scheduleSave(); }
   function load(contract) {
     if (!contract || !Array.isArray(contract.sheets) || !contract.sheets.length) { showState('This app has no vectorized drawing yet. Drop a PDF and re-bake to read one.'); return; }
+    C = contract;
     sheet = contract.sheets[contract.active || 0] || contract.sheets[0];
     if (!sheet || !Array.isArray(sheet.elements)) { showState('The drawing has no elements.'); return; }
-    const c = counts();
+    initialWeak = sheet.elements.filter(isWeak).length;
     const name = (contract.source && contract.source.name) ? contract.source.name : (sheet.label || 'drawing');
     $('title').textContent = name;
     document.title = 'Vectorize — ' + name;
-    $('nEl').textContent = sheet.elements.length; $('nTx').textContent = c.text;
-    $('cLines').textContent = c.lines; $('cCurves').textContent = c.curves; $('cText').textContent = c.text;
-    $('cWeak').textContent = c.weak;
-    $('weakNote').textContent = c.weak ? (c.weak + ' trace' + (c.weak === 1 ? '' : 's') + ' below ' + WEAK + ' confidence.') : 'No weak traces — read deterministically.';
-    $('weakRow').hidden = c.weak === 0; // hide the filter when there's nothing to filter (not disabled)
+    if (editable) setSaved('ok');
+    refreshStats();
     buildLayers();
+    buildWeakList();
     render(); fit(); $('exportBtn').disabled = false; hideState();
   }

package/package.json CHANGED Viewed

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