48 builder frontend 2 (#70)

* Implement collapsing component hierarchy.

* Save screen when adding new components.

* Allow creation of nested child components.

* Fix level-based indentation of hierarchy.

* Rename updateComponentProps to setComponentProps

* Save layout information to the disk.

* Cleanup: switch to autosubscriptions to prevent memory leaks, remove unused imports.

* Remove unused css.

* Fix incorrect subscription.

packages/builder/src/builderStore/store.js

@@ -4,7 +4,7 @@ import {
 import {
     filter, cloneDeep, sortBy,
     map, last, keys, concat, keyBy,
-    find, isEmpty, reduce, values
+    find, isEmpty, reduce, values, isEqual
 } from "lodash/fp";
 import {
     pipe, getNode, validate,
@@ -93,8 +93,8 @@ export const getStore = () => {
     store.createGeneratedComponents = createGeneratedComponents(store);
     store.addChildComponent = addChildComponent(store);
     store.selectComponent = selectComponent(store);
-    store.updateComponentProp = updateComponentProp(store);
-
+    store.setComponentProp = setComponentProp(store);
+    store.setComponentStyle = setComponentStyle(store);
     return store;
 }
 
@@ -456,6 +456,10 @@ const _saveScreen = (store, s, screen) => {
     return s;
 }
 
+const _save = (appname, screen, store, s) =>
+    api.post(`/_builder/api/${appname}/screen`, screen)
+        .then(() => savePackage(store, s));
+
 const createScreen = store => (screenName, layoutComponentName) => {
     store.update(s => {
         const newComponentInfo = getNewComponentInfo(
@@ -597,8 +601,6 @@ const addComponentLibrary = store => async lib => {
 
         return s;
     })
-
-
 }
 
 const removeComponentLibrary = store => lib => {
@@ -701,17 +703,31 @@ const addChildComponent = store => component => {
         const newComponent = getNewComponentInfo(
             s.components, component);
 
-        const children = s.currentFrontEndItem.props._children;
+        let children = s.currentComponentInfo.component ?
+            s.currentComponentInfo.component.props._children :
+            s.currentComponentInfo._children;
 
         const component_definition = Object.assign(
             cloneDeep(newComponent.fullProps), {
             _component: component,
+            _layout: {}
         })
 
-        s.currentFrontEndItem.props._children =
-            children ?
-                children.concat(component_definition) :
-                [component_definition];
+        if (children) {
+            if (s.currentComponentInfo.component) {
+                s.currentComponentInfo.component.props._children = children.concat(component_definition);
+            } else {
+                s.currentComponentInfo._children = children.concat(component_definition)
+            }
+        } else {
+            if (s.currentComponentInfo.component) {
+                s.currentComponentInfo.component.props._children = [component_definition];
+            } else {
+                s.currentComponentInfo._children = [component_definition]
+            }
+        }
+
+        _saveScreen(store, s, s.currentFrontEndItem);
 
         return s;
     })
@@ -725,7 +741,7 @@ const selectComponent = store => component => {
 
 }
 
-const updateComponentProp = store => (name, value) => {
+const setComponentProp = store => (name, value) => {
     store.update(s => {
         const current_component = s.currentComponentInfo;
         s.currentComponentInfo[name] = value;
@@ -733,5 +749,18 @@ const updateComponentProp = store => (name, value) => {
         s.currentComponentInfo = current_component;
         return s;
     })
+}
 
+const setComponentStyle = store => (name, value) => {
+    store.update(s => {
+        if (!s.currentComponentInfo._layout) {
+            s.currentComponentInfo._layout = {};
+        }
+        s.currentComponentInfo._layout[name] = value;
+
+        // save without messing with the store
+        _save(s.appname, s.currentFrontEndItem, store, s)
+
+        return s;
+    })
 }

packages/builder/src/common/Icons/ArrowDown.svelte

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <path fill="none" d="M0 0h24v24H0z"/>
+  <path fill="currentColor" d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/>
+</svg>

packages/builder/src/common/Icons/index.js

@@ -3,3 +3,4 @@ export { default as PaintIcon } from './Paint.svelte';
 export { default as TerminalIcon } from './Terminal.svelte';
 export { default as InputIcon } from './Input.svelte';
 export { default as ImageIcon } from './Image.svelte';
+export { default as ArrowDownIcon } from './ArrowDown.svelte';

packages/builder/src/common/Inputs/InputGroup.svelte

@@ -2,11 +2,19 @@
   export let meta = [];
   export let size = '';
   export let values = [];
+  export let onStyleChanged = () => {};
+
+  let _values = values.map(v => v);
+
+  $: onStyleChanged(_values);
 </script>
 
 <div class="inputs {size}">
   {#each meta as { placeholder }, i}
-    <input type="number" placeholder="{placeholder}" bind:value={values[i]}/>
+    <input type="number"
+           placeholder="{placeholder}"
+           value={values[i]}
+           on:input={(e) => _values[i] = e.target.value} />
   {/each}
 </div>
 

packages/builder/src/userInterface/ComponentPanel.svelte

@@ -1,58 +1,22 @@
 <script>
-
-import PropsView from "./PropsView.svelte";
-import { store } from "../builderStore";
-import { isRootComponent } from "./pagesParsing/searchComponents";
-import IconButton from "../common/IconButton.svelte";
-import Textbox from "../common/Textbox.svelte";
-import { pipe } from "../common/core";
-import {
-    getScreenInfo
-} from "./pagesParsing/createProps";
-import { LayoutIcon, PaintIcon, TerminalIcon } from '../common/Icons/';
-import CodeEditor from './CodeEditor.svelte';
-import LayoutEditor from './LayoutEditor.svelte';
-
-import {
-    cloneDeep,
-    join,
-    split,
-    map,
-    keys,
-    isUndefined,
-    last
-} from "lodash/fp";
-import { assign } from "lodash";
-
-let component;
-let name = "";
-let description = "";
-let tagsString = "";
-let nameInvalid = "";
-let componentInfo = {};
-let modalElement
-let propsValidationErrors = [];
-let originalName="";
-let components;
-let ignoreStore = false;
-
-// $: shortName = last(name.split("/"));
-
-store.subscribe(s => {
-    if(ignoreStore) return;
-    component = s.currentComponentInfo;
-    if(!component) return;
-    originalName = component.name;
-    name = component.name;
-    description = component.description;
-    tagsString = join(", ")(component.tags);
-    componentInfo = s.currentComponentInfo;
-    components = s.components;
-});
-
-const onPropsChanged = store.updateComponentProp;
-
-let current_view = 'props';
+    import PropsView from "./PropsView.svelte";
+    import { store } from "../builderStore";
+    import IconButton from "../common/IconButton.svelte";
+    import { LayoutIcon, PaintIcon, TerminalIcon } from '../common/Icons/';
+    import CodeEditor from './CodeEditor.svelte';
+    import LayoutEditor from './LayoutEditor.svelte';
+
+    let current_view = 'props';
+
+    $: component = $store.currentComponentInfo;
+    $: originalName = component.name;
+    $: name = component.name;
+    $: description = component.description;
+    $: componentInfo = $store.currentComponentInfo;
+    $: components = $store.components;
+
+    const onPropChanged = store.setComponentProp;
+    const onStyleChanged = store.setComponentStyle;
 </script>
 
 <div class="root">
@@ -78,9 +42,9 @@ let current_view = 'props';
         <div class="component-props-container">
 
         {#if current_view === 'props'}
-            <PropsView {componentInfo} {components} {onPropsChanged} />
+            <PropsView {componentInfo} {components} {onPropChanged} />
         {:else if current_view === 'layout'}
-            <LayoutEditor />
+            <LayoutEditor {onStyleChanged} {componentInfo}/>
         {:else}
             <CodeEditor />
         {/if}

packages/builder/src/userInterface/ComponentSearch.svelte

@@ -1,31 +1,27 @@
 <script>
 
-import { searchAllComponents } from "./pagesParsing/searchComponents";
-import { store } from "../builderStore";
+    import { searchAllComponents } from "./pagesParsing/searchComponents";
+    import { store } from "../builderStore";
 
-export let onComponentChosen = () => {};
+    export let onComponentChosen = () => {};
 
-let components = [];
-let phrase = "";
+    let phrase = "";
 
-store.subscribe(s => {
-    components = s.components;
-});
-
-$: filteredComponents = 
-    !phrase 
-    ? [] 
-    : searchAllComponents(components, phrase);
+    components = $store.components;
 
+    $: filteredComponents =
+        !phrase
+        ? []
+        : searchAllComponents(components, phrase);
 </script>
 
 <div class="root">
 
     <form class="uk-search uk-search-large">
         <span uk-search-icon></span>
-        <input class="uk-search-input" 
-               type="search" 
-               placeholder="Based on component..." 
+        <input class="uk-search-input"
+               type="search"
+               placeholder="Based on component..."
                bind:value={phrase}>
     </form>
 
@@ -65,4 +61,4 @@ $: filteredComponents =
     font-style: italic;
 }
 
-</style>
+</style>

packages/builder/src/userInterface/ComponentSelector.svelte

@@ -1,74 +1,66 @@
 <script>
-import {
-    isRootComponent
-} from "./pagesParsing/searchComponents"
-import { splitName } from "./pagesParsing/splitRootComponentName.js"
-import { store } from "../builderStore";
-import {
-    groupBy, keys, find, sortBy
-} from "lodash/fp";
-import { pipe } from "../common/core";
-
-export let onComponentChosen;
-export let onGeneratorChosen;
-export let allowGenerators;
-
-let screens=[];
-let componentLibraries=[];
-
-const addRootComponent = (c, all, isGenerator) => {
-    const { libName } = splitName(c.name);
-    let group = find(r => r.libName === libName)(all);
-
-    if(!group) {
-        group = {
-            libName,
-            components: [],
-            generators: []
-        };
-
-        all.push(group);
-    } 
-    
-    if(isGenerator) {
-        group.generators.push(c)
-    } else {
-        group.components.push(c)
-    }
-    
-};
-
-store.subscribe(s => {
-
-    const newComponentLibraries = [];
-    const newscreens = [];
-
-    for(let comp of sortBy(["name"])(s.components)) {
-        if(isRootComponent(comp)) {
-            addRootComponent(
-                comp, 
-                newComponentLibraries, 
-                false);
-        } else {
-            newscreens.push(comp);
+    import {
+        isRootComponent
+    } from "./pagesParsing/searchComponents"
+    import { splitName } from "./pagesParsing/splitRootComponentName.js"
+    import { store } from "../builderStore";
+    import { find, sortBy } from "lodash/fp";
+
+    export let onComponentChosen;
+    export let onGeneratorChosen;
+    export let allowGenerators;
+
+    let screens = [];
+    let componentLibraries=[];
+
+    const addRootComponent = (c, all, isGenerator) => {
+        const { libName } = splitName(c.name);
+        let group = find(r => r.libName === libName)(all);
+
+        if(!group) {
+            group = {
+                libName,
+                components: [],
+                generators: []
+            };
+
+            all.push(group);
         }
-    }
 
-    for(let generator of s.generators) {
-        addRootComponent(
-            generator, 
-            newComponentLibraries, 
-            true);
-    }
+        if(isGenerator) {
+            group.generators.push(c)
+        } else {
+            group.components.push(c)
+        }
 
-    screens = sortBy(["name"])(newscreens);
-    componentLibraries = newComponentLibraries;
-});
+    };
 
+    $: {
 
+        const newComponentLibraries = [];
+        const newscreens = [];
 
+        for(let comp of sortBy(["name"])($store.components)) {
+            if(isRootComponent(comp)) {
+                addRootComponent(
+                    comp,
+                    newComponentLibraries,
+                    false);
+            } else {
+                newscreens.push(comp);
+            }
+        }
 
+        for(let generator of $store.generators) {
+            addRootComponent(
+                generator,
+                newComponentLibraries,
+                true);
+        }
 
+        screens = sortBy(["name"])(newscreens);
+        componentLibraries = newComponentLibraries;
+    };
 </script>
 
 {#each componentLibraries as lib}

packages/builder/src/userInterface/ComponentsHierarchy.svelte

@@ -1,90 +1,79 @@
 <script>
-import ComponentsHierarchyChildren from './ComponentsHierarchyChildren.svelte';
-
-import {
-    last,
-    sortBy,
-    filter,
-    map,
-    uniqWith,
-    isEqual,
-    trimCharsStart,
-    trimChars,
-    join,
-    includes
-} from "lodash/fp";
-
-import { pipe } from "../common/core";
-import getIcon from "../common/icon";
-import { store } from "../builderStore";
-
-export let components = []
-
-const joinPath = join("/");
-
-const normalizedName = name => pipe(name, [
-        trimCharsStart("./"),
-        trimCharsStart("~/"),
-        trimCharsStart("../"),
-        trimChars(" ")
-    ]);
-
-const lastPartOfName = (c) =>
-    last(c.name ? c.name.split("/") : c._component.split("/"))
-
-const expandFolder = folder => {
-    const expandedFolder = {...folder};
-    if(expandedFolder.isExpanded) {
-        expandedFolder.isExpanded = false;
-        expandedFolders = filter(f => f.name !== folder.name)(expandedFolders);
-    } else {
-        expandedFolder.isExpanded = true;
-        expandedFolders.push(folder.name);
-    }
-    const newFolders = [...subfolders];
-    newFolders.splice(
-        newFolders.indexOf(folder),
-        1,
-        expandedFolder);
-    subfolders = newFolders;
-
-}
+    import ComponentsHierarchyChildren from './ComponentsHierarchyChildren.svelte';
+
+    import {
+        last,
+        sortBy,
+        map,
+        trimCharsStart,
+        trimChars,
+        join,
+    } from "lodash/fp";
+
+    import { pipe } from "../common/core";
+    import { store } from "../builderStore";
+    import { ArrowDownIcon } from '../common/Icons/'
+
+    export let components = []
+
+    const joinPath = join("/");
+
+    const normalizedName = name => pipe(name, [
+            trimCharsStart("./"),
+            trimCharsStart("~/"),
+            trimCharsStart("../"),
+            trimChars(" ")
+        ]);
 
-const isComponentSelected = (type, current,c) =>
-    type==="screen"
-    && current
-    && current.name === c.name
+    const lastPartOfName = (c) =>
+        last(c.name ? c.name.split("/") : c._component.split("/"))
 
-const isFolderSelected = (current, folder) =>
-    isInSubfolder(current, folder)
+    const isComponentSelected = (current, comp) =>
+        current &&
+        current.component &&
+        comp.component &&
+        current.component.name === comp.component.name
 
+    const isFolderSelected = (current, folder) =>
+        isInSubfolder(current, folder)
 
+    $:  _components =
+            pipe(components, [
+                map(c => ({component: c, title:lastPartOfName(c)})),
+                sortBy("title")
+            ]);
 
-$:  _components =
-        pipe(components, [
-            map(c => ({component: c, title:lastPartOfName(c)})),
-            sortBy("title")
-        ]);
+    function select_component(screen, component) {
+        store.setCurrentScreen(screen);
+        store.selectComponent(component);
+    }
 
-function select_component(screen, component) {
-    store.setCurrentScreen(screen);
-    store.selectComponent(component);
-}
+    const isScreenSelected = component =>
+        component.component &&
+        $store.currentFrontEndItem &&
+        component.component.name === $store.currentFrontEndItem.name;
 
 </script>
 
 <div class="root">
 
-
     {#each _components as component}
-    <div class="hierarchy-item component"
-         class:selected={isComponentSelected($store.currentFrontEndType, $store.currentFrontEndItem, component.component)}
-         on:click|stopPropagation={() => store.setCurrentScreen(component.component.name)}>
+        <div class="hierarchy-item component"
+            class:selected={isComponentSelected($store.currentComponentInfo, component)}
+            on:click|stopPropagation={() => store.setCurrentScreen(component.component.name)}>
+
+            <span class="icon" style="transform: rotate({isScreenSelected(component) ? 0 : -90}deg);">
+                {#if component.component.props && component.component.props._children}
+                    <ArrowDownIcon />
+                {/if}
+            </span>
 
-        <span class="title">{component.title}</span>
-    </div>
-        {#if component.component.props && component.component.props._children}
+            <span class="title">{component.title}</span>
+        </div>
+
+        {#if isScreenSelected(component) && component.component.props && component.component.props._children}
             <ComponentsHierarchyChildren components={component.component.props._children}
+                                         currentComponent={$store.currentComponentInfo}
                                          onSelect={child => select_component(component.component.name, child)} />
         {/if}
     {/each}
@@ -102,9 +91,10 @@ function select_component(screen, component) {
 .hierarchy-item {
     cursor: pointer;
     padding: 11px 7px;
-
     margin: 5px 0;
     border-radius: 5px;
+    display: flex;
+    align-items: center;
 }
 
 .hierarchy-item:hover {
@@ -112,12 +102,6 @@ function select_component(screen, component) {
     background: #fafafa;
 }
 
-
-
-.currentfolder {
-    color: var(--secondary100);
-}
-
 .selected {
     color: var(--button-text);
     background: var(--background-button)!important;
@@ -127,5 +111,10 @@ function select_component(screen, component) {
     margin-left: 10px;
 }
 
-
+.icon {
+    display: inline-block;
+    transition: 0.2s;
+    width: 24px;
+    height: 24px;
+}
 </style>

packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte

@@ -3,22 +3,55 @@
   import { pipe } from "../common/core";
 
   export let components = [];
+  export let currentComponent;
   export let onSelect = () => {};
+  export let level = 0;
+
 
   const capitalise = s => s.substring(0,1).toUpperCase() + s.substring(1);
   const get_name = s => last(s.split('/'));
   const get_capitalised_name = name => pipe(name, [get_name,capitalise]);
 </script>
 
-{#each components as component}
-  <ul>
-    <li on:click|stopPropagation={() => onSelect(component)}>
-      {get_capitalised_name(component._component)}
+<ul>
+  {#each components as component}
+    <li  on:click|stopPropagation={() => onSelect(component)}>
+      <span class="item"
+            class:selected={currentComponent === component}
+            style="padding-left: {level * 20 + 67}px">
+        {get_capitalised_name(component._component)}
+      </span>
 
       {#if component._children}
-        <svelte:self components={component._children}/>
+        <svelte:self components={component._children}
+                    {currentComponent}
+                    {onSelect}
+                    level={level + 1}/>
       {/if}
     </li>
+  {/each}
+</ul>
+
+<style>
+  ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+  }
+
+  .item {
+    display: block;
+    padding: 11px 67px;
+    border-radius: 3px;
+  }
+
+  .item:hover {
+    background: #fafafa;
+    cursor: pointer;
+  }
 
-  </ul>
-{/each}
+  .selected {
+    color: var(--button-text);
+    background: var(--background-button)!important;
+  }
+</style>

packages/builder/src/userInterface/ComponentsList.svelte

@@ -1,52 +1,43 @@
 <script>
-import {
-    isRootComponent
-} from "./pagesParsing/searchComponents"
-import { splitName } from "./pagesParsing/splitRootComponentName.js"
-import { store } from "../builderStore";
-import {
-    groupBy, keys, find, sortBy
-} from "lodash/fp";
-import { pipe } from "../common/core";
-import { ImageIcon, InputIcon, LayoutIcon } from '../common/Icons/';
-
-let componentLibraries=[];
-
-const addRootComponent = (c, all) => {
-    const { libName } = splitName(c.name);
-    let group = find(r => r.libName === libName)(all);
-
-    if(!group) {
-        group = {
-            libName,
-            components: [],
-            generators: []
-        };
-
-        all.push(group);
-    }
+    import { splitName } from "./pagesParsing/splitRootComponentName.js"
+    import { store } from "../builderStore";
+    import { find, sortBy } from "lodash/fp";
+    import { ImageIcon, InputIcon, LayoutIcon } from '../common/Icons/';
 
-    group.components.push(c)
+    let componentLibraries = [];
+    let current_view = 'text';
 
-};
+    const addRootComponent = (c, all) => {
+        const { libName } = splitName(c.name);
+        let group = find(r => r.libName === libName)(all);
 
-const onComponentChosen = store.addChildComponent;
+        if(!group) {
+            group = {
+                libName,
+                components: [],
+                generators: []
+            };
 
-store.subscribe(s => {
+            all.push(group);
+        }
 
-    const newComponentLibraries = [];
+        group.components.push(c)
 
-    for(let comp of sortBy(["name"])(s.components)) {
-        addRootComponent(
-            comp,
-            newComponentLibraries);
-    }
+    };
+
+    const onComponentChosen = store.addChildComponent;
 
-    componentLibraries = newComponentLibraries;
-});
+    $: {
+        const newComponentLibraries = [];
 
-let current_view = 'text';
+        for(let comp of sortBy(["name"])($store.components)) {
+            addRootComponent(
+                comp,
+                newComponentLibraries);
+        }
 
+        componentLibraries = newComponentLibraries;
+    }
 </script>
 
 <div class="root">
@@ -115,13 +106,6 @@ let current_view = 'text';
     min-height: 0px;
 }
 
-.inner-header {
-    font-size: 0.9em;
-    font-weight: bold;
-    margin-top: 7px;
-    margin-bottom: 3px;
-}
-
 .component {
     padding: 0 15px;
     cursor: pointer;
@@ -147,13 +131,6 @@ let current_view = 'text';
     opacity: 0.6;
 }
 
-.component > .description {
-    font-size: 0.8em;
-    color: var(--secondary75);
-    display: inline-block;
-    margin-left: 10px;
-}
-
 ul {
     list-style: none;
     display: flex;

packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte

@@ -1,16 +1,14 @@
 <script>
-import ComponentPanel from "./ComponentPanel.svelte";
-import ComponentsList from "./ComponentsList.svelte";
+    import ComponentPanel from "./ComponentPanel.svelte";
+    import ComponentsList from "./ComponentsList.svelte";
 
-let selected="properties";
-
-const isSelected = tab =>
-    selected === tab;
-
-const selectTab = tab =>
-    selected = tab;
+    let selected="properties";
 
+    const isSelected = tab =>
+        selected === tab;
 
+    const selectTab = tab =>
+        selected = tab;
 </script>
 
 <div class="root">

packages/builder/src/userInterface/CurrentItemPreview.svelte

@@ -1,41 +1,25 @@
 <script>
-import { store } from "../builderStore";
-import { makeLibraryUrl } from "../builderStore/loadComponentLibraries";
-import {
-    last, split, map, join
-} from "lodash/fp";
-import { pipe } from "../common/core";
-import { splitName } from "./pagesParsing/splitRootComponentName"
-import { afterUpdate } from 'svelte';
-import { getRootComponent } from "./pagesParsing/getRootComponent";
-import { buildPropsHierarchy } from "./pagesParsing/buildPropsHierarchy";
+    import { store } from "../builderStore";
+    import { map, join } from "lodash/fp";
+    import { pipe } from "../common/core";
+    import { buildPropsHierarchy } from "./pagesParsing/buildPropsHierarchy";
 
+    $: hasComponent = !!$store.currentFrontEndItem;
 
-let hasComponent=false;
-let stylesheetLinks = "";
-let appDefinition = {};
-
-store.subscribe(s => {
-    hasComponent = !!s.currentFrontEndItem;
-
-    stylesheetLinks = pipe(s.pages.stylesheets, [
+    $: stylesheetLinks = pipe($store.pages.stylesheets, [
         map(s => `<link rel="stylesheet" href="${s}"/>`),
         join("\n")
     ]);
-    appDefinition = {
-        componentLibraries: s.loadLibraryUrls(),
+
+    $: appDefinition = {
+        componentLibraries: $store.loadLibraryUrls(),
         props: buildPropsHierarchy(
-                s.components,
-                s.screens,
-                s.currentFrontEndItem),
-        hierarchy: s.hierarchy,
+                $store.components,
+                $store.screens,
+                $store.currentFrontEndItem),
+        hierarchy: $store.hierarchy,
         appRootPath: ""
     };
-
-});
-
-
-
 </script>
 
 
@@ -52,7 +36,6 @@ store.subscribe(s => {
         window["##BUDIBASE_APPDEFINITION##"] = ${JSON.stringify(appDefinition)};
         import('/_builder/budibase-client.esm.mjs')
         .then(module => {
-            console.log(module, window);
             module.loadBudibase({ window, localStorage });
         })
     </script>
@@ -73,23 +56,21 @@ store.subscribe(s => {
 
 
 <style>
-
-.component-container {
-    grid-row-start: middle;
-    grid-column-start: middle;
-    position: relative;
-    overflow: hidden;
-    padding-top: 56.25%;
-    margin: auto;
-}
-
-.component-container iframe {
-    border: 0;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-}
-
+    .component-container {
+        grid-row-start: middle;
+        grid-column-start: middle;
+        position: relative;
+        overflow: hidden;
+        padding-top: 56.25%;
+        margin: auto;
+    }
+
+    .component-container iframe {
+        border: 0;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
 </style>

packages/builder/src/userInterface/EditComponentProps.svelte

@@ -1,68 +1,31 @@
 <script>
-
-import PropsView from "./PropsView.svelte";
-import { store } from "../builderStore";
-import { isRootComponent } from "./pagesParsing/searchComponents";
-import IconButton from "../common/IconButton.svelte";
-import Textbox from "../common/Textbox.svelte";
-import UIkit from "uikit";
-import { pipe } from "../common/core";
-import {
-    getScreenInfo
-} from "./pagesParsing/createProps";
-import Button from "../common/Button.svelte";
-import ButtonGroup from "../common/ButtonGroup.svelte";
-import { LayoutIcon, PaintIcon, TerminalIcon } from '../common/Icons/';
-
-import {
-    cloneDeep,
-    join,
-    split,
-    map,
-    keys,
-    isUndefined,
-    last
-} from "lodash/fp";
-import { assign } from "lodash";
-
-let component;
-let name = "";
-let description = "";
-let tagsString = "";
-let nameInvalid = "";
-let componentInfo;
-let modalElement
-let propsValidationErrors = [];
-let originalName="";
-let components;
-let ignoreStore = false;
-
-$: shortName = last(name.split("/"));
-
-store.subscribe(s => {
-    if(ignoreStore) return;
-    component = s.currentFrontEndItem;
-    if(!component) return;
-    originalName = component.name;
-    name = component.name;
-    description = component.description;
-    tagsString = join(", ")(component.tags);
-    componentInfo = s.currentComponentInfo;
-    components = s.components;
-});
-
-const updateComponent = doChange => {
-    const newComponent = cloneDeep(component);
-    doChange(newComponent);
-    component = newComponent;
-    componentInfo = getScreenInfo(components, newComponent);
-}
-
-const onPropsChanged = newProps => {
-    updateComponent(newComponent =>
-        assign(newComponent.props, newProps));
-}
-
+    import PropsView from "./PropsView.svelte";
+    import { store } from "../builderStore";
+    import IconButton from "../common/IconButton.svelte";
+    import Textbox from "../common/Textbox.svelte";
+    import Button from "../common/Button.svelte";
+    import { LayoutIcon, PaintIcon, TerminalIcon } from '../common/Icons/';
+
+    import {
+        cloneDeep,
+        join,
+        split,
+        last
+    } from "lodash/fp";
+    import { assign } from "lodash";
+
+    $: component = $store.currentFrontEndItem;
+    $: componentInfo = $store.currentComponentInfo;
+    $: components = $store.components;
+
+
+    const updateComponent = doChange =>
+        doChange(cloneDeep(component));
+
+    const onPropsChanged = newProps => {
+        updateComponent(newComponent =>
+            assign(newComponent.props, newProps));
+    }
 </script>
 
 <div class="root">
@@ -74,74 +37,54 @@ const onPropsChanged = newProps => {
     </ul>
 
     <div class="component-props-container">
-
-
         <PropsView
                 {componentInfo}
                 {onPropsChanged} />
-
-
     </div>
-
 </div>
 
 <style>
-
-.root {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-
-}
-
-.title {
-    padding: 1rem;
-    display: grid;
-    grid-template-columns: [name] 1fr [actions] auto;
-    color: var(--secondary100);
-    font-size: .9rem;
-    font-weight: bold;
-}
-
-.title > div:nth-child(1) {
-    grid-column-start: name;
-    color: var(--secondary100);
-}
-
-.title > div:nth-child(2) {
-    grid-column-start: actions;
-}
-
-.component-props-container {
-    flex: 1 1 auto;
-    overflow-y: auto;
-}
-
-ul {
-    list-style: none;
-    display: flex;
-    padding: 0;
-}
-
-li {
-    margin-right: 20px;
-    background: none;
-    border-radius: 5px;
-    width: 45px;
-    height: 45px;
-}
-
-li button {
-    width: 100%;
-    height: 100%;
-    background: none;
-    border: none;
-    border-radius: 5px;
-    padding: 12px;
-}
-
-.selected {
-    background: lightblue;
-}
-
+    .root {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+
+    }
+
+    .title > div:nth-child(1) {
+        grid-column-start: name;
+        color: var(--secondary100);
+    }
+
+    .title > div:nth-child(2) {
+        grid-column-start: actions;
+    }
+
+    .component-props-container {
+        flex: 1 1 auto;
+        overflow-y: auto;
+    }
+
+    ul {
+        list-style: none;
+        display: flex;
+        padding: 0;
+    }
+
+    li {
+        margin-right: 20px;
+        background: none;
+        border-radius: 5px;
+        width: 45px;
+        height: 45px;
+    }
+
+    li button {
+        width: 100%;
+        height: 100%;
+        background: none;
+        border: none;
+        border-radius: 5px;
+        padding: 12px;
+    }
 </style>

packages/builder/src/userInterface/EventListSelector.svelte

@@ -1,45 +1,39 @@
 <script>
-import IconButton from "../common/IconButton.svelte";
-import EventSelector from "./EventSelector.svelte";
-import {
-    filter
-} from "lodash/fp";
-import {EVENT_TYPE_MEMBER_NAME} from "../common/eventHandlers";
-
-export let parentProps;
-export let propDef;
-export let onValueChanged;
-export let onValidate = () => {};
-
-let events = [];
-let elementErrors = {};
-
-$: {
-    events = parentProps[propDef.____name];
-}
-
-const addHandler = () => {
-    const newHandler = {parameters:{}};
-    newHandler[EVENT_TYPE_MEMBER_NAME] = "";
-    events = [...events, newHandler];
-    onValueChanged(events);
-}
-
-const onEventHandlerChanged = (oldEvent) => (newEvent) => {
-    const indexOfOldEvent = events.indexOf(oldEvent);
-    const newEvents = [...events];
-    newEvents.splice(
-        events.indexOf(oldEvent),
-        1,
-        newEvent);
-    events = newEvents;
-    onValueChanged(events);
-}
-
-const removeHandler = (index) => () => {
-    events = filter(e => e !== events[index])(events);
-    onValueChanged(events);
-}
+    import IconButton from "../common/IconButton.svelte";
+    import EventSelector from "./EventSelector.svelte";
+    import {
+        filter
+    } from "lodash/fp";
+    import {EVENT_TYPE_MEMBER_NAME} from "../common/eventHandlers";
+
+    export let parentProps;
+    export let propDef;
+    export let onValueChanged;
+
+    $:  events = parentProps[propDef.____name];
+
+    const addHandler = () => {
+        const newHandler = {parameters:{}};
+        newHandler[EVENT_TYPE_MEMBER_NAME] = "";
+        events = [...events, newHandler];
+        onValueChanged(events);
+    }
+
+    const onEventHandlerChanged = (oldEvent) => (newEvent) => {
+        const indexOfOldEvent = events.indexOf(oldEvent);
+        const newEvents = [...events];
+        newEvents.splice(
+            events.indexOf(oldEvent),
+            1,
+            newEvent);
+        events = newEvents;
+        onValueChanged(events);
+    }
+
+    const removeHandler = (index) => () => {
+        events = filter(e => e !== events[index])(events);
+        onValueChanged(events);
+    }
 
 </script>
 
@@ -67,32 +61,28 @@ const removeHandler = (index) => () => {
 
 
 <style>
-
-.addelement-container {
-    cursor: pointer;
-    padding: 3px 0px;
-    text-align: center;
-}
-
-
-
-.addelement-container:hover {
-    background-color: var(--primary25);
-    margin-top: 5px;
-}
-
-
-.control-container {
-    padding-left: 3px;
-    background: var(--secondary10);
-}
-
-.separator {
-    width: 60%;
-    margin: 10px auto;
-    border-style:solid;
-    border-width: 1px 0 0 0;
-    border-color: var(--primary25);
-}
-
+    .addelement-container {
+        cursor: pointer;
+        padding: 3px 0px;
+        text-align: center;
+    }
+
+    .addelement-container:hover {
+        background-color: var(--primary25);
+        margin-top: 5px;
+    }
+
+
+    .control-container {
+        padding-left: 3px;
+        background: var(--secondary10);
+    }
+
+    .separator {
+        width: 60%;
+        margin: 10px auto;
+        border-style:solid;
+        border-width: 1px 0 0 0;
+        border-color: var(--primary25);
+    }
 </style>

packages/builder/src/userInterface/EventSelector.svelte

@@ -1,71 +1,67 @@
 <script>
-import IconButton from "../common/IconButton.svelte";
-import StateBindingControl from "./StateBindingControl.svelte";
-import {
-    find, map, keys, reduce, keyBy
-} from "lodash/fp";
-import { pipe, userWithFullAccess } from "../common/core";
-import { EVENT_TYPE_MEMBER_NAME, allHandlers } from "../common/eventHandlers";
-import { store } from "../builderStore";
-
-export let event;
-export let onChanged;
-export let onRemoved;
-
-let events;
-let eventType;
-let parameters = [];
-
-store.subscribe(s => {
-    events = allHandlers(
-        {hierarchy: s.hierarchy},
+    import IconButton from "../common/IconButton.svelte";
+    import StateBindingControl from "./StateBindingControl.svelte";
+    import {
+        find, map, keys, reduce, keyBy
+    } from "lodash/fp";
+    import { pipe, userWithFullAccess } from "../common/core";
+    import { EVENT_TYPE_MEMBER_NAME, allHandlers } from "../common/eventHandlers";
+    import { store } from "../builderStore";
+
+    export let event;
+    export let onChanged;
+    export let onRemoved;
+
+    let eventType;
+    let parameters = [];
+
+
+    $: events = allHandlers(
+        {hierarchy: $store.hierarchy},
         userWithFullAccess({
             hierarchy: s.hierarchy,
-            actions: keyBy("name")(s.actions)
+            actions: keyBy("name")($store.actions)
         })
     );
-});
-
-$: {
-    if(event) {
-        eventType = event[EVENT_TYPE_MEMBER_NAME];
-        parameters = pipe(event.parameters, [
-            keys,
-            map(k => ({name:k, value:event.parameters[k]}))
-        ]);
-    } else {
-        eventType = "";
-        parameters = [];
-    }
-}
 
-const eventChanged = (type, parameters) => {
-    const paramsAsObject = reduce(
-        (obj, p) => {
-            obj[p.name] = p.value;
-            return obj;
+    $: if(event) {
+            eventType = event[EVENT_TYPE_MEMBER_NAME];
+            parameters = pipe(event.parameters, [
+                keys,
+                map(k => ({name:k, value:event.parameters[k]}))
+            ]);
+        } else {
+            eventType = "";
+            parameters = [];
         }
-        , {}
-    )(parameters)
 
-    const ev = {};
-    ev[EVENT_TYPE_MEMBER_NAME]=type;
-    ev.parameters = paramsAsObject;
+    const eventChanged = (type, parameters) => {
+        const paramsAsObject = reduce(
+            (obj, p) => {
+                obj[p.name] = p.value;
+                return obj;
+            }
+            , {}
+        )(parameters)
+
+        const ev = {};
+        ev[EVENT_TYPE_MEMBER_NAME]=type;
+        ev.parameters = paramsAsObject;
 
-    onChanged(ev);
-}
+        onChanged(ev);
+    }
 
-const eventTypeChanged = (ev) => {
-    const eType = find(e => e.name === ev.target.value)(events);
-    const emptyParameters = map(p => ({name:p, value:""}))(eType.parameters);
-    eventChanged(eType.name, emptyParameters);
-}
+    const eventTypeChanged = (ev) => {
+        const eType = find(e => e.name === ev.target.value)(events);
+        const emptyParameters = map(p => ({name:p, value:""}))(eType.parameters);
+        eventChanged(eType.name, emptyParameters);
+    }
 
-const onParameterChanged = index => val => {
-    const newparameters = [...parameters];
-    newparameters[index].value = val;
-    eventChanged(eventType, newparameters);
-}
+    const onParameterChanged = index => val => {
+        const newparameters = [...parameters];
+        newparameters[index].value = val;
+        eventChanged(eventType, newparameters);
+    }
 
 </script>
 
@@ -77,35 +73,33 @@ const onParameterChanged = index => val => {
         {/each}
     </select>
 
-    <IconButton icon="trash" 
-                size="12" 
+    <IconButton icon="trash"
+                size="12"
                 on:click={onRemoved}/>
 
 </div>
 
 {#if parameters}
-{#each parameters as p, index}
+    {#each parameters as p, index}
 
-<div>
-    {p.name}   
-</div>
-<StateBindingControl  onChanged={onParameterChanged(index)}
-                      value={p.value} />
+        <div>
+            {p.name}
+        </div>
+        <StateBindingControl  onChanged={onParameterChanged(index)}
+                            value={p.value} />
 
-{/each}
+    {/each}
 {/if}
 
 <style>
+    .type-selector-container {
+        display: flex;
+    }
 
-.type-selector-container {
-    display: flex;
-}
-
-.type-selector {
-    border-color: var(--primary50);
-    border-radius: 2px;
-    width: 50px;
-    flex: 1 0 auto;
-}
-
-</style>
+    .type-selector {
+        border-color: var(--primary50);
+        border-radius: 2px;
+        width: 50px;
+        flex: 1 0 auto;
+    }
+</style>

packages/builder/src/userInterface/LayoutEditor.svelte

@@ -1,13 +1,8 @@
 <script>
   import InputGroup from '../common/Inputs/InputGroup.svelte';
 
-  let grid_values = ['', '', '', ''];
-  let column_values = ['', ''];
-  let row_values = ['', ''];
-  let gap_values = [''];
-  let margin_values = ['', '', '', ''];
-  let padding_values = ['', '', '', ''];
-  let zindex_values = [''];
+  export let onStyleChanged = () => {};
+  export let componentInfo;
 
   const tbrl = [
     { placeholder: 'T' },
@@ -22,6 +17,27 @@
   ]
 
   const single = [{ placeholder: '' }];
+
+
+  $: layout  = componentInfo._layout;
+
+  $: positions = {
+    gridarea: ['Grid Area', tbrl, 'small'],
+    column: ['Column', se],
+    row: ['Row', se],
+    gap: ['Gap', single],
+  };
+
+  $: spacing = {
+    margin: ['Margin', tbrl, 'small'],
+    padding: ['Padding', tbrl, 'small']
+  };
+
+  $: zindex = {
+    zindex: ['Z-Index', single]
+  }
+
+  const newValue = n => Array(n).fill('');
 </script>
 
 
@@ -30,48 +46,41 @@
 <h4>Positioning</h4>
 
 <div class="layout-pos">
-  <div class="grid">
-    <h5>Grid Area:</h5>
-    <InputGroup meta={tbrl} bind:values={grid_values} size="small"/>
-  </div>
-
-  <div class="grid">
-    <h5>Column:</h5>
-    <InputGroup meta={se} bind:values={column_values} />
-  </div>
-
-  <div class="grid">
-    <h5>Row:</h5>
-    <InputGroup meta={se} bind:values={row_values} />
-  </div>
-
-  <div class="grid">
-    <h5>Gap:</h5>
-    <InputGroup meta={single} bind:values={gap_values} />
-  </div>
+ {#each Object.entries(positions) as [key, [name, meta, size]]}
+    <div class="grid">
+      <h5>Grid Area:</h5>
+      <InputGroup onStyleChanged={_value => onStyleChanged(key, _value)}
+                  values={layout[key] || newValue(meta.length)}
+                  {meta}
+                  {size} />
+    </div>
+  {/each}
 </div>
 
 <h4>Spacing</h4>
-
 <div class="layout-spacing">
-  <div class="grid">
-    <h5>Margin:</h5>
-    <InputGroup meta={tbrl} bind:values={margin_values} size="small"/>
-  </div>
-
-  <div  class="grid">
-    <h5>Padding:</h5>
-    <InputGroup meta={tbrl} bind:values={padding_values} size="small"/>
-  </div>
+  {#each Object.entries(spacing) as [key, [name, meta, size]]}
+    <div class="grid">
+      <h5>Grid Area:</h5>
+      <InputGroup onStyleChanged={_value => onStyleChanged(key, _value)}
+                  values={layout[key] || newValue(meta.length)}
+                  {meta}
+                  {size} />
+    </div>
+  {/each}
 </div>
 
 <h4>Z-Index</h4>
-
 <div class="layout-layer">
-  <div class="grid">
-    <h5>Z-Index:</h5>
-    <InputGroup meta={single} bind:values={zindex_values}/>
-  </div>
+  {#each Object.entries(zindex) as [key, [name, meta, size]]}
+    <div class="grid">
+      <h5>Grid Area:</h5>
+      <InputGroup onStyleChanged={_value => onStyleChanged(key, _value)}
+                  values={layout[key] || newValue(meta.length)}
+                  {meta}
+                  {size} />
+    </div>
+  {/each}
 </div>
 
 <style>
@@ -112,5 +121,4 @@
   .grid {
     grid-template-columns: 70px 1fr;
   }
-
 </style>

packages/builder/src/userInterface/NewComponent.svelte

@@ -1,65 +1,64 @@
 <script>
-
-import ComponentSelector from "./ComponentSelector.svelte";
-import { store } from "../builderStore";
-import PropsView from "./PropsView.svelte";
-import Textbox from "../common/Textbox.svelte";
-import Button from "../common/Button.svelte";
-import ButtonGroup from "../common/ButtonGroup.svelte";
-import { pipe } from "../common/core";
-import UIkit from "uikit";
-import { isRootComponent } from "./pagesParsing/searchComponents";
-import { splitName } from "./pagesParsing/splitRootComponentName.js"
-
-import {
-    find, filter, some, map, includes
-} from "lodash/fp";
-import { assign } from "lodash";
-
-
-export const show = () => {
-    UIkit.modal(componentSelectorModal).show();
-}
-
-let componentSelectorModal;
-let layoutComponents;
-let layoutComponent;
-let screens;
-let name="";
-let saveAttempted=false;
-
-store.subscribe(s => {
-    layoutComponents = pipe(s.components, [
-        filter(c => c.container),
-        map(c => ({name:c.name, ...splitName(c.name)}))
-    ]);
-
-    layoutComponent = layoutComponent
-                      ? find(c => c.name === layoutComponent.name)(layoutComponents)
-                      : layoutComponents[0];
-
-    screens = s.screens;
-});
-
-const save = () => {
-    saveAttempted = true;
-
-    const isValid = name.length > 0
-                    && !screenNameExists(name)
-                    && layoutComponent;
-
-    if(!isValid) return;
-
-    store.createScreen(name, layoutComponent.name);
-    UIkit.modal(componentSelectorModal).hide();
-}
-
-const cancel = () => {
-    UIkit.modal(componentSelectorModal).hide();
-}
-
-const screenNameExists = (name) =>
-    some(s => s.name.toLowerCase() === name.toLowerCase())(screens)
+    import ComponentSelector from "./ComponentSelector.svelte";
+    import { store } from "../builderStore";
+    import PropsView from "./PropsView.svelte";
+    import Textbox from "../common/Textbox.svelte";
+    import Button from "../common/Button.svelte";
+    import ButtonGroup from "../common/ButtonGroup.svelte";
+    import { pipe } from "../common/core";
+    import UIkit from "uikit";
+    import { isRootComponent } from "./pagesParsing/searchComponents";
+    import { splitName } from "./pagesParsing/splitRootComponentName.js"
+
+    import {
+        find, filter, some, map, includes
+    } from "lodash/fp";
+    import { assign } from "lodash";
+
+
+    export const show = () => {
+        UIkit.modal(componentSelectorModal).show();
+    }
+
+    let componentSelectorModal;
+    let layoutComponents;
+    let layoutComponent;
+    let screens;
+    let name="";
+    let saveAttempted=false;
+
+    store.subscribe(s => {
+        layoutComponents = pipe(s.components, [
+            filter(c => c.container),
+            map(c => ({name:c.name, ...splitName(c.name)}))
+        ]);
+
+        layoutComponent = layoutComponent
+                        ? find(c => c.name === layoutComponent.name)(layoutComponents)
+                        : layoutComponents[0];
+
+        screens = s.screens;
+    });
+
+    const save = () => {
+        saveAttempted = true;
+
+        const isValid = name.length > 0
+                        && !screenNameExists(name)
+                        && layoutComponent;
+
+        if(!isValid) return;
+
+        store.createScreen(name, layoutComponent.name);
+        UIkit.modal(componentSelectorModal).hide();
+    }
+
+    const cancel = () => {
+        UIkit.modal(componentSelectorModal).hide();
+    }
+
+    const screenNameExists = (name) =>
+        some(s => s.name.toLowerCase() === name.toLowerCase())(screens)
 
 </script>
 
@@ -106,27 +105,7 @@ const screenNameExists = (name) =>
 
 
 <style>
-h1 {
-    font-size:1.2em;
-}
-
-.component-option {
-    border-style: solid;
-    border-color: var(--slate);
-    border-width: 0 0 1px 0;
-    padding: 3px;
-}
-
-.component-option:hover {
-    background-color: var(--lightslate);
-}
-
-.component-name {
-    font-size: 11pt;
-}
-
-.lib-name {
-    font-size: 9pt;
-}
-
+    h1 {
+        font-size:1.2em;
+    }
 </style>

packages/builder/src/userInterface/PageView.svelte

@@ -1,44 +1,36 @@
 <script>
 
-import Textbox from "../common/Textbox.svelte";
-import Dropdown from "../common/Dropdown.svelte";
-import Button from "../common/Button.svelte";
-import { store } from "../builderStore";
-import { isRootComponent } from "./pagesParsing/searchComponents";
-import { pipe } from "../common/core";
-import {
-    filter, find, concat
-} from "lodash/fp";
-
-let entryComponent;
-let title = "";
-let components = [];
-let page={};
-const notSeletedComponent = {name:"(none selected)"};
-
-store.subscribe(s => {
-    page = s.pages[s.currentPageName];
-    if(!page) return;
-    title = page.index.title;
-    components = pipe(s.components, [
-        filter(s => !isRootComponent(s)),
+    import Textbox from "../common/Textbox.svelte";
+    import Dropdown from "../common/Dropdown.svelte";
+    import Button from "../common/Button.svelte";
+    import { store } from "../builderStore";
+    import { isRootComponent } from "./pagesParsing/searchComponents";
+    import { pipe } from "../common/core";
+    import {
+        filter, find, concat
+    } from "lodash/fp";
+
+    const notSeletedComponent = {name:"(none selected)"};
+
+    $: page = $store.pages[$store.currentPageName];
+    $: title = page.index.title;
+    $: components = pipe($store.components, [
+        filter(store => !isRootComponent($store)),
         concat([notSeletedComponent])
     ]);
-    entryComponent = find(c => c.name === page.appBody)(components);
-    if(!entryComponent) entryComponent = notSeletedComponent;
-});
-
-const save = () => {
-    if(!title || !entryComponent || entryComponent === notSeletedComponent) return;
-    const page = {
-        index: {
-            title
-        },
-        appBody: entryComponent.name,
+    $: entryComponent = find(c => c.name === page.appBody)(components) || notSeletedComponent;
+
+
+    const save = () => {
+        if(!title || !entryComponent || entryComponent === notSeletedComponent) return;
+        const page = {
+            index: {
+                title
+            },
+            appBody: entryComponent.name,
+        }
+        store.savePage(page);
     }
-    store.savePage(page);
-}
-
 </script>
 
 <div class="root">
@@ -61,11 +53,11 @@ const save = () => {
 </div>
 
 <style>
-.root {
-    padding: 15px;
-}
-.help-text {
-    color: var(--slate);
-    font-size: 10pt;
-}
-</style>
+    .root {
+        padding: 15px;
+    }
+    .help-text {
+        color: var(--slate);
+        font-size: 10pt;
+    }
+</style>

packages/builder/src/userInterface/PagesList.svelte

@@ -1,22 +1,21 @@
 <script>
-import { store } from "../builderStore";
-import getIcon from "../common/icon";
+    import { store } from "../builderStore";
+    import getIcon from "../common/icon";
 
-const getPage = (s, name) => {
-    const props = s.pages[name];
-    return ({name, props});
-}
+    const getPage = (s, name) => {
+        const props = s.pages[name];
+        return ({name, props});
+    }
 
-const pages = [{
-    title: 'Main',
-    id: 'main'
-}, {
-    title: 'Login',
-    id: 'unauthenticated'
-}]
-
-store.setCurrentPage('main')
+    const pages = [{
+        title: 'Main',
+        id: 'main'
+    }, {
+        title: 'Login',
+        id: 'unauthenticated'
+    }]
 
+    store.setCurrentPage('main')
 </script>
 
 <div class="root">
@@ -31,46 +30,44 @@ store.setCurrentPage('main')
 </div>
 
 <style>
+    .root {
+        padding-bottom: 10px;
+        font-size: .9rem;
+        color: var(--secondary50);
+        font-weight: bold;
+        position: relative;
+    }
 
-.root {
-    padding-bottom: 10px;
-    font-size: .9rem;
-    color: var(--secondary50);
-    font-weight: bold;
-    position: relative;
-}
-
-
-select {
-    display: block;
-    font-size: 16px;
-    font-family: sans-serif;
-    font-weight: 700;
-    color: #444;
-    line-height: 1.3;
-    padding: 1em 2.6em 0.9em 1.4em;
-    width: 100%;
-    max-width: 100%;
-    box-sizing: border-box;
-    margin: 0;
-    border: none;
-    border-radius: .5em;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
-    background-color: #fafafa;
-}
 
-.arrow {
-    position: absolute;
-    right: 10px;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-    width: 30px;
-    height: 30px;
-    pointer-events: none;
-    color: var(--primary100);
-}
+    select {
+        display: block;
+        font-size: 16px;
+        font-family: sans-serif;
+        font-weight: 700;
+        color: #444;
+        line-height: 1.3;
+        padding: 1em 2.6em 0.9em 1.4em;
+        width: 100%;
+        max-width: 100%;
+        box-sizing: border-box;
+        margin: 0;
+        border: none;
+        border-radius: .5em;
+        -moz-appearance: none;
+        -webkit-appearance: none;
+        appearance: none;
+        background-color: #fafafa;
+    }
 
+    .arrow {
+        position: absolute;
+        right: 10px;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        width: 30px;
+        height: 30px;
+        pointer-events: none;
+        color: var(--primary100);
+    }
 </style>

packages/builder/src/userInterface/PropControl.svelte

@@ -1,37 +1,25 @@
 <script>
-
-import Checkbox from "../common/Checkbox.svelte";
-import Textbox from "../common/Textbox.svelte";
-import Dropdown from "../common/Dropdown.svelte";
-import EventListSelector from "./EventListSelector.svelte";
-import StateBindingControl from "./StateBindingControl.svelte";
-
-export let setProp = () => {};
-export let disabled;
-export let index;
-export let prop_name;
-export let prop_value;
-export let prop_type = {};
-
-$: isOdd = (index % 2 !== 0);
-
-const setComponentProp = (props) => {
-    setProp(propDef.____name, props);
-}
-
+    import Checkbox from "../common/Checkbox.svelte";
+    import Textbox from "../common/Textbox.svelte";
+    import Dropdown from "../common/Dropdown.svelte";
+    import StateBindingControl from "./StateBindingControl.svelte";
+
+    export let setProp = () => {};
+    export let index;
+    export let prop_name;
+    export let prop_value;
+    export let prop_type = {};
+
+    $: isOdd = (index % 2 !== 0);
+
+    const setComponentProp = (props) => {
+        setProp(propDef.____name, props);
+    }
 </script>
 
 
 <div class="root" >
-
-    {#if prop_type === "event"}
-
-    <!-- <h5>{prop_name}</h5>
-    <EventListSelector parentProps={props}
-                       {propDef}
-                       onValueChanged={setComponentProp} /> -->
-
-    {:else }
+    {#if prop_type !== "event" }
 
     <h5>{prop_name}</h5>
     <StateBindingControl value={prop_value}
@@ -40,27 +28,24 @@ const setComponentProp = (props) => {
                          onChanged={v => setProp(prop_name, v)}/>
 
     {/if}
-
 </div>
 
 <style>
-
-.root {
-    height: 40px;
-    margin-bottom: 15px;
-    display: grid;
-    grid-template-rows: 1fr;
-    grid-template-columns: 70px 1fr;
-    grid-gap: 10px;
-}
-
-h5 {
-    font-size: 12px;
-    font-weight: 700;
-    color: #163057;
-    opacity: 0.6;
-    padding-top: 12px;
-    margin-bottom: 0;
-  }
-
+    .root {
+        height: 40px;
+        margin-bottom: 15px;
+        display: grid;
+        grid-template-rows: 1fr;
+        grid-template-columns: 70px 1fr;
+        grid-gap: 10px;
+    }
+
+    h5 {
+        font-size: 12px;
+        font-weight: 700;
+        color: #163057;
+        opacity: 0.6;
+        padding-top: 12px;
+        margin-bottom: 0;
+    }
 </style>

packages/builder/src/userInterface/PropsView.svelte

@@ -1,44 +1,32 @@
 <script>
+    import { some, includes, filter } from "lodash/fp";
+    import Textbox from "../common/Textbox.svelte";
+    import Dropdown from "../common/Dropdown.svelte";
+    import PropControl from "./PropControl.svelte";
+    import IconButton from "../common/IconButton.svelte";
 
-import {
-    keys, map, some, includes,
-    cloneDeep, isEqual, sortBy,
-    filter, difference
-} from "lodash/fp";
-import { pipe } from "../common/core";
-import { getInstanceProps } from "./pagesParsing/createProps";
-import Checkbox from "../common/Checkbox.svelte";
-import Textbox from "../common/Textbox.svelte";
-import Dropdown from "../common/Dropdown.svelte";
-import PropControl from "./PropControl.svelte";
-import IconButton from "../common/IconButton.svelte";
-
-export let componentInfo;
-export let instanceProps = null;
-export let onPropsChanged = () => {};
-export let components;
-
-let errors = [];
-let props = {};
-let propsDefinitions = [];
-let isInstance = false;
-
-const props_to_ignore = ['_component','_children', '_layout'];
-
-$: propDefs = componentInfo && Object.entries(componentInfo).filter(([name])=> !props_to_ignore.includes(name));
-
-function find_type(prop_name) {
-    if(!componentInfo._component) return;
-    return components.find(({name}) => name === componentInfo._component).props[prop_name];
-}
-
-let setProp = (name, value) => {
-    onPropsChanged(name, value);
-}
-
-const fieldHasError = (propName) =>
-    some(e => e.propName === propName)(errors);
+    export let componentInfo;
+    export let onPropChanged = () => {};
+    export let components;
 
+    let errors = [];
+    let props = {};
+
+    const props_to_ignore = ['_component','_children', '_layout'];
+
+    $: propDefs = componentInfo && Object.entries(componentInfo).filter(([name])=> !props_to_ignore.includes(name));
+
+    function find_type(prop_name) {
+        if(!componentInfo._component) return;
+        return components.find(({name}) => name === componentInfo._component).props[prop_name];
+    }
+
+    let setProp = (name, value) => {
+        onPropChanged(name, value);
+    }
+
+    const fieldHasError = (propName) =>
+        some(e => e.propName === propName)(errors);
 </script>
 
 <div class="root">
@@ -65,20 +53,18 @@ const fieldHasError = (propName) =>
 
 
 <style>
-
-.root {
-    font-size:10pt;
-    width: 100%;
-}
-
-.form-root {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.prop-container {
-    flex: 1 1 auto;
-    min-width: 250px;
-}
-
+    .root {
+        font-size:10pt;
+        width: 100%;
+    }
+
+    .form-root {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .prop-container {
+        flex: 1 1 auto;
+        min-width: 250px;
+    }
 </style>

packages/builder/src/userInterface/SettingsView.svelte

@@ -1,52 +1,46 @@
 <script>
-
-import { store } from "../builderStore";
-import Textbox from "../common/Textbox.svelte";
-import Button from "../common/Button.svelte";
-import IconButton from "../common/IconButton.svelte";
-import { libraryDependencies } from "./pagesParsing/findDependencies";
-import UIkit from "uikit";
-
-let addNewLib = "";
-let addNewStylesheet = "";
-let addComponentError = "";
-let modalElement;
-let components;
-
-store.subscribe(s => {
-    components = s.components;
-})
-
-const removeLibrary = lib => {
-    const dependencies = libraryDependencies(components, lib);
-    if(dependencies.length > 0) return;
-    store.removeComponentLibrary(lib);
-}
-
-const addLib = () => {
-    store.addComponentLibrary(addNewLib)
-    .then(() => {
-        addNewLib = "";
-    });  
-}
-
-const removeStylesheet = stylesheet => {
-    store.removeStylesheet(stylesheet);
-}
-
-const addStylesheet = () => {
-    if(addNewStylesheet)
-        store.addStylesheet(addNewStylesheet);
-}
-
-export const close = () => {
-    UIkit.modal(modalElement).hide();
-}
-
-export const show = () => {
-    UIkit.modal(modalElement).show();
-}
-
+    import { store } from "../builderStore";
+    import Textbox from "../common/Textbox.svelte";
+    import Button from "../common/Button.svelte";
+    import IconButton from "../common/IconButton.svelte";
+    import { libraryDependencies } from "./pagesParsing/findDependencies";
+    import UIkit from "uikit";
+
+    let addNewLib = "";
+    let addNewStylesheet = "";
+    let modalElement;
+
+    $: components = $store.components;
+
+    const removeLibrary = lib => {
+        const dependencies = libraryDependencies(components, lib);
+        if(dependencies.length > 0) return;
+        store.removeComponentLibrary(lib);
+    }
+
+    const addLib = () => {
+        store.addComponentLibrary(addNewLib)
+        .then(() => {
+            addNewLib = "";
+        });
+    }
+
+    const removeStylesheet = stylesheet => {
+        store.removeStylesheet(stylesheet);
+    }
+
+    const addStylesheet = () => {
+        if(addNewStylesheet)
+            store.addStylesheet(addNewStylesheet);
+    }
+
+    export const close = () => {
+        UIkit.modal(modalElement).hide();
+    }
+
+    export const show = () => {
+        UIkit.modal(modalElement).show();
+    }
 </script>
 
 <div bind:this={modalElement} id="new-component-modal" uk-modal>
@@ -65,7 +59,7 @@ export const show = () => {
             <div class="section-container">
                 <p>Component Libraries
                     <span>
-                        <input bind:value={addNewLib} /> 
+                        <input bind:value={addNewLib} />
                         <Button color="primary-outline"
                                 on:click={addLib}>Add</Button>
                     </span>
@@ -73,17 +67,17 @@ export const show = () => {
                 {#each $store.pages.componentLibraries as lib}
                 <div>
                     <span class="row-text">{lib}</span>
-                    <IconButton icon="x" 
+                    <IconButton icon="x"
                                 on:click={() => removeLibrary(lib)}/>
                 </div>
                 {/each}
             </div>
-            
+
 
             <div class="section-container">
                 <p>Stylesheets
                     <span>
-                        <input bind:value={addNewStylesheet} /> 
+                        <input bind:value={addNewStylesheet} />
                         <Button color="primary-outline"
                                     on:click={addStylesheet} >Add</Button>
                     </span>
@@ -91,55 +85,53 @@ export const show = () => {
                 {#each $store.pages.stylesheets as stylesheet}
                 <div>
                     <span class="row-text">{stylesheet}</span>
-                    <IconButton icon="x" 
+                    <IconButton icon="x"
                                 on:click={() => removeStylesheet(stylesheet)}/>
                 </div>
                 {/each}
             </div>
 
-            
+
         </div>
     </div>
 </div>
 
 <style>
-
-.section-container {
-    padding: 15px;
-    border-style: dotted;
-    border-width: 1px;
-    border-color: var(--lightslate);
-    border-radius: 2px;
-}
-
-.section-container:nth-child(1) {
-    margin-bottom: 15px;
-}
-
-.row-text {
-    margin-right: 15px;
-    color: var(--primary100);
-}
-
-input {
-    margin-right: 15px;
-}
-
-p > span {
-    margin-left: 30px;
-}
-
-.header {
-    display: grid;
-    grid-template-columns: [title] 1fr [icon] auto;
-}
-
-.header > div:nth-child(1) {
-    grid-column-start: title;
-}
-
-.header > div:nth-child(2) {
-    grid-column-start: icon;
-}
-
-</style>
+    .section-container {
+        padding: 15px;
+        border-style: dotted;
+        border-width: 1px;
+        border-color: var(--lightslate);
+        border-radius: 2px;
+    }
+
+    .section-container:nth-child(1) {
+        margin-bottom: 15px;
+    }
+
+    .row-text {
+        margin-right: 15px;
+        color: var(--primary100);
+    }
+
+    input {
+        margin-right: 15px;
+    }
+
+    p > span {
+        margin-left: 30px;
+    }
+
+    .header {
+        display: grid;
+        grid-template-columns: [title] 1fr [icon] auto;
+    }
+
+    .header > div:nth-child(1) {
+        grid-column-start: title;
+    }
+
+    .header > div:nth-child(2) {
+        grid-column-start: icon;
+    }
+</style>

packages/builder/src/userInterface/StateBindingControl.svelte

@@ -1,145 +1,130 @@
 <script>
-import {
-    isString
-} from "lodash/fp";
-import IconButton from "../common/IconButton.svelte";
-import {
-    isBinding, getBinding, setBinding
-} from "../common/binding";
-
-export let value="";
-export let onChanged= () => {};
-export let type="";
-export let options=[];
-
-let isBound=false;
-let bindingPath="";
-let bindingFallbackValue="";
-let bindingSource="store";
-let isExpanded = false;
-let forceIsBound = false;
-let canOnlyBind = false;
-
-$: {
-    canOnlyBind = type === "state";
-    if(!forceIsBound && canOnlyBind)
-        forceIsBound = true;
-
-    isBound= forceIsBound || isBinding(value);
-
-    if(isBound) {
-        const binding = getBinding(value);
-        bindingPath= binding.path;
-        bindingFallbackValue= binding.fallback;
-        bindingSource = binding.source || "store";
-    } else {
-        bindingPath="";
-        bindingFallbackValue="";
-        bindingSource="store";
+    import IconButton from "../common/IconButton.svelte";
+    import {
+        isBinding, getBinding, setBinding
+    } from "../common/binding";
+
+    export let value="";
+    export let onChanged= () => {};
+    export let type="";
+    export let options=[];
+
+    let isBound=false;
+    let bindingPath="";
+    let bindingFallbackValue="";
+    let bindingSource="store";
+    let isExpanded = false;
+    let forceIsBound = false;
+    let canOnlyBind = false;
+
+    $: {
+        canOnlyBind = type === "state";
+        if(!forceIsBound && canOnlyBind)
+            forceIsBound = true;
+
+        isBound= forceIsBound || isBinding(value);
+
+        if(isBound) {
+            const binding = getBinding(value);
+            bindingPath= binding.path;
+            bindingFallbackValue= binding.fallback;
+            bindingSource = binding.source || "store";
+        } else {
+            bindingPath="";
+            bindingFallbackValue="";
+            bindingSource="store";
+        }
     }
-}
 
-const clearBinding = () => {
-    forceIsBound = false;
-    onChanged("");
-}
-
-const bind = (path, fallback, source) => {
-    if(!path) {
-        clearBinding("");
-        return;
+    const clearBinding = () => {
+        forceIsBound = false;
+        onChanged("");
     }
-    const binding = setBinding({path, fallback, source});
-    onChanged(binding);
-}
 
-const setBindingPath = ev => {
-    forceIsBound = canOnlyBind;
-    bind(ev.target.value, bindingFallbackValue, bindingSource)
-}
+    const bind = (path, fallback, source) => {
+        if(!path) {
+            clearBinding("");
+            return;
+        }
+        const binding = setBinding({path, fallback, source});
+        onChanged(binding);
+    }
 
-const setBindingFallback = ev => {
-    bind(bindingPath, ev.target.value, bindingSource);
-}
+    const setBindingPath = ev => {
+        forceIsBound = canOnlyBind;
+        bind(ev.target.value, bindingFallbackValue, bindingSource)
+    }
 
-const setBindingSource = ev => {
-    bind(bindingPath, bindingFallbackValue, ev.target.value);
-}
+    const setBindingFallback = ev => {
+        bind(bindingPath, ev.target.value, bindingSource);
+    }
 
-// const makeBinding = () => {
-//     forceIsBound=true;
-//     isExpanded=true;
-// }
+    const setBindingSource = ev => {
+        bind(bindingPath, bindingFallbackValue, ev.target.value);
+    }
 
 </script>
 
 {#if isBound}
-<div>
-    <div class="bound-header">
-        <div>{isExpanded ? "" : bindingPath}</div>
-        <IconButton icon={isExpanded ? "chevron-up" : "chevron-down"}
-                    size="12"
-                    on:click={() => isExpanded=!isExpanded}/>
-        {#if !canOnlyBind}
-        <IconButton icon="trash"
-                    size="12"
-                    on:click={clearBinding}/>
-        {/if}
-    </div>
-    {#if isExpanded}
     <div>
-        <div class="binding-prop-label">Binding Path</div>
-        <input class="uk-input uk-form-small"
-               value={bindingPath}
-               on:change={setBindingPath} >
-        <div class="binding-prop-label">Fallback Value</div>
-        <input class="uk-input uk-form-small"
-               value={bindingFallbackValue}
-               on:change={setBindingFallback} >
-        <div class="binding-prop-label">Binding Source</div>
-        <select class="uk-select uk-form-small"
-            value={bindingSource}
-            on:change={setBindingSource}>
-
-            <option>store</option>
-            <option>context</option>
-
-        </select>
-    </div>
-    {/if}
+        <div class="bound-header">
+            <div>{isExpanded ? "" : bindingPath}</div>
+            <IconButton icon={isExpanded ? "chevron-up" : "chevron-down"}
+                        size="12"
+                        on:click={() => isExpanded=!isExpanded}/>
+            {#if !canOnlyBind}
+                <IconButton icon="trash"
+                            size="12"
+                            on:click={clearBinding}/>
+            {/if}
+        </div>
+        {#if isExpanded}
+            <div>
+                <div class="binding-prop-label">Binding Path</div>
+                <input class="uk-input uk-form-small"
+                    value={bindingPath}
+                    on:change={setBindingPath} >
+                <div class="binding-prop-label">Fallback Value</div>
+                <input class="uk-input uk-form-small"
+                    value={bindingFallbackValue}
+                    on:change={setBindingFallback} >
+                <div class="binding-prop-label">Binding Source</div>
+                <select class="uk-select uk-form-small"
+                    value={bindingSource}
+                    on:change={setBindingSource}>
+
+                    <option>store</option>
+                    <option>context</option>
+
+                </select>
+            </div>
+        {/if}
 
-</div>
+    </div>
 {:else}
-<div class="unbound-container">
-
-    {#if type === "bool"}
+    <div class="unbound-container">
+
+        {#if type === "bool"}
+            <div>
+                <IconButton icon={value == true ? "check-square" : "square"}
+                            size="19"
+                            on:click={() => onChanged(!value)} />
+            </div>
+        {:else if type === "options"}
+            <select class="uk-select uk-form-small"
+                    value={value}
+                    on:change={ev => onChanged(ev.target.value)}>
+                {#each options as option}
+                    <option value={option}>{option}</option>
+                {/each}
+            </select>
+        {:else}
+            <input on:change={ev => onChanged(ev.target.value)}
+                bind:value={value}
+                style="flex: 1 0 auto;" />
+        {/if}
 
-    <div>
-        <IconButton icon={value == true ? "check-square" : "square"}
-                    size="19"
-                    on:click={() => onChanged(!value)} />
     </div>
-
-    {:else if type === "options"}
-
-    <select class="uk-select uk-form-small"
-            value={value}
-            on:change={ev => onChanged(ev.target.value)}>
-        {#each options as option}
-        <option value={option}>{option}</option>
-        {/each}
-    </select>
-
-    {:else}
-
-    <input on:change={ev => onChanged(ev.target.value)}
-           bind:value={value}
-           style="flex: 1 0 auto;" />
-
-
-    {/if}
-
-</div>
 {/if}
 
 

packages/builder/src/userInterface/UserInterfaceRoot.svelte

@@ -1,28 +1,25 @@
 <script>
-
-import ComponentsHierarchy from "./ComponentsHierarchy.svelte";
-import PagesList from "./PagesList.svelte"
-import { store } from "../builderStore";
-import getIcon from "../common/icon";
-import { isComponent } from "./pagesParsing/searchComponents";
-import IconButton from "../common/IconButton.svelte";
-import Modal from "../common/Modal.svelte";
-import NewComponent from "./NewComponent.svelte";
-import CurrentItemPreview from "./CurrentItemPreview.svelte";
-import SettingsView from "./SettingsView.svelte";
-import PageView from "./PageView.svelte";
-import ComponentsPaneSwitcher from "./ComponentsPaneSwitcher.svelte";
-
-let newComponentPicker;
-const newComponent = () => {
-    newComponentPicker.show();
-}
-
-let settingsView;
-const settings = () => {
-    settingsView.show();
-}
-
+    import ComponentsHierarchy from "./ComponentsHierarchy.svelte";
+    import PagesList from "./PagesList.svelte"
+    import { store } from "../builderStore";
+    import IconButton from "../common/IconButton.svelte";
+    import Modal from "../common/Modal.svelte";
+    import NewComponent from "./NewComponent.svelte";
+    import CurrentItemPreview from "./CurrentItemPreview.svelte";
+    import SettingsView from "./SettingsView.svelte";
+    import PageView from "./PageView.svelte";
+    import ComponentsPaneSwitcher from "./ComponentsPaneSwitcher.svelte";
+
+    let newComponentPicker;
+
+    const newComponent = () => {
+        newComponentPicker.show();
+    }
+
+    let settingsView;
+    const settings = () => {
+        settingsView.show();
+    }
 </script>
 
 <div class="root">
@@ -44,11 +41,6 @@ const settings = () => {
 
                 <span class="components-nav-header">Screens</span>
                 <div>
-                    <!-- <IconButton icon="settings"
-                                size="14px"
-                                on:click={settings}/> -->
-                    <!-- <IconButton icon="plus"
-                                on:click={newComponent}/> -->
                     <button on:click={newComponent}>+</button>
                 </div>
             </div>
@@ -61,16 +53,16 @@ const settings = () => {
 
     <div class="preview-pane">
         {#if $store.currentFrontEndType === "screen"}
-        <CurrentItemPreview />
+            <CurrentItemPreview />
         {:else if $store.currentFrontEndType === "page"}
-        <PageView />
+            <PageView />
         {/if}
     </div>
 
     {#if $store.currentFrontEndType === "screen"}
-    <div class="components-pane">
-        <ComponentsPaneSwitcher />
-    </div>
+        <div class="components-pane">
+            <ComponentsPaneSwitcher />
+        </div>
     {/if}
 
 </div>
@@ -81,109 +73,108 @@ const settings = () => {
 
 
 <style>
-button {
-    cursor: pointer;
-    outline: none;
-    border: none;
-    border-radius: 5px;
-    background: var(--background-button);
-
-    width: 1.8rem;
-    height: 1.8rem;
-    padding-bottom: 10px;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    font-size: 1.2rem;
-    font-weight: 700;
-    color: var(--button-text);
-}
-
-.root {
-    display: grid;
-    grid-template-columns: 290px 1fr 300px;
-    height: 100%;
-    width: 100%;
-    background: #fafafa;
-}
-
-.ui-nav {
-    grid-column: 1;
-    background-color: var(--secondary5);
-    height: 100%;
-    padding: 0 1.5rem 0rem 1.5rem
-}
-
-.preview-pane {
-    grid-column: 2;
-    margin: 80px 60px;
-    background: #fff;
-    border-radius: 5px;
-    box-shadow: 0 0px 6px rgba(0,0,0,0.05)
-}
-
-.components-pane {
-    grid-column: 3;
-    background-color: var(--secondary5);
-    min-height: 0px;
-    overflow-y: hidden;
-}
-
-.components-nav-header {
-    font-size: 0.75rem;
-    color: #999;
-    text-transform: uppercase;
-}
-
-.nav-group-header {
-    font-size: .9rem;
-    padding-left: 1rem;
-}
-
-.nav-items-container {
-    padding: 1rem 0rem 0rem 0rem;
-}
-
-.nav-group-header {
-    display: flex;
-    padding: 2rem 0 0 0;
-    font-size: .9rem;
-    font-weight: bold;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.nav-group-header>div:nth-child(1) {
-    padding: 0rem .5rem 0rem 0rem;
-    vertical-align: bottom;
-    grid-column-start: icon;
-    margin-right: 5px;
-}
-
-.nav-group-header>span:nth-child(2) {
-    margin-left:5px;
-    vertical-align: bottom;
-    grid-column-start: title;
-    margin-top:auto;
-}
-
-.nav-group-header>div:nth-child(3) {
-    vertical-align: bottom;
-    grid-column-start: button;
-    cursor: pointer;
-    color: var(--primary75);
-}
-
-.nav-group-header>div:nth-child(3):hover {
-    color: var(--primary75);
-}
-
-.navigator-title {
-    text-transform: uppercase;
-    font-weight: 400;
-    color: #999;
-}
-
+    button {
+        cursor: pointer;
+        outline: none;
+        border: none;
+        border-radius: 5px;
+        background: var(--background-button);
+
+        width: 1.8rem;
+        height: 1.8rem;
+        padding-bottom: 10px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        font-size: 1.2rem;
+        font-weight: 700;
+        color: var(--button-text);
+    }
+
+    .root {
+        display: grid;
+        grid-template-columns: 290px 1fr 300px;
+        height: 100%;
+        width: 100%;
+        background: #fafafa;
+    }
+
+    .ui-nav {
+        grid-column: 1;
+        background-color: var(--secondary5);
+        height: 100%;
+        padding: 0 1.5rem 0rem 1.5rem
+    }
+
+    .preview-pane {
+        grid-column: 2;
+        margin: 80px 60px;
+        background: #fff;
+        border-radius: 5px;
+        box-shadow: 0 0px 6px rgba(0,0,0,0.05)
+    }
+
+    .components-pane {
+        grid-column: 3;
+        background-color: var(--secondary5);
+        min-height: 0px;
+        overflow-y: hidden;
+    }
+
+    .components-nav-header {
+        font-size: 0.75rem;
+        color: #999;
+        text-transform: uppercase;
+    }
+
+    .nav-group-header {
+        font-size: .9rem;
+        padding-left: 1rem;
+    }
+
+    .nav-items-container {
+        padding: 1rem 0rem 0rem 0rem;
+    }
+
+    .nav-group-header {
+        display: flex;
+        padding: 2rem 0 0 0;
+        font-size: .9rem;
+        font-weight: bold;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .nav-group-header>div:nth-child(1) {
+        padding: 0rem .5rem 0rem 0rem;
+        vertical-align: bottom;
+        grid-column-start: icon;
+        margin-right: 5px;
+    }
+
+    .nav-group-header>span:nth-child(2) {
+        margin-left:5px;
+        vertical-align: bottom;
+        grid-column-start: title;
+        margin-top:auto;
+    }
+
+    .nav-group-header>div:nth-child(3) {
+        vertical-align: bottom;
+        grid-column-start: button;
+        cursor: pointer;
+        color: var(--primary75);
+    }
+
+    .nav-group-header>div:nth-child(3):hover {
+        color: var(--primary75);
+    }
+
+    .navigator-title {
+        text-transform: uppercase;
+        font-weight: 400;
+        color: #999;
+    }
 </style>