feat(compositor): add circular crop for Loom-style webcam PIP overlays

[staging-devin-ai-integration]

Summary

Add circular cropping to the compositor node for Loom-style webcam PIP overlays, using an extensible CropShape enum instead of a boolean.

Backend (Rust)

• CropShape enum (Rect | Circle) with serde(rename_all = "snake_case") and #[default] Rect — extensible to RoundedRect, Hexagon, etc.
• Ellipse-masked blit with anti-aliased edges (smoothstep band ~1.5px) in both axis-aligned and rotated paths
• skip_clear regression fix — disabled when crop_shape != Rect so pooled buffer data doesn't leak in ellipse corners
• 4 new Rust tests including a pooled-buffer regression test

Frontend (React/TypeScript)

• Segmented control (▭ Rect / ● Circle) replaces the boolean On/Off toggle — matches existing MirrorButton design patterns
• cropShape: 'rect' | 'circle' throughout LayerState, parsers, atoms, overlays, server sync, canvas layers
• CSS borderRadius: 50% canvas preview for instant WYSIWYG feedback
• mergeOverlayState comparator includes cropShape (fixes silent drop of remote-only changes)

Demo pipeline

• samples/pipelines/dynamic/video_moq_webcam_circle_pip.yml — screen-share + circular webcam PIP

Files changed (22 files, ~600 additions)

Backend: config.rs, kernel.rs, mod.rs, blit.rs, tests.rs, compositor_only.rs (bench)
Frontend: compositor-types.ts, compositorConstants.ts, compositorLayerParsers.ts, compositorAtoms.ts, compositorOverlays.ts, useCompositorLayers.ts, compositorNodeWidgets.tsx, compositorNodeInspector.tsx, compositorCanvasLayers.tsx, compositorServerSync.ts
Tests: compositorDragResize.test.ts, useCompositorLayers.monitor-flow.test.ts
Pipeline: video_moq_webcam_circle_pip.yml

Review & Testing Checklist for Human

• Ellipse AA quality: Load the demo pipeline with a webcam source and verify the circle crop edge looks smooth at various zoom levels — the smoothstep band is ~1.5px which may need tuning for very small or very large layers
• Segmented control UX: Select a video layer in the compositor inspector → verify the ▭ Rect / ● Circle toggle in Crop & Zoom section works, resets correctly, and matches the existing MirrorButton style
• Canvas preview matches backend: Toggle circle crop on a video layer → verify the CSS borderRadius: 50% preview matches the actual composited output in Stream view
• Backwards compatibility: Load an existing pipeline YAML that has no crop_shape field → verify it defaults to rect (no regression)
• Skip-clear correctness: With a single full-canvas circle-cropped layer, verify corners show transparent (black) not stale buffer data

Recommended test plan

1. Start backend + UI locally (just skit + just ui)
2. Load video_moq_webcam_circle_pip.yml pipeline
3. In the compositor, select the PIP layer → toggle between Rect/Circle → verify preview and stream output
4. Resize the PIP layer to non-square → verify ellipse (not circle) clipping
5. Apply rotation + circle crop → verify rotated ellipse renders correctly

Notes

• The blit functions (blit.rs) still use crop_circle: bool internally — the kernel converts enum→bool at the call site to avoid touching the complex SIMD code
• Three bugs caught and fixed from automated review: skip_clear, mergeOverlayState comparator, overflow:hidden clipping resize handles
• CropShape derives PartialEq, Eq for comparison in skip_clear and blit branching

Link to Devin session: https://staging.itsdev.in/sessions/9615e2650647434e84e4147265a8f38c
Requested by: @streamer45

---

[staging-devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring