From b10fa60d1b5d9476b35f1680e5a6c6008b09c5d6 Mon Sep 17 00:00:00 2001
From: omigamedev <omarator@gmail.com>
Date: Wed, 25 Sep 2019 22:59:04 +0200
Subject: [PATCH] split layout.xml into multiple files loaded on demand, update
 changelog

---
 PanoPainter.vcxproj              |   23 +
 PanoPainter.vcxproj.filters      |   72 ++
 data/dialogs/about.xml           |   68 ++
 data/dialogs/brush-export.xml    |   63 ++
 data/dialogs/changelog.xml       |  161 ++++
 data/dialogs/cloud-browse.xml    |   37 +
 data/dialogs/color-picker.xml    |  103 ++
 data/dialogs/doc-browse.xml      |   43 +
 data/dialogs/doc-new.xml         |   33 +
 data/dialogs/doc-open.xml        |   43 +
 data/dialogs/doc-resize.xml      |   31 +
 data/dialogs/doc-save.xml        |   31 +
 data/dialogs/input-box.xml       |   27 +
 data/dialogs/layer-rename.xml    |   27 +
 data/dialogs/message-box.xml     |   24 +
 data/dialogs/panel-brushes.xml   |  108 +++
 data/dialogs/panel-floating.xml  |   26 +
 data/dialogs/panel-grid.xml      |  133 +++
 data/dialogs/panel-layers.xml    |   56 ++
 data/dialogs/panel-presets.xml   |  103 ++
 data/dialogs/panel-quick.xml     |   46 +
 data/dialogs/panel-stroke.xml    |  513 ++++++++++
 data/dialogs/progress-bar.xml    |   25 +
 data/dialogs/settings.xml        |   44 +
 data/dialogs/template.xml        |    9 +
 data/dialogs/usermanual.xml      |   53 ++
 data/layout.xml                  | 1506 ------------------------------
 src/node.cpp                     |   58 +-
 src/node.h                       |   17 +-
 src/node_about.cpp               |    5 +-
 src/node_changelog.cpp           |    5 +-
 src/node_dialog_browse.cpp       |   10 +-
 src/node_dialog_cloud.cpp        |   10 +-
 src/node_dialog_export_ppbr.cpp  |    5 +-
 src/node_dialog_layer_rename.cpp |    5 +-
 src/node_dialog_open.cpp         |   15 +-
 src/node_dialog_picker.cpp       |    3 +-
 src/node_dialog_resize.cpp       |    5 +-
 src/node_input_box.cpp           |   13 +-
 src/node_message_box.cpp         |   11 +-
 src/node_panel_brush.cpp         |    8 +-
 src/node_panel_color.cpp         |    2 +-
 src/node_panel_floating.cpp      |    2 +-
 src/node_panel_grid.cpp          |    2 +-
 src/node_panel_layer.cpp         |    7 +-
 src/node_panel_quick.cpp         |    2 +-
 src/node_panel_stroke.cpp        |    2 +-
 src/node_popup_menu.cpp          |    4 +-
 src/node_progress_bar.cpp        |    7 +-
 src/node_settings.cpp            |    5 +-
 src/node_usermanual.cpp          |    5 +-
 51 files changed, 2009 insertions(+), 1607 deletions(-)
 create mode 100644 data/dialogs/about.xml
 create mode 100644 data/dialogs/brush-export.xml
 create mode 100644 data/dialogs/changelog.xml
 create mode 100644 data/dialogs/cloud-browse.xml
 create mode 100644 data/dialogs/color-picker.xml
 create mode 100644 data/dialogs/doc-browse.xml
 create mode 100644 data/dialogs/doc-new.xml
 create mode 100644 data/dialogs/doc-open.xml
 create mode 100644 data/dialogs/doc-resize.xml
 create mode 100644 data/dialogs/doc-save.xml
 create mode 100644 data/dialogs/input-box.xml
 create mode 100644 data/dialogs/layer-rename.xml
 create mode 100644 data/dialogs/message-box.xml
 create mode 100644 data/dialogs/panel-brushes.xml
 create mode 100644 data/dialogs/panel-floating.xml
 create mode 100644 data/dialogs/panel-grid.xml
 create mode 100644 data/dialogs/panel-layers.xml
 create mode 100644 data/dialogs/panel-presets.xml
 create mode 100644 data/dialogs/panel-quick.xml
 create mode 100644 data/dialogs/panel-stroke.xml
 create mode 100644 data/dialogs/progress-bar.xml
 create mode 100644 data/dialogs/settings.xml
 create mode 100644 data/dialogs/template.xml
 create mode 100644 data/dialogs/usermanual.xml

diff --git a/PanoPainter.vcxproj b/PanoPainter.vcxproj
index d16925e..ace9142 100644
--- a/PanoPainter.vcxproj
+++ b/PanoPainter.vcxproj
@@ -527,6 +527,29 @@
     <Natvis Include="libs\glm\util\glm.natvis" />
   </ItemGroup>
   <ItemGroup>
+    <Xml Include="data\dialogs\about.xml" />
+    <Xml Include="data\dialogs\brush-export.xml" />
+    <Xml Include="data\dialogs\changelog.xml" />
+    <Xml Include="data\dialogs\cloud-browse.xml" />
+    <Xml Include="data\dialogs\color-picker.xml" />
+    <Xml Include="data\dialogs\doc-browse.xml" />
+    <Xml Include="data\dialogs\doc-new.xml" />
+    <Xml Include="data\dialogs\doc-open.xml" />
+    <Xml Include="data\dialogs\doc-resize.xml" />
+    <Xml Include="data\dialogs\doc-save.xml" />
+    <Xml Include="data\dialogs\input-box.xml" />
+    <Xml Include="data\dialogs\layer-rename.xml" />
+    <Xml Include="data\dialogs\message-box.xml" />
+    <Xml Include="data\dialogs\panel-floating.xml" />
+    <Xml Include="data\dialogs\panel-grid.xml" />
+    <Xml Include="data\dialogs\panel-layers.xml" />
+    <Xml Include="data\dialogs\panel-brushes.xml" />
+    <Xml Include="data\dialogs\panel-presets.xml" />
+    <Xml Include="data\dialogs\panel-quick.xml" />
+    <Xml Include="data\dialogs\panel-stroke.xml" />
+    <Xml Include="data\dialogs\progress-bar.xml" />
+    <Xml Include="data\dialogs\settings.xml" />
+    <Xml Include="data\dialogs\usermanual.xml" />
     <Xml Include="data\layout.xml">
       <SubType>Designer</SubType>
       <DeploymentContent Condition="'$(Configuration)|$(Platform)'=='Release|x64'">
diff --git a/PanoPainter.vcxproj.filters b/PanoPainter.vcxproj.filters
index bab1563..95a1f20 100644
--- a/PanoPainter.vcxproj.filters
+++ b/PanoPainter.vcxproj.filters
@@ -61,6 +61,9 @@
     <Filter Include="libs\glad">
       <UniqueIdentifier>{ca37521b-213f-4bcf-acfd-eda1483a30b2}</UniqueIdentifier>
     </Filter>
+    <Filter Include="extras\dialogs">
+      <UniqueIdentifier>{5ecb54ed-7c3d-46fd-9b5d-227abdbc5954}</UniqueIdentifier>
+    </Filter>
   </ItemGroup>
   <ItemGroup>
     <ClCompile Include="src\app.cpp">
@@ -635,6 +638,75 @@
     <Xml Include="data\layout.xml">
       <Filter>extras</Filter>
     </Xml>
+    <Xml Include="data\dialogs\changelog.xml">
+      <Filter>extras\dialogs</Filter>
+    </Xml>
+    <Xml Include="data\dialogs\about.xml">
+      <Filter>extras\dialogs</Filter>
+    </Xml>
+    <Xml Include="data\dialogs\usermanual.xml">
+      <Filter>extras\dialogs</Filter>
+    </Xml>
+    <Xml Include="data\dialogs\brush-export.xml">
+      <Filter>extras\dialogs</Filter>
+    </Xml>
+    <Xml Include="data\dialogs\panel-layers.xml">
+      <Filter>extras\dialogs</Filter>
+    </Xml>
+    <Xml Include="data\dialogs\panel-brushes.xml">
+      <Filter>extras\dialogs</Filter>
+    </Xml>
+    <Xml Include="data\dialogs\panel-stroke.xml">
+      <Filter>extras\dialogs</Filter>
+    </Xml>
+    <Xml Include="data\dialogs\panel-grid.xml">
+      <Filter>extras\dialogs</Filter>
+    </Xml>
+    <Xml Include="data\dialogs\panel-quick.xml">
+      <Filter>extras\dialogs</Filter>
+    </Xml>
+    <Xml Include="data\dialogs\color-picker.xml">
+      <Filter>extras\dialogs</Filter>
+    </Xml>
+    <Xml Include="data\dialogs\input-box.xml">
+      <Filter>extras\dialogs</Filter>
+    </Xml>
+    <Xml Include="data\dialogs\message-box.xml">
+      <Filter>extras\dialogs</Filter>
+    </Xml>
+    <Xml Include="data\dialogs\progress-bar.xml">
+      <Filter>extras\dialogs</Filter>
+    </Xml>
+    <Xml Include="data\dialogs\layer-rename.xml">
+      <Filter>extras\dialogs</Filter>
+    </Xml>
+    <Xml Include="data\dialogs\doc-resize.xml">
+      <Filter>extras\dialogs</Filter>
+    </Xml>
+    <Xml Include="data\dialogs\doc-browse.xml">
+      <Filter>extras\dialogs</Filter>
+    </Xml>
+    <Xml Include="data\dialogs\doc-new.xml">
+      <Filter>extras\dialogs</Filter>
+    </Xml>
+    <Xml Include="data\dialogs\doc-save.xml">
+      <Filter>extras\dialogs</Filter>
+    </Xml>
+    <Xml Include="data\dialogs\cloud-browse.xml">
+      <Filter>extras\dialogs</Filter>
+    </Xml>
+    <Xml Include="data\dialogs\settings.xml">
+      <Filter>extras\dialogs</Filter>
+    </Xml>
+    <Xml Include="data\dialogs\doc-open.xml">
+      <Filter>extras\dialogs</Filter>
+    </Xml>
+    <Xml Include="data\dialogs\panel-floating.xml">
+      <Filter>extras\dialogs</Filter>
+    </Xml>
+    <Xml Include="data\dialogs\panel-presets.xml">
+      <Filter>extras\dialogs</Filter>
+    </Xml>
   </ItemGroup>
   <ItemGroup>
     <None Include="data\shaders\texture.glsl">
