feat: FieldMapper component for visual JSON-to-field mapping

[genu]

Summary

A reusable FieldMapper (or PayloadMapper) component that lets users visually map fields from a JSON payload to a set of target output fields. This is a common UX pattern seen in integration/webhook tools like Zapier, n8n, Retool, and Make.com.

Use Case

When building webhook ingestion flows, users need to map incoming JSON payloads (e.g., from Railway, Stripe, GitHub) to a defined schema (e.g., title, body, urgency). This component provides a visual "click-to-insert" interface for that mapping.

Proposed UX

• Left panel: Interactive JSON tree viewer showing a sample payload. Values are clickable.
• Right panel: Target fields (text inputs) that accept both literal text and {{json.path}} tokens.
• Interaction: User focuses an output field, clicks a value in the JSON tree → {{path.to.value}} token is inserted at cursor position.
• Live preview: Output fields resolve tokens against the sample payload in real-time.

Props (rough API sketch)

<FieldMapper
  :payload="sampleJson"
  :fields="[
    { key: 'title', label: 'Title', required: true },
    { key: 'body', label: 'Body' },
    { key: 'urgency', label: 'Urgency', type: 'select', options: ['low', 'normal', 'critical'] }
  ]"
  v-model="mappings"
/>

Prior Art

• Zapier field mapper (mapping between zap steps)
• n8n expression editor (JSON path insertion)
• Retool data binding
• Make.com variable picker

Context

This originated from a feature in Hollar where users configure webhook payload templates for notification sources. Will be built inline first, then extracted here once the pattern is proven.