Canvas UX: draggable boxes from anywhere + click-to-edit desc; hide empty hint

app.py

@@ -423,7 +423,9 @@ SCRIPT = r"""
     NS.el.ratios.style.display = S.step===1?'flex':'none';
   }
   function renderAll(){ layoutBoard(); renderBoxes(); renderSummary(); renderTable(); renderSteps();
-    NS.el.ratioChips.forEach(c=>c.classList.toggle('sel', c.dataset.r===S.aspect)); syncState(); }
+    NS.el.ratioChips.forEach(c=>c.classList.toggle('sel', c.dataset.r===S.aspect));
+    const hint=NS.el.board.querySelector('.hint'); if(hint) hint.style.display=(!S.rendered && S.elements.length===0)?'flex':'none';
+    syncState(); }
   function esc(s){return (s||'').replace(/[&<>]/g,m=>({'&':'&amp;','<':'&lt;','>':'&gt;'}[m]));}
 
   function select(e){ sel=e; NS.el.board.querySelectorAll('.box').forEach(d=>
@@ -437,9 +439,18 @@ SCRIPT = r"""
   function wireBox(d,e){
     const idEl=d.querySelector('.id'), descEl=d.querySelector('.desc');
     d.addEventListener('mousedown',ev=>{
-      if(ev.target.classList.contains('h')||ev.target.classList.contains('rm')||
-         ev.target.isContentEditable) { select(e); return; }
-      ev.preventDefault(); select(e); startMove(ev,e,d);
+      if(ev.target.classList.contains('h')||ev.target.classList.contains('rm')||ev.target.classList.contains('id')) { select(e); return; }
+      if(ev.target.classList.contains('desc') && document.activeElement===ev.target) return; // editing: allow caret
+      select(e); ev.preventDefault();
+      const sx=ev.clientX, sy=ev.clientY; let moved=false; const isDesc=ev.target.classList.contains('desc');
+      const b=e.bbox.slice(); const p=px2norm(ev); const oy=p[0]-b[0], ox=p[1]-b[1];
+      const w=b[3]-b[1], h=b[2]-b[0];
+      function mv(ev2){ if(!moved && Math.abs(ev2.clientX-sx)+Math.abs(ev2.clientY-sy)>3) moved=true;
+        if(moved){ const q=px2norm(ev2); let x0=clamp(q[1]-ox,0,1000-w), y0=clamp(q[0]-oy,0,1000-h);
+          e.bbox=[y0,x0,y0+h,x0+w]; posBox(d,e); liveMeta(e); } }
+      function up(){ document.removeEventListener('mousemove',mv); document.removeEventListener('mouseup',up);
+        if(moved) renderAll(); else if(isDesc) descEl.focus(); }
+      document.addEventListener('mousemove',mv); document.addEventListener('mouseup',up);
     });
     d.querySelectorAll('.h').forEach(h=>h.addEventListener('mousedown',ev=>{
       ev.preventDefault(); ev.stopPropagation(); select(e);