diff --git a/data/dialogs/about.xml b/data/dialogs/about.xml
new file mode 100644
index 0000000..0fea3a1
--- /dev/null
+++ b/data/dialogs/about.xml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+  
+  <layout id="about">
+    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="1">
+      <border thickness="1" border-color=".2" pad="3" max-width="650" dir="col" width="80%" height="80%">
+        <border width="100%" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
+          <text text="About PanoPainter"></text>
+        </border>
+        <border width="100%" height="100%" color="0 0 0 .9" pad="10" dir="col">
+          <!--window content-->
+          <border color=".2" width="100%" height="1" grow="1">
+            <scroll pad="10" margin="5" color=".3 .3 .3 .4" height="100%" dir="col" wrap="0" shrink="1">
+              <text margin="0 0 0 5" text=
+"
+--------------------------------------------------- ABOUT PANOPAINTER -----------------------------------------------------
+PanoPainter - Copyright 2018 OmixLab Ltd
+  Thanks for using PanoPainter.
+  My name is Omar Mohamed Ali Mudhir and I'm the developer of this unique application.
+  In the late 2016 Facebook started to make it possible for users to post 360 content
+  captured from the first 360 cameras born after the advent of the VR to the market.
+  
+  That's where me and a bunch or artists started to wonder about making art in 360.
+  I then started coding in my spare time to create something that would have helped 
+  artists in the long process of creating a panoramic painting (panopainting).
+  
+  Today this software has evolved a lot and reached a mature version ready for early 
+  adopters that want to break the rules of traditional digital art and get into the 
+  future of immersive painting.
+  
+  Feel free to follow me on:
+  - Instagram: @panopainter
+  - Twitter: @panopainter
+  - Facebook: fb.me/panopainter
+  - Reddit: reddit.com/r/panopainter
+  
+                      
+------------------------------------------------- FREE SOFTWARE LICENSES -------------------------------------------------
+Free brushes:
+  The free brushes are provided by the freely available Brush Pack v3 from Fenris31
+  Link: https://www.deviantart.com/fenris31/art/Brush-Pack-v3-549566626
+  
+Roboto Font License:
+  Copyright 2018 OmixLab Ltd
+  Licensed under the Apache License, Version 2.0 (the 'License');
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+      http://www.apache.org/licenses/LICENSE-2.0
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an 'AS IS' BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License."/>
+            </scroll>
+          </border>
+          <!--footer buttons-->
+          <node height="60" dir="row" justify="flex-end">
+            <button id="btn-ok" text="Ok" width="100" height="30" margin="5 0 0 0"/>
+          </node>
+        </border>
+      </border>
+    </border>
+  </layout>
+
+</root>
diff --git a/data/dialogs/brush-export.xml b/data/dialogs/brush-export.xml
new file mode 100644
index 0000000..e26c12e
--- /dev/null
+++ b/data/dialogs/brush-export.xml
@@ -0,0 +1,63 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+
+  <layout id="dialog-brush-upload">
+    <border id="background" positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
+      <border id="form" thickness="1" border-color=".2" pad="3" width="650" dir="col">
+        <border id="title" width="100%" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
+          <text text="Export Brushes"></text>
+        </border>
+        <border width="100%" color="0 0 0 .9" pad="10" dir="row" grow="1">
+          <border id="files-list" dir="row" wrap="1" flood-events="1" grow="1" height="100%" margin="0 0 0 0" pad="10" color=".2 .2 .2 1">
+            <node dir="col" margin="0 20 0 0">
+              <image-texture id="header-tex" width="256" height="128" pad="10">
+                <text id="header-descr" text="Header image.\nSelect a 256x128 pixels image that will be displayed as a preview for this brushes collection." text-wrap-width="230" color=".5"/>
+              </image-texture>
+              <node dir="row" width="256" height="30" justify="center" margin="10 0 0 0">
+                <button id="header-gen" text="Generate" grow="1" height="100%"/>
+                <button id="header-open" text="Open" grow="1" height="100%"/>
+                <button id="header-clear" text="Clear" grow="1" height="100%"/>
+              </node>
+              <border os="win,osx,android" color=".4" grow="1" pad="5" margin="10 0 0 0" justify="center">
+                <node dir="row" align="center">
+                  <checkbox id="export-data" width="30" aspect-ratio="1" margin="0 5 0 0"/>
+                  <text text="Export data"/>
+                  <node grow="1"/>
+                  <button os="osx" id="pick-dest" text="Pick dest." pad="5"/>
+                </node>
+                <text color=".7" text-wrap-width="256" text="Save the generated preview images to a separete folder."/>
+                <text id="dest-path" margin="5 0 0 0" text-wrap-width="256"/>
+              </border>
+            </node>
+            <node grow="1" dir="col">
+              <node dir="row" height="30" align="center" margin="0 0 4 0">
+                <text text="Author" margin="0 5 0 0"/>
+                <text-input id="info-author" pad="5" grow="1" height="30" color=".3"/>
+              </node>
+              <node dir="row" height="30" align="center" margin="0 0 4 0">
+                <text text="Email" margin="0 5 0 0"/>
+                <text-input id="info-email" pad="5" grow="1" height="30" color=".3"/>
+              </node>
+              <node dir="row" height="30" align="center" margin="0 0 4 0">
+                <text text="URL" margin="0 5 0 0"/>
+                <text-input id="info-url" pad="5" grow="1" height="30" color=".3"/>
+              </node>
+              <node dir="row" grow="1">
+                <text text="Description" margin="0 5 0 0"/>
+                <text-input id="info-descr" text-vertical-align="top" pad="5" grow="1" height="100%" color=".3" multiline="1"/>
+              </node>
+            </node>
+          </border>
+        </border>
+        <node id="footer" height="50" dir="row" align="flex-end" justify="flex-end" pad="10">
+          <button id="btn-ok" text="Export" width="100" height="30" margin="0 10 0 0"/>
+          <button id="btn-cancel" text="Cancel" width="60" height="30"/>
+        </node>
+      </border>
+    </border>
+  </layout>
+
+</root>
diff --git a/data/dialogs/changelog.xml b/data/dialogs/changelog.xml
new file mode 100644
index 0000000..4186806
--- /dev/null
+++ b/data/dialogs/changelog.xml
@@ -0,0 +1,161 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+  <!-- DIALOG CHANGELOG -->
+  <layout id="changelog">
+    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
+      <border thickness="1" border-color=".2" pad="3" max-width="650" dir="col" width="80%" height="80%">
+        <border width="100%" height="30" color=".2 .2 .2 .9" align="center" justify="center">
+          <text text="What's new in PanoPainter"/>
+        </border>
+        <border width="100%" height="100%" color="0 0 0 .9" pad="10" dir="col">
+          <!--window content-->
+          <border color=".2" width="100%" height="1" grow="1">
+            <scroll pad="10" margin="5" color=".3 .3 .3 .4" dir="col" shrink="1">
+              <text margin="0 0 0 5" font-size="30" text="0.2.2"/>
+              <text margin="10 0 0 5" text=
+"- Add Export cube-map faces
+- Add layer name when exporting separate layers
+- Add import options on brush preset panel when empty
+- Add PPBR (PanoPainter BRush) format import/export
+- Add floating panels title
+- Add file/folder picking
+- Fix iOS black image export
+- Fix iOS crash on high dpi detection
+- Fix layer move buttons order
+- Fix layer multiply mode blending
+- Fix multiple panels sync views
+- Fix rescale text nodes with UI
+- Fix lightmap rendering crash
+- Fix iOS/MacOS files icon
+- Fix stroke preview rendering scale
+"/>
+              <text margin="20 0 0 5" font-size="30" text="0.2.1"/>
+              <text margin="10 0 0 5" text=
+"- Queue based multithreading architecture
+- Improve blending with float 16/32 framebuffer
+- Use tick icon on checkboxes
+- Improved battery life
+- Improve file browser thumbnails
+- Unique recovery file name
+- Layers sorted from top to bottom
+- Limit camera zoom
+- Add clipboard support on Android
+- Add UI and Viewport scale options
+- Add shortcut to rotate canvas with spacebar
+- Fix bucket fill tool
+- Fix stroke samples computation
+- Fix PPI file association on OSX and iOS
+- Fix color bleeding due to interpolation
+- Fix layer index on undo/redo
+- Fix Import image aliasing
+- Fix color picking tool
+- Fix color from clipboard update global
+- Fix VR stroke rendering
+- Fix hard-mix stroke shader
+- Fix brush outline on scaled viewport
+- Fix UI on iOS device rotation
+- Fix exporting
+"/>
+              <text margin="20 0 0 5" font-size="30" text="0.2.0"/>
+              <text margin="10 0 0 5" text=
+"- Steam HotFix: check for OpenGL debug extensions before enabling
+"/>
+              <text margin="20 0 0 5" font-size="30" text="0.1.9"/>
+              <text margin="10 0 0 5" text=
+"- Fix 3D Depth Export
+- Improve Undo/Redo to better support layers and guides
+- Implement Oculus Quest rendering
+"/>
+              <text margin="20 0 0 5" font-size="30" text="0.1.8"/>
+              <text margin="10 0 0 5" text=
+"- Floating and docking panels.
+- Left-handed UI.
+- Improved rendering performance.
+- Better high DPI devices support.
+- Raytraced shadows generation.
+- Multiple lasso selection.
+- VR mode painting.
+- Splash screen.
+"/>
+              <text margin="20 0 0 5" font-size="30" text="0.1.7"/>
+              <text margin="10 0 0 5" text=
+"- Completely redesigned UI.
+- Side panel for quick access to brush settings.
+- Popup panels.
+- New heightmap tool for landscapes generation.
+- Raytraced shadows generation.
+- Multithreading for faster computation.
+- Overall performance optimization.
+- Import Photoshop Brushes ABR file.
+- Improved color picker.
+- Layer blending modes.
+- Improved Brush Engine with Dual-Brush and Patterns.
+"/>
+              <text margin="20 0 0 5" font-size="30" text="0.1.6"/>
+              <text margin="10 0 0 5" text=
+"- [FIX] Set system message box on top when recovery
+- [FIX] Skip Apple Pencil first samples to overcome the initial pressure spike
+- [WIN] Add initial VR support with openvr
+- [FIX] Layer delete order bug
+- [FIX] Improve brush preview during the stroke
+- Add import flat images
+- Add copy/cut and transform selection
+- Add camera reset menu in Layers
+- Add share button on iOS and MacOS
+"/>
+              <text margin="20 0 0 5" font-size="30" text="0.1.4"/>
+              <text margin="10 0 0 5" text=
+"- [WIN] Add: Windows Store package installer
+- [OSX] Quick Look plugin for thumbnail generation
+- [FIX] Browse Dialog crashing at empty files
+- Implement a Fail-safe two-stage save document
+- [IOS,OSX] Add: Crash Recovery routine, which saves a recovery.ppi after crashing
+- [IOS,OSX] Add: HockeyApp crash report
+- Add: Resize document, allows to change resolution after the document creation
+- Internal: Text node wrap text per-char
+- [OSX] Open File System Dialog for PPI files
+- Add: text cursor caret for a better UX
+- Add: Current working directory workflow, allows you to change the current
+  open/save/export directory
+"/>
+              <text margin="20 0 0 5" font-size="30" text="0.1.3"/>
+              <text margin="10 0 0 5" text=
+"- [OSX] Fix: use the right extension when exporting a .jpg
+"/>
+              <text margin="20 0 0 5" font-size="30" text="0.1.2"/>
+              <text margin="10 0 0 5" text=
+"- [OSX] Fix: fixed permissions issue preventing to import images
+"/>
+              <text margin="20 0 0 5" font-size="30" text="0.1.1"/>
+              <text margin="10 0 0 5" text="First public release!"/>
+              <!--<text margin="10 0 0 5" text=
+"This is the first public release of PanoPainter. It's important to note this is an early
+access to the software, so be aware it may crash or behave in unexpected ways.
+Always save your work. It comes with a lot of features that will be improved over time.
+Here's a list of what's available in this release.
+- Immersive 360° panoramic canvas
+- High-Performance GPU Accelerated Paint Engine
+- Intuitive gestures to navigate
+- Dynamic cross-platform User Interface
+- Native Apple Pencil support
+- Native Sonar Pen support
+- Massive resolution up to 8K panorama
+- Highly customizable brushes
+- Cloud Storage for device interoperability
+- Timelapse
+- Layers
+"/>-->
+            </scroll>
+          </border>
+          <!--footer buttons-->
+          <node height="60" dir="row" justify="flex-end">
+            <button id="btn-ok" text="Ok" width="100" height="30" margin="5 0 0 0"/>
+          </node>
+        </border>
+      </border>
+    </border>
+  </layout>
+</root>
diff --git a/data/dialogs/cloud-browse.xml b/data/dialogs/cloud-browse.xml
new file mode 100644
index 0000000..13d06df
--- /dev/null
+++ b/data/dialogs/cloud-browse.xml
@@ -0,0 +1,37 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+
+  <layout id="dialog-cloud-item">
+    <border dir="col" color=".4 .4 .4 .8" pad="4" height="100" width="100" margin="1 1 1 1" grow="1" align="center">
+      <image-texture id="thumb-tex" width="100%" grow="1" height="1" aspect-ratio="1">
+        <border positioning="absolute" color="0 0 0 .5" pad="2" width="100%">
+          <text id="title" text="File Name" text-wrap-width="85"/>
+        </border>
+      </image-texture>
+    </border>
+  </layout>
+  <layout id="dialog-cloud">
+    <border id="background" positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
+      <border id="form" thickness="1" border-color=".2" pad="3" width="90%" height="90%" dir="col">
+        <border id="title-bar" width="100%" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
+          <text text="Browse PanoPainter Projects"></text>
+        </border>
+        <border width="100%" height="100" color="0 0 0 .9" pad="10" dir="row" grow="1">
+          <scroll id="files-list" dir="row" wrap="1" flood-events="1" grow="1" height="100%" margin="0 0 0 0" pad="0 20 0 0" color=".2 .2 .2 1">
+          </scroll>
+        </border>
+        <node id="footer" height="50" dir="row" align="flex-end" justify="flex-end" pad="10">
+          <node grow="1" os="win,osx">
+            <button id="btn-path" text="Set destination dir" width="130" height="30" margin="0 10 0 0"/>
+          </node>
+          <button id="btn-ok" text="Open Project" width="100" height="30" margin="0 10 0 0"/>
+          <button id="btn-cancel" text="Cancel" width="60" height="30"/>
+        </node>
+      </border>
+    </border>
+  </layout>
+
+</root>
diff --git a/data/dialogs/color-picker.xml b/data/dialogs/color-picker.xml
new file mode 100644
index 0000000..844caa8
--- /dev/null
+++ b/data/dialogs/color-picker.xml
@@ -0,0 +1,103 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+
+  <layout id="color-picker">
+    <border>
+      <!--<border width="300" height="30" color=".2 .2 .2 .9" dir="row" align="center">
+          <node grow="1" width="10" align="center">
+            <text id="title" text="Color Picker"/>
+          </node>
+          -->
+      <!--<combobox justify="flex-end" pad="5" margin="0 5 0 0" text="Triangle" combo-list="Triangle,Square" default="0"/>-->
+      <!--
+        </border>-->
+      <border width="100%" color=".4" pad="10" dir="col">
+        <colorwheel id="wheel" width="100%" aspect-ratio="1"/>
+        <border color=".3" pad="5" dir="row" margin="10 0 0 0">
+          <border id="color-cur" height="30" grow="1" color="1"/>
+          <border id="color-old" height="30" grow="1" color="0" margin="0 10 0 0"/>
+          <border id="color-old1" height="30" grow="0.5" color="0" margin="0 2 0 0"/>
+          <border id="color-old2" height="30" grow="0.5" color="0" margin="0 2 0 0"/>
+          <border id="color-old3" height="30" grow="0.5" color="0" margin="0 2 0 0"/>
+          <border id="color-old4" height="30" grow="0.5" color="0"/>
+        </border>
+        <!--HSV-->
+        <border pad="5" color=".3" margin="10 0 0 0">
+          <node width="100%" pad="2" height="20" dir="row" align="center">
+            <node width="20">
+              <text text="H"/>
+            </node>
+            <slider-h id="hsv-h" width="10" grow="1" value="1"/>
+          </node>
+          <node width="100%" pad="2" height="20" dir="row" align="center">
+            <node width="20">
+              <text text="S"/>
+            </node>
+            <slider-h id="hsv-s" width="10" grow="1" value="1"/>
+          </node>
+          <node width="100%" pad="2" height="20" dir="row" align="center">
+            <node width="20">
+              <text text="V"/>
+            </node>
+            <slider-h id="hsv-v" width="10" grow="1" value="1"/>
+          </node>
+        </border>
+        <!--RGB-->
+        <border pad="5" color=".3" margin="10 0 0 0">
+          <node width="100%" pad="2" height="20" dir="row" align="center">
+            <node width="20">
+              <text text="R"/>
+            </node>
+            <slider-h id="rgb-r" width="10" grow="1" value="1"/>
+          </node>
+          <node width="100%" pad="2" height="20" dir="row" align="center">
+            <node width="20">
+              <text text="G"/>
+            </node>
+            <slider-h id="rgb-g" width="10" grow="1" value="1"/>
+          </node>
+          <node width="100%" pad="2" height="20" dir="row" align="center">
+            <node width="20">
+              <text text="B"/>
+            </node>
+            <slider-h id="rgb-b" width="10" grow="1" value="1"/>
+          </node>
+        </border>
+        <!--HEX-->
+        <border pad="5" color=".3" margin="10 0 0 0">
+          <node width="100%" pad="2" height="30" dir="row" align="center">
+            <node margin="0 10 0 0">
+              <text text="Hex"/>
+            </node>
+            <text id="txt-hex" text="#FFFFFF" align="center" pad="5" grow="1" height="30" color="1"/>
+            <button id="btn-hex-copy" text="Copy" width="60" height="100%"/>
+            <button id="btn-hex-paste" text="Paste" width="60" height="100%"/>
+          </node>
+        </border>
+      </border>
+      <!--<node height="33" dir="row" align="flex-end" justify="flex-end">
+          <button id="btn-ok" text="Reset" width="60" height="30" margin="0 10 0 0"/>
+          <button id="btn-select" text="Select color" width="100" height="30"/>
+        </node>-->
+    </border>
+  </layout>
+
+  <!-- PANEL COLOR PICKER -->
+  <layout id="tpl-panel-color">
+    <node min-width="100" height="100" margin="0 0 10 0" rtl="ltr">
+      <border id="title" height="30" color=".4" align="center" justify="center">
+        <text text="Colors" color="1 1 1 1"/>
+      </border>
+      <border color=".4" pad="5" dir="row" height="10" grow="1">
+        <color-quad id="quad" color="1 0 0 1" height="100%" grow="1"/>
+        <node width="30" dir="col" pad="0 0 0 5">
+          <slider-hue id="hue"/>
+        </node>
+      </border>
+    </node>
+  </layout>
+
+</root>
diff --git a/data/dialogs/doc-browse.xml b/data/dialogs/doc-browse.xml
new file mode 100644
index 0000000..705aecd
--- /dev/null
+++ b/data/dialogs/doc-browse.xml
@@ -0,0 +1,43 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+
+  <layout id="dialog-browse-item">
+    <border dir="col" color=".4 .4 .4 .8" pad="4" height="100" width="100" margin="1 1 1 1" grow="1" align="center">
+      <image-texture id="thumb-tex" width="100%" grow="1" height="1" aspect-ratio="1">
+        <border positioning="absolute" color="0 0 0 .5" pad="2" width="100%">
+          <text id="title" text="File Name" text-wrap-width="85"/>
+        </border>
+      </image-texture>
+    </border>
+  </layout>
+  <layout id="dialog-browse">
+    <border id="background" positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
+      <border id="form" thickness="1" border-color=".2" pad="3" width="90%" height="90%" dir="col">
+        <border id="title-bar" width="100%" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
+          <text text="Browse PanoPainter Projects"></text>
+        </border>
+        <border width="100%" height="100" color="0 0 0 .9" pad="10" dir="row" grow="1">
+          <scroll id="files-list" dir="row" wrap="1" flood-events="1" grow="1" height="100%" margin="0 0 0 0" pad="0 20 0 0" color=".2 .2 .2 1">
+          </scroll>
+        </border>
+        <node dir="row">
+          <node grow="1">
+            <text os="win,osx" id="path" text="Workind dir: path" text-wrap-width="470" margin="10 5 10 10"/>
+          </node>
+          <button os="win,osx" id="btn-path" text="Set destination dir" width="140" height="30" margin="0 10 0 0"/>
+        </node>
+        <node id="footer" height="50" dir="row" align="flex-end" justify="flex-end" pad="10">
+          <node grow="1">
+            <button id="btn-delete" text="Delete Project" width="100" height="30" margin="0 10 0 0" color="1 0 0 1"/>
+          </node>
+          <button id="btn-ok" text="Open Project" width="100" height="30" margin="0 10 0 0"/>
+          <button id="btn-cancel" text="Cancel" width="60" height="30"/>
+        </node>
+      </border>
+    </border>
+  </layout>
+
+</root>
diff --git a/data/dialogs/doc-new.xml b/data/dialogs/doc-new.xml
new file mode 100644
index 0000000..ed79e1f
--- /dev/null
+++ b/data/dialogs/doc-new.xml
@@ -0,0 +1,33 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+
+  <layout id="dialog-newdoc">
+    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
+      <border thickness="1" border-color=".2" pad="3">
+        <border width="500" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
+          <text text="Create New Pano Project"></text>
+        </border>
+        <border width="500" color="0 0 0 .9" pad="10" dir="col">
+          <text text="Note: resolution is measured in K-pixels, so a 2K document produces\na 2048x1024 equirectangular output." margin="0 5 10 5"/>
+          <border dir="row" align="center" height="30" color=".2 .2 .2 1">
+            <text text="Project name: " margin="0 5 0 5"/>
+            <text-input id="txt-input" align="center" pad="5" grow="1" height="30" color=".3"/>
+            <combobox id="resolution" width="100" height="30" text="2K" combo-list="2K,4K,6K,8K,16K,32K" default="1"/>
+          </border>
+          <text os="win,osx" id="path" text="Workind dir: path" text-wrap-width="470" margin="10 5 10 5"/>
+          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
+            <node grow="1" os="win,osx">
+              <button id="btn-path" text="Set working dir" width="120" height="30" margin="0 10 0 0"/>
+            </node>
+            <button id="btn-ok" text="Create Project" width="110" height="30" margin="0 10 0 0"/>
+            <button id="btn-cancel" text="Cancel" width="60" height="30"/>
+          </node>
+        </border>
+      </border>
+    </border>
+  </layout>
+
+</root>
diff --git a/data/dialogs/doc-open.xml b/data/dialogs/doc-open.xml
new file mode 100644
index 0000000..08577f1
--- /dev/null
+++ b/data/dialogs/doc-open.xml
@@ -0,0 +1,43 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+
+  <layout id="dialog-open-item">
+    <border dir="row" color=".4 .4 .4 .8" pad="4" height="30" margin="1 0 1 0" align="center">
+      <!--<image-texture id="thumb-tex" width="64" height="64"/>-->
+      <text id="title" text="Title"/>
+    </border>
+  </layout>
+  <layout id="dialog-open">
+    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
+      <border thickness="1" border-color=".2" pad="3">
+        <border width="400" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
+          <text text="Open PanoPainter Project"></text>
+        </border>
+        <border width="400" color="0 0 0 .9" pad="10" dir="col">
+          <node dir="row">
+            <scroll id="files-list" dir="col" flood-events="1" grow="1" height="250" margin="0 10 0 0" pad="0 20 0 0" color=".2 .2 .2 1"/>
+            <!--
+            <node dir="col" grow="1" margin="0 0 0 10">
+              <border height="20" align="center" justify="center" color=".2 .2 .2 1"><text id="info-title" text="Title"/></border>
+              <text id="info-data" text="Title"/>
+            </node>
+            -->
+            <image-texture id="thumb-tex" aspect-ratio="1" width="150" height="150"/>
+          </node>
+          <!--<text-input width="100" height="100" color=".3"/>-->
+          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
+            <node grow="1">
+              <button id="btn-delete" text="Delete Project" width="100" height="30" margin="0 10 0 0" color="1 0 0 1"/>
+            </node>
+            <button id="btn-ok" text="Open Project" width="100" height="30" margin="0 10 0 0"/>
+            <button id="btn-cancel" text="Cancel" width="60" height="30"/>
+          </node>
+        </border>
+      </border>
+    </border>
+  </layout>
+
+</root>
diff --git a/data/dialogs/doc-resize.xml b/data/dialogs/doc-resize.xml
new file mode 100644
index 0000000..5c74689
--- /dev/null
+++ b/data/dialogs/doc-resize.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+
+  <layout id="dialog-resize">
+    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
+      <border thickness="1" border-color=".2" pad="3">
+        <border width="500" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
+          <text text="Resize Document Resolution"></text>
+        </border>
+        <border width="500" color="0 0 0 .9" pad="10" dir="col">
+          <text text="This action is permanent and cannot be undone.\nAll of the history will be cleared." margin="0 5 10 5"/>
+          <border dir="row" align="center" height="30" color=".2 .2 .2 1">
+            <node grow="1">
+              <text id="current-res" text="Current: 2K" margin="0 5 0 5"/>
+            </node>
+            <text text="New Resolution:" margin="0 5 0 5"/>
+            <combobox id="resolution" width="100" height="30" text="2K" combo-list="2K,4K,6K,8K,16K,32K" default="1"/>
+          </border>
+          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
+            <button id="btn-ok" text="Resize" width="70" height="30" margin="0 10 0 0"/>
+            <button id="btn-cancel" text="Cancel" width="60" height="30"/>
+          </node>
+        </border>
+      </border>
+    </border>
+  </layout>
+
+</root>
diff --git a/data/dialogs/doc-save.xml b/data/dialogs/doc-save.xml
new file mode 100644
index 0000000..723299c
--- /dev/null
+++ b/data/dialogs/doc-save.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+
+  <layout id="dialog-save">
+    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
+      <border thickness="1" border-color=".2" pad="3">
+        <border width="400" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
+          <text text="Save Pano Project"></text>
+        </border>
+        <border width="400" color="0 0 0 .9" pad="10" dir="col">
+          <border dir="row" align="center" height="30" color=".2 .2 .2 1">
+            <text text="Project name: " margin="0 5 0 5"/>
+            <text-input id="txt-input" align="center" pad="5" grow="1" height="30" color=".3"/>
+          </border>
+          <text os="win,osx" id="path" text="Workind dir: path" text-wrap-width="470" margin="10 5 10 5"/>
+          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
+            <node grow="1" os="win,osx">
+              <button id="btn-path" text="Set working dir" width="120" height="30" margin="0 10 0 0"/>
+            </node>
+            <button id="btn-ok" text="Save Project" width="100" height="30" margin="0 10 0 0"/>
+            <button id="btn-cancel" text="Cancel" width="60" height="30"/>
+          </node>
+        </border>
+      </border>
+    </border>
+  </layout>
+
+</root>
diff --git a/data/dialogs/input-box.xml b/data/dialogs/input-box.xml
new file mode 100644
index 0000000..ca35b76
--- /dev/null
+++ b/data/dialogs/input-box.xml
@@ -0,0 +1,27 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+
+  <layout id="input-box">
+    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center">
+      <border thickness="1" border-color=".2" pad="3">
+        <border width="400" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
+          <text id="title" text="Just a test message"></text>
+        </border>
+        <border width="400" color="0 0 0 .9" pad="10" dir="col">
+          <node dir="row" height="30" align="center" grow="1">
+            <text id="field-name" text="Field" margin="0 5 0 0"/>
+            <text-input id="field-text" align="center" pad="5" grow="1" height="30" color=".3"/>
+          </node>
+          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
+            <button id="btn-ok" text="Ok" width="50" height="30" margin="0 10 0 0"/>
+            <button id="btn-cancel" text="Cancel" width="60" height="30"/>
+          </node>
+        </border>
+      </border>
+    </border>
+  </layout>
+
+</root>
diff --git a/data/dialogs/layer-rename.xml b/data/dialogs/layer-rename.xml
new file mode 100644
index 0000000..2a0d892
--- /dev/null
+++ b/data/dialogs/layer-rename.xml
@@ -0,0 +1,27 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+
+  <layout id="dialog-layer-rename">
+    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
+      <border thickness="1" border-color=".2" pad="3">
+        <border width="400" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
+          <text text="Rename Layer"></text>
+        </border>
+        <border width="400" color="0 0 0 .9" pad="10" dir="col">
+          <border dir="row" align="center" height="30" color=".2 .2 .2 1">
+            <text text="New name: " margin="0 5 0 5"/>
+            <text-input id="txt-input" align="center" pad="5" grow="1" height="30" color=".3"/>
+          </border>
+          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
+            <button id="btn-ok" text="Rename Layer" width="110" height="30" margin="0 10 0 0"/>
+            <button id="btn-cancel" text="Cancel" width="60" height="30"/>
+          </node>
+        </border>
+      </border>
+    </border>
+  </layout>
+
+</root>
diff --git a/data/dialogs/message-box.xml b/data/dialogs/message-box.xml
new file mode 100644
index 0000000..c3a7fcf
--- /dev/null
+++ b/data/dialogs/message-box.xml
@@ -0,0 +1,24 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+
+  <layout id="message-box">
+    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center">
+      <border thickness="1" border-color=".2" pad="3">
+        <border width="400" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
+          <text id="title" text="Just a test message"></text>
+        </border>
+        <border width="400" color="0 0 0 .9" pad="10" dir="col">
+          <text id="message" text-wrap-width="380" text="Longer description for the error or the message."></text>
+          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
+            <button id="btn-ok" text="Ok" width="50" height="30" margin="0 10 0 0"/>
+            <button id="btn-cancel" text="Cancel" width="60" height="30"/>
+          </node>
+        </border>
+      </border>
+    </border>
+  </layout>
+
+</root>
diff --git a/data/dialogs/panel-brushes.xml b/data/dialogs/panel-brushes.xml
new file mode 100644
index 0000000..6ae85a7
--- /dev/null
+++ b/data/dialogs/panel-brushes.xml
@@ -0,0 +1,108 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+
+  <layout id="tpl-brush-icon">
+    <button-custom width="50" height="50" margin="1" pad="2" align="center" justify="center">
+      <image width="100%" height="100%"/>
+    </button-custom>
+  </layout>
+  <layout id="tpl-panel-brush-preset">
+    <node rtl="ltr" min-width="100">
+      <border id="notification" color=".4" align="center" justify="center" grow="2">
+        <text text="No brush presets loaded."/>
+        <text text="Import from Photoshop ABR files."/>
+        <text text="Or download free ones."/>
+        <border color=".3" dir="row" height="60" margin="15 0 15 0">
+          <button id="import" text="Import Brush" pad="10" height="100%"/>
+          <button id="download" text="Download" pad="10" height="100%"/>
+        </border>
+        <text text="Otherwise you can create new brushes,"/>
+        <text text="using the Brush Settings Tool and add"/>
+        <text text="the new brush here with the + button"/>
+      </border>
+      <scroll id="brushes" color=".4" pad="5 20 5 5" dir="col" wrap="0" flood-events="1" grow="1" height="1"/>
+      <border id="toolbar" height="40" color=".5" dir="row" align="center" flood-events="1">
+        <button-custom id="btn-add" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 5">
+          <icon width="30" icon="add"/>
+        </button-custom>
+        <button-custom id="btn-up" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
+          <icon width="30" icon="bullet_arrow_up"/>
+        </button-custom>
+        <button-custom id="btn-down" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
+          <icon width="30" icon="bullet_arrow_down"/>
+        </button-custom>
+        <!--<button-custom id="btn-save" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
+          <icon width="30" icon="bullet_disk"/>
+        </button-custom>-->
+        <node grow="1"></node>
+        <button-custom id="btn-remove" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 10 0 0">
+          <icon width="30" icon="bin_closed"/>
+        </button-custom>
+        <button-custom id="btn-menu" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 10 0 10">
+          <icon width="30" icon="resultset_next"/>
+        </button-custom>
+      </border>
+    </node>
+  </layout>
+  <layout id="tpl-brush-preset">
+    <button-custom height="70" margin="1" pad="5" align="center" justify="center" dir="row">
+      <!--<node width="30" align="center">
+        <checkbox icon="data/ui/check-lock-transparency.png" width="20" height="20" pad="0"/>
+      </node>-->
+      <border color="1" width="40" height="60" align="center" justify="center" dir="col">
+        <image id="thumb" width="40" height="40"/>
+        <text id="caption-size" text="000" color="0" margin="3 0 0 0"/>
+      </border>
+      <stroke-preview id="canvas" width="1" grow="1" height="60"/>
+    </button-custom>
+  </layout>
+  <layout id="tpl-brush-popup">
+    <popup-menu positioning="absolute" position="100 100" width="200" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
+      <button-custom id="import" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
+        <text text="Import from File" grow="1" margin="0 0 0 5"/>
+      </button-custom>
+      <button-custom id="export" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
+        <text text="Export to File" grow="1" margin="0 0 0 5"/>
+      </button-custom>
+      <button-custom id="download" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
+        <text text="Download from Cloud" grow="1" margin="0 0 0 5"/>
+      </button-custom>
+      <button-custom id="share" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
+        <text text="Share to Cloud" grow="1" margin="0 0 0 5"/>
+      </button-custom>
+      <button-custom id="clear-all" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
+        <icon icon="bin" width="20"/>
+        <text text="Delete all presets" grow="1" margin="0 0 0 5"/>
+      </button-custom>
+    </popup-menu>
+  </layout>
+  <layout id="tpl-panel-brushes">
+    <node rtl="ltr">
+      <scroll id="brushes" color=".4" pad="5" dir="row" wrap="1" flood-events="1" grow="1" height="1"/>
+      <border height="40" color=".5" dir="row" align="center" flood-events="1">
+        <button-custom id="btn-add" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 5">
+          <icon width="30" icon="add"/>
+        </button-custom>
+        <button-custom id="btn-up" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
+          <icon width="30" icon="bullet_arrow_up"/>
+        </button-custom>
+        <button-custom id="btn-down" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
+          <icon width="30" icon="bullet_arrow_down"/>
+        </button-custom>
+        <!--
+        <button-custom id="btn-save" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
+          <icon width="30" icon="bullet_disk"/>
+        </button-custom>
+        -->
+        <node grow="1"></node>
+        <button-custom id="btn-remove" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 10 0 0">
+          <icon width="30" icon="bin_closed"/>
+        </button-custom>
+      </border>
+    </node>
+  </layout>
+
+</root>
diff --git a/data/dialogs/panel-floating.xml b/data/dialogs/panel-floating.xml
new file mode 100644
index 0000000..997fa62
--- /dev/null
+++ b/data/dialogs/panel-floating.xml
@@ -0,0 +1,26 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+
+  <layout id="tpl-panel-floating">
+    <border thickness="1" border-color=".2" pad="3" max-width="650" dir="col" mouse-capture="true">
+      <border height="30" pad="0 0 0 0" color=".4" align="center" justify="center" dir="row">
+        <button id="button-close" width="30" height="20" text="X" margin="0 0 0 5"/>
+        <button id="button-minimize" width="30" height="20" text="--" margin="0 0 0 5"/>
+        <node align="center" pad="0 30 0 30" justify="center" height="100%" grow="1">
+          <text id="title" text="Floating Panel"/>
+        </node>
+      </border>
+      <border id="container" color="0 0 0 .9" dir="col" height="10" grow="1"/>
+      <node dir="row">
+        <node height="16" grow="1" align="center">
+          <image path="data/ui/resize-handle-vert.png" width="32" height="16" />
+        </node>
+        <image path="data/ui/resize-handle.png" width="16" height="16" />
+      </node>
+    </border>
+  </layout>
+
+</root>
diff --git a/data/dialogs/panel-grid.xml b/data/dialogs/panel-grid.xml
new file mode 100644
index 0000000..697c90d
--- /dev/null
+++ b/data/dialogs/panel-grid.xml
@@ -0,0 +1,133 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+
+  <layout id="tpl-panel-grid">
+    <node width="350" margin="0 0 10 0" rtl="ltr">
+      <border id="title" height="30" color=".4" align="center" justify="center">
+        <text text="Grids" color="1 1 1 1"/>
+      </border>
+      <border color=".4" pad="5" dir="col" width="100%" grow="1">
+
+        <node dir="row" margin="0 0 10 0">
+          <node width="200" grow="1"  margin="0 5 0 0">
+            <border color=".2" height="20" justify="center" align="center">
+              <text text="Heightmap"/>
+            </border>
+            <border color="1" align="center" pad="5" margin="0 0 5 0" min-height="70">
+              <image-texture id="grid-heightmap-preview" width="100%" grow="1" height="100" aspect-ratio="1"/>
+            </border>
+          </node>
+          <node width="100" pad="0" dir="col">
+            <button id="grid-heightmap-load" text="Open" width="100" height="30" margin="0 2 0 0"/>
+            <button id="grid-heightmap-clear" text="Clear" width="100" height="30" margin="0 2 0 0"/>
+            <button id="grid-heightmap-reload" text="Reload" width="100" height="30" margin="0 2 0 0"/>
+          </node>
+        </node>
+
+        <scroll id="scroller" color=".4" scroll-color=".2" grow="1">
+          <node dir="row">
+            <node width="36%" dir="col">
+              <node height="20" justify="center">
+                <text text="Opacity"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Value"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Offset"/>
+              </node>
+              <node height="30" justify="center" margin="5 0 0 0">
+                <text text="Resolution"/>
+              </node>
+            </node>
+            <node dir="col" align="center" grow="1" width="1" flood-events="1">
+              <node height="20" pad="1" width="100%">
+                <slider-h id="grid-ground-opacity"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="grid-ground-value" value="0.0"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="grid-ground-offset" value="0.25"/>
+              </node>
+              <node height="30" pad="1" width="100%" dir="row" margin="5 0 0 0">
+                <combobox id="grid-ground-resolution" width="100%" height="28" combo-list="0.1,0.5,1,2,4,8" default="2"/>
+              </node>
+            </node>
+          </node>
+          <node height="5"/>
+          <node dir="row">
+            <node width="36%" dir="col">
+              <node height="30" justify="center" margin="5 0 0 0">
+                <text text="Shading"/>
+              </node>
+              <node height="20" justify="center" margin="5 0 0 0">
+                <text text="Wireframe"/>
+              </node>
+              <!--<node height="20" justify="center"><text text="Thickness"/></node>-->
+              <node height="20" justify="center">
+                <text text="Height"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Light Yaw"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Light Pitch"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Ambient"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Radius"/>
+              </node>
+              <node height="30" justify="center" margin="5 0 0 0">
+                <text text="Samples"/>
+              </node>
+              <node height="30" justify="center" margin="5 0 0 0">
+                <text text="Tex Res."/>
+              </node>
+            </node>
+            <node dir="col" align="center" grow="1" width="1" flood-events="1" color=".3" >
+              <node height="30" pad="1" width="100%" dir="row" margin="5 0 0 0">
+                <combobox id="grid-heightmap-shading" width="100%" height="28" combo-list="Transparent,Flat,Solid,Textured" default="0"/>
+              </node>
+              <node height="20" pad="1" width="100%" margin="5 0 0 0">
+                <slider-h id="grid-heightmap-wireframe" value="1.0"/>
+              </node>
+              <!--<node height="20" pad="1" width="100%"><slider-h id="grid-heightmap-thickness" value="0.5"/></node>-->
+              <node height="20" pad="1" width="100%">
+                <slider-h id="grid-heightmap-height" value="0.25"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="grid-heightmap-lyaw" value="0.5"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="grid-heightmap-lpitch" value="0.1"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="grid-heightmap-ambient" value="0.0"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="grid-heightmap-radius" value="0.25"/>
+              </node>
+              <node height="30" pad="1" width="100%" dir="row" margin="5 0 0 0">
+                <combobox id="grid-heightmap-samples" width="100%" height="28" combo-list="1,4,8,16,32,64,128" default="2"/>
+              </node>
+              <node height="30" pad="1" width="100%" dir="row" margin="5 0 0 0">
+                <combobox id="grid-heightmap-texres" width="100%" height="28" combo-list="256,512,1024,2048,4096" default="1"/>
+              </node>
+            </node>
+          </node>
+        </scroll>
+
+        <button id="grid-render" text="Render Lightmap" height="30" margin="5 0 0 0"/>
+        <button id="grid-commit" text="Commit to Layer" height="30" margin="5 0 0 0"/>
+
+      </border>
+    </node>
+  </layout>
+
+</root>
diff --git a/data/dialogs/panel-layers.xml b/data/dialogs/panel-layers.xml
new file mode 100644
index 0000000..02f832c
--- /dev/null
+++ b/data/dialogs/panel-layers.xml
@@ -0,0 +1,56 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+
+  <layout id="tpl-panel-layers">
+    <node width="300" margin="0 0 10 0" rtl="ltr">
+      <border id="title" height="30" color=".4" align="center" justify="center" margin="0 0 0 0">
+        <text text="Layers" color="1 1 1 1"/>
+      </border>
+
+      <border height="35" color=".4" dir="row" align="center" flood-events="1" pad="0 0 5 0">
+        <checkbox id="alpha-lock" icon="data/ui/check-lock-transparency.png" width="30" margin="0 5 0 5"/>
+        <combobox id="blend-mode" width="100" height="30" margin="0 5 0 0" combo-list="Normal,-,Multiply,Screen,-,Color Dodge,Overlay"/>
+        <slider-h id="opacity" value="1" grow="1" width="1" margin="0 5 0 0"/>
+      </border>
+
+      <scroll id="layers-container" pad="5" color=".4" dir="col-reverse" justify="flex-end" flood-events="1" grow="1" shrink="1">
+        <!--layers list-->
+      </scroll>
+
+      <border height="40" color=".5" dir="row" align="center" flood-events="1">
+        <button-custom id="btn-add" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 5">
+          <icon width="30" icon="add"/>
+        </button-custom>
+        <button-custom id="btn-duplicate" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 5">
+          <icon width="30" icon="page_copy"/>
+        </button-custom>
+        <button-custom id="btn-up" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
+          <icon width="30" icon="bullet_arrow_up"/>
+        </button-custom>
+        <button-custom id="btn-down" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
+          <icon width="30" icon="bullet_arrow_down"/>
+        </button-custom>
+        <node grow="1"></node>
+        <button-custom id="btn-remove" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 10 0 0">
+          <icon width="30" icon="bin_closed"/>
+        </button-custom>
+      </border>
+    </node>
+  </layout>
+  <layout id="tpl-layer">
+    <border height="30" border-color="1" thickness="1" color=".4" dir="col" margin="1 0 1 0">
+      <node dir="row" height="30">
+        <node width="30" pad="1">
+          <checkbox id="cb" icon="data/ui/check-layer-visibility.png"/>
+        </node>
+        <node width="1" grow="1" justify="center" pad="5">
+          <text id="label"/>
+        </node>
+      </node>
+    </border>
+  </layout>
+
+</root>
diff --git a/data/dialogs/panel-presets.xml b/data/dialogs/panel-presets.xml
new file mode 100644
index 0000000..dba946b
--- /dev/null
+++ b/data/dialogs/panel-presets.xml
@@ -0,0 +1,103 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+
+  <layout id="tpl-panel-brush-preset">
+    <node rtl="ltr" min-width="100">
+      <border id="notification" color=".4" align="center" justify="center" grow="2">
+        <text text="No brush presets loaded."/>
+        <text text="Import from Photoshop ABR files."/>
+        <text text="Or download free ones."/>
+        <border color=".3" dir="row" height="60" margin="15 0 15 0">
+          <button id="import" text="Import Brush" pad="10" height="100%"/>
+          <button id="download" text="Download" pad="10" height="100%"/>
+        </border>
+        <text text="Otherwise you can create new brushes,"/>
+        <text text="using the Brush Settings Tool and add"/>
+        <text text="the new brush here with the + button"/>
+      </border>
+      <scroll id="brushes" color=".4" pad="5 20 5 5" dir="col" wrap="0" flood-events="1" grow="1" height="1"/>
+      <border id="toolbar" height="40" color=".5" dir="row" align="center" flood-events="1">
+        <button-custom id="btn-add" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 5">
+          <icon width="30" icon="add"/>
+        </button-custom>
+        <button-custom id="btn-up" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
+          <icon width="30" icon="bullet_arrow_up"/>
+        </button-custom>
+        <button-custom id="btn-down" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
+          <icon width="30" icon="bullet_arrow_down"/>
+        </button-custom>
+        <!--<button-custom id="btn-save" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
+          <icon width="30" icon="bullet_disk"/>
+        </button-custom>-->
+        <node grow="1"></node>
+        <button-custom id="btn-remove" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 10 0 0">
+          <icon width="30" icon="bin_closed"/>
+        </button-custom>
+        <button-custom id="btn-menu" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 10 0 10">
+          <icon width="30" icon="resultset_next"/>
+        </button-custom>
+      </border>
+    </node>
+  </layout>
+  <layout id="tpl-brush-preset">
+    <button-custom height="70" margin="1" pad="5" align="center" justify="center" dir="row">
+      <!--<node width="30" align="center">
+        <checkbox icon="data/ui/check-lock-transparency.png" width="20" height="20" pad="0"/>
+      </node>-->
+      <border color="1" width="40" height="60" align="center" justify="center" dir="col">
+        <image id="thumb" width="40" height="40"/>
+        <text id="caption-size" text="000" color="0" margin="3 0 0 0"/>
+      </border>
+      <stroke-preview id="canvas" width="1" grow="1" height="60"/>
+    </button-custom>
+  </layout>
+  <layout id="tpl-brush-popup">
+    <popup-menu positioning="absolute" position="100 100" width="200" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
+      <button-custom id="import" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
+        <text text="Import from File" grow="1" margin="0 0 0 5"/>
+      </button-custom>
+      <button-custom id="export" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
+        <text text="Export to File" grow="1" margin="0 0 0 5"/>
+      </button-custom>
+      <button-custom id="download" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
+        <text text="Download from Cloud" grow="1" margin="0 0 0 5"/>
+      </button-custom>
+      <button-custom id="share" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
+        <text text="Share to Cloud" grow="1" margin="0 0 0 5"/>
+      </button-custom>
+      <button-custom id="clear-all" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
+        <icon icon="bin" width="20"/>
+        <text text="Delete all presets" grow="1" margin="0 0 0 5"/>
+      </button-custom>
+    </popup-menu>
+  </layout>
+  <layout id="tpl-panel-brushes">
+    <node rtl="ltr">
+      <scroll id="brushes" color=".4" pad="5" dir="row" wrap="1" flood-events="1" grow="1" height="1"/>
+      <border height="40" color=".5" dir="row" align="center" flood-events="1">
+        <button-custom id="btn-add" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 5">
+          <icon width="30" icon="add"/>
+        </button-custom>
+        <button-custom id="btn-up" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
+          <icon width="30" icon="bullet_arrow_up"/>
+        </button-custom>
+        <button-custom id="btn-down" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
+          <icon width="30" icon="bullet_arrow_down"/>
+        </button-custom>
+        <!--
+        <button-custom id="btn-save" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
+          <icon width="30" icon="bullet_disk"/>
+        </button-custom>
+        -->
+        <node grow="1"></node>
+        <button-custom id="btn-remove" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 10 0 0">
+          <icon width="30" icon="bin_closed"/>
+        </button-custom>
+      </border>
+    </node>
+  </layout>
+
+</root>
diff --git a/data/dialogs/panel-quick.xml b/data/dialogs/panel-quick.xml
new file mode 100644
index 0000000..a154a17
--- /dev/null
+++ b/data/dialogs/panel-quick.xml
@@ -0,0 +1,46 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+
+  <layout id="tpl-panel-quick">
+    <border color="0 0 0 0.6" width="80" dir="col" pad="5" align="center" mouse-capture="true" shrink="1">
+      <node dir="row" pad="5" shrink="1" min-height="100" max-height="200">
+        <!--size-->
+        <node dir="col" margin="0 4 0 0" height="100%" align="center">
+          <text text="Size" margin="0 0 10 0"/>
+          <slider-v id="quick-size" height="200" shrink="1" width="30"/>
+        </node>
+        <!--flow-->
+        <node dir="col" align="center" height="100%">
+          <text text="Flow" margin="0 0 10 0"/>
+          <slider-v id="quick-flow" height="200" shrink="1" width="30"/>
+        </node>
+      </node>
+      <!--color-->
+      <text text="Colors" margin="10 0 5 0"/>
+      <button-custom id="quick-color1" dir="row" pad="4" margin="0 0 1 0">
+        <border color="0 0 0 1" width="60" height="30"/>
+      </button-custom>
+      <button-custom id="quick-color2" pad="4" margin="0 0 1 0">
+        <border color="0.5 0.5 0.5 1" width="60" height="30"/>
+      </button-custom>
+      <button-custom id="quick-color3" pad="4" margin="0 0 1 0">
+        <border color="1 1 1 1" width="60" height="30"/>
+      </button-custom>
+      <!--brushes-->
+      <text text="Brushes" margin="10 0 5 0"/>
+      <button-custom id="quick-brush1" height="45" pad="4">
+        <stroke-preview width="60" height="100%"/>
+      </button-custom>
+      <button-custom id="quick-brush2" height="45" pad="4" margin="4 0 0 0">
+        <stroke-preview width="60" height="100%"/>
+      </button-custom>
+      <button-custom id="quick-brush3" height="45" pad="4" margin="4 0 0 0">
+        <stroke-preview width="60" height="100%"/>
+      </button-custom>
+    </border>
+  </layout>
+
+</root>
diff --git a/data/dialogs/panel-stroke.xml b/data/dialogs/panel-stroke.xml
new file mode 100644
index 0000000..e4acc59
--- /dev/null
+++ b/data/dialogs/panel-stroke.xml
@@ -0,0 +1,513 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+
+  <layout id="tpl-panel-stroke">
+    <node width="350" margin="0 0 10 0">
+      <border id="title" height="30" pad="5 0 0 0" color=".4" align="center" justify="center" dir="row">
+        <node align="center" pad="0 0 0 30" justify="center" height="100%" width="1" grow="1">
+          <text text="Brush Settings"/>
+        </node>
+        <button id="button-unfold-all" width="30" height="20" text="+" margin="0 5 0 0"/>
+      </border>
+      <border color=".4" pad="5" dir="col" width="100%" grow="1">
+
+        <!-- PREVIEW -->
+
+        <button-custom id="preset-button" color=".2" pad="5" margin="0 0 0 0">
+          <stroke-preview id="canvas" width="100%" height="100"/>
+        </button-custom>
+
+        <scroll id="scroller" scroll-color=".3" margin="5 5 5 10" color=".4" height="1" grow="1">
+
+          <!-- PRESET AND SHAPE -->
+
+          <node dir="row">
+            <node width="36%" dir="col">
+              <!--<node height="20" justify="center" margin="5 0 5 0"><text text="Shade"/></node>-->
+              <node height="40" justify="center" margin="5 0 0 0">
+                <text text="Shape"/>
+              </node>
+              <node height="20" justify="center" margin="5 0 0 0">
+                <text text="Aspect"/>
+              </node>
+            </node>
+            <node dir="col" align="center" grow="1" width="1" flood-events="1">
+              <!--<node height="20" pad="1" width="100%" margin="5 0 5 0"><slider-h id="tip-shade" value="1"/></node>-->
+              <node dir="row" margin="5 0 0 0" width="100%">
+                <button-custom id="tip-change" width="40" height="40" dir="row" pad="4">
+                  <image id="tip-change-thumb" width="32" height="100%"/>
+                </button-custom>
+                <node width="1" grow="1" height="40">
+                  <node align="center" dir="row">
+                    <checkbox id="tip-invert" width="20" height="19"/>
+                    <text text="invert value"/>
+                  </node>
+                  <node align="center" dir="row">
+                    <checkbox id="tip-flipx" width="20" height="19"/>
+                    <text text="flipX"/>
+                    <checkbox id="tip-flipy" width="20" height="19" margin="0 0 0 5"/>
+                    <text text="flipY"/>
+                  </node>
+                </node>
+              </node>
+              <node height="20" dir="row" pad="1" width="100%" margin="5 0 0 0">
+                <slider-h id="tip-aspect" width="1" grow="1" value="0.5"/>
+                <button-custom id="tip-aspect-reset" width="20" height="20" margin="0 0 0 5">
+                  <icon icon="arrow_rotate_clockwise"/>
+                </button-custom>
+              </node>
+            </node>
+          </node>
+
+          <!-- COLOR -->
+
+          <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
+            <node align="center" width="1" grow="1">
+              <text text="Color"/>
+            </node>
+            <button id="button-unfold-color" width="30" height="18" text="+"/>
+          </border>
+          <node id="fold-color" dir="row">
+            <node width="36%" dir="col">
+              <!--labels-->
+              <node height="30" justify="center" margin="0 0 5 0">
+                <text text="Blend"/>
+              </node>
+              <node height="20" justify="center" margin="0 0 20 0">
+                <text text="Flow"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Opacity"/>
+              </node>
+            </node>
+            <node dir="col" align="center" grow="1" width="1">
+              <!--controls-->
+              <node height="30" pad="1" width="100%" dir="row" margin="0 0 5 0">
+                <combobox id="blend-mode" text="Normal" width="100%" height="28" combo-list="Normal,-,Multiply,Screen,-,Color Dodge,Overlay"/>
+              </node>
+              <node height="40" pad="1" width="100%" dir="col">
+                <slider-h id="tip-flow" height="19" value=".5"/>
+                <node align="center" dir="row">
+                  <checkbox id="tip-flow-pressure" width="20" height="19"/>
+                  <text text="flow pressure"/>
+                </node>
+              </node>
+              <node height="40" pad="1" width="100%" dir="col">
+                <slider-h id="tip-opacity" height="19" value="1"/>
+                <node align="center" dir="row">
+                  <checkbox id="tip-opacity-pressure" width="20" height="19"/>
+                  <text text="opacity pressure"/>
+                </node>
+              </node>
+            </node>
+          </node>
+
+          <!-- METRICS -->
+
+          <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
+            <node align="center" width="1" grow="1">
+              <text text="Metrics"/>
+            </node>
+            <button id="button-unfold-metrics" width="30" height="18" text="+"/>
+          </border>
+          <node id="fold-metrics" dir="row">
+            <node width="36%" dir="col">
+              <!--labels-->
+              <node height="20" justify="center" margin="0 0 20 0">
+                <text text="Size"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Spacing"/>
+              </node>
+              <node height="20" justify="center" margin="0 0 40 0">
+                <text text="Angle"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Smoothing"/>
+              </node>
+            </node>
+            <node dir="col" align="center" grow="1" width="1">
+              <!--controls-->
+              <node height="40" pad="1" width="100%" dir="col">
+                <slider-h id="tip-size" height="19" value=".25"/>
+                <node align="center" dir="row">
+                  <checkbox id="tip-size-pressure" width="20" height="19"/>
+                  <text text="size pressure"/>
+                </node>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="tip-spacing" value=".25"/>
+              </node>
+              <node height="60" pad="1" width="100%" dir="col">
+                <slider-h id="tip-angle" height="19"/>
+                <node align="center" dir="row">
+                  <checkbox id="tip-angle-init" width="20" height="19"/>
+                  <text text="initial direction"/>
+                </node>
+                <node align="center" dir="row">
+                  <checkbox id="tip-angle-follow" width="20" height="19"/>
+                  <text text="follow direction"/>
+                </node>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="tip-angle-smooth" value="0"/>
+              </node>
+            </node>
+          </node>
+
+          <!-- PATTERN -->
+
+          <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
+            <checkbox id="pattern-enabled" width="20" height="20"/>
+            <node align="center" width="1" grow="1">
+              <text text="Pattern"/>
+            </node>
+            <button id="button-unfold-pattern" width="30" height="18" text="+"/>
+          </border>
+          <node id="fold-pattern" dir="row">
+            <node width="36%" dir="col">
+              <!--labels-->
+              <node height="40" justify="center" margin="0 0 5 0">
+                <text text="Pattern"/>
+              </node>
+              <node height="30" justify="center" margin="0 0 5 0">
+                <text text="Blend"/>
+              </node>
+              <!--
+            <node height="30" justify="center" margin="0 0 5 0">
+              <text text="Projection"/>
+            </node>
+            -->
+              <node height="20" justify="center">
+                <text text="Apply"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Offset"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Depth"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Scale"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Brightness"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Contrast"/>
+              </node>
+            </node>
+            <node dir="col" grow="1" width="1">
+              <!--controls-->
+              <node dir="row" margin="0 0 5 0">
+                <button-custom id="pattern-change" width="40" height="40" dir="row" pad="4">
+                  <image id="pattern-change-thumb" width="32" height="100%"/>
+                </button-custom>
+                <node width="1" grow="1" height="40">
+                  <node align="center" dir="row">
+                    <checkbox id="pattern-invert" width="20" height="19"/>
+                    <text text="invert value"/>
+                  </node>
+                  <node align="center" dir="row">
+                    <checkbox id="pattern-flipx" width="20" height="19"/>
+                    <text text="flipX"/>
+                    <checkbox id="pattern-flipy" width="20" height="19" margin="0 0 0 5"/>
+                    <text text="flipY"/>
+                  </node>
+                </node>
+              </node>
+              <node height="30" width="100%" pad="1" dir="row" margin="0 0 5 0">
+                <combobox id="pattern-blend-mode" width="100%" height="28" combo-list="Normal,-,Multiply,Subtract,Darken,Overlay,Color Dodge,Color Burn,Linear Burn,Hard Mix,-,Linear Height,Height"/>
+              </node>
+              <!--
+            <node height="30" width="100%" pad="1" dir="row" margin="0 0 5 0">
+              <combobox id="pattern-proj-mode" width="100%" height="28" combo-list="Cube,Screen"/>
+            </node>
+            -->
+              <node align="center" dir="row">
+                <checkbox id="pattern-eachsample" height="20" width="20"/>
+                <text text="each sample"/>
+              </node>
+              <node align="center" dir="row">
+                <checkbox id="pattern-rand-offset" height="20" width="20"/>
+                <text text="randomize"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="pattern-depth" value="1"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="pattern-scale" value=".25"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="pattern-brightness" value=".5"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="pattern-contrast" value=".5"/>
+              </node>
+            </node>
+          </node>
+
+          <!-- DUAL BRUSH -->
+
+          <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
+            <checkbox id="dual-enabled" width="20" height="20"/>
+            <node align="center" width="1" grow="1">
+              <text text="Dual Brush"/>
+            </node>
+            <button id="button-unfold-dualbrush" width="30" height="18" text="+"/>
+          </border>
+          <node id="fold-dualbrush" dir="row">
+            <node width="36%" dir="col">
+              <!--labels-->
+              <node height="40" justify="center" margin="0 0 5 0">
+                <text text="Shape"/>
+              </node>
+              <node height="30" justify="center" margin="0 0 5 0">
+                <text text="Blend"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Flip"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Size"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Flow"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Opacity"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Spacing"/>
+              </node>
+              <node height="20" justify="center" margin="0 0 20 0">
+                <text text="Scatter"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Rotate"/>
+              </node>
+            </node>
+            <node dir="col" grow="1" width="1">
+              <!--controls-->
+              <node dir="row" margin="0 0 5 0">
+                <button-custom id="dual-change" width="40" height="40" dir="row" pad="4">
+                  <image id="dual-change-thumb" width="32" height="100%"/>
+                </button-custom>
+                <node width="1" grow="1" height="40">
+                  <node align="center" dir="row">
+                    <checkbox id="dual-invert" width="20" height="19"/>
+                    <text text="invert value"/>
+                  </node>
+                  <node align="center" dir="row">
+                    <checkbox id="dual-flipx" width="20" height="19"/>
+                    <text text="flipX"/>
+                    <checkbox id="dual-flipy" width="20" height="19" margin="0 0 0 5"/>
+                    <text text="flipY"/>
+                  </node>
+                </node>
+              </node>
+              <node height="30" width="100%" pad="1" dir="row" margin="0 0 5 0">
+                <combobox id="dual-blend-mode" width="100%" height="28" combo-list="Normal,-,Multiply,Subtract,Darken,Overlay,Color Dodge,Color Burn,Linear Burn,Hard Mix,-,Linear Height,Height"/>
+              </node>
+              <node align="center" dir="row">
+                <checkbox id="dual-randflip" height="20" width="20"/>
+                <text text="random flips"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="dual-size" value=".25"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="dual-flow" value=".75"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="dual-opacity" value="1"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="dual-spacing" value=".25"/>
+              </node>
+              <node height="40" pad="1" width="100%" dir="col">
+                <slider-h id="dual-scatter" height="19" value="0"/>
+                <node align="center" dir="row">
+                  <checkbox width="20" height="19" id="dual-scatter-bothaxis"/>
+                  <text text="both axis"/>
+                </node>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="dual-rotate" value=".25"/>
+              </node>
+            </node>
+          </node>
+
+          <!-- MEDIUM -->
+
+          <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
+            <node align="center" width="1" grow="1">
+              <text text="Medium"/>
+            </node>
+            <button id="button-unfold-medium" width="30" height="18" text="+"/>
+          </border>
+          <node id="fold-medium" dir="row">
+            <node width="36%" dir="col">
+              <!--labels-->
+              <node height="20" justify="center">
+                <text text="Mixer"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Wet"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Noise"/>
+              </node>
+            </node>
+            <node dir="col" align="center" grow="1" width="1">
+              <!--controls-->
+              <node height="20" pad="1" width="100%">
+                <slider-h id="tip-mix"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="tip-wet"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="tip-noise"/>
+              </node>
+            </node>
+          </node>
+
+          <!-- COLOR VARIATIONS -->
+
+          <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
+            <node align="center" width="1" grow="1">
+              <text text="Pressure Variations"/>
+            </node>
+            <button id="button-unfold-colorvar" width="30" height="18" text="+"/>
+          </border>
+          <node id="fold-colorvar" dir="row">
+            <node width="36%" dir="col">
+              <!--labels-->
+              <node height="20" justify="center">
+                <text text="Hue"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Sat"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Val"/>
+              </node>
+            </node>
+            <node dir="col" align="center" grow="1" width="1">
+              <!--controls-->
+              <node height="20" pad="1" width="100%">
+                <slider-h id="tip-hue"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="tip-sat"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="tip-val"/>
+              </node>
+            </node>
+          </node>
+
+          <!-- JITTER -->
+
+          <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
+            <node align="center" width="1" grow="1">
+              <text text="Jitter"/>
+            </node>
+            <button id="button-unfold-jitter" width="30" height="18" text="+"/>
+          </border>
+          <node id="fold-jitter" dir="row">
+            <node width="36%" dir="col">
+              <node height="20" justify="center">
+                <text text="Flip"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Scale"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Angle"/>
+              </node>
+              <node height="20" justify="center" margin="0 0 20 0">
+                <text text="Aspect"/>
+              </node>
+              <node height="20" justify="center" margin="0 0 25 0">
+                <text text="Scatter"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Flow"/>
+              </node>
+              <node height="20" justify="center" margin="0 0 5 0">
+                <text text="Opacity"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Hue"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Sat"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="Val"/>
+              </node>
+              <node height="20" justify="center">
+                <text text="HSV Jitter"/>
+              </node>
+            </node>
+            <node dir="col" grow="1" width="1">
+              <node align="center" dir="row">
+                <checkbox id="tip-randflipx" width="20" height="19"/>
+                <text text="X axis"/>
+                <checkbox id="tip-randflipy" width="20" height="19" margin="0 0 0 10"/>
+                <text text="Y axis"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="jitter-scale"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="jitter-angle"/>
+              </node>
+              <node height="40" pad="1" width="100%" dir="col">
+                <slider-h id="jitter-aspect" height="19" value="0"/>
+                <node align="center" dir="row">
+                  <checkbox width="20" height="19" id="jitter-aspect-bothaxis"/>
+                  <text text="both axis"/>
+                </node>
+              </node>
+              <node height="40" pad="1" width="100%" dir="col" margin="0 0 5 0">
+                <slider-h id="jitter-scatter" height="19" value="0"/>
+                <node align="center" dir="row">
+                  <checkbox width="20" height="19" id="jitter-scatter-bothaxis"/>
+                  <text text="both axis"/>
+                </node>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="jitter-flow"/>
+              </node>
+              <node height="20" pad="1" width="100%" margin="0 0 5 0">
+                <slider-h id="jitter-opacity"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="jitter-hue"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="jitter-sat"/>
+              </node>
+              <node height="20" pad="1" width="100%">
+                <slider-h id="jitter-val"/>
+              </node>
+              <node height="20" pad="1" width="100%" dir="row" align="center">
+                <checkbox width="20" height="19" id="jitter-hsv-eachsample"/>
+                <text text="each sample"/>
+              </node>
+            </node>
+          </node>
+
+          <button id="brush-settings-reset" text="Reset brush settings" height="40" margin="10 10 0 10"/>
+        </scroll>
+      </border>
+    </node>
+  </layout>
+
+</root>
diff --git a/data/dialogs/progress-bar.xml b/data/dialogs/progress-bar.xml
new file mode 100644
index 0000000..3ab1d28
--- /dev/null
+++ b/data/dialogs/progress-bar.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+
+  <layout id="progress-bar">
+    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center">
+      <border id="body" thickness="1" border-color=".2" pad="3">
+        <border width="400" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
+          <text id="title" text="Just a test message"></text>
+        </border>
+        <border width="400" color="0 0 0 .9" pad="10" dir="col">
+          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
+            <border width="50" height="30" grow="1" margin="0 10 0 0" color=".2">
+              <border id="progress" width="50%" color="1 0 0 1" height="30"/>
+            </border>
+            <button id="btn-cancel" text="Cancel" width="60" height="30"/>
+          </node>
+        </border>
+      </border>
+    </border>
+  </layout>
+
+</root>
diff --git a/data/dialogs/settings.xml b/data/dialogs/settings.xml
new file mode 100644
index 0000000..6f91456
--- /dev/null
+++ b/data/dialogs/settings.xml
@@ -0,0 +1,44 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+
+  <layout id="settings">
+    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
+      <border thickness="1" border-color=".2" pad="3" width="80%" min-width="400">
+        <border width="100%" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
+          <text text="Global Settings"></text>
+        </border>
+        <border width="100%" color="0 0 0 .9" pad="10" dir="col">
+          <!--window content-->
+          <node dir="row">
+            <!--sidebar-->
+            <node width="100" flood-events="1">
+              <border height="30" width="100%" color=".2" pad="0 0 0 10" align="flex-begin" justify="center">
+                <text text="Viewport"/>
+              </border>
+              <button-custom height="30" width="100%" color=".1" pad="0 0 0 10" align="flex-begin" justify="center">
+                <text text="Registers"/>
+              </button-custom>
+              <button-custom height="30" width="100%" color=".1" pad="0 0 0 10" align="flex-begin" justify="center">
+                <text text="Toolbar"/>
+              </button-custom>
+              <button-custom height="30" width="100%" color=".1" pad="0 0 0 10" align="flex-begin" justify="center">
+                <text text="Panorama"/>
+              </button-custom>
+            </node>
+            <!--settings tab-->
+            <border color=".2" width="100%" height="200"></border>
+          </node>
+          <!--footer buttons-->
+          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
+            <button id="btn-ok" text="Ok" width="50" height="30" margin="0 10 0 0"/>
+            <button text="Cancel" width="60" height="30"/>
+          </node>
+        </border>
+      </border>
+    </border>
+  </layout>
+
+</root>
diff --git a/data/dialogs/template.xml b/data/dialogs/template.xml
new file mode 100644
index 0000000..9f5c254
--- /dev/null
+++ b/data/dialogs/template.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+
+  
+  
+</root>
diff --git a/data/dialogs/usermanual.xml b/data/dialogs/usermanual.xml
new file mode 100644
index 0000000..4d53188
--- /dev/null
+++ b/data/dialogs/usermanual.xml
@@ -0,0 +1,53 @@
+<?xml version="1.0"?>
+<root
+  xmlns="http://panopainter.com/layout.xsd"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+>
+
+  <layout id="usermanual">
+    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
+      <border thickness="1" border-color=".2" pad="3" max-width="650" dir="col" width="80%" height="80%">
+        <border width="100%" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
+          <text text="PanoPainter User Manual"></text>
+        </border>
+        <border width="100%" height="100%" color="0 0 0 .9" pad="10" dir="col">
+          <!--window content-->
+          <border color=".2" width="100%" height="1" grow="1">
+            <scroll pad="10" margin="5" color="1" dir="col" shrink="1">
+              <node align="center" margin="10 0 10 0">
+                <text color="0" font-size="30" text="Getting started with PanoPainter"/>
+              </node>
+              <image path="data/doc/images/panopainter-doc-overview.jpg" width="100%" align="center" justify="flex-end" autosize="1"/>
+              <node align="center" margin="40 0 20 0">
+                <text color="0" font-size="30" text="Brush Settings"/>
+              </node>
+              <image path="data/doc/images/panopainter-doc-brush-settings.jpg" width="100%" align="center" justify="flex-end" autosize="1"/>
+              <node align="center" margin="40 0 20 0">
+                <text color="0" font-size="30" text="Layers Settings"/>
+              </node>
+              <image path="data/doc/images/panopainter-doc-layers.jpg" width="100%" align="center" justify="flex-end" autosize="1"/>
+              <node align="center" margin="40 0 20 0">
+                <text color="0" font-size="30" text="File Menu"/>
+              </node>
+              <image path="data/doc/images/panopainter-doc-menu-file.jpg" width="100%" align="center" justify="flex-end" autosize="1"/>
+              <node align="center" margin="40 0 20 0">
+                <text color="0" font-size="30" text="Layers Menu"/>
+              </node>
+              <image path="data/doc/images/panopainter-doc-menu-layers.jpg" width="100%" align="center" justify="flex-end" autosize="1"/>
+              <node align="center" margin="40 0 20 0">
+                <text color="0" font-size="30" text="Timelapse Menu"/>
+              </node>
+              <image path="data/doc/images/panopainter-doc-menu-timelapse.jpg" width="100%" align="center" justify="flex-end" autosize="1"/>
+              <node height="40" margin="0 0 40 0"></node>
+            </scroll>
+          </border>
+          <!--footer buttons-->
+          <node height="60" dir="row" justify="flex-end">
+            <button id="btn-ok" text="Ok" width="100" height="30" margin="5 0 0 0"/>
+          </node>
+        </border>
+      </border>
+    </border>
+  </layout>
+
+</root>
diff --git a/data/layout.xml b/data/layout.xml
index 5b4796a..ba2b2f2 100644
--- a/data/layout.xml
+++ b/data/layout.xml
@@ -3,13 +3,6 @@
   xmlns="http://panopainter.com/layout.xsd"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 >
