Content overlay layer was intercepting mouse events (pointer-events: auto
with z-index: 5), preventing :hover from reaching the grid cells underneath.
Removed pointer-events: auto from .canvas-content-visible since the content
layer is purely visual and needs no click handling.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace panzoom + timeline approach with clean async/await GSAP tweens
- Flying rect morphs from cell position to full viewport (aspect ratio change)
- Fix zoomOut race condition: nested gsap.to inside tl.call fired outside timeline
- Fix opacity conflict: GSAP controls all opacity, CSS class only for pointer-events
- Fix gridLayerRef losing reference on :key remount during resize
- Make viewport dimensions reactive via ResizeObserver (vpWidth/vpHeight refs)
- Wait for fade-in completion before unlocking isAnimating
Co-Authored-By: Claude <noreply@anthropic.com>
Drop tldraw/React dependency in favor of @panzoom/panzoom with a
two-layer architecture: outline rectangles (borders only) are zoomed
via CSS transforms while HTML content renders at native 1:1 scale
as a fade-in overlay — eliminating blur at any zoom level.
Co-Authored-By: Claude <noreply@anthropic.com>
Previous implementation created all ~589 shapes (year + months + weeks + days)
at once, causing visual chaos on load and broken zoom. New approach dynamically
creates/destroys shapes per level: year shows 12 months, month shows 6 weeks,
week shows 7 days, day shows time slots. Wheel prime pattern (2 ticks) prevents
accidental zooms. Double-click resets to year view.
Co-Authored-By: Claude <noreply@anthropic.com>
