feat: add html-form-ports demo

[kumilingus]

What

New html-form-ports demo (TypeScript, @joint/core, Vite) — a small data-mapping application:

• FormElement — HTML form rendered inside <foreignObject>; every field has a port placed directly under its input. Editable input fields (hollow ports, in) and computed read-only fields (solid ports, out) derived live from the inputs.
• InterfaceElement — titled list of items with a port next to each row (side: 'left' | 'right'). Used as the Input (out ports, solid) and Output (in ports, hollow) interfaces.
• All ports per element live in a single ports group with position: 'absolute' — coordinates are measured from the rendered HTML (HtmlPortsElementView base class), so ports stay aligned with any HTML layout (multi-row, wrapping, resize, zoom).

Behavior

• Values propagate along mapping links: Input → form input fields → computed fields → Output (live while typing).
• link:snap:connect / link:snap:disconnect — live value preview while dragging a link, with restore on un-snap.
• Direction validation: links only from out ports to in ports; max one inbound link per in port; new links only start from out ports.
• Click a link to remove it — the dependent values recalculate.
• Long output values truncate with ellipsis (full value on hover).

Notes

• Key gotcha documented in code: initial port measurement must run in onMount deferred by one frame — the HTML has no dimensions before the view is attached, and a port update fired mid paper-batch is not flushed.
• Verified end-to-end with Playwright: port/input alignment (dx=0 at zoom 1 and 1.5), two-way value sync, validation rules, link removal recalculation, single change:ports per resize (batched port writes).
• npm run lint clean for this demo; screenshot generated via the root screenshot script.

Screenshot

🤖 Generated with Claude Code