-
-  <!--brush icon-->
-  <layout id="tpl-brush-icon">
-    <button-custom width="50" height="50" margin="1" pad="2" align="center" justify="center">
-      <image width="100%" height="100%"/>
-    </button-custom>
-  </layout>
   
   <!-- PANEL BRUSH DOWNLOAD -->
   <layout id="dialog-brush-download-item">
@@ -40,1465 +33,6 @@
       </border>
     </border>
   </layout>
-  
-  <!-- PANEL BRUSH UPLOAD -->
-  <layout id="dialog-brush-upload">
-    <border id="background" positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
-      <border id="form" thickness="1" border-color=".2" pad="3" width="650" dir="col">
-        <border id="title" width="100%" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
-          <text text="Export Brushes"></text>
-        </border>
-        <border width="100%" color="0 0 0 .9" pad="10" dir="row" grow="1">
-          <border id="files-list" dir="row" wrap="1" flood-events="1" grow="1" height="100%" margin="0 0 0 0" pad="10" color=".2 .2 .2 1">
-            <node dir="col" margin="0 20 0 0">
-              <image-texture id="header-tex" width="256" height="128" pad="10">
-                <text id="header-descr" text="Header image.\nSelect a 256x128 pixels image that will be displayed as a preview for this brushes collection." text-wrap-width="230" color=".5"/>
-              </image-texture>
-              <node dir="row" width="256" height="30" justify="center" margin="10 0 0 0">
-                <button id="header-gen" text="Generate" grow="1" height="100%"/>
-                <button id="header-open" text="Open" grow="1" height="100%"/>
-                <button id="header-clear" text="Clear" grow="1" height="100%"/>
-              </node>
-              <border os="win,osx,android" color=".4" grow="1" pad="5" margin="10 0 0 0" justify="center">
-                <node dir="row" align="center">
-                  <checkbox id="export-data" width="30" aspect-ratio="1" margin="0 5 0 0"/>
-                  <text text="Export data"/>
-                  <node grow="1"/>
-                  <button os="osx" id="pick-dest" text="Pick dest." pad="5"/>
-                </node>
-                <text color=".7" text-wrap-width="256" text="Save the generated preview images to a separete folder."/>
-                <text id="dest-path" margin="5 0 0 0" text-wrap-width="256"/>
-              </border>
-            </node>
-            <node grow="1" dir="col">
-              <node dir="row" height="30" align="center" margin="0 0 4 0">
-                <text text="Author" margin="0 5 0 0"/>
-                <text-input id="info-author" pad="5" grow="1" height="30" color=".3"/>
-              </node>
-              <node dir="row" height="30" align="center" margin="0 0 4 0">
-                <text text="Email" margin="0 5 0 0"/>
-                <text-input id="info-email" pad="5" grow="1" height="30" color=".3"/>
-              </node>
-              <node dir="row" height="30" align="center" margin="0 0 4 0">
-                <text text="URL" margin="0 5 0 0"/>
-                <text-input id="info-url" pad="5" grow="1" height="30" color=".3"/>
-              </node>
-              <node dir="row" grow="1">
-                <text text="Description" margin="0 5 0 0"/>
-                <text-input id="info-descr" text-vertical-align="top" pad="5" grow="1" height="100%" color=".3" multiline="1"/>
-              </node>
-            </node>
-          </border>
-        </border>
-        <node id="footer" height="50" dir="row" align="flex-end" justify="flex-end" pad="10">
-          <button id="btn-ok" text="Export" width="100" height="30" margin="0 10 0 0"/>
-          <button id="btn-cancel" text="Cancel" width="60" height="30"/>
-        </node>
-      </border>
-    </border>
-  </layout>
-
-  <!-- PANEL LAYERS -->
-  <layout id="tpl-panel-layers">
-    <node width="300" margin="0 0 10 0" rtl="ltr">
-      <border id="title" height="30" color=".4" align="center" justify="center" margin="0 0 0 0">
-        <text text="Layers" color="1 1 1 1"/>
-      </border>
-      
-      <border height="35" color=".4" dir="row" align="center" flood-events="1" pad="0 0 5 0">
-        <checkbox id="alpha-lock" icon="data/ui/check-lock-transparency.png" width="30" margin="0 5 0 5"/>
-        <combobox id="blend-mode" width="100" height="30" margin="0 5 0 0" combo-list="Normal,-,Multiply,Screen,-,Color Dodge,Overlay"/>
-        <slider-h id="opacity" value="1" grow="1" width="1" margin="0 5 0 0"/>
-      </border>
-
-      <scroll id="layers-container" pad="5" color=".4" dir="col-reverse" justify="flex-end" flood-events="1" grow="1" shrink="1">
-        <!--layers list-->
-      </scroll>
-      
-      <border height="40" color=".5" dir="row" align="center" flood-events="1">
-        <button-custom id="btn-add" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 5">
-          <icon width="30" icon="add"/>
-        </button-custom>
-        <button-custom id="btn-duplicate" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 5">
-          <icon width="30" icon="page_copy"/>
-        </button-custom>
-        <button-custom id="btn-up" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
-          <icon width="30" icon="bullet_arrow_up"/>
-        </button-custom>
-        <button-custom id="btn-down" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
-          <icon width="30" icon="bullet_arrow_down"/>
-        </button-custom>
-        <node grow="1"></node>
-        <button-custom id="btn-remove" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 10 0 0">
-          <icon width="30" icon="bin_closed"/>
-        </button-custom>
-      </border>
-    </node>
-  </layout>
-  <layout id="tpl-layer">
-    <border height="30" border-color="1" thickness="1" color=".4" dir="col" margin="1 0 1 0">
-      <node dir="row" height="30">
-        <node width="30" pad="1">
-          <checkbox id="cb" icon="data/ui/check-layer-visibility.png"/>
-        </node>
-        <node width="1" grow="1" justify="center" pad="5">
-          <text id="label"/>
-        </node>
-      </node>
-    </border>
-  </layout>
-
-  <!-- PANEL PRESETS -->
-  <layout id="tpl-panel-brush-preset">
-    <node rtl="ltr" min-width="100">
-      <border id="notification" color=".4" align="center" justify="center" grow="2">
-        <text text="No brush presets loaded."/>
-        <text text="Import from Photoshop ABR files."/>
-        <text text="Or download free ones."/>
-        <border color=".3" dir="row" height="60" margin="15 0 15 0">
-          <button id="import" text="Import Brush" pad="10" height="100%"/>
-          <button id="download" text="Download" pad="10" height="100%"/>
-        </border>
-        <text text="Otherwise you can create new brushes,"/>
-        <text text="using the Brush Settings Tool and add"/>
-        <text text="the new brush here with the + button"/>
-      </border>
-      <scroll id="brushes" color=".4" pad="5 20 5 5" dir="col" wrap="0" flood-events="1" grow="1" height="1"/>
-      <border id="toolbar" height="40" color=".5" dir="row" align="center" flood-events="1">
-        <button-custom id="btn-add" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 5">
-          <icon width="30" icon="add"/>
-        </button-custom>
-        <button-custom id="btn-up" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
-          <icon width="30" icon="bullet_arrow_up"/>
-        </button-custom>
-        <button-custom id="btn-down" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
-          <icon width="30" icon="bullet_arrow_down"/>
-        </button-custom>
-        <!--<button-custom id="btn-save" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
-          <icon width="30" icon="bullet_disk"/>
-        </button-custom>-->
-        <node grow="1"></node>
-        <button-custom id="btn-remove" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 10 0 0">
-          <icon width="30" icon="bin_closed"/>
-        </button-custom>
-        <button-custom id="btn-menu" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 10 0 10">
-          <icon width="30" icon="resultset_next"/>
-        </button-custom>
-      </border>
-    </node>
-  </layout>
-  <layout id="tpl-brush-preset">
-    <button-custom height="70" margin="1" pad="5" align="center" justify="center" dir="row">
-      <!--<node width="30" align="center">
-        <checkbox icon="data/ui/check-lock-transparency.png" width="20" height="20" pad="0"/>
-      </node>-->
-      <border color="1" width="40" height="60" align="center" justify="center" dir="col">
-        <image id="thumb" width="40" height="40"/>
-        <text id="caption-size" text="000" color="0" margin="3 0 0 0"/>
-      </border>
-      <stroke-preview id="canvas" width="1" grow="1" height="60"/>
-    </button-custom>
-  </layout>
-  <layout id="tpl-brush-popup">
-    <popup-menu positioning="absolute" position="100 100" width="200" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
-      <button-custom id="import" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
-        <text text="Import from File" grow="1" margin="0 0 0 5"/>
-      </button-custom>
-      <button-custom id="export" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
-        <text text="Export to File" grow="1" margin="0 0 0 5"/>
-      </button-custom>
-      <button-custom id="download" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
-        <text text="Download from Cloud" grow="1" margin="0 0 0 5"/>
-      </button-custom>
-      <button-custom id="share" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
-        <text text="Share to Cloud" grow="1" margin="0 0 0 5"/>
-      </button-custom>
-      <button-custom id="clear-all" height="40" align="center" color=".2" pad="0 0 0 10" dir="row">
-        <icon icon="bin" width="20"/>
-        <text text="Delete all presets" grow="1" margin="0 0 0 5"/>
-      </button-custom>
-    </popup-menu>
-  </layout>
-
-  <!-- PANEL TIPS/PATTERN -->
-  <layout id="tpl-panel-brushes">
-    <node rtl="ltr">
-      <scroll id="brushes" color=".4" pad="5" dir="row" wrap="1" flood-events="1" grow="1" height="1"/>
-      <border height="40" color=".5" dir="row" align="center" flood-events="1">
-        <button-custom id="btn-add" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 5">
-          <icon width="30" icon="add"/>
-        </button-custom>
-        <button-custom id="btn-up" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
-          <icon width="30" icon="bullet_arrow_up"/>
-        </button-custom>
-        <button-custom id="btn-down" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
-          <icon width="30" icon="bullet_arrow_down"/>
-        </button-custom>
-        <!--
-        <button-custom id="btn-save" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
-          <icon width="30" icon="bullet_disk"/>
-        </button-custom>
-        -->
-        <node grow="1"></node>
-        <button-custom id="btn-remove" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 10 0 0">
-          <icon width="30" icon="bin_closed"/>
-        </button-custom>
-      </border>
-    </node>
-  </layout>
-
-  <!-- PANEL COLOR PICKER -->
-  <layout id="tpl-panel-color">
-    <node min-width="100" height="100" margin="0 0 10 0" rtl="ltr">
-      <border id="title" height="30" color=".4" align="center" justify="center">
-        <text text="Colors" color="1 1 1 1"/>
-      </border>
-      <border color=".4" pad="5" dir="row" height="10" grow="1">
-        <color-quad id="quad" color="1 0 0 1" height="100%" grow="1"/>
-        <node width="30" dir="col" pad="0 0 0 5"><slider-hue id="hue"/></node>
-      </border>
-    </node>
-  </layout>
-
-  <!-- PANEL STROKE -->
-  <layout id="tpl-panel-stroke">
-    <node width="350" margin="0 0 10 0">
-      <border id="title" height="30" pad="5 0 0 0" color=".4" align="center" justify="center" dir="row">
-        <node align="center" pad="0 0 0 30" justify="center" height="100%" width="1" grow="1">
-          <text text="Brush Settings"/>
-        </node>
-        <button id="button-unfold-all" width="30" height="20" text="+" margin="0 5 0 0"/>
-      </border>
-      <border color=".4" pad="5" dir="col" width="100%" grow="1">
-
-        <!-- PREVIEW -->
-
-        <button-custom id="preset-button" color=".2" pad="5" margin="0 0 0 0"> 
-          <stroke-preview id="canvas" width="100%" height="100"/>
-        </button-custom>
-
-        <scroll id="scroller" scroll-color=".3" margin="5 5 5 10" color=".4" height="1" grow="1">
-        
-        <!-- PRESET AND SHAPE -->
-
-        <node dir="row">
-          <node width="36%" dir="col">
-            <!--<node height="20" justify="center" margin="5 0 5 0"><text text="Shade"/></node>-->
-            <node height="40" justify="center" margin="5 0 0 0">
-              <text text="Shape"/>
-            </node>
-            <node height="20" justify="center" margin="5 0 0 0">
-              <text text="Aspect"/>
-            </node>
-          </node>
-          <node dir="col" align="center" grow="1" width="1" flood-events="1">
-            <!--<node height="20" pad="1" width="100%" margin="5 0 5 0"><slider-h id="tip-shade" value="1"/></node>-->
-            <node dir="row" margin="5 0 0 0" width="100%">
-              <button-custom id="tip-change" width="40" height="40" dir="row" pad="4">
-                <image id="tip-change-thumb" width="32" height="100%"/>
-              </button-custom>
-              <node width="1" grow="1" height="40">
-                <node align="center" dir="row">
-                  <checkbox id="tip-invert" width="20" height="19"/>
-                  <text text="invert value"/>
-                </node>
-                <node align="center" dir="row">
-                  <checkbox id="tip-flipx" width="20" height="19"/>
-                  <text text="flipX"/>
-                  <checkbox id="tip-flipy" width="20" height="19" margin="0 0 0 5"/>
-                  <text text="flipY"/>
-                </node>
-              </node>
-            </node>
-            <node height="20" dir="row" pad="1" width="100%" margin="5 0 0 0">
-              <slider-h id="tip-aspect" width="1" grow="1" value="0.5"/>
-              <button-custom id="tip-aspect-reset" width="20" height="20" margin="0 0 0 5">
-                <icon icon="arrow_rotate_clockwise"/>
-              </button-custom>
-            </node>
-          </node>
-        </node>
-
-        <!-- COLOR -->
-
-        <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
-          <node align="center" width="1" grow="1">
-            <text text="Color"/>
-          </node>
-          <button id="button-unfold-color" width="30" height="18" text="+"/>
-        </border>
-        <node id="fold-color" dir="row">
-          <node width="36%" dir="col">
-            <!--labels-->
-            <node height="30" justify="center" margin="0 0 5 0">
-              <text text="Blend"/>
-            </node>
-            <node height="20" justify="center" margin="0 0 20 0">
-              <text text="Flow"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Opacity"/>
-            </node>
-          </node>
-          <node dir="col" align="center" grow="1" width="1">
-            <!--controls-->
-            <node height="30" pad="1" width="100%" dir="row" margin="0 0 5 0">
-              <combobox id="blend-mode" text="Normal" width="100%" height="28" combo-list="Normal,-,Multiply,Screen,-,Color Dodge,Overlay"/>
-            </node>
-            <node height="40" pad="1" width="100%" dir="col">
-              <slider-h id="tip-flow" height="19" value=".5"/>
-              <node align="center" dir="row">
-                <checkbox id="tip-flow-pressure" width="20" height="19"/>
-                <text text="flow pressure"/>
-              </node>
-            </node>
-            <node height="40" pad="1" width="100%" dir="col">
-              <slider-h id="tip-opacity" height="19" value="1"/>
-              <node align="center" dir="row">
-                <checkbox id="tip-opacity-pressure" width="20" height="19"/>
-                <text text="opacity pressure"/>
-              </node>
-            </node>
-          </node>
-        </node>
-
-        <!-- METRICS -->
-
-        <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
-          <node align="center" width="1" grow="1">
-            <text text="Metrics"/>
-          </node>
-          <button id="button-unfold-metrics" width="30" height="18" text="+"/>
-        </border>
-        <node id="fold-metrics" dir="row">
-          <node width="36%" dir="col">
-            <!--labels-->
-            <node height="20" justify="center" margin="0 0 20 0">
-              <text text="Size"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Spacing"/>
-            </node>
-            <node height="20" justify="center" margin="0 0 40 0">
-              <text text="Angle"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Smoothing"/>
-            </node>
-          </node>
-          <node dir="col" align="center" grow="1" width="1">
-            <!--controls-->
-            <node height="40" pad="1" width="100%" dir="col">
-              <slider-h id="tip-size" height="19" value=".25"/>
-              <node align="center" dir="row">
-                <checkbox id="tip-size-pressure" width="20" height="19"/>
-                <text text="size pressure"/>
-              </node>
-            </node>
-            <node height="20" pad="1" width="100%">
-              <slider-h id="tip-spacing" value=".25"/>
-            </node>
-            <node height="60" pad="1" width="100%" dir="col">
-              <slider-h id="tip-angle" height="19"/>
-              <node align="center" dir="row">
-                <checkbox id="tip-angle-init" width="20" height="19"/>
-                <text text="initial direction"/>
-              </node>
-              <node align="center" dir="row">
-                <checkbox id="tip-angle-follow" width="20" height="19"/>
-                <text text="follow direction"/>
-              </node>
-            </node>
-            <node height="20" pad="1" width="100%">
-              <slider-h id="tip-angle-smooth" value="0"/>
-            </node>
-          </node>
-        </node>
-        
-        <!-- PATTERN -->
-
-        <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
-          <checkbox id="pattern-enabled" width="20" height="20"/>
-          <node align="center" width="1" grow="1">
-            <text text="Pattern"/>
-          </node>
-          <button id="button-unfold-pattern" width="30" height="18" text="+"/>
-        </border>
-        <node id="fold-pattern" dir="row">
-          <node width="36%" dir="col">
-            <!--labels-->
-            <node height="40" justify="center" margin="0 0 5 0">
-              <text text="Pattern"/>
-            </node>
-            <node height="30" justify="center" margin="0 0 5 0">
-              <text text="Blend"/>
-            </node>
-            <!--
-            <node height="30" justify="center" margin="0 0 5 0">
-              <text text="Projection"/>
-            </node>
-            -->
-            <node height="20" justify="center">
-              <text text="Apply"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Offset"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Depth"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Scale"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Brightness"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Contrast"/>
-            </node>
-          </node>
-          <node dir="col" grow="1" width="1">
-            <!--controls-->
-            <node dir="row" margin="0 0 5 0">
-              <button-custom id="pattern-change" width="40" height="40" dir="row" pad="4">
-                <image id="pattern-change-thumb" width="32" height="100%"/>
-              </button-custom>
-              <node width="1" grow="1" height="40">
-                <node align="center" dir="row">
-                  <checkbox id="pattern-invert" width="20" height="19"/>
-                  <text text="invert value"/>
-                </node>
-                <node align="center" dir="row">
-                  <checkbox id="pattern-flipx" width="20" height="19"/>
-                  <text text="flipX"/>
-                  <checkbox id="pattern-flipy" width="20" height="19" margin="0 0 0 5"/>
-                  <text text="flipY"/>
-                </node>
-              </node>
-            </node>
-            <node height="30" width="100%" pad="1" dir="row" margin="0 0 5 0">
-              <combobox id="pattern-blend-mode" width="100%" height="28" combo-list="Normal,-,Multiply,Subtract,Darken,Overlay,Color Dodge,Color Burn,Linear Burn,Hard Mix,-,Linear Height,Height"/>
-            </node>
-            <!--
-            <node height="30" width="100%" pad="1" dir="row" margin="0 0 5 0">
-              <combobox id="pattern-proj-mode" width="100%" height="28" combo-list="Cube,Screen"/>
-            </node>
-            -->
-            <node align="center" dir="row">
-              <checkbox id="pattern-eachsample" height="20" width="20"/>
-              <text text="each sample"/>
-            </node>
-            <node align="center" dir="row">
-              <checkbox id="pattern-rand-offset" height="20" width="20"/>
-              <text text="randomize"/>
-            </node>
-            <node height="20" pad="1" width="100%">
-              <slider-h id="pattern-depth" value="1"/>
-            </node>
-            <node height="20" pad="1" width="100%">
-              <slider-h id="pattern-scale" value=".25"/>
-            </node>
-            <node height="20" pad="1" width="100%">
-              <slider-h id="pattern-brightness" value=".5"/>
-            </node>
-            <node height="20" pad="1" width="100%">
-              <slider-h id="pattern-contrast" value=".5"/>
-            </node>
-          </node>
-        </node>
-
-        <!-- DUAL BRUSH -->
-
-        <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
-          <checkbox id="dual-enabled" width="20" height="20"/>
-          <node align="center" width="1" grow="1">
-            <text text="Dual Brush"/>
-          </node>
-          <button id="button-unfold-dualbrush" width="30" height="18" text="+"/>
-        </border>
-        <node id="fold-dualbrush" dir="row">
-          <node width="36%" dir="col">
-            <!--labels-->
-            <node height="40" justify="center" margin="0 0 5 0">
-              <text text="Shape"/>
-            </node>
-            <node height="30" justify="center" margin="0 0 5 0">
-              <text text="Blend"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Flip"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Size"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Flow"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Opacity"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Spacing"/>
-            </node>
-            <node height="20" justify="center" margin="0 0 20 0">
-              <text text="Scatter"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Rotate"/>
-            </node>
-          </node>
-          <node dir="col" grow="1" width="1">
-            <!--controls-->
-            <node dir="row" margin="0 0 5 0">
-              <button-custom id="dual-change" width="40" height="40" dir="row" pad="4">
-                <image id="dual-change-thumb" width="32" height="100%"/>
-              </button-custom>
-              <node width="1" grow="1" height="40">
-                <node align="center" dir="row">
-                  <checkbox id="dual-invert" width="20" height="19"/>
-                  <text text="invert value"/>
-                </node>
-                <node align="center" dir="row">
-                  <checkbox id="dual-flipx" width="20" height="19"/>
-                  <text text="flipX"/>
-                  <checkbox id="dual-flipy" width="20" height="19" margin="0 0 0 5"/>
-                  <text text="flipY"/>
-                </node>
-              </node>
-            </node>
-            <node height="30" width="100%" pad="1" dir="row" margin="0 0 5 0">
-              <combobox id="dual-blend-mode" width="100%" height="28" combo-list="Normal,-,Multiply,Subtract,Darken,Overlay,Color Dodge,Color Burn,Linear Burn,Hard Mix,-,Linear Height,Height"/>
-            </node>
-            <node align="center" dir="row">
-              <checkbox id="dual-randflip" height="20" width="20"/>
-              <text text="random flips"/>
-            </node>
-            <node height="20" pad="1" width="100%">
-              <slider-h id="dual-size" value=".25"/>
-            </node>
-            <node height="20" pad="1" width="100%">
-              <slider-h id="dual-flow" value=".75"/>
-            </node>
-            <node height="20" pad="1" width="100%">
-              <slider-h id="dual-opacity" value="1"/>
-            </node>
-            <node height="20" pad="1" width="100%">
-              <slider-h id="dual-spacing" value=".25"/>
-            </node>
-            <node height="40" pad="1" width="100%" dir="col">
-              <slider-h id="dual-scatter" height="19" value="0"/>
-              <node align="center" dir="row">
-                <checkbox width="20" height="19" id="dual-scatter-bothaxis"/>
-                <text text="both axis"/>
-              </node>
-            </node>
-            <node height="20" pad="1" width="100%">
-              <slider-h id="dual-rotate" value=".25"/>
-            </node>
-          </node>
-        </node>
-
-        <!-- MEDIUM -->
-
-        <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
-          <node align="center" width="1" grow="1">
-            <text text="Medium"/>
-          </node>
-          <button id="button-unfold-medium" width="30" height="18" text="+"/>
-        </border>
-        <node id="fold-medium" dir="row">
-          <node width="36%" dir="col">
-            <!--labels-->
-            <node height="20" justify="center">
-              <text text="Mixer"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Wet"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Noise"/>
-            </node>
-          </node>
-          <node dir="col" align="center" grow="1" width="1">
-            <!--controls-->
-            <node height="20" pad="1" width="100%">
-              <slider-h id="tip-mix"/>
-            </node>
-            <node height="20" pad="1" width="100%">
-              <slider-h id="tip-wet"/>
-            </node>
-            <node height="20" pad="1" width="100%">
-              <slider-h id="tip-noise"/>
-            </node>
-          </node>
-        </node>
-
-        <!-- COLOR VARIATIONS -->
-
-        <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
-          <node align="center" width="1" grow="1">
-            <text text="Pressure Variations"/>
-          </node>
-          <button id="button-unfold-colorvar" width="30" height="18" text="+"/>
-        </border>
-        <node id="fold-colorvar" dir="row">
-          <node width="36%" dir="col">
-            <!--labels-->
-            <node height="20" justify="center">
-              <text text="Hue"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Sat"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Val"/>
-            </node>
-          </node>
-          <node dir="col" align="center" grow="1" width="1">
-            <!--controls-->
-            <node height="20" pad="1" width="100%">
-              <slider-h id="tip-hue"/>
-            </node>
-            <node height="20" pad="1" width="100%">
-              <slider-h id="tip-sat"/>
-            </node>
-            <node height="20" pad="1" width="100%">
-              <slider-h id="tip-val"/>
-            </node>
-          </node>
-        </node>
-
-        <!-- JITTER -->
-
-        <border color=".2" height="20" dir="row" justify="center" align="center" margin="5 0 5 0">
-          <node align="center" width="1" grow="1">
-            <text text="Jitter"/>
-          </node>
-          <button id="button-unfold-jitter" width="30" height="18" text="+"/>
-        </border>
-        <node id="fold-jitter" dir="row">
-          <node width="36%" dir="col">
-            <node height="20" justify="center">
-              <text text="Flip"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Scale"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Angle"/>
-            </node>
-            <node height="20" justify="center" margin="0 0 20 0">
-              <text text="Aspect"/>
-            </node>
-            <node height="20" justify="center" margin="0 0 25 0">
-              <text text="Scatter"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Flow"/>
-            </node>
-            <node height="20" justify="center" margin="0 0 5 0">
-              <text text="Opacity"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Hue"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Sat"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="Val"/>
-            </node>
-            <node height="20" justify="center">
-              <text text="HSV Jitter"/>
-            </node>
-          </node>
-          <node dir="col" grow="1" width="1">
-            <node align="center" dir="row">
-              <checkbox id="tip-randflipx" width="20" height="19"/>
-              <text text="X axis"/>
-              <checkbox id="tip-randflipy" width="20" height="19" margin="0 0 0 10"/>
-              <text text="Y axis"/>
-            </node>
-            <node height="20" pad="1" width="100%">
-              <slider-h id="jitter-scale"/>
-            </node>
-            <node height="20" pad="1" width="100%">
-              <slider-h id="jitter-angle"/>
-            </node>
-            <node height="40" pad="1" width="100%" dir="col">
-              <slider-h id="jitter-aspect" height="19" value="0"/>
-              <node align="center" dir="row">
-                <checkbox width="20" height="19" id="jitter-aspect-bothaxis"/>
-                <text text="both axis"/>
-              </node>
-            </node>
-            <node height="40" pad="1" width="100%" dir="col" margin="0 0 5 0">
-              <slider-h id="jitter-scatter" height="19" value="0"/>
-              <node align="center" dir="row">
-                <checkbox width="20" height="19" id="jitter-scatter-bothaxis"/>
-                <text text="both axis"/>
-              </node>
-            </node>
-            <node height="20" pad="1" width="100%">
-              <slider-h id="jitter-flow"/>
-            </node>
-            <node height="20" pad="1" width="100%" margin="0 0 5 0">
-              <slider-h id="jitter-opacity"/>
-            </node>
-            <node height="20" pad="1" width="100%">
-              <slider-h id="jitter-hue"/>
-            </node>
-            <node height="20" pad="1" width="100%">
-              <slider-h id="jitter-sat"/>
-            </node>
-            <node height="20" pad="1" width="100%">
-              <slider-h id="jitter-val"/>
-            </node>
-            <node height="20" pad="1" width="100%" dir="row" align="center">
-              <checkbox width="20" height="19" id="jitter-hsv-eachsample"/>
-              <text text="each sample"/>
-            </node>
-          </node>
-        </node>
-
-          <button id="brush-settings-reset" text="Reset brush settings" height="40" margin="10 10 0 10"/>
-        </scroll>
-      </border>
-    </node>
-  </layout>
-
-  <!-- PANEL GRIDS -->
-  <layout id="tpl-panel-grid">
-    <node width="350" margin="0 0 10 0" rtl="ltr">
-      <border id="title" height="30" color=".4" align="center" justify="center">
-        <text text="Grids" color="1 1 1 1"/>
-      </border>
-      <border color=".4" pad="5" dir="col" width="100%" grow="1">
-
-        <node dir="row" margin="0 0 10 0">
-          <node width="200" grow="1"  margin="0 5 0 0">
-            <border color=".2" height="20" justify="center" align="center">
-              <text text="Heightmap"/>
-            </border>
-            <border color="1" align="center" pad="5" margin="0 0 5 0" min-height="70">
-              <image-texture id="grid-heightmap-preview" width="100%" grow="1" height="100" aspect-ratio="1"/>
-            </border>            
-          </node>
-          <node width="100" pad="0" dir="col">
-            <button id="grid-heightmap-load" text="Open" width="100" height="30" margin="0 2 0 0"/>
-            <button id="grid-heightmap-clear" text="Clear" width="100" height="30" margin="0 2 0 0"/>
-            <button id="grid-heightmap-reload" text="Reload" width="100" height="30" margin="0 2 0 0"/>
-          </node>
-        </node>
-
-        <scroll id="scroller" color=".4" scroll-color=".2" grow="1">
-          <node dir="row">
-            <node width="36%" dir="col">
-              <node height="20" justify="center">
-                <text text="Opacity"/>
-              </node>
-              <node height="20" justify="center">
-                <text text="Value"/>
-              </node>
-              <node height="20" justify="center">
-                <text text="Offset"/>
-              </node>
-              <node height="30" justify="center" margin="5 0 0 0">
-                <text text="Resolution"/>
-              </node>
-            </node>
-            <node dir="col" align="center" grow="1" width="1" flood-events="1">
-              <node height="20" pad="1" width="100%">
-                <slider-h id="grid-ground-opacity"/>
-              </node>
-              <node height="20" pad="1" width="100%">
-                <slider-h id="grid-ground-value" value="0.0"/>
-              </node>
-              <node height="20" pad="1" width="100%">
-                <slider-h id="grid-ground-offset" value="0.25"/>
-              </node>
-              <node height="30" pad="1" width="100%" dir="row" margin="5 0 0 0">
-                <combobox id="grid-ground-resolution" width="100%" height="28" combo-list="0.1,0.5,1,2,4,8" default="2"/>
-              </node>
-            </node>
-          </node>
-          <node height="5"/>
-          <node dir="row">
-            <node width="36%" dir="col">
-              <node height="30" justify="center" margin="5 0 0 0">
-                <text text="Shading"/>
-              </node>
-              <node height="20" justify="center" margin="5 0 0 0">
-                <text text="Wireframe"/>
-              </node>
-              <!--<node height="20" justify="center"><text text="Thickness"/></node>-->
-              <node height="20" justify="center">
-                <text text="Height"/>
-              </node>
-              <node height="20" justify="center">
-                <text text="Light Yaw"/>
-              </node>
-              <node height="20" justify="center">
-                <text text="Light Pitch"/>
-              </node>
-              <node height="20" justify="center">
-                <text text="Ambient"/>
-              </node>
-              <node height="20" justify="center">
-                <text text="Radius"/>
-              </node>
-              <node height="30" justify="center" margin="5 0 0 0">
-                <text text="Samples"/>
-              </node>
-              <node height="30" justify="center" margin="5 0 0 0">
-                <text text="Tex Res."/>
-              </node>
-            </node>
-            <node dir="col" align="center" grow="1" width="1" flood-events="1" color=".3" >
-              <node height="30" pad="1" width="100%" dir="row" margin="5 0 0 0">
-                <combobox id="grid-heightmap-shading" width="100%" height="28" combo-list="Transparent,Flat,Solid,Textured" default="0"/>
-              </node>
-              <node height="20" pad="1" width="100%" margin="5 0 0 0">
-                <slider-h id="grid-heightmap-wireframe" value="1.0"/>
-              </node>
-              <!--<node height="20" pad="1" width="100%"><slider-h id="grid-heightmap-thickness" value="0.5"/></node>-->
-              <node height="20" pad="1" width="100%">
-                <slider-h id="grid-heightmap-height" value="0.25"/>
-              </node>
-              <node height="20" pad="1" width="100%">
-                <slider-h id="grid-heightmap-lyaw" value="0.5"/>
-              </node>
-              <node height="20" pad="1" width="100%">
-                <slider-h id="grid-heightmap-lpitch" value="0.1"/>
-              </node>
-              <node height="20" pad="1" width="100%">
-                <slider-h id="grid-heightmap-ambient" value="0.0"/>
-              </node>
-              <node height="20" pad="1" width="100%">
-                <slider-h id="grid-heightmap-radius" value="0.25"/>
-              </node>
-              <node height="30" pad="1" width="100%" dir="row" margin="5 0 0 0">
-                <combobox id="grid-heightmap-samples" width="100%" height="28" combo-list="1,4,8,16,32,64,128" default="2"/>
-              </node>
-              <node height="30" pad="1" width="100%" dir="row" margin="5 0 0 0">
-                <combobox id="grid-heightmap-texres" width="100%" height="28" combo-list="256,512,1024,2048,4096" default="1"/>
-              </node>
-            </node>
-          </node>
-        </scroll>
-
-        <button id="grid-render" text="Render Lightmap" height="30" margin="5 0 0 0"/>
-        <button id="grid-commit" text="Commit to Layer" height="30" margin="5 0 0 0"/>
-      
-    </border>
-    </node>
-  </layout>
-
-  <!-- INPUT BOX -->
-  <layout id="input-box">
-    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center">
-      <border thickness="1" border-color=".2" pad="3">
-        <border width="400" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
-          <text id="title" text="Just a test message"></text>
-        </border>
-        <border width="400" color="0 0 0 .9" pad="10" dir="col">
-          <node dir="row" height="30" align="center" grow="1">
-            <text id="field-name" text="Field" margin="0 5 0 0"/>
-            <text-input id="field-text" align="center" pad="5" grow="1" height="30" color=".3"/>
-          </node>
-          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
-            <button id="btn-ok" text="Ok" width="50" height="30" margin="0 10 0 0"/>
-            <button id="btn-cancel" text="Cancel" width="60" height="30"/>
-          </node>
-        </border>
-      </border>
-    </border>
-  </layout>
-
-  <!-- MESSAGE BOX -->
-  <layout id="message-box">
-    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center">
-      <border thickness="1" border-color=".2" pad="3">
-        <border width="400" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
-          <text id="title" text="Just a test message"></text>
-        </border>
-        <border width="400" color="0 0 0 .9" pad="10" dir="col">
-          <text id="message" text-wrap-width="380" text="Longer description for the error or the message."></text>
-          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
-            <button id="btn-ok" text="Ok" width="50" height="30" margin="0 10 0 0"/>
-            <button id="btn-cancel" text="Cancel" width="60" height="30"/>
-          </node>
-        </border>
-      </border>
-    </border>
-  </layout>
-
-  <!-- PROGRESS BAR -->
-  <layout id="progress-bar">
-    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center">
-      <border id="body" thickness="1" border-color=".2" pad="3">
-        <border width="400" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
-          <text id="title" text="Just a test message"></text>
-        </border>
-        <border width="400" color="0 0 0 .9" pad="10" dir="col">
-          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
-            <border width="50" height="30" grow="1" margin="0 10 0 0" color=".2">
-              <border id="progress" width="50%" color="1 0 0 1" height="30"/>
-            </border>
-            <button id="btn-cancel" text="Cancel" width="60" height="30"/>
-          </node>
-        </border>
-      </border>
-    </border>
-  </layout>
-
-  <!-- PANEL COLOR PICKER EXTENDED -->
-  <layout id="color-picker">
-      <border>
-        <!--<border width="300" height="30" color=".2 .2 .2 .9" dir="row" align="center">
-          <node grow="1" width="10" align="center">
-            <text id="title" text="Color Picker"/>
-          </node>
-          --><!--<combobox justify="flex-end" pad="5" margin="0 5 0 0" text="Triangle" combo-list="Triangle,Square" default="0"/>--><!--
-        </border>-->
-        <border width="100%" color=".4" pad="10" dir="col">
-          <colorwheel id="wheel" width="100%" aspect-ratio="1"/>
-          <border color=".3" pad="5" dir="row" margin="10 0 0 0">
-            <border id="color-cur" height="30" grow="1" color="1"/>
-            <border id="color-old" height="30" grow="1" color="0" margin="0 10 0 0"/>
-            <border id="color-old1" height="30" grow="0.5" color="0" margin="0 2 0 0"/>
-            <border id="color-old2" height="30" grow="0.5" color="0" margin="0 2 0 0"/>
-            <border id="color-old3" height="30" grow="0.5" color="0" margin="0 2 0 0"/>
-            <border id="color-old4" height="30" grow="0.5" color="0"/>
-          </border>
-          <!--HSV-->
-          <border pad="5" color=".3" margin="10 0 0 0">
-            <node width="100%" pad="2" height="20" dir="row" align="center">
-              <node width="20"><text text="H"/></node>
-              <slider-h id="hsv-h" width="10" grow="1" value="1"/>
-            </node>
-            <node width="100%" pad="2" height="20" dir="row" align="center">
-              <node width="20"><text text="S"/></node>
-              <slider-h id="hsv-s" width="10" grow="1" value="1"/>
-            </node>
-            <node width="100%" pad="2" height="20" dir="row" align="center">
-              <node width="20"><text text="V"/></node>
-              <slider-h id="hsv-v" width="10" grow="1" value="1"/>
-            </node>
-          </border>
-          <!--RGB-->
-          <border pad="5" color=".3" margin="10 0 0 0">
-            <node width="100%" pad="2" height="20" dir="row" align="center">
-              <node width="20"><text text="R"/></node>
-              <slider-h id="rgb-r" width="10" grow="1" value="1"/>
-            </node>
-            <node width="100%" pad="2" height="20" dir="row" align="center">
-              <node width="20"><text text="G"/></node>
-              <slider-h id="rgb-g" width="10" grow="1" value="1"/>
-            </node>
-            <node width="100%" pad="2" height="20" dir="row" align="center">
-              <node width="20"><text text="B"/></node>
-              <slider-h id="rgb-b" width="10" grow="1" value="1"/>
-            </node>
-          </border>
-          <!--HEX-->
-          <border pad="5" color=".3" margin="10 0 0 0">
-            <node width="100%" pad="2" height="30" dir="row" align="center">
-              <node margin="0 10 0 0"><text text="Hex"/></node>
-              <text id="txt-hex" text="#FFFFFF" align="center" pad="5" grow="1" height="30" color="1"/>
-              <button id="btn-hex-copy" text="Copy" width="60" height="100%"/>
-              <button id="btn-hex-paste" text="Paste" width="60" height="100%"/>
-            </node>
-          </border>
-        </border>
-        <!--<node height="33" dir="row" align="flex-end" justify="flex-end">
-          <button id="btn-ok" text="Reset" width="60" height="30" margin="0 10 0 0"/>
-          <button id="btn-select" text="Select color" width="100" height="30"/>
-        </node>-->
-      </border>
-  </layout>
-
-  <!-- DIALOG RENAME LAYER -->
-  <layout id="dialog-layer-rename">
-    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
-      <border thickness="1" border-color=".2" pad="3">
-        <border width="400" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
-          <text text="Rename Layer"></text>
-        </border>
-        <border width="400" color="0 0 0 .9" pad="10" dir="col">
-          <border dir="row" align="center" height="30" color=".2 .2 .2 1">
-            <text text="New name: " margin="0 5 0 5"/>
-            <text-input id="txt-input" align="center" pad="5" grow="1" height="30" color=".3"/>
-          </border>
-          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
-            <button id="btn-ok" text="Rename Layer" width="110" height="30" margin="0 10 0 0"/>
-            <button id="btn-cancel" text="Cancel" width="60" height="30"/>
-          </node>
-        </border>
-      </border>
-    </border>
-  </layout>
-
-  <!-- DIALOG RESIZE -->
-  <layout id="dialog-resize">
-    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
-      <border thickness="1" border-color=".2" pad="3">
-        <border width="500" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
-          <text text="Resize Document Resolution"></text>
-        </border>
-        <border width="500" color="0 0 0 .9" pad="10" dir="col">
-          <text text="This action is permanent and cannot be undone.\nAll of the history will be cleared." margin="0 5 10 5"/>
-          <border dir="row" align="center" height="30" color=".2 .2 .2 1">
-            <node grow="1"><text id="current-res" text="Current: 2K" margin="0 5 0 5"/></node>
-            <text text="New Resolution:" margin="0 5 0 5"/>
-            <combobox id="resolution" width="100" height="30" text="2K" combo-list="2K,4K,6K,8K,16K,32K" default="1"/>
-          </border>
-          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
-            <button id="btn-ok" text="Resize" width="70" height="30" margin="0 10 0 0"/>
-            <button id="btn-cancel" text="Cancel" width="60" height="30"/>
-          </node>
-        </border>
-      </border>
-    </border>
-  </layout>
-
-  <!-- DIALOG BROWSE -->
-  <layout id="dialog-browse-item">
-    <border dir="col" color=".4 .4 .4 .8" pad="4" height="100" width="100" margin="1 1 1 1" grow="1" align="center">
-      <image-texture id="thumb-tex" width="100%" grow="1" height="1" aspect-ratio="1">
-        <border positioning="absolute" color="0 0 0 .5" pad="2" width="100%">
-          <text id="title" text="File Name" text-wrap-width="85"/>
-        </border>
-      </image-texture>
-    </border>
-  </layout>
-  <layout id="dialog-browse">
-    <border id="background" positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
-      <border id="form" thickness="1" border-color=".2" pad="3" width="90%" height="90%" dir="col">
-        <border id="title-bar" width="100%" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
-          <text text="Browse PanoPainter Projects"></text>
-        </border>
-        <border width="100%" height="100" color="0 0 0 .9" pad="10" dir="row" grow="1">
-          <scroll id="files-list" dir="row" wrap="1" flood-events="1" grow="1" height="100%" margin="0 0 0 0" pad="0 20 0 0" color=".2 .2 .2 1">
-          </scroll>
-        </border>
-        <node dir="row">
-          <node grow="1"><text os="win,osx" id="path" text="Workind dir: path" text-wrap-width="470" margin="10 5 10 10"/></node>
-          <button os="win,osx" id="btn-path" text="Set destination dir" width="140" height="30" margin="0 10 0 0"/>
-        </node>
-        <node id="footer" height="50" dir="row" align="flex-end" justify="flex-end" pad="10">
-          <node grow="1"><button id="btn-delete" text="Delete Project" width="100" height="30" margin="0 10 0 0" color="1 0 0 1"/></node>
-          <button id="btn-ok" text="Open Project" width="100" height="30" margin="0 10 0 0"/>
-          <button id="btn-cancel" text="Cancel" width="60" height="30"/>
-        </node>
-      </border>
-    </border>
-  </layout>
-
-  <!-- DIALOG CLOUD BROWSE -->
-  <layout id="dialog-cloud-item">
-    <border dir="col" color=".4 .4 .4 .8" pad="4" height="100" width="100" margin="1 1 1 1" grow="1" align="center">
-      <image-texture id="thumb-tex" width="100%" grow="1" height="1" aspect-ratio="1">
-        <border positioning="absolute" color="0 0 0 .5" pad="2" width="100%">
-          <text id="title" text="File Name" text-wrap-width="85"/>
-        </border>
-      </image-texture>
-    </border>
-  </layout>
-  <layout id="dialog-cloud">
-    <border id="background" positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
-      <border id="form" thickness="1" border-color=".2" pad="3" width="90%" height="90%" dir="col">
-        <border id="title-bar" width="100%" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
-          <text text="Browse PanoPainter Projects"></text>
-        </border>
-        <border width="100%" height="100" color="0 0 0 .9" pad="10" dir="row" grow="1">
-          <scroll id="files-list" dir="row" wrap="1" flood-events="1" grow="1" height="100%" margin="0 0 0 0" pad="0 20 0 0" color=".2 .2 .2 1">
-          </scroll>
-        </border>
-        <node id="footer" height="50" dir="row" align="flex-end" justify="flex-end" pad="10">
-          <node grow="1" os="win,osx"><button id="btn-path" text="Set destination dir" width="130" height="30" margin="0 10 0 0"/></node>
-          <button id="btn-ok" text="Open Project" width="100" height="30" margin="0 10 0 0"/>
-          <button id="btn-cancel" text="Cancel" width="60" height="30"/>
-        </node>
-      </border>
-    </border>
-  </layout>
-
-  <!-- DIALOG OPEN SINGLE -->
-  <layout id="dialog-open-item">
-    <border dir="row" color=".4 .4 .4 .8" pad="4" height="30" margin="1 0 1 0" align="center">
-      <!--<image-texture id="thumb-tex" width="64" height="64"/>-->
-      <text id="title" text="Title"/>
-    </border>
-  </layout>
-  <layout id="dialog-open">
-    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
-      <border thickness="1" border-color=".2" pad="3">
-        <border width="400" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
-          <text text="Open PanoPainter Project"></text>
-        </border>
-        <border width="400" color="0 0 0 .9" pad="10" dir="col">
-          <node dir="row">
-            <scroll id="files-list" dir="col" flood-events="1" grow="1" height="250" margin="0 10 0 0" pad="0 20 0 0" color=".2 .2 .2 1"/>
-            <!--
-            <node dir="col" grow="1" margin="0 0 0 10">
-              <border height="20" align="center" justify="center" color=".2 .2 .2 1"><text id="info-title" text="Title"/></border>
-              <text id="info-data" text="Title"/>
-            </node>
-            -->
-            <image-texture id="thumb-tex" aspect-ratio="1" width="150" height="150"/>
-          </node>
-          <!--<text-input width="100" height="100" color=".3"/>-->
-          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
-            <node grow="1"><button id="btn-delete" text="Delete Project" width="100" height="30" margin="0 10 0 0" color="1 0 0 1"/></node>
-            <button id="btn-ok" text="Open Project" width="100" height="30" margin="0 10 0 0"/>
-            <button id="btn-cancel" text="Cancel" width="60" height="30"/>
-          </node>
-        </border>
-      </border>
-    </border>
-  </layout>
-  
-  <!-- DIALOG SAVE -->
-  <layout id="dialog-save">
-    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
-      <border thickness="1" border-color=".2" pad="3">
-        <border width="400" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
-          <text text="Save Pano Project"></text>
-        </border>
-        <border width="400" color="0 0 0 .9" pad="10" dir="col">
-          <border dir="row" align="center" height="30" color=".2 .2 .2 1">
-            <text text="Project name: " margin="0 5 0 5"/>
-            <text-input id="txt-input" align="center" pad="5" grow="1" height="30" color=".3"/>
-          </border>
-          <text os="win,osx" id="path" text="Workind dir: path" text-wrap-width="470" margin="10 5 10 5"/>
-          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
-            <node grow="1" os="win,osx"><button id="btn-path" text="Set working dir" width="120" height="30" margin="0 10 0 0"/></node>
-            <button id="btn-ok" text="Save Project" width="100" height="30" margin="0 10 0 0"/>
-            <button id="btn-cancel" text="Cancel" width="60" height="30"/>
-          </node>
-        </border>
-      </border>
-    </border>
-  </layout>
-  
-  <!-- DIALOG NEW PANODOC -->
-  <layout id="dialog-newdoc">
-    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
-      <border thickness="1" border-color=".2" pad="3">
-        <border width="500" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
-          <text text="Create New Pano Project"></text>
-        </border>
-        <border width="500" color="0 0 0 .9" pad="10" dir="col">
-          <text text="Note: resolution is measured in K-pixels, so a 2K document produces\na 2048x1024 equirectangular output." margin="0 5 10 5"/>
-          <border dir="row" align="center" height="30" color=".2 .2 .2 1">
-            <text text="Project name: " margin="0 5 0 5"/>
-            <text-input id="txt-input" align="center" pad="5" grow="1" height="30" color=".3"/>
-            <combobox id="resolution" width="100" height="30" text="2K" combo-list="2K,4K,6K,8K,16K,32K" default="1"/>
-          </border>
-          <text os="win,osx" id="path" text="Workind dir: path" text-wrap-width="470" margin="10 5 10 5"/>
-          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
-            <node grow="1" os="win,osx"><button id="btn-path" text="Set working dir" width="120" height="30" margin="0 10 0 0"/></node>
-            <button id="btn-ok" text="Create Project" width="110" height="30" margin="0 10 0 0"/>
-            <button id="btn-cancel" text="Cancel" width="60" height="30"/>
-          </node>
-        </border>
-      </border>
-    </border>
-  </layout>
-
-  <!-- DIALOG SETTINGS -->
-  <layout id="settings">
-    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
-      <border thickness="1" border-color=".2" pad="3" width="80%" min-width="400">
-        <border width="100%" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
-          <text text="Global Settings"></text>
-        </border>
-        <border width="100%" color="0 0 0 .9" pad="10" dir="col">
-          <!--window content-->
-          <node dir="row">
-            <!--sidebar-->
-            <node width="100" flood-events="1">
-              <border height="30" width="100%" color=".2" pad="0 0 0 10" align="flex-begin" justify="center">
-                <text text="Viewport"/>
-              </border>
-              <button-custom height="30" width="100%" color=".1" pad="0 0 0 10" align="flex-begin" justify="center">
-                <text text="Registers"/>
-              </button-custom>
-              <button-custom height="30" width="100%" color=".1" pad="0 0 0 10" align="flex-begin" justify="center">
-                <text text="Toolbar"/>
-              </button-custom>
-              <button-custom height="30" width="100%" color=".1" pad="0 0 0 10" align="flex-begin" justify="center">
-                <text text="Panorama"/>
-              </button-custom>
-            </node>
-            <!--settings tab-->
-            <border color=".2" width="100%" height="200"></border>
-          </node>
-          <!--footer buttons-->
-          <node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
-            <button id="btn-ok" text="Ok" width="50" height="30" margin="0 10 0 0"/>
-            <button text="Cancel" width="60" height="30"/>
-          </node>
-        </border>
-      </border>
-    </border>
-  </layout>
-
-  <!-- DIALOG ABOUT -->
-  <layout id="about">
-    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="1">
-      <border thickness="1" border-color=".2" pad="3" max-width="650" dir="col" width="80%" height="80%">
-        <border width="100%" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
-          <text text="About PanoPainter"></text>
-        </border>
-        <border width="100%" height="100%" color="0 0 0 .9" pad="10" dir="col">
-          <!--window content-->
-          <border color=".2" width="100%" height="1" grow="1">
-            <scroll pad="10" margin="5" color=".3 .3 .3 .4" height="100%" dir="col" wrap="0" shrink="1">
-              <text margin="0 0 0 5" text=
-"
---------------------------------------------------- ABOUT PANOPAINTER -----------------------------------------------------
-PanoPainter - Copyright 2018 OmixLab Ltd
-  Thanks for using PanoPainter.
-  My name is Omar Mohamed Ali Mudhir and I'm the developer of this unique application.
-  In the late 2016 Facebook started to make it possible for users to post 360 content
-  captured from the first 360 cameras born after the advent of the VR to the market.
-  
-  That's where me and a bunch or artists started to wonder about making art in 360.
-  I then started coding in my spare time to create something that would have helped 
-  artists in the long process of creating a panoramic painting (panopainting).
-  
-  Today this software has evolved a lot and reached a mature version ready for early 
-  adopters that want to break the rules of traditional digital art and get into the 
-  future of immersive painting.
-  
-  Feel free to follow me on:
-  - Instagram: @panopainter
-  - Twitter: @panopainter
-  - Facebook: fb.me/panopainter
-  - Reddit: reddit.com/r/panopainter
-  
-                      
-------------------------------------------------- FREE SOFTWARE LICENSES -------------------------------------------------
-Free brushes:
-  The free brushes are provided by the freely available Brush Pack v3 from Fenris31
-  Link: https://www.deviantart.com/fenris31/art/Brush-Pack-v3-549566626
-  
-Roboto Font License:
-  Copyright 2018 OmixLab Ltd
-  Licensed under the Apache License, Version 2.0 (the 'License');
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-      http://www.apache.org/licenses/LICENSE-2.0
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an 'AS IS' BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License."/>
-            </scroll>
-          </border>
-          <!--footer buttons-->
-          <node height="60" dir="row" justify="flex-end">
-            <button id="btn-ok" text="Ok" width="100" height="30" margin="5 0 0 0"/>
-          </node>
-        </border>
-      </border>
-    </border>
-  </layout>
-
-  <!-- DIALOG CHANGELOG -->
-  <layout id="changelog">
-    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
-      <border thickness="1" border-color=".2" pad="3" max-width="650" dir="col" width="80%" height="80%">
-        <border width="100%" height="30" color=".2 .2 .2 .9" align="center" justify="center">
-          <text text="What's new in PanoPainter"/>
-        </border>
-        <border width="100%" height="100%" color="0 0 0 .9" pad="10" dir="col">
-          <!--window content-->
-          <border color=".2" width="100%" height="1" grow="1">
-            <scroll pad="10" margin="5" color=".3 .3 .3 .4" dir="col" shrink="1">
-              <text margin="0 0 0 5" font-size="30" text="0.2.1"/>
-              <text margin="10 0 0 5" text=
-"- Queue based multithreading architecture
-- Improve blending with float 16/32 framebuffer
-- Use tick icon on checkboxes
-- Improved battery life
-- Improve file browser thumbnails
-- Unique recovery file name
-- Layers sorted from top to bottom
-- Limit camera zoom
-- Add clipboard support on Android
-- Add UI and Viewport scale options
-- Add shortcut to rotate canvas with spacebar
-- Fix bucket fill tool
-- Fix stroke samples computation
-- Fix PPI file association on OSX and iOS
-- Fix color bleeding due to interpolation
-- Fix layer index on undo/redo
-- Fix Import image aliasing
-- Fix color picking tool
-- Fix color from clipboard update global
-- Fix VR stroke rendering
-- Fix hard-mix stroke shader
-- Fix brush outline on scaled viewport
-- Fix UI on iOS device rotation
-- Fix exporting
-"/>
-              <text margin="20 0 0 5" font-size="30" text="0.2.0"/>
-              <text margin="10 0 0 5" text=
-"- Steam HotFix: check for OpenGL debug extensions before enabling
-"/>
-              <text margin="20 0 0 5" font-size="30" text="0.1.9"/>
-              <text margin="10 0 0 5" text=
-"- Fix 3D Depth Export
-- Improve Undo/Redo to better support layers and guides
-- Implement Oculus Quest rendering
-"/>
-              <text margin="20 0 0 5" font-size="30" text="0.1.8"/>
-              <text margin="10 0 0 5" text=
-"- Floating and docking panels.
-- Left-handed UI.
-- Improved rendering performance.
-- Better high DPI devices support.
-- Raytraced shadows generation.
-- Multiple lasso selection.
-- VR mode painting.
-- Splash screen.
-"/>
-              <text margin="20 0 0 5" font-size="30" text="0.1.7"/>
-              <text margin="10 0 0 5" text=
-"- Completely redesigned UI.
-- Side panel for quick access to brush settings.
-- Popup panels.
-- New heightmap tool for landscapes generation.
-- Raytraced shadows generation.
-- Multithreading for faster computation.
-- Overall performance optimization.
-- Import Photoshop Brushes ABR file.
-- Improved color picker.
-- Layer blending modes.
-- Improved Brush Engine with Dual-Brush and Patterns.
-"/>
-              <text margin="20 0 0 5" font-size="30" text="0.1.6"/>
-              <text margin="10 0 0 5" text=
-"- [FIX] Set system message box on top when recovery
-- [FIX] Skip Apple Pencil first samples to overcome the initial pressure spike
-- [WIN] Add initial VR support with openvr
-- [FIX] Layer delete order bug
-- [FIX] Improve brush preview during the stroke
-- Add import flat images
-- Add copy/cut and transform selection
-- Add camera reset menu in Layers
-- Add share button on iOS and MacOS
-"/>
-              <text margin="20 0 0 5" font-size="30" text="0.1.4"/>
-              <text margin="10 0 0 5" text=
-"- [WIN] Add: Windows Store package installer
-- [OSX] Quick Look plugin for thumbnail generation
-- [FIX] Browse Dialog crashing at empty files
-- Implement a Fail-safe two-stage save document
-- [IOS,OSX] Add: Crash Recovery routine, which saves a recovery.ppi after crashing
-- [IOS,OSX] Add: HockeyApp crash report
-- Add: Resize document, allows to change resolution after the document creation
-- Internal: Text node wrap text per-char
-- [OSX] Open File System Dialog for PPI files
-- Add: text cursor caret for a better UX
-- Add: Current working directory workflow, allows you to change the current
-  open/save/export directory
-"/>
-              <text margin="20 0 0 5" font-size="30" text="0.1.3"/>
-              <text margin="10 0 0 5" text=
-"- [OSX] Fix: use the right extension when exporting a .jpg
-"/>
-              <text margin="20 0 0 5" font-size="30" text="0.1.2"/>
-              <text margin="10 0 0 5" text=
-"- [OSX] Fix: fixed permissions issue preventing to import images
-"/>
-              <text margin="20 0 0 5" font-size="30" text="0.1.1"/>
-              <text margin="10 0 0 5" text="First public release!"/>
-              <!--<text margin="10 0 0 5" text=
-"This is the first public release of PanoPainter. It's important to note this is an early
-access to the software, so be aware it may crash or behave in unexpected ways.
-Always save your work. It comes with a lot of features that will be improved over time.
-Here's a list of what's available in this release.
-- Immersive 360° panoramic canvas
-- High-Performance GPU Accelerated Paint Engine
-- Intuitive gestures to navigate
-- Dynamic cross-platform User Interface
-- Native Apple Pencil support
-- Native Sonar Pen support
-- Massive resolution up to 8K panorama
-- Highly customizable brushes
-- Cloud Storage for device interoperability
-- Timelapse
-- Layers
-"/>-->
-            </scroll>
-          </border>
-          <!--footer buttons-->
-          <node height="60" dir="row" justify="flex-end">
-            <button id="btn-ok" text="Ok" width="100" height="30" margin="5 0 0 0"/>
-          </node>
-        </border>
-      </border>
-    </border>
-  </layout>
-  
-  <!-- DIALOG USER MANUAL -->
-  <layout id="usermanual">
-    <border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center" mouse-capture="true">
-      <border thickness="1" border-color=".2" pad="3" max-width="650" dir="col" width="80%" height="80%">
-        <border width="100%" height="30" color=".2 .2 .2 .9" dir="row" align="center" justify="center">
-          <text text="PanoPainter User Manual"></text>
-        </border>
-        <border width="100%" height="100%" color="0 0 0 .9" pad="10" dir="col">
-          <!--window content-->
-          <border color=".2" width="100%" height="1" grow="1">
-            <scroll pad="10" margin="5" color="1" dir="col" shrink="1">
-              <node align="center" margin="10 0 10 0"><text color="0" font-size="30" text="Getting started with PanoPainter"/></node>
-              <image path="data/doc/images/panopainter-doc-overview.jpg" width="100%" align="center" justify="flex-end" autosize="1"/>
-              <node align="center" margin="40 0 20 0"><text color="0" font-size="30" text="Brush Settings"/></node>
-              <image path="data/doc/images/panopainter-doc-brush-settings.jpg" width="100%" align="center" justify="flex-end" autosize="1"/>
-              <node align="center" margin="40 0 20 0"><text color="0" font-size="30" text="Layers Settings"/></node>
-              <image path="data/doc/images/panopainter-doc-layers.jpg" width="100%" align="center" justify="flex-end" autosize="1"/>
-              <node align="center" margin="40 0 20 0"><text color="0" font-size="30" text="File Menu"/></node>
-              <image path="data/doc/images/panopainter-doc-menu-file.jpg" width="100%" align="center" justify="flex-end" autosize="1"/>
-              <node align="center" margin="40 0 20 0"><text color="0" font-size="30" text="Layers Menu"/></node>
-              <image path="data/doc/images/panopainter-doc-menu-layers.jpg" width="100%" align="center" justify="flex-end" autosize="1"/>
-              <node align="center" margin="40 0 20 0"><text color="0" font-size="30" text="Timelapse Menu"/></node>
-              <image path="data/doc/images/panopainter-doc-menu-timelapse.jpg" width="100%" align="center" justify="flex-end" autosize="1"/>
-              <node height="40" margin="0 0 40 0"></node>
-            </scroll>
-          </border>
-          <!--footer buttons-->
-          <node height="60" dir="row" justify="flex-end">
-            <button id="btn-ok" text="Ok" width="100" height="30" margin="5 0 0 0"/>
-          </node>
-        </border>
-      </border>
-    </border>
-  </layout>
-  
-  <!-- DIALOG FLOATING -->
-  <layout id="tpl-panel-floating">
-    <border thickness="1" border-color=".2" pad="3" max-width="650" dir="col" mouse-capture="true">
-      <border height="30" pad="0 0 0 0" color=".4" align="center" justify="center" dir="row">
-        <button id="button-close" width="30" height="20" text="X" margin="0 0 0 5"/>
-        <button id="button-minimize" width="30" height="20" text="--" margin="0 0 0 5"/>
-        <node align="center" pad="0 30 0 30" justify="center" height="100%" grow="1">
-          <text id="title" text="Floating Panel"/>
-        </node>
-      </border>
-      <border id="container" color="0 0 0 .9" dir="col" height="10" grow="1"/>
-      <node dir="row">
-        <node height="16" grow="1" align="center">
-          <image path="data/ui/resize-handle-vert.png" width="32" height="16" />
-        </node>
-        <image path="data/ui/resize-handle.png" width="16" height="16" />
-      </node>
-    </border>
-  </layout>
 
   <!-- MENU POPUP -->
   <layout id="popup-menu">
