import React from 'react';
import { Toolbar } from './components/Toolbar';
import { Palette } from './components/Palette';
import { PropertiesPanel } from './components/PropertiesPanel';
import { EventsPanel } from './components/EventsPanel';
import { Canvas } from './components/Canvas';
import { useMessaging } from './useMessaging';

export function App() {
    useMessaging();
    return (
        <div className="container">
            <Toolbar />
            <div className="main-content">
                <div className="sidebar">
                    <h3>Widgets</h3>
                    <Palette />
                    <PropertiesPanel />
                    <EventsPanel />
                </div>
                <div className="design-area">
                    <Canvas />
                </div>
            </div>
        </div>
    );
}