[Copilot]

The layout, patch and face views zoom well but give no intuitive way to pan sideways. This adds draggable scrollbars on both axes and Shift+wheel horizontal scrolling, as in Logic Pro and similar apps.

All changes are in src/render/Viewport.tsx, so every view that uses it gets them.

• Wheel handling

  • Shift+wheel pans horizontally. If the browser or OS already maps Shift+wheel to deltaX, that value is used instead of deltaY.
  • Trackpad horizontal gestures (|deltaX| > |deltaY|, no Ctrl) pan too.
  • A plain wheel and Ctrl+wheel (pinch) still zoom at the cursor.

• Scrollbars

  • Custom overlay divs with role="scrollbar" and data-testid="scrollbar-x" / scrollbar-y.
  • The scrollable range is the content box padded by half a viewport on each side, unioned with the current visible area. The thumb size and position come from the visible span within that range.
  • While a thumb is being dragged, the range is frozen at its value when the drag started. Otherwise the range would grow as the view moves and the thumb would drift away from the pointer.
  • The thumb has a minimum length of 24px.
  • Thumb pointerdown calls stopPropagation() so it doesn't trigger canvas background handlers.
  • Drag state lives in useState rather than a ref because the react-hooks/refs lint rule forbids reading refs during render.