@@ -1789,46 +323,6 @@ Here's a list of what's available in this release.
     </popup-menu>
   </layout>
 
-  <!-- PANEL QUICK -->
-  <layout id="tpl-panel-quick">
-    <border color="0 0 0 0.6" width="80" dir="col" pad="5" align="center" mouse-capture="true" shrink="1">
-      <node dir="row" pad="5" shrink="1" min-height="100" max-height="200">
-        <!--size-->
-        <node dir="col" margin="0 4 0 0" height="100%" align="center">
-          <text text="Size" margin="0 0 10 0"/>
-          <slider-v id="quick-size" height="200" shrink="1" width="30"/>
-        </node>
-        <!--flow-->
-        <node dir="col" align="center" height="100%">
-          <text text="Flow" margin="0 0 10 0"/>
-          <slider-v id="quick-flow" height="200" shrink="1" width="30"/>
-        </node>
-      </node>
-      <!--color-->
-      <text text="Colors" margin="10 0 5 0"/>
-      <button-custom id="quick-color1" dir="row" pad="4" margin="0 0 1 0">
-        <border color="0 0 0 1" width="60" height="30"/>
-      </button-custom>
-      <button-custom id="quick-color2" pad="4" margin="0 0 1 0">
-        <border color="0.5 0.5 0.5 1" width="60" height="30"/>
-      </button-custom>
-      <button-custom id="quick-color3" pad="4" margin="0 0 1 0">
-        <border color="1 1 1 1" width="60" height="30"/>
-      </button-custom>
-      <!--brushes-->
-      <text text="Brushes" margin="10 0 5 0"/>
-      <button-custom id="quick-brush1" height="45" pad="4">
-        <stroke-preview width="60" height="100%"/>
-      </button-custom>
-      <button-custom id="quick-brush2" height="45" pad="4" margin="4 0 0 0">
-        <stroke-preview width="60" height="100%"/>
-      </button-custom>
-      <button-custom id="quick-brush3" height="45" pad="4" margin="4 0 0 0">
-        <stroke-preview width="60" height="100%"/>
-      </button-custom>
-    </border>
-  </layout>
-
   <layout id="tpl-tool-bucket">
     <node dir="row">
       <image path="data/ui/bucket.png" width="46" height="46"/>
