feat: connection creation workflow (mobile)

[ggfevans]

Parent Epic

Part of #71 (Network Interface Visualization and Connectivity)

Dependencies

• feat: Connection Graph Model - Phase 1: Port-Based Architecture #362 (Connection Graph Model) - data model must be complete
• feat: MVP Connection model #365 (Connection model) - provides Connection type
• feat: Connection store with validation #369 (Connection store) - provides validation and CRUD
• feat: mobile UX for port interaction #275 (Mobile UX for port interaction)

---

Summary

Implement the UX flow for creating connections on mobile devices.

Mobile Challenges

• Drag doesn't work well with touch
• Small port targets hard to tap accurately
• No hover state available
• Limited screen real estate

Proposed: Tap-Tap with Port Selector

1. Tap port A → bottom sheet appears with port info
2. Bottom sheet has "Connect to..." button
3. Tap "Connect to..." → device/port selector appears
4. Select target device from list
5. Select target port from list
6. Connection created

Alternative: Two-Tap Direct

1. Tap port A → enters connecting mode (visual feedback)
2. Zoom if needed to see target
3. Tap port B → connection created
4. Tap outside or swipe down cancels

Acceptance Criteria

• Tap port shows port details bottom sheet
• "Connect to..." initiates connection flow
• Device selector (searchable list)
• Port selector for chosen device
• Confirm button creates connection
• Back/cancel at each step
• Haptic feedback on success
• Works with high-density grouped ports

UI Flow

[Port Tapped] → [Bottom Sheet: Port Details]
                    ↓
              [Connect to...]
                    ↓
          [Select Device: List]
                    ↓
          [Select Port: List]
                    ↓
              [Confirm] → [Connection Created]

References

• Mobile placement mode: src/lib/stores/placement.svelte.ts