fix(renderer): clip text to shape outline on circle / parallelogram cards

[LeslieOA]

Summary

Text on circle and parallelogram cards clipped only to the bounding rect, so long body content (and side labels) could spill past the curved / slanted edge into the card's empty corners. Now clips to the actual shape outline.

Addresses item 1 of #53. (Item 2 — rotated labels on mixed-zone cards — split into #64.)

Approach

• The top-level <Group clip> mechanism (#167) already works for rects. This swaps the clip region to the shape's SVG path when the node is circle / parallelogram, falling back to the bounding rect otherwise.
• Mirrored in the Picture path (drawTextNode) via canvas.clipPath so pinch-overlay output stays pixel-identical to the live tree (two-paths-in-sync rule).
• Extracts shape geometry into a shared nodes/shapes.ts (parallelogramPath, ovalPath, shapeClipPath). Previously the parallelogram maths was duplicated in SkiaCardRenderer and useCanvasPicture; both now delegate here, so the clip outline can never drift from the fill outline. Net: removes duplication rather than adding a third copy.

Why this is low-risk

• shapes.ts is pure string in/out — no Skia/ESM deps — so it unit-tests cleanly (10 new tests), unlike the markdown chain.
• The fill renderers were refactored to call the shared helper with identical SVG output (verified: same skew constant, same vertex formulae).
• Clip-region change is behind a shape check; rectangular cards are byte-identical to before.

Test plan

• typecheck clean
• lint 0 errors
• 48 tests pass (10 new in shapes.test.ts — geometry + dispatch)
• On-device: open a canvas with circle + parallelogram cards holding long text (e.g. Candy shape fixtures); confirm text clips to the curved/slanted edge, and rectangular cards are unchanged
• Pinch-zoom a shape card; confirm the Picture overlay clips identically (no spill flash)

Closes #53 (item 1). Item 2 tracked in #64.

🤖 Generated with Claude Code