diff --git a/src/node.cpp b/src/node.cpp
index e5b82d5..86c7735 100644
--- a/src/node.cpp
+++ b/src/node.cpp
@@ -89,6 +89,13 @@ Node* Node::root()
     return ret;
 }
 
+void Node::set_manager(LayoutManager* manager)
+{
+    m_manager = manager;
+    for (auto& c : m_children)
+        c->set_manager(manager);
+}
+
 kEventResult Node::on_event(Event* e)
 {
     kEventResult ret = kEventResult::Available;
@@ -346,6 +353,35 @@ const Node* Node::init_template(const char* id)
     return m_template;
 }
 
+bool Node::init_template_file(const std::string& path, const std::string& id)
+{
+    bool ret = false;
+    App::I->ui_task([&]
+    {
+        LayoutManager m;
+        if (m.load(path.c_str()))
+        {
+            auto t = m.get_ref(id.c_str())->m_children[0];
+            for (auto& c : t->m_children)
+                add_child(c->clone());
+            YGNodeCopyStyle(y_node, t->y_node);
+            t->clone_copy(this);
+            ret = true;
+        }
+    });
+    return ret;
+}
+
+std::shared_ptr<Node> Node::load_template(const std::string& filename, const std::string& name) const
+{
+    LayoutManager m;
+    std::shared_ptr<Node> ret;
+    if (m.load(filename.c_str()))
+        ret = std::dynamic_pointer_cast<Node>(std::move(m.get_ref(name.c_str())->m_children[0]));
+    m.unload();
+    return ret;
+}
+
 void Node::add_child(Node* n)
 {
     App::I->ui_task([&]
@@ -354,7 +390,7 @@ void Node::add_child(Node* n)
             n->m_parent->remove_child(n);
         m_children.emplace_back(n);
         n->m_parent = this;
-        n->m_manager = m_manager;
+        n->set_manager(m_manager);
         n->m_destroyed = false;
         YGNodeInsertChild(y_node, n->y_node, YGNodeGetChildCount(y_node));
         n->added(this);
@@ -370,7 +406,7 @@ void Node::add_child(Node* n, int index)
             n->m_parent->remove_child(n);
         m_children.emplace_back(n);
         n->m_parent = this;
-        n->m_manager = m_manager;
+        n->set_manager(m_manager);
         n->m_destroyed = false;
         YGNodeInsertChild(y_node, n->y_node, index);
         n->added(this);
@@ -380,13 +416,13 @@ void Node::add_child(Node* n, int index)
 
 void Node::add_child(std::shared_ptr<Node> n)
 {
-    App::I->ui_task([&]
+    App::I->ui_task([this,n]
     {
         if (n->m_parent)
             n->m_parent->remove_child(n.get());
         m_children.push_back(n);
         n->m_parent = this;
-        n->m_manager = m_manager;
+        n->set_manager(m_manager);
         n->m_destroyed = false;
         YGNodeInsertChild(y_node, n->y_node, YGNodeGetChildCount(y_node));
         n->added(this);
@@ -402,7 +438,7 @@ void Node::add_child(std::shared_ptr<Node> n, int index)
             n->m_parent->remove_child(n.get());
         m_children.insert(m_children.begin() + index, n);
         n->m_parent = this;
-        n->m_manager = m_manager;
+        n->set_manager(m_manager);
         n->m_destroyed = false;
         YGNodeInsertChild(y_node, n->y_node, index);
         n->added(this);
@@ -673,8 +709,6 @@ Node::Node(Node&& o)
     m_name = std::move(o.m_name);
     m_nodeID_s = std::move(o.m_nodeID_s);
     m_children = std::move(o.m_children);
-    for (auto& c : m_children)
-        c->m_parent = this;
     m_nodeID = o.m_nodeID;
     m_display = o.m_display;
     m_parent = o.m_parent;
@@ -687,7 +721,10 @@ Node::Node(Node&& o)
     o.y_node = nullptr;
     o.m_parent = nullptr;
 
-    m_manager = o.m_manager;
+    set_manager(o.m_manager);
+    for (auto& c : m_children)
+        c->m_parent = this;
+
     current_mouse_capture = o.current_mouse_capture;
     current_key_capture = o.current_key_capture;
     m_mouse_captured = o.m_mouse_captured;
@@ -1380,7 +1417,7 @@ Node* Node::clone_instantiate() const
 void Node::clone_copy(Node* dest) const
 {
     YGNodeCopyStyle(dest->y_node, y_node);
-    dest->m_manager = m_manager;
+    dest->set_manager(m_manager);
 
     dest->m_name = m_name;
     dest->m_nodeID_s = m_nodeID_s;
@@ -1392,7 +1429,6 @@ void Node::clone_copy(Node* dest) const
     dest->m_flood_events = m_flood_events;
     dest->m_force_mouse_capture = m_force_mouse_capture;
 
-    dest->m_manager = m_manager;
     dest->current_mouse_capture = current_mouse_capture;
     dest->current_key_capture = current_key_capture;
     dest->m_mouse_captured = m_mouse_captured;
@@ -1416,7 +1452,7 @@ void Node::clone_children(Node* dest) const
         std::shared_ptr<Node> cn = c->clone();
         dest->m_children.push_back(cn);
         cn->m_parent = dest;
-        cn->m_manager = dest->m_manager;
+        cn->set_manager(dest->m_manager);
         cn->loaded();
         YGNodeInsertChild(dest->y_node, cn->y_node, YGNodeGetChildCount(dest->y_node));
     }
diff --git a/src/node.h b/src/node.h
index 22001d6..fb6a861 100644
--- a/src/node.h
+++ b/src/node.h
@@ -206,7 +206,7 @@ public:
     void watch(std::function<bool(Node*)> observer);
     virtual void destroy();
     Node* root();
-
+    void set_manager(LayoutManager* manager);
 
     template<class T = Node> std::shared_ptr<T> clone()
     {
@@ -242,7 +242,7 @@ public:
     template<class T> T* add_child()
     {
         auto* n = new T;
-        n->m_manager = m_manager;
+        n->set_manager(m_manager);
         n->m_parent = m_parent;
         n->init();
         n->create();
@@ -253,7 +253,7 @@ public:
     template<class T> std::shared_ptr<T> add_child_ref()
     {
         auto n = std::make_shared<T>();
-        n->m_manager = m_manager;
+        n->set_manager(m_manager);
         n->m_parent = m_parent;
         n->init();
         n->create();
@@ -261,6 +261,15 @@ public:
         add_child(n);
         return n;
     }
+    template<class T = Node> std::shared_ptr<T> add_child_file(const std::string& filename, const std::string& name)
+    {
+        if (auto t = load_template(filename, name))
+        {
+            add_child(t);
+            return std::dynamic_pointer_cast<T>(t);
+        }
+        return nullptr;
+    }
 
     virtual void on_tick(float dt) { };
     virtual kEventResult on_event(Event* e);
@@ -276,6 +285,8 @@ public:
     virtual void on_child_added(Node* child) { };
     virtual void on_child_removed(Node* child) { };
     const Node* init_template(const char* id);
+    bool init_template_file(const std::string& path, const std::string& id);
+    std::shared_ptr<Node> load_template(const std::string& filename, const std::string& name) const;
     void tick(float dt);
     void app_redraw();
     void add_child(Node* n);
diff --git a/src/node_about.cpp b/src/node_about.cpp
index ae4e875..0d7faca 100644
--- a/src/node_about.cpp
+++ b/src/node_about.cpp
@@ -14,9 +14,8 @@ void NodeAbout::init()
     SetWidthP(100);
     SetHeightP(100);
     SetPositioning(YGPositionTypeAbsolute);
-    auto m_template = (*m_manager)[const_hash("about")]->m_children[0]->clone();
-    add_child(m_template);
-    btn_ok = m_template->find<NodeButton>("btn-ok");
+    add_child_file("data/dialogs/about.xml", "about");
+    btn_ok = find<NodeButton>("btn-ok");
     btn_ok->on_click = [&](Node*) { destroy(); };
 }
 
diff --git a/src/node_changelog.cpp b/src/node_changelog.cpp
index 0d41c85..1b9bbdf 100644
--- a/src/node_changelog.cpp
+++ b/src/node_changelog.cpp
@@ -14,9 +14,8 @@ void NodeChangelog::init()
     SetWidthP(100);
     SetHeightP(100);
     SetPositioning(YGPositionTypeAbsolute);
-    auto m_template = (*m_manager)[const_hash("changelog")]->m_children[0]->clone();
-    add_child(m_template);
-    btn_ok = m_template->find<NodeButton>("btn-ok");
+    add_child_file("data/dialogs/changelog.xml", "changelog");
+    btn_ok = find<NodeButton>("btn-ok");
     btn_ok->on_click = [&](Node*) { destroy(); };
 }
 
diff --git a/src/node_dialog_browse.cpp b/src/node_dialog_browse.cpp
index 7c216fe..4f43ee1 100644
--- a/src/node_dialog_browse.cpp
+++ b/src/node_dialog_browse.cpp
@@ -21,10 +21,7 @@ void NodeDialogBrowse::clone_finalize(Node* dest) const
 
 void NodeDialogBrowse::init()
 {
-    auto tpl = static_cast<const NodeBorder*>(init_template("dialog-browse"));
-    m_color = tpl->m_color;
-    m_border_color = tpl->m_border_color;;
-    m_thinkness = tpl->m_thinkness;;
+    init_template_file("data/dialogs/doc-browse.xml", "dialog-browse");
     init_controls();
 }
 
@@ -186,10 +183,7 @@ void NodeDialogBrowseItem::clone_finalize(Node* dest) const
 }
 void NodeDialogBrowseItem::init()
 {
-    auto tpl = static_cast<const NodeBorder*>(init_template("dialog-browse-item"));
-    m_color = tpl->m_color;
-    m_border_color = tpl->m_border_color;
-    m_thinkness = tpl->m_thinkness;
+    init_template_file("data/dialogs/doc-browse.xml", "dialog-browse-item");
     init_controls();
 }
 void NodeDialogBrowseItem::init_controls()
diff --git a/src/node_dialog_cloud.cpp b/src/node_dialog_cloud.cpp
index 93d2d80..ab48657 100644
--- a/src/node_dialog_cloud.cpp
+++ b/src/node_dialog_cloud.cpp
@@ -21,10 +21,7 @@ void NodeDialogCloud::clone_finalize(Node* dest) const
 
 void NodeDialogCloud::init()
 {
-    auto tpl = static_cast<const NodeBorder*>(init_template("dialog-cloud"));
-    m_color = tpl->m_color;
-    m_border_color = tpl->m_border_color;;
-    m_thinkness = tpl->m_thinkness;;
+    init_template_file("data/dialogs/cloud-browse.xml", "dialog-cloud");
     init_controls();
 }
 
@@ -162,10 +159,7 @@ void NodeDialogCloudItem::clone_finalize(Node* dest) const
 }
 void NodeDialogCloudItem::init()
 {
-    auto tpl = static_cast<const NodeBorder*>(init_template("dialog-cloud-item"));
-    m_color = tpl->m_color;
-    m_border_color = tpl->m_border_color;
-    m_thinkness = tpl->m_thinkness;
+    init_template_file("data/dialogs/cloud-browse.xml", "dialog-cloud-item");
     init_controls();
 }
 void NodeDialogCloudItem::init_controls()
diff --git a/src/node_dialog_export_ppbr.cpp b/src/node_dialog_export_ppbr.cpp
index ada7440..ee23523 100644
--- a/src/node_dialog_export_ppbr.cpp
+++ b/src/node_dialog_export_ppbr.cpp
@@ -17,10 +17,7 @@ void NodeDialogExportPPBR::clone_finalize(Node* dest) const
 
 void NodeDialogExportPPBR::init()
 {
-    auto tpl = static_cast<const NodeBorder*>(init_template("dialog-brush-upload"));
-    m_color = tpl->m_color;
-    m_border_color = tpl->m_border_color;;
-    m_thinkness = tpl->m_thinkness;;
+    init_template_file("data/dialogs/brush-export.xml", "dialog-brush-upload");
     init_controls();
     m_capture_children = false; // don't capture children events on mouse_capture
 }
diff --git a/src/node_dialog_layer_rename.cpp b/src/node_dialog_layer_rename.cpp
index 07cd302..604ae27 100644
--- a/src/node_dialog_layer_rename.cpp
+++ b/src/node_dialog_layer_rename.cpp
@@ -17,10 +17,7 @@ void NodeDialogLayerRename::clone_finalize(Node* dest) const
 
 void NodeDialogLayerRename::init()
 {
-    auto tpl = static_cast<const NodeBorder*>(init_template("dialog-layer-rename"));
-    m_color = tpl->m_color;
-    m_border_color = tpl->m_border_color;;
-    m_thinkness = tpl->m_thinkness;;
+    init_template_file("data/dialogs/layer-rename.xml", "dialog-layer-rename");
     init_controls();
 }
 
diff --git a/src/node_dialog_open.cpp b/src/node_dialog_open.cpp
index 7cef7b8..ff98b88 100644
--- a/src/node_dialog_open.cpp
+++ b/src/node_dialog_open.cpp
@@ -119,10 +119,7 @@ void NodeDialogOpenItem::clone_finalize(Node* dest) const
 }
 void NodeDialogOpenItem::init()
 {
-    auto tpl = static_cast<const NodeBorder*>(init_template("dialog-open-item"));
-    m_color = tpl->m_color;
-    m_border_color = tpl->m_border_color;
-    m_thinkness = tpl->m_thinkness;
+    init_template_file("data/dialogs/doc-open.xml", "dialog-open-item");
     init_controls();
 }
 void NodeDialogOpenItem::init_controls()
@@ -176,10 +173,7 @@ void NodeDialogSave::clone_finalize(Node* dest) const
 }
 void NodeDialogSave::init()
 {
-    auto tpl = static_cast<const NodeBorder*>(init_template("dialog-save"));
-    m_color = tpl->m_color;
-    m_border_color = tpl->m_border_color;
-    m_thinkness = tpl->m_thinkness;
+    init_template_file("data/dialogs/doc-save.xml", "dialog-save");
     init_controls();
 }
 void NodeDialogSave::init_controls()
@@ -236,10 +230,7 @@ void NodeDialogNewDoc::clone_finalize(Node* dest) const
 }
 void NodeDialogNewDoc::init()
 {
-    auto tpl = static_cast<const NodeBorder*>(init_template("dialog-newdoc"));
-    m_color = tpl->m_color;
-    m_border_color = tpl->m_border_color;
-    m_thinkness = tpl->m_thinkness;
+    init_template_file("data/dialogs/doc-new.xml", "dialog-newdoc");
     init_controls();
 }
 void NodeDialogNewDoc::init_controls()
diff --git a/src/node_dialog_picker.cpp b/src/node_dialog_picker.cpp
index e96d34e..129dd81 100644
--- a/src/node_dialog_picker.cpp
+++ b/src/node_dialog_picker.cpp
@@ -19,8 +19,7 @@ void NodeColorPicker::clone_finalize(Node* dest) const
 
 void NodeColorPicker::init()
 {
-    auto n = (NodeColorPicker*)init_template("color-picker");
-    n->clone_copy(this);
+    init_template_file("data/dialogs/color-picker.xml", "color-picker");
     init_controls();
 }
 
diff --git a/src/node_dialog_resize.cpp b/src/node_dialog_resize.cpp
index 251f430..8791fd2 100644
--- a/src/node_dialog_resize.cpp
+++ b/src/node_dialog_resize.cpp
@@ -19,10 +19,7 @@ void NodeDialogResize::clone_finalize(Node* dest) const
 
 void NodeDialogResize::init()
 {
-    auto tpl = static_cast<const NodeBorder*>(init_template("dialog-resize"));
-    m_color = tpl->m_color;
-    m_border_color = tpl->m_border_color;;
-    m_thinkness = tpl->m_thinkness;;
+    init_template_file("data/dialogs/doc-resize.xml", "dialog-resize");
     init_controls();
 }
 
diff --git a/src/node_input_box.cpp b/src/node_input_box.cpp
index 3090bdc..b0c6cfb 100644
--- a/src/node_input_box.cpp
+++ b/src/node_input_box.cpp
@@ -14,17 +14,16 @@ void NodeInputBox::init()
     SetWidthP(100);
     SetHeightP(100);
     SetPositioning(YGPositionTypeAbsolute);
-    auto m_template = (*m_manager)[const_hash("input-box")]->m_children[0]->clone();
-    add_child(m_template);
-    m_title = m_template->find<NodeText>("title");
-    m_field_name = m_template->find<NodeText>("field-name");
-    m_field_text = m_template->find<NodeTextInput>("field-text");
-    btn_ok = m_template->find<NodeButton>("btn-ok");
+    add_child_file("data/dialogs/input-box.xml", "input-box");
+    m_title = find<NodeText>("title");
+    m_field_name = find<NodeText>("field-name");
+    m_field_text = find<NodeTextInput>("field-text");
+    btn_ok = find<NodeButton>("btn-ok");
     btn_ok->on_click = [&](Node*) { 
         if (on_submit)
             on_submit(this, m_field_text->m_text);
     };
-    btn_cancel = m_template->find<NodeButton>("btn-cancel");
+    btn_cancel = find<NodeButton>("btn-cancel");
     btn_cancel->on_click = [&](Node*) { destroy(); };
     m_capture_children = false; // don't capture children events on mouse_capture
 }
