perf(canvas): detach hidden layers from DOM, throttle onscreen check, increase cache

[Pfannkuchensack]

Summary

This is Step 1 of the Canvas Optimization plan.

• setVisibility now uses layer.remove()/stage.add() to detach/reattach hidden canvas elements from the DOM, freeing browser compositing resources
• Wrap syncIsOnscreen and syncIntersectsBbox with rafThrottle to reduce redundant calculations during pan/zoom
• Increase canvasElementCacheSize 32→128 and imageDataCacheSize 32→64
• Add 3-Layer-Flattening design document for future architectural optimization

Related Issues / Discussions

Performance degrades significantly with many raster layers on the canvas. Each Konva.Layer creates a separate HTML <canvas> element — with 20+ layers, the browser compositor struggles under the load.

QA Instructions

1. Create 15+ raster layers on the canvas
2. DOM check: Open Browser DevTools → Elements → verify that only visible/on-screen layers have <canvas> elements in the DOM
3. Pan/Zoom: Pan and zoom the canvas — should feel smoother than before, especially with many layers
4. Layer switching: Select different layers — verify they appear correctly with proper z-order
5. Enable/Disable: Toggle layers on/off — verify they show/hide correctly
6. Type visibility: Hide/show entire layer types (e.g. all raster layers) — verify correct behavior
7. Isolated preview: Use filter/transform on a layer with isolated preview enabled — verify other layers hide/show correctly
8. Generation: Run a generation with multiple layers — verify compositing still works correctly

Merge Plan

No special merge considerations. No Redux slice changes, no DB schema changes.

Checklist

• The PR has a short but descriptive title, suitable for a changelog
• Tests added / updated (if applicable)
• ❗Changes to a redux slice have a corresponding migration
• Documentation added / updated (if applicable)
• Updated What's New copy (if doing a release after this PR)