"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Root = void 0;
var React = require("react");
var lib_1 = require("typestyle/lib");
var CanvasView_1 = require("./CanvasView");
var Dialog_1 = require("./Dialog");
var MenuBar_1 = require("./MenuBar");
var PaletteView_1 = require("./PaletteView");
var SettingView_1 = require("./SettingView");
var root = lib_1.style({
    height: '100%',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'stretch',
    backgroundColor: 'lightgrey'
});
var sidePannel = lib_1.style({
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'flex-start',
    alignItems: 'stretch',
    width: 310
});
var mainPannel = lib_1.style({
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'flex-start',
    alignItems: 'stretch',
    overflow: 'hidden'
});
function Root(props) {
    return (React.createElement(React.Suspense, { fallback: "Loading..." },
        React.createElement("div", { className: root, style: props.style },
            React.createElement("div", { className: sidePannel },
                React.createElement(MenuBar_1.MenuBar, null),
                React.createElement(PaletteView_1.PaletteView, null)),
            React.createElement("div", { className: mainPannel },
                React.createElement(SettingView_1.SettingView, null),
                React.createElement(CanvasView_1.CanvasView, null)),
            React.createElement(Dialog_1.DialogRootProvider, null))));
}
exports.Root = Root;
//# sourceMappingURL=Root.js.map