feat(builder): improve drag-and-drop UX and responsive layout behavior

[lattln]

Overview

This PR enhances the drag-and-drop (DnD) experience across the builder while improving layout consistency and responsiveness. It introduces immediate interaction feedback, refines section-level behaviors, and standardizes width handling for a more predictable editing experience.

Additionally, it includes UI polish updates, TypeScript config cleanup, and minor workflow/documentation adjustments to improve developer experience and consistency.

---

🔧 What Changed

Drag-and-Drop (Core)

• Added onPressStart support for immediate press feedback (no movement threshold required)

• Improved drag interaction by preventing unintended text selection

• Refined section drag behavior:

  • Better combine vs reorder detection zones
  • Improved highlight logic for internal vs external drag contexts
  • Fixed self-hover edge cases to prevent incorrect drop states

• Introduced centralized clearDropState cleanup logic

Builder UI / UX

• Standardized builder layout with centered, max-width container

• Canvas now owns width constraints for consistent rendering

• Improved empty vs populated canvas rendering structure

• Enhanced selection UX:

  • Section selection chip is now clickable to clear state
  • Added truncation and width constraints to prevent layout breakage

• Drag handles updated with user-select-none for smoother UX

Demo / App Responsiveness

• Improved navbar wrapping and spacing for smaller screens
• Updated renderer controls for better alignment and responsiveness
• Renamed demo/docs project targets for clearer structure

TypeScript Config Cleanup

• Removed deprecated baseUrl across package tsconfig.lib.json files
• Applied consistent formatting via Nx

Repo / Workflow

• Strengthened formatting guardrails in Copilot instructions
• Added explicit rule to avoid npm ci in local workflows
• Minor PR title workflow adjustment (example formatting)

---

🧪 How to Test

1. Drag-and-Drop Behavior

   • Drag a field and verify immediate visual feedback on press

   • Drag across sections and confirm:

     • Correct combine vs reorder behavior
     • Proper highlight states (no flickering or incorrect targets)

   • Drag over original source and confirm no false drop indicators

2. Selection UX

   • Select a section and verify chip updates correctly
   • Click the chip to clear selection
   • Press Escape to clear selection state

3. Layout / Responsiveness

   • Resize viewport (mobile → desktop)

   • Verify:

     • Canvas remains centered with consistent max width
     • Navbar wraps correctly without layout breaking
     • Renderer controls stay aligned

4. Text Selection Prevention

   • Drag fields rapidly and confirm no accidental text highlighting occurs

5. Build / Lint

   • Follow LOCAL CI/CD Doc

---

Breaking Changes

No breaking changes.