From 9da4ad469d0d3b649458427f48ff18649c4401ba Mon Sep 17 00:00:00 2001
From: Sylwester Wroblewski <swrobl@proton.me>
Date: Sun, 1 Sep 2024 22:32:54 +0200
Subject: [PATCH] Initial work on FileTree, refactor of Compile grammar service

---
 css/app.css                                   |  17 +-
 package.json                                  |   3 +
 public/favicon.ico                            | Bin 0 -> 9662 bytes
 public/favicon.png                            | Bin 0 -> 1876 bytes
 src/App.vue                                   |  31 ++-
 .../FileSystemVisitors/FileSystemVisitor.ts   |  93 +++++++++
 src/Components/FileTree/FileTree.vue          |  81 +++++---
 .../FileTree/FileTreeActionButtons.vue        |  60 ++++++
 .../FileTreeGenerateParserDropdown.vue        |  38 ----
 src/Components/FileTree/FileTreeNode.vue      | 116 +++++++++++
 src/Components/FileTree/FileTreeNodeIcon.vue  |  69 +++++++
 src/Components/FileTree/FileTreeNodes.vue     |  26 +++
 .../FileTree/Store/FileSystemsStore.ts        |  45 +++++
 src/Components/HexViewer/HexViewer.vue        |   4 +-
 .../HexViewer/Services/HexViewerActions.ts    |   2 +-
 .../Services/HexViewerMouseActions.ts         |   2 +-
 .../InfoPanel/ExportToJsonComponent.vue       |  23 ++-
 src/Components/InfoPanel/InfoPanel.vue        |   3 +-
 .../ParsedTree/Icons/OpenNodeIcon.vue         |   2 +-
 src/Components/WelcomeModal.vue               | 101 ----------
 src/Components/WelcomeModal/WelcomeModal.vue  | 120 ++++++++++++
 .../WelcomeModal/WelcomeModalStore.ts         |  34 ++++
 .../CompilationModule}/CompilationError.ts    |   0
 .../CompilationModule/CompilerService.ts      | 150 +++++++++++++++
 .../CompilationModule/JsImporter.ts           |  88 +++++++++
 .../CompilationModule}/JsImporterError.ts     |   0
 .../CompilationModule/SchemaUtils.ts          |  60 ++++++
 .../CompilationModule/YamlParser.ts           |  12 ++
 .../CodeExecution/KaitaiCodeWorker.ts         |   0
 .../CodeExecution/KaitaiCodeWorkerWrapper.ts  |   6 +-
 .../ParsingModule}/CodeExecution/Types.ts     |   4 +-
 .../CodeExecution/WorkerFunctionStack.ts      |   1 -
 .../CodeExecution/WorkerMessages.ts           |   0
 .../CodeExecution/WorkerResponses.ts          |   0
 .../ParsingModule/ParseWorkerApi.ts}          |   4 +-
 src/FaviconSource.svg                         |  51 +++++
 src/GlobalActions/CompileGrammar.ts           |  14 ++
 .../utils => GlobalActions}/ExportToJson.ts   |  20 +-
 src/GlobalActions/LoadBinaryFile.ts           |  11 ++
 src/GlobalActions/LoadKsyFile.ts              |  18 ++
 src/GlobalActions/MainEditorOnChange.ts       |  37 ++++
 src/GlobalActions/ParseAction.ts              |  10 +
 src/GlobalActions/UploadFiles.ts              |  26 +++
 src/Stores/AceEditorStore.ts                  |  25 +++
 src/Stores/AppStore.ts                        |  41 ++++
 src/extensions.ts                             |  16 --
 src/v1/FileSystems/FileSystemHelper.ts        |  18 +-
 src/v1/FileSystems/FileSystemManager.ts       |  25 ++-
 src/v1/FileSystems/FileSystemsTypes.ts        |  23 +--
 src/v1/FileSystems/KaitaiFileSystem.ts        |  42 +---
 ...System.ts => OldLocalStorageFileSystem.ts} |  39 ++--
 src/v1/GoldenLayout/GoldenLayoutUI.ts         |   4 +-
 src/v1/GoldenLayout/GoldenLayoutUIConfig.ts   |   2 +-
 src/v1/GoldenLayout/GoldenLayoutWrapper.ts    |  35 +++-
 src/v1/app.files.ts                           |  82 ++------
 src/v1/app.ts                                 | 182 +-----------------
 src/v1/utils/Compilation/CompilerService.ts   |  51 -----
 src/v1/utils/Compilation/JsImporter.ts        |  54 ------
 src/v1/utils/Compilation/SchemaUtils.ts       |  38 ----
 src/v1/utils/Compilation/YamlParser.ts        |  11 --
 .../ObjectToIExportedValueMapper.ts           |   2 +-
 src/v1/utils/Files/FileActionsWrapper.ts      |  10 +-
 src/v1/utils/Misc/RegexUtils.ts               |   9 -
 63 files changed, 1349 insertions(+), 742 deletions(-)
 create mode 100644 public/favicon.ico
 create mode 100644 public/favicon.png
 create mode 100644 src/Components/FileTree/FileSystemVisitors/FileSystemVisitor.ts
 create mode 100644 src/Components/FileTree/FileTreeActionButtons.vue
 delete mode 100644 src/Components/FileTree/FileTreeGenerateParserDropdown.vue
 create mode 100644 src/Components/FileTree/FileTreeNode.vue
 create mode 100644 src/Components/FileTree/FileTreeNodeIcon.vue
 create mode 100644 src/Components/FileTree/FileTreeNodes.vue
 create mode 100644 src/Components/FileTree/Store/FileSystemsStore.ts
 delete mode 100644 src/Components/WelcomeModal.vue
 create mode 100644 src/Components/WelcomeModal/WelcomeModal.vue
 create mode 100644 src/Components/WelcomeModal/WelcomeModalStore.ts
 rename src/{v1/utils/Compilation => DataManipulation/CompilationModule}/CompilationError.ts (100%)
 create mode 100644 src/DataManipulation/CompilationModule/CompilerService.ts
 create mode 100644 src/DataManipulation/CompilationModule/JsImporter.ts
 rename src/{v1/utils/Compilation => DataManipulation/CompilationModule}/JsImporterError.ts (100%)
 create mode 100644 src/DataManipulation/CompilationModule/SchemaUtils.ts
 create mode 100644 src/DataManipulation/CompilationModule/YamlParser.ts
 rename src/{v1/Workers => DataManipulation/ParsingModule}/CodeExecution/KaitaiCodeWorker.ts (100%)
 rename src/{v1/Workers => DataManipulation/ParsingModule}/CodeExecution/KaitaiCodeWorkerWrapper.ts (94%)
 rename src/{v1/Workers => DataManipulation/ParsingModule}/CodeExecution/Types.ts (74%)
 rename src/{v1/Workers => DataManipulation/ParsingModule}/CodeExecution/WorkerFunctionStack.ts (93%)
 rename src/{v1/Workers => DataManipulation/ParsingModule}/CodeExecution/WorkerMessages.ts (100%)
 rename src/{v1/Workers => DataManipulation/ParsingModule}/CodeExecution/WorkerResponses.ts (100%)
 rename src/{v1/Workers/WorkerApi.ts => DataManipulation/ParsingModule/ParseWorkerApi.ts} (91%)
 create mode 100644 src/FaviconSource.svg
 create mode 100644 src/GlobalActions/CompileGrammar.ts
 rename src/{v1/utils => GlobalActions}/ExportToJson.ts (50%)
 create mode 100644 src/GlobalActions/LoadBinaryFile.ts
 create mode 100644 src/GlobalActions/LoadKsyFile.ts
 create mode 100644 src/GlobalActions/MainEditorOnChange.ts
 create mode 100644 src/GlobalActions/ParseAction.ts
 create mode 100644 src/GlobalActions/UploadFiles.ts
 create mode 100644 src/Stores/AceEditorStore.ts
 create mode 100644 src/Stores/AppStore.ts
 delete mode 100644 src/extensions.ts
 rename src/v1/FileSystems/{LocalStorageFileSystem.ts => OldLocalStorageFileSystem.ts} (52%)
 delete mode 100644 src/v1/utils/Compilation/CompilerService.ts
 delete mode 100644 src/v1/utils/Compilation/JsImporter.ts
 delete mode 100644 src/v1/utils/Compilation/SchemaUtils.ts
 delete mode 100644 src/v1/utils/Compilation/YamlParser.ts
 delete mode 100644 src/v1/utils/Misc/RegexUtils.ts

diff --git a/css/app.css b/css/app.css
index ccc9dac1..695d0533 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1,19 +1,6 @@
-/*.lm_content>div { height: 100%; width: 100% }*/
-.lm_splitter.lm_horizontal .lm_drag_handle { left:-5px; width:15px }
-.lm_splitter.lm_vertical .lm_drag_handle { top:-5px; height:15px }
 .errorWindow { background: white; font-family: Courier,monospace; font-size: 12px; white-space: pre-wrap; overflow-y: scroll; }
 .errorWindow>div { margin: 5px; }
-#fileTree { font-family:Arial; font-size:12px }
 body { line-height:normal }