diff --git a/src/node_message_box.cpp b/src/node_message_box.cpp
index 42bf4ad..6203b03 100644
--- a/src/node_message_box.cpp
+++ b/src/node_message_box.cpp
@@ -14,16 +14,15 @@ void NodeMessageBox::init()
     SetWidthP(100);
     SetHeightP(100);
     SetPositioning(YGPositionTypeAbsolute);
-    auto m_template = (*m_manager)[const_hash("message-box")]->m_children[0]->clone();
-    add_child(m_template);
-    m_title = m_template->find<NodeText>("title");
-    m_message = m_template->find<NodeText>("message");
-    btn_ok = m_template->find<NodeButton>("btn-ok");
+    add_child_file("data/dialogs/message-box.xml", "message-box");
+    m_title = find<NodeText>("title");
+    m_message = find<NodeText>("message");
+    btn_ok = find<NodeButton>("btn-ok");
     btn_ok->on_click = [&](Node*) {
         if (on_submit)
             on_submit(this);
     };
-    btn_cancel = m_template->find<NodeButton>("btn-cancel");
+    btn_cancel = find<NodeButton>("btn-cancel");
     on_submit = btn_cancel->on_click = [&](Node*) { destroy(); };
     m_capture_children = false; // don't capture children events on mouse_capture
 }
