Add Contribute button, compact mobile header, no auto-select on element add, smooth touch dragging

[Copilot]

Four UX improvements requested for the wireframe studio: a Contribute button in the header, a more compact mobile header bar, property panel no longer auto-opening when elements are placed, and lag-free touch dragging on mobile.

Changes

• Contribute button — Added 🛠 Contribute link to the header toolbar alongside the existing Collaborate button, pointing to the mockuper repo.

• Compact mobile header — Header now stays single-line on mobile (flex-wrap: nowrap). Toolbar scrolls horizontally (overflow-x: auto, -webkit-overflow-scrolling: touch). Reduced button padding, font sizes, and logo size at ≤768px.

• No auto-select on element add — Removed this.selectedElementId = newElement.id from both addElement() and addElementAtPosition() in StateManager. Elements are placed without selection, so the right-side properties panel stays closed.

• Smooth light-touch dragging — Previously, every touchmove/mousemove called state.updateElement() → notify() → full DOM re-render (60+ times/second). Now Canvas updates the element's DOM style directly during the gesture and flushes to state only once on touchend/mouseup:

// During drag: direct DOM update, no re-render
if (this.dragElementNode) {
    this.dragElementNode.style.left = newX + 'px';
    this.dragElementNode.style.top = newY + 'px';
}
// On release: single state update + history save
this.state.updateElement(this.state.selectedElementId, { x: this.dragCurrentX, y: this.dragCurrentY });
this.state.saveHistory();

• Fix click-to-add components — Pre-existing bug where e.target.classList.contains('component-btn') failed when clicking inner text/icon children. Changed to e.target.closest('.component-btn').

Screenshots

Desktop — element added without property panel opening:

Desktop — header with Contribute button:

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.