-#fileTree { position:absolute; top:0; bottom:28px; width:100%; /*height:100%;*/ overflow: auto; }
-#fileTree .jstree-node { margin-left: 14px }
-#fileTree .jstree-container-ul>.jstree-node { margin-left:0 }
-#fileTree .jstree-clicked { background:initial }
-#fileTree .glyphicon { font-size:12px; margin-top:-1px; color:#eee; margin-right:3px }
-#fileTree .jstree-icon { margin-left:3px; margin-right:5px }
-#fileTree .jstree-ocl { display:none }
-#fileTreeCont .footer { position:absolute; bottom:0; width:100%; padding-left:2px }
-#fileTreeCont .footer .btn { width:33.3%; border-radius:0; font-size:13px; padding:3px 10px }
 body { color:#333 }
 .dropdown { position: absolute; display:none; z-index:9999 }
 .dropdown-menu { z-index:9999 }
@@ -22,7 +9,6 @@ body { color:#333 }
 .dropdown .glyphicon-folder-open { margin-left:-1px; margin-right:6px }
 .dropdown .dropdown-menu>li>a { padding:3px 15px }
 .btn { padding: 5px 10px; }
-.modal { color: white; }
 .control-label { margin-bottom:8px }
 .form-control { padding: 6px 12px; height:34px }
 .modal-footer, .modal-body { padding: 15px }
@@ -35,6 +21,5 @@ body { color:#333 }
 #aboutWebIde { position:absolute; bottom:10px; right:10px; font-size:12px }
 #exportToJsonDiv, #parsedPathDiv, #selectionLengthDiv { font-size:13px; margin-top:5px }
 #parsedPath { word-break: break-all; }
-#welcomeModalLabel { text-align:center }
-#welcomeModal .licenses { font-size:12px; margin-bottom:10px }
+
 /*.marker_match { background:rgba(80, 255, 80, 0.30); }*/
diff --git a/package.json b/package.json
index cf721974..09e266bb 100644
--- a/package.json
+++ b/package.json
@@ -80,6 +80,9 @@
       "staticPath": "samples",
       "staticOutPath": "samples"
     },
+    {
+      "staticPath": "public"
+    },
     {
       "staticPath": "LICENSE-3RD-PARTY.txt"
     },
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..b5a819bac70936d47bcd791376ecc2e7f238fe08
GIT binary patch
literal 9662
zcmeHNNpl-T6rNP5;s#s@N4QYM(G-$wOO_>9QIr)DV<;TrGS+I@j&0epEX$E4S&LH%
zdnN3It=K|B*uhQ=9P(2P;SVIa0GH-{BRA?EX{?#n$S0hdbk9upd*9o-U%!#29io3d
zJsSQ0kaqcDO*^7#+9Pz)BP~i7o}2wK#x&zK`GogKWZ1nJ4!L&1A@?72{X-W!;Op-?
zZ`Tg6#6pkWZ^UW54+evGO@=%Lns@tvv0Bm1t;kV#er#;)un{-zryqap-aUO=p`|#+
zqd2c&`^jPVwTV#gJ)#VdDID@_byw#emcKa2GG_)@<XES2xOPN4kbf0{J$?doJEh&w
zm8g$&*~>Ps59wF&vj9tmdpoiPd<ix{tP&sH-y=_YSi0(C$w+6kMcn9vUTv$6oy$<$
z3bOf3e<w2BLQGGFTxpRXY<v2hJv$%o+!m4JZdUp-@SpBEezdh~Lu`4|$4Hloa(GgN
z{WlRm`q5)<-B-(30&I4+Pmy*V({jz%61ynJ>iGfUVP98~koy<Hi}k$;V}x|S{=uNm
z8}wt(*rz`=A^T0~a)7P8Fu)e`Ubgm@Uy>_x&ew#Y6)yRiXP53x_onCw$?#!ahRS#3
zuW5V!y0FsEau)_zD(7X1lg;vHUmB2PSSoq#%3z9}%PGnLo1cEy&k`q`iEqSO>5>>5
zK{g$8hBn8KHu{u@6+UV3ss1#i`+$niigeMRN%rY+%;TZ(>0k%(+#Cm-U+ifQD@wW=
zVug<f+0^r$>uc?8ITjEfoUfB@Y^;}UTnS1(TiXuq*}`1*b{LYRgU#y=x|MH(4(!pb
z@gz?6vdY&DU*dMpz2Rrkk=AqC;m7;jdD#Z3ti83u3J*R8`)Sp%pF$4A2x5hgv(rw;
z`XsxSz6dDMvC4CPxnJVP?Xa}2?z^Q+4Icu%IN91N9+h#KbMpEPp6e9TDzq>sb4K2)
zv45!2vN8|(p1gh|M+-8<xt00GF*6C-hgM(nE7391-S2*8TILBGq&HM@0k^*HSAS^u
z5c046csuoO?M->@*q}T|HK)Y>&SOcBfoIj$13R)A?GC=PWEVR$_*mFZ#D8kOyD`A|
z7C)Ewgxu?Dz6-fU{K&sKk8ZZ9wZ{1n{Bgcg$+<B{#E-L7H*s^?;9J|4&xi{7u#Q#S
z-;qmj9^G#9@72!=Tz}=SD34J%8=_9ZX`oeIkL}94kd=K1yid*9kK^pC@*1Q<qZRh0
zqL<Zv9%36;0}N-%)T)=^jL64EN6ClC??v6gCj7nC7Bvu&2JWrSH5<2Fk!gzbtKSD%
z{(Y)hP(Fb@M|_9<I5FOk(Tu+Md|^elBlZ{Zz1{vCt-+{u$hfTEXU?L&U_G}s?&+w%
z*qJYmg-?{fk$u9h9FV<8`Ed3{ADc_{Go0l_9>zY-bRrMTM;*yH&dNRN9U?6!`oM$y
z9<-5%C&p!Y;?K!@0C=j@8>c2H9{2nP^*@|<SI+tv_A2OcevvNXkJ!K&w)&&Go%9%@
zScgo;x(e`vj}?83V{j%~DtPr80qR-eyH@=O)$Oo`qE_UDokSWq8?@rtjc2g6aUJDY
zu%2SADqpoHBkFbCz-mS_`%3G$K`oBYflYCi#yJaXRQ{r$Az$FKiY;pHeBME{*fT}`
zyq|r!{aT9k33({$KsbW|`^EvCWw>sPYaqv8_{jc#%xRjmZEK(=^Y*ppOuV)Jv6raO
zGnoVIf114Oh!1ilu5+<<82|5tz3Kaf6Y>~qrCf&G1?Scge7}ecyOy26E7F*qY3)0x
zoyHwJkK?=c_(<;qR0qE!^6#{d^_}Y*Eo!{jQ)8oQIgAOO+xYf~Z;;_(SJ`BY?HIuK
z2Vh2hbe-f_p!L38zNW$(zZ2l!u<PHi-P<a3jB}FFK7CI@E@6D<)IIzjzjfgF(MCsm
z?h7Av|LPQv?$L4W;I|GUcHW0fbzgEe9-NWIa|gc@FzTIS7hA-%{$0CnkDJ85D|=iU
zxxn)#d;(Z_tcp0%{|i41dQj7L(cZ0TH_#r|v<liojTX26|5?{S1w#e>-M~HRbr&t^
Hnd|*u=`Z9%

literal 0
HcmV?d00001

diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..08d8e6d74ccf76838199f66c2a657428ea10591a
GIT binary patch
literal 1876
zcmV-a2dnsrP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00009a7bBm000id
z000id0mpBsWB>pF8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H12H{CW
zK~!jg#hTl1T-6oEe|w+H%-9|~_<o5glth?Hr9|q57FyL6P_+)B=|h_EP^nM-2P#!+
zd96zM4|qWpLg|H<N-Ys2Dp5g+3`qzPm!zan=i<a3+hcp|%$)1qeVEweGdIr}AE)1w
z&-OlRt?!(@*ZTIFBed33<MHR79}0c*m=IzL%>*z6STz%O7d|kL;ELAz4LjucnYUie
zRZkLI2~18-n(OKNe=7yQ($IA;qumYy*0mOY=ya~Vc>46|U~_zfz=6ZR*kgI>bu>@?
z-=b^*8cu3IedPS9msbHKz>y<I49iu=lL+1zN+AbRV2GWXstW<nNXvbFa&poHFaiF%
zmU%%4ew2g*Ed(7$$01aNw_Jj&1%j)0&`y|y`3)~m7c=9(27V{Lb?DfT_O1UUx#lxJ
z9m5#!sJK&_;Nt@B*(GojBeG_NdY=qE`}w3dtapAnaxJ95dbEemW8;WUGbuM&U&^CW
z2tAdQ#SMhli>SO?GcI~8Qs3=Q&XM4t1SXQRSb_iPTHSGDZze%6`e6wSCTMXJ>Xx$`
zW~(tG*`*4rz51I~tp;_++k}<aj;e;}uK!%rQtjTTxi@Vf2U5sB8)G1a97usJDgJS$
zX6~*LFu&YccU&!02nbUkdTnHX3Zu_P^rtZTQ-}_u>3tDD$%Gq)97th4(p}%-LtU8r
zyO4WqM7DMJs^HhR*X$-^IE@_5pmGjs&OryY$~Ag}z?#TnKhck9ASH}1b<`c-4r;j#
z0?Jclp6ml5Ak>68m+-cOUiHw$usm*n?6Hx9Hpbo#ge}_&P&*1W@1T}FxLf!lu{78_
zO$q3{hkt1m>#;px2#k?5#z?xY0HcOAD(@5CC=$*)gmVshrSgPDw^@gP7oPxtH@$?p
zziVd_Kx<UqBe?0HZWak|mYRw?VO70Ft;=tw4z`U-y9)R11=0tH%S)yW_!n1j-(75Z
zesva7D?T*Xe=RN8;EQ#<_m&&}UptEMMiKwwa!sMqfdA2ID{d-5WurBu(ei;9Y1Dgf
z2^}a>kN2TU0pV;3HR}-GDxvaa2O=fucyv$H`L$yC3C4ivj)v8&_{Cb-{)J`y3yt4|
zxv#4xeR`Kx;<x}nc16Pq=Nl7fFXuIYxj!4Z)`fs@rWo6fs9HjLp|LPbjDW}(7~@f?
z?0vKXb=o%D+UiYh{;i84YQ1sBN{oQHzYAn#`RGs+d{T&QM`R3SS0xLn`R1}bF#^_C
zqlG8@d>vhifBu#IsmOKMK*Vj%kL{rjjL}SuWB=p$Pan$qYb)-_8?X*krOp+f@Mftk
zTXHl?pjifj1PB=88O(jrrbh5-p{>n}5EvtsM4(m!^quA>xE&D?Qjq$7^hm9N;Bvgm
zy8&Y)jYw5OQnTBq;2jaLpX@{S+L1AJyVNx8HG}bB^b{A&ZodrMCSXovu@2l<Gag*M
z)2>OZs$=M`y#YCxBK=ftH%84n1fR6Ie1_AAEpJmTc`bD?VvBs)W08J#42&rE;OZLA
zsT}w!u1Nr_uSGMNcd<1M6^nrEGRPbrLu{#(T4}s@7x6!gFWNTk_N6c;DmqFRL&7Vq
z)sdD7h_pfa@ED?}BDBKW4(>nao9gveV1K8Vts2%lmq&-KrQwzc2wRf*$tZF|WcdpB
z>=MC;E3}dABQW-6Ft=o%Fz4W3YJDGVOF&qX^r2DYP`N?|Gk5UbUO=tIJEYXLZ3t46
zgPTWH4Y;QlViiG?@~?q)`+&ldq@Nqb7|WnbA@08x2>xBa>s;6PSGqCo??BC#2(A~=
zt5MSS_XZ+$#5=Qynv2yG_Dx_87_SN56r>N8gZHl#@ZMRBtuED^L;44U@NkwCpjJG>
znIdY{FE5>kDiXxIxQu_k@oBFf1l%%#&uR!5lJv79h^$5FZ?lBg;-9JjRNlk8u#El9
zUI64C8~K=BGta+Lz<;OpuEhp4;xnny|JXVx3_)gU7?pD=y*AT!@Eh>X<s0^N&>HVt
z9`|Iftz;n3f0uU1abOMZ{+9KP`*5e1aL+7m-wSO8fyQ}r4yw|k4mHlHdAzer?I~9%
z_!xhdXWn`>hZZjZ&}raL=TW)sd-!pnaxU)s`O5WzOX)8+2rjpt5NaUAiyxeLWx)h^
zAY1(Xwe`%m^;+=b9Y@;$!TWj4u?#Bb;!Q8LT&U_n!^sCbi!Z^JPYu5Q^e=ma<@{B^
zGs%Qp3sH8yGid#$6zXTwCtfSS7BzbQ)XS?~rR!4y{Q`IQMAFz{@CAhU%>!BI;70IJ
z^|i_dp7`O<2Yo4zYN4kDJOT`J??1QkfO!p<g%)oFLjLK46R#{(Px>E^sLJ=>S4lts
O0000<MNUMnLSTXdR*vBS

literal 0
HcmV?d00001

diff --git a/src/App.vue b/src/App.vue
index 0f223c10..732215fd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,42 @@
 <script setup lang="ts">
 
 import ConverterPanel from "./Components/ConverterPanel/ConverterPanel.vue";
-import FileTree from "./Components/FileTree/FileTree.vue";
 import InfoPanel from "./Components/InfoPanel/InfoPanel.vue";
 import UnsupportedBrowser from "./Components/UnsupportedBrowser.vue";
-import WelcomeModal from "./Components/WelcomeModal.vue";
+import WelcomeModal from "./Components/WelcomeModal/WelcomeModal.vue";
 import FileDrop from "./Components/FileDrop.vue";
 import NewKsyModal from "./Components/NewKsyModal.vue";
 import InputContextMenu from "./Components/InputContextMenu.vue";
 import HexViewer from "./Components/HexViewer/HexViewer.vue";
 import ParsedTree from "./Components/ParsedTree/ParsedTree.vue";
+import FileTree from "./Components/FileTree/FileTree.vue";
+import {useAppStore} from "./Stores/AppStore";
+import {loadBinaryFileAction} from "./GlobalActions/LoadBinaryFile";
+import {loadKsyFileAction} from "./GlobalActions/LoadKsyFile";
+import {onMounted} from "vue";
+import {parseAction} from "./GlobalActions/ParseAction";
+
+const store = useAppStore();
+store.$onAction(async ({name, store, args}) => {
+  switch (name) {
+    case "updateSelectedBinaryFile": {
+      await loadBinaryFileAction(args[0]);
+      await parseAction();
+      return;
+    }
+    case "updateSelectedKsyFile": {
+      await loadKsyFileAction(args[0]);
+      await parseAction();
+      return;
+    }
+  }
+});
+
+onMounted(async () => {
+  await loadKsyFileAction(store.selectedKsyInfo);
+  await loadBinaryFileAction(store.selectedBinaryInfo);
+  await parseAction();
+});
 </script>
 
 <template>
diff --git a/src/Components/FileTree/FileSystemVisitors/FileSystemVisitor.ts b/src/Components/FileTree/FileSystemVisitors/FileSystemVisitor.ts
new file mode 100644
index 00000000..8dd82de2
--- /dev/null
+++ b/src/Components/FileTree/FileSystemVisitors/FileSystemVisitor.ts
@@ -0,0 +1,93 @@
+import {
+    FILE_SYSTEM_TYPE_KAITAI,
+    FILE_SYSTEM_TYPE_LOCAL,
+    IFileSystem,
+    IFsItem,
+    ITEM_MODE_DIRECTORY,
+    ITEM_MODE_FILE
+} from "../../../v1/FileSystems/FileSystemsTypes";
+
+export const OPEN_FOLDER = "OPEN_FOLDER";
+export const CLOSED_FOLDER = "CLOSED_FOLDER";
+export const EMPTY_FOLDER = "EMPTY_FOLDER";
+export const BINARY_FILE = "BINARY_FILE";
+export const KSY_FILE = "KSY_FILE";
+
+export type NodeType = typeof EMPTY_FOLDER | typeof OPEN_FOLDER | typeof CLOSED_FOLDER | typeof BINARY_FILE | typeof KSY_FILE;
+
+export interface TreeNodeDisplay {
+    fullPath: string;
+    type: NodeType;
+    fileName: string;
+    isOpen: boolean;
+    storeId: typeof FILE_SYSTEM_TYPE_LOCAL | typeof FILE_SYSTEM_TYPE_KAITAI;
+    depth: number;
+}
+
+export class FileSystemVisitor {
+    private openPaths: string[];
+    private currentPath: string[] = [];
+    private visibleFsItemsNew: TreeNodeDisplay[] = [];
+
+    public visit(fileSystem: IFileSystem, openPaths: string[]) {
+        this.openPaths = openPaths;
+        this.visitFileSystem(fileSystem);
+        return this.visibleFsItemsNew;
+    }
+
+    private visitFileSystem(fileSystem: IFileSystem) {
+        if (!fileSystem.getRootNode()) {
+            this.visibleFsItemsNew = [];
+            return;
+        }
+        this.visitNode(fileSystem.getRootNode());
+
+    }
+
+    private visitNode(fsItem: IFsItem) {
+        this.currentPath.push(fsItem.fn);
+        const newNode = this.mapToNewNode(fsItem);
+        this.visibleFsItemsNew.push(newNode);
+
+        if (fsItem.type === ITEM_MODE_DIRECTORY && newNode.isOpen) {
+            Object.entries(fsItem.children || {})
+                .forEach(([key, child]) => {
+                    child.fn = key;
+                    this.visitNode(child);
+                });
+        }
+        this.currentPath.pop();
+    }
+
+
+    private mapToNewNode(fsItem: IFsItem): TreeNodeDisplay {
+        const fullPath = this.currentPath.join("/");
+        const isOpen = this.isDirectoryOpen(fullPath);
+        return {
+            type: this.getNodeType(isOpen, fsItem),
+            storeId: fsItem.fsType,
+            fullPath: fullPath,
+            fileName: fsItem.fn,
+            isOpen: isOpen,
+            depth: this.currentPath.length - 1
+        };
+    }
+
+    private getNodeType(isOpen: boolean, fsItem: IFsItem): NodeType {
+        switch (fsItem.type) {
+            case ITEM_MODE_FILE: {
+                return fsItem.fn.endsWith(".ksy") ? KSY_FILE : BINARY_FILE;
+            }
+            case ITEM_MODE_DIRECTORY: {
+                if (Object.keys(fsItem.children).length === 0) return EMPTY_FOLDER;
+                else if (isOpen) return OPEN_FOLDER;
+                else return CLOSED_FOLDER;
+            }
+        }
+    }
+
+    private isDirectoryOpen(path: string) {
+        const tempPath = this.currentPath.join("/");
+        return !!this.openPaths.find(openPath => openPath === tempPath);
+    }
+}
\ No newline at end of file
diff --git a/src/Components/FileTree/FileTree.vue b/src/Components/FileTree/FileTree.vue
index 6c66cc4c..dd2c9f9d 100644
--- a/src/Components/FileTree/FileTree.vue
+++ b/src/Components/FileTree/FileTree.vue
@@ -1,43 +1,62 @@
 <script setup lang="ts">
 
-import FileTreeLanguagesDropdown from "./FileTreeGenerateParserDropdown.vue";
+import FileTreeBottomActions from "./FileTreeActionButtons.vue";
+import {useFileSystems} from "./Store/FileSystemsStore";
+import FileTreeNodes from "./FileTreeNodes.vue";
+import {onMounted} from "vue";
+import {FILE_SYSTEM_TYPE_LOCAL, IFsItem, ITEM_MODE_DIRECTORY} from "../../v1/FileSystems/FileSystemsTypes";
+import {LocalForageWrapper} from "../../v1/utils/LocalForageWrapper";
+import {initKaitaiFs} from "../../v1/FileSystems/KaitaiFileSystem";
+import {OldLocalStorageFileSystem} from "../../v1/FileSystems/OldLocalStorageFileSystem";
+
+const store = useFileSystems();
+
+onMounted(async () => {
+  const defaultItem: IFsItem = {
+    fsType: FILE_SYSTEM_TYPE_LOCAL,
+    type: ITEM_MODE_DIRECTORY,
+    children: {},
+    fn: "Local storage"
+  };
+  const storedItem = await LocalForageWrapper.getFsItem(`fs_files`);
+  if (storedItem) {
+    storedItem.fn = "Local storage";
+  }
+  store.addFileSystem(initKaitaiFs());
+  store.addFileSystem(new OldLocalStorageFileSystem(storedItem || defaultItem));
+});
+
 </script>
 
 <template>
-  <div id="fileTreeCont">
-    <div id="fileTree" class="fileTree">
-
-    </div>
-    <div class="footer btn-group" role="group">
-      <button id="createLocalKsyFile" type="button" class="btn btn-default"><i
-          class="glyphicon glyphicon-file"></i></button>
-      <button id="uploadFile" type="button" class="btn btn-default"><i
-          class="glyphicon glyphicon-cloud-upload"></i></button>
-      <button id="downloadFile" type="button" class="btn btn-default disabled"><i
-          class="glyphicon glyphicon-cloud-download"></i></button>
+  <div id="fileTreeNew" class="file-tree-component">
+    <div class="file-tree-list-container">
+      <FileTreeNodes :fileSystem="fileSystem" v-for="fileSystem in store.fileSystems"/>
     </div>
-  </div>
-
-  <div id="fileTreeContextMenu" class="dropdown clearfix">
-    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"
-        style="display:block;position:static;margin-bottom:5px;">
-      <li class="openItem"><a tabindex="-1" href="#"><i class="glyphicon glyphicon-pencil"></i> Open</a></li>
-      <li class="createFolder"><a tabindex="-1" href="#"><i class="glyphicon glyphicon-folder-open"></i> Create
-        folder</a></li>
-      <li class="createKsyFile"><a tabindex="-1" href="#"><i class="glyphicon glyphicon-list-alt"></i> Create .ksy
-        file</a></li>
-      <li class="cloneKsyFile"><a tabindex="-1" href="#"><i class="glyphicon fa fa-clone"></i> Clone</a></li>
-      <li class="generateParser dropdown-submenu">
-        <a tabindex="-1" href="#"><i class="glyphicon glyphicon-flash"></i> Generate parser</a>
-        <FileTreeLanguagesDropdown/>
-      </li>
-      <li class="downloadItem"><a tabindex="-1" href="#"><i class="glyphicon glyphicon-cloud-download"></i>
-        Download</a></li>
-      <li class="deleteItem"><a tabindex="-1" href="#"><i class="glyphicon glyphicon-remove"></i> Delete</a></li>
-    </ul>
+    <FileTreeBottomActions/>
   </div>
 </template>
 
+<!--font: 12px/normal "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;-->
+
 <style scoped>
+.file-tree-component {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-family: Arial;
+  font-size: 12px;
+  color: #ccc;
+  user-select: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.file-tree-list-container {
+  overflow: scroll;
+  width: 100%;
+  flex-grow: 1;
+}
 
 </style>
\ No newline at end of file
diff --git a/src/Components/FileTree/FileTreeActionButtons.vue b/src/Components/FileTree/FileTreeActionButtons.vue
new file mode 100644
index 00000000..84d9ad01
--- /dev/null
+++ b/src/Components/FileTree/FileTreeActionButtons.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import {openUploadFilesOperatingSystemModal} from "../../v1/JQueryComponents/Files/UploadFilesOSModal";
+import {processUploadedFiles} from "../../GlobalActions/UploadFiles";
+
+const addKsyFile = () => {
+};
+
+const uploadFile = () => {
+  openUploadFilesOperatingSystemModal(files => {
+    processUploadedFiles(files);
+  });
+};
+
+const downloadFile = () => {
+};
+
+
+</script>
+
+<template>
+  <div class="footer btn-group" role="group">
+    <button type="button" class="action-button" @click="addKsyFile()">
+      <i class="glyphicon glyphicon-file"/>
+    </button>
+    <button type="button" class="action-button" @click="uploadFile()">
+      <i class="glyphicon glyphicon-cloud-upload"/>
+    </button>
+    <button type="button" class="action-button" @click="downloadFile()" disabled>
+      <i class="glyphicon glyphicon-cloud-download"/>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.footer {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+
+.action-button {
+  font-size: 13px;
+  padding: 7px 10px;
+  flex-grow: 1;
+  border-radius: 0;
+  background-color: rgb(70, 70, 70);
+  border: none;
+}
+
+.action-button:hover {
+  color: white;
+  background-color: rgb(30, 30, 30);
+}
+
+.action-button:disabled {
+  background-color: rgb(60, 60, 60);
+  color: inherit;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/Components/FileTree/FileTreeGenerateParserDropdown.vue b/src/Components/FileTree/FileTreeGenerateParserDropdown.vue
deleted file mode 100644
index 15db73a8..00000000
--- a/src/Components/FileTree/FileTreeGenerateParserDropdown.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-const languages = [
-  {kslang: "cpp_stl", acelang: "c_cpp", isDebug: false, text: "CPP-STL"},
-  {kslang: "csharp", acelang: "csharp", isDebug: false, text: "C#"},
-  {kslang: "go", acelang: "golang", isDebug: false, text: "Go"},
-  {kslang: "graphviz", acelang: "dot", isDebug: false, text: "Graphviz"},
-  {kslang: "java", acelang: "java", isDebug: false, text: "Java"},
-  {kslang: "java", acelang: "java", isDebug: true, text: "Java (debug)"},
-  {kslang: "javascript", acelang: "javascript", isDebug: false, text: "JavaScript"},
-  {kslang: "javascript", acelang: "javascript", isDebug: true, text: "JavaScript (debug)"},
-  {kslang: "lua", acelang: "lua", isDebug: false, text: "Lua"},
-  {kslang: "nim", acelang: "nim", isDebug: false, text: "Nim"},
-  {kslang: "perl", acelang: "perl", isDebug: false, text: "Perl"},
-  {kslang: "php", acelang: "php", isDebug: false, text: "PHP"},
-  {kslang: "python", acelang: "python", isDebug: false, text: "Python"},
-  {kslang: "ruby", acelang: "ruby", isDebug: false, text: "Ruby"},
-  {kslang: "ruby", acelang: "ruby", isDebug: true, text: "Ruby (debug)"},
-  {kslang: "json", acelang: "json", isDebug: false, text: "JSON"},
-];
-</script>
-
-<template>
-  <ul class="dropdown-menu">
-    <li v-for="lang in languages" :key="lang.text">
-      <a tabindex="-1"
-         href="#"
-         :data-kslang="lang.kslang"
-         :data-ksdebug="lang.isDebug"
-         :data-acelang="lang.acelang">
-        {{ lang.text }}
-      </a>
-    </li>
-  </ul>
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/Components/FileTree/FileTreeNode.vue b/src/Components/FileTree/FileTreeNode.vue
new file mode 100644
index 00000000..8485757a
--- /dev/null
+++ b/src/Components/FileTree/FileTreeNode.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import {useFileSystems} from "./Store/FileSystemsStore";
+import {
+  BINARY_FILE,
+  CLOSED_FOLDER,
+  EMPTY_FOLDER,
+  KSY_FILE,
+  OPEN_FOLDER,
+  TreeNodeDisplay
+} from "./FileSystemVisitors/FileSystemVisitor";
+import FileStoreTreeNodeIcon from "./FileTreeNodeIcon.vue";
+import {computed} from "vue";
+import {useAppStore} from "../../Stores/AppStore";
+
+const store = useFileSystems();
+const appStore = useAppStore();
+const props = defineProps<{
+  item: TreeNodeDisplay
+}>();
+
+const activateRow = () => {
+  store.selectPath(props.item.fullPath);
+};
+
+const doubleClick = () => {
+  switch (props.item.type) {
+    case KSY_FILE: {
+      appStore.updateSelectedKsyFile({
+        storeId: props.item.storeId,
+        filePath: prepareFilePathFromNode(props.item)
+      });
+      return;
+    }
+    case BINARY_FILE: {
+      appStore.updateSelectedBinaryFile({
+        storeId: props.item.storeId,
+        filePath: prepareFilePathFromNode(props.item)
+      });
+      return;
+    }
+    case EMPTY_FOLDER: {
+      return;
+    }
+    case OPEN_FOLDER: {
+      store.closePath(props.item.fullPath);
+      return;
+    }
+    case CLOSED_FOLDER: {
+      store.openPath(props.item.fullPath);
+      return;
+    }
+  }
+};
+
+const prepareFilePathFromNode = (node: TreeNodeDisplay) => node.fullPath.split("/").slice(1).join("/");
+
+
+const isSelected = computed(() => {
+  return store.selectedPath === props.item.fullPath;
+});
+
+
+</script>
+
+<template>
+  <div class="row-wrapper" :class="{isSelected}">
+    <div class="roww" :style="{marginLeft: item.depth * 16 + 'px'}"
+         @click="() => activateRow()"
+         @dblclick="() => doubleClick()">
+      <FileStoreTreeNodeIcon :type="item.type"/>
+      <span class="row-description">{{ item.fileName }}</span>
+    </div>
+  </div>
+
+</template>
+
+<style scoped>
+
+.row-wrapper {
+  transition: background-color 200ms;
+  border-radius: 2px;
+
+}
+
+.row-wrapper:hover {
+  background-color: #344C64;
+}
+
+.roww {
+  display: flex;
+  flex-direction: row;
+  text-wrap: nowrap;
+  height: 16px;
+
+  animation:  100ms ease-out 0s 1 unshrink;
+}
+
+.row-description {
+  margin-left: 4px;
+}
+
+.isSelected {
+  background-color: #57A6A1 !important;
+  color: white;
+}
+
+@keyframes unshrink {
+  0% {
+    height: 0;
+  }
+  100% {
+    height: 16px;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/Components/FileTree/FileTreeNodeIcon.vue b/src/Components/FileTree/FileTreeNodeIcon.vue
new file mode 100644
index 00000000..53b1e081
--- /dev/null
+++ b/src/Components/FileTree/FileTreeNodeIcon.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import {
+  BINARY_FILE,
+  CLOSED_FOLDER,
+  EMPTY_FOLDER,
+  KSY_FILE,
+  NodeType,
+  OPEN_FOLDER
+} from "./FileSystemVisitors/FileSystemVisitor";
+
+const props = defineProps<{
+  type: NodeType
+}>();
+
+</script>
+
+<template>
+  <div v-if="type === EMPTY_FOLDER" class="icon">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
+      <path
+          d="M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z"/>
+    </svg>
+  </div>
+
+  <div v-else-if="type === CLOSED_FOLDER" class="icon">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
+      <path fill-rule="evenodd"
+            d="M19.5 21a3 3 0 0 0 3-3V9a3 3 0 0 0-3-3h-5.379a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H4.5a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h15Zm-6.75-10.5a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25v2.25a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V10.5Z"
+            clip-rule="evenodd"/>
+    </svg>
+  </div>
+
+  <div v-else-if="type === OPEN_FOLDER" class="icon">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
+      <path fill-rule="evenodd"
+            d="M19.5 21a3 3 0 0 0 3-3V9a3 3 0 0 0-3-3h-5.379a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H4.5a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h15ZM9 12.75a.75.75 0 0 0 0 1.5h6a.75.75 0 0 0 0-1.5H9Z"
+            clip-rule="evenodd"/>
+    </svg>
+  </div>
+
+  <div v-else-if="type === BINARY_FILE" class="icon">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
+      <path
+          d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625Z"/>
+      <path
+          d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z"/>
+    </svg>
+  </div>
+
+  <div v-else-if="type === KSY_FILE" class="icon">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
+      <path fill-rule="evenodd"
+            d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z"
+            clip-rule="evenodd"/>
+      <path
+          d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z"/>
+    </svg>
+  </div>
+
+</template>
+
+<style scoped>
+
+.icon {
+  width: 16px;
+  flex-shrink: 0;
+  color: #577B8D;
+}
+</style>
\ No newline at end of file
diff --git a/src/Components/FileTree/FileTreeNodes.vue b/src/Components/FileTree/FileTreeNodes.vue
new file mode 100644
index 00000000..d550ce55
--- /dev/null
+++ b/src/Components/FileTree/FileTreeNodes.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {IFileSystem} from "../../v1/FileSystems/FileSystemsTypes";
+import {computed} from "vue";
+import FileStoreTreeNode from "./FileTreeNode.vue";
+import {FileSystemVisitor} from "./FileSystemVisitors/FileSystemVisitor";
+import {useFileSystems} from "./Store/FileSystemsStore";
+
+const store = useFileSystems();
+const props = defineProps<{
+  fileSystem: IFileSystem
+}>();
+
+const childrenItems = computed(() => {
+  return new FileSystemVisitor().visit(props.fileSystem, store.openPaths);
+});
+
+
+</script>
+
+<template>
+  <FileStoreTreeNode v-for="item in childrenItems" :item="item" :key="item.fullPath"/>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/Components/FileTree/Store/FileSystemsStore.ts b/src/Components/FileTree/Store/FileSystemsStore.ts
new file mode 100644
index 00000000..035af631
--- /dev/null
+++ b/src/Components/FileTree/Store/FileSystemsStore.ts
@@ -0,0 +1,45 @@
+import {defineStore} from "pinia";
+import {IFileSystem} from "../../../v1/FileSystems/FileSystemsTypes";
+
+export interface FileSystemsStore {
+    fileSystems: IFileSystem[];
+    openPaths: string[];
+    selectedPath: string;
+}
+
+const serializeConfigToLocalStorage = (store: FileSystemsStore) => {
+    const config = JSON.stringify({
+        fileSystems: [],
+        selectedPath: store.selectedPath,
+        openPaths: store.openPaths,
+    });
+    localStorage.setItem("FileTree", config);
+};
+
+
+export const useFileSystems = defineStore("FileSystemsStore", {
+    state: (): FileSystemsStore => {
+        return JSON.parse(localStorage.getItem("FileTree")) || {
+            fileSystems: [],
+            openPaths: [],
+            selectedPath: ""
+        };
+    },
+    actions: {
+        addFileSystem(fileSystem: IFileSystem) {
+            this.fileSystems.push(fileSystem);
+        },
+        openPath(pathToAdd: string) {
+            this.openPaths.push(pathToAdd);
+            serializeConfigToLocalStorage(this);
+        },
+        closePath(pathToRemove: string) {
+            this.openPaths = this.openPaths.filter((path: string) => path !== pathToRemove);
+            serializeConfigToLocalStorage(this);
+        },
+        selectPath(path: string) {
+            this.selectedPath = path;
+            serializeConfigToLocalStorage(this);
+        },
+    }
+});
diff --git a/src/Components/HexViewer/HexViewer.vue b/src/Components/HexViewer/HexViewer.vue
index 3232f49f..e6201e1e 100644
--- a/src/Components/HexViewer/HexViewer.vue
+++ b/src/Components/HexViewer/HexViewer.vue
@@ -39,7 +39,7 @@ currentBinaryFileStore.$onAction(({name, store, args}) => {
 <template>
   <div tabindex="-1" id="hex-viewer" class="hex-viewer" @keydown="(e) => handleCursorMoveAndSelect(e, hexViewerConfigStore.rowSize)">
     <HexViewerHeader/>
-    <div v-bind="containerProps" class="wrapper">
+    <div v-bind="containerProps" class="backdrop">
       <div v-bind="wrapperProps" class="wrapper-inner">
         <HexViewerRow :processed-data="oddEvenRanges" :row-index="listItem.data" v-for="listItem in list"/>
       </div>
@@ -63,7 +63,7 @@ currentBinaryFileStore.$onAction(({name, store, args}) => {
 }
 
 
-.wrapper {
+.backdrop {
   flex-grow: 1;
 }
 
diff --git a/src/Components/HexViewer/Services/HexViewerActions.ts b/src/Components/HexViewer/Services/HexViewerActions.ts
index 87f4a462..dad55adb 100644
--- a/src/Components/HexViewer/Services/HexViewerActions.ts
+++ b/src/Components/HexViewer/Services/HexViewerActions.ts
@@ -12,7 +12,7 @@ const isInViewPort = (rowIndexToGo: number, viewportList: any) => {
 
 export const handleSelectionUpdatedEvents = (eventName: string, args: any[], viewportList: any[], scrollTo: (index: number) => void) => {
     const hexViewerConfigStore = useHexViewerConfigStore();
-    const isSelectionEvent ="updateSelectionEvent" === eventName;
+    const isSelectionEvent = "updateSelectionEvent" === eventName;
     const event = args[0] as UpdateSelectionEvent;
     if (!isSelectionEvent || event.source === HEX_VIEWER_SOURCE) return false;
 
diff --git a/src/Components/HexViewer/Services/HexViewerMouseActions.ts b/src/Components/HexViewer/Services/HexViewerMouseActions.ts
index 657a6a91..0cf2805e 100644
--- a/src/Components/HexViewer/Services/HexViewerMouseActions.ts
+++ b/src/Components/HexViewer/Services/HexViewerMouseActions.ts
@@ -32,7 +32,7 @@ const handleSingleSelectionAction = (e: MouseEvent, letter: ProcessedLetter) =>
     const event: UpdateSelectionEvent = {
         startNew: letter.index,
         endNew: letter.index,
-        range: letter.range.value,
+        range: letter.range?.value,
         source: HEX_VIEWER_SOURCE
     };
     store.updateSelectionEvent(event);
diff --git a/src/Components/InfoPanel/ExportToJsonComponent.vue b/src/Components/InfoPanel/ExportToJsonComponent.vue
index 7658403d..4a2530c2 100644
--- a/src/Components/InfoPanel/ExportToJsonComponent.vue
+++ b/src/Components/InfoPanel/ExportToJsonComponent.vue
@@ -1,9 +1,26 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+
+import {exportToJson} from "../../GlobalActions/ExportToJson";
+import {IAceEditorComponentOptions} from "../../v1/GoldenLayout/AceEditorComponent";
+
+const exportToJsonThenPrintToConsole = (useHexForNumbers: boolean) => {
+  exportToJson(useHexForNumbers)
+      .then((json: string) => {
+        console.log(json)
+        const options: IAceEditorComponentOptions = {
+          lang: "json",
+          isReadOnly: true,
+          data: json
+        };
+        // this.ui.layoutManager.addDynamicAceCodeEditorTab("json export", options);
+      });
+}
+</script>
 
 <template>
   <div id="exportToJsonDiv">
-    <a onclick="kaitaiIde.app.vm.exportToJson(false)" href="#">export to JSON</a> (<a
-      onclick="kaitaiIde.app.vm.exportToJson(true)" href="#">hex</a>)
+    <a @click="exportToJsonThenPrintToConsole(false)" href="#">export to JSON</a>
+    (<a @click="exportToJsonThenPrintToConsole(true)" href="#">hex</a>)
     <br/>
   </div>
 </template>
diff --git a/src/Components/InfoPanel/InfoPanel.vue b/src/Components/InfoPanel/InfoPanel.vue
index eac54e02..957b61f3 100644
--- a/src/Components/InfoPanel/InfoPanel.vue
+++ b/src/Components/InfoPanel/InfoPanel.vue
@@ -11,6 +11,7 @@ import ListOptionsToggle from "./ListOptionsToggle.vue";
 import ExportToJsonComponent from "./ExportToJsonComponent.vue";
 import {useIdeSettingsStore} from "../../Stores/IdeSettingsStore";
 import {RangeHelper} from "../../v1/utils/RangeHelper";
+import {useWelcomeModalStore} from "../WelcomeModal/WelcomeModalStore";
 
 const currentBinaryFileStore = useCurrentBinaryFileStore();
 const hexViewerConfigStore = useHexViewerConfigStore();
@@ -38,7 +39,7 @@ const selectionPath = computed(() => {
 });
 
 const about = () => {
-  (<any>$("#welcomeModal")).modal();
+  useWelcomeModalStore().open();
 };
 </script>
 
diff --git a/src/Components/ParsedTree/Icons/OpenNodeIcon.vue b/src/Components/ParsedTree/Icons/OpenNodeIcon.vue
index 878dc045..cd1a2035 100644
--- a/src/Components/ParsedTree/Icons/OpenNodeIcon.vue
+++ b/src/Components/ParsedTree/Icons/OpenNodeIcon.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div v-if="!isParentEmpty" @click="onClick" style="width: 16px" class="icon icon-width">
+  <div v-if="!isParentEmpty" @click="onClick" class="icon icon-width">
     <svg v-if="isOpen" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
          stroke="currentColor" className="size-6">
       <path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
diff --git a/src/Components/WelcomeModal.vue b/src/Components/WelcomeModal.vue
deleted file mode 100644
index 5c9c9edb..00000000
--- a/src/Components/WelcomeModal.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<script setup lang="ts">
-
-import {onMounted} from "vue";
-import {KaitaiIdeInfo} from "../KaitaiIdeInfo";
-import KaitaiStructCompiler from "kaitai-struct-compiler";
-import {LocalStorageApi} from "../v1/utils/LocalStorageApi";
-
-onMounted(() => {
-  if (LocalStorageApi.getDoNotShowWelcomeFlag()) {
-    (<any>$("#welcomeModal")).modal();
-  }
-});
-
-const dontShowAgain = () => {
-  LocalStorageApi.storeDoNotShowWelcomeFlag(true);
-};
-
-
-</script>
-
-<template>
-  <div class="modal fade" id="welcomeModal" tabindex="-1" role="dialog" aria-labelledby="welcomeModalLabel">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-body">
-          <div class="form-group">
-            <h4 class="modal-title" id="welcomeModalLabel">Hey there!</h4>
-          </div>
-          <div class="form-group">
-            If this is the first time you are using Kaitai WebIDE then I recommend scrolling through our
-            <a href="https://github.com/kaitai-io/kaitai_struct_webide/wiki/Features" target="_blank">Features
-              page</a>.
-          </div>
-          <div class="form-group">
-            You can read more about Kaitai Struct on our website (<a href="http://kaitai.io"
-                                                                     target="_blank">kaitai.io</a>) and
-            learn the basics of using it by reading <a href="http://doc.kaitai.io" target="_blank">our
-            documentation</a>.
-          </div>
-          <div class="form-group">
-            We would be pleased if you could visit us and share your thoughts about Kaitai Struct or WebIDE
-            in our
-            <a href="https://gitter.im/kaitai_struct/Lobby" target="_blank">Gitter chatroom</a>.
-          </div>
-          <div class="form-group">
-            You can view the source code or create issues on Github
-            for the <a href="https://github.com/kaitai-io/kaitai_struct_webide" target="_blank">WebIDE</a>
-            or
-            <a href="https://github.com/kaitai-io/kaitai_struct" target="_blank">Kaitai Struct</a>.
-          </div>
-          <div class="form-group">
-            Kaitai WebIDE was made possible by using
-            <a href="https://github.com/kaitai-io/kaitai_struct_webide/blob/master/docs/wiki/3rd-party-libraries.md"
-               target="_blank">open-source libraries listed here</a>
-            (<a href="LICENSE-3RD-PARTY.txt" target="_blank">licensing information</a>).
-          </div>
-          <div class="form-group">
-            Also, follow us on Twitter!
-            <ul>
-              <li style="margin-top:5px"><a href="https://twitter.com/koczkatamas" target="_blank">@koczkatamas</a>
-                (WebIDE author)
-              </li>
-              <li style="margin-top:5px"><a href="https://twitter.com/kaitai_io"
-                                            target="_blank">@kaitai_io</a>
-                (Kaitai Project)
-              </li>
-            </ul>
-          </div>
-          <div class="licenses">
-            <div>
-              <span>Kaitai WebIDE version: </span>
-              <span id="webIdeVersion">{{ KaitaiIdeInfo.version }}-SNAPSHOT</span>
-              <a id="webideCommitId"
-                 :href="'https://github.com/kaitai-io/kaitai_struct_webide/commit/' + KaitaiIdeInfo.commitId">{{
-                  KaitaiIdeInfo.commitId.substr(0, 7)
-                }}</a>
-              (<span id="webideCommitDate"></span>,
-              <a href="https://raw.githubusercontent.com/kaitai-io/kaitai_struct_webide/master/LICENSE"
-                 target="_blank">license</a>)
-            </div>
-            <div>Kaitai compiler version: <span
-                id="compilerVersion">{{
-                KaitaiStructCompiler.version + " (" + KaitaiStructCompiler.buildDate + ")"
-              }}</span>
-            </div>
-          </div>
-          <div style="text-align:center; font-size:12px; margin-bottom:10px">
-            <a @click="dontShowAgain" href="#" data-dismiss="modal">close and do not show again</a>
-          </div>
-          <div style="text-align:center">
-            <button type="submit" class="btn btn-primary" data-dismiss="modal">Close</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/Components/WelcomeModal/WelcomeModal.vue b/src/Components/WelcomeModal/WelcomeModal.vue
new file mode 100644
index 00000000..4d981269
--- /dev/null
+++ b/src/Components/WelcomeModal/WelcomeModal.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+
+import {KaitaiIdeInfo} from "../../KaitaiIdeInfo";
+import KaitaiStructCompiler from "kaitai-struct-compiler";
+import {useWelcomeModalStore} from "./WelcomeModalStore";
+
+const store = useWelcomeModalStore();
+
+const onClickBackdrop = (e) => {
+  e.stopPropagation();
+  store.close();
+};
+
+</script>
+
+<template>
+  <div class="backdrop-welcome" tabindex="-1" v-if="store.shouldShowModal" @click="onClickBackdrop">
+    <div class="modal-wrapper-background" @click="e => e.stopPropagation()">
+      <div>Hey there!</div>
+      <div>
+        If this is the first time you are using Kaitai WebIDE then I recommend scrolling through our
+        <a href="https://github.com/kaitai-io/kaitai_struct_webide/wiki/Features" target="_blank">Features
+          page</a>.
+      </div>
+      <div>
+        You can read more about Kaitai Struct on our website (<a href="http://kaitai.io"
+                                                                 target="_blank">kaitai.io</a>) and
+        learn the basics of using it by reading <a href="http://doc.kaitai.io" target="_blank">our
+        documentation</a>.
+      </div>
+      <div>
+        We would be pleased if you could visit us and share your thoughts about Kaitai Struct or WebIDE
+        in our
+        <a href="https://gitter.im/kaitai_struct/Lobby" target="_blank">Gitter chatroom</a>.
+      </div>
+      <div>
+        You can view the source code or create issues on Github
+        for the <a href="https://github.com/kaitai-io/kaitai_struct_webide" target="_blank">WebIDE</a>
+        or
+        <a href="https://github.com/kaitai-io/kaitai_struct" target="_blank">Kaitai Struct</a>.
+      </div>
+      <div>
+        Kaitai WebIDE was made possible by using
+        <a href="https://github.com/kaitai-io/kaitai_struct_webide/blob/master/docs/wiki/3rd-party-libraries.md"
+           target="_blank">open-source libraries listed here</a>
+        (<a href="LICENSE-3RD-PARTY.txt" target="_blank">licensing information</a>).
+      </div>
+      <div>
+        Also, follow us on Twitter!
+        <ul>
+          <li>
+            <a href="https://twitter.com/koczkatamas" target="_blank">@koczkatamas</a>
+            (WebIDE author)
+          </li>
+          <li>
+            <a href="https://twitter.com/kaitai_io" target="_blank">@kaitai_io</a>
+            (Kaitai Project)
+          </li>
+        </ul>
+      </div>
+      <div class="licenses">
+        <div>
+          <span>Kaitai WebIDE version: </span>
+          <span id="webIdeVersion">{{ KaitaiIdeInfo.version }}-SNAPSHOT</span>
+          <a id="webideCommitId"
+             :href="'https://github.com/kaitai-io/kaitai_struct_webide/commit/' + KaitaiIdeInfo.commitId">{{
+              KaitaiIdeInfo.commitId.substr(0, 7)
+            }}</a>
+          (<span id="webideCommitDate"></span>,
+          <a href="https://raw.githubusercontent.com/kaitai-io/kaitai_struct_webide/master/LICENSE"
+             target="_blank">license</a>)
+        </div>
+        <div>Kaitai compiler version: <span>
+          {{ KaitaiStructCompiler.version + " (" + KaitaiStructCompiler.buildDate + ")" }}
+        </span>
+        </div>
+      </div>
+      <button @click="store.closeWithDoNotShow()">close and do not show again</button>
+      <button @click="store.close()">Close</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.backdrop-welcome {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 1000;
+  background-color: rgba(0, 0, 0, 0.4);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  justify-content: center;
+}
+
+@keyframes slideInFromTop {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(-30%);
+  }
+}
+
+.modal-wrapper-background {
+  width: 600px;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  background-color: #333;
+  border-radius: 6px;
+  gap: 10px;
+
+  transform: translateY(-30%);
+  animation: 500ms ease-out 0s 1 slideInFromTop;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/Components/WelcomeModal/WelcomeModalStore.ts b/src/Components/WelcomeModal/WelcomeModalStore.ts
new file mode 100644
index 00000000..000d3d97
--- /dev/null
+++ b/src/Components/WelcomeModal/WelcomeModalStore.ts
@@ -0,0 +1,34 @@
+import {defineStore} from "pinia";
+import {LocalStorageApi} from "../../v1/utils/LocalStorageApi";
+
+export interface WelcomeModalStore {
+    shouldShowModal: boolean;
+    doNotShowAgain: boolean;
+}
+
+const serializeConfigToLocalStorage = (store: WelcomeModalStore) => {
+    LocalStorageApi.storeDoNotShowWelcomeFlag(store.doNotShowAgain);
+};
+
+export const useWelcomeModalStore = defineStore("WelcomeModalStore", {
+    state: (): WelcomeModalStore => {
+        const doNotShowAgain = LocalStorageApi.getDoNotShowWelcomeFlag();
+        return {
+            shouldShowModal: doNotShowAgain,
+            doNotShowAgain: doNotShowAgain
+        };
+    },
+    actions: {
+        open() {
+            this.shouldShowModal = true;
+        },
+        close() {
+            this.shouldShowModal = false;
+        },
+        closeWithDoNotShow() {
+            this.shouldShowModal = false;
+            this.doNotShowAgain = true;
+            serializeConfigToLocalStorage(this);
+        },
+    }
+});
diff --git a/src/v1/utils/Compilation/CompilationError.ts b/src/DataManipulation/CompilationModule/CompilationError.ts
similarity index 100%
rename from src/v1/utils/Compilation/CompilationError.ts
rename to src/DataManipulation/CompilationModule/CompilationError.ts
diff --git a/src/DataManipulation/CompilationModule/CompilerService.ts b/src/DataManipulation/CompilationModule/CompilerService.ts
new file mode 100644
index 00000000..4b0b99d3
--- /dev/null
+++ b/src/DataManipulation/CompilationModule/CompilerService.ts
@@ -0,0 +1,150 @@
+import {IYamlImporter, JsImporter, YamlFileInfo} from "./JsImporter";
+import {IFsItem} from "../../v1/FileSystems/FileSystemsTypes";
+import {performanceHelper} from "../../v1/utils/PerformanceHelper";
+import {SchemaUtils} from "./SchemaUtils";
+import KaitaiStructCompiler from "kaitai-struct-compiler";
+import {CompilationError} from "./CompilationError";
+import {YamlParser} from "./YamlParser";
+import {IKsyTypes} from "../ParsingModule/CodeExecution/Types";
+import {StringUtils} from "../../v1/utils/Misc/StringUtils";
+import IKsyFile = KsySchema.IKsyFile;
+
+export interface KaitaiCompilationResult {
+    [fileName: string]: string;
+}
+
+export interface CompilationTarget {
+    result: KaitaiCompilationResult;
+    jsMainClassName: string;
+    ksySchema: KsySchema.IKsyFile;
+    ksyTypes: IKsyTypes;
+}
+
+export interface ReleaseAndDebugTargets {
+    debug: KaitaiCompilationResult;
+    release: KaitaiCompilationResult;
+    jsMainClassName: string;
+    ksySchema: KsySchema.IKsyFile;
+    ksyTypes: IKsyTypes;
+}
+
+export class CompilerService {
+    async compileSingleTargetFsWrapper(srcYamlFsItem: IFsItem, yamlContent: string, targetLanguage: string, isDebug: boolean): Promise<CompilationTarget> {
+        const initialYaml: YamlFileInfo = {storeId: srcYamlFsItem.fsType, fileContent: yamlContent, filePath: srcYamlFsItem.fn};
+        return this.compileSingleTarget(initialYaml, targetLanguage, isDebug);
+
+    }
+
+    async compileDebugAndReleaseTargetsWrapper(srcYamlFsItem: IFsItem, yamlContent: string, targetLanguage: string): Promise<ReleaseAndDebugTargets> {
+        const initialYaml: YamlFileInfo = {storeId: srcYamlFsItem.fsType, fileContent: yamlContent, filePath: srcYamlFsItem.fn};
+        return this.compileDebugAndReleaseTargets(initialYaml, targetLanguage);
+    }
+
+    async compileSingleTarget(initialYaml: YamlFileInfo, targetLanguage: string, isDebug: boolean): Promise<CompilationTarget> {
+        try {
+            if (targetLanguage === "json") {
+                return this.getJsonCompilationTargetResponse(initialYaml);
+            }
+
+            const compilerSchema = this.prepareMainFileSchema(initialYaml);
+            const jsImporter = new JsImporter(initialYaml);
+            const compilationTarget = await this._compileDebugOrRelease(targetLanguage, compilerSchema, jsImporter, isDebug);
+            const {schema, types} = SchemaUtils.prepareSchemaAndCombinedKsyTypes(initialYaml, jsImporter.getFilesLoadedUsingImporter());
+
+
+            return {
+                result: compilationTarget,
+                ksySchema: schema,
+                jsMainClassName: this.getJsMainClassNameFromSchema(schema),
+                ksyTypes: types
+            };
+        } catch (ex) {
+            return Promise.reject(ex);
+        }
+    }
+
+    async compileDebugAndReleaseTargets(initialYaml: YamlFileInfo, targetLanguage: string): Promise<ReleaseAndDebugTargets> {
+        try {
+            if (targetLanguage === "json") {
+                return this.getJsonReleaseAndDebugTargets(initialYaml);
+            }
+            const compilerSchema = this.prepareMainFileSchema(initialYaml);
+            const jsImporter = new JsImporter(initialYaml);
+            const [releaseTarget, debugTarget] = await this._compileDebugAndRelease(targetLanguage, compilerSchema, jsImporter);
+            const {schema, types} = SchemaUtils.prepareSchemaAndCombinedKsyTypes(initialYaml, jsImporter.getFilesLoadedUsingImporter());
+
+            return {
+                debug: debugTarget,
+                release: releaseTarget,
+                jsMainClassName: this.getJsMainClassNameFromSchema(schema),
+                ksySchema: schema,
+                ksyTypes: types
+            };
+        } catch (ex) {
+            return Promise.reject(ex);
+        }
+    }
+
+
+    prepareMainFileSchema(yamlInfo: YamlFileInfo) {
+        try {
+            const perfYamlParse = performanceHelper.measureAction("[YAML_PARSE]");
+            let compilerSchema = YamlParser.parseIKsyFile(yamlInfo);
+            perfYamlParse.done();
+            return compilerSchema;
+        } catch (ex) {
+            throw new CompilationError("yaml", ex);
+        }
+    }
+
+    private async _compileDebugAndRelease(targetLanguage: string, compilerSchema: IKsyFile, jsImporter: IYamlImporter): Promise<KaitaiCompilationResult[]> {
+        try {
+            const perfCompile = performanceHelper.measureAction("[KSY_COMPILE][RELEASE+DEBUG]");
+            const debug = KaitaiStructCompiler.compile(targetLanguage, compilerSchema, jsImporter, true);
+            const release = KaitaiStructCompiler.compile(targetLanguage, compilerSchema, jsImporter, false);
+            return perfCompile.done(Promise.all([release, debug]));
+        } catch (ex) {
+            throw new CompilationError("kaitai", ex);
+        }
+    }
+
+    private async _compileDebugOrRelease(
+        targetLanguage: string, compilerSchema: IKsyFile, jsImporter: IYamlImporter, isDebug: boolean
+    ): Promise<KaitaiCompilationResult> {
+        try {
+            const releaseOrDebugLabel = isDebug ? "DEBUG" : "RELEASE";
+            const perfCompile = performanceHelper.measureAction(`[KSY_COMPILE][${releaseOrDebugLabel}]`);
+            const compiled = KaitaiStructCompiler.compile(targetLanguage, compilerSchema, jsImporter, isDebug);
+            return perfCompile.done(Promise.resolve(compiled));
+        } catch (ex) {
+            throw new CompilationError("kaitai", ex);
+        }
+    }
+
+    private getJsonCompilationTargetResponse(initialYaml: YamlFileInfo): Promise<CompilationTarget> {
+        const {schema, types} = SchemaUtils.getTypesAndSchemaFromSingleFile(initialYaml);
+
+        return Promise.resolve({
+            result: {},
+            jsMainClassName: this.getJsMainClassNameFromSchema(schema),
+            ksySchema: schema,
+            ksyTypes: types
+        });
+    }
+
+    private getJsonReleaseAndDebugTargets(initialYaml: YamlFileInfo): Promise<ReleaseAndDebugTargets> {
+        const {schema, types} = SchemaUtils.getTypesAndSchemaFromSingleFile(initialYaml);
+        return Promise.resolve({
+            debug: {},
+            release: {},
+            jsMainClassName: this.getJsMainClassNameFromSchema(schema),
+            ksySchema: schema,
+            ksyTypes: types
+        });
+    }
+
+    private getJsMainClassNameFromSchema(schema: IKsyFile) {
+        return schema.meta.id.split("_").map((x: string) => StringUtils.ucFirst(x)).join("");
+    }
+
+}
\ No newline at end of file
diff --git a/src/DataManipulation/CompilationModule/JsImporter.ts b/src/DataManipulation/CompilationModule/JsImporter.ts
new file mode 100644
index 00000000..5752ff73
--- /dev/null
+++ b/src/DataManipulation/CompilationModule/JsImporter.ts
@@ -0,0 +1,88 @@
+import {fileSystemsManager} from "../../v1/FileSystems/FileSystemManager";
+import {YamlParser} from "./YamlParser";
+import {JsImporterError} from "./JsImporterError";
+import {FileLocationInfo} from "../../Stores/AppStore";
+
+export interface IYamlImporter {
+    importYaml(importFilePath: string, mode: string): Promise<KsySchema.IKsyFile>;
+
+    getFilesLoadedUsingImporter(): YamlFileInfo[];
+}
+
+export interface YamlFileInfo {
+    storeId: string;
+    filePath: string;
+    fileContent: string;
+}
+
+interface FileCache {
+    [name: string]: YamlFileInfo;
+}
+
+export class JsImporter implements IYamlImporter {
+    private importedFilesCache: FileCache = {};
+
+    constructor(private initialYaml: YamlFileInfo) {
+    }
+
+    // noinspection JSUnusedGlobalSymbols
+    /**
+     * Used by KaitaiStructCompiler.compile()
+     */
+    async importYaml(importFilePath: string, mode: string) {
+        const fileLocation = this.deductFileLocation(importFilePath, mode);
+        try {
+            const yamlFile = await this.getFileByLocationWithCache(fileLocation);
+            return YamlParser.parseIKsyFile(yamlFile);
+        } catch (e) {
+            const sourceAppendix = mode === "abs" ? "kaitai.io" : "local storage";
+            const errorMessage = `failed to import spec ${fileLocation.filePath} from ${sourceAppendix}${e.message ? ": " + e.message : ""}`;
+            throw new JsImporterError(errorMessage);
+        }
+    }
+
+    getFilesLoadedUsingImporter(): YamlFileInfo[] {
+        return Object.values(this.importedFilesCache);
+    }
+
+    private deductFileLocation(importFilePath: string, mode: string): FileLocationInfo {
+        let loadFn;
+        let storeId = this.initialYaml.storeId;
+        if (mode === "abs") {
+            loadFn = "formats/" + importFilePath;
+            storeId = "kaitai";
+        } else {
+            var fnParts = this.initialYaml.filePath.split("/");
+            fnParts.pop();
+            loadFn = fnParts.join("/") + "/" + importFilePath;
+
+            if (loadFn.startsWith("/")) {
+                loadFn = loadFn.substring(1);
+            }
+        }
+
+        return {
+            storeId: storeId,
+            filePath: `${loadFn}.ksy`
+        };
+    }
+
+    private async getFileByLocationWithCache(fileLocation: FileLocationInfo): Promise<YamlFileInfo> {
+        const uniqueKey = `${fileLocation.storeId}:${fileLocation.filePath}`;
+        if (this.importedFilesCache.hasOwnProperty(uniqueKey)) return this.importedFilesCache[uniqueKey];
+
+        const newYamlFile = await this.loadYamlWithFileManager(fileLocation);
+        this.importedFilesCache[uniqueKey] = newYamlFile;
+        return newYamlFile;
+
+    }
+
+    private async loadYamlWithFileManager({storeId, filePath}: FileLocationInfo): Promise<YamlFileInfo> {
+        const ksyContent = await fileSystemsManager[storeId].get(filePath) as string;
+        return {
+            storeId: storeId,
+            filePath: filePath,
+            fileContent: ksyContent
+        };
+    }
+}
\ No newline at end of file
diff --git a/src/v1/utils/Compilation/JsImporterError.ts b/src/DataManipulation/CompilationModule/JsImporterError.ts
similarity index 100%
rename from src/v1/utils/Compilation/JsImporterError.ts
rename to src/DataManipulation/CompilationModule/JsImporterError.ts
diff --git a/src/DataManipulation/CompilationModule/SchemaUtils.ts b/src/DataManipulation/CompilationModule/SchemaUtils.ts
new file mode 100644
index 00000000..62e1c9d1
--- /dev/null
+++ b/src/DataManipulation/CompilationModule/SchemaUtils.ts
@@ -0,0 +1,60 @@
+import {StringUtils} from "../../v1/utils/Misc/StringUtils";
+import {IKsyTypes} from "../ParsingModule/CodeExecution/Types";
+import {YamlFileInfo} from "./JsImporter";
+import {YamlParser} from "./YamlParser";
+
+export class SchemaUtils {
+    static prepareSchemaAndCombinedKsyTypes(intialYamlInfo: YamlFileInfo, yamls: YamlFileInfo[]) {
+        const {schema, types} = SchemaUtils.getTypesAndSchemaFromSingleFile(intialYamlInfo);
+
+        const allTypesCombined = yamls.reduce((combinedTypes, currentYaml) => {
+            const typesAndSchema = SchemaUtils.getTypesAndSchemaFromSingleFile(currentYaml);
+            Object.assign(combinedTypes, typesAndSchema.types);
+            return combinedTypes;
+        }, types);
+
+        return {schema: schema, types: allTypesCombined};
+    }
+
+    static getTypesAndSchemaFromSingleFile(importedYaml: YamlFileInfo) {
+        const ksySchema = YamlParser.parseIKsyFile(importedYaml);
+        return {
+            schema: ksySchema,
+            types: SchemaUtils.collectKsyTypes(ksySchema)
+        };
+    }
+
+    static ksyNameToJsName(ksyName: string, isProp: boolean) {
+        return ksyName.split("_")
+            .map((x, i) => i === 0 && isProp ? x : StringUtils.ucFirst(x)).join("");
+    }
+
+    static collectTypes(types: IKsyTypes, parent: KsySchema.IType) {
+        if (parent.types) {
+            parent.typesByJsName = {};
+            Object.keys(parent.types).forEach(name => {
+                const jsName = SchemaUtils.ksyNameToJsName(name, false);
+                parent.typesByJsName[jsName] = types[jsName] = parent.types[name];
+                SchemaUtils.collectTypes(types, parent.types[name]);
+            });
+        }
+
+        if (parent.instances) {
+            parent.instancesByJsName = {};
+            Object.keys(parent.instances).forEach(name => {
+                const jsName = SchemaUtils.ksyNameToJsName(name, true);
+                parent.instancesByJsName[jsName] = parent.instances[name];
+            });
+        }
+    }
+
+    static collectKsyTypes(schema: KsySchema.IKsyFile): IKsyTypes {
+        const types: IKsyTypes = {};
+        SchemaUtils.collectTypes(types, schema);
+
+        const typeName = SchemaUtils.ksyNameToJsName(schema.meta.id, false);
+        types[typeName] = schema;
+        return types;
+    }
+
+}
\ No newline at end of file
diff --git a/src/DataManipulation/CompilationModule/YamlParser.ts b/src/DataManipulation/CompilationModule/YamlParser.ts
new file mode 100644
index 00000000..47da809a
--- /dev/null
+++ b/src/DataManipulation/CompilationModule/YamlParser.ts
@@ -0,0 +1,12 @@
+import * as jsyaml from "js-yaml";
+import {YamlFileInfo} from "./JsImporter";
+
+export class YamlParser {
+    public static parseIKsyFile(yamlInfo: YamlFileInfo): KsySchema.IKsyFile {
+        const options = {
+            schema: jsyaml.CORE_SCHEMA,
+            filename: yamlInfo.filePath,
+        };
+        return jsyaml.load(yamlInfo.fileContent, options);
+    }
+}
\ No newline at end of file
diff --git a/src/v1/Workers/CodeExecution/KaitaiCodeWorker.ts b/src/DataManipulation/ParsingModule/CodeExecution/KaitaiCodeWorker.ts
similarity index 100%
rename from src/v1/Workers/CodeExecution/KaitaiCodeWorker.ts
rename to src/DataManipulation/ParsingModule/CodeExecution/KaitaiCodeWorker.ts
diff --git a/src/v1/Workers/CodeExecution/KaitaiCodeWorkerWrapper.ts b/src/DataManipulation/ParsingModule/CodeExecution/KaitaiCodeWorkerWrapper.ts
similarity index 94%
rename from src/v1/Workers/CodeExecution/KaitaiCodeWorkerWrapper.ts
rename to src/DataManipulation/ParsingModule/CodeExecution/KaitaiCodeWorkerWrapper.ts
index ad6bcf37..bf5ed57a 100644
--- a/src/v1/Workers/CodeExecution/KaitaiCodeWorkerWrapper.ts
+++ b/src/DataManipulation/ParsingModule/CodeExecution/KaitaiCodeWorkerWrapper.ts
@@ -1,4 +1,4 @@
-import {fetchInstance, IParsingOptions, mapObjectToExportedValue} from "../../utils/ExportedValueMappers/ObjectToIExportedValueMapper";
+import {fetchInstance, IParsingOptions, mapObjectToExportedValue} from "../../../v1/utils/ExportedValueMappers/ObjectToIExportedValueMapper";
 import {IExportedValue} from "../../../entities";
 import {WorkerFunctionStack} from "./WorkerFunctionStack";
 import {IWorkerMessage, IWorkerMessageParse} from "./WorkerMessages";
@@ -21,7 +21,7 @@ export class KaitaiCodeWorkerWrapper implements IWorkerApiMethods {
         worker.onmessage = this.onMessageReceive;
     }
 
-    initCodeAction = (sourceCode: string, mainClassName: string, ksyTypes: IKsyTypes): void => {
+    setCodeAction = (sourceCode: string, mainClassName: string, ksyTypes: IKsyTypes): void => {
         this.sourceCode = sourceCode;
         this.mainClass = mainClassName;
         this.ksyTypes = {...ksyTypes};
@@ -31,7 +31,7 @@ export class KaitaiCodeWorkerWrapper implements IWorkerApiMethods {
         this.inputBuffer = inputBuffer;
     };
 
-    reparseAction = (eagerMode: boolean): Promise<IWorkerParsedResponse> => {
+    parseAction = (eagerMode: boolean): Promise<IWorkerParsedResponse> => {
         return new Promise<IWorkerParsedResponse>((resolve, reject) => {
             const digestResponseFromWorkerFn = (response: IWorkerResponseParse) => this.digestResponseFromWorker(response, resolve, reject);
             const msgId = this.stack.pushFunctionToStack(digestResponseFromWorkerFn);
diff --git a/src/v1/Workers/CodeExecution/Types.ts b/src/DataManipulation/ParsingModule/CodeExecution/Types.ts
similarity index 74%
rename from src/v1/Workers/CodeExecution/Types.ts
rename to src/DataManipulation/ParsingModule/CodeExecution/Types.ts
index 335bcde4..7d7527d7 100644
--- a/src/v1/Workers/CodeExecution/Types.ts
+++ b/src/DataManipulation/ParsingModule/CodeExecution/Types.ts
@@ -15,11 +15,11 @@ export interface IKsyTypes {
 }
 
 export interface IWorkerApiMethods {
-    initCodeAction(sourceCode: string, mainClassName: string, ksyTypes: IKsyTypes): void;
+    setCodeAction(sourceCode: string, mainClassName: string, ksyTypes: IKsyTypes): void;
 
     setInputAction(inputBuffer: ArrayBuffer): void;
 
-    reparseAction(eagerMode: boolean): Promise<IWorkerParsedResponse>;
+    parseAction(eagerMode: boolean): Promise<IWorkerParsedResponse>;
 
     getPropertyByPathAction(path: string[]): Promise<IExportedValue>;
 }
diff --git a/src/v1/Workers/CodeExecution/WorkerFunctionStack.ts b/src/DataManipulation/ParsingModule/CodeExecution/WorkerFunctionStack.ts
similarity index 93%
rename from src/v1/Workers/CodeExecution/WorkerFunctionStack.ts
rename to src/DataManipulation/ParsingModule/CodeExecution/WorkerFunctionStack.ts
index 5f1ad6ed..a7277347 100644
--- a/src/v1/Workers/CodeExecution/WorkerFunctionStack.ts
+++ b/src/DataManipulation/ParsingModule/CodeExecution/WorkerFunctionStack.ts
@@ -1,4 +1,3 @@
-import {IWorkerMessage} from "./WorkerMessages";
 import {IWorkerResponse, IWorkerResponseParse} from "./WorkerResponses";
 
 export class WorkerFunctionStack {
diff --git a/src/v1/Workers/CodeExecution/WorkerMessages.ts b/src/DataManipulation/ParsingModule/CodeExecution/WorkerMessages.ts
similarity index 100%
rename from src/v1/Workers/CodeExecution/WorkerMessages.ts
rename to src/DataManipulation/ParsingModule/CodeExecution/WorkerMessages.ts
diff --git a/src/v1/Workers/CodeExecution/WorkerResponses.ts b/src/DataManipulation/ParsingModule/CodeExecution/WorkerResponses.ts
similarity index 100%
rename from src/v1/Workers/CodeExecution/WorkerResponses.ts
rename to src/DataManipulation/ParsingModule/CodeExecution/WorkerResponses.ts
diff --git a/src/v1/Workers/WorkerApi.ts b/src/DataManipulation/ParsingModule/ParseWorkerApi.ts
similarity index 91%
rename from src/v1/Workers/WorkerApi.ts
rename to src/DataManipulation/ParsingModule/ParseWorkerApi.ts
index ccfe56e6..7f17963e 100644
--- a/src/v1/Workers/WorkerApi.ts
+++ b/src/DataManipulation/ParsingModule/ParseWorkerApi.ts
@@ -17,8 +17,8 @@ const initScriptsMessage: IWorkerMessageInit = {
 workerWrapper.sendMessageToWorker(initScriptsMessage);
 
 export const codeExecutionWorkerApi: IWorkerApiMethods = {
-    initCodeAction: workerWrapper.initCodeAction,
+    setCodeAction: workerWrapper.setCodeAction,
     setInputAction: workerWrapper.setInputAction,
-    reparseAction: workerWrapper.reparseAction,
+    parseAction: workerWrapper.parseAction,
     getPropertyByPathAction: workerWrapper.getPropertyByPathAction
 };
\ No newline at end of file
diff --git a/src/FaviconSource.svg b/src/FaviconSource.svg
new file mode 100644
index 00000000..d55f8d4b
--- /dev/null
+++ b/src/FaviconSource.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="48"
+   height="48"
+   viewBox="0 0 48 48"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   inkscape:export-filename="favicon.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   sodipodi:docname="FaviconSource.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:zoom="5.8778251"
+     inkscape:cx="20.160518"
+     inkscape:cy="22.967679"
+     inkscape:window-width="1920"
+     inkscape:window-height="1043"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" /><defs
+     id="defs1" /><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"><rect
+       style="fill:#35495e;fill-opacity:1"
+       id="rect1"
+       width="48"
+       height="48"
+       x="0"
+       y="0"
+       ry="9.6476212" /><path
+       style="fill:#41b883;fill-opacity:1"
+       d="m 25.362506,41.875245 c -1.259696,-1.770453 -2.130195,-3.379168 -1.934442,-3.574921 0.195753,-0.195753 1.799062,0.120368 3.56291,0.70249 2.824956,0.932319 3.363806,0.863948 4.523326,-0.573934 0.723982,-0.897786 2.081603,-3.265083 3.016935,-5.26066 0.935332,-1.995577 2.154111,-6.677495 2.708399,-10.404263 0.554288,-3.726769 0.807988,-6.975751 0.563777,-7.219961 -0.24421,-0.244211 -3.055803,0.21204 -6.247984,1.01389 l -5.803966,1.45791 -2.689651,6.460832 c -1.479308,3.553457 -2.689651,6.8328 -2.689651,7.287428 0,0.454628 -1.556744,1.8568 -3.45943,3.115938 -1.902687,1.259139 -5.774744,3.743103 -8.604571,5.519921 L 3.1630167,43.630493 9.9774,36.683437 c 5.45988,-5.566181 7.167302,-7.974694 8.589881,-12.117007 l 1.775497,-5.169951 -3.136801,0.588467 c -1.72524,0.323657 -3.670044,0.793092 -4.321785,1.043188 -0.693703,0.266199 -2.121559,-0.923574 -3.444033,-2.869769 -1.242477,-1.82847 -2.1096656,-3.473875 -1.9270848,-3.656456 0.1825808,-0.182581 1.8598818,0.116259 3.7273348,0.664088 2.167165,0.635752 4.66943,0.723994 6.91751,0.243944 2.694308,-0.575335 3.718927,-1.311669 4.3594,-3.132846 0.626019,-1.780074 0.455626,-3.1810342 -0.675351,-5.5527192 L 20.329355,3.5523944 23.218947,4.166695 c 1.589276,0.3378653 3.612489,1.2526136 4.496029,2.0327741 1.207785,1.0664671 1.47081,2.141422 1.059907,4.3317259 l -0.54653,2.913252 3.793954,-0.555822 c 2.086675,-0.305702 5.371722,-0.886882 7.300105,-1.29151 1.928383,-0.404629 3.584019,-0.65782 3.679192,-0.562648 0.09517,0.09517 -0.557554,4.240659 -1.450503,9.212192 -0.892949,4.971533 -2.061821,10.367144 -2.597494,11.990247 -0.535672,1.623103 -1.935662,4.254625 -3.111088,5.847825 -1.175426,1.593201 -3.498955,3.822107 -5.163397,4.953125 l -3.026259,2.056396 z"
+       id="path1" /></g></svg>
diff --git a/src/GlobalActions/CompileGrammar.ts b/src/GlobalActions/CompileGrammar.ts
new file mode 100644
index 00000000..16bf0abd
--- /dev/null
+++ b/src/GlobalActions/CompileGrammar.ts
@@ -0,0 +1,14 @@
+import {YamlFileInfo} from "../DataManipulation/CompilationModule/JsImporter";
+import {useAceEditorStore} from "../Stores/AceEditorStore";
+import {CompilerService} from "../DataManipulation/CompilationModule/CompilerService";
+import {codeExecutionWorkerApi} from "../DataManipulation/ParsingModule/ParseWorkerApi";
+
+export const compileGrammarAction = async (yamlInfo: YamlFileInfo) => {
+    const currentEditorStore = useAceEditorStore();
+    const compiledGrammar = await new CompilerService().compileDebugAndReleaseTargets(yamlInfo, "javascript");
+    const debugCode = Object.values(compiledGrammar.debug).join("");
+    const releaseCode = Object.values(compiledGrammar.release).join("");
+    currentEditorStore?.releaseCodeEditor.setValue(releaseCode, -1);
+    currentEditorStore?.debugCodeEditor.setValue(debugCode, -1);
+    codeExecutionWorkerApi.setCodeAction(debugCode, compiledGrammar.jsMainClassName, compiledGrammar.ksyTypes);
+};
\ No newline at end of file
diff --git a/src/v1/utils/ExportToJson.ts b/src/GlobalActions/ExportToJson.ts
similarity index 50%
rename from src/v1/utils/ExportToJson.ts
rename to src/GlobalActions/ExportToJson.ts
index 42378abf..dbf6d447 100644
--- a/src/v1/utils/ExportToJson.ts
+++ b/src/GlobalActions/ExportToJson.ts
@@ -1,9 +1,9 @@
-import {codeExecutionWorkerApi} from "../Workers/WorkerApi";
-import {mapToGenericObject} from "./ExportedValueMappers";
-import {IExportedValue} from "../../entities";
-import {IWorkerParsedResponse} from "../Workers/CodeExecution/Types";
+import {codeExecutionWorkerApi} from "../DataManipulation/ParsingModule/ParseWorkerApi";
+import {mapToGenericObject} from "../v1/utils/ExportedValueMappers";
+import {IExportedValue} from "../entities";
+import {IWorkerParsedResponse} from "../DataManipulation/ParsingModule/CodeExecution/Types";
 
-export async function exportToJson(useHex: boolean = false): Promise<string> {
+export const exportToJson = async (useHexForNumbers: boolean = false): Promise<string> => {
     const overrideDefaultNumbersWithHex = (key: string, value: any) => {
         const isPropertyNumber = typeof value === "number";
         return isPropertyNumber
@@ -18,11 +18,11 @@ export async function exportToJson(useHex: boolean = false): Promise<string> {
 
     const mapResultToJson = (objectToExport: IExportedValue) => {
         const genericObject = mapToGenericObject(objectToExport);
-        const hexReplacer = useHex ? overrideDefaultNumbersWithHex : null;
+        const hexReplacer = useHexForNumbers ? overrideDefaultNumbersWithHex : null;
         return JSON.stringify(genericObject, hexReplacer, 2);
     };
 
-    let response = await codeExecutionWorkerApi.reparseAction(true);
-    let objectToExport: any = await getResultOrThrowError(response);
-    return mapResultToJson(objectToExport);
-}
+    return await codeExecutionWorkerApi.parseAction(true)
+        .then(getResultOrThrowError)
+        .then(mapResultToJson);
+};
diff --git a/src/GlobalActions/LoadBinaryFile.ts b/src/GlobalActions/LoadBinaryFile.ts
new file mode 100644
index 00000000..4ed49b40
--- /dev/null
+++ b/src/GlobalActions/LoadBinaryFile.ts
@@ -0,0 +1,11 @@
+import {FileLocationInfo} from "../Stores/AppStore";
+import {fileSystemsManager} from "../v1/FileSystems/FileSystemManager";
+import {codeExecutionWorkerApi} from "../DataManipulation/ParsingModule/ParseWorkerApi";
+import {useCurrentBinaryFileStore} from "../Stores/CurrentBinaryFileStore";
+
+export const loadBinaryFileAction = async (binaryFileLocation: FileLocationInfo) => {
+    const store = useCurrentBinaryFileStore();
+    const fileContent = await fileSystemsManager[binaryFileLocation.storeId].get(binaryFileLocation.filePath) as ArrayBuffer;
+    store.newBinaryFileSelected(binaryFileLocation.filePath, fileContent, "SOURCE_REPARSE");
+    codeExecutionWorkerApi.setInputAction(fileContent);
+};
\ No newline at end of file
diff --git a/src/GlobalActions/LoadKsyFile.ts b/src/GlobalActions/LoadKsyFile.ts
new file mode 100644
index 00000000..8b6298ef
--- /dev/null
+++ b/src/GlobalActions/LoadKsyFile.ts
@@ -0,0 +1,18 @@
+import {FileLocationInfo} from "../Stores/AppStore";
+import {fileSystemsManager} from "../v1/FileSystems/FileSystemManager";
+import {YamlFileInfo} from "../DataManipulation/CompilationModule/JsImporter";
+import {useAceEditorStore} from "../Stores/AceEditorStore";
+import {compileGrammarAction} from "./CompileGrammar";
+
+export const loadKsyFileAction = async (ksyFileLocation: FileLocationInfo) => {
+    const content = await fileSystemsManager[ksyFileLocation.storeId].get(ksyFileLocation.filePath) as string;
+    const yamlInfo: YamlFileInfo = {
+        storeId: ksyFileLocation.storeId,
+        filePath: ksyFileLocation.filePath,
+        fileContent: content
+    };
+
+    const aceEditorStore = useAceEditorStore();
+    aceEditorStore?.mainKsyEditor.setValue(yamlInfo.fileContent, -1);
+    await compileGrammarAction(yamlInfo);
+};
\ No newline at end of file
diff --git a/src/GlobalActions/MainEditorOnChange.ts b/src/GlobalActions/MainEditorOnChange.ts
new file mode 100644
index 00000000..4b897868
--- /dev/null
+++ b/src/GlobalActions/MainEditorOnChange.ts
@@ -0,0 +1,37 @@
+import {useAppStore} from "../Stores/AppStore";
+import {Ace} from "ace-builds";
+import {YamlFileInfo} from "../DataManipulation/CompilationModule/JsImporter";
+import {compileGrammarAction} from "./CompileGrammar";
+import {parseAction} from "./ParseAction";
+import {fileSystemsManager} from "../v1/FileSystems/FileSystemManager";
+import {FILE_SYSTEM_TYPE_KAITAI} from "../v1/FileSystems/FileSystemsTypes";
+
+export const mainEditorOnChange = async (change: Ace.Delta, editorContent: string) => {
+    const contentDidNotChange = change.lines.join("\n") === editorContent;
+    if (contentDidNotChange) return;
+
+    const appStore = useAppStore();
+    const yamlInfo: YamlFileInfo = {
+        storeId: appStore.selectedKsyInfo.storeId,
+        filePath: appStore.selectedKsyInfo.filePath,
+        fileContent: editorContent
+    };
+    if (appStore.selectedKsyInfo.storeId === FILE_SYSTEM_TYPE_KAITAI) {
+        // appStore.updateSelectedKsyFile();
+    }
+    await fileSystemsManager.local.put(yamlInfo.filePath, editorContent);
+    await compileGrammarAction(yamlInfo);
+    await parseAction();
+};
+
+export const mainEditorRecompile = async (editor: Ace.Editor) => {
+    const appStore = useAppStore();
+    const editorValue = editor.getValue();
+
+    const yamlInfo: YamlFileInfo = {
+        storeId: appStore.selectedKsyInfo.storeId,
+        filePath: appStore.selectedKsyInfo.filePath,
+        fileContent: editorValue
+    };
+    compileGrammarAction(yamlInfo);
+};
\ No newline at end of file
diff --git a/src/GlobalActions/ParseAction.ts b/src/GlobalActions/ParseAction.ts
new file mode 100644
index 00000000..ee51a7c9
--- /dev/null
+++ b/src/GlobalActions/ParseAction.ts
@@ -0,0 +1,10 @@
+import {useCurrentBinaryFileStore} from "../Stores/CurrentBinaryFileStore";
+import {useIdeSettingsStore} from "../Stores/IdeSettingsStore";
+import {codeExecutionWorkerApi} from "../DataManipulation/ParsingModule/ParseWorkerApi";
+
+export const parseAction = async () => {
+    const store = useCurrentBinaryFileStore();
+    const ideSettingsStore = useIdeSettingsStore();
+    const {resultObject: exportedRoot, error: parseError} = await codeExecutionWorkerApi.parseAction(ideSettingsStore.eagerMode);
+    store.updateParsedFile(exportedRoot);
+};
\ No newline at end of file
diff --git a/src/GlobalActions/UploadFiles.ts b/src/GlobalActions/UploadFiles.ts
new file mode 100644
index 00000000..65660cd9
--- /dev/null
+++ b/src/GlobalActions/UploadFiles.ts
@@ -0,0 +1,26 @@
+import {IFileProcessItem} from "../v1/utils/Files/Types";
+import {fileSystemsManager} from "../v1/FileSystems/FileSystemManager";
+
+const isKsyFile = (fileName: string) => {
+    return fileName.toLowerCase().endsWith(".ksy");
+};
+
+const processKsyFile = async (file: IFileProcessItem) => {
+    const content = await file.read("text");
+    return fileSystemsManager.local.put(file.file.name, content);
+};
+
+const processBinFile = async (file: IFileProcessItem) => {
+    const content = await file.read("arrayBuffer");
+    return fileSystemsManager.local.put(file.file.name, content);
+};
+const processFile = (file: IFileProcessItem) => {
+    return isKsyFile(file.file.name)
+        ? processKsyFile(file)
+        : processBinFile(file);
+};
+
+
+export const processUploadedFiles = (files: IFileProcessItem[]) => {
+    return Promise.all(files.map(processFile));
+};
\ No newline at end of file
diff --git a/src/Stores/AceEditorStore.ts b/src/Stores/AceEditorStore.ts
new file mode 100644
index 00000000..87c4ce9d
--- /dev/null
+++ b/src/Stores/AceEditorStore.ts
@@ -0,0 +1,25 @@
+import {defineStore} from "pinia";
+import {Ace} from "ace-builds";
+
+export interface KsyEditorsInfo {
+    mainKsyEditor?: Ace.Editor;
+    debugCodeEditor?: Ace.Editor;
+    releaseCodeEditor?: Ace.Editor;
+}
+
+export const useAceEditorStore = defineStore("AceEditorStore", {
+    state: (): KsyEditorsInfo => {
+        return {};
+    },
+    actions: {
+        setKaitaiKsyEditor(newEditor: Ace.Editor) {
+            this.mainKsyEditor = newEditor;
+        },
+        setDebugCodeEditor(newEditor: Ace.Editor) {
+            this.debugCodeEditor = newEditor;
+        },
+        setReleaseCodeEditor(newEditor: Ace.Editor) {
+            this.releaseCodeEditor = newEditor;
+        }
+    }
+});
\ No newline at end of file
diff --git a/src/Stores/AppStore.ts b/src/Stores/AppStore.ts
new file mode 100644
index 00000000..3191e6b8
--- /dev/null
+++ b/src/Stores/AppStore.ts
@@ -0,0 +1,41 @@
+import {defineStore} from "pinia";
+
+export interface FileLocationInfo {
+    storeId: string;
+    filePath: string;
+}
+
+export interface AppStore {
+    selectedKsyInfo: FileLocationInfo;
+    selectedBinaryInfo: FileLocationInfo;
+}
+
+const defaultKsyInfo: FileLocationInfo = {
+    storeId: "kaitai",
+    filePath: "formats/archive/zip.ksy"
+};
+
+
+const defaultBinaryInfo: FileLocationInfo = {
+    storeId: "kaitai",
+    filePath: "samples/sample1.zip"
+};
+
+export const useAppStore = defineStore("AppStore", {
+
+    state: (): AppStore => {
+        return JSON.parse(localStorage.getItem("AppStore")) || {
+            selectedKsyInfo: defaultKsyInfo,
+            selectedBinaryInfo: defaultBinaryInfo
+        };
+    },
+    actions: {
+        updateSelectedBinaryFile(info: FileLocationInfo) {
+            this.selectedBinaryInfo = info;
+        },
+
+        updateSelectedKsyFile(info: FileLocationInfo) {
+            this.selectedKsyInfo = info;
+        },
+    }
+});
\ No newline at end of file
diff --git a/src/extensions.ts b/src/extensions.ts
deleted file mode 100644
index 9fa02573..00000000
--- a/src/extensions.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// tslint:disable-next-line
-interface Array<T> {
-    remove(item: T): void;
-}
-
-/*
-* This method needs to be initialized, otherwise JSTree has some internal problem.
-* Problem is not thrown or logged to the console, but "Local storage" fileTree stops loading on page refresh.
-* What is more, is that this function is probably never called since console log is not executed.
-* What a freaking joke...
-* */
-if (!Array.prototype.remove) {
-    Array.prototype.remove = function <T>(item: T) {
-        console.log("Why are we still here? Just to suffer");
-    };
-}
diff --git a/src/v1/FileSystems/FileSystemHelper.ts b/src/v1/FileSystems/FileSystemHelper.ts
index 8b9d4d16..7eca23ed 100644
--- a/src/v1/FileSystems/FileSystemHelper.ts
+++ b/src/v1/FileSystems/FileSystemHelper.ts
@@ -1,4 +1,4 @@
-import {FILE_SYSTEM_TYPE_LOCAL, IFsItem, IFsItemSummary, IJSTreeNodeHelper, ITEM_MODE_DIRECTORY} from "./FileSystemsTypes";
+import {FILE_SYSTEM_TYPE_LOCAL, IFsItem, IFsItemSummary, ITEM_MODE_DIRECTORY} from "./FileSystemsTypes";
 
 
 export const findOrCreateFsPath = (root: IFsItem, filePath: string) => {
@@ -22,22 +22,6 @@ export const findOrCreateFsPath = (root: IFsItem, filePath: string) => {
     return currNode;
 };
 
-
-export const mapToJSTreeNode = (fsItem: IFsItem, fn: string): IJSTreeNodeHelper => {
-    const isFolder = fsItem.type === ITEM_MODE_DIRECTORY;
-    return {
-        text: fn,
-        icon: "glyphicon glyphicon-" + (isFolder ? "folder-open" : fn.endsWith(".ksy") ? "list-alt" : "file"),
-        children: isFolder ? mapToJSTreeNodes(fsItem) : null,
-        data: fsItem
-    };
-};
-
-export const mapToJSTreeNodes = (fsItem: IFsItem): IJSTreeNodeHelper[] => {
-    return Object.keys(fsItem.children || [])
-        .map(k => mapToJSTreeNode(fsItem.children[k], k));
-};
-
 export const getSummaryIfPresent = (fsItem?: IFsItem): IFsItemSummary => {
     return fsItem
         ? getSummary(fsItem)
diff --git a/src/v1/FileSystems/FileSystemManager.ts b/src/v1/FileSystems/FileSystemManager.ts
index b36bd573..f5b13436 100644
--- a/src/v1/FileSystems/FileSystemManager.ts
+++ b/src/v1/FileSystems/FileSystemManager.ts
@@ -1,11 +1,26 @@
-import {LocalStorageFileSystem} from "./LocalStorageFileSystem";
+import {OldLocalStorageFileSystem} from "./OldLocalStorageFileSystem";
 import {initKaitaiFs} from "./KaitaiFileSystem";
-import {IFileSystemManager} from "./FileSystemsTypes";
+import {FILE_SYSTEM_TYPE_LOCAL, IFileSystemManager, IFsItem, ITEM_MODE_DIRECTORY} from "./FileSystemsTypes";
+import {LocalForageWrapper} from "../utils/LocalForageWrapper";
+const defaultItem: IFsItem = {
+    fsType: FILE_SYSTEM_TYPE_LOCAL,
+    type: ITEM_MODE_DIRECTORY,
+    children: {},
+    fn: "Local storage"
+};
+
 
-const localFs = new LocalStorageFileSystem("fs");
 const kaitaiFs = initKaitaiFs();
 
 export var fileSystemsManager: IFileSystemManager = {
-    local: localFs,
+    local: new OldLocalStorageFileSystem(defaultItem),
     kaitai: kaitaiFs
-};
\ No newline at end of file
+};
+
+LocalForageWrapper.getFsItem(`fs_files`)
+    .then(storedItem => {
+        if (storedItem) {
+            storedItem.fn = "Local storage";
+            fileSystemsManager.local = new OldLocalStorageFileSystem(storedItem || defaultItem);
+        }
+    });
diff --git a/src/v1/FileSystems/FileSystemsTypes.ts b/src/v1/FileSystems/FileSystemsTypes.ts
index 8831ab32..b1a19b9f 100644
--- a/src/v1/FileSystems/FileSystemsTypes.ts
+++ b/src/v1/FileSystems/FileSystemsTypes.ts
@@ -1,14 +1,16 @@
 import {KaitaiFileSystem} from "./KaitaiFileSystem";
-import {LocalStorageFileSystem} from "./LocalStorageFileSystem";
+import {OldLocalStorageFileSystem} from "./OldLocalStorageFileSystem";
 
 export const FILE_SYSTEM_TYPE_LOCAL = "local";
 export const FILE_SYSTEM_TYPE_KAITAI = "kaitai";
 export const ITEM_MODE_FILE = "file";
 export const ITEM_MODE_DIRECTORY = "folder";
 
+export type FsItemMode = typeof ITEM_MODE_FILE | typeof ITEM_MODE_DIRECTORY;
+export type FsItemType = typeof FILE_SYSTEM_TYPE_LOCAL | typeof FILE_SYSTEM_TYPE_KAITAI;
 export interface IFsItem {
-    fsType: typeof FILE_SYSTEM_TYPE_LOCAL | typeof FILE_SYSTEM_TYPE_KAITAI;
-    type: typeof ITEM_MODE_FILE | typeof ITEM_MODE_DIRECTORY;
+    fsType: FsItemType;
+    type: FsItemMode;
     fn?: string;
     children?: { [key: string]: IFsItem; };
 }
@@ -22,7 +24,9 @@ export interface IFsItemSummary {
 export interface IFileSystem {
     setRootNode(newRoot: IFsItem): Promise<IFsItem>;
 
-    getRootNode(): Promise<IFsItem>;
+    getRootNode(): IFsItem | undefined;
+
+    getRootNodeAsync(): Promise<IFsItem>;
 
     get(fn: string): Promise<string | ArrayBuffer>;
 
@@ -30,15 +34,6 @@ export interface IFileSystem {
 }
 
 export interface IFileSystemManager {
-    local: LocalStorageFileSystem;
+    local: OldLocalStorageFileSystem;
     kaitai: KaitaiFileSystem;
 }
-
-export interface IJSTreeNodeHelper {
-    id?: string;
-    text: string;
-    icon: string;
-    state?: { opened: boolean; };
-    children?: IJSTreeNodeHelper[];
-    data?: IFsItem;
-}
\ No newline at end of file
diff --git a/src/v1/FileSystems/KaitaiFileSystem.ts b/src/v1/FileSystems/KaitaiFileSystem.ts
index f350305b..9f1fb1de 100644
--- a/src/v1/FileSystems/KaitaiFileSystem.ts
+++ b/src/v1/FileSystems/KaitaiFileSystem.ts
@@ -1,5 +1,5 @@
-import {findOrCreateFsPath, mapToJSTreeNodes} from "./FileSystemHelper";
-import {FILE_SYSTEM_TYPE_KAITAI, IFileSystem, IFsItem, IJSTreeNodeHelper} from "./FileSystemsTypes";
+import {findOrCreateFsPath} from "./FileSystemHelper";
+import {FILE_SYSTEM_TYPE_KAITAI, IFileSystem, IFsItem, ITEM_MODE_DIRECTORY} from "./FileSystemsTypes";
 import {FileActionsWrapper} from "../utils/Files/FileActionsWrapper";
 import {kaitaiFsFiles} from "../../kaitaiFsFiles";
 
@@ -9,12 +9,17 @@ export class KaitaiFileSystem implements IFileSystem {
     }
 
     getRootNode() {
+        return this.files;
+    }
+
+    getRootNodeAsync() {
         return Promise.resolve(this.files);
     }
 
     setRootNode(newRoot: IFsItem): Promise<IFsItem> {
         throw "KaitaiFileSystem.setRootNode is not implemented";
     }
+
     get(fn: string): Promise<string | ArrayBuffer> {
         if (fn.toLowerCase().endsWith(".ksy"))
             return fetch(fn)
@@ -45,39 +50,8 @@ export class KaitaiFileSystem implements IFileSystem {
     }
 }
 
-export const initKaitaiFsTreeData = (kaitaiFs: KaitaiFileSystem): IJSTreeNodeHelper => {
-    const root = kaitaiFs.files;
-
-    if (!root.children.hasOwnProperty("formats") || !root.children.hasOwnProperty("samples")) {
-        console.error("'formats' node is missing from js/kaitaiFsFiles.js, are you sure 'formats' git submodule is initialized? Try run 'git submodule init; git submodule update --recursive; ./genKaitaiFsFiles.py'!");
-        root.children["formats"] = {};
-        root.children["samples"] = {};
-    }
-
-
-    return {
-        text: "kaitai.io",
-        icon: "glyphicon glyphicon-cloud",
-        state: {opened: true},
-        children: [
-            {
-                text: "formats",
-                icon: "glyphicon glyphicon-book",
-                children: mapToJSTreeNodes(root.children["formats"]),
-                state: {opened: true}
-            },
-            {
-                text: "samples",
-                icon: "glyphicon glyphicon-cd",
-                children: mapToJSTreeNodes(root.children["samples"]),
-                state: {opened: true}
-            },
-        ]
-    };
-};
-
 export const initKaitaiFs = () => {
-    const kaitaiRoot = <IFsItem>{fsType: FILE_SYSTEM_TYPE_KAITAI, children: {}};
+    const kaitaiRoot = <IFsItem>{fsType: FILE_SYSTEM_TYPE_KAITAI, children: {}, fn: "kaitai.io", type: ITEM_MODE_DIRECTORY};
     (kaitaiFsFiles || []).forEach(fn => findOrCreateFsPath(kaitaiRoot, fn));
     return new KaitaiFileSystem(kaitaiRoot);
 };
diff --git a/src/v1/FileSystems/LocalStorageFileSystem.ts b/src/v1/FileSystems/OldLocalStorageFileSystem.ts
similarity index 52%
rename from src/v1/FileSystems/LocalStorageFileSystem.ts
rename to src/v1/FileSystems/OldLocalStorageFileSystem.ts
index 4d267be0..36cb984b 100644
--- a/src/v1/FileSystems/LocalStorageFileSystem.ts
+++ b/src/v1/FileSystems/OldLocalStorageFileSystem.ts
@@ -1,32 +1,31 @@
 import {findOrCreateFsPath} from "./FileSystemHelper";
-import {FILE_SYSTEM_TYPE_LOCAL, IFileSystem, IFsItem, IJSTreeNodeHelper, ITEM_MODE_DIRECTORY} from "./FileSystemsTypes";
+import {IFileSystem, IFsItem} from "./FileSystemsTypes";
 import {LocalForageWrapper} from "../utils/LocalForageWrapper";
 
-export class LocalStorageFileSystem implements IFileSystem {
-    constructor(public prefix: string) {
+export class OldLocalStorageFileSystem implements IFileSystem {
+    constructor(root: IFsItem) {
+        this.root = root;
     }
 
     private root: IFsItem;
 
     private filesKey() {
-        return `${this.prefix}_files`;
+        return `fs_files`;
     }
 
     private fileKey(fn: string) {
-        return `${this.prefix}_file[${fn}]`;
+        return `fs_file[${fn}]`;
     }
 
     private save() {
         return LocalForageWrapper.saveFsItem(this.filesKey(), this.root);
     }
 
-    async getRootNode() {
-        if (!this.root) {
-            const defaultItem: IFsItem = {fsType: FILE_SYSTEM_TYPE_LOCAL, type: ITEM_MODE_DIRECTORY, children: {}};
-            const storedItem = await LocalForageWrapper.getFsItem(this.filesKey());
-            this.root = storedItem || defaultItem;
-        }
+    getRootNode() {
+        return this.root;
+    }
 
+    async getRootNodeAsync() {
         return this.root;
     }
 
@@ -46,7 +45,7 @@ export class LocalStorageFileSystem implements IFileSystem {
     }
 
     put(fn: string, data: any): Promise<IFsItem> {
-        return this.getRootNode().then(root => {
+        return this.getRootNodeAsync().then(root => {
             const node = findOrCreateFsPath(root, fn);
             const saveFileAction = LocalForageWrapper.saveFile(this.fileKey(fn), data);
             const updateFileTreeAction = this.save();
@@ -54,18 +53,4 @@ export class LocalStorageFileSystem implements IFileSystem {
                 .then(_ => node);
         });
     }
-}
-
-export const initLocalStorageFsTreeData = (): IJSTreeNodeHelper => {
-    return {
-        text: "Local storage",
-        id: "localStorage",
-        icon: "glyphicon glyphicon-hdd",
-        state: {opened: true},
-        children: [],
-        data: {
-            fsType: FILE_SYSTEM_TYPE_LOCAL,
-            type: ITEM_MODE_DIRECTORY
-        }
-    };
-};
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/v1/GoldenLayout/GoldenLayoutUI.ts b/src/v1/GoldenLayout/GoldenLayoutUI.ts
index 3ec45843..992c151e 100644
--- a/src/v1/GoldenLayout/GoldenLayoutUI.ts
+++ b/src/v1/GoldenLayout/GoldenLayoutUI.ts
@@ -11,10 +11,8 @@ export class GoldenLayoutUI {
     genCodeViewer: Ace.Editor;
     genCodeDebugViewer: Ace.Editor;
     errorWindow: GoldenLayout.Container;
-    infoPanel: GoldenLayout.Container;
     fileTreeCont: JQuery;
     fileTree: JSTree;
-    converterPanel: JQuery;
 
     constructor() {
         const goldenLayout = new GoldenLayoutModule(GoldenLayoutUIConfig);
@@ -25,12 +23,12 @@ export class GoldenLayoutUI {
 
         this.layoutManager.addExistingDiv("hex-viewer");
         this.layoutManager.addExistingDiv("parsedDataTree");
+        this.layoutManager.addExistingDiv("fileTreeNew");
 
         this.layoutManager.addComponent("errorWindow", cont => {
             cont.getElement().append($("<div></div>"));
         });
 
-        this.layoutManager.addComponent("fileTreeCont", cont => cont.getElement().append($("#fileTreeCont")));
         this.layoutManager.addExistingDiv("infoPanel");
         this.layoutManager.addComponent("converterPanel", cont => cont.getElement().append($("#converter-panel")));
 
diff --git a/src/v1/GoldenLayout/GoldenLayoutUIConfig.ts b/src/v1/GoldenLayout/GoldenLayoutUIConfig.ts
index b9b52e19..36e09654 100644
--- a/src/v1/GoldenLayout/GoldenLayoutUIConfig.ts
+++ b/src/v1/GoldenLayout/GoldenLayoutUIConfig.ts
@@ -5,7 +5,7 @@ export const GoldenLayoutUIConfig: GoldenLayout.Config = {
     content: [
         {
             type: "row", content: []
-                .concat({type: "component", componentName: "fileTreeCont", title: "files", isClosable: false, width: 12})
+                .concat({type: "component", componentName: "fileTreeNew", title: "files", isClosable: false, width: 12})
                 .concat(
                     {
                         type: "column", id: "mainArea", isClosable: false, content: [
diff --git a/src/v1/GoldenLayout/GoldenLayoutWrapper.ts b/src/v1/GoldenLayout/GoldenLayoutWrapper.ts
index 55f271ff..c8a353c1 100644
--- a/src/v1/GoldenLayout/GoldenLayoutWrapper.ts
+++ b/src/v1/GoldenLayout/GoldenLayoutWrapper.ts
@@ -1,5 +1,10 @@
 import {AceEditorComponent, IAceEditorComponentOptions} from "./AceEditorComponent";
 import GoldenLayout from "golden-layout";
+import {useAceEditorStore} from "../../Stores/AceEditorStore";
+import {DelayAction} from "../utils/DelayAction";
+import {mainEditorOnChange, mainEditorRecompile} from "../../GlobalActions/MainEditorOnChange";
+import {Ace} from "ace-builds";
+import {parseAction} from "../../GlobalActions/ParseAction";
 
 export class GoldenLayoutWrapper<T> {
     dynCompId = 1;
@@ -53,7 +58,35 @@ export class GoldenLayoutWrapper<T> {
 
     addAceCodeEditorTab(name: string, options: IAceEditorComponentOptions) {
         this.addComponent(name, container => {
-            return AceEditorComponent(container, options);
+            const newEditor = AceEditorComponent(container, options);
+            switch (name) {
+                case "ksyEditor":
+                    useAceEditorStore().setKaitaiKsyEditor(newEditor);
+                    const editDelay = new DelayAction(500);
+                    newEditor.on("change", (change) => {
+                        editDelay.do(() => mainEditorOnChange(change, newEditor.getValue()));
+                    });
+                    newEditor.commands.addCommand({
+                        name: "compile", bindKey: {win: "Ctrl-Enter", mac: "Command-Enter"},
+                        exec: (editor: Ace.Editor) => {
+                            mainEditorRecompile(editor);
+                        }
+                    });
+                    break;
+                case "genCodeViewer":
+                    useAceEditorStore().setReleaseCodeEditor(newEditor);
+                    break;
+                case "genCodeDebugViewer": {
+                    useAceEditorStore().setDebugCodeEditor(newEditor);
+                    newEditor.commands.addCommand({
+                        name: "compile", bindKey: {win: "Ctrl-Enter", mac: "Command-Enter"},
+                        exec: (editor: Ace.Editor) => {
+                            parseAction();
+                        }
+                    });
+                }
+            }
+            return newEditor;
         });
     }
 
diff --git a/src/v1/app.files.ts b/src/v1/app.files.ts
index 03aa3a10..862b816c 100644
--- a/src/v1/app.files.ts
+++ b/src/v1/app.files.ts
@@ -1,40 +1,24 @@
 import {app} from "./app";
 import {fileSystemsManager} from "./FileSystems/FileSystemManager";
-import {initKaitaiFsTreeData} from "./FileSystems/KaitaiFileSystem";
-import {initLocalStorageFsTreeData} from "./FileSystems/LocalStorageFileSystem";
-import {getSummaryIfPresent, mapToJSTreeNodes} from "./FileSystems/FileSystemHelper";
+import {getSummaryIfPresent} from "./FileSystems/FileSystemHelper";
 import {FILE_SYSTEM_TYPE_LOCAL, IFsItem, IFsItemSummary, ITEM_MODE_DIRECTORY} from "./FileSystems/FileSystemsTypes";
 import dateFormat from "dateformat";
 import {ArrayUtils} from "./utils/Misc/ArrayUtils";
 import {FileActionsWrapper} from "./utils/Files/FileActionsWrapper";
 import {openUploadFilesOperatingSystemModal} from "./JQueryComponents/Files/UploadFilesOSModal";
+import {YamlFileInfo} from "../DataManipulation/CompilationModule/JsImporter";
 
 let fileTreeCont: JQuery;
 
-export async function refreshFsNodes() {
-    var localStorageNode = app.ui.fileTree.get_node("localStorage");
-    var root = await fileSystemsManager.local.getRootNode();
-    app.ui.fileTree.delete_node(localStorageNode.children);
-    if (root)
-        mapToJSTreeNodes(root).forEach((node: any) => app.ui.fileTree.create_node(localStorageNode, node));
-}
 
 export async function addKsyFile(parent: string | Element, ksyFn: string, content: string) {
     const name = ArrayUtils.last(ksyFn.split("/"));
     let fsItem = await fileSystemsManager.local.put(name, content);
     app.ui.fileTree.create_node(app.ui.fileTree.get_node(parent), {text: name, data: fsItem, icon: "glyphicon glyphicon-list-alt"},
         "last", (node: any) => app.ui.fileTree.activate_node(node, null));
-    await app.loadFsItem(fsItem, true);
     return fsItem;
 }
 
-export interface IJSTreeNode<TData> {
-    id?: string;
-    text?: string;
-    icon?: string;
-    children?: IJSTreeNode<TData>[] | boolean;
-    data?: TData;
-}
 
 export function initFileTree() {
     fileTreeCont = app.ui.fileTreeCont.find(".fileTree");
@@ -50,13 +34,12 @@ export function initFileTree() {
             },
             themes: {name: "default-dark", dots: false, icons: true, variant: "small"},
             data: [
-                initKaitaiFsTreeData(fileSystemsManager.kaitai),
-                initLocalStorageFsTreeData()
+                // initKaitaiFsTreeData(fileSystemsManager.kaitai),
+                // initLocalStorageFsTreeData()
             ],
         },
         plugins: ["wholerow", "dnd"]
     }).jstree(true);
-    refreshFsNodes();
 
     var uiFiles = {
         fileTreeContextMenu: $("#fileTreeContextMenu"),
@@ -73,18 +56,6 @@ export function initFileTree() {
         downloadFile: $("#downloadFile"),
     };
 
-    function convertTreeNode(treeNode: any) {
-        const data = treeNode.data;
-        data.children = {};
-        treeNode.children.forEach((child: any) => data.children[child.text] = convertTreeNode(child));
-        return data;
-    }
-
-    function saveTree() {
-        const localRootNode = app.ui.fileTree.get_json()[1];
-        const convertedLocalRootNode = convertTreeNode(localRootNode);
-        fileSystemsManager.local.setRootNode(convertedLocalRootNode);
-    }
 
     var contextMenuTarget: string | Element = null;
 
@@ -180,36 +151,27 @@ export function initFileTree() {
     ctxAction(uiFiles.deleteItem, () => app.ui.fileTree.delete_node(app.ui.fileTree.get_selected()));
     ctxAction(uiFiles.openItem, () => $(contextMenuTarget).trigger("dblclick"));
 
-    ctxAction(uiFiles.generateParser, e => {
+    ctxAction(uiFiles.generateParser, async e => {
         var fsItem = getSelectedData();
         var linkData = $(e.target).data();
-        //console.log(fsItem, linkData);
-
-        fileSystemsManager[fsItem.fsType].get(fsItem.fn).then((content: string) => {
-            return app.compilerService.compile(fsItem, content, linkData.kslang, !!linkData.ksdebug).then((compiled: any) => {
-                Object.keys(compiled).forEach(fileName => {
-                    const options = {
-                        lang: linkData.acelang,
-                        isReadOnly: true,
-                        data: compiled[fileName]
-                    };
-                    app.ui.layoutManager.addDynamicAceCodeEditorTab(fileName, options);
-                });
-            });
+        const content = await fileSystemsManager[fsItem.fsType].get(fsItem.fn) as string;
+
+        const yamlFile: YamlFileInfo = {
+            storeId: fsItem.fsType,
+            filePath: fsItem.fn,
+            fileContent: content
+        };
+        let compiled = await app.compilerService.compileSingleTarget(yamlFile, linkData.kslang, !!linkData.ksdebug);
+        Object.keys(compiled.result).forEach(fileName => {
+            const options = {
+                lang: linkData.acelang,
+                isReadOnly: true,
+                data: compiled[fileName]
+            };
+            app.ui.layoutManager.addDynamicAceCodeEditorTab(fileName, options);
         });
     });
 
-    fileTreeCont.on("create_node.jstree rename_node.jstree delete_node.jstree move_node.jstree paste.jstree", saveTree);
-    fileTreeCont.on("move_node.jstree", (e, data) => app.ui.fileTree.open_node(app.ui.fileTree.get_node(data.parent)));
-    fileTreeCont.on("select_node.jstree", (e, selectNodeArgs) => {
-        var fsItem = (<IJSTreeNode<IFsItem>>selectNodeArgs.node).data;
-        [uiFiles.downloadFile, uiFiles.downloadItem].forEach(i => i.toggleClass("disabled", !(fsItem && fsItem.type === "file")));
-    });
-
-    var lastMultiSelectReport = 0;
-    fileTreeCont.on("select_node.jstree", (e, args) => {
-        lastMultiSelectReport = e.timeStamp;
-    });
 
     var ksyParent: string | Element;
 
@@ -248,10 +210,6 @@ export function initFileTree() {
         addKsyFile(ksyParent, (parentData.fn ? `${parentData.fn}/` : "") + `${ksyName}.ksy`, `meta:\n  id: ${ksyName}\n  file-extension: ${ksyName}\n`);
     });
 
-    fileTreeCont.bind("dblclick.jstree", function (event) {
-        app.loadFsItem(<IFsItem>app.ui.fileTree.get_node(event.target).data);
-    });
-
     ctxAction(uiFiles.cloneKsyFile, e => {
         var fsItem = getSelectedData();
         var newFn = fsItem.fn.replace(".ksy", "_" + dateFormat(new Date(), "yyyymmdd_HHMMss") + ".ksy");
diff --git a/src/v1/app.ts b/src/v1/app.ts
index 88155304..01161657 100644
--- a/src/v1/app.ts
+++ b/src/v1/app.ts
@@ -11,172 +11,31 @@ import "./ImportJQuery";
 import "bootstrap";
 import "jstree";
 
-import {addKsyFile, initFileTree, refreshFsNodes} from "./app.files";
-import {codeExecutionWorkerApi} from "./Workers/WorkerApi";
 import {initFileDrop} from "./JQueryComponents/Files/FileDrop";
-import {DelayAction} from "./utils/DelayAction";
-import {exportToJson} from "./utils/ExportToJson";
 import {ErrorWindowHandler} from "./app.errors";
-import {fileSystemsManager} from "./FileSystems/FileSystemManager";
-import {FILE_SYSTEM_TYPE_KAITAI, IFsItem} from "./FileSystems/FileSystemsTypes";
-import {StringUtils} from "./utils/Misc/StringUtils";
-import {CompilerService} from "./utils/Compilation/CompilerService";
-import {CompilationError} from "./utils/Compilation/CompilationError";
-import {IFileProcessItem} from "./utils/Files/Types";
-import "../extensions";
+import {CompilerService} from "../DataManipulation/CompilationModule/CompilerService";
 import {GoldenLayoutUI} from "./GoldenLayout/GoldenLayoutUI";
-import {LocalForageWrapper} from "./utils/LocalForageWrapper";
 import {createApp} from "vue";
 import App from "../App.vue";
-import {IAceEditorComponentOptions} from "./GoldenLayout/AceEditorComponent";
 import {createPinia} from "pinia";
-import {useCurrentBinaryFileStore} from "../Stores/CurrentBinaryFileStore";
-import {useIdeSettingsStore} from "../Stores/IdeSettingsStore";
+import {processUploadedFiles} from "../GlobalActions/UploadFiles";
 
 const vueApp = createApp(App);
 vueApp.use(createPinia());
 vueApp.mount("body");
 
-$.jstree.defaults.core.force_text = true;
-
 const qs = {};
 location.search.substr(1).split("&").map(x => x.split("=")).forEach(x => qs[x[0]] = x[1]);
 
 
-class AppVM {
-    ui: GoldenLayoutUI;
-
-    public exportToJson(hex: boolean) {
-        exportToJson(hex)
-            .then((json: string) => {
-                const options: IAceEditorComponentOptions = {
-                    lang: "json",
-                    isReadOnly: true,
-                    data: json
-                };
-                this.ui.layoutManager.addDynamicAceCodeEditorTab("json export", options);
-            });
-    }
-}
 
 class AppController {
     compilerService = new CompilerService();
     ui = new GoldenLayoutUI();
-    vm = new AppVM();
     errors: ErrorWindowHandler = null;
 
     init() {
-        this.vm.ui = this.ui;
         this.errors = new ErrorWindowHandler(this.ui.layoutManager.getLayoutNodeById("mainArea"));
-        initFileTree();
-    }
-
-    ksyFsItemName = "ksyFsItem";
-    lastKsyContent: string = null;
-
-    isKsyFile(fn: string) {
-        return fn.toLowerCase().endsWith(".ksy");
-    }
-
-    compile(srcYamlFsItem: IFsItem, srcYaml: string, kslang: string, debug: true | false | "both"): Promise<any> {
-        return this.compilerService.compile(srcYamlFsItem, srcYaml, kslang, debug).then(result => {
-            return result;
-        }, (error: CompilationError) => {
-            this.errors.handle(error.error);
-            return Promise.reject(error);
-        });
-    }
-
-    async recompile() {
-        let ksyFsItem = await LocalForageWrapper.getFsItem(this.ksyFsItemName);
-        const srcYaml = this.ui.ksyEditor.getValue();
-        const changed = this.lastKsyContent !== srcYaml;
-
-        if (changed && ksyFsItem.fsType === FILE_SYSTEM_TYPE_KAITAI) {
-            let fsItem = await addKsyFile("localStorage", ksyFsItem.fn.replace(".ksy", "_modified.ksy"), srcYaml);
-            await LocalForageWrapper.saveFsItem(this.ksyFsItemName, fsItem);
-        }
-
-        if (changed)
-            await fileSystemsManager[ksyFsItem.fsType].put(ksyFsItem.fn, srcYaml);
-
-        let compiled = await this.compile(ksyFsItem, srcYaml, "javascript", "both");
-        if (!compiled) return;
-
-        var fileNames = Object.keys(compiled.release);
-        let debugUserTypes = localStorage.getItem("userTypes") || "";
-        if (debugUserTypes) debugUserTypes += "\n\n";
-        this.ui.genCodeViewer.setValue(debugUserTypes + fileNames.map(x => compiled.release[x]).join(""), -1);
-        this.ui.genCodeDebugViewer.setValue(debugUserTypes + fileNames.map(x => compiled.debug[x]).join(""), -1);
-        await this.reparse();
-    }
-
-    formatReady: Promise<any> = null;
-    inputReady: Promise<any> = null;
-
-    async reparse() {
-        try {
-            await Promise.all([this.inputReady, this.formatReady]);
-
-            let debugCode = this.ui.genCodeDebugViewer.getValue();
-            let jsClassName = this.compilerService.ksySchema.meta.id.split("_").map((x: string) => StringUtils.ucFirst(x)).join("");
-            await codeExecutionWorkerApi.initCodeAction(debugCode, jsClassName, this.compilerService.ksyTypes);
-
-            const ideSettingsStore = useIdeSettingsStore();
-            const {resultObject: exportedRoot, error: parseError} = await codeExecutionWorkerApi.reparseAction(ideSettingsStore.eagerMode);
-            kaitaiIde.root = exportedRoot;
-            const store = useCurrentBinaryFileStore();
-            store.updateParsedFile(exportedRoot);
-
-            this.errors.handle(parseError);
-        } catch (error) {
-            this.errors.handle(error);
-        }
-    }
-
-    inputContent: ArrayBuffer;
-    inputFsItem: IFsItem;
-    lastKsyFsItem: IFsItem;
-
-    async loadFsItem(fsItem: IFsItem, refreshGui: boolean = true): Promise<any> {
-        if (!fsItem || fsItem.type !== "file")
-            return;
-
-        var contentRaw = await fileSystemsManager[fsItem.fsType].get(fsItem.fn);
-        if (this.isKsyFile(fsItem.fn)) {
-            let content = <string>contentRaw;
-            await LocalForageWrapper.saveFsItem(this.ksyFsItemName, fsItem);
-            this.lastKsyFsItem = fsItem;
-            this.lastKsyContent = <string>content;
-            if (this.ui.ksyEditor.getValue() !== content)
-                this.ui.ksyEditor.setValue(content, -1);
-            var ksyEditor = this.ui.layoutManager.getLayoutNodeById("ksyEditor");
-            (<any>ksyEditor).container.setTitle(fsItem.fn);
-        } else {
-            let content = <ArrayBuffer>contentRaw;
-            this.inputFsItem = fsItem;
-            this.inputContent = content;
-            const currentBinaryFileStore = useCurrentBinaryFileStore();
-            currentBinaryFileStore.newBinaryFileSelected(fsItem.fn || "", content, "SOURCE_REPARSE");
-
-            await LocalForageWrapper.saveFsItem("inputFsItem", fsItem);
-
-            this.ui.layoutManager.getLayoutNodeById("inputBinaryTab").setTitle(fsItem.fn);
-            await codeExecutionWorkerApi.setInputAction(content);
-
-            if (refreshGui) {
-                await this.reparse();
-            }
-        }
-    }
-
-    addNewFiles(files: IFileProcessItem[]) {
-        return Promise.all(files.map(file => (this.isKsyFile(file.file.name) ? <Promise<any>>file.read("text") : file.read("arrayBuffer"))
-            .then(content => fileSystemsManager.local.put(file.file.name, content))))
-            .then(fsItems => {
-                refreshFsNodes();
-                return fsItems.length === 1 ? this.loadFsItem(fsItems[0]) : Promise.resolve(null);
-            });
     }
 }
 
@@ -187,43 +46,8 @@ kaitaiIde.version = "0.1";
 kaitaiIde.commitId = "";
 kaitaiIde.commitDate = "";
 
-//localStorage.setItem("lastVersion", kaitaiIde.version);
-
 $(() => {
     app.init();
-
-    app.ui.genCodeDebugViewer.commands.addCommand({
-        name: "compile", bindKey: {win: "Ctrl-Enter", mac: "Command-Enter"},
-        exec: function (editor: any) {
-            app.reparse();
-        }
-    });
-    app.ui.ksyEditor.commands.addCommand({
-        name: "compile", bindKey: {win: "Ctrl-Enter", mac: "Command-Enter"},
-        exec: function (editor: any) {
-            app.recompile();
-        }
-    });
-
-    initFileDrop("fileDrop", (files: any) => app.addNewFiles(files));
-
-    async function loadCachedFsItem(cacheKey: string, defFsType: string, defSample: string) {
-        let fsItem = await LocalForageWrapper.getFsItem(cacheKey);
-        await app.loadFsItem(fsItem || <IFsItem>{fsType: defFsType, fn: defSample, type: "file"}, false);
-    }
-
-    app.inputReady = loadCachedFsItem("inputFsItem", "kaitai", "samples/sample1.zip");
-    app.formatReady = loadCachedFsItem(app.ksyFsItemName, "kaitai", "formats/archive/zip.ksy");
-
-    const editDelay = new DelayAction(500);
-    if (!("noAutoCompile" in qs))
-        app.ui.ksyEditor.on("change", () => editDelay.do(() => app.recompile()));
-
-    $(document).on("mousedown", e => {
-        if ($(e.target).parents(".dropdown-menu").length === 0)
-            $(".dropdown").hide();
-    });
-
-
+    initFileDrop("fileDrop", (files: any) => processUploadedFiles(files));
     kaitaiIde.app = app;
 });
diff --git a/src/v1/utils/Compilation/CompilerService.ts b/src/v1/utils/Compilation/CompilerService.ts
deleted file mode 100644
index f11501a2..00000000
--- a/src/v1/utils/Compilation/CompilerService.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import {JsImporter} from "./JsImporter";
-import {IFsItem} from "../../FileSystems/FileSystemsTypes";
-import {performanceHelper} from "../PerformanceHelper";
-import {SchemaUtils} from "./SchemaUtils";
-import KaitaiStructCompiler from "kaitai-struct-compiler";
-import {CompilationError} from "./CompilationError";
-import {YamlParser} from "./YamlParser";
-import {IKsyTypes} from "../../Workers/CodeExecution/Types";
-export class CompilerService {
-    jsImporter: JsImporter;
-    ksySchema: KsySchema.IKsyFile;
-    ksyTypes: IKsyTypes;
-
-
-
-    compile(srcYamlFsItem: IFsItem, srcYaml: string, kslang: string, debug: true | false | "both"): Promise<any> {
-        var perfYamlParse = performanceHelper.measureAction("YAML parsing");
-
-        try {
-            this.ksySchema = YamlParser.parseIKsyFile(srcYaml, srcYamlFsItem.fn);
-            this.ksyTypes = SchemaUtils.collectKsyTypes(this.ksySchema);
-
-            // we have to modify the schema (add typesByJsName for example) before sending into the compiler, so we need a copy
-            var compilerSchema = YamlParser.parseIKsyFile(srcYaml, srcYamlFsItem.fn);
-        } catch (parseErr) {
-            return Promise.reject(new CompilationError("yaml", parseErr));
-        }
-
-        this.jsImporter = new JsImporter(srcYamlFsItem, this.ksyTypes);
-
-        perfYamlParse.done();
-
-        //console.log("ksySchema", ksySchema);
-
-        if (kslang === "json")
-            return Promise.resolve();
-        else {
-            var perfCompile = performanceHelper.measureAction("Compilation");
-
-            var ks = KaitaiStructCompiler;
-            var rReleasePromise = (debug === false || debug === "both") ? ks.compile(kslang, compilerSchema, this.jsImporter, false) : Promise.resolve(null);
-            var rDebugPromise = (debug === true || debug === "both") ? ks.compile(kslang, compilerSchema, this.jsImporter, true) : Promise.resolve(null);
-            //console.log("rReleasePromise", rReleasePromise, "rDebugPromise", rDebugPromise);
-            return perfCompile.done(Promise.all([rReleasePromise, rDebugPromise]))
-                .then(([rRelease, rDebug]) => {
-                    //console.log("rRelease", rRelease, "rDebug", rDebug);
-                    return rRelease && rDebug ? {debug: rDebug, release: rRelease} : rRelease ? rRelease : rDebug;
-                }).catch(compileErr => Promise.reject(new CompilationError("kaitai", compileErr)));
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/v1/utils/Compilation/JsImporter.ts b/src/v1/utils/Compilation/JsImporter.ts
deleted file mode 100644
index d40a8d82..00000000
--- a/src/v1/utils/Compilation/JsImporter.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import {IFsItem} from "../../FileSystems/FileSystemsTypes";
-import {fileSystemsManager} from "../../FileSystems/FileSystemManager";
-import {SchemaUtils} from "./SchemaUtils";
-import {YamlParser} from "./YamlParser";
-import {JsImporterError} from "./JsImporterError";
-import {IKsyTypes} from "../../Workers/CodeExecution/Types";
-
-interface IYamlImporter {
-    importYaml(name: string, mode: string): Promise<KsySchema.IKsyFile>;
-}
-
-export class JsImporter implements IYamlImporter {
-    constructor(private rootFsItem: IFsItem, private ksyTypes: IKsyTypes) {
-    }
-
-    // noinspection JSUnusedGlobalSymbols
-    /**
-     * Used by KaitaiStructCompiler.compile()
-     */
-    async importYaml(name: string, mode: string) {
-        var loadFn;
-        var importedFsType = this.rootFsItem.fsType;
-        if (mode === "abs") {
-            loadFn = "formats/" + name;
-            importedFsType = "kaitai";
-        } else {
-            var fnParts = this.rootFsItem.fn.split("/");
-            fnParts.pop();
-            loadFn = fnParts.join("/") + "/" + name;
-
-            if (loadFn.startsWith("/")) {
-                loadFn = loadFn.substr(1);
-            }
-        }
-
-        console.log(`import yaml: ${name}, mode: ${mode}, loadFn: ${loadFn}, root:`, this.rootFsItem);
-        const fn = `${loadFn}.ksy`;
-        const sourceAppendix = mode === "abs" ? "kaitai.io" : "local storage";
-        let ksyContent;
-        try {
-            ksyContent = await fileSystemsManager[importedFsType].get(fn);
-        } catch (e) {
-            const errorMessage = `failed to import spec ${fn} from ${sourceAppendix}${e.message ? ": " + e.message : ""}`;
-            throw new JsImporterError(errorMessage);
-        }
-
-        const ksyModel = YamlParser.parseIKsyFile(<string>ksyContent, fn);
-        Object.assign(this.ksyTypes, SchemaUtils.collectKsyTypes(ksyModel));
-
-        // we have to modify the schema (add typesByJsName for example) before sending into the compiler, so we need a copy
-        const compilerSchema = YamlParser.parseIKsyFile(<string>ksyContent, fn);
-        return compilerSchema;
-    }
-}
\ No newline at end of file
diff --git a/src/v1/utils/Compilation/SchemaUtils.ts b/src/v1/utils/Compilation/SchemaUtils.ts
deleted file mode 100644
index 8f858896..00000000
--- a/src/v1/utils/Compilation/SchemaUtils.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import {StringUtils} from "../Misc/StringUtils";
-import {IKsyTypes} from "../../Workers/CodeExecution/Types";
-
-export class SchemaUtils {
-    static ksyNameToJsName(ksyName: string, isProp: boolean) {
-        return ksyName.split("_")
-            .map((x, i) => i === 0 && isProp ? x : StringUtils.ucFirst(x)).join("");
-    }
-
-    static collectTypes(types: IKsyTypes, parent: KsySchema.IType) {
-        if (parent.types) {
-            parent.typesByJsName = {};
-            Object.keys(parent.types).forEach(name => {
-                var jsName = SchemaUtils.ksyNameToJsName(name, false);
-                parent.typesByJsName[jsName] = types[jsName] = parent.types[name];
-                SchemaUtils.collectTypes(types, parent.types[name]);
-            });
-        }
-
-        if (parent.instances) {
-            parent.instancesByJsName = {};
-            Object.keys(parent.instances).forEach(name => {
-                var jsName = SchemaUtils.ksyNameToJsName(name, true);
-                parent.instancesByJsName[jsName] = parent.instances[name];
-            });
-        }
-    }
-
-    static collectKsyTypes(schema: KsySchema.IKsyFile): IKsyTypes {
-        var types: IKsyTypes = {};
-        SchemaUtils.collectTypes(types, schema);
-
-        var typeName = SchemaUtils.ksyNameToJsName(schema.meta.id, false);
-        types[typeName] = schema;
-
-        return types;
-    }
-}
\ No newline at end of file
diff --git a/src/v1/utils/Compilation/YamlParser.ts b/src/v1/utils/Compilation/YamlParser.ts
deleted file mode 100644
index 0d54e753..00000000
--- a/src/v1/utils/Compilation/YamlParser.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as jsyaml from "js-yaml";
-
-export class YamlParser {
-    public static parseIKsyFile(yamlContents: string, filename: string): KsySchema.IKsyFile {
-        const options = {
-            schema: jsyaml.CORE_SCHEMA,
-            filename: filename,
-        };
-        return jsyaml.load(yamlContents, options);
-    }
-}
\ No newline at end of file
diff --git a/src/v1/utils/ExportedValueMappers/ObjectToIExportedValueMapper.ts b/src/v1/utils/ExportedValueMappers/ObjectToIExportedValueMapper.ts
index 430e49ac..607a7515 100644
--- a/src/v1/utils/ExportedValueMappers/ObjectToIExportedValueMapper.ts
+++ b/src/v1/utils/ExportedValueMappers/ObjectToIExportedValueMapper.ts
@@ -1,5 +1,5 @@
 import {IExportedValue, IInstance, ObjectType} from "../../../entities";
-import {IKsyTypes} from "../../Workers/CodeExecution/Types";
+import {IKsyTypes} from "../../../DataManipulation/ParsingModule/CodeExecution/Types";
 
 interface IDebugInfo {
     start: number;
diff --git a/src/v1/utils/Files/FileActionsWrapper.ts b/src/v1/utils/Files/FileActionsWrapper.ts
index 5c597873..d3a09101 100644
--- a/src/v1/utils/Files/FileActionsWrapper.ts
+++ b/src/v1/utils/Files/FileActionsWrapper.ts
@@ -1,7 +1,7 @@
 import {IFileProcessCallback, IFileProcessItem} from "./Types";
 import {useCurrentBinaryFileStore} from "../../../Stores/CurrentBinaryFileStore";
 import {ArrayUtils} from "../Misc/ArrayUtils";
-import {app} from "../../app";
+import {useAppStore} from "../../../Stores/AppStore";
 
 export class FileActionsWrapper {
 
@@ -44,18 +44,20 @@ export class FileActionsWrapper {
 
     public static downloadBinFromSelection(): void {
         const store = useCurrentBinaryFileStore();
+        const appStore = useAppStore();
 
         const start = store.selectionStart;
         const end = store.selectionEnd;
         const fileDataLength = end - start + 1;
-        const noContentToDownload =  start === -1 || end === -1;
+        const noContentToDownload = start === -1 || end === -1;
         if (noContentToDownload) return;
 
-        const fileName = ArrayUtils.last(app.inputFsItem.fn.split("/"));
+        const filePath = appStore.selectedBinaryInfo.filePath;
+        const fileName = ArrayUtils.last(filePath.split("/"));
         const hexRange = `0x${start.toString(16)}-0x${end.toString(16)}`;
         const downloadedFileName = `${fileName}_${hexRange}.bin`;
 
-        FileActionsWrapper.saveFile(new Uint8Array(app.inputContent, start, fileDataLength), downloadedFileName);
+        FileActionsWrapper.saveFile(new Uint8Array(store.fileContent, start, fileDataLength), downloadedFileName);
     }
 
     private static processUploadedFiles(files: FileList): IFileProcessItem[] {
diff --git a/src/v1/utils/Misc/RegexUtils.ts b/src/v1/utils/Misc/RegexUtils.ts
deleted file mode 100644
index fedc39dc..00000000
--- a/src/v1/utils/Misc/RegexUtils.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export class RegexUtils {
-    public static matches(regex: RegExp, input: string) {
-        const matches: RegExpExecArray[] = [];
-        let match: RegExpExecArray;
-        while (match = regex.exec(input))
-            matches.push(match);
-        return matches;
-    }
-}
\ No newline at end of file