feat: implement iframe-parent event system with real-time layer tree synchronization

[ashu565]

Description

Event Communication: Implemented event-driven communication system between iframe and parent (Similar to IPC in desktop). Layer Tree Updates: Real-time Layer tree mounting and updates based on DOM and EDIT events (Used above point for communication). Debouncing and Fake data fix : Added back 500ms deboucing in processDom and fixed the FAKE_DATA as per FrameView (Earlier it was accoring to Webview)

Detail : This PR implements layer functionality for the web version by following the same communication pattern used in the desktop version. The desktop version uses Electron's built-in messaging system to send events between the iframe and main application. Since the web version uses iframes with penpal for communication instead of Electron, I created a generic event system that works the same way. Instead of creating many specific functions for each type of event, I built a single event handler that can process any event type, just like the desktop version does. This means when users interact with elements (like grouping, moving, or editing), the iframe sends the same types of events to the main application, and they get processed through the same flow as the desktop version. The end result is that both versions now work identically - they just use different underlying communication methods (Electron IPC vs penpal), but the event flow and layer management is exactly the same.

Related Issues

closes #2184 closes #2185

Type of Change

• [ ] Bug fix
• [x] New feature
• [ ] Documentation update
• [ ] Release
• [ ] Refactor
• [ ] Other (please describe):

Testing

Screenshots (if applicable)

Additional Notes

cc : @Kitenite @drfarrell

---

[!IMPORTANT] Implement event-driven communication system for iframe-parent interaction with real-time layer tree synchronization using penpal.

• Event System:
  • Implement event-driven communication between iframe and parent using penpal, similar to IPC in desktop.
  • Introduce FrameViewEvents in frame-view.ts for event handling.
• Layer Tree Synchronization:
  • Real-time updates based on DOM and EDIT events.
  • Use handleFrameViewEvent in parent.ts to process events.
• Debouncing and Data Fixes:
  • Add 500ms debounce to processDom in dom.ts.
  • Fix FAKE_DATA structure in layers.ts to align with FrameView.
• Code Refactoring:
  • Refactor ActionManager in action/index.ts to use event system.
  • Add FrameViewEventHandler in event-handler/index.ts for event processing.
  • Update preloadMethods in index.ts to include new event functions.

^{This description was created by for fd344b0aafa05f11bb82bab6758edad643869c15. You can customize this summary. It will automatically update as commits are pushed.}

[vercel[bot]]

@ashu565 is attempting to deploy a commit to the Onlook Team on Vercel.

A member of the Team first needs to authorize it.