diff --git a/src/node_panel_brush.cpp b/src/node_panel_brush.cpp
index 478bf6c..607ee9e 100644
--- a/src/node_panel_brush.cpp
+++ b/src/node_panel_brush.cpp
@@ -18,7 +18,7 @@ Node* NodeButtonBrush::clone_instantiate() const
 
 void NodeButtonBrush::init()
 {
-    init_template("tpl-brush-icon");
+    init_template_file("data/dialogs/panel-brushes.xml", "tpl-brush-icon");
     color_hover = glm::vec4(.7, .7, .7, 1);
     color_normal = glm::vec4(.3, .3, .3, 1);
     m_color = color_normal;
@@ -74,7 +74,7 @@ Node* NodePanelBrush::clone_instantiate() const
 
 void NodePanelBrush::init()
 {
-    init_template("tpl-panel-brushes");
+    init_template_file("data/dialogs/panel-brushes.xml", "tpl-panel-brushes");
 
     m_btn_add = find<NodeButtonCustom>("btn-add");
     m_btn_add->on_click = [this](Node*) {
@@ -379,7 +379,7 @@ Node* NodeBrushPresetItem::clone_instantiate() const
 
 void NodeBrushPresetItem::init()
 {
-    init_template("tpl-brush-preset");
+    init_template_file("data/dialogs/panel-brushes.xml", "tpl-brush-preset");
     color_hover = glm::vec4(.7, .7, .7, 1);
     color_normal = glm::vec4(.3, .3, .3, 1);
     m_color = color_normal;
@@ -415,7 +415,7 @@ Node* NodePanelBrushPreset::clone_instantiate() const
 
 void NodePanelBrushPreset::init()
 {
-    init_template("tpl-panel-brush-preset");
+    init_template_file("data/dialogs/panel-brushes.xml", "tpl-panel-brush-preset");
     m_container = find<Node>("brushes");
     m_btn_add = find<NodeButtonCustom>("btn-add");
     m_btn_add->on_click = [this] (Node*) {
diff --git a/src/node_panel_color.cpp b/src/node_panel_color.cpp
index 058e286..2eb1327 100644
--- a/src/node_panel_color.cpp
+++ b/src/node_panel_color.cpp
@@ -16,7 +16,7 @@ void NodePanelColor::clone_finalize(Node* dest) const
 
 void NodePanelColor::init()
 {
-    init_template("tpl-panel-color");
+    init_template_file("data/dialogs/color-picker.xml", "tpl-panel-color");
     init_controls();
 }
 
diff --git a/src/node_panel_floating.cpp b/src/node_panel_floating.cpp
index f8a8791..c3116cd 100644
--- a/src/node_panel_floating.cpp
+++ b/src/node_panel_floating.cpp
@@ -17,7 +17,7 @@ void NodePanelFloating::clone_finalize(Node* dest) const
 void NodePanelFloating::init()
 {
     parent::init();
-    init_template("tpl-panel-floating");
+    init_template_file("data/dialogs/panel-floating.xml", "tpl-panel-floating");
     init_controls();
 }
 
diff --git a/src/node_panel_grid.cpp b/src/node_panel_grid.cpp
index 69e3dd1..a8d6586 100644
--- a/src/node_panel_grid.cpp
+++ b/src/node_panel_grid.cpp
@@ -19,7 +19,7 @@ void NodePanelGrid::clone_finalize(Node* dest) const
 
 void NodePanelGrid::init()
 {
-    init_template("tpl-panel-grid");
+    init_template_file("data/dialogs/panel-grid.xml", "tpl-panel-grid");
     init_controls();
 }
 
diff --git a/src/node_panel_layer.cpp b/src/node_panel_layer.cpp
index 8f9850e..18a5123 100644
--- a/src/node_panel_layer.cpp
+++ b/src/node_panel_layer.cpp
@@ -28,10 +28,7 @@ void NodeLayer::clone_copy(Node* dest) const
 
 void NodeLayer::init()
 {
-    const auto& m_template = (NodeBorder*)init_template("tpl-layer");
-    m_color = m_template->m_color;
-    m_border_color = m_template->m_border_color;
-    m_thinkness = m_template->m_thinkness;
+    init_template_file("data/dialogs/panel-layers.xml", "tpl-layer");
     m_label = find<NodeText>("label");
     m_visibility = find<NodeCheckBox>("cb");
 }
@@ -111,7 +108,7 @@ Node* NodePanelLayer::clone_instantiate() const
 
 void NodePanelLayer::init()
 {
-    init_template("tpl-panel-layers");
+    init_template_file("data/dialogs/panel-layers.xml", "tpl-panel-layers");
     m_layers_container = find<NodeScroll>("layers-container");
     btn_add = find<NodeButtonCustom>("btn-add");
     btn_remove = find<NodeButtonCustom>("btn-remove");
diff --git a/src/node_panel_quick.cpp b/src/node_panel_quick.cpp
index 2cc15ae..78df7a8 100644
--- a/src/node_panel_quick.cpp
+++ b/src/node_panel_quick.cpp
@@ -19,7 +19,7 @@ void NodePanelQuick::clone_finalize(Node* dest) const
 void NodePanelQuick::init()
 {
     parent::init();
-    init_template("tpl-panel-quick");
+    init_template_file("data/dialogs/panel-quick.xml", "tpl-panel-quick");
     init_controls();
 }
 
diff --git a/src/node_panel_stroke.cpp b/src/node_panel_stroke.cpp
index a571e79..6c61dfc 100644
--- a/src/node_panel_stroke.cpp
+++ b/src/node_panel_stroke.cpp
@@ -19,7 +19,7 @@ void NodePanelStroke::clone_finalize(Node* dest) const
 
 void NodePanelStroke::init()
 {
-    init_template("tpl-panel-stroke");
+    init_template_file("data/dialogs/panel-stroke.xml", "tpl-panel-stroke");
     init_controls();
 }
 
diff --git a/src/node_popup_menu.cpp b/src/node_popup_menu.cpp
index 141276d..682264c 100644
--- a/src/node_popup_menu.cpp
+++ b/src/node_popup_menu.cpp
@@ -2,6 +2,7 @@
 #include "log.h"
 #include "node_popup_menu.h"
 #include "node_button_custom.h"
+#include "app.h"
 
 Node* NodePopupMenu::clone_instantiate() const
 {
@@ -54,7 +55,8 @@ kEventResult NodePopupMenu::handle_event(Event* e)
 
 void NodePopupMenu::added(Node* parent)
 {
-    mouse_capture();
+    if (root() == App::I->layout.get(App::I->main_id))
+        mouse_capture();
     m_mouse_ignore = false;
     m_flood_events = true;
     m_capture_children = false;
diff --git a/src/node_progress_bar.cpp b/src/node_progress_bar.cpp
index 00744a9..3e49ced 100644
--- a/src/node_progress_bar.cpp
+++ b/src/node_progress_bar.cpp
@@ -10,15 +10,12 @@ Node* NodeProgressBar::clone_instantiate() const
 
 void NodeProgressBar::init()
 {
-    auto tpl = static_cast<const NodeBorder*>(init_template("progress-bar"));
-    m_color = tpl->m_color;
-    m_border_color = tpl->m_border_color;
-    m_thinkness = tpl->m_thinkness;
+    init_template_file("data/dialogs/progress-bar.xml", "progress-bar");
     m_capture_children = false; // don't capture children events on mouse_capture
 
     m_title = find<NodeText>("title");
     btn_cancel = find<NodeButton>("btn-cancel");
-    btn_cancel->on_click = [&](Node*) { destroy(); };
+    //btn_cancel->on_click = [&](Node*) { destroy(); };
     m_progress = find<NodeBorder>("progress");
     m_body = find<NodeBorder>("body");
     
diff --git a/src/node_settings.cpp b/src/node_settings.cpp
index 82bca93..898921d 100644
--- a/src/node_settings.cpp
+++ b/src/node_settings.cpp
@@ -14,9 +14,8 @@ void NodeSettings::init()
     SetWidthP(100);
     SetHeightP(100);
     SetPositioning(YGPositionTypeAbsolute);
-    auto m_template = (*m_manager)[const_hash("settings")]->m_children[0]->clone();
-    add_child(m_template);
-    btnOk = m_template->find<NodeButton>("btn-ok");
+    add_child_file("data/dialogs/settings.xml", "settings");
+    btnOk = find<NodeButton>("btn-ok");
     btnOk->on_click = [&](Node*) { destroy(); };
 }
 
diff --git a/src/node_usermanual.cpp b/src/node_usermanual.cpp
index fc87760..be18af5 100644
--- a/src/node_usermanual.cpp
+++ b/src/node_usermanual.cpp
@@ -14,9 +14,8 @@ void NodeUserManual::init()
     SetWidthP(100);
     SetHeightP(100);
     SetPositioning(YGPositionTypeAbsolute);
-    auto m_template = (*m_manager)[const_hash("usermanual")]->m_children[0]->clone();
-    add_child(m_template);
-    btn_ok = m_template->find<NodeButton>("btn-ok");
+    add_child_file("data/dialogs/usermanual.xml", "usermanual");
+    btn_ok = find<NodeButton>("btn-ok");
     btn_ok->on_click = [&](Node*) { destroy